Fecha de publicación: 15 de mayo de 2025
El público depende de los editores de noticias para que los informen sobre eventos locales, nacionales e internacionales, así como para compartir sus perspectivas reflexivas. En el entorno actual de ritmo acelerado, los resúmenes de artículos son una estrategia clave para condensar información compleja en fragmentos accesibles, lo que anima a los lectores a explorar más. Descubre cómo Bright Sites y Terra abordan esta estrategia con la API de Summarizer.
| Explicación | Web | Extensiones | Estado de Chrome | Intent |
|---|---|---|---|---|
| MDN | Ver | Intención de envío |
La API de Summarizer te permite generar diferentes tipos de resúmenes en diferentes formatos y longitudes, como oraciones, párrafos, listas de viñetas y mucho más. Esta API, como muchas de las APIs de IA integradas, usa modelos de lenguaje extensos para realizar inferencias. En Chrome, nuestro modelo es Gemini Nano.
Bright Sites agrega resúmenes de artículos personalizados a The Standard
Flow, la plataforma líder de publicación de noticias de Bright Sites, impulsa más de 150 publicaciones. Con la integración de la API de Summarizer en su CMS potenciado por IA, Bright Sites permite que The Standard, la icónica marca de noticias de Londres, ofrezca resúmenes personalizados de artículos a sus lectores. Esto alienta a los usuarios a interactuar con los artículos y a volver a ver otros artículos en The Standard.
“Trabajar con los modelos de vanguardia de Gemini en Chrome une los 198 años de historia de The Standard, que mantiene a nuestros lectores al tanto de las innovaciones técnicas para nuestro público ocupado que valora tener nuestro periodismo de confianza al alcance de la mano. Permitir que los lectores consulten las noticias rápidamente con resúmenes creados en sus propios dispositivos es solo una de las formas en que estamos reinventando The Standard y creando nuevos productos centrados en los lectores en función de sus hábitos digitales".
— Jack Riley, director digital, The Standard
Ofrecer resúmenes de IA del cliente permitió a The Standard generar resúmenes personalizados sin incurrir en costos comerciales adicionales. Si se hace del lado del cliente, con datos como el estilo del resumen o la ubicación, se permitiría a los usuarios seguir leyendo incluso cuando pierdan el acceso a Internet. Esto es frecuente para muchos usuarios que viajan en el metro de Londres con sus laptops.
Primero, verifican la compatibilidad y disponibilidad del modelo y la 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.",
}
}
}
La siguiente función define un resumidor genérico que, en el futuro, podría usar otro modelo integrado en el dispositivo o un modelo del 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.',
)
}
La versión estándar almacena la preferencia de resumen de los lectores en IndexedDB para ofrecer un resumen 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,
},
})
Terra proporciona a los periodistas un resumen editable de los artículos en portugués
Terra es uno de los portales de contenido más grandes de Brasil, que ofrece entretenimiento, noticias y deportes con más de 50 millones de visitantes únicos al mes. Terra agregó la API de Summarizer y la API de Translator a su sistema de administración de contenido (CMS) para ayudar a los periodistas a resumir noticias en portugués al instante. Luego, los periodistas pueden hacer algunas ediciones con fines estilísticos o de precisión y publicar el resumen cocreado, lo que lo pone a disposición de todos los lectores.
Si bien el CMS de Terra ya usa un LLM del servidor, el equipo exploró la IA del cliente como un enfoque distinto con posibles beneficios nuevos. Descubrieron que la API de Summarizer y Gemini Nano en Chrome proporcionaban una calidad comparable a su implementación del servidor. La solución del cliente proporcionó resultados positivos cuando se usó junto con la API de Translator.
Terra adoptó la implementación de IA integrada de Chrome debido a sus ventajas clave. La IA del cliente ofreció ahorros en costos y una administración de datos simplificada. Si bien el equipo se enfrentó a algunos desafíos, en particular, en cuanto a la administración de las limitaciones de la ventana de contenido con la API de Summarizer, pudo superarlos mediante prácticas de implementación cuidadosas.
En un principio, Terra tuvo dificultades para determinar qué tipos de resumen y contexto compartido eran los más adecuados para abordar sus necesidades. A través de la experimentación, descubrieron que los resúmenes en inglés claros y útiles eran fundamentales para producir un resultado de calidad similar en portugués con la API de Translator. El campo de pruebas de IA integrado fue fundamental para abordar estos desafíos, ya que Terra pudo probar sus ideas rápidamente sin refactorizar su código cada vez.
En el siguiente ejemplo, se muestra cómo Terra invoca la API de Summarizer y alerta a los usuarios cuando no está disponible.
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
}
}
Además, Terra usó el resumidor junto con la API de Translator para traducir el título, el subtítulo y el texto del cuerpo del artículo original en portugués al inglés. La API de Summarizer procesa esta versión traducida para generar el resumen y, luego, lo vuelve a traducir al portugués. Esto garantiza que el usuario reciba el contenido resumido en el idioma de la aplicación.
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')
La integración exitosa de APIs de IA integradas de Terra demuestra el potencial significativo de la IA del cliente para mejorar los flujos de trabajo de administración de contenido. Con las APIs de Summarizer y Translator, Terra fortaleció a sus periodistas, mejoró la eficiencia y está bien posicionado para ofrecer experiencias del usuario mejoradas en todas las plataformas.
Prácticas recomendadas
Si la entrada de revisión supera el límite de tokens, sigue estas mitigaciones:
- Usa una muestra más pequeña (como las 4 opiniones más recientes) en la API. Esto ayuda a generar resultados más rápido. Consulta nuestra guía sobre cómo escalar el resumen del cliente.
QuotaExceededErrorproporciona más información sobre los tokens solicitados en la entrada. El objetosummarizertiene una propiedadinputQuotaque indica el límite de tokens de la API. Esto permite obtener comentarios en tiempo real y inhabilitar la funcionalidad si la entrada supera el límite.
Te recomendamos que consideres un enfoque híbrido para garantizar una experiencia fluida para todos los usuarios. La primera vez que se llama a una API de IA integrada, el navegador debe descargar el modelo.
- Miravia usó un modelo del servidor para proporcionar un resumen inicial mientras se descargaba el modelo. Una vez que el modelo integrado estuvo listo, el sitio comenzó a realizar la inferencia del cliente.
Siempre debes esforzarte por crear una interfaz amigable y comunicativa:
- Implementa una barra de progreso para las descargas de modelos y mitiga las demoras en las respuestas.
- Considera la transparencia sobre la descarga del modelo. Bright Sites notificó a los usuarios sobre la descarga del modelo para permitir la transparencia y el consentimiento del uso de los recursos. De esta manera, los usuarios pueden aceptar o rechazar la solicitud antes de continuar.
Conclusiones y recomendaciones
Los ejemplos de Bright Sites y Terra demuestran el valor de la API de Summarizer para mejorar la accesibilidad del contenido y la participación de los lectores. Con el uso de esta API del cliente, estas plataformas mejoraron la experiencia de lectura y la personalización, sin costo comercial adicional y con una administración de datos simplificada. Al igual que la API de Summarizer, todas las APIs de IA integradas habilitan la IA práctica del cliente.
¿Te preguntas cómo la API de Summarizer puede ayudar con otros casos de uso? También compartimos cómo la API de Summarizer ayuda a redBus y Miravia a crear resúmenes útiles de opiniones de los usuarios.
¿Estás compilando algo nuevo con estas APIs? Compártelo con nosotros en @ChromiumDev en X o en Chromium para desarrolladores en LinkedIn.
Recursos
- Obtén más información sobre la API de Summarizer.
- Comienza a usar las APIs integradas en Chrome.
- Lee el caso de éxito de la API de Prompt sobre cómo potenciar a los bloggers.
- Lee el caso de éxito de Traducción y Detector de idioma.
- Descubre cómo la API de Summarizer ayuda a redBus y Miravia a crear resúmenes útiles de las opiniones de los usuarios.
Agradecimientos
Gracias a Guilherme Moser y Fernando Fischer de Terra, Aline Souza de CWI, Brian Alford, Keval Patel, Jack Riley y el equipo de ingeniería de Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner y Kenji Baheux por ayudar a escribir y revisar este documento.