Come nasce Vibe Draw: unendo ElevenLabs e FLUX Kontext per creare immagini con la voce

Le interfacce vocali stanno cambiando il modo in cui comunichiamo con l’IA. E se creare un’immagine fosse facile come descriverla a voce?

Da questa idea è nato Vibe Draw, un progetto nato in un weekend. È uno strumento creativo pensato per la voce che unisce la voce IA di ElevenLabs con FLUX Kontext di Black Forest Labs per trasformare comandi vocali in immagini.

FLUX Kontext rappresenta una nuova generazione di modelli per le immagini. A differenza dei classici sistemi text-to-image, Kontext gestisce sia la generazione che la modifica. Puoi creare nuove immagini da un prompt, modificare quelle esistenti e persino unire più immagini di riferimento in un unico risultato.

Modelli come GPT-4o e Gemini 2 Flash offrono capacità multimodali, ma FLUX Kontext è progettato apposta per la manipolazione visiva di alta qualità. Nei test, sono riuscito a cambiare singole lettere in un testo stilizzato o a spostare un oggetto — semplicemente descrivendo la modifica.

A quel punto ho pensato: “Perché non farlo con la voce?” E quale base migliore della tecnologia vocale di ElevenLabs?

La sfida tecnica

Creare un sistema di immagini guidato dalla voce ha richiesto di risolvere cinque problemi chiave:

1. Comprensione del linguaggio naturale — Distinguere tra creazione e modifica
2. Consapevolezza del contesto — Mantenere la continuità tra le interazioni
3. Gestione dell’audio — Evitare sovrapposizioni nelle risposte e gestire le code
4. Generazione visiva — Passaggi fluidi tra generazione e modifica
5. Esperienza utente — Rendere intuitive le interazioni avanzate con l’IA

Panoramica dell’architettura

Vibe Draw funziona interamente lato client e integra questi componenti:

• Web Speech API per il riconoscimento vocale
• API Text to Speech di ElevenLabs per le risposte vocali
• API FLUX Kontext per la generazione e la modifica delle immagini
• Rilevamento personalizzato dell’intento per comprendere l’input dell’utente

Questo approccio mantiene il prototipo leggero, ma per la produzione è meglio gestire le richieste lato server per maggiore sicurezza.

Implementare la voce con ElevenLabs

Vibe Draw usa l’API text-to-speech di ElevenLabs, ottimizzata per risposte conversazionali:

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

Per creare varietà, le risposte vocali vengono scelte casualmente da modelli predefiniti:

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)];
}

Gestione della riproduzione audio

Le risposte vocali sovrapposte rompono l’effetto conversazione. Vibe Draw risolve con un sistema di code audio:

let audioQueue = [];
let isPlayingAudio = false;

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

Ogni messaggio viene riprodotto per intero prima di passare al successivo.

Rilevamento dell’intento e gestione del contesto

Il sistema usa parole chiave e rilevamento del contesto per capire se il prompt dell’utente è una nuova richiesta di immagine o una modifica:

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

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

Così le modifiche vengono applicate solo se c’è già un’immagine e il contesto è chiaro.

Generazione di immagini con FLUX Kontext

Kontext supporta due modalità: generazione e modifica.

Generazione (da testo a immagine)

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"
    })
});

Modifica (trasformazione contestuale)

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
    })
});

Gestione delle trasformazioni complesse

Alcuni prompt richiedono cambiamenti oltre i limiti dell’API di modifica. In questi casi, il sistema propone un’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?");
    }
}

Ottimizzare l’esperienza

Feedback progressivo

Il feedback dell’interfaccia aiuta l’utente a seguire lo stato del sistema:

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

Tempistiche intelligenti

Una conversazione naturale richiede tempi naturali:

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

Stato della sessione

Per mantenere il contesto, i dati della sessione vengono salvati:

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

Considerazioni sulle prestazioni

Per garantire reattività:

• Caricamento progressivo — Le API vengono inizializzate solo quando servono
• Debouncing — Limita le richieste API per ogni interazione
• Gestione degli errori — Recupera in modo fluido da timeout o errori
• Pulizia delle risorse — Elimina correttamente oggetti audio e listener

Cosa ci aspetta

Le interfacce conversazionali aprono nuove possibilità:

• Input multimodale — “Falla assomigliare di più a questa foto.”
• Sessioni collaborative — Più utenti che contribuiscono allo stesso progetto
• Memoria dello stile — Il sistema impara il tuo gusto estetico nel tempo
• Streaming in tempo reale — Aggiorna le immagini mentre parli e integra IA conversazionale per consentire lo streaming della voce.

Cosa abbiamo imparato

Sviluppare Vibe Draw ha evidenziato alcuni principi chiave per gli strumenti vocali:

1. Il contesto è tutto — Tenere traccia dello stato rende le interazioni coerenti
2. Il tempismo dà personalità — Il ritmo delle risposte rende l’IA più reattiva
3. Le alternative mantengono il flusso — Se la generazione fallisce, proponi un’alternativa
4. La varietà mantiene l’interesse — Ripetere sempre la stessa frase rompe l’immersione

Conclusione

Vibe Draw mostra cosa succede quando la voce IA conversazionale incontra la creatività visiva. La sintesi vocale naturale di ElevenLabs e le API di immagini di FLUX Kontext si uniscono per creare un nuovo modo di lavorare: niente click, niente slider — solo la voce.

Quando creare è facile quanto descrivere, spariscono le barriere tra immaginazione ed esecuzione.

Provalo tu stesso

Il codice sorgente completo è disponibile su GitHub. Per provare la tua versione:

1. Clona il repository
2. Aggiungi la tua API key di ElevenLabs
3. Aggiungi la tua API key di FAL.ai
4. Apri vibe-draw-v2.html in un browser moderno
5. Clicca sul microfono e inizia a creare
   
   Vuoi creare la tua esperienza vocale? ScopriIA conversazionale di ElevenLabs oppure contattaci.