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:
- Configurare il progetto, inclusa la chiave API
- Generare testo da input di solo testo
- Genera testo da input di testo e immagine (multimodale)
- Creare conversazioni in più passaggi (chat)
- Usa la modalità flusso per interazioni più rapide
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.
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:
- Generare testo da input di solo testo
- Genera testo da input di testo e immagine (multimodale)
- Creare conversazioni in più passaggi (chat)
- Usa la modalità flusso per interazioni più rapide
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 chiamatesendMessage
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 astartChat()
conhistory
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.