Publicado em 15 de maio de 2025
O público depende dos editores de notícias para se informar sobre eventos locais, nacionais e internacionais, além de compartilhar suas perspectivas. No ambiente acelerado de hoje, os resumos de artigos são uma estratégia importante para condensar informações complexas em snippets acessíveis, incentivando os leitores a explorar mais. Saiba como a Bright Sites e a Terra abordam essa estratégia usando a API Summarizer.
| Explicação | Web | Extensões | Status do Chrome | Intenção |
|---|---|---|---|---|
| MDN | Ver | Intent de envio |
A API Summarizer permite gerar diferentes tipos de resumos em vários comprimentos e formatos, como frases, parágrafos, listas com marcadores e muito mais. Essa API, assim como muitas das APIs de IA integradas, usa modelos de linguagem grandes para realizar inferência. No Chrome, nosso modelo é o Gemini Nano.
O Bright Sites adiciona resumos personalizados de artigos ao The Standard
A plataforma de publicação de notícias líder da Bright Sites, Flow, é usada em mais de 150 publicações. Ao integrar a API Summarizer ao CMS com tecnologia de IA, o Bright Sites permite que The Standard, a famosa marca de notícias de Londres, ofereça resumos personalizados de artigos aos leitores. Isso incentiva os usuários a interagir com os artigos e recircular para outros artigos no The Standard.
"Trabalhar com os modelos avançados do Gemini no Chrome é unir os 198 anos de tradição do The Standard de manter nossos leitores informados com novas inovações técnicas para nosso público ocupado que valoriza o jornalismo de confiança ao alcance das mãos. Permitir que os leitores confiram as notícias rapidamente usando resumos criados nos próprios dispositivos é apenas uma das maneiras de repensar o The Standard e criar novos produtos focados no leitor com base nos hábitos digitais deles."
— Jack Riley, diretor digital, The Standard
A oferta de resumo de IA do lado do cliente permitiu que a The Standard gerasse resumos personalizados sem incorrer em custos de negócios adicionais. Ao fazer isso no lado do cliente, usando pontos de dados como estilo de resumo ou localização, os usuários poderiam continuar lendo mesmo quando perdem o acesso à Internet. Isso é uma ocorrência frequente para muitos usuários que viajam no metrô de Londres com o laptop.
Primeiro, eles verificam o suporte e a disponibilidade do modelo e da API.
// Check if the device supports built-in AI
// Trigger the model download if not yet available, on capable devices
export const deviceCheck = async () => {
const availability = await Summarizer.availability();
if (!availability || availability === 'unavailable') {
return {
summarizationAvailable: false,
message:
"AI summarization tools are not supported on this device" +
"or the appropriate permissions are not set.",
}
}
if (availability === 'downloadable') {
const shouldDownload = window.confirm(
`This page contains an AI summary, using an AI model provided by your
browser. Downloading the model, which could be multiple gigabytes in size,
is required to view the summary. Would you like to download the model?`);
if (!shouldDownload) {
return {
summarizationAvailable: false,
message: "User declined installation.",
}
}
// Trigger an installation
Summarizer.create();
return {
summarizationAvailable: false,
message: "Installing in the background. This may take a few minutes...",
}
}
if (availability === 'available') {
return {
summarizationAvailable: true,
message: "Ready for use.",
}
}
}
A função a seguir define um resumo genérico que, no futuro, pode usar outro modelo no dispositivo ou um modelo do lado do servidor.
/**
* Define the summarizer.
**/
export const aiSummarize = async (textToSummarize, options) => {
const availableSummarizationTools = getAvailableAiSummarizationTools()
if (availableSummarizationTools.has('builtInAi') && options?.builtInAI) {
// Generate the built-in AI summarizer and abort signal
const summarizer = await createBuiltInAISummarizer(options.builtInAi.options)
return await summarizer.summarize(textToSummarize, {
signal: options.builtInAi.signal,
})
}
throw new Error(
'AI summarization tools are not supported on this device or browser.',
)
}
O Standard armazena a preferência de resumo dos leitores no IndexedDB para oferecer um resumo personalizado.
/**
* Log preferences in IndexDB for personalization
**/
abortController.current = new AbortController()
const preferencesDB = new PreferencesDB()
const summarization = await aiSummarize(articleContent, {
clientSideAI: {
options: await preferencesDB.getCreatesummarizerPreferences(),
signal: abortController.current.signal,
},
})
O Terra oferece aos jornalistas um resumo editável para artigos em português
O Terra é um dos maiores portais de conteúdo do Brasil, oferecendo entretenimento, notícias e esportes com mais de 50 milhões de visitantes únicos por mês. O Terra adicionou a API Summarizer e a API Translator ao sistema de gerenciamento de conteúdo (CMS) para ajudar jornalistas a resumir instantaneamente notícias em português. Os jornalistas podem fazer algumas edições por motivos de estilo ou precisão e publicar o resumo cocriado, disponibilizando-o para todos os leitores.
Embora o CMS da Terra já use um LLM do lado do servidor, a equipe explorou a IA do lado do cliente como uma abordagem distinta com possíveis novos benefícios. Eles descobriram que a API Summarizer e o Gemini Nano no Chrome ofereciam qualidade semelhante à implementação do lado do servidor. A solução do lado do cliente gerou resultados positivos quando usada com a API Translator.
A Terra adotou a implementação da IA integrada do Chrome devido a algumas vantagens. A IA do lado do cliente ofereceu economia de custos e governança de dados simplificada. Embora a equipe tenha encontrado alguns desafios, principalmente em relação ao gerenciamento de limitações da janela de conteúdo com a API Summarizer, eles conseguiram superá-los com práticas de implementação cuidadosas.
No início, a Terra teve dificuldades para determinar quais tipos de resumo e contexto compartilhado eram mais adequados para atender às necessidades. Com a experimentação, eles descobriram que resumos em inglês claros e úteis eram essenciais para produzir uma saída de qualidade semelhante em português com a API Translator. O ambiente de testes de IA integrado foi fundamental para superar esses desafios, já que a Terra podia testar rapidamente as ideias sem precisar refatorar o código toda vez.
O exemplo a seguir demonstra como o Terra invoca a API Summarizer e alerta os usuários quando ela está indisponível.
async function summarizerByBuiltInAI(text) {
if (!(Summarizer)) {
//Alert users in Portuguese that "Summarizer API is not available"
cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
return null
}
try {
const availability = await Summarizer.availability();
if (availability !== 'available') {
cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
return null
}
const summaryContext = "Avoid jargon, use correct grammar, focus on clarity," +
"and ensure the user can grasp the articles purpose," +
"without needing to open the original content.";
const options = {
sharedContext: summaryContext,
type: 'teaser',
format: 'plain-text',
length: 'long',
}
if (availability === 'available') {
const summarizer = await Summarizer.create(options);
return await summarizer.summarize(text, {
context: summaryContext
})
}
// return the download of the Summarizer Model
if(availability === 'downloadable'){
return await Summarizer.create();
}
} catch (error) {
//EN: "Error using the Summarizer API"
cms_alert(ALERT_TYPE_ERROR, "Erro ao usar o Summarizer API.");
console.error("Erro ao usar o Summarizer API:", error);
return null
}
}
Além disso, o Terra usou o resumo em conjunto com a API Translator para traduzir o título, o subtítulo e o texto do artigo original em português para o inglês. Essa versão traduzida é processada pela API Summarizer para gerar o resumo e, em seguida, é traduzida de volta para o português. Isso garante que o usuário receba o conteúdo resumido no idioma do aplicativo.
async function translateTextByBuiltInAI(text, sourceLanguage, targetLanguage) {
if (!('translation' in self && 'createTranslator' in self.translation)) {
return null
}
try {
const translator = await Translator.create({
sourceLanguage,
targetLanguage,
})
return await translator.translate(text)
} catch (error) {
throw error
}
}
const text = `Title: ${contentTitle};\n\n Sub-title: ${contentSubtitle};\n\n Article content: ${plainText}.`;
const canTranslate = await Translator.availability({
sourceLanguage: 'pt',
targetLanguage: 'en',
})
if (canTranslate !== 'available') {
if (canTranslate === 'downloadable') {
try {
await Translator.create({
sourceLanguage: 'pt',
targetLanguage: 'en',
})
//EN: "Language download completed successfully."
cms_alert(ALERT_TYPE_OK, "Download do idioma concluído com sucesso.");
} catch (downloadError) {
//EN: "Error downloading the language required for translation."
cms_alert(ALERT_TYPE_ERROR, "Erro ao realizar download do idioma necessário para tradução.");
return
}
} else {
//EN: "Translation is not available or not ready."
cms_alert(ALERT_TYPE_ERROR, "A tradução não está disponível ou não está pronta.");
return
}
}
const translatedText = await translateTextByBuiltInAI(text, 'pt', 'en')
const summarizedText = await summarizerByBuiltInAI(translatedText)
const translatedBackText = await translateTextByBuiltInAI(summarizedText, 'en', 'pt')
A integração bem-sucedida de APIs de IA integradas do Terra demonstra o potencial significativo da IA do lado do cliente para melhorar os fluxos de trabalho de gerenciamento de conteúdo. Com as APIs Summarizer e Translator, o Terra fortaleceu seus jornalistas, melhorou a eficiência e está bem posicionado para oferecer experiências do usuário melhores em várias plataformas.
Práticas recomendadas
Se a entrada de revisão exceder o limite de tokens, siga estas mitigações:
- Use uma amostra menor (como as quatro avaliações mais recentes) para a API. Isso ajuda a gerar resultados mais rápidos. Consulte nossas orientações sobre como dimensionar a síntese do lado do cliente.
- O
QuotaExceededErrorfornece mais informações sobre os tokens solicitados na entrada. O objetosummarizertem uma propriedadeinputQuotaque indica o limite de tokens da API. Isso permite feedback em tempo real e desativa a funcionalidade se a entrada exceder o limite.
Considere uma abordagem híbrida para garantir uma experiência perfeita para todos os usuários. Na primeira vez que uma API AI integrada é chamada, o navegador precisa fazer o download do modelo.
- A Miravia usou um modelo do lado do servidor para fornecer um resumo inicial enquanto o modelo era transferido por download. Quando o modelo integrado ficou pronto, o site passou a realizar a inferência do lado do cliente.
Sempre tente criar uma interface amigável e comunicativa:
- Implemente uma barra de progresso para downloads de modelos e mitigue os atrasos de resposta.
- Considere a transparência sobre o download do modelo. O Bright Sites notificou os usuários sobre o download do modelo para permitir a transparência e o consentimento do uso do recurso. Assim, os usuários podem aceitar ou recusar antes de continuar.
Conclusões e recomendações
Os exemplos do Bright Sites e do Terra demonstram o valor da API Summarizer para melhorar a acessibilidade do conteúdo e o engajamento do leitor. Ao usar essa API do lado do cliente, essas plataformas melhoraram a experiência de leitura e a personalização, sem custos comerciais adicionais e com governança de dados simplificada. Assim como a API Summarizer, todas as APIs de IA integradas ativam a IA prática do lado do cliente.
Quer saber como a API Summarizer pode ajudar em outros casos de uso? Também compartilhamos como a API Summarizer ajuda a redBus e a Miravia a criar resumos úteis de avaliações de usuários.
Você está desenvolvendo algo novo com essas APIs? Compartilhe com a gente em @ChromiumDev no X ou Chromium para desenvolvedores no LinkedIn.
Recursos
- Saiba mais sobre a API Summarizer.
- Comece a usar as APIs integradas no Chrome.
- Leia o estudo de caso da API Prompt sobre como capacitar blogueiros.
- Leia o estudo de caso do Tradutor e do detector de idioma.
- Leia como a API Summarizer ajuda a redBus e a Miravia a criar resumos úteis das avaliações dos usuários.
Agradecimentos
Agradecemos a Guilherme Moser e Fernando Fischer da Terra, Aline Souza da CWI, Brian Alford, Keval Patel, Jack Riley e a equipe de engenharia da Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner e Kenji Baheux por ajudar a escrever e analisar este documento.