Comienza a usar la API de Gemini en apps web

En este instructivo, se muestra cómo acceder a la API de Gemini directamente desde tu aplicación 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 modelos de Gemini en tu app web.

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

Además, este instructivo contiene secciones sobre casos de uso avanzados (como contar 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 apps 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:

  • Node.js (opcional)
  • 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 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, crea una clave en Google AI Studio.

Obtén una clave de API.

Protege tu clave de API

Te recomendamos que no registres una clave de API en tu sistema de control de versión. En cambio, 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.

Inicializa el modelo generativo

Antes de que puedas hacer llamadas a la API, debes importar e 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 = "...";

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

Cuando especifiques un modelo, ten en cuenta lo siguiente:

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

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

Cuando la entrada de la instrucción incluya solo texto, usa el modelo gemini-pro con el método 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() {
  // 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();

Generar texto a partir de entradas de texto e imagen (multimodal)

Gemini proporciona un modelo multimodal (gemini-pro-vision), por lo que puedes ingresar imágenes y texto. Asegúrate de revisar los requisitos de las imágenes para la entrada.

Cuando la entrada de la instrucción incluya imágenes y texto, usa el modelo gemini-pro-vision con el método 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);

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

Crea conversaciones de varios turnos (chat)

Con Gemini, puedes desarrollar conversaciones de formato libre en varios turnos. El SDK simplifica el proceso mediante la administración del 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 el modelo gemini-pro e inicializa el chat llamando a startChat(). Luego, usa sendMessage() para enviar un mensaje de usuario nuevo, que también agregará el mensaje y la respuesta al historial de chat.

Hay dos opciones posibles para role asociado con el contenido en una conversación:

  • user: Es el rol que proporciona las indicaciones. Este valor es el predeterminado para las llamadas a 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 existente.

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

Usa la transmisión para interacciones más rápidas

Según la configuración 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 a que se complete el resultado y, en su lugar, usa la transmisión para controlar los 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 una solicitud 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 chat y entradas de solo texto.

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

Consulta el ejemplo de chat anterior para ver cómo crear 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.

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 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 el ciclo de vida de la instancia 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 la configuración de seguridad

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

Para establecer una configuración de seguridad, sigue estos pasos:

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

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

Próximos pasos

  • 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 escritura de instrucciones.

  • Gemini ofrece muchas 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.

  • Gemini ofrece opciones para solicitar aumentos del límite de frecuencia. El límite de frecuencia de los modelos Gemini Pro es de 60 solicitudes por minuto (RPM).