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.
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-angularEsto 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 environmentsEjecuta este comando development para añadir un nuevo entorno de production:
src/environments/environment.development.ts
src/environments/environment.tsEdite 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-aiInicializar el modelo
Antes de llamar a Gemini tenemos que inicializar el modelo.
Esto incluye los siguientes pasos:
- Inicializar el cliente
GoogleGenerativeAIcon tu clave API. - Elegir un modelo Gemini:
gemini-proogemini-pro-vision. - Configurar los parámetros del modelo incluyendo
safetySettings,temperature,top_p,top_kymaxOutputTokens.
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/heiceimage/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:
- Regístrese para obtener una cuenta de Google Cloud y habilite la facturación - esto le da acceso a Vertex AI.
- Cree un nuevo proyecto en la consola de Google Cloud. Anote el ID del proyecto.
- Habilite la API de Vertex AI para su proyecto.
- Instale la CLI de gcloud y ejecute
gcloud auth print-access-token. - 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 serveVerificació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.
