Comece a usar a API Gemini em apps da Web

Neste tutorial, mostramos como acessar a API Gemini diretamente do app da Web usando o SDK para JavaScript da IA do Google. Use esse SDK se não quiser trabalhar diretamente com APIs REST ou código do lado do servidor (como Node.js) para acessar modelos do Gemini no app da Web.

Neste tutorial, você aprenderá a fazer o seguinte:

Além disso, este tutorial contém seções sobre casos de uso avançados (como contagem de tokens), bem como opções para controlar a geração de conteúdo.

Pré-requisitos

Neste tutorial, presumimos que você esteja familiarizado com o uso do JavaScript para desenvolver apps da Web. Este guia não depende do framework.

Para concluir este tutorial, verifique se o ambiente de desenvolvimento atende aos seguintes requisitos:

  • Node.js (opcional)
  • Navegador da Web moderno

Configurar seu projeto

Antes de chamar a API Gemini, você precisa configurar seu projeto, o que inclui conseguir uma chave de API e inicializar o modelo.

Configurar sua chave de API

Para usar a API Gemini, você precisa de uma chave de API. Se você ainda não tiver uma, crie uma chave no Google AI Studio.

Gerar uma chave de API

Proteger sua chave de API

É altamente recomendável não verificar uma chave de API no sistema de controle de versões. Em vez disso, é necessário transmitir a chave de API para o app antes de inicializar o modelo.

Em todos os snippets deste tutorial, presume-se que você esteja acessando sua chave de API como uma constante global.

Inicializar o modelo generativo

Antes de fazer qualquer chamada de API, é preciso importar e inicializar o modelo 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 = "...";

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

      // ...

      const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});

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

Ao especificar um modelo, observe o seguinte:

  • Use um modelo específico para seu caso de uso (por exemplo, gemini-pro-vision é para entrada multimodal). Neste guia, as instruções para cada implementação listam o modelo recomendado para cada caso de uso.

Implemente casos de uso comuns

Agora que o projeto está configurado, é possível explorar o uso da API Gemini para implementar diferentes casos de uso:

Gerar texto com base apenas em entradas de texto

Quando a entrada do comando incluir apenas texto, use o modelo gemini-pro com o método generateContent para gerar a saída de texto:

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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

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

Gerar texto com base em entradas de texto e imagem (multimodal)

O Gemini fornece um modelo multimodal (gemini-pro-vision), para que você possa inserir texto e imagens. Revise os requisitos de imagem para entrada.

Quando a entrada da solicitação incluir texto e imagens, use o modelo gemini-pro-vision com o método generateContent para gerar a saída de texto:

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() {
  // For text-and-images input (multimodal), use the gemini-pro-vision model
  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

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

Criar conversas com vários turnos (chat)

Com o Gemini, é possível criar conversas livres em vários turnos. O SDK simplifica o processo gerenciando o estado da conversa. Portanto, ao contrário de generateContent, você não precisa armazenar o histórico da conversa.

Para criar uma conversa de várias interações (como um chat), use o modelo gemini-pro e inicialize o chat chamando startChat(). Em seguida, use sendMessage() para enviar uma nova mensagem de usuário, que também vai anexar a mensagem e a resposta ao histórico de chat.

Há duas opções possíveis de role associadas ao conteúdo em uma conversa:

  • user: o papel que fornece as solicitações. Esse valor é o padrão para chamadas sendMessage, e a função vai gerar uma exceção se um papel diferente for transmitido.

  • model: o papel que fornece as respostas. Esse papel pode ser usado ao chamar startChat() com history.

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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

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

Use o streaming para interações mais rápidas

Por padrão, o modelo retorna uma resposta depois de concluir todo o processo de geração. Consiga interações mais rápidas não esperando todo o resultado e, em vez disso, use o streaming para lidar com resultados parciais.

O exemplo a seguir mostra como implementar o streaming com o método generateContentStream para gerar texto a partir de um prompt de entrada de texto e imagem.

// ...

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

// ...

Você pode usar uma abordagem semelhante para casos de uso de chat e entrada somente de texto.

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

Consulte o exemplo de chat acima para saber como instanciar um chat.

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

Implemente casos de uso avançados

Os casos de uso comuns descritos na seção anterior deste tutorial ajudam você a se familiarizar com o uso da API Gemini. Esta seção descreve alguns casos de uso que podem ser considerados mais avançados.

Tokens de contagem

Ao usar prompts longos, pode ser útil contar os tokens antes de enviar qualquer conteúdo ao modelo. Os exemplos abaixo mostram como usar countTokens() para vários casos de 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 });

Opções para controlar a geração de conteúdo

É possível controlar a geração de conteúdo definindo parâmetros de modelo e usando as configurações de segurança.

Configurar parâmetros do modelo

Cada comando enviado ao modelo inclui valores de parâmetros que controlam como o modelo gera uma resposta. O modelo pode gerar diferentes resultados para diferentes valores de parâmetros. Saiba mais sobre os parâmetros de modelo. A configuração é mantida durante todo o ciclo de vida da instância de modelo.

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

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

Usar configurações de segurança

Você pode usar as configurações de segurança para ajustar a probabilidade de receber respostas que podem ser consideradas prejudiciais. Por padrão, as configurações de segurança bloqueiam conteúdo com probabilidade média e/ou alta de não ser seguro em todas as dimensões. Saiba mais sobre as Configurações de segurança.

Veja como definir uma configuração de segurança:

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

// ...

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

const model = genAI.getGenerativeModel({ model: "MODEL_NAME", safetySettings });

Também é possível definir mais de uma configuração de segurança:

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

A seguir

  • Design de prompt é o processo de criação de prompts que extraem a resposta desejada dos modelos de linguagem. Escrever solicitações bem estruturadas é uma parte essencial para garantir respostas precisas e de alta qualidade de um modelo de linguagem. Saiba mais sobre as práticas recomendadas para escrita de comandos.

  • O Gemini oferece diversas variações de modelo para atender às necessidades de diferentes casos de uso, como tipos de entrada e complexidade, implementações para chat ou outras tarefas de linguagem de diálogo e restrições de tamanho. Saiba mais sobre os modelos disponíveis do Gemini.

  • Gemini oferece opções para solicitar aumentos no limite de taxa. O limite de taxa para os modelos Genmini Pro é de 60 solicitações por minuto (RPM).