La API de Prompt en las extensiones de Chrome

Thomas Steiner

Fecha de publicación: 11 de noviembre de 2024

La API de Prompt para extensiones ahora está disponible en una prueba de origen, por lo que puedes compilar extensiones de Chrome que usen Gemini Nano, nuestro modelo de lenguaje más eficiente, en el navegador.

Existen muchos casos de uso para la API de Prompt con extensiones de Chrome. Estos son algunos ejemplos:

  • Eventos de calendario instantáneos. Desarrolla una extensión de Chrome que extraiga automáticamente los detalles de los eventos de las páginas web para que los usuarios puedan crear entradas de calendario en solo unos pasos.
  • Extracción de contactos sin problemas. Crea una extensión que extraiga información de contacto de los sitios web para que los usuarios puedan comunicarse con una empresa o agregar detalles a su lista de contactos con mayor facilidad.
  • Filtrado de contenido dinámico Crea una extensión de Chrome que analice artículos de noticias y oculte o desenvuelva automáticamente el contenido según temas definidos por el usuario.

Estas son solo algunas posibilidades, pero esperamos con entusiasmo ver lo que crearás.

Disponibilidad

  • Únete a la prueba de origen de la API de Prompt, que se ejecuta en Chrome 131 a 136, para crear extensiones con esta API. Si es la primera vez que usas las pruebas de origen, debes saber que son programas por tiempo limitado abiertos a todos los desarrolladores que ofrecen acceso anticipado a funciones experimentales de la plataforma. Los desarrolladores pueden probar, recopilar comentarios de los usuarios y iterar para un lanzamiento futuro.
    • Si bien puede haber límites de uso, puedes integrar estas funciones para realizar pruebas en vivo y recopilar comentarios de los usuarios. El objetivo es informar las iteraciones futuras de esta API, a medida que trabajamos para lograr una mayor disponibilidad.
  • Únete al programa de vista previa anticipada para obtener una vista previa de las nuevas APIs de IA integradas y acceder a las conversaciones en nuestra lista de distribución.

Participa en la prueba de origen

Para usar la API de Prompt en las extensiones de Chrome, agrega el permiso "aiLanguageModelOriginTrial" a tu archivo manifest.json según el siguiente extracto, junto con cualquier otro permiso que pueda necesitar tu extensión.

Para registrar tu extensión para la prueba de origen, usa la URL chrome-extension://YOUR_EXTENSION_ID como Origen web. Por ejemplo, chrome-extension://ljjhjaakmncibonnjpaoglbhcjeolhkk.

Registro para la prueba de Chrome Origin

El ID de la extensión se crea de forma dinámica, pero una vez que se le asigna un ID, puedes forzar que permanezca estable agregando la propiedad key al manifiesto.

Después de registrarte en la prueba original, recibirás un token generado, que debes pasar en un array como el valor del campo trial_tokens en el manifiesto. Consulta el fragmento para ver un ejemplo.

{
  "permissions": ["aiLanguageModelOriginTrial"],
  "trial_tokens": ["GENERATED_TOKEN"],
}

Agrega compatibilidad con localhost

Para acceder a la API de Prompt en localhost durante la prueba de origen, debes actualizar Chrome a la versión más reciente. Luego, sigue estos pasos:

  1. Abre Chrome en una de estas plataformas: Windows, Mac o Linux.
  2. Ve a chrome://flags/#optimization-guide-on-device-model.
  3. Selecciona Enabled BypassPerfRequirement.
    • Esto omite las verificaciones de rendimiento que pueden impedir que descargues Gemini Nano en tu dispositivo.
  4. Haz clic en Reiniciar o reinicia Chrome.

Usa la API de Prompt

Una vez que hayas solicitado permiso para usar la API de Prompt, podrás compilar tu extensión. Hay dos funciones de extensión nuevas disponibles en el espacio de nombres chrome.aiOriginTrial.languageModel:

  • capabilities() para verificar qué puede hacer el modelo y si está disponible.
  • create() para iniciar una sesión de modelo de lenguaje.

Descarga del modelo

La API de Prompt usa el modelo Gemini Nano en Chrome. Si bien la API está integrada en Chrome, el modelo se descarga por separado la primera vez que una extensión usa la API.

Para determinar si el modelo está listo para usarse, llama a la función chrome.aiOriginTrial.languageModel.capabilities() asíncrona. Muestra un objeto AILanguageModelCapabilities con un campo available que puede tener tres valores posibles:

  • 'no': El navegador actual admite la API de Prompt, pero no se puede usar en este momento. Esto puede deberse a varios motivos, como la falta de espacio en el disco disponible para descargar el modelo.
  • 'readily': El navegador actual admite la API de Prompt y se puede usar de inmediato.
  • 'after-download': El navegador actual admite la API de Prompt, pero primero debe descargar el modelo.

Para activar la descarga del modelo y crear la sesión del modelo de lenguaje, llama a la función chrome.aiOriginTrial.languageModel.create() asíncrona. Si la respuesta a capabilities() fue 'after-download', se recomienda detectar el progreso de la descarga. De esta manera, puedes informar al usuario en caso de que la descarga demore.

const session = await chrome.aiOriginTrial.languageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
    });
  },
});

Capacidades del modelo

La función capabilities() también te informa sobre las capacidades del modelo de lenguaje. Además de available, el objeto AILanguageModelCapabilities resultante también tiene los siguientes campos:

  • defaultTopK: El valor predeterminado de top-K (predeterminado: 3).
  • maxTopK: Es el valor máximo de Top-K (8).
  • defaultTemperature: Es la temperatura (1.0) predeterminada. La temperatura debe estar entre 0.0 y 2.0.
await chrome.aiOriginTrial.languageModel.capabilities();
// {available: 'readily', defaultTopK: 3, maxTopK: 8, defaultTemperature: 1}

Crea una sesión

Una vez que te asegures de que la API de Prompt se pueda ejecutar, crea una sesión con la función create(), que luego te permitirá solicitarle al modelo con las funciones prompt() o promptStreaming().

Opciones de sesión

Cada sesión se puede personalizar con topK y temperature mediante un objeto de opciones opcional. Los valores predeterminados de estos parámetros se muestran desde chrome.aiOriginTrial.languageModel.capabilities().

const capabilities = await chrome.aiOriginTrial.languageModel.capabilities();
// Initializing a new session must either specify both `topK` and
// `temperature` or neither of them.
const slightlyHighTemperatureSession = await chrome.aiOriginTrial.languageModel.create({
  temperature: Math.max(capabilities.defaultTemperature * 1.2, 2.0),
  topK: capabilities.defaultTopK,
});

El objeto de opciones opcionales de la función create() también toma un campo signal, que te permite pasar un AbortSignal para destruir la sesión.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const session = await chrome.aiOriginTrial.languageModel.create({
  signal: controller.signal,
})
Mensajes del sistema

Con las instrucciones del sistema, puedes darle contexto al modelo de lenguaje.

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a helpful and friendly assistant.',
});
await session.prompt('What is the capital of Italy?');
// 'The capital of Italy is Rome.'

Instrucciones iniciales

Con las indicaciones iniciales, puedes proporcionarle al modelo de lenguaje contexto sobre las interacciones anteriores, por ejemplo, para permitir que el usuario reanude una sesión almacenada después de reiniciar el navegador.

const session = await chrome.aiOriginTrial.languageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful and friendly assistant.' },
    { role: 'user', content: 'What is the capital of Italy?' },
    { role: 'assistant', content: 'The capital of Italy is Rome.'},
    { role: 'user', content: 'What language is spoken there?' },
    { role: 'assistant', content: 'The official language of Italy is Italian. [...]' }
  ]
});

Información de la sesión

Una sesión de modelo de lenguaje determinada tiene una cantidad máxima de tokens que puede procesar. Puedes verificar el uso y el progreso hacia ese límite con las siguientes propiedades en el objeto de sesión:

console.log(`${session.tokensSoFar}/${session.maxTokens}
(${session.tokensLeft} left)`);

Persistencia de la sesión

Cada sesión realiza un seguimiento del contexto de la conversación. Las interacciones anteriores se tienen en cuenta para las interacciones futuras hasta que la ventana de contexto de la sesión esté completa.

const session = await chrome.aiOriginTrial.languageModel.create({
  systemPrompt: 'You are a friendly, helpful assistant specialized in clothing choices.'
});

const result1 = await session.prompt(
  'What should I wear today? It is sunny and I am unsure between a t-shirt and a polo.'
);
console.log(result1);

const result2 = await session.prompt(
  'That sounds great, but oh no, it is actually going to rain! New advice?'
);
console.log(result2);

Cómo clonar una sesión

Para preservar los recursos, puedes clonar una sesión existente con la función clone(). Se restablece el contexto de la conversación, pero la instrucción inicial o las instrucciones del sistema permanecerán intactas. La función clone() toma un objeto de opciones opcional con un campo signal, que te permite pasar un AbortSignal para destruir la sesión clonada.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const clonedSession = await session.clone({
  signal: controller.signal,
});

Cómo solicitarle al modelo

Puedes solicitarle al modelo con las funciones prompt() o promptStreaming().

Salida sin transmisión

Si esperas un resultado breve, puedes usar la función prompt() que muestra la respuesta una vez que está disponible.

// Start by checking if it's possible to create a session based on the
// availability of the model, and the characteristics of the device.
const {available, defaultTemperature, defaultTopK, maxTopK } =
  await chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.languageModel.create();

  // Prompt the model and wait for the whole result to come back.
  const result = await session.prompt('Write me a poem!');
  console.log(result);
}

Salida de transmisión

Si esperas una respuesta más larga, debes usar la función promptStreaming(), que te permite mostrar resultados parciales a medida que llegan del modelo.

const {available, defaultTemperature, defaultTopK, maxTopK } =
  await chrome.aiOriginTrial.languageModel.capabilities();

if (available !== 'no') {
  const session = await chrome.aiOriginTrial.languageModel.create();

  // Prompt the model and stream the result:
  const stream = session.promptStreaming('Write me an extra-long poem!');
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

promptStreaming() muestra un ReadableStream cuyos fragmentos se compilan uno en el otro de forma consecutiva. Por ejemplo, "Hello,", "Hello world,", "Hello world I am,", "Hello world I am an AI.". Este no es el comportamiento previsto. Nuestra intención es alinearnos con otras APIs de transmisión en la plataforma, en las que los fragmentos son partes sucesivas de una sola transmisión larga. Esto significa que el resultado sería una secuencia como "Hello", " world", " I am", " an AI".

Por ahora, para lograr el comportamiento deseado, puedes implementar lo siguiente. Esto funciona con el comportamiento estándar y el no estándar.

let result = '';
let previousChunk = '';

for await (const chunk of stream) {
  const newChunk = chunk.startsWith(previousChunk)
      ? chunk.slice(previousChunk.length) : chunk;
  console.log(newChunk);
  result += newChunk;
  previousChunk = chunk;
}
console.log(result);

Cómo detener la ejecución de una instrucción

Tanto prompt() como promptStreaming() aceptan un segundo parámetro opcional con un campo signal, que te permite detener las instrucciones en ejecución.

const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const result = await session.prompt(
  'Write me a poem!',
  { signal: controller.signal }
);

Cómo finalizar una sesión

Llama a destroy() para liberar recursos si ya no necesitas una sesión. Cuando se destruye una sesión, ya no se puede usar, y se aborta cualquier ejecución en curso. Te recomendamos que conserves la sesión si tienes la intención de solicitarle al modelo con frecuencia, ya que crear una sesión puede llevar un tiempo.

await session.prompt(
  'You are a friendly, helpful assistant specialized in clothing choices.'
);

session.destroy();

// The promise is rejected with an error explaining that
// the session is destroyed.
await session.prompt(
  'What should I wear today? It is sunny and I am unsure
  between a t-shirt and a polo.'
);

Demostración

Para probar la API de Prompt en las extensiones de Chrome, instala la extensión de demo. El código fuente de la extensión está disponible en GitHub.

Interfaz de demostración de la API de Prompt

Participa y comparte comentarios

Únete a la prueba de origen para comenzar a probar la API de Prompt ahora en tus extensiones de Chrome y comparte tus comentarios. Tus comentarios pueden afectar directamente la forma en que compilamos e implementamos las versiones futuras de esta API y todas las APIs de IA integradas.