Únete a la competencia para desarrolladores de la API de Gemini. Más información

Se usó la API de Cloud Translation para traducir esta página.

Instructivo: Comienza a usar la API de Gemini

En este instructivo, se muestra cómo acceder a la API de Gemini directamente desde tu app web con el SDK de JavaScript de la IA de Google. Puedes usar este SDK si no quieres trabajar directamente con las APIs de REST o con el código del servidor (como Node.js) para acceder a los modelos de Gemini en tu app web.

En este instructivo, aprenderás a hacer lo siguiente:

Configura tu proyecto, incluida tu clave de API
Cómo generar texto a partir de entradas de solo texto
Genera texto a partir de entradas de texto e imágenes (multimodal)
Crea conversaciones de varios turnos (chat)
Usa la transmisión para interactuar más rápido

Además, este instructivo contiene secciones sobre casos de uso avanzados (como recuento de tokens) y opciones para controlar la generación de contenido.

Requisitos previos

En este instructivo, se supone que estás familiarizado con el uso de JavaScript para desarrollar aplicaciones web. Esta guía es independiente del framework.

Para completar este instructivo, asegúrate de que tu entorno de desarrollo cumpla con los siguientes requisitos:

(Opcional) Node.js
Navegador web moderno

Configura tu proyecto

Antes de llamar a la API de Gemini, debes configurar tu proyecto, lo que incluye obtener una clave de API, importar el SDK e inicializar el modelo.

Cómo configurar tu clave de API

Para usar la API de Gemini, necesitarás una clave de API. Si aún no tienes una, créala en Google AI Studio.

Obtén una clave de API.

Protege tu clave de API

Te recomendamos que no incluyas una clave de API en tu sistema de control de versión. En su lugar, debes pasar la clave de API a la app justo antes de inicializar el modelo.

En todos los fragmentos de este instructivo, se supone que accedes a tu clave de API como una constante global.

Importa el SDK y, luego, inicializa el modelo generativo

Antes de realizar llamadas a la API, debes importar el SDK y, luego, inicializar el 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 = "...";
      // 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>

Cuando especifiques un modelo, ten en cuenta lo siguiente:

Usa un modelo que sea específico para tu caso de uso (por ejemplo, gemini-1.5-flash es para entrada multimodal). En esta guía, las instrucciones para cada implementación enumeran el modelo recomendado para cada caso de uso.

Nota: Para obtener información detallada sobre los modelos disponibles, incluidos sus capacidades y límites de frecuencia, consulta Modelos de Gemini. Ofrecemos opciones para solicitar aumentos del límite de frecuencia si el valor predeterminado no es suficiente.

Implementa casos de uso comunes

Ahora que tu proyecto está configurado, puedes explorar el uso de la API de Gemini para implementar diferentes casos de uso:

Cómo generar texto a partir de entradas de solo texto
Genera texto a partir de entradas de texto e imágenes (multimodal)
Crea conversaciones de varios turnos (chat)
Usa la transmisión para interactuar más rápido

Genera texto a partir de entradas de solo texto

Cuando la entrada de instrucción incluya solo texto, usa un modelo de Gemini 1.5 o el modelo de Gemini 1.0 Pro con generateContent para generar una salida 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() {
  // 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();

Generar texto a partir de entradas de texto e imágenes (multimodal)

Gemini proporciona varios modelos que pueden controlar entradas multimodales (modelos de Gemini 1.5) para que puedas ingresar imágenes y texto. Asegúrate de revisar los requisitos de imagen para las instrucciones.

Cuando la entrada de la instrucción incluya imágenes y texto, usa un modelo de Gemini 1.5 con el método generateContent para generar salida 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() {
  // 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();

Crea conversaciones de varios turnos (chat)

Con Gemini, puedes entablar conversaciones de formato libre en múltiples turnos. El SDK simplifica el proceso, ya que administra el estado de la conversación, por lo que, a diferencia de generateContent, no tienes que almacenar el historial de la conversación.

Para crear una conversación de varios turnos (como el chat), usa un modelo de Gemini 1.5 o el modelo de Gemini 1.0 Pro, e inicializa el chat llamando a startChat(). Luego, usa sendMessage() para enviar un mensaje al usuario nuevo, que también adjuntará el mensaje y la respuesta al historial de chat.

Existen dos opciones posibles para role asociado al contenido de una conversación:

user: Es la función que proporciona los mensajes. Este valor es el predeterminado para las llamadas sendMessage, y la función arrojará una excepción si se pasa una función diferente.
model: Es la función que proporciona las respuestas. Esta función se puede usar cuando se llama a startChat() con history existentes.

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 transmisión para tener interacciones más rápidas

De forma predeterminada, el modelo muestra una respuesta después de completar todo el proceso de generación. Puedes lograr interacciones más rápidas si no esperas todo el resultado y, en su lugar, usa la transmisión para controlar resultados parciales.

En el siguiente ejemplo, se muestra cómo implementar la transmisión con el método generateContentStream para generar texto a partir de un mensaje de entrada de imagen y texto.

// ...

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

// ...

Puedes usar un enfoque similar para los casos de uso de entrada de solo texto y chat.

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

Consulta el ejemplo de chat anterior para obtener una instancia de chat.

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

Implementa casos de uso avanzados

Los casos de uso comunes descritos en la sección anterior de este instructivo te ayudarán a familiarizarte con el uso de la API de Gemini. En esta sección, se describen algunos casos de uso que podrían considerarse más avanzados.

Llamada a función

Las llamadas a función facilitan la obtención de resultados de datos estructurados de modelos generativos. Luego, puedes usar estos resultados para llamar a otras APIs y mostrar los datos de respuesta relevantes al modelo. En otras palabras, las llamadas a función te ayudan a conectar modelos generativos a sistemas externos para que el contenido generado incluya la información más actualizada y precisa. Obtén más información en el instructivo de llamada a funciones.

Contar tokens

Cuando se usan instrucciones largas, puede ser útil contar los tokens antes de enviar contenido al modelo. En los siguientes ejemplos, se muestra cómo usar countTokens() para varios 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 });

Opciones para controlar la generación de contenido

Puedes controlar la generación de contenido mediante la configuración de los parámetros del modelo y el uso de la configuración de seguridad.

Configura los parámetros del modelo

Cada instrucción que envías al modelo incluye valores de parámetros que controlan cómo el modelo genera una respuesta. El modelo puede generar resultados diferentes para los valores de parámetros diferentes. Obtén más información sobre los parámetros del modelo. La configuración se mantiene durante toda la vida útil de tu instancia de modelo.

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

Usar la configuración de seguridad

Puedes usar la configuración de seguridad para ajustar la probabilidad de recibir respuestas que puedan considerarse dañinas. De forma predeterminada, la configuración de seguridad bloquea el contenido con probabilidad media o alta de ser contenido no seguro en todas las dimensiones. Obtén más información sobre la configuración de seguridad.

Sigue estos pasos para establecer una configuración de seguridad:

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

También puedes establecer más de una configuración de seguridad:

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

¿Qué sigue?

El diseño de instrucciones es el proceso de crear instrucciones que producen la respuesta deseada de los modelos de lenguaje. Escribir instrucciones bien estructuradas es una parte esencial de garantizar respuestas precisas y de alta calidad desde un modelo de lenguaje. Obtén más información sobre las prácticas recomendadas para la redacción de instrucciones.
Gemini ofrece varias variaciones del modelo para satisfacer las necesidades de distintos casos de uso, como los tipos de entrada y la complejidad, las implementaciones para chat y otras tareas de lenguaje de diálogo, y las restricciones de tamaño. Obtén más información sobre los modelos de Gemini disponibles.