Publicado: 28 de abril de 2025, Última atualização: 21 de maio de 2025
A evolução rápida da IA está abrindo novas fronteiras para aplicativos da Web, principalmente com o advento dos recursos no dispositivo. Descubra como a CyberAgent, uma empresa japonesa líder de internet, está usando a IA integrada do Chrome e a API Prompt para melhorar a experiência de blogs na plataforma Ameba Blog.
Compartilhamos os objetivos deles, os benefícios de trabalhar com a IA integrada, os desafios que enfrentaram e insights valiosos para outros desenvolvedores que usam a IA integrada.
O que é a API Prompt?
| Explicação | Web | Extensões | Status do Chrome | Intenção |
|---|---|---|---|---|
| GitHub |  No EPP |
 Chrome 137 Beta |
Ver | Intent to Experiment |
A API Prompt ajuda os desenvolvedores a usar uma grande variedade de modelos de linguagem para adicionar recursos de IA diretamente aos apps. Ao definir comandos personalizados, os apps podem realizar tarefas como extração de dados, geração de conteúdo e respostas personalizadas. No Chrome, a API Prompt executa inferência do lado do cliente com o Gemini Nano. Esse processamento local, independentemente do modelo usado, melhora a privacidade dos dados e a velocidade de resposta. Seja qual for o modelo usado, a velocidade de resposta do cliente.
Assistência de IA para autores do Ameba Blog
A CyberAgent reconheceu um problema comum para os autores: o processo de criação de conteúdo atraente, especialmente títulos, que muitas vezes consome muito tempo. Eles presumiram que integrar funções com tecnologia de IA na interface de criação de blogs poderia melhorar significativamente a qualidade e a eficiência da criação de conteúdo. O objetivo era oferecer ferramentas que inspirassem e ajudassem os blogueiros a criar conteúdo envolvente.
A CyberAgent desenvolveu uma extensão do Chrome com a API Prompt. Essa extensão oferece um conjunto de recursos com tecnologia de IA para ajudar os redatores do Ameba Blog a criar títulos e cabeçalhos, parágrafos subsequentes e melhorias gerais no texto.
A CyberAgent queria flexibilidade de recursos, o que levou diretamente à API Prompt. Com infinitas possibilidades em uma API, a CyberAgent conseguiu determinar exatamente o que funcionaria melhor e seria mais útil para os autores do Ameba.
A CyberAgent testou a extensão com um número selecionado de blogueiros, que ofereceram insights valiosos para a praticidade das funções oferecidas. O feedback ajudou a CyberAgent a identificar melhores aplicativos para assistência de IA e refinar o design da extensão. Com base nos resultados e feedback positivos, a CyberAgent pretende lançar esse recurso no futuro, trazendo o poder da IA do lado do cliente diretamente para a comunidade de blogs.
Vamos conferir esses recursos mais detalhadamente.
Escreva títulos e cabeçalhos melhores
A extensão gera várias sugestões de título com base no conteúdo completo do blog. Os redatores de blogs podem refinar ainda mais essas sugestões, com opções que incluem: "Regenerate", "More Polite", "More Casual" ou "Generate Similar Titles", entre outras.
A CyberAgent projetou a interface especificamente para que os usuários não precisem escrever nenhum comando. Dessa forma, qualquer usuário que não conheça a engenharia de comando também pode se beneficiar do poder da IA.
A extensão também pode gerar cabeçalhos atraentes para seções individuais do blog, que os autores podem solicitar selecionando o texto relevante para um título.
O código para gerar um título com a API Prompt inclui uma solicitação inicial e uma solicitação do usuário. O comando inicial fornece contexto e instruções para receber um tipo específico de saída, enquanto as solicitações do usuário pedem que o modelo interaja com o que o usuário escreve. Leia mais sobre o código em Implantar a assistência de IA.
Gerar parágrafos subsequentes
A extensão ajuda os blogueiros a superar o bloqueio criativo gerando parágrafos seguintes com base no texto selecionado. Com o contexto do parágrafo anterior, a IA cria uma continuação do parágrafo, permitindo que os autores mantenham o fluxo criativo.
Melhorar e editar o texto
O Gemini Nano analisa o texto selecionado e pode sugerir melhorias. Os usuários podem regenerar as melhorias com outras notas sobre a escolha do tom e do idioma para tornar a cópia "mais curta" ou "mais simples".
Implantar a assistência de IA
O CyberAgent dividiu o código da extensão em três etapas: criação de sessão, gatilho e solicitação de modelo.
Primeiro, eles verificam com o navegador se a IA integrada está disponível e é compatível. Se sim, eles criam uma sessão com parâmetros padrão.
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
Cada recurso tem uma função auxiliar acionada pelo usuário. Quando acionado, quando o usuário clica no botão relevante, ele atualiza a sessão de acordo.
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
Depois que a sessão é atualizada, eles solicitam o modelo de acordo com a função. Por exemplo, este é o código para gerar e regenerar um título com um tom mais formal.
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
Os benefícios da IA integrada
A IA integrada é um tipo de IA do lado do cliente, o que significa que a inferência ocorre no dispositivo do usuário. A CyberAgent escolheu usar APIs de IA integradas com o Gemini Nano devido às vantagens interessantes que ele oferece aos desenvolvedores e usuários de aplicativos.
Os principais benefícios do CyberAgent incluem:
- Segurança e privacidade
- Custo
- Receptividade e confiabilidade
- Facilidade de desenvolvimento
Segurança e privacidade
A capacidade de executar modelos de IA diretamente no dispositivo do usuário sem transmitir dados para servidores externos é fundamental. Os rascunhos de blog não são destinados a serem vistos pelo público. Por isso, o CyberAgent não quer enviar esses rascunhos para um servidor de terceiros.
A IA integrada faz o download do Gemini Nano para os dispositivos do usuário, eliminando a necessidade de enviar e receber dados dos servidores. Isso é útil principalmente ao escrever, já que os rascunhos podem incluir informações confidenciais ou expressões indesejadas. A IA integrada mantém o conteúdo original e gerado localmente em vez de enviá-lo para um servidor, o que pode melhorar a segurança e proteger a privacidade do conteúdo.
Economias de custo
Uma das principais vantagens do uso da IA integrada é que o navegador inclui o Gemini Nano e as APIs são sem custo financeiro. Não há custos adicionais ou ocultos.
A IA integrada reduz significativamente os custos do servidor e pode remover totalmente os custos associados à inferência de IA. Essa solução pode ser rapidamente escalonada para uma grande base de usuários e permite que os usuários enviem comandos consecutivos para refinar as saídas sem incorrer em taxas adicionais.
Receptividade e confiabilidade
A IA integrada oferece tempos de resposta consistentes e rápidos, independentemente das condições de rede. Isso permitiu que os usuários gerassem conteúdo repetidas vezes, o que facilita muito a tentativa de novas ideias e a criação de um resultado final satisfatório rapidamente.
Facilidade de desenvolvimento
A IA integrada do Chrome simplifica o processo de desenvolvimento, fornecendo uma API pronta para uso. Os desenvolvedores se beneficiam da facilidade de criar recursos com tecnologia de IA para o aplicativo.
O Gemini Nano e as APIs de IA integradas são instalados no Chrome, então não é necessário fazer mais configurações nem gerenciar modelos. As APIs usam JavaScript, como outras APIs do navegador, e não exigem experiência em aprendizado de máquina.
Como superar desafios para ter melhores resultados
A jornada da CyberAgent com a API Prompt forneceu lições valiosas sobre as diferenças de trabalhar com LLMs do lado do cliente.
- Respostas inconsistentes: assim como outros LLMs, o Gemini Nano não garante saídas idênticas para o mesmo comando. O CyberAgent encontrou respostas em formatos inesperados (como Markdown e JSON inválido). Mesmo com instruções, os resultados podem variar bastante. Ao implementar qualquer aplicativo ou extensão do Chrome com IA integrada, pode ser útil adicionar uma solução alternativa para garantir que a saída esteja sempre no formato correto.
- Limite de tokens: gerenciar o uso de tokens é crucial. A CyberAgent usou propriedades e métodos como
inputUsage,inputQuotaemeasureInputUsage()para gerenciar sessões, manter o contexto e reduzir o consumo de tokens. Isso foi especialmente importante ao refinar títulos. - Restrições de tamanho do modelo: como o modelo é transferido por download e fica no dispositivo do usuário, ele é significativamente menor do que um modelo baseado em servidor. Isso significa que é fundamental fornecer contexto suficiente no comando para alcançar resultados satisfatórios, especialmente para a síntese. Saiba mais sobre como entender os tamanhos de LLM.
A CyberAgent enfatiza que, embora os modelos do lado do cliente ainda não estejam disponíveis em todos os navegadores e dispositivos e os modelos menores tenham limitações, eles ainda podem oferecer um desempenho impressionante para tarefas específicas. A capacidade de iterar rapidamente e experimentar sem custos do lado do servidor faz com que ela seja uma ferramenta valiosa.
Eles aconselham encontrar um equilíbrio, reconhecendo que as respostas perfeitas são difíceis de alcançar com qualquer IA, seja do lado do servidor ou do cliente. Por fim, eles imaginam um futuro em que uma abordagem híbrida, que combina os pontos fortes da IA do lado do servidor e do lado do cliente, vai desbloquear um potencial ainda maior.
No futuro
A exploração da CyberAgent sobre a IA integrada mostra as possibilidades empolgantes de integrações perfeitas de IA para melhorar a experiência do usuário. A extensão criada para funcionar com o Ameba Blog demonstra como essas tecnologias podem ser aplicadas de forma prática para resolver problemas reais, oferecendo lições valiosas para a comunidade de desenvolvimento da Web.
À medida que a tecnologia amadurece e o suporte a navegadores e dispositivos se expande, esperamos ver ainda mais aplicativos inovadores de IA integrada e outras formas de IA do lado do cliente.
Recursos
- Saiba mais sobre a API Prompt
- Começar a usar APIs integradas no Chrome
- Estudo de caso da CyberAgent sobre IA da Web, que aborda esse mesmo tópico.
- Assista O futuro da IA é agora, estudos de caso da CyberAgent sobre IA do lado do cliente
Agradecimentos
Agradecemos aos blogueiros do Ameba, ao, Nodoka, Erin, Chiaki e socchi, que enviaram feedback e ajudaram a melhorar a extensão. Agradecemos a Thomas Steiner, Alexandra Klepper e Sebastian Benz pela ajuda na escrita e revisão desta postagem do blog.