En este post, vas a aprender cómo acceder a las APIs de Gemini para crear la próxima generación de Aplicaciones habilitadas para IA usando Angular.

Vamos a construir una aplicación sencilla para probar Gemini Pro y Gemini Pro Visual a través del cliente oficial. Como bonus, también mostraremos cómo puedes usar Vertex AI a través de su REST API.

Introducción a Google Gemini


Google Gemini es una familia de grandes modelos lingüísticos (LLM) que ofrece capacidades de IA de última generación creadas por Google AI. Los modelos Gemini incluyen:

Gemini Ultra

El modelo más grande y potente, destaca en tareas complejas como la codificación, el razonamiento lógico y la colaboración creativa. Disponible a través de Gemini Advanced (anteriormente Bard).

Gemini Pro

Un modelo de tamaño medio optimizado para diversas tareas, ofrece un rendimiento comparable a Ultra. Disponible a través de Gemini Chatbot y en Google Workspace y Google Cloud.

Gemini Pro 1.5

Ha mejorado el rendimiento, incluyendo un gran avance en la comprensión de contextos largos de hasta un millón de tokens, incluyendo texto, código, imágenes, audio y vídeo.

Gemini Nano

Un modelo ligero diseñado para su uso en el dispositivo, lleva las capacidades de IA a los teléfonos móviles y dispositivos pequeños. Disponible en Pixel 8 y la serie Samsung S24.

Gemma

Modelo de código abierto inspirado en Gemini, ofrece un rendimiento de vanguardia en tamaños más pequeños y diseñado teniendo en cuenta los principios de la IA responsable.

CPU
1 vCPU
MEMORIA
1 GB
ALMACENAMIENTO
10 GB
TRANSFERENCIA
1 TB
PRECIO
$ 4 mes
Para obtener el servidor GRATIS debes de escribir el cupon "LEIFER"

Obtención de la clave API de Google AI Studio


Ve a aistudio.google.com y crea una clave API. Si no resides en EE.UU., puedes utilizar Vertex AI, que está disponible en todo el mundo, o utilizar un servicio VPN.

Creación de la aplicación Angular


Usa el CLI de Angular para generar una nueva aplicación:

ng new google-ai-gemini-angular

Esto crea un nuevo proyecto con la última versión de Angular.

Configurar el proyecto

Ejecuta este comando para añadir un nuevo entorno:

ng g environments

Ejecuta este comando development para añadir  un nuevo entorno de production:

src/environments/environment.development.ts
src/environments/environment.ts

Edite el archivo  development  para incluir su clave de API:

// src/environments/environment.development.ts
export const environment = {
  API_KEY: "<YOUR-API-KEY>",
};

SDK JavaScript de Google AI


Este es el cliente oficial para acceder a los modelos Gemini.

Lo utilizaremos para:

  • Generar texto a partir de una entrada de sólo texto (texto)
  • Generar texto a partir de texto e imágenes (multimodal)
  • Construir conversaciones multiturno (chat)
  • Generar contenido a medida que se crea usando streaming (stream)

Añade este paquete a tu proyecto:

npm install @google/generative-ai

Inicializar el modelo


Antes de llamar a Gemini tenemos que inicializar el modelo.

Esto incluye los siguientes pasos:

  • Inicializar el cliente GoogleGenerativeAI con tu clave API.
  • Elegir un modelo Gemini: gemini-pro o gemini-pro-vision.
  • Configurar los parámetros del modelo incluyendo safetySettings, temperature, top_p, top_k y maxOutputTokens.
import {
  GoogleGenerativeAI, HarmBlockThreshold, HarmCategory 
} from '@google/generative-ai';

...
const genAI = new GoogleGenerativeAI(environment.API_KEY);
const generationConfig = {
  safetySettings: [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_LOW_AND_ABOVE,
    },
  ],
  temperature: 0.9,
  top_p: 1,
  top_k: 32,
  maxOutputTokens: 100, // limit output
};
const model = genAI.getGenerativeModel({
  model: 'gemini-pro', // or 'gemini-pro-vision'
  ...generationConfig,
});
...

Para los ajustes de Seguridad puedes utilizar los valores por defecto (bloqueo medio o alto) o ajustarlos a tus necesidades.

En el ejemplo, hemos aumentado el umbral de acoso para bloquear las salidas con probabilidad baja o superior a insegura. Puede encontrar una explicación más detallada aquí.

Estos son todos los modelos disponibles y su configuración por defecto. Hay un límite de 60 peticiones por minuto. Puede obtener más información sobre los parámetros de los modelos aquí.

Generar texto a partir de una entrada de sólo texto (texto)


A continuación puede ver un fragmento de código que demuestra Gemini Pro con una entrada de sólo texto.

async TestGeminiPro() {
  // Model initialisation missing for brevity

  const prompt = 'What is the largest number with a name?';
  const result = await model.generateContent(prompt);
  const response = await result.response;
  console.log(response.text());
}

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


Este ejemplo muestra cómo utilizar Gemini Pro Vision con texto e imágenes como entrada. Usamos una imagen en src/assets por conveniencia.

async TestGeminiProVisionImages() {
  try {
    let imageBase64 = await this.fileConversionService.convertToBase64(
      'assets/baked_goods_2.jpeg'
    );
  
    // Check for successful conversion to Base64
    if (typeof imageBase64 !== 'string') {
      console.error('Image conversion to Base64 failed.');
      return;
    }
    // Model initialisation missing for brevity
    let prompt = [
      {
        inlineData: {
          mimeType: 'image/jpeg',
          data: imageBase64,
        },
      },
      {
        text: 'Provide a recipe.',
      },
    ];
    const result = await model.generateContent(prompt);
    const response = await result.response;
    console.log(response.text());
  } catch (error) {
    console.error('Error converting file to Base64', error);
  }
}

Para convertir la imagen de entrada en Base64 puede utilizar el FileConversionService que se indica a continuación o una biblioteca externa.

// file-conversion.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FileConversionService { 
  constructor(private http: HttpClient) {}
  async convertToBase64(filePath: string): Promise<string | ArrayBuffer | null> {
    const blob = await firstValueFrom(this.http.get(filePath, { responseType: 'blob' }));
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64data = reader.result as string; 
        resolve(base64data.substring(base64data.indexOf(',') + 1)); // Extract only the Base64 data
      };
      reader.onerror = error => {
        reject(error);
      };
      reader.readAsDataURL(blob);
    });
  }
}

Requisitos de imagen para Gemini:

  • Tipos MIME admitidos: image/png, image/jpeg, image/webp, image/heic e image/heif.
  • Máximo de 16 imágenes.
  • Máximo de 4 MB incluyendo imágenes y texto.
  • Las imágenes grandes se reducen para que quepan a 3072 x 3072 píxeles conservando su relación de aspecto original.

Construir conversaciones multiturno (chat)


Este ejemplo muestra cómo utilizar Gemini Pro para construir una conversación multivuelta.

async TestGeminiProChat() {
  // Model initialisation missing for brevity
  
  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: "Hi there!",
      },
      {
        role: "model",
        parts: "Great to meet you. What would you like to know?",
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });
  const prompt = 'What is the largest number with a name? Brief answer.';
  const result = await chat.sendMessage(prompt);
  const response = await result.response;
  console.log(response.text());
  }

Puede utilizar el mensaje inicial del usuario en el historial como una instrucción del sistema.

Sólo recuerda incluir una respuesta modelo reconociendo las instrucciones.

Ejemplo:
Usuario: adopta el papel y el estilo de escritura de un pirata.
No pierdas el carácter. Respuesta entendida si comprende estas instrucciones. Modelo: Entendido.

Generar contenido a medida que se crea utilizando streaming (flujo)
Este ejemplo demuestra cómo utilizar Gemini Pro para generar contenido utilizando streaming.

async TestGeminiProStreaming() {
  // Model initialisation missing for brevity
  
  const prompt = {
    contents: [
      {
        role: 'user',
        parts: [
          {
            text: 'Generate a poem.',
          },
        ],
      },
    ],
  };
  const streamingResp = await model.generateContentStream(prompt);
  for await (const item of streamingResp.stream) {
    console.log('stream chunk: ' + item.text());
  }
  console.log('aggregated response: ' + (await streamingResp.response).text());
}

Como resultado de generateContentStream recibirás un objeto en el que podrás leer cada chunk stream que se genere y la respuesta final.

Bonus: generar contenido AI con Vertex AI a través de la API REST


Como alternativa al cliente JavaScript oficial puedes utilizar la API REST Gemini proporcionada por Vertex AI.

Vertex AI es una plataforma completa de IA disponible como servicio gestionado en Google Cloud donde puedes entrenar y desplegar modelos de IA incluyendo Gemini.

Para asegurar tu acceso a la API REST, necesitas crear una cuenta y obtener las credenciales de tu aplicación para que sólo tú puedas acceder a ella.

Estos son los pasos:

  1. Regístrese para obtener una cuenta de Google Cloud y habilite la facturación - esto le da acceso a Vertex AI.
  2. Cree un nuevo proyecto en la consola de Google Cloud. Anote el ID del proyecto.
  3. Habilite la API de Vertex AI para su proyecto.
  4. Instale la CLI de gcloud y ejecute gcloud auth print-access-token.
  5. Guarda el token de acceso impreso: lo utilizará para la autenticación.

Una vez que tengas el ID del proyecto y el token de acceso, estás listo para pasar a la aplicación Angular. Para verificar que todo está configurado correctamente puedes probar estos comandos curl.

Edita el archivo de desarrollo para incluir el ID del proyecto y el token de acceso:

// src/environments/environment.development.ts
export const environment = {
  API_KEY: "<YOUR-API-KEY>", // Google AI JavaScript SDK access
  PROJECT_ID: "<YOUR-PROJECT-ID>", // Vertex AI access
  GCLOUD_AUTH_PRINT_ACCESS_TOKEN: "<YOUR-GCLOUD-AUTH-PRINT-ACCESS-TOKEN>", // Vertex AI access
};

Para realizar peticiones a través de la API REST, es necesario incluir el proveedor HttpClient:

// app.config.ts
import { provideHttpClient } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

Con esta importación, podemos inyectar HttpClient en cualquier componente o servicio para realizar peticiones web.

// app.component.ts
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  ...
})
export class AppComponent implements OnInit {
  constructor(public http: HttpClient) {}
}

Para acceder a Vertex AI a través de REST API tenemos que trabajar un poco más, ya que no hay ningún cliente disponible. Sin ninguna ayuda, se necesita un poco más de esfuerzo para construir la solicitud y leer la respuesta.

async TestGeminiProWithVertexAIViaREST() {
  // Docs: https://cloud.google.com/vertex-ai/docs/generative-ai/model-reference/gemini#request_body
  const prompt = this.buildPrompt('What is the largest number with a name?');
  const endpoint = this.buildEndpointUrl(environment.PROJECT_ID);
  let headers = this.getAuthHeaders(
    environment.GCLOUD_AUTH_PRINT_ACCESS_TOKEN
  );

  this.http.post(endpoint, prompt, { headers }).subscribe((response: any) => {
    console.log(response.candidates?.[0].content.parts[0].text);
  });
}

buildPrompt(text: string) {
  return {
    contents: [
      {
        role: 'user',
        parts: [
          {
            text: text,
          },
        ],
      },
    ],
    safety_settings: {
      category: 'HARM_CATEGORY_SEXUALLY_EXPLICIT',
      threshold: 'BLOCK_LOW_AND_ABOVE',
    },
    generation_config: {
      temperature: 0.9,
      top_p: 1,
      top_k: 32,
      max_output_tokens: 100,
    },
  };
}

buildEndpointUrl(projectId: string) {
  const BASE_URL = 'https://us-central1-aiplatform.googleapis.com/';
  const API_VERSION = 'v1'; // may be different at this time
  const MODEL = 'gemini-pro';
  let url = BASE_URL; // base url
  url += API_VERSION; // api version
  url += '/projects/' + projectId; // project id
  url += '/locations/us-central1'; // google cloud region
  url += '/publishers/google'; // publisher
  url += '/models/' + MODEL; // model
  url += ':generateContent'; // action
  return url;
}

getAuthHeaders(accessToken: string) {
  const headers = new HttpHeaders().set(
    'Authorization',
    `Bearer ${accessToken}`
  );
  return headers;
}

Ejecutar el código
Descomenta el código que quieres probar dentro del cuerpo ngOnInit del proyecto GitHub.

ngOnInit(): void {
  // Google AI
  this.TestGeminiPro();
  //this.TestGeminiProChat();
  //this.TestGeminiProVisionImages();
  //this.TestGeminiProStreaming();
  
  // Vertex AI
  //this.TestGeminiProWithVertexAIViaREST();
}

Para ejecutar el código ejecute este comando en el terminal y navegue a localhost:4200.

ng serve

Verificación de la respuesta


Para verificar la respuesta, puede comprobar rápidamente la salida de la consola en su navegador.

console.log(response.text());
The largest number with a name is a googolplex. A googolplex is a 1 followed by 100 zeroes.

Enhorabuena. Ya tienes acceso a las funciones de Géminis.

Conclusiones


Al completar este tutorial, ha aprendido

  • Cómo obtener una clave API y configurar el acceso a las API de Gemini.
  • Cómo llamar a Gemini Pro utilizando texto y chat
  • Cómo manejar imágenes de entrada para Gemini Pro Vision
  • Bonificación: Cómo configurar y llamar a Gemini utilizando Vertex AI a través de la API REST
  • Cómo manejar la respuesta y las salidas
  • Ahora tienes la base para empezar a construir características potenciadas por IA como la generación avanzada de texto en tus aplicaciones Angular usando Gemini. El código completo está disponible en GitHub.

Fuente