API Prompt

Thomas Steiner

Alexandra Klepper

Publié le 20 mai 2025, dernière mise à jour le 21 juillet 2025

Explication	Web	Extensions	État de Chrome	Intention
GitHub	Dans l'Origin Trial	Chrome 138	Afficher	Intention de tester

L'API Prompt vous permet d'envoyer des requêtes en langage naturel à Gemini Nano dans le navigateur.

Il existe de nombreuses façons d'utiliser l'API Prompt dans une application Web ou un site Web. Par exemple, vous pouvez créer :

• Recherche optimisée par l'IA : obtenez des réponses à vos questions en fonction du contenu d'une page Web.
• Flux d'actualités personnalisés : créez un flux qui classe dynamiquement les articles par catégorie et permet aux utilisateurs de filtrer ce contenu.

Ce ne sont là que quelques exemples. Nous avons hâte de découvrir vos créations.

Utiliser l'API Prompt

L'API Prompt utilise le modèle Gemini Nano dans Chrome. Bien que l'API soit intégrée à Chrome, le modèle est téléchargé séparément la première fois qu'une origine utilise l'API.

Pour déterminer si le modèle est prêt à être utilisé, appelez LanguageModel.availability(). Si la réponse à availability() était downloadable, écoutez la progression du téléchargement et informez l'utilisateur, car le téléchargement peut prendre du temps.

const availability = await LanguageModel.availability();

Pour déclencher le téléchargement et instancier le modèle linguistique, vérifiez l'activation de l'utilisateur. Appelez ensuite la fonction asynchrone LanguageModel.create().

const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Paramètres du modèle

La fonction params() vous informe sur les paramètres du modèle linguistique. L'objet comporte les champs suivants :

• defaultTopK : valeur top-K par défaut.
• maxTopK : valeur top-K maximale.
• defaultTemperature : température par défaut.
• maxTemperature : température maximale.

await LanguageModel.params();
// {defaultTopK: 3, maxTopK: 128, defaultTemperature: 1, maxTemperature: 2}

Créer une session

Une fois que l'API Prompt peut s'exécuter, vous créez une session avec la fonction create().

Chaque session peut être personnalisée avec topK et temperature à l'aide d'un objet d'options facultatif. Les valeurs par défaut de ces paramètres sont renvoyées à partir de LanguageModel.params().

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

L'objet d'options facultatif de la fonction create() accepte également un champ signal, qui vous permet de transmettre un AbortSignal pour détruire la session.

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

const session = await LanguageModel.create({
  signal: controller.signal,
});

Ajouter du contexte avec des requêtes initiales

Les invites initiales vous permettent de fournir au modèle de langage un contexte sur les interactions précédentes, par exemple pour permettre à l'utilisateur de reprendre une session stockée après le redémarrage du navigateur.

const session = await 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. [...]',
    },
  ],
});

Limiter les réponses avec un préfixe

Vous pouvez ajouter un rôle "assistant", en plus des rôles précédents, pour développer les réponses précédentes du modèle. Exemple :

const followup = await session.prompt([
  {
    role: "user",
    content: "I'm nervous about my presentation tomorrow"
  },
  {
    role: "assistant",
    content: "Presentations are tough!"
  }
]);

Dans certains cas, au lieu de demander une nouvelle réponse, vous pouvez préférer préremplir une partie du message de réponse du rôle "assistant". Cela peut être utile pour guider le modèle de langage afin qu'il utilise un format de réponse spécifique. Pour ce faire, ajoutez prefix: true au message de rôle "assistant" de fin. Exemple :

const characterSheet = await session.prompt([
  {
    role: 'user',
    content: 'Create a TOML character sheet for a gnome barbarian',
  },
  {
    role: 'assistant',
    content: '```toml\n',
    prefix: true,
  },
]);

Ajouter des messages

L'inférence peut prendre un certain temps, en particulier lorsque vous utilisez des entrées multimodales. Il peut être utile d'envoyer des requêtes prédéterminées à l'avance pour remplir la session, afin que le modèle puisse commencer le traitement.

Bien que les initialPrompts soient utiles lors de la création de la session, la méthode append() peut être utilisée en plus des méthodes prompt() ou promptStreaming() pour fournir des invites contextuelles supplémentaires après la création de la session.

Exemple :

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content:
        'You are a skilled analyst who correlates patterns across multiple images.',
    },
  ],
  expectedInputs: [{ type: 'image' }],
});

fileUpload.onchange = async () => {
  await session.append([
    {
      role: 'user',
      content: [
        {
          type: 'text',
          value: `Here's one image. Notes: ${fileNotesInput.value}`,
        },
        { type: 'image', value: fileUpload.files[0] },
      ],
    },
  ]);
};

analyzeButton.onclick = async (e) => {
  analysisResult.textContent = await session.prompt(userQuestionInput.value);
};

La promesse renvoyée par append() est remplie une fois l'invite validée, traitée et ajoutée à la session. La promesse est rejetée si l'invite ne peut pas être ajoutée.

Persistance et limites des sessions

Chaque session conserve le contexte de la conversation. Les interactions précédentes sont prises en compte pour les interactions futures jusqu'à ce que la fenêtre de contexte de la session soit pleine.

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content:
        'You are a friendly, helpful assistant specialized in clothing choices.',
    },
  ],
});

const result1 = await session.prompt(
  'What should I wear today? It is sunny. 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);

Chaque session peut traiter un nombre maximal de jetons. Pour vérifier votre progression par rapport à cette limite, procédez comme suit :

console.log(`${session.inputUsage}/${session.inputQuota}`);

Transmettre un schéma JSON

Ajoutez le champ responseConstraint à la méthode prompt() ou promptStreaming() pour transmettre un schéma JSON comme valeur. Vous pouvez ensuite utiliser la sortie structurée avec l'API Prompt.

Dans l'exemple suivant, le schéma JSON s'assure que le modèle répond avec true ou false pour classer un message donné comme portant sur la poterie.

const session = await LanguageModel.create();

const schema = {
  "type": "boolean"
};

const post = "Mugs and ramen bowls, both a bit smaller than intended, but that
happens with reclaim. Glaze crawled the first time around, but pretty happy
with it after refiring.";

const result = await session.prompt(
  `Is this post about pottery?\n\n${post}`,
  {
    responseConstraint: schema,
  }
);
console.log(JSON.parse(result));
// true

Votre implémentation peut inclure un schéma JSON ou une expression régulière dans le message envoyé au modèle. Cela utilise une partie du quota d'entrée. Vous pouvez mesurer la part du quota d'entrée qu'il utilisera en transmettant l'option responseConstraint à session.measureInputUsage().

Vous pouvez éviter ce comportement avec l'option omitResponseConstraintInput. Si vous le faites, nous vous recommandons d'inclure des conseils dans la requête :

const result = await session.prompt(`
  Summarize this feedback into a rating between 0-5. Only output a JSON
  object { rating }, with a single property whose value is a number:
  The food was delicious, service was excellent, will recommend.
`, { responseConstraint: schema, omitResponseConstraintInput: true });

Cloner une session

Pour préserver les ressources, vous pouvez cloner une session existante avec la fonction clone(). Le contexte de la conversation est réinitialisé, mais la requête initiale reste intacte. La fonction clone() accepte un objet d'options facultatif avec un champ signal, qui vous permet de transmettre un AbortSignal pour détruire la session clonée.

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

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

Inviter le modèle

Vous pouvez inviter le modèle à utiliser les fonctions prompt() ou promptStreaming().

Sortie non diffusée en streaming

Si vous attendez un résultat court, vous pouvez utiliser la fonction prompt() qui renvoie la réponse une fois qu'elle 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 { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
  await LanguageModel.params();

const available = await LanguageModel.availability();

if (available !== 'unavailable') {
  const session = await 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);
}

Sortie en flux continu

Si vous vous attendez à une réponse plus longue, vous devez utiliser la fonction promptStreaming(), qui vous permet d'afficher les résultats partiels à mesure qu'ils sont fournis par le modèle. La fonction promptStreaming() renvoie un ReadableStream.

const { defaultTemperature, maxTemperature, defaultTopK, maxTopK } =
  await LanguageModel.params();

const available = await LanguageModel.availability();
if (available !== 'unavailable') {
  const session = await 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);
  }
}

Arrêter les suggestions

prompt() et promptStreaming() acceptent un deuxième paramètre facultatif avec un champ signal, qui vous permet d'arrêter l'exécution des requêtes.

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

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

Arrêter une session

Appelez destroy() pour libérer des ressources si vous n'avez plus besoin d'une session. Lorsqu'une session est détruite, elle ne peut plus être utilisée et toute exécution en cours est abandonnée. Vous pouvez conserver la session si vous avez l'intention d'interroger souvent le modèle, car la création d'une session peut prendre un certain temps.

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 choosing between a t-shirt
  and a polo."
);

Fonctionnalités multimodales

L'origin trial de l'API Prompt accepte les entrées audio et image. L'API renvoie une sortie textuelle.

Ces fonctionnalités vous permettent d'effectuer les opérations suivantes :

• Autorisez les utilisateurs à transcrire les messages audio envoyés dans une application de chat.
• Décrivez une image importée sur votre site Web pour l'utiliser dans une légende ou un texte alternatif.

const session = await LanguageModel.create({
  // { type: 'text' } only required when including expected input languages.
  expectedInputs: [{ type: 'audio' }, { type: 'image' }],
});

const referenceImage = await (await fetch('/reference-image.jpeg')).blob();
const userDrawnImage = document.querySelector('canvas');

const response1 = await session.prompt([
  {
    role: 'user',
    content: [
      {
        type: 'text',
        value:
          'Give an artistic critique of how well the second image matches the first:',
      },
      { type: 'image', value: referenceImage },
      { type: 'image', value: userDrawnImage },
    ],
  },
]);

console.log(response1);

const audioBlob = await captureMicrophoneInput({ seconds: 10 });

const response2 = await session.prompt([
  {
    role: 'user',
    content: [
      { type: 'text', value: 'My response to your critique:' },
      { type: 'audio', value: audioBlob },
    ],
  },
]);

Consultez la démo Mediarecorder Audio Prompt pour découvrir comment utiliser l'API Prompt avec une entrée audio et la démo Canvas Image Prompt pour découvrir comment utiliser l'API Prompt avec une entrée image.

Stratégie de performances

L'API Prompt pour le Web est toujours en cours de développement. En attendant que nous développions cette API, consultez nos bonnes pratiques sur la gestion des sessions pour des performances optimales.

Règles sur les autorisations, iFrames et Web Workers

Par défaut, l'API Prompt n'est disponible que pour les fenêtres de premier niveau et leurs iframes de même origine. L'accès à l'API peut être délégué aux iFrames multi-origine à l'aide de l'attribut allow="" de la règle d'autorisation :

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Prompt API by
  setting the `allow="language-model"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-model"></iframe>

L'API Prompt n'est pas disponible dans les Web Workers pour le moment, car il est complexe d'établir un document responsable pour chaque worker afin de vérifier l'état des règles relatives aux autorisations.

Participer et envoyer des commentaires

Vos réponses peuvent avoir un impact direct sur la façon dont nous concevons et implémentons les futures versions de cette API et de toutes les API d'IA intégrées.

• Pour envoyer des commentaires sur l'implémentation de Chrome, signalez un bug ou demandez l'ajout d'une fonctionnalité.
• Partagez vos commentaires sur la forme de l'API en commentant un problème existant ou en en ouvrant un nouveau dans le dépôt GitHub de l'API Prompt.
• Rejoignez le programme Preview anticipée.