.webp&w=3840&q=95)
Customer stories
Funding Societies scales outreach across Southeast Asia with ElevenLabs’ Conversational AI
Automating 1,000+ outbound calls with custom multilingual voice agents.
Créer Vibe Draw : combiner ElevenLabs avec FLUX Kontext pour la création d'images par la voix
Vibe Draw combine la voix IA d'ElevenLabs avec FLUX Kontext pour la création d'images par la voix.
.webp&w=3840&q=95)
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 ?
.webp&w=3840&q=95)
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 :
| 1 | const 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 :
| 1 | const 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 | |
| 14 | function 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 :
| 1 | let audioQueue = []; |
| 2 | let isPlayingAudio = false; |
| 3 | |
| 4 | async 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 :
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (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)
| 1 | const 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 |
Édition (transformation contextuelle)
| 1 | const 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 |
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 :
| 1 | if (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 :
| 1 | function 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 :
| 1 | if (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 :
| 1 | const saveState = () => { ... }; |
| 2 | const 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
Resources
.webp&w=3840&q=95)
How to monetize your voice with ElevenLabs Voice Library and create a passive income
Start creating passive income from your voice today.