Black Friday

Resgatar
Pular para o conteúdo
Inscreva-se
BlogDesenvolvedor

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

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

Vibe Draw combina a voz IA da ElevenLabs com o FLUX Kontext para criação de imagens por voz.

Vibe Draw
Fale com VendasConversational AI

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?

Vibe Draw

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
  • ElevenLabs TTS API para respostas de voz
  • FLUX Kontext API 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

Vibe Draw usa a API de texto para fala da ElevenLabs, ajustada para responsividade 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 criar variedade, as respostas de voz são selecionadas aleatoriamente a partir de modelos pré-definidos:

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

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:

1let audioQueue = [];
2let isPlayingAudio = false;
3
4async 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.

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:

1const editKeywords = [ ... ];
2const contextualEditPhrases = [ ... ];
3
4if (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.

Geração de imagens com FLUX Kontext

Image generated with Flux

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

Geração (texto para imagem)

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

Edição (transformação 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

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:

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

Otimizando a experiência

Feedback progressivo

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

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

Tempo inteligente

Conversas naturais exigem tempo natural:

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

Estado da sessão

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

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

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 Conversational AI 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 ElevenLabs Conversational AI ou entre em contato.

Explore artigos da equipe ElevenLabs

ElevenLabs

Crie com o áudio IA da mais alta qualidade

Comece agora - é grátis

Já tem uma conta? Entrar