Salta al contenido
Regístrate
BlogDesarrollador

Creando Vibe Draw: combinando ElevenLabs con FLUX Kontext para crear imágenes con voz

Autores
A man with glasses and a beard looking to the side in a room with bookshelves.
Ryan Morrison, Growth

Vibe Draw combina la voz IA de ElevenLabs con FLUX Kontext para la creación de imágenes impulsada por voz.

Vibe Draw
Contacta con VentasConversational AI

Las interfaces de voz están cambiando cómo nos comunicamos con la IA. ¿Y si crear una imagen fuera tan fácil como describirla en voz alta?

Esa es la idea que me llevó a crear Vibe Draw como un proyecto de fin de semana. Es una herramienta creativa centrada en la voz que combina la voz IA de ElevenLabs con FLUX Kontext de Black Forest Labs para convertir prompts hablados en imágenes.

FLUX Kontext representa una nueva clase de modelo de imagen. A diferencia de los sistemas tradicionales de texto a imagen, Kontext maneja tanto la generación como la edición. Puede crear nuevas imágenes a partir de prompts, modificar las existentes e incluso fusionar múltiples imágenes de referencia en una sola salida.

Mientras que modelos como GPT-4o y Gemini 2 Flash ofrecen capacidades multimodales, FLUX Kontext está diseñado específicamente para la manipulación visual de alta calidad. En las pruebas, pude cambiar letras individuales en texto estilizado o reposicionar un objeto, solo describiendo el cambio.

Entonces pensé: “¿Por qué no hacer esto con la voz?” ¿Y qué mejor base que la potente tecnología de voz de ElevenLabs?

Vibe Draw

El desafío técnico

Construir un sistema de imágenes impulsado por voz requirió resolver cinco problemas clave:

  1. Comprensión del lenguaje natural — Diferenciar entre nueva creación y ediciones
  2. Conciencia contextual — Mantener la continuidad en las interacciones
  3. Gestión de audio — Evitar respuestas superpuestas y gestionar colas
  4. Generación visual — Transiciones fluidas entre generación y edición
  5. Experiencia del usuario — Hacer que las interacciones avanzadas con IA se sientan intuitivas

Visión general de la arquitectura

Vibe Draw funciona completamente del lado del cliente e integra los siguientes componentes:

  • Web Speech API para reconocimiento de voz
  • ElevenLabs TTS API para respuestas de voz
  • FLUX Kontext API para generación y edición de imágenes
  • Detección de intención personalizada para comprender la entrada del usuario

Este enfoque mantiene el prototipo ligero, pero las implementaciones en producción deberían gestionar las solicitudes del lado del servidor por seguridad.

Implementando Voz con ElevenLabs

Vibe Draw utiliza la API de texto a voz de ElevenLabs, ajustada para una respuesta conversacional:

1const voiceSettings = {
2 model_id: "eleven_turbo_v2",
3 voice_settings: {
4 stability: 0.5,
5 similarity_boost: 0.75
6 }
7};
8

Para crear variedad, las respuestas de voz se seleccionan aleatoriamente de plantillas predefinidas:

1const responses = {
2 generating: [
3 "Ooh, I love that idea! Let me bring it to life...",
4 "That sounds awesome! Creating it now...",
5 "Great description! Working on it..."
6 ],
7 editing: [
8 "Got it! Let me tweak that for you...",
9 "Sure thing! Making those changes...",
10 "No problem! Adjusting it now..."
11 ]
12};
13
14function getRandomResponse(type) {
15 const options = responses[type];
16 return options[Math.floor(Math.random() * options.length)];
17}
18

Gestión de la reproducción de audio

Las respuestas de voz superpuestas rompen la ilusión de conversación. Vibe Draw resuelve esto con un sistema de cola de audio:

1let audioQueue = [];
2let isPlayingAudio = false;
3
4async function queueAudioResponse(text) {
5 audioQueue.push(text);
6 if (!isPlayingAudio) {
7 playNextAudio();
8 }
9}
10

Cada mensaje se reproduce completamente antes de activar el siguiente.

Detección de intención y gestión de contexto

El sistema utiliza detección de palabras clave y contexto para decidir si un prompt del usuario es una nueva solicitud de imagen o una edición:

1const editKeywords = [ ... ];
2const contextualEditPhrases = [ ... ];
3
4if (currentImage && (hasEditKeyword || hasContextClue)) {
5 await handleEditRequest(text);
6} else {
7 await handleGenerateRequest(text);
8}
9

Este enfoque asegura que las ediciones solo se apliquen cuando hay una imagen existente y el contexto lo deja claro.

Generación de imágenes con FLUX Kontext

Image generated with Flux

Kontext admite dos modos: generación y edición.

Generación (texto a imagen)

1const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext/text-to-image', {
2 ...
3 body: JSON.stringify({
4 prompt: enhancedPrompt,
5 guidance_scale: 3.5,
6 num_images: 1,
7 safety_tolerance: "2",
8 output_format: "jpeg"
9 })
10});
11

Edición (transformación contextual)

1const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext', {
2 ...
3 body: JSON.stringify({
4 prompt: instruction,
5 image_url: currentImage,
6 guidance_scale: 3.5,
7 num_images: 1
8 })
9});
10

Manejo de transformaciones complejas

Algunos prompts implican cambios que superan los límites de la API de edición. Cuando se detecta, el sistema ofrece una alternativa:

1if (hasSignificantChange) {
2 try {
3 const enhanced = instruction + ", maintain composition but apply requested changes";
4 await editImage(enhanced);
5 } catch {
6 queueAudioResponse("That's quite a transformation! Would you like me to create a fresh image instead?");
7 }
8}
9

Optimizando la experiencia

Retroalimentación progresiva

La retroalimentación de la interfaz ayuda a los usuarios a seguir el estado del sistema:

1function updateUI(state) {
2 switch(state) {
3 case 'listening': ...
4 case 'processing': ...
5 case 'generating': ...
6 case 'ready': ...
7 }
8}
9

Sincronización inteligente

La conversación natural requiere una sincronización natural:

1if (Math.random() > 0.7) {
2 setTimeout(() => {
3 queueAudioResponse("Want me to change anything about it?");
4 }, 3000);
5}
6

Estado de la sesión

Para preservar el contexto, se almacenan los datos de la sesión:

1const saveState = () => { ... };
2const restoreState = () => { ... };
3

Consideraciones de rendimiento

Para asegurar la capacidad de respuesta:

  • Carga diferida — Solo inicializar las APIs cuando sea necesario
  • Debouncing — Limitar las solicitudes de API por interacción
  • Manejo de errores — Recuperarse de manera elegante de los tiempos de espera o fallos
  • Limpieza de recursos — Eliminar correctamente objetos de audio y oyentes de eventos

¿Qué sigue?

Las interfaces conversacionales abren la puerta a nuevas capacidades:

  • Entrada multimodal — “Haz que se parezca más a esta foto.”
  • Sesiones colaborativas — Varios usuarios contribuyendo a un solo diseño
  • Memoria de estilo — El sistema aprende tu estética con el tiempo
  • Transmisión en tiempo real — Transmitir actualizaciones de imagen mientras el usuario habla e integrar Conversational AI para permitir el habla transmitida.

Puntos clave

Construir Vibe Draw reveló varios principios fundamentales para herramientas centradas en la voz:

  1. El contexto lo es todo — Rastrear el estado hace que las interacciones se sientan coherentes
  2. La sincronización añade personalidad — Ritmar las respuestas hace que la IA se sienta receptiva
  3. Las alternativas mantienen el impulso — Cuando la generación falla, ofrece alternativas
  4. La variedad lo mantiene fresco — Repetir la misma frase rompe la inmersión

Conclusión

Vibe Draw muestra lo que sucede cuando la voz IA conversacional se encuentra con la creatividad visual. La síntesis de voz natural de ElevenLabs y las APIs de imagen de FLUX Kontext se combinan para crear una nueva forma de crear: sin clics, sin deslizadores, solo voz.

Cuando crear es tan fácil como describir, eliminamos las barreras entre la imaginación y la ejecución.

Pruébalo tú mismo

El código fuente completo está disponible en GitHub. Para ejecutar tu propia versión:

  1. Clona el repositorio
  2. Añade tu clave API de ElevenLabs
  3. Añade tu clave API de FAL.ai
  4. Abre vibe-draw-v2.html en un navegador moderno
  5. Haz clic en el micrófono y empieza a crear

    ¿Interesado en construir tu propia experiencia centrada en la voz? Explora ElevenLabs Conversational AI o contáctanos.

Descubre artículos del equipo de ElevenLabs

ElevenLabs

Crea con audio con IA de la más alta calidad

Empieza gratis

¿Ya tienes una cuenta? Inicia sesión