Construindo o Vibe Draw: combinando ElevenLabs com FLUX Kontext para criação de imagens por voz

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?

O desafio técnico

Construir um sistema de imagem por voz exigiu resolver cinco problemas principais:

1. Compreensão de linguagem natural — Diferenciar entre nova criação e edições
2. Consciência contextual — Manter a continuidade entre interações
3. Gerenciamento de áudio — Evitar respostas sobrepostas e gerenciar filas
4. Geração visual — Transições suaves entre geração e edição
5. Experiência do usuário — Fazer interações avançadas com IA parecerem intuitivas

Visão geral da arquitetura

Vibe Draw roda totalmente no lado do cliente e integra os seguintes componentes:

• Web Speech API para reconhecimento de fala
• API de Text to Speech da ElevenLabs para respostas de voz
• API FLUX Kontext para geração e edição de imagens
• Detecção de intenção personalizada para entender a entrada do usuário

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.

Implementando Voz com ElevenLabs

O Vibe Draw usa a

const voiceSettings = {
    model_id: "eleven_turbo_v2",
    voice_settings: {
        stability: 0.5,
        similarity_boost: 0.75
    }
};

Para criar variedade, as respostas de voz são selecionadas aleatoriamente a partir de modelos pré-definidos:

const responses = {
    generating: [
        "Ooh, I love that idea! Let me bring it to life...",
        "That sounds awesome! Creating it now...",
        "Great description! Working on it..."
    ],
    editing: [
        "Got it! Let me tweak that for you...",
        "Sure thing! Making those changes...",
        "No problem! Adjusting it now..."
    ]
};

function getRandomResponse(type) {
    const options = responses[type];
    return options[Math.floor(Math.random() * options.length)];
}

Gerenciando a reprodução de áudio

Respostas de voz sobrepostas quebram a ilusão de conversa. Vibe Draw resolve isso com um sistema de fila de áudio:

let audioQueue = [];
let isPlayingAudio = false;

async function queueAudioResponse(text) {
    audioQueue.push(text);
    if (!isPlayingAudio) {
        playNextAudio();
    }
}

Cada mensagem toca completamente antes de acionar a próxima.

Detecção de intenção e gerenciamento de contexto

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:

const editKeywords = [ ... ];
const contextualEditPhrases = [ ... ];

if (currentImage && (hasEditKeyword || hasContextClue)) {
    await handleEditRequest(text);
} else {
    await handleGenerateRequest(text);
}

Essa abordagem garante que edições sejam aplicadas apenas quando há uma imagem existente e o contexto deixa claro.

Geração de imagens com FLUX Kontext

Kontext suporta dois modos: geração e edição.

Geração (texto para imagem)

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

Edição (transformação contextual)

const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext', {
    ...
    body: JSON.stringify({
        prompt: instruction,
        image_url: currentImage,
        guidance_scale: 3.5,
        num_images: 1
    })
});

Lidando com transformações complexas

Alguns comandos implicam mudanças que excedem os limites da API de edição. Quando detectado, o sistema oferece uma alternativa:

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

Otimizando a experiência

Feedback progressivo

O feedback da interface ajuda os usuários a acompanhar o estado do sistema:

function updateUI(state) {
    switch(state) {
        case 'listening': ...
        case 'processing': ...
        case 'generating': ...
        case 'ready': ...
    }
}

Tempo inteligente

Conversas naturais exigem tempo natural:

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

Estado da sessão

Para preservar o contexto, os dados da sessão são armazenados:

const saveState = () => { ... };
const restoreState = () => { ... };

Considerações de desempenho

Para garantir a responsividade:

• Carregamento preguiçoso — Inicializar APIs apenas quando necessário
• Debouncing — Limitar solicitações de API por interação
• Tratamento de erros — Recuperar-se graciosamente de timeouts ou falhas
• Limpeza de recursos — Descartar objetos de áudio e ouvintes de eventos adequadamente

O que vem a seguir

Interfaces conversacionais abrem a porta para novas capacidades:

• Entrada multimodal — “Faça parecer mais com esta foto.”
• Sessões colaborativas — Vários usuários contribuindo para um único design
• Memória de estilo — O sistema aprende sua estética ao longo do tempo
• Streaming em tempo real — Transmitir atualizações de imagem enquanto o usuário fala e integrar IA conversacional para permitir fala transmitida.

Principais aprendizados

Construir o Vibe Draw revelou vários princípios fundamentais para ferramentas que priorizam a voz:

1. Contexto é tudo — Acompanhar o estado faz as interações parecerem coerentes
2. Tempo adiciona personalidade — Ritmar respostas faz a IA parecer responsiva
3. Alternativas mantêm o ritmo — Quando a geração falha, ofereça alternativas
4. Variedade mantém fresco — Repetir a mesma frase quebra a imersão

Conclusão

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.

Experimente você mesmo

O código-fonte completo está disponível no GitHub. Para rodar sua própria versão:

1. Clone o repositório
2. Adicione sua chave de API da ElevenLabs
3. Adicione sua chave de API da FAL.ai
4. Abra vibe-draw-v2.html em um navegador moderno
5. Clique no microfone e comece a criar
   
   Interessado em construir sua própria experiência que prioriza a voz? Explore Conversational AI da ElevenLabsElevenLabs Conversational AI ou fale com a genteentre em contato.