Fecha de publicación: 28 de abril de 2025. Última actualización: 21 de mayo de 2025
La rápida evolución de la IA está abriendo nuevas fronteras para las aplicaciones web, en particular con la llegada de las capacidades integradas en el dispositivo. Descubre cómo CyberAgent, una empresa de Internet líder en Japón, usa la IA integrada de Chrome y la API de Prompt para mejorar la experiencia de los blogs en su plataforma, Ameba Blog.
Compartimos sus objetivos, los beneficios de trabajar con la IA integrada, los desafíos que enfrentaron y estadísticas valiosas para otros desarrolladores que usan la IA integrada.
¿Qué es la API de Prompt?
| Explicativa | Web | Extensiones | Estado de Chrome | Intención |
|---|---|---|---|---|
| GitHub |  Prueba de origen |
 Chrome 138 |
Ver | Intención de experimentar |
| GitHub | Prueba de origen para parámetros de muestreo |
Chrome 148 |
Ver | Intención de experimentar |
La API de Prompt ayuda a los desarrolladores a usar modelos de lenguaje grandes para agregar funciones de IA directamente a sus apps. Si se definen instrucciones personalizadas, las apps pueden realizar tareas como la extracción de datos, la generación de contenido y las respuestas personalizadas. En Chrome, la API de Prompt realiza la inferencia del cliente con Gemini Nano. Este procesamiento local, independientemente del modelo que se use, mejora la privacidad de los datos y la velocidad de respuesta. Cualquier modelo que se use, la velocidad de respuesta del cliente.
Asistencia de IA para autores de Ameba Blog
CyberAgent reconoció un problema común para los autores: el proceso, que suele llevar mucho tiempo, de crear contenido atractivo, en especial los títulos. La hipótesis era que la integración de funciones potenciadas por IA en la interfaz de creación de blogs podría mejorar significativamente la calidad y la eficiencia de la creación de contenido. El objetivo era proporcionar herramientas que brindaran inspiración y ayudaran a los bloggers a crear contenido atractivo.
CyberAgent desarrolló una extensión de Chrome con la API de Prompt. Esta extensión proporciona un conjunto de funciones potenciadas por IA diseñadas para ayudar a los escritores de Ameba Blog a generar títulos y encabezados, párrafos posteriores y mejoras generales de la copia.
CyberAgent quería flexibilidad de capacidades, lo que llevó directamente a la API de Prompt. Con infinitas posibilidades en una API, CyberAgent pudo determinar exactamente qué funcionaría mejor y sería más útil para los autores de Ameba.
CyberAgent probó la extensión con una cantidad selecta de bloggers, lo que ofreció estadísticas valiosas sobre la practicidad de las funciones ofrecidas. Los comentarios ayudaron a CyberAgent a identificar mejores aplicaciones para la asistencia de IA y a definir el diseño de la extensión. Según los resultados y los comentarios positivos, CyberAgent planea lanzar esta función en el futuro, lo que llevará la potencia de la IA del cliente directamente a su comunidad de blogs.
Analicemos estas funciones con más detalle.
Escribe mejores títulos y encabezados
La extensión genera varias sugerencias de títulos, según el contenido completo del blog. Los escritores de blogs pueden definir mejor estas sugerencias con opciones que incluyen "Regenerar", "Más cortés", "Más informal" o "Generar títulos similares", entre otras.
CyberAgent diseñó la IU específicamente para que los usuarios no tengan que escribir ninguna instrucción. De esta manera, cualquier usuario que no esté familiarizado con la ingeniería de instrucciones también puede beneficiarse de la potencia de la IA.
La extensión también puede generar encabezados atractivos para secciones individuales del blog, que los autores pueden solicitar seleccionando el texto pertinente para un encabezado.
El código para generar un título con la API de Prompt incluye una instrucción inicial y una instrucción del usuario. La instrucción inicial proporciona contexto e instrucciones para obtener un tipo de resultado en particular, mientras que las instrucciones del usuario solicitan que el modelo interactúe con lo que escribe el usuario. Obtén más información sobre su código en Implementa la asistencia de IA.
Genera párrafos posteriores
La extensión ayuda a los bloggers a superar el bloqueo del escritor generando párrafos posteriores según el texto seleccionado. Con el contexto del párrafo anterior, la IA redacta una continuación del párrafo, lo que permite a los autores mantener su flujo creativo.
Mejora y edita el texto
Gemini Nano analiza el texto seleccionado y puede sugerir mejoras. Los usuarios pueden regenerar las mejoras con notas adicionales sobre el tono y la elección del idioma para que la copia sea "más linda" o "más simple".
Implementa la asistencia de IA
CyberAgent dividió el código de extensión en tres pasos: creación de sesión, activación y solicitud de modelo.
Primero, verifican con el navegador que la IA integrada esté disponible y sea compatible. Si es así, crean una sesión con parámetros predeterminados.
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 función tiene una función de ayuda que activa el usuario. Una vez activada, cuando el usuario hace clic en el botón correspondiente, actualiza la sesión según corresponda.
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,
});
}
Después de actualizar la sesión, solicitan el modelo según la función. Por ejemplo, este es el código para generar un título y regenerar un título con un tono más 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);
...
}
Beneficios de la IA integrada
La IA integrada es un tipo de IA del cliente, lo que significa que la inferencia se produce en el dispositivo del usuario. CyberAgent eligió usar APIs de IA integradas con Gemini Nano debido a las ventajas atractivas que ofrece tanto a los desarrolladores de aplicaciones como a los usuarios.
Entre los beneficios clave en los que se centró CyberAgent, se incluyen los siguientes:
- Seguridad y privacidad
- Costo
- Capacidad de respuesta y confiabilidad
- Facilidad de desarrollo
Seguridad y privacidad
La capacidad de ejecutar modelos de IA directamente en el dispositivo del usuario sin transmitir datos a servidores externos es fundamental. Los borradores de blogs no están destinados a ser vistos por el público y, por lo tanto, CyberAgent no quiere enviarlos a un servidor de terceros.
La IA integrada descarga Gemini Nano en los dispositivos de los usuarios, lo que elimina la necesidad de enviar y recibir datos de los servidores. Esto es particularmente útil cuando se escribe, ya que los borradores pueden incluir información confidencial o expresiones no deseadas. La IA integrada mantiene el contenido original y generado de forma local en lugar de enviarlo a un servidor, lo que puede mejorar la seguridad y proteger la privacidad del contenido.
Ahorro de costos
Una de las principales ventajas de usar la IA integrada es que el navegador incluye Gemini Nano y las APIs son de uso gratuito. No hay costos adicionales ni ocultos.
La IA integrada reduce significativamente los costos del servidor y puede quitar por completo los costos asociados con la inferencia de IA. Esta solución se puede escalar rápidamente a una gran base de usuarios y permite que los usuarios envíen instrucciones consecutivas para definir mejor los resultados sin incurrir en tarifas adicionales.
Capacidad de respuesta y confiabilidad
La IA integrada proporciona tiempos de respuesta coherentes y rápidos, independientemente de las condiciones de la red. Esto permitió a los usuarios generar contenido una y otra vez, lo que les facilita probar nuevas ideas y crear un resultado final satisfactorio con rapidez.
Facilidad de desarrollo
La IA integrada de Chrome simplifica el proceso de desarrollo, ya que proporciona una API disponible. Los desarrolladores se benefician de lo fácil que es crear funciones potenciadas por IA para su aplicación.
Gemini Nano y las APIs de IA integradas se instalan en Chrome, por lo que no es necesario realizar una configuración adicional ni administrar el modelo. Las APIs usan JavaScript, como otras APIs del navegador, y no requieren experiencia en aprendizaje automático.
Cómo superar los desafíos para obtener mejores resultados
El recorrido de CyberAgent con la API de Prompt proporcionó lecciones valiosas sobre los matices de trabajar con LLM del cliente.
- Respuestas incoherentes: Al igual que otros LLM, Gemini Nano no garantiza resultados idénticos para la misma instrucción. CyberAgent encontró respuestas en formatos inesperados (como Markdown y JSON no válidos). Incluso con instrucciones, es posible que los resultados varíen mucho. Cuando implementes cualquier aplicación o extensión de Chrome con IA integrada, puede ser beneficioso agregar una solución alternativa para garantizar que el resultado siempre esté en el formato correcto.
- Límite de tokens: Es fundamental administrar el uso de tokens. CyberAgent usó propiedades y métodos como
contextUsage,contextWindowymeasureContextUsage()para administrar sesiones, mantener el contexto y reducir el consumo de tokens. Esto fue muy importante cuando se definieron mejor los títulos. - Restricciones de tamaño del modelo: Como el modelo se descarga y reside en el dispositivo del usuario, es mucho más pequeño que un modelo basado en servidor. Esto significa que es fundamental proporcionar suficiente contexto dentro de la instrucción para obtener resultados satisfactorios, en especial para la generación de resúmenes. Obtén más información para comprender los tamaños de LLM.
CyberAgent enfatiza que, si bien los modelos del cliente aún no están disponibles de forma universal en todos los navegadores y dispositivos, y los modelos más pequeños tienen limitaciones, aún pueden ofrecer un rendimiento impresionante para tareas específicas. La capacidad de iterar rápidamente y experimentar sin costos del servidor la convierte en una herramienta valiosa.
Aconsejan encontrar un equilibrio, ya que reconocen que es difícil obtener respuestas perfectas con cualquier IA, ya sea del servidor o del cliente. Por último, ven un futuro en el que un enfoque híbrido, que combine los puntos fuertes de la IA del servidor y del cliente, desbloqueará un potencial aún mayor.
Con la mirada puesta en el futuro
La exploración de CyberAgent de la IA integrada muestra las emocionantes posibilidades de las integraciones de IA sin problemas para mejorar las experiencias del usuario. Su extensión creada para funcionar con Ameba Blog demuestra cómo estas tecnologías se pueden aplicar de forma práctica para resolver problemas del mundo real, lo que ofrece lecciones valiosas para la comunidad de desarrollo web en general.
A medida que la tecnología madure y se expanda la compatibilidad con navegadores y dispositivos, esperamos ver aplicaciones aún más innovadoras de IA integrada y otras formas de IA del cliente.
Recursos
- Obtén más información sobre la API de Prompt.
- Comienza a usar las APIs integradas en Chrome.
- Caso de éxito de CyberAgent sobre la IA web, que abarca este mismo tema.
- Mira El futuro de la IA es ahora, los casos de éxito de CyberAgent sobre la IA del cliente.
Agradecimientos
Gracias a los bloggers de Ameba, ao, Nodoka, Erin, Chiaki, y socchi, que proporcionaron comentarios y ayudaron a mejorar la extensión. Gracias a Thomas Steiner, Alexandra Klepper y Sebastian Benz por su ayuda para escribir y revisar esta entrada de blog.