Publicado em 28 de abril de 2025, atualizado pela última vez em 21 de maio de 2025
A rápida evolução da IA está abrindo novas fronteiras para aplicativos da Web, principalmente com o surgimento de recursos no dispositivo. Descubra como a CyberAgent, uma empresa japonesa líder na Internet, está usando a IA integrada do Chrome e a API Prompt para melhorar a experiência de blogs na plataforma Ameba Blog.
Compartilhamos as metas, os benefícios de trabalhar com a IA integrada, os desafios enfrentados 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 |  Teste de origem |
 Chrome 138 |
Ver | Intenção de experimentar |
| GitHub | Teste de origem para parâmetros de amostragem |
Chrome 148 |
Ver | Intenção de experimentar |
A API Prompt ajuda os desenvolvedores a usar modelos de linguagem grandes 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 realiza a inferência do lado do cliente com Gemini Nano. Esse processamento local, independentemente do modelo usado, melhora a privacidade dos dados e a velocidade de resposta. Qualquer que seja 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 geralmente demorado de criar conteúdo atraente, especialmente títulos. Eles levantaram a hipótese de que a integração de 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 deles era fornecer 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 projetados para ajudar os escritores do Ameba Blog a gerar títulos e cabeçalhos, parágrafos subsequentes e melhorias gerais de cópia.
A CyberAgent queria flexibilidade de recursos, o que levou diretamente à API Prompt. Com possibilidades infinitas 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, o que ofereceu insights valiosos sobre a praticidade das funções oferecidas. O feedback ajudou a CyberAgent a identificar melhores aplicações para a 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, levando o poder da IA do lado do cliente diretamente para a comunidade de blogs.
Vamos analisar esses recursos mais de perto.
Escreva títulos e cabeçalhos melhores
A extensão gera várias sugestões de títulos com base no conteúdo completo do blog. Os escritores de blogs podem refinar ainda mais essas sugestões, com opções que incluem: "Regenerar", "Mais educado", "Mais casual" ou "Gerar títulos semelhantes" e muito mais.
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 esteja familiarizado com a engenharia de comandos 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 cabeçalho.
O código para gerar um título com a API Prompt inclui um comando inicial e um comando do usuário. O comando inicial fornece contexto e instruções para receber um tipo específico de saída, enquanto os comandos do usuário pedem que o modelo interaja com o que o usuário escreve. Leia mais sobre o código em Implantar assistência de IA.
Gerar parágrafos subsequentes
A extensão ajuda os blogueiros a superar o bloqueio do escritor, gerando parágrafos subsequentes 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 observações sobre o tom e a escolha do idioma para tornar a cópia "mais fofa" ou "mais simples".
Implantar assistência de IA
A CyberAgent dividiu o código de extensão em três etapas: criação de sessão, acionador e comando do modelo.
Primeiro, eles verificam com o navegador se a IA integrada está disponível e com suporte. 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. Depois de 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, confira o código para gerar um título 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 optou por usar APIs de IA integradas com o Gemini Nano devido às vantagens convincentes que ele oferece aos desenvolvedores e usuários de aplicativos.
Os principais benefícios em que a CyberAgent se concentrou incluem:
- Segurança e privacidade
- Custo
- Capacidade de resposta 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 blogs não devem ser vistos pelo público e, portanto, a CyberAgent não quer enviar esses rascunhos para um servidor de terceiros.
A IA integrada faz o download do Gemini Nano para dispositivos do usuário, eliminando a necessidade de enviar e receber dados de servidores. Isso é particularmente útil ao escrever, já que os rascunhos podem incluir informações confidenciais ou expressões não intencionais. 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 de usar a 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 escalonável para uma grande base de usuários e permite que os usuários enviem comandos consecutivos para refinar as saídas sem gerar taxas adicionais.
Capacidade de resposta e confiabilidade
A IA integrada oferece tempos de resposta consistentes e rápidos, independentemente das condições da rede. Isso permitiu que os usuários gerassem conteúdo várias vezes, o que facilita muito a experimentação 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 disponível. 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 há necessidade de configuração adicional ou gerenciamento de modelos. As APIs usam JavaScript, como outras APIs do navegador, e não exigem experiência em machine learning.
Como superar desafios para melhores resultados
A jornada da CyberAgent com a API Prompt ofereceu lições valiosas sobre as nuances de trabalhar com LLMs do lado do cliente.
- Respostas inconsistentes: como outros LLMs, o Gemini Nano não garante saídas idênticas para o mesmo comando. A CyberAgent encontrou respostas em formatos inesperados (como Markdown e JSON inválido). Mesmo com instruções, é possível que os resultados variem muito. 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 é fundamental. A CyberAgent usou propriedades e métodos como
contextUsage,contextWindowemeasureContextUsage()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 é baixado 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 resumo. 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 universalmente em todos os navegadores e dispositivos, e os modelos menores tenham limitações, eles ainda podem oferecer desempenho impressionante para tarefas específicas. A capacidade de iterar rapidamente e fazer experimentos sem custos do lado do servidor o torna uma ferramenta valiosa.
Eles aconselham a encontrar um equilíbrio, reconhecendo que respostas perfeitas são difíceis de alcançar com qualquer IA, seja do lado do servidor ou do cliente. Por fim, eles veem um futuro em que uma abordagem híbrida, combinando os pontos fortes da IA do lado do servidor e do cliente, vai liberar um potencial ainda maior.
No futuro
A exploração da IA integrada pela CyberAgent mostra as possibilidades interessantes de integrações de IA perfeitas para melhorar as experiências do usuário. A extensão criada para funcionar com o Ameba Blog demonstra como essas tecnologias podem ser aplicadas na prática para resolver problemas do mundo real, oferecendo lições valiosas para a comunidade de desenvolvimento da Web mais ampla.
À medida que a tecnologia amadurece e o suporte para navegadores e dispositivos aumenta, esperamos ver aplicações ainda mais inovadoras de IA integrada e outras formas de IA do lado do cliente.
Recursos
- Saiba mais sobre a API Prompt
- Comece a usar APIs integradas no Chrome
- Estudo de caso da CyberAgent sobre IA da Web, que aborda esse mesmo tema.
- Assista O futuro da IA é agora, estudos de caso da CyberAgent's sobre IA do lado do cliente
Agradecimentos
Agradecemos aos blogueiros da Ameba, ao, Nodoka, Erin, Chiaki, e socchi, que forneceram feedback e ajudaram a melhorar a extensão. Agradecemos a Thomas Steiner, Alexandra Klepper e Sebastian Benz pela ajuda na redação e revisão desta postagem do blog.