Publicado em: 15 de maio de 2025
O público confia nos publishers de notícias para se informar sobre eventos locais, nacionais e internacionais, além de compartilhar perspectivas. No ambiente acelerado de hoje, os resumos de artigos são uma estratégia fundamental para condensar informações complexas em trechos acessíveis, incentivando os leitores a se aprofundarem. 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 | Intenção 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, como muitas das APIs de IA integradas, usa modelos de linguagem grandes para realizar inferências.
A Bright Sites adiciona resumos de artigos personalizados ao The Standard
A principal plataforma de publicação de notícias da Bright Sites, Flow, oferece suporte a mais de 150 publicações. Ao integrar a API Summarizer ao CMS com tecnologia de IA, a Bright Sites permite que o The Standard, a marca de notícias icônica de Londres, ofereça resumos personalizados de artigos aos leitores. Isso incentiva os usuários a interagir com os artigos e a recircular para outros artigos no The Standard.
"Trabalhar com os modelos de ponta do Gemini no Chrome está unindo 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 nosso jornalismo confiável na ponta dos dedos. Permitir que os leitores verifiquem rapidamente as notícias usando resumos criados nos próprios dispositivos é apenas uma das maneiras pelas quais estamos reimaginando o The Standard e criando novos produtos focados no leitor com base nos hábitos digitais deles."
— Jack Riley, diretor digital do The Standard
Oferecer a sumarização de IA do lado do cliente permitiu que o The Standard gerasse resumos personalizados sem incorrer em custos comerciais adicionais. Fazer isso do lado do cliente, usando pontos de dados como estilo ou local do resumo, permitiria que os usuários continuassem lendo mesmo quando perdessem o acesso à Internet. Isso é 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 sumarizador genérico que, no futuro, poderá 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 The 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,
},
})
A Terra oferece aos jornalistas um resumo editável de artigos em português
A 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. A Terra adicionou a API Summarizer e a API Translator ao sistema de gerenciamento de conteúdo (CMS) para ajudar os jornalistas a resumir instantaneamente notícias em português. Os jornalistas podem fazer algumas edições para fins estilísticos ou de precisão e publicar o resumo criado em conjunto, tornando-o disponível 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 no Chrome oferecia qualidade comparável à implementação do lado do servidor. A solução do lado do cliente gerou resultados positivos quando usada em conjunto com a API Translator.
A Terra adotou a implementação de IA integrada do Chrome devido a vantagens importantes. A IA do lado do cliente ofereceu economia de custos e simplificou a governança de dados. 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 superar esses problemas com práticas de implementação cuidadosas.
Inicialmente, a Terra enfrentou desafios para determinar quais tipos de resumo e contexto compartilhado eram mais adequados para atender às necessidades. Por meio de experimentos, eles descobriram que resumos claros e úteis em inglês eram essenciais para produzir uma saída de qualidade semelhante em português com a API Translator. O playground de IA integrado foi fundamental para superar esses desafios, já que a Terra podia testar rapidamente as ideias sem refatorar o código a cada vez.
O exemplo a seguir demonstra como a Terra invoca a API Summarizer e alerta os usuários quando ela não está disponí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, a Terra usou o sumarizador em conjunto com a API Translator para traduzir o título, o subtítulo e o corpo do texto 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 das APIs de IA integradas da 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, a Terra capacitou os jornalistas, melhorou a eficiência e está bem posicionada para oferecer experiências de usuário aprimoradas em todas as plataformas.
Práticas recomendadas
Se a entrada de revisão exceder o limite de token, siga estas mitigações:
- Use uma amostra menor (como as quatro avaliações mais recentes) na API. Isso ajuda a gerar resultados mais rápidos. Consulte nossas orientações sobre como escalonar a sumarização do lado do cliente.
- O
QuotaExceededErrorfornece mais informações sobre os tokens solicitados na entrada. O objetosummarizertem uma propriedadeinputQuotaque indica o limite de token da API. Isso permite feedback em tempo real e desativa a funcionalidade se a entrada exceder o limite.
Talvez você queira considerar uma abordagem híbrida para garantir uma experiência perfeita para todos os usuários. Na primeira vez que uma API de IA 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 estava sendo baixado. Quando o modelo integrado estava pronto, o site passou a realizar a inferência do lado do cliente.
Você sempre deve se esforçar para criar uma interface amigável e comunicativa:
- Implemente uma barra de progresso para downloads de modelos e mitigue atrasos na resposta.
- Considere a transparência sobre o download do modelo. A Bright Sites notificou os usuários sobre o download do modelo para permitir a transparência e o consentimento do uso de recursos. Dessa forma, os usuários podem aceitar ou recusar antes de continuar.
Conclusões e recomendações
Os exemplos da Bright Sites e da 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 permitem 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á criando algo novo com essas APIs? Compartilhe conosco no @ChromiumDev no X ou no Chromium for Developers 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 Translation and Language Detector.
- Leia como a API Summarizer ajuda a redBus e a Miravia a criar resumos úteis de avaliações de 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 revisar este documento.