Vibe Draw combina a voz IA da ElevenLabs com o FLUX Kontext para criação de imagens por voz.
.webp&w=3840&q=95)
Interfaces de voz estão mudando como nos comunicamos com IA. E se criar uma imagem fosse tão fácil quanto descrevê-la em voz alta?
Essa é a ideia que me levou a criar o Vibe Draw como um projeto de fim de semana. É uma ferramenta criativa que prioriza a voz e combina a Voz IA da ElevenLabs com o FLUX Kontext da Black Forest Labs para transformar comandos falados em imagens.
FLUX Kontext representa uma nova classe de modelo de imagem. Diferente dos sistemas tradicionais de texto para imagem, o Kontext lida tanto com geração quanto com edição. Ele pode criar novas imagens a partir de comandos, modificar imagens existentes e até mesmo mesclar várias imagens de referência em uma única saída.
Enquanto modelos como GPT-4o e Gemini 2 Flash oferecem capacidades multimodais, o FLUX Kontext é feito sob medida para manipulação visual de alta qualidade. Nos testes, pude mudar letras individuais em texto estilizado ou reposicionar um objeto — apenas descrevendo a mudança.
Foi quando pensei: “Por que não fazer isso com voz?” E que melhor base do que a poderosa tecnologia de voz da ElevenLabs?
.webp&w=3840&q=95)
Construir um sistema de imagem por voz exigiu resolver cinco problemas principais:
Vibe Draw roda totalmente no lado do cliente e integra os seguintes componentes:
Essa abordagem mantém o protótipo leve, mas implantações em produção devem fazer proxy das solicitações no lado do servidor para segurança.
Vibe Draw usa a API de texto para fala da ElevenLabs, ajustada para responsividade conversacional:
| 1 | const voiceSettings = { |
| 2 | model_id: "eleven_turbo_v2", |
| 3 | voice_settings: { |
| 4 | stability: 0.5, |
| 5 | similarity_boost: 0.75 |
| 6 | } |
| 7 | }; |
| 8 |
Para criar variedade, as respostas de voz são selecionadas aleatoriamente a partir de modelos pré-definidos:
| 1 | const 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 | |
| 14 | function getRandomResponse(type) { |
| 15 | const options = responses[type]; |
| 16 | return options[Math.floor(Math.random() * options.length)]; |
| 17 | } |
| 18 |
Respostas de voz sobrepostas quebram a ilusão de conversa. Vibe Draw resolve isso com um sistema de fila de áudio:
| 1 | let audioQueue = []; |
| 2 | let isPlayingAudio = false; |
| 3 | |
| 4 | async function queueAudioResponse(text) { |
| 5 | audioQueue.push(text); |
| 6 | if (!isPlayingAudio) { |
| 7 | playNextAudio(); |
| 8 | } |
| 9 | } |
| 10 |
Cada mensagem toca completamente antes de acionar a próxima.
O sistema usa detecção de palavras-chave e contexto para decidir se um comando do usuário é um novo pedido de imagem ou uma edição:
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (currentImage && (hasEditKeyword || hasContextClue)) { |
| 5 | await handleEditRequest(text); |
| 6 | } else { |
| 7 | await handleGenerateRequest(text); |
| 8 | } |
| 9 |
Essa abordagem garante que edições sejam aplicadas apenas quando há uma imagem existente e o contexto deixa claro.
Kontext suporta dois modos: geração e edição.
| 1 | const 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 |
| 1 | const 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 |
Alguns comandos implicam mudanças que excedem os limites da API de edição. Quando detectado, o sistema oferece uma alternativa:
| 1 | if (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 |
O feedback da interface ajuda os usuários a acompanhar o estado do sistema:
| 1 | function updateUI(state) { |
| 2 | switch(state) { |
| 3 | case 'listening': ... |
| 4 | case 'processing': ... |
| 5 | case 'generating': ... |
| 6 | case 'ready': ... |
| 7 | } |
| 8 | } |
| 9 |
Conversas naturais exigem tempo natural:
| 1 | if (Math.random() > 0.7) { |
| 2 | setTimeout(() => { |
| 3 | queueAudioResponse("Want me to change anything about it?"); |
| 4 | }, 3000); |
| 5 | } |
| 6 |
Para preservar o contexto, os dados da sessão são armazenados:
| 1 | const saveState = () => { ... }; |
| 2 | const restoreState = () => { ... }; |
| 3 |
Para garantir a responsividade:
Interfaces conversacionais abrem a porta para novas capacidades:
Construir o Vibe Draw revelou vários princípios fundamentais para ferramentas que priorizam a voz:
Vibe Draw mostra o que acontece quando a voz IA conversacional encontra a criatividade visual. A síntese de fala natural da ElevenLabs e as APIs de imagem do FLUX Kontext se combinam para criar uma nova forma de criar—sem cliques, sem sliders—apenas fala.
Quando criar é tão fácil quanto descrever, removemos as barreiras entre imaginação e execução.
O código-fonte completo está disponível no GitHub. Para rodar sua própria versão:
.webp&w=3840&q=95)
BurdaVerlag is partnering with ElevenLabs to integrate its advanced AI audio and voice agent technology into the AISSIST platform. This will provide powerful tools for text-to-speech, transcription, and more, streamlining workflows for media and publishing professionals.
Ensure reliability and compliance with ElevenLabs Agents Testing. Run structured simulations for tool calls, human transfers, workflows, and guardrails. Integrate into CI/CD and ship agents with confidence.
Desenvolvido por ElevenLabs Agentes
.webp&w=3840&q=95)