> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Integración con Replicate
> Aprende a integrar Replicate con tu aplicación de Lovable
## ¿Qué es Replicate?
[Replicate](https://replicate.com/) te permite ejecutar modelos de machine learning de código abierto con solo unas pocas líneas de código, sin necesidad de conocimientos en ML.
Es una plataforma de API donde los desarrolladores pueden generar imágenes, videos, audio y más usando modelos de IA creados por la comunidad o modelos personalizados. Ya sea que estés creando un MVP, haciendo prototipos de funciones creativas o incorporando IA de nivel de producción a tu app, Replicate te ofrece acceso rápido y flexible a modelos de última generación.
## ¿Por qué usar Replicate con Lovable?
Replicate encaja de forma natural en el flujo de trabajo de creación de aplicaciones con enfoque en IA de Lovable. Puedes:
* Generar elementos visuales dinámicos (por ejemplo, banners de cursos, avatares, escenas)
* Usar IA multimodal (imagen, video, voz, texto a voz)
* Agregar generación de contenido en tiempo real sin tener que operar tu propia infraestructura de modelos
Con el conocimiento integrado de Lovable sobre la API y los modelos de Replicate, la integración toma minutos, no días. Solo describe lo que necesitas y Lovable se encarga del resto.
## Tutorial paso a paso
En este tutorial, explicamos cómo integrar Replicate en una aplicación de Lovable para generar dinámicamente imágenes de banner de cursos, añadiendo una nueva capa de interactividad y pulido a tu producto. También aprenderás cómo encaja Replicate en el flujo de trabajo de IA más amplio de Lovable, incluyendo cómo combinarlo con OpenAI para el contenido del curso, Supabase para la lógica de backend y conversaciones de IA en tiempo real usando la [API WebRTC de OpenAI](https://platform.openai.com/docs/guides/realtime#connect-with-webrtc).
Empezamos creando una aplicación web para aprender español con Lovable. Esto incluye:
* Un flujo de inicio de sesión de usuario
* Chat con IA para tutoría de español
* Grabación y reproducción de voz
* Funciones de traducción
Esto les da a los usuarios un tutor de IA personalizado con el que pueden hablar, escribir y aprender.
Mejoramos la app con cursos generados por IA:
* Los usuarios definen un tema (por ejemplo, *Preguntas para hacer en una barbacoa*).
* Una función basada en OpenAI crea 10 preguntas de opción múltiple en español.
* Los cursos se guardan en la cuenta del usuario con Supabase y se pueden revisar en cualquier momento.
* Los usuarios reciben comentarios sobre cada pregunta con explicaciones.
* Se genera automáticamente una **imagen de banner del curso** que coincida con el tema. Replicate usa el modelo **Flux Schnell** para una generación de imágenes rápida e inyecta dinámicamente la imagen en la página del curso.
**Cómo funciona:**
1. Llamamos a la API de Replicate cuando se crea un curso nuevo.
2. La instrucción se genera dinámicamente en función del tema del curso.
3. Replicate devuelve una URL de imagen, que se usa como banner para el curso.
Ahora, hagamos la experiencia más visual con Replicate.
**Instrucción de ejemplo:**
Una escena hermosa, educativa y atractiva sobre el tema en estilo de arte digital. Colores vibrantes. Sin texto en la imagen.
**Ejemplo de manejo de la respuesta:**
Algunos modelos de Replicate devuelven una sola URL de imagen, otros devuelven un array. Asegúrate de que tu función de Lovable extraiga correctamente la salida, por ejemplo:
```
const imageUrl = response.output[0]
```
El Playground de Replicate facilita probar indicaciones y obtener fragmentos de código:
* Ajusta las indicaciones hasta que estés satisfecho con la salida
* Usa el generador de fragmentos de API para Node.js, Python, etc.
* Copia y pega directamente en las funciones de backend de Lovable
Usa Playground Beta para comparar múltiples resultados a la vez.
Para simular conversaciones humanas, añadimos una función de conversación en español en tiempo real usando la API WebRTC de OpenAI:
* Los usuarios pueden hablar directamente con su tutor de IA.
* La IA entiende, responde y corrige la pronunciación en tiempo real.
* Esto hace que el aprendizaje de idiomas sea mucho más inmersivo y práctico.
Esta función se integra sin problemas con la entrada de voz de Lovable, el manejo de WebRTC y la interfaz de chat del frontend.
## Consejos y advertencias
* **Variación en la salida del modelo**: Los modelos de Replicate difieren en cómo devuelven los resultados. Revisa siempre el JSON real que devuelve el playground.
* **La iteración sobre la instrucción es clave**: Pequeños cambios en la instrucción pueden afectar en gran medida la calidad de la imagen. Usa el playground para experimentar.
* **Registros del backend**: Usa los registros de Supabase Edge para depurar tus llamadas a la API. Lovable permite consultar registros directamente dentro de la aplicación.
* **Control de versiones en Lovable**: Cada edición de la instrucción se confirma automáticamente, pero puedes hacer un seguimiento manual de puntos de control usando la función «Deploy» para estados listos para producción.
## Preguntas frecuentes
Replicate es una plataforma que te permite ejecutar potentes modelos de aprendizaje automático (como generación de imágenes o vídeo) usando una API sencilla, sin necesidad de entrenar ni alojar los modelos tú mismo.
Replicate es popular entre indie hackers, creadores de startups y también grandes empresas. Tanto si estás prototipando una funcionalidad de IA como si estás desplegando a gran escala, Replicate admite tanto experimentos rápidos como despliegues robustos.
Sí. Lovable almacena tus claves de forma segura y gestiona las llamadas a la API por ti una vez añadidas.
Replicate admite muchas modalidades, entre ellas:
* Generación de imágenes (por ejemplo, Flux Schnell)
* Generación de vídeo
* Audio y texto a voz
* Modelos de lenguaje (aunque no es el enfoque principal de Replicate)
* Modelos Cog personalizados (modelos open-source en Docker que puedes desplegar)
Explóralos todos en [replicate.com/explore](https://replicate.com/explore).
Usa el **Playground** de Replicate para probar diferentes modelos antes de integrarlos. El Playground te permite ajustar indicaciones, comparar resultados y copiar fragmentos de código funcional para tu app.
Replicate tiene dos formatos de API:
* El endpoint original (`/predictions`): el más conocido y usado.
* El nuevo endpoint `/models/{owner}/{model}/versions/{id}/predictions`: más eficiente y flexible.
Lovable se integra con ambos según los requisitos del modelo.
Las salidas de los modelos varían. Algunos devuelven una URL como cadena de texto, otros devuelven un array. Usa el Playground de Replicate para inspeccionar la respuesta real y actualiza tu lógica de análisis en consecuencia.
Ejemplo de corrección:
```
const imageUrl = Array.isArray(output) ? output[0] : output;
```
Puedes elegir:
* **Generación única al crear el curso**: ahorra costes de cómputo y crea una identidad visual consistente.
* **Generación dinámica por sesión**: si quieres imágenes nuevas cada vez.
En el tutorial, elegimos generar la imagen una sola vez cuando se crea el curso por primera vez.
¡Sí! Lovable tiene conocimiento integrado sobre Replicate y muchos de sus modelos populares. Puede autogenerar el código de integración por ti usando los paquetes adecuados y la estructura de instrucción correcta.
Lovable instala y configura automáticamente los paquetes cuando es necesario, en función de tu instrucción y del contexto de integración. No tienes que ejecutar npm install manualmente a menos que estés depurando en tu entorno local.
* Usa los **registros de funciones perimetrales de Superbase** de Lovable para rastrear problemas.
* Si hay una diferencia entre la respuesta esperada y la real de Replicate, actualiza tu manejo de JSON.
* Usa el botón **“Fix this”** en Lovable para reintentar o refactorizar la lógica de la función.
Actualmente, cada cambio de instrucción crea un commit. Puedes:
* Usar la pestaña **History** para navegar por los commits (incluido marcar commits como favoritos)
* **Desplegar** una versión para convertirla en un checkpoint de producción
* Usar la sincronización con GitHub para disponer de un control de versiones personalizado
Puedes exportar tu proyecto de Lovable a GitHub con **sincronización bidireccional**:
* Lovable envía cambios a GitHub
* Tú (o tu equipo) podéis hacer cambios en un IDE y subirlos de vuelta
* Funciona muy bien con el frontend en Lovable + el backend en tu propio editor
Son documentos simplificados basados en markdown y optimizados para modelos de lenguaje. Replicate está trabajando activamente en añadirlos para ayudar a que Lovable (y otras herramientas) entiendan mejor sus modelos de forma automática.
Sí, la elaboración de instrucciones es esencial. Lovable ayuda con la generación automática de instrucciones y plantillas, pero siempre deberías hacer pruebas en el Playground de Replicate para refinar las entradas y obtener los mejores resultados.
## Recursos
* Explora la [documentación de la API de Replicate](https://replicate.com/docs) y el [catálogo de modelos de Replicate](https://replicate.com/)
* Obtén más información sobre [Function Calling de OpenAI](https://platform.openai.com/docs/guides/function-calling) y [OpenAI WebRTC](https://platform.openai.com/docs/guides/speech/real-time-speech)
* Los usuarios definen un tema (por ejemplo, *Preguntas para hacer en una barbacoa*).
* Una función basada en OpenAI crea 10 preguntas de opción múltiple en español.
* Los cursos se guardan en la cuenta del usuario con Supabase y se pueden revisar en cualquier momento.
* Los usuarios reciben comentarios sobre cada pregunta con explicaciones.
* Se genera automáticamente una **imagen de banner del curso** que coincida con el tema. Replicate usa el modelo **Flux Schnell** para una generación de imágenes rápida e inyecta dinámicamente la imagen en la página del curso.
**Instrucción de ejemplo:**
