Publicado em: 28 de abril de 2025, Última atualização: 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 líder de Internet no Japão, 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 | 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 inferência do lado do cliente com o Gemini Nano. Esse processamento local, independente do modelo usado, aumenta a privacidade dos dados e a velocidade da resposta. Qualquer modelo usado, velocidade de resposta do cliente.
Assistência de IA para autores do blog Ameba
A CyberAgent identificou uma dificuldade comum para os autores: o processo muitas vezes 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 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 projetados para ajudar os escritores do Ameba Blog a gerar títulos e cabeçalhos, parágrafos subsequentes e melhorias gerais de 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, 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.
Escrever 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 como "Regenerar", "Mais educado", "Mais informal" ou "Gerar títulos semelhantes", entre outras.
A CyberAgent projetou a interface especificamente para que os usuários não precisem escrever nenhum comando. Assim, qualquer usuário que não conhece a engenharia de comando também pode aproveitar o 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 um comando inicial e um comando do usuário. O comando inicial dá contexto e instruções para gerar 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 a assistência de IA.
Gerar parágrafos subsequentes
A extensão ajuda os blogueiros a superar o bloqueio criativo gerando parágrafos subsequentes com base no texto selecionado. Com o contexto do parágrafo anterior, a IA cria uma continuação, 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 gerar novamente as melhorias com observações adicionais sobre o tom e a escolha da linguagem para deixar o texto "mais fofo" ou "mais simples".
Implantar a assistência de IA
A CyberAgent dividiu o código de 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. 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 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 atraentes que ele oferece para desenvolvedores de aplicativos e usuários.
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 blog não são feitos para serem vistos pelo público. Por isso, a CyberAgent não quer enviar esses rascunhos para um servidor de terceiros.
A IA integrada faz o download do Gemini Nano para os dispositivos dos usuários, eliminando a necessidade de enviar e receber dados de servidores. Isso é especialmente útil 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 aumentar 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 podem ser usadas sem custos financeiros. Não há custos adicionais ou ocultos.
A IA integrada reduz significativamente os custos do servidor e pode eliminar 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 eles enviem comandos consecutivos para refinar as saídas sem custos 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 tarefa de testar novas ideias e criar um resultado final satisfatório rapidamente.
Facilidade de desenvolvimento
A IA integrada do Chrome simplifica o processo de desenvolvimento ao fornecer 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 é necessário fazer configurações adicionais 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 resultados melhores
A jornada da CyberAgent com a API Prompt forneceu lições valiosas sobre as nuances 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. 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: é crucial gerenciar o uso de tokens. 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 é 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 um desempenho impressionante para tarefas específicas. A capacidade de iterar rapidamente e fazer experimentos sem custos do lado do servidor a torna uma ferramenta valiosa.
Eles aconselham a encontrar um equilíbrio, reconhecendo que é difícil alcançar respostas perfeitas com qualquer IA, seja do lado do servidor ou do cliente. Por fim, eles preveem 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 dos usuários. 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 em geral.
À 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
- Começar a usar as APIs integradas no Chrome
- Estudo de caso da CyberAgent sobre IA na Web, que aborda o mesmo tema.
- Assista O futuro da IA é agora, os estudos de caso da CyberAgent sobre IA do lado do cliente
Agradecimentos
Agradecemos aos blogueiros da Ameba, ao, Nodoka, Erin, Chiaki e socchi, que deram 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.