initial commit: slides ready + upgraded

2026-05-24 10:37:53 +02:00
commit f6f46972c3
173 changed files with 16756 additions and 0 deletions
@@ -0,0 +1,14 @@
+---
+layout: cover
+class: text-center
+---
+
+# Módulo 3: Modelos
+
+Trabajando con LLMs y Chat Models en LangChain.js
+
+<div class="pt-12">
+  <span class="text-xl opacity-80">
+    La base de cualquier aplicación con IA
+  </span>
+</div>
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+# Chat Models
+
+<div class="mt-8">
+
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4 mb-6">
+  <h3 class="text-lg font-bold mb-3">💬 La interfaz estándar en LangChain</h3>
+  <p class="text-sm mb-2">Todos los modelos en LangChain se usan como <strong>Chat Models</strong></p>
+  <p class="text-xs opacity-80 mb-2">📥 <strong>Entrada:</strong> Lista de mensajes (System, Human, AI)</p>
+  <p class="text-xs opacity-80 mb-2">📤 <strong>Salida:</strong> Mensaje estructurado (AIMessage)</p>
+</div>
+
+<div class="grid grid-cols-3 gap-4">
+
+<div class="text-center p-3 rounded bg-yellow-50 dark:bg-yellow-900/20">
+  <p class="text-sm font-bold">Mistral</p>
+  <p class="text-xs opacity-80">Mistral Large, Small</p>
+</div>
+
+<div class="text-center p-3 rounded bg-orange-50 dark:bg-orange-900/20">
+  <p class="text-sm font-bold">Anthropic</p>
+  <p class="text-xs opacity-80">Claude Sonnet, Haiku</p>
+</div>
+
+<div class="text-center p-3 rounded bg-blue-50 dark:bg-blue-900/20">
+  <p class="text-sm font-bold">Google</p>
+  <p class="text-xs opacity-80">Gemini Pro, Flash</p>
+</div>
+
+</div>
+
+<v-click>
+
+<div class="mt-6 text-center text-sm border-t pt-4">
+  ✅ Misma interfaz para todos → fácil cambiar de proveedor
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+# ¿Qué es un Token?
+
+<div class="mt-10 text-sm">
+
+<v-click>
+
+<div class="mb-8">
+
+**Token** = Unidad básica de texto que procesa un LLM
+
+No es exactamente una palabra, ni un carácter
+
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="grid grid-cols-2 gap-8 text-xs">
+
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4">
+  <h3 class="text-sm font-bold mb-3">Ejemplos de Tokenización</h3>
+  <p class="mb-2"><code>"Hola mundo"</code> → <strong>2 tokens</strong></p>
+  <p class="mb-2"><code>"LangChain"</code> → <strong>2 tokens</strong> (Lang + Chain)</p>
+  <p class="mb-2"><code>"desarrollador"</code> → <strong>3 tokens</strong></p>
+  <p class="mb-2"><code>"🚀"</code> → <strong>1-2 tokens</strong></p>
+</div>
+
+<div class="border-l-4 border-orange-500 pl-4 bg-orange-50 dark:bg-orange-900/20 p-4">
+  <h3 class="text-sm font-bold mb-3">Regla General</h3>
+  <p class="mb-2">1 token ≈ <strong>4 caracteres</strong> en inglés</p>
+  <p class="mb-2">1 token ≈ <strong>¾ de palabra</strong> en inglés</p>
+  <p class="mb-2">100 tokens ≈ <strong>75 palabras</strong></p>
+</div>
+
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+# ¿Cómo se Cuentan los Tokens?
+
+<div class="mt-4 text-sm">
+
+<v-click>
+
+<div class="mb-4">
+
+Los tokens se cuentan en **entrada (input)** y **salida (output)** por separado
+
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 p-3 mb-4 text-xs">
+  <h3 class="text-sm font-bold mb-2">💰 Costos</h3>
+  <p class="mb-2">Los LLMs cobran por tokens procesados</p>
+  <p class="mb-2">Output suele ser <strong>más caro</strong> que input (3-5x)</p>
+  <p class="mb-2">Ejemplo: GPT-4o → $2.50/1M tokens input, $10/1M tokens output</p>
+  <p>📊 <a href="https://raw.githubusercontent.com/BerriAI/litellm/refs/heads/main/model_prices_and_context_window.json" target="_blank">Precios actualizados por modelo (JSON)</a></p>
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-3 text-xs">
+  <h3 class="text-sm font-bold mb-2">🔧 Herramienta para Contar Tokens</h3>
+  <p class="mb-2">OpenAI Tokenizer (funciona para la mayoría de modelos):</p>
+  <p><a href="https://platform.openai.com/tokenizer" target="_blank">platform.openai.com/tokenizer</a></p>
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+
+# Parámetros Principales
+
+<div class="mt-10 space-y-5 text-sm">
+
+<v-click>
+<div class="border-l-4 border-orange-500 pl-4 bg-orange-50 dark:bg-orange-900/20 p-3">
+  <h3 class="text-base font-bold mb-2">🌡️ temperature</h3>
+  <p class="text-xs mb-1">Controla la aleatoriedad de las respuestas</p>
+  <p class="text-xs opacity-80">0.0 = Determinista | 1.0 = Creativo | 2.0 = Muy aleatorio</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-3">
+  <h3 class="text-base font-bold mb-2">📏 maxTokens</h3>
+  <p class="text-xs mb-1">Límite máximo de tokens en la respuesta</p>
+  <p class="text-xs opacity-80">Ejemplo: 500 (aprox. 375 palabras)</p>
+</div>
+</v-click>
+
+</div>
@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+# Parámetros Principales
+
+<div class="mt-10 space-y-5 text-sm">
+
+<v-click>
+<div class="border-l-4 border-green-500 pl-4 bg-green-50 dark:bg-green-900/20 p-3">
+  <h3 class="text-base font-bold mb-2">🎯 topP</h3>
+  <p class="text-xs mb-1">Nucleus sampling (alternativa a temperature)</p>
+  <p class="text-xs opacity-80">0.1 = Conservador | 0.9 = Diverso</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 p-3">
+  <h3 class="text-base font-bold mb-2">🔁 n</h3>
+  <p class="text-xs mb-1">Número de respuestas a generar</p>
+  <p class="text-xs opacity-80">Útil para comparar variaciones</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="mt-4 text-xs opacity-70 italic text-center">
+  ⚠️ Estos parámetros dependen de cada modelo y pueden no estar disponibles en todos los proveedores.
+</div>
+</v-click>
+
+</div>
@@ -0,0 +1,34 @@
+---
+layout: default
+---
+
+# Ejemplo: Configurando Parámetros
+
+<div class="text-sm mt-6">
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+
+const model = new ChatOpenAI({
+  model: "gpt-4.1-mini",
+  temperature: 0.7,        // Balance entre creatividad y coherencia
+  maxTokens: 500,          // Limitar longitud de respuesta
+  topP: 0.9,              // Nucleus sampling
+});
+
+const response = await model.invoke(
+  "Explica qué es un agente en LangChain"
+);
+
+console.log(response.content);
+```
+
+<v-click>
+
+<div class="mt-4 text-xs opacity-80 text-center">
+💡 <strong>Tip:</strong> Usa <code>temperature: 0</code> para respuestas deterministas (útil en tests)
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,42 @@
+---
+layout: default
+---
+
+# Streaming: Respuestas en Tiempo Real
+
+<div class="mt-8">
+
+<v-click>
+
+<div class="text-sm mb-6">
+
+**¿Por qué streaming?**
+
+- ✅ Experiencia de usuario mejorada (como ChatGPT)
+- ✅ Feedback inmediato (no esperar 10-20 segundos)
+- ✅ Procesar mientras se genera
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+
+const model = new ChatOpenAI({
+  model: "gpt-4.1-mini",
+  streaming: true,
+});
+
+const stream = await model.stream("Explica qué es LangChain");
+
+for await (const chunk of stream) {
+  console.log(chunk.content);  // Imprime palabra por palabra
+}
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+# Batch: Procesamiento en Lote
+
+<div class="mt-8">
+
+<v-click>
+
+<div class="text-sm mb-6">
+
+**¿Cuándo usar batch?**
+
+- ✅ Procesar múltiples inputs a la vez
+- ✅ Optimización de costos (algunos proveedores ofrecen descuentos)
+- ✅ Mejor throughput que llamadas individuales
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+
+const model = new ChatOpenAI({ model: "gpt-4.1-mini" });
+
+const inputs = [
+  "¿Qué es un agente?",
+  "¿Qué es RAG?",
+  "¿Qué es LangSmith?"
+];
+
+const responses = await model.batch(inputs);
+
+responses.forEach((response, i) => {
+  console.log(`Pregunta ${i + 1}:`, response.content);
+});
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+# Structured Output
+
+<div class="text-sm mt-6">
+
+<v-click>
+
+<div class="mb-4">
+
+**Problema:** Las respuestas de LLMs son texto plano, difíciles de procesar
+
+**Solución:** Forzar al modelo a responder con JSON estructurado
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+import { z } from "zod";
+
+// Definir el esquema con Zod
+const schema = z.object({
+  sentiment: z.enum(["positive", "negative", "neutral"]),
+  score: z.number().min(0).max(1),
+  keywords: z.array(z.string()),
+});
+
+const model = new ChatOpenAI({ model: "gpt-4.1-mini" })
+  .withStructuredOutput(schema);
+
+const result = await model.invoke("Me encanta LangChain!");
+// { sentiment: "positive", score: 0.95, keywords: ["encanta", "langchain"] }
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,49 @@
+---
+layout: default
+---
+
+# Intercambiabilidad de Modelos
+
+<div class="mt-10 text-sm">
+
+<v-click>
+
+<div class="mb-8">
+
+**Ventaja clave de LangChain:** Cambiar de proveedor sin reescribir código
+
+</div>
+
+</v-click>
+
+<div class="grid grid-cols-2 gap-8">
+
+<v-click>
+
+```typescript
+// OpenAI
+import { ChatOpenAI } from "@langchain/openai";
+
+const model = new ChatOpenAI({
+  model: "gpt-4.1-mini"
+});
+```
+
+</v-click>
+
+<v-click>
+
+```typescript
+// Anthropic Claude
+import { ChatAnthropic } from "@langchain/anthropic";
+
+const model = new ChatAnthropic({
+  model: "claude-sonnet-4-6"
+});
+```
+
+</v-click>
+
+</div>
+
+</div>
@@ -0,0 +1,47 @@
+---
+layout: default
+---
+
+# Intercambiabilidad de Modelos
+
+<div class="mt-10 text-sm">
+
+<div class="grid grid-cols-2 gap-8">
+
+<v-click>
+
+```typescript
+// Google Gemini
+import { ChatGoogle } from "@langchain/google";
+
+const model = new ChatGoogle({
+  model: "gemini-2.5-flash"
+});
+```
+
+</v-click>
+
+<v-click>
+
+```typescript
+// Ollama (Local)
+import { ChatOllama } from "@langchain/ollama";
+
+const model = new ChatOllama({
+  model: "llama3.2"
+});
+```
+
+</v-click>
+
+</div>
+
+<v-click>
+
+<div class="mt-8 text-center text-sm opacity-80">
+⚡ Todos usan la misma interfaz: <code>.invoke()</code>, <code>.stream()</code>, <code>.batch()</code>
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,51 @@
+---
+layout: default
+---
+
+# initChatModel: Configuración Universal
+
+<div class="mt-8 text-sm">
+
+<v-click>
+
+<div class="mb-6">
+
+**Forma simplificada** de inicializar modelos sin imports específicos
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```typescript
+import { initChatModel } from "langchain";
+
+// En lugar de importar ChatOpenAI, ChatAnthropic, etc.
+const model = await initChatModel("gpt-4.1-mini", {
+  modelProvider: "openai",
+  temperature: 0.7,
+});
+
+const response = await model.invoke("Hola!");
+```
+
+</v-click>
+
+<v-click>
+
+<div class="mt-6 text-xs opacity-80">
+✅ Ventaja: Cambiar de proveedor modificando solo el string
+</div>
+
+</v-click>
+
+<v-click>
+
+<div class="mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded text-xs">
+⚠️ <strong>No es magia:</strong> aunque no veas el <code>import</code>, el paquete del proveedor (<code>@langchain/openai</code>, <code>@langchain/mistralai</code>, etc.) <strong>debe estar instalado</strong> en tu proyecto. <code>initChatModel</code> lo resuelve internamente (<em>under the hood</em>).
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,100 @@
+---
+layout: default
+---
+
+# Providers Disponibles
+
+<div class="text-xs mt-8">
+
+<div class="grid grid-cols-2 gap-6">
+
+<div>
+
+<v-click>
+
+**OpenAI**
+```typescript
+modelProvider: "openai"
+// gpt-4.1, gpt-4.1-mini, gpt-5.2
+```
+
+</v-click>
+
+<v-click>
+
+**Anthropic**
+```typescript
+modelProvider: "anthropic"
+// claude-sonnet-4-6, claude-opus-4-6
+```
+
+</v-click>
+
+<v-click>
+
+**Google**
+```typescript
+modelProvider: "google"
+// gemini-2.5-flash, gemini-2.5-flash-lite
+```
+
+</v-click>
+
+<v-click>
+
+**Azure OpenAI**
+```typescript
+modelProvider: "azure_openai"
+```
+
+</v-click>
+
+</div>
+
+<div>
+
+<v-click>
+
+**Mistral**
+```typescript
+modelProvider: "mistral"
+// mistral-large, mistral-small
+```
+
+</v-click>
+
+<v-click>
+
+**Groq**
+```typescript
+modelProvider: "groq"
+// llama-3.3-70b, mixtral-8x7b
+```
+
+</v-click>
+
+<v-click>
+
+**Ollama**
+```typescript
+modelProvider: "ollama"
+// llama3.2:7b, mistral:7b
+```
+
+</v-click>
+
+<v-click>
+
+**Cohere**
+```typescript
+modelProvider: "cohere"
+// command-r, command-r-plus
+```
+
+</v-click>
+
+</div>
+
+</div>
+
+</div>
@@ -0,0 +1,78 @@
+---
+layout: default
+---
+
+# Más Providers
+
+<div class="text-xs mt-8">
+
+<div class="grid grid-cols-2 gap-6">
+
+<div>
+
+<v-click>
+
+**Fireworks**
+```typescript
+modelProvider: "fireworks"
+```
+
+</v-click>
+
+<v-click>
+
+**Together AI**
+```typescript
+modelProvider: "together_ai"
+```
+
+</v-click>
+
+<v-click>
+
+**Bedrock (AWS)**
+```typescript
+modelProvider: "bedrock"
+```
+
+</v-click>
+
+</div>
+
+<div>
+
+<v-click>
+
+**Vertex AI (Google Cloud)**
+```typescript
+modelProvider: "google-vertexai"
+```
+
+</v-click>
+
+<v-click>
+
+**Cloudflare**
+```typescript
+modelProvider: "cloudflare"
+```
+
+</v-click>
+
+</div>
+
+</div>
+
+<v-click>
+
+<div class="mt-8 text-center text-sm">
+
+📚 Lista completa de providers
+
+[docs.langchain.com/integrations/chat](https://docs.langchain.com/oss/javascript/integrations/chat)
+
+</div>
+
+</v-click>
+
+</div>
@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+# Binding Tools al Modelo
+
+<div class="text-sm mt-8">
+
+<v-click>
+
+<div class="mb-6">
+
+Puedes vincular tools directamente al modelo con `.bindTools()`
+
+</div>
+
+</v-click>
+
+<v-click>
+
+```typescript
+import { ChatOpenAI } from "@langchain/openai";
+import { tool } from "@langchain/core/tools";
+import { z } from "zod";
+
+const weatherTool = tool(
+  async ({ location }) => `El tiempo en ${location} es soleado`,
+  {
+    name: "get_weather",
+    description: "Obtiene el tiempo de una ubicación",
+    schema: z.object({ location: z.string() }),
+  }
+);
+
+const model = new ChatOpenAI({ model: "gpt-4.1-mini" });
+const modelWithTools = model.bindTools([weatherTool]);
+
+const response = await modelWithTools.invoke("¿Qué tiempo hace en Madrid?");
+console.log(response.tool_calls);  // Tool que el LLM decidió usar
+```
+
+</v-click>
+
+</div>
@@ -0,0 +1,75 @@
+---
+layout: default
+---
+
+# Tools Integradas en LangChain.js
+
+<div class="text-sm mt-6">
+
+<v-click>
+
+LangChain.js incluye numerosas **herramientas pre-construidas** listas para usar con agentes
+
+</v-click>
+
+<div class="grid grid-cols-2 gap-4 mt-6 text-xs">
+
+<div>
+
+<v-click>
+
+**Busqueda Web**
+- `TavilySearchResults` - Busqueda optimizada para LLMs
+- `DuckDuckGoSearch` - Busqueda gratuita
+- `SerpAPI` / `SearchApi` - Google Search
+- `ExaSearchResults` - Busqueda semantica
+
+</v-click>
+
+<v-click>
+
+**Conocimiento**
+- `WikipediaQueryRun` - Consultas a Wikipedia
+- `WolframAlphaTool` - Calculos y datos
+- `GoogleScholar` - Articulos academicos
+
+</v-click>
+
+</div>
+
+<div>
+
+<v-click>
+
+**Productividad**
+- `GmailTools` - Leer/enviar emails
+- `GoogleCalendarTools` - Gestionar eventos
+- `DiscordTool` - Integracion Discord
+
+</v-click>
+
+<v-click>
+
+**Desarrollo**
+- `StackExchangeTool` - Q&A tecnico
+- `PythonInterpreter` - Ejecutar codigo
+- `WebBrowserTool` - Navegar paginas
+
+</v-click>
+
+</div>
+
+</div>
+
+<v-click>
+
+<div class="mt-4 text-xs text-center opacity-70">
+
+Ver listado completo: [docs.langchain.com/integrations/tools](https://docs.langchain.com/oss/javascript/integrations/tools)
+
+</div>
+
+</v-click>
+
+</div>
+
@@ -0,0 +1,50 @@
+---
+layout: default
+---
+
+# Usando Tools Integradas
+
+<div class="text-sm mt-6">
+
+<v-click>
+
+```typescript
+import { TavilySearchResults } from "@langchain/community/tools/tavily_search";
+import { WikipediaQueryRun } from "@langchain/community/tools/wikipedia_query_run";
+import { Calculator } from "@langchain/community/tools/calculator";
+
+// Crear instancias de las tools
+const tavilySearch = new TavilySearchResults({
+  apiKey: process.env.TAVILY_API_KEY,
+  maxResults: 3,
+});
+
+const wikipedia = new WikipediaQueryRun({
+  topKResults: 2,
+  maxDocContentLength: 4000,
+});
+
+const calculator = new Calculator();
+
+// Usar con un agente
+const tools = [tavilySearch, wikipedia, calculator];
+```
+
+</v-click>
+
+<v-click>
+
+<div class="mt-4 text-xs bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded">
+
+**Paquete:** La mayoria de tools integradas estan en `@langchain/community`
+
+```bash
+npm install @langchain/community
+```
+
+</div>
+
+</v-click>
+
+</div>
+
@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+# Ejemplo: Agente con Tavily Search
+
+<div class="text-xs mt-2">
+
+```typescript
+import { createAgent } from "langchain";
+import { TavilySearchResults } from "@langchain/community/tools/tavily_search";
+
+const searchTool = new TavilySearchResults({ apiKey: process.env.TAVILY_API_KEY, maxResults: 5 });
+const agent = createAgent({
+  model: "openai:gpt-4.1-mini",
+  tools: [searchTool],
+});
+
+const result = await agent.invoke({
+  messages: [{ role: "user", content: "¿Cuales son las ultimas noticias sobre IA?" }],
+});
+```
+
+<div class="mt-2 grid grid-cols-2 gap-3">
+
+<div class="bg-blue-50 dark:bg-blue-900/20 p-2 rounded">
+
+**Tavily** - Optimizado para LLMs: extrae contenido relevante, filtra anuncios/ruido, API key gratuita limitada
+
+</div>
+
+<div class="bg-green-50 dark:bg-green-900/20 p-2 rounded">
+
+**Docs**: [langchain.com/integrations/tools](https://docs.langchain.com/oss/javascript/integrations/tools)
+
+</div>
+
+</div>
+
+</div>
+
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+# Diferencia: bindTools vs createAgent
+
+<div class="mt-10 text-xs">
+
+<div class="grid grid-cols-2 gap-6">
+
+<v-click>
+<div class="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4">
+  <h3 class="text-sm font-bold mb-3">🔧 .bindTools()</h3>
+  <p class="mb-2">• El LLM decide si usar la tool</p>
+  <p class="mb-2">• Devuelve <code>tool_calls</code></p>
+  <p class="mb-2">• Tú ejecutas la tool manualmente</p>
+  <p class="mb-2">• Control total del flujo</p>
+  <p class="text-xs opacity-70 mt-3">Ideal para flujos personalizados</p>
+</div>
+</v-click>
+
+<v-click>
+<div class="border-l-4 border-green-500 pl-4 bg-green-50 dark:bg-green-900/20 p-4">
+  <h3 class="text-sm font-bold mb-3">🤖 createAgent() <span class="text-xs opacity-60">(LangChain v1)</span></h3>
+  <p class="mb-2">• El agente decide y ejecuta</p>
+  <p class="mb-2">• Loop automático</p>
+  <p class="mb-2">• Ejecuta tools automáticamente</p>
+  <p class="mb-2">• Estado persistente incluido</p>
+  <p class="text-xs opacity-70 mt-3">Ideal para agentes autónomos</p>
+</div>
+</v-click>
+
+</div>
+
+<v-click>
+
+<div class="mt-6 text-center text-xs opacity-70">
+💡 Usa <code>bindTools()</code> para control, <code>createAgent()</code> (LangChain v1) para simplicidad
+</div>
+
+</v-click>
+
+</div>