William Grasel

@willgmbr

Alvaro Camilo Neto

@alvarocamillont

¡Primero comencemos con lo básico!

Inteligencias Artificiales

ya han dominado

el mundo

https://developer.chrome.com/docs/ai

El equipo del

Frontend Web

no puedes quedarte al margen de esto

Entonces,

¿qué necesitamos saber para empezar

a jugar con la IA?

¡Ven con nosotros!

¡Usando Gemini

en la práctica!

Talk is cheap,

show me the code!

import { GoogleGenerativeAI } from "@google/generative-ai";

const API_KEY = "MI LINDA CLAVE API SECRETA";

const genAI = new GoogleGenerativeAI(API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-pro"});

const prompt = "complete the follow sentence: ping";

const result = await model.generateContent(prompt);

const response = await result.response;

const text = response.text();

Obtener y administrar su clave API​

https://ai.google.dev

Probando su clave API

curl \
  -H 'Content-Type: application/json' \
  -d '{"contents":[{"parts":[{"text":"Write a story about a magic backpack"}]}]}' \
  -X POST 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=YOUR_API_KEY'

¡Su clave API no es información pública!

¡No versione esta clave junto con su código!

¡No lo publiques en la versión final de tu aplicación!

¡Ni siquiera en la versión del backend, MUCHO MENOS en la versión del frontend!

Idealmente, esta clave API NUNCA debería llegar a la interfaz...

A menos que sepas lo que estás haciendo...

(probablemente no lo sepas)

¡Subcontratemos este problema al Backend!

¿Cuál es la mejor opción de backend para un desarrollador de Angular?

Casos de uso comunes 

const genAI = new GoogleGenerativeAI(process.env.API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-pro"});

const chat = model.startChat({
  history: [
    {
      role: "user",
      parts: [{ text: "Olá, eu tenho 2 cachorros na minha casa!" }]
    }
  ]
});

const result = await chat.sendMessage(
  "¿Qué tengo en mi casa?"
);

const response = await result.response;

const text = response.text();

Chatear con contexto

const genAI = new GoogleGenerativeAI(process.env.API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-pro"});

const prompt = "complete the follow sentence: ping";

//const result = await model.generateContent(prompt);
const result = await model.generateContentStream(prompt);

const response = await result.response;
const text = response.text();

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}

Respuesta vía streaming

const genAI = new GoogleGenerativeAI(process.env.API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

const result = await model.generateContent([
  "Qual a diferença desas imagens?",
  fileToGenerativePart("image1.png", "image/png"),
  fileToGenerativePart("image2.jpeg", "image/jpeg"),
]);

function fileToGenerativePart(path, mimeType) {
  return {
    inlineData: {
      data: Buffer.from(fs.readFileSync(path)).toString("base64"),
      mimeType
    },
  };
}

const response = await result.response;

const text = response.text();

Texto e Imagen

Bien, pero ¿dónde está Angular?

Show me a REAL

WebApp

DEMO TIME!

https://github.com/alvarocamillont/gemini_angular_nest

Referencias

Gracias! =)

http://www.linkedin.com/in/alvarocamillont

Integrando su aplicación Angular con Gemini

By William Grasel

Integrando su aplicación Angular con Gemini

¿Eres un desarrollador web frontend y no quieres quedar fuera de esta ola de IA generativa? ¡En esta charla te mostraremos todo lo que necesitas saber, de forma práctica y con ejemplos, para conectar la IA Generativa con tu Webapp!

  • 46

More from William Grasel