Tutoriel: Premiers pas avec l'API Gemini


Ce tutoriel explique comment accéder à l'API Gemini directement depuis votre application Web à l'aide du SDK JavaScript de Google AI. Vous pouvez utiliser ce SDK si vous ne souhaitez pas travailler directement avec des API REST ni avec du code côté serveur (comme Node.js) pour accéder aux modèles Gemini dans votre application Web.

Dans ce tutoriel, vous allez apprendre à effectuer les opérations suivantes:

En outre, ce tutoriel contient des sections sur des cas d'utilisation avancés (comme le compte des jetons) ainsi que des options de contrôle de la génération de contenu.

Conditions préalables

Dans ce tutoriel, nous partons du principe que vous maîtrisez JavaScript pour développer des applications Web. Ce guide est indépendant du framework.

Pour suivre ce tutoriel, assurez-vous que votre environnement de développement répond aux exigences suivantes:

  • (Facultatif) Node.js
  • Navigateur Web moderne

Configurer votre projet

Avant d'appeler l'API Gemini, vous devez configurer votre projet, ce qui inclut l'obtention d'une clé API, l'importation du SDK et l'initialisation du modèle.

Configurer votre clé API

Pour utiliser l'API Gemini, vous avez besoin d'une clé API. Si ce n'est pas déjà fait, créez une clé dans Google AI Studio.

Obtenir une clé API

Sécuriser votre clé API

Il est fortement recommandé de ne pas vérifier de clé API dans votre système de contrôle des versions. À la place, vous devez transmettre votre clé API à votre application juste avant d'initialiser le modèle.

Tous les extraits de ce tutoriel partent du principe que vous accédez à votre clé API en tant que constante globale.

Importer le SDK et initialiser le modèle génératif

Avant de pouvoir effectuer des appels d'API, vous devez importer le SDK et initialiser le modèle génératif.

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";
      // Reminder: This should only be for local testing

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      // The Gemini 1.5 models are versatile and work with most use cases
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

      // ...
    </script>
  </body>
</html>

Lorsque vous spécifiez un modèle, tenez compte des points suivants:

  • Utilisez un modèle spécifique à votre cas d'utilisation (par exemple, gemini-1.5-flash est destiné à l'entrée multimodale). Dans ce guide, les instructions correspondant à chaque implémentation répertorient le modèle recommandé pour chaque cas d'utilisation.

Mettre en œuvre des cas d'utilisation courants

Maintenant que votre projet est configuré, vous pouvez explorer l'utilisation de l'API Gemini pour implémenter différents cas d'utilisation:

Générer du texte à partir d'une entrée textuelle uniquement

Lorsque l'entrée de la requête n'inclut que du texte, utilisez un modèle Gemini 1.5 ou Gemini 1.0 Pro avec generateContent pour générer une sortie textuelle:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Générer du texte à partir d'une entrée texte et image (multimodal)

Gemini fournit différents modèles pouvant gérer la saisie multimodale (modèles Gemini 1.5) afin que vous puissiez saisir à la fois du texte et des images. Veillez à consulter les exigences concernant les images pour les requêtes.

Lorsque l'entrée de la requête inclut à la fois du texte et des images, utilisez un modèle Gemini 1.5 avec la méthode generateContent pour générer une sortie textuelle:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Développer des conversations multitours (chat)

Avec Gemini, vous pouvez construire des conversations libres dans plusieurs tours. Le SDK simplifie le processus en gérant l'état de la conversation. Ainsi, contrairement à generateContent, vous n'avez pas besoin de stocker vous-même l'historique de la conversation.

Pour créer une conversation multitours (comme un chat), utilisez un modèle Gemini 1.5 ou Gemini 1.0 Pro, puis initialisez la discussion en appelant startChat(). Utilisez ensuite sendMessage() pour envoyer un nouveau message à l'utilisateur, qui ajoutera également le message et la réponse à l'historique des discussions.

Il existe deux options possibles pour role associées au contenu d'une conversation:

  • user: rôle qui fournit les invites. Cette valeur est la valeur par défaut pour les appels sendMessage. La fonction génère une exception si un autre rôle est transmis.

  • model: rôle qui fournit les réponses. Ce rôle peut être utilisé lorsque vous appelez startChat() avec un history existant.

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Utiliser le streaming pour des interactions plus rapides

Par défaut, le modèle renvoie une réponse à la fin du processus de génération. Vous pouvez obtenir des interactions plus rapides en n'attendant pas l'intégralité du résultat et en utilisant plutôt le traitement par flux pour gérer les résultats partiels.

L'exemple suivant montre comment implémenter la diffusion en continu avec la méthode generateContentStream pour générer du texte à partir d'une requête d'entrée de texte et d'image.

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

Vous pouvez adopter une approche similaire pour les cas d'utilisation de saisie uniquement de texte et de chat.

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

Consultez l'exemple de chat ci-dessus pour découvrir comment instancier un chat.

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

Implémenter des cas d'utilisation avancés

Les cas d'utilisation courants décrits dans la section précédente de ce tutoriel vous aident à vous familiariser avec l'API Gemini. Cette section décrit certains cas d'utilisation pouvant être considérés comme plus avancés.

Appel de fonction

L'appel de fonction vous permet d'obtenir plus facilement des sorties de données structurées à partir de modèles génératifs. Vous pouvez ensuite utiliser ces sorties pour appeler d'autres API et renvoyer les données de réponse pertinentes au modèle. En d'autres termes, l'appel de fonction vous aide à connecter des modèles génératifs à des systèmes externes afin que le contenu généré inclue les informations les plus récentes et les plus précises. Pour en savoir plus, consultez le tutoriel sur l'appel de fonction.

Compter les jetons

Lorsque vous utilisez de longues requêtes, il peut être utile de compter les jetons avant d'envoyer du contenu au modèle. Les exemples suivants montrent comment utiliser countTokens() pour différents cas d'utilisation:

// For text-only input
const { totalTokens } = await model.countTokens(prompt);

// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);

// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

Options pour contrôler la génération de contenu

Vous pouvez contrôler la génération de contenu en configurant les paramètres du modèle et en utilisant les paramètres de sécurité.

Configurer les paramètres du modèle

Chaque requête que vous envoyez au modèle inclut des valeurs de paramètre qui contrôlent la manière dont le modèle génère une réponse. Le modèle peut générer différents résultats pour différentes valeurs de paramètre. En savoir plus sur les paramètres de modèle La configuration est conservée pendant la durée de vie de votre instance de modèle.

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",  generationConfig });

Utiliser les paramètres de sécurité

Vous pouvez utiliser les paramètres de sécurité pour ajuster la probabilité d'obtenir des réponses susceptibles d'être considérées comme dangereuses. Par défaut, les paramètres de sécurité bloquent le contenu dont la probabilité est moyenne et/ou élevée d'être dangereux pour toutes les dimensions. En savoir plus sur les paramètres de sécurité

Pour définir un paramètre de sécurité, procédez comme suit:

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });

Vous pouvez également définir plusieurs paramètres de sécurité:

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

Étapes suivantes

  • La conception de requêtes est le processus de création de requêtes qui permettent d'obtenir la réponse souhaitée en utilisant des modèles de langage. Pour rédiger des réponses précises et de haute qualité à partir d'un modèle de langage, il est essentiel de rédiger des requêtes bien structurées. Découvrez les bonnes pratiques pour rédiger des requêtes.

  • Gemini propose plusieurs variantes de modèles pour répondre aux besoins de différents cas d'utilisation, tels que les types et la complexité des entrées, les implémentations de chat ou d'autres tâches liées au langage de dialogue, ainsi que les contraintes de taille. En savoir plus sur les modèles Gemini disponibles