Tutorial: inizia a utilizzare l'API Gemini


Questo tutorial mostra come accedere all'API Gemini direttamente dalla tua app web utilizzando l'SDK JavaScript per l'IA di Google. Puoi utilizzare questo SDK se non vuoi lavorare direttamente con le API REST o con il codice lato server (come Node.js) per accedere ai modelli Gemini nella tua app web.

In questo tutorial imparerai a:

Inoltre, questo tutorial contiene sezioni sui casi d'uso avanzati (come il conteggio dei token) e sulle opzioni per controllare la generazione di contenuti.

Prerequisiti

Questo tutorial presuppone che tu abbia familiarità con l'utilizzo di JavaScript per sviluppare app web. Questa guida è indipendente dal framework.

Per completare questo tutorial, assicurati che il tuo ambiente di sviluppo soddisfi i seguenti requisiti:

  • (Facoltativo) Node.js
  • Browser web moderno

Configura il progetto

Prima di chiamare l'API Gemini, devi configurare il progetto, il che include l'ottenimento di una chiave API, l'importazione dell'SDK e l'inizializzazione del modello.

Configura la chiave API

Per utilizzare l'API Gemini, hai bisogno di una chiave API. Se non ne hai già una, crea una chiave in Google AI Studio.

Ottenere una chiave API

Proteggi la chiave API

Ti consigliamo vivamente di non controllare una chiave API nel tuo sistema di controllo della versione. Devi passare la chiave API all'app subito prima di inizializzare il modello.

Tutti gli snippet in questo tutorial presuppongono che l'accesso alla chiave API sia come costante globale.

Importa l'SDK e inizializza il modello generativo

Prima di poter effettuare chiamate API, devi importare l'SDK e inizializzare il modello generativo.

<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>

Quando specifichi un modello, tieni presente quanto segue:

  • Utilizza un modello specifico per il tuo caso d'uso (ad esempio, gemini-1.5-flash è per l'input multimodale). All'interno di questa guida, le istruzioni per ogni implementazione elencano il modello consigliato per ogni caso d'uso.

Implementare casi d'uso comuni

Ora che il progetto è configurato, puoi esplorare l'utilizzo dell'API Gemini per implementare diversi casi d'uso:

Genera testo da input di solo testo

Quando l'input del prompt include solo testo, utilizza un modello Gemini 1.5 o Gemini 1.0 Pro con generateContent per generare un output di testo:

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();

Genera testo da input di testo e immagine (multimodale)

Gemini offre vari modelli in grado di gestire l'input multimodale (modelli Gemini 1.5) in modo da poter inserire sia testo che immagini. Assicurati di rivedere i requisiti relativi alle immagini per i prompt.

Quando l'input del prompt include sia testo che immagini, utilizza un modello Gemini 1.5 con il metodo generateContent per generare un output di testo:

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();

Creare conversazioni in più passaggi (chat)

Con Gemini, puoi creare conversazioni in formato libero in più turni. L'SDK semplifica il processo gestendo lo stato della conversazione, quindi, a differenza di generateContent, non devi archiviare manualmente la cronologia delle conversazioni.

Per creare una conversazione in più passaggi (come la chat), utilizza un modello Gemini 1.5 o Gemini 1.0 Pro e inizializza la chat chiamando startChat(). Utilizza quindi sendMessage() per inviare un nuovo messaggio utente, che aggiungerà anche il messaggio e la risposta alla cronologia chat.

Esistono due possibili opzioni per role associate ai contenuti in una conversazione:

  • user: il ruolo che fornisce i prompt. Questo valore è il valore predefinito per le chiamate sendMessage e la funzione genererà un'eccezione se viene passato un ruolo diverso.

  • model: il ruolo che fornisce le risposte. Questo ruolo può essere utilizzato durante la chiamata a startChat() con history esistente.

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();

Usa la modalità flusso per interazioni più rapide

Per impostazione predefinita, il modello restituisce una risposta dopo aver completato l'intero processo di generazione. Puoi ottenere interazioni più rapide non attendere l'intero risultato e utilizzare invece la modalità flusso per gestire i risultati parziali.

L'esempio seguente mostra come implementare il flusso di dati con il metodo generateContentStream per generare testo da una richiesta di input di testo e immagine.

// ...

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;
}

// ...

Puoi utilizzare un approccio simile per casi d'uso di input di solo testo e chat.

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

Per informazioni su come creare un'istanza di chat, vedi l'esempio di chat riportato sopra.

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

Implementare casi d'uso avanzati

I casi d'uso comuni descritti nella sezione precedente di questo tutorial ti aiutano ad acquisire dimestichezza con l'utilizzo dell'API Gemini. Questa sezione descrive alcuni casi d'uso che possono essere considerati più avanzati.

Chiamate di funzione

La chiamata di funzione semplifica l'ottenimento di output di dati strutturati da modelli generativi. Puoi quindi utilizzare questi output per chiamare altre API e restituire i dati di risposta pertinenti al modello. In altre parole, le chiamate di funzione consentono di collegare modelli generativi a sistemi esterni, in modo che i contenuti generati includano le informazioni più aggiornate e accurate. Scopri di più nel tutorial sulle chiamate di funzione.

Conta token

Quando utilizzi prompt lunghi, può essere utile contare i token prima di inviare contenuti al modello. I seguenti esempi mostrano come utilizzare countTokens() per vari casi d'uso:

// 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 });

Opzioni per controllare la generazione di contenuti

Puoi controllare la generazione di contenuti configurando i parametri del modello e utilizzando le impostazioni di sicurezza.

Configura i parametri del modello

Ogni prompt inviato al modello include valori parametro che controllano il modo in cui il modello genera una risposta. Il modello può generare risultati diversi per valori parametro diversi. Scopri di più sui parametri del modello. La configurazione viene mantenuta per tutta la durata dell'istanza del modello.

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 });

Utilizzare le impostazioni di sicurezza

Puoi utilizzare le impostazioni di sicurezza per modificare la probabilità di ricevere risposte che potrebbero essere considerate dannose. Per impostazione predefinita, le impostazioni di sicurezza bloccano i contenuti con probabilità media e/o alta di non essere sicuri in tutte le dimensioni. Scopri di più sulle impostazioni di sicurezza.

Per configurare un'impostazione di sicurezza:

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 });

Puoi anche configurare più di un'impostazione di sicurezza:

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

Passaggi successivi

  • La progettazione dei prompt è il processo di creazione di prompt che suscitano la risposta desiderata dai modelli linguistici. Scrivere prompt ben strutturati è essenziale per garantire risposte accurate e di alta qualità da un modello linguistico. Scopri le best practice per la scrittura di prompt.

  • Gemini offre diverse varianti del modello per soddisfare le esigenze di diversi casi d'uso, come tipi di input e complessità, implementazioni di chat o altre attività basate su dialoghi di dialoghi e limiti di dimensioni. Scopri di più sui modelli Gemini disponibili.