Criando o Vibe Draw: combinando ElevenLabs e FLUX Kontext para criar imagens por voz

As interfaces de voz estão mudando a forma como nos comunicamos com a IA. E se criar uma imagem fosse tão fácil quanto descrevê-la em voz alta?

Foi essa 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 IA de voz da ElevenLabs com o FLUX Kontext, da Black Forest Labs, para transformar comandos falados em imagens.

O FLUX Kontext representa uma nova categoria de modelo de imagem. Diferentemente 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é combinar várias imagens de referência em um único resultado.

Embora modelos como GPT-4o e Gemini 2 Flash ofereçam recursos multimodais, o FLUX Kontext foi desenvolvido especificamente para manipulação visual de alta qualidade. Em testes, consegui alterar letras individuais em textos estilizados ou reposicionar um objeto — apenas descrevendo a mudança.

Foi quando pensei: “Por que não fazer isso com voz?” E que base poderia ser melhor do que a poderosa tecnologia de voz da ElevenLabs?

O desafio técnico

Criar um sistema de imagens por voz exigiu resolver cinco problemas principais:

1. Compreensão de linguagem natural — Diferenciar entre novas criações e edições
2. Reconhecimento de contexto — Manter a continuidade entre as interações
3. Gerenciamento de áudio — Evitar respostas sobrepostas e gerenciar filas
4. Geração visual — Transições fluidas entre geração e edição
5. Experiência do usuário — Fazer com que interações avançadas com IA pareçam intuitivas

Visão geral da arquitetura

O Vibe Draw funciona inteiramente no lado do cliente e integra os seguintes componentes:

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

Essa abordagem mantém o protótipo leve, mas as implementações em produção devem encaminhar as solicitações por um servidor para garantir a segurança.

Implementando voz com a ElevenLabs

O Vibe Draw usa a API de texto em fala da ElevenLabs, ajustada para respostas ágeis em conversas:

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

Para criar variedade, as respostas por voz são selecionadas aleatoriamente a partir de modelos predefinidos:

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 uma conversa. O 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 é reproduzida por completo antes de acionar a próxima.

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

O sistema usa a detecção de palavras-chave e de contexto para decidir se um comando do usuário é uma nova solicitação 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 as edições sejam aplicadas apenas quando houver uma imagem existente e o contexto deixar isso claro.

Geração de imagens com o FLUX Kontext

O Kontext oferece suporte a 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
    })
});

Como lidar com transformações complexas

Alguns comandos envolvem mudanças que excedem os limites da API de edição. Quando isso é 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': ...
    }
}

Temporização inteligente

Uma conversa natural exige uma temporização 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 agilidade:

• Carregamento sob demanda — Inicializar APIs apenas quando necessário
• Debouncing — Limitar solicitações à API por interação
• Tratamento de erros — Recuperar-se adequadamente de tempos limite ou falhas
• Limpeza de recursos — Descartar corretamente objetos de áudio e listeners de eventos

Próximos passos

Interfaces conversacionais abrem caminho para novos recursos:

• 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 — Transmita atualizações da imagem enquanto o usuário fala e integre a IA Conversacional da ElevenLabs para permitir fala transmitida em streaming.

Principais aprendizados

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

1. Contexto é tudo — Acompanhar o estado torna as interações mais coerentes
2. O tempo dá personalidade — Ritmar as respostas faz a IA parecer mais ágil
3. Alternativas mantêm o ritmo — Quando a geração falha, ofereça outras opções
4. A variedade mantém o interesse — Repetir a mesma frase quebra a imersão

Conclusão

O Vibe Draw mostra o que acontece quando a IA de voz 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 controles deslizantes, apenas voz.

Quando criar é tão fácil quanto descrever, removemos as barreiras entre a imaginação e a execução.

Experimente você mesmo

O código-fonte completo está disponível no GitHub. Para executar 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 o arquivo vibe-draw-v2.html em um navegador moderno
5. Clique no microfone e comece a criar
   
   Quer criar sua própria experiência que prioriza a voz? Explore a IA Conversacional da ElevenLabs ou fale conosco.