[{"_1":2,"_107":-5,"_108":-5},"loaderData",{"_3":4},"routes/libros/ai_sdk",{"_5":6,"_7":8,"_15":16,"_20":21,"_25":26,"_71":72,"_73":74,"_75":76,"_77":76,"_78":76,"_79":76,"_80":76,"_81":-5,"_82":83,"_84":85,"_86":87,"_103":104},"content","# Capítulo 8: generateImage — Creando Imágenes con Código\n\nHasta ahora todo ha sido texto: prompts, respuestas, structured output, herramientas. Pero el AI SDK también puede generar imágenes. En este capítulo construiremos un generador de thumbnails para YouTube que demuestra el poder de combinar generación de texto con generación de imágenes.\n\n## Código Primero\n\n```typescript\nimport { generateImage } from 'ai';\nimport { openai } from '@ai-sdk/openai';\n\nconst { image } = await generateImage({\n model: openai.image('gpt-image-1'),\n prompt: 'Un programador mexicano celebrando frente a su computadora, estilo ilustración moderna, colores vibrantes',\n size: '1024x1024',\n});\n\n// La imagen está en base64\nconsole.log(image.base64.slice(0, 50) + '...');\n// \"iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAIAAA...\"\n\n// O como Uint8Array para guardar en archivo\nimport { writeFileSync } from 'fs';\nwriteFileSync('thumbnail.png', Buffer.from(image.base64, 'base64'));\n```\n\nEjecuta esto y tendrás una imagen PNG en tu directorio.\n\n## ¿Qué Acaba de Pasar?\n\n1. **`generateImage`** — Función del AI SDK para generar imágenes\n2. **`openai.image('gpt-image-1')`** — Especifica el modelo de imagen (no de texto)\n3. **`prompt`** — Descripción textual de la imagen deseada\n4. **`size`** — Dimensiones de la imagen\n5. **`image.base64`** — La imagen codificada en base64\n\nA diferencia de `generateText` que retorna strings, `generateImage` retorna objetos con la imagen en múltiples formatos.\n\n## Modelos de Imagen Disponibles\n\n```typescript\nimport { openai } from '@ai-sdk/openai';\n\n// GPT Image 1 - El más reciente de OpenAI\nconst modelo = openai.image('gpt-image-1');\n\n// Versión mini - más rápida y económica\nconst modeloMini = openai.image('gpt-image-1-mini');\n\n// DALL-E 3 - Modelo anterior, aún disponible\nconst dalleModel = openai.image('dall-e-3');\n```\n\n### Comparativa de Modelos OpenAI\n\n| Modelo | Velocidad | Costo | Uso recomendado |\n|--------|-----------|-------|-----------------|\n| `gpt-image-1` | Media | Mayor | Producción, calidad máxima |\n| `gpt-image-1-mini` | Rápida | Menor | Previews, iteración rápida |\n| `dall-e-3` | Media | Medio | Compatibilidad con código existente |\n\n## Parámetros de generateImage\n\n```typescript\nconst { image, images } = await generateImage({\n // === REQUERIDOS ===\n model: openai.image('gpt-image-1'),\n prompt: 'Descripción de la imagen',\n\n // === OPCIONALES ===\n n: 1, // Cantidad de imágenes (default: 1)\n size: '1024x1024', // Dimensiones (no usar aspectRatio con OpenAI)\n seed: 12345, // Para resultados reproducibles\n\n // === OPCIONES DEL PROVEEDOR ===\n providerOptions: {\n openai: {\n quality: 'high', // 'low' | 'medium' | 'high'\n background: 'transparent', // 'transparent' | 'opaque' (solo gpt-image-1)\n }\n },\n\n // === CONTROL ===\n maxRetries: 2, // Reintentos si falla (default: 2)\n abortSignal: controller.signal, // Para cancelar\n});\n```\n\n> **Nota**: Los modelos DALL-E no soportan `aspectRatio`. Usa `size` en su lugar.\n\n### Tamaños Disponibles\n\n| Size | Aspecto | Uso típico |\n|------|---------|------------|\n| `1024x1024` | Cuadrado | Instagram, perfil |\n| `1536x1024` | Horizontal | YouTube thumbnail |\n| `1024x1536` | Vertical | Stories, Pinterest |\n\n## Anatomía de la Respuesta\n\n```typescript\nconst resultado = await generateImage({\n model: openai.image('gpt-image-1'),\n prompt: 'Logo minimalista de una taquería',\n size: '1024x1024',\n});\n\n// Una sola imagen\nconsole.log(resultado.image);\n// {\n// base64: \"iVBORw0KGgo...\",\n// uint8Array: Uint8Array [...],\n// }\n\n// Si pediste múltiples (n > 1)\nconsole.log(resultado.images);\n// [{ base64, uint8Array }, ...]\n```\n\nEl objeto `image` siempre es la primera imagen generada. El array `images` contiene todas.\n\n## Pipeline Inteligente: Texto + Imagen\n\nUn prompt directo como \"thumbnail de React\" genera resultados genéricos. La magia está en optimizar el prompt antes de generar:\n\n```typescript\nimport { generateText, generateImage } from 'ai';\nimport { openai } from '@ai-sdk/openai';\n\nasync function generarThumbnail(titulo: string) {\n // Paso 1: Optimizar el prompt con LLM\n const { text: promptOptimizado } = await generateText({\n model: openai('gpt-4o-mini'),\n prompt: `Genera un prompt de máximo 100 palabras para crear un thumbnail de YouTube.\n\nEl video se titula: \"${titulo}\"\n\nEl prompt debe describir:\n- Un sujeto visual central llamativo\n- Colores vibrantes y contrastantes\n- Texto grande y legible (el título simplificado)\n- Estilo moderno de ilustración digital\n- Composición que funcione en miniatura\n\nSolo responde con el prompt, sin explicaciones.`\n });\n\n // Paso 2: Generar imagen con prompt optimizado\n const { image } = await generateImage({\n model: openai.image('gpt-image-1'),\n prompt: promptOptimizado,\n size: '1536x1024', // Formato YouTube\n });\n\n return {\n promptUsado: promptOptimizado,\n imagen: image.base64\n };\n}\n\n// Uso\nconst resultado = await generarThumbnail('Aprende React Router v7 en 30 minutos');\nconsole.log('Prompt:', resultado.promptUsado);\n```\n\nEste patrón de **pipeline** es fundamental: el LLM entiende el contexto y genera prompts visuales mucho mejores que los que escribiríamos manualmente.\n\n## Sistema de Estilos\n\nEn lugar de un solo thumbnail, genera variantes con diferentes estilos:\n\n```typescript\nconst ESTILOS = {\n vibrant: 'Colores audaces y saturados, alto contraste, energético y llamativo',\n minimal: 'Diseño limpio y elegante, pocos elementos, mucho espacio blanco, sofisticado',\n dramatic: 'Iluminación cinematográfica, sombras profundas, atmósfera intensa',\n tech: 'Estética futurista, acentos neón, elementos de código y circuitos'\n} as const;\n\ntype Estilo = keyof typeof ESTILOS;\n\nasync function generarConEstilo(titulo: string, estilo: Estilo) {\n const descripcionEstilo = ESTILOS[estilo];\n\n const { text: prompt } = await generateText({\n model: openai('gpt-4o-mini'),\n prompt: `Crea un prompt para thumbnail de YouTube (máx 100 palabras).\n\nVideo: \"${titulo}\"\nEstilo requerido: ${descripcionEstilo}\n\nDescribe elementos visuales específicos que capturen la atención en miniatura.\nSolo el prompt, sin explicaciones.`\n });\n\n const { image } = await generateImage({\n model: openai.image('gpt-image-1-mini'), // Mini para previews rápidos\n prompt,\n size: '1024x1024',\n });\n\n return { estilo, prompt, imagen: image.base64 };\n}\n```\n\n## Generación en Paralelo\n\nPara generar los 4 estilos simultáneamente:\n\n```typescript\nasync function generarPreviews(titulo: string) {\n const estilos: Estilo[] = ['vibrant', 'minimal', 'dramatic', 'tech'];\n\n // Generar todos en paralelo\n const resultados = await Promise.allSettled(\n estilos.map(estilo => generarConEstilo(titulo, estilo))\n );\n\n // Filtrar exitosos y manejar errores\n return resultados\n .map((resultado, i) => {\n if (resultado.status === 'fulfilled') {\n return resultado.value;\n }\n console.error(`Error en estilo ${estilos[i]}:`, resultado.reason);\n return null;\n })\n .filter((r): r is NonNullable => r !== null);\n}\n\n// Uso\nconst previews = await generarPreviews('Domina TypeScript en 2026');\nconsole.log(`Generadas ${previews.length} variantes`);\n```\n\nUsamos `Promise.allSettled` en lugar de `Promise.all` para que un error en una imagen no cancele las demás.\n\n## Redimensionando con el Cliente OpenAI\n\nPara generar la misma imagen en diferentes formatos (YouTube, Instagram, Stories), usamos el cliente OpenAI directamente con `images.edit()`:\n\n```typescript\nimport { generateImage } from 'ai';\nimport { openai } from '@ai-sdk/openai';\nimport OpenAI, { toFile } from 'openai';\n\n// Cliente OpenAI para edición de imágenes\nconst openaiClient = new OpenAI();\n\nconst FORMATOS = {\n youtube: { size: '1536x1024' as const, nombre: 'YouTube' },\n instagram: { size: '1024x1024' as const, nombre: 'Instagram' },\n stories: { size: '1024x1536' as const, nombre: 'Stories' },\n};\n\ntype Formato = keyof typeof FORMATOS;\n\nasync function generarFormatos(imagenBase64: string, promptOriginal: string) {\n // Convertir base64 a File para la API de OpenAI\n const buffer = Buffer.from(imagenBase64, 'base64');\n const file = await toFile(buffer, 'imagen.png', { type: 'image/png' });\n\n const formatos: Formato[] = ['youtube', 'instagram', 'stories'];\n\n const resultados = await Promise.all(\n formatos.map(async (formato) => {\n const config = FORMATOS[formato];\n\n // Usar images.edit para redimensionar manteniendo el estilo\n const response = await openaiClient.images.edit({\n model: 'gpt-image-1',\n image: file,\n prompt: `${promptOriginal}. Mantén el mismo estilo y composición, adaptado a formato ${config.nombre}.`,\n size: config.size,\n });\n\n return {\n formato,\n nombre: config.nombre,\n imagen: response.data[0].b64_json,\n };\n })\n );\n\n return resultados;\n}\n```\n\n> **Nota**: `images.edit()` requiere el cliente OpenAI nativo (`openai` package), no el AI SDK. Esto es porque el AI SDK aún no expone esta funcionalidad directamente.\n\n## Proyecto Completo: Generador de Thumbnails\n\nCombinemos todo en un módulo reutilizable:\n\n```typescript\n// lib/thumbnail-generator.ts\nimport { generateText, generateImage } from 'ai';\nimport { openai } from '@ai-sdk/openai';\n\nconst ESTILOS = {\n vibrant: 'Colores audaces, alto contraste, energético',\n minimal: 'Limpio, elegante, espacio en blanco',\n dramatic: 'Cinematográfico, sombras profundas',\n tech: 'Futurista, neón, elementos de código'\n} as const;\n\ntype Estilo = keyof typeof ESTILOS;\n\ninterface ThumbnailResult {\n estilo: Estilo;\n prompt: string;\n imagen: string; // base64\n}\n\nasync function crearPromptVisual(titulo: string, estilo: Estilo): Promise {\n const { text } = await generateText({\n model: openai('gpt-4o-mini'),\n prompt: `Genera un prompt de imagen (máx 80 palabras) para thumbnail de YouTube.\n\nTítulo: \"${titulo}\"\nEstilo: ${ESTILOS[estilo]}\n\nRequisitos:\n- Sujeto central que capture atención\n- Composición clara para verse en miniatura\n- Sin personas reales, usar ilustraciones\n\nSolo el prompt, directo.`\n });\n\n return text;\n}\n\nexport async function generarThumbnail(\n titulo: string,\n estilo: Estilo = 'vibrant'\n): Promise {\n const prompt = await crearPromptVisual(titulo, estilo);\n\n const { image } = await generateImage({\n model: openai.image('gpt-image-1-mini'),\n prompt,\n size: '1024x1024',\n });\n\n return {\n estilo,\n prompt,\n imagen: image.base64,\n };\n}\n\nexport async function generarTodosLosEstilos(titulo: string): Promise {\n const estilos: Estilo[] = ['vibrant', 'minimal', 'dramatic', 'tech'];\n\n const resultados = await Promise.allSettled(\n estilos.map(estilo => generarThumbnail(titulo, estilo))\n );\n\n return resultados\n .filter((r): r is PromiseFulfilledResult => r.status === 'fulfilled')\n .map(r => r.value);\n}\n```\n\n## Integrando con React Router v7\n\n```typescript\n// app/routes/api.thumbnails.ts\nimport type { Route } from \"./+types/api.thumbnails\";\nimport { generarThumbnail, generarTodosLosEstilos } from '~/lib/thumbnail-generator';\n\nexport async function action({ request }: Route.ActionArgs) {\n const { titulo, estilo, modo } = await request.json();\n\n try {\n if (modo === 'previews') {\n const resultados = await generarTodosLosEstilos(titulo);\n return Response.json({ previews: resultados });\n }\n\n const resultado = await generarThumbnail(titulo, estilo || 'vibrant');\n return Response.json(resultado);\n } catch (error) {\n console.error('Error generando thumbnail:', error);\n return Response.json({ error: 'Error al generar imagen' }, { status: 500 });\n }\n}\n```\n\n## Mostrando Imágenes Base64 en React\n\n```tsx\ninterface ThumbnailPreviewProps {\n base64: string;\n estilo: string;\n}\n\nexport function ThumbnailPreview({ base64, estilo }: ThumbnailPreviewProps) {\n return (\n

\n \n \n {estilo}\n \n

\n );\n}\n\n// Grid de previews\nfunction ThumbnailGrid({ previews }: { previews: ThumbnailResult[] }) {\n return (\n

\n {previews.map((preview) => (\n \n ))}\n

\n );\n}\n```\n\n## Descarga de Imágenes desde el Navegador\n\n```typescript\nfunction descargarImagen(base64: string, nombreArchivo: string) {\n const link = document.createElement('a');\n link.href = `data:image/png;base64,${base64}`;\n link.download = nombreArchivo;\n link.click();\n}\n\n// Uso en un botón\n\n```\n\n## Costos y Consideraciones\n\n### Precio por Imagen (OpenAI, enero 2026)\n\n| Modelo | 1024x1024 | 1536x1024 / 1024x1536 |\n|--------|-----------|------------------------|\n| gpt-image-1 | ~$0.04 USD | ~$0.08 USD |\n| gpt-image-1-mini | ~$0.02 USD | ~$0.04 USD |\n\n**Ejemplo de costo**: Generar 4 variantes de thumbnail:\n- 4 imágenes con mini × $0.02 = **$0.08 USD** (~$1.50 MXN)\n- Más optimización de prompts: ~$0.01 USD\n\n### Límites de Rate\n\nOpenAI tiene límites por minuto según tu tier. Para aplicaciones con alto volumen, implementa una cola de procesamiento.\n\n## Manejo de Errores\n\n```typescript\nasync function generarConReintentos(prompt: string, intentos = 3) {\n for (let i = 0; i < intentos; i++) {\n try {\n const { image } = await generateImage({\n model: openai.image('gpt-image-1-mini'),\n prompt,\n size: '1024x1024',\n });\n return image;\n } catch (error: any) {\n console.error(`Intento ${i + 1} fallido:`, error.message);\n\n if (error.message?.includes('content_policy')) {\n throw new Error('El prompt viola las políticas de contenido');\n }\n\n if (error.message?.includes('rate_limit')) {\n await new Promise(r => setTimeout(r, 60000));\n continue;\n }\n\n if (i === intentos - 1) throw error;\n }\n }\n}\n```\n\n## Resumen\n\n| Concepto | Qué aprendiste |\n|----------|----------------|\n| `generateImage()` | Genera imágenes desde texto |\n| `openai.image('gpt-image-1')` | Modelo de imagen de OpenAI |\n| `openai.image('gpt-image-1-mini')` | Versión rápida y económica |\n| `image.base64` | Imagen codificada para web |\n| Pipeline texto→imagen | Optimizar prompts con LLM antes de generar |\n| `Promise.allSettled` | Generación paralela tolerante a fallos |\n| Cliente OpenAI nativo | Para `images.edit()` y redimensionado |\n\n### ¿Cuándo usar generateImage?\n\n| Usa generateImage | NO uses generateImage |\n|-------------------|----------------------|\n| Thumbnails, banners, ilustraciones | Fotos de personas reales |\n| Contenido de marketing | Logos con texto preciso |\n| Variantes de producto | Alto volumen sin cola |\n| Visualizaciones de conceptos | Edición compleja de fotos |\n\n---\n\nEn el próximo capítulo exploraremos **Embeddings**: cómo convertir texto en vectores numéricos para búsqueda semántica, la base de los sistemas RAG que permiten a tu aplicación \"entender\" documentos.\n","currentChapter",{"_9":10,"_11":12,"_13":14},"id","08","title","generateImage — Creando Imágenes con Código","slug","capitulo-08","prevChapter",{"_9":17,"_11":18,"_13":19},"07","Agentes — Encapsulando la Inteligencia","capitulo-07","nextChapter",{"_9":22,"_11":23,"_13":24},"09","Embeddings — Búsqueda Semántica","capitulo-09","chapters",[27,31,35,39,43,47,51,55,16,8,21,59,63,67],{"_9":28,"_11":29,"_13":30},"prólogo","Prólogo","prologo",{"_9":32,"_11":33,"_13":34},"intro","Introducción","introduccion",{"_9":36,"_11":37,"_13":38},"01","Tu Primera Inferencia con IA","capitulo-01",{"_9":40,"_11":41,"_13":42},"02","React y el Hook useChat","capitulo-02",{"_9":44,"_11":45,"_13":46},"03","Dentro del Streaming","capitulo-03",{"_9":48,"_11":49,"_13":50},"04","React Router v7 — Tu Chat Full-Stack","capitulo-04",{"_9":52,"_11":53,"_13":54},"05","Structured Output — Respuestas Tipadas","capitulo-05",{"_9":56,"_11":57,"_13":58},"06","Tools — Dándole Manos al Modelo","capitulo-06",{"_9":60,"_11":61,"_13":62},"10","RAG — Retrieval Augmented Generation","capitulo-10",{"_9":64,"_11":65,"_13":66},"11","Agentic RAG — Agentes con Conocimiento","capitulo-11",{"_9":68,"_11":69,"_13":70},"12","Audio y Speech — Voz e IA","capitulo-12","hasAccess",true,"accessLevel","public","isSubscribed",false,"isPurchased","hasFullAccess","showSubscriptionDrawer","showPurchaseDrawer","userEmail","chaptersAccessInfo",{},"bookSlug","ai-sdk","bookConfig",{"_11":88,"_89":90,"_91":92,"_93":94,"_95":85,"_96":97,"_98":99,"_100":101,"_102":-5},"IA aplicada con React y TypeScript","priceUSD",1500,"priceMXN",24900,"chaptersCount",12,"contentPath","routePath","ai_sdk","epubS3Key","fixtergeek/books/ai-sdk.epub","epubFilename","ai-sdk-react-router.epub","epubPublicPath","searchParams",{"_105":76,"_106":76},"success","subscribed","actionData","errors"]

¿Ya compraste el libro?