Découvrez Eleven Music. Créez la chanson parfaite pour chaque moment.

Créer Vibe Draw : combiner ElevenLabs avec FLUX Kontext pour la création d'images par la voix

3 juin 2025 • 6 minutes de lecture

A man with glasses and a beard looking to the side in a room with bookshelves.

Vibe Draw combine la voix IA d'ElevenLabs avec FLUX Kontext pour la création d'images par la voix.

Les interfaces vocales changent notre façon de communiquer avec l'IA. Et si créer une image était aussi simple que de la décrire à voix haute ?

C'est l'idée qui m'a conduit à créer Vibe Draw comme projet de week-end. C'est un outil créatif axé sur la voix qui associe la voix IA d'ElevenLabs avec le FLUX Kontext de Black Forest Labs pour transformer des instructions vocales en images.

FLUX Kontext représente une nouvelle classe de modèle d'image. Contrairement aux systèmes traditionnels de texte à image, Kontext gère à la fois la génération et l'édition. Il peut créer de nouvelles images à partir d'instructions, modifier des images existantes et même fusionner plusieurs images de référence en une seule sortie.

Alors que des modèles comme GPT-4o et Gemini 2 Flash offrent des capacités multimodales, FLUX Kontext est spécialement conçu pour la manipulation visuelle de haute qualité. Lors des tests, j'ai pu changer des lettres individuelles dans un texte stylisé ou repositionner un objet — simplement en décrivant le changement.

C'est là que j'ai pensé : « Pourquoi ne pas faire cela avec la voix ? » Et quelle meilleure base que la puissante technologie vocale d'ElevenLabs ?

Le défi technique

Construire un système d'image piloté par la voix nécessitait de résoudre cinq problèmes clés :

Compréhension du langage naturel — Différencier la création nouvelle des modifications
Conscience contextuelle — Maintenir la continuité à travers les interactions
Gestion audio — Éviter les réponses qui se chevauchent et gérer les files d'attente
Génération visuelle — Transitions fluides entre génération et édition
Expérience utilisateur — Rendre les interactions avancées avec l'IA intuitives

Aperçu de l'architecture

Vibe Draw fonctionne entièrement côté client et intègre les composants suivants :

Web Speech API pour la reconnaissance vocale
ElevenLabs TTS API pour les réponses vocales
FLUX Kontext API pour la génération et l'édition d'images
Détection d'intention personnalisée pour comprendre les entrées utilisateur

Cette approche garde le prototype léger, mais les déploiements en production devraient faire transiter les requêtes côté serveur pour la sécurité.

Implémenter la voix avec ElevenLabs

Vibe Draw utilise l'API de text-to-speech d'ElevenLabs, optimisée pour une réactivité conversationnelle :

1const voiceSettings = {
2    model_id: "eleven_turbo_v2",
3    voice_settings: {
4        stability: 0.5,
5        similarity_boost: 0.75
6    }
7};
8

Pour créer de la variété, les réponses vocales sont sélectionnées aléatoirement à partir de modèles prédéfinis :

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

Gestion de la lecture audio

Les réponses vocales qui se chevauchent brisent l'illusion de conversation. Vibe Draw résout cela avec un système de file d'attente audio :

1let audioQueue = [];
2let isPlayingAudio = false;
3
4async function queueAudioResponse(text) {
5    audioQueue.push(text);
6    if (!isPlayingAudio) {
7        playNextAudio();
8    }
9}
10

Chaque message est lu entièrement avant de déclencher le suivant.

Détection d'intention et gestion du contexte

Le système utilise la détection de mots-clés et de contexte pour décider si une demande utilisateur est une nouvelle requête d'image ou une modification :

1const editKeywords = [ ... ];
2const contextualEditPhrases = [ ... ];
3
4if (currentImage && (hasEditKeyword || hasContextClue)) {
5    await handleEditRequest(text);
6} else {
7    await handleGenerateRequest(text);
8}
9

Cette approche garantit que les modifications ne sont appliquées que lorsqu'il y a une image existante et que le contexte est clair.

Génération d'images avec FLUX Kontext

Kontext prend en charge deux modes : génération et édition.

Génération (texte à image)

1const 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"
  })
10});
11

Édition (transformation contextuelle)

1const 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
  })
9});
10

Gérer les transformations complexes

Certaines instructions impliquent des changements qui dépassent les limites de l'API d'édition. Lorsqu'ils sont détectés, le système propose une solution de repli :

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

Optimiser l'expérience

Retour d'information progressif

Les retours d'interface aident les utilisateurs à suivre l'état du système :

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

Timing intelligent

Une conversation naturelle nécessite un timing naturel :

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

État de la session

Pour préserver le contexte, les données de session sont stockées :

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

Considérations de performance

Pour assurer la réactivité :

Chargement différé — Initialiser les API uniquement lorsque nécessaire
Débouncing — Limiter les requêtes API par interaction
Gestion des erreurs — Récupérer gracieusement des délais d'attente ou des échecs
Nettoyage des ressources — Éliminer correctement les objets audio et les écouteurs d'événements

Et après

Les interfaces conversationnelles ouvrent la porte à de nouvelles capacités :

Entrée multimodale — « Faites-le ressembler davantage à cette photo. »
Sessions collaboratives — Plusieurs utilisateurs contribuant à un seul design
Mémoire de style — Le système apprend votre esthétique au fil du temps
Streaming en temps réel — Diffuser les mises à jour d'image au fur et à mesure que l'utilisateur parle et intégrer l'IA conversationnelle pour permettre un flux vocal.

Points clés

La création de Vibe Draw a révélé plusieurs principes fondamentaux pour les outils axés sur la voix :

Le contexte est essentiel — Suivre l'état rend les interactions cohérentes
Le timing ajoute de la personnalité — Rythmer les réponses rend l'IA réactive
Les solutions de repli maintiennent l'élan — Lorsque la génération échoue, proposer des alternatives
La variété garde l'expérience fraîche — Répéter la même phrase brise l'immersion

Conclusion

Vibe Draw montre ce qui se passe lorsque la voix IA conversationnelle rencontre la créativité visuelle. La synthèse vocale naturelle d'ElevenLabs et les API d'image de FLUX Kontext se combinent pour créer une nouvelle façon de créer—sans clics, sans curseurs—juste la parole.

Quand créer est aussi simple que décrire, nous supprimons les barrières entre l'imagination et l'exécution.

Essayez par vous-même

Le code source complet est disponible sur GitHub. Pour exécuter votre propre version :

Clonez le dépôt
Ajoutez votre clé API ElevenLabs
Ajoutez votre clé API FAL.ai
Ouvrez vibe-draw-v2.html dans un navigateur moderne
Cliquez sur le microphone et commencez à créer

Intéressé par la création de votre propre expérience axée sur la voix ? Explorez ElevenLabs Conversational AI ou contactez-nous.

Découvrez les articles de l'équipe ElevenLabs

Impact

Cancer Steals Voices. ElevenLabs Gives Them Back.

The ElevenLabs Impact Program is taking a meaningful step forward by offering free voice cloning technology to members of Lary’s Speakeasy, the world's largest online support network for the laryngectomy community.

Product