Vibe Draw ElevenLabs की वॉइस AI को FLUX Kontext के साथ मिलाकर वॉइस-पावर्ड इमेज क्रिएशन करता है।
.webp&w=3840&q=95)
वॉइस इंटरफेस AI के साथ हमारे संवाद करने के तरीके को बदल रहे हैं। क्या हो अगर एक छवि बनाना उतना ही आसान हो जितना उसे ज़ोर से वर्णन करना?
यही विचार था जिसने मुझे वीकेंड प्रोजेक्ट के रूप में Vibe Draw बनाने के लिए प्रेरित किया। यह एक वॉइस-फर्स्ट क्रिएटिव टूल है जो ElevenLabs’ Voice AI को Black Forest Labs’ FLUX Kontext के साथ जोड़ता है ताकि बोले गए संकेतों को छवियों में बदला जा सके।
FLUX Kontext एक नई श्रेणी का इमेज मॉडल है। पारंपरिक टेक्स्ट-टू-इमेज सिस्टम के विपरीत, Kontext जनरेशन और एडिटिंग दोनों को संभालता है। यह संकेतों से नई छवियाँ बना सकता है, मौजूदा छवियों को संशोधित कर सकता है, और यहां तक कि कई संदर्भ छवियों को एकल आउटपुट में मर्ज कर सकता है।
जहां मॉडल जैसे GPT-4o और Gemini 2 Flash मल्टीमॉडल क्षमताएं प्रदान करते हैं, FLUX Kontext उच्च गुणवत्ता वाली दृश्य हेरफेर के लिए विशेष रूप से बनाया गया है। परीक्षण में, मैं स्टाइलाइज्ड टेक्स्ट में व्यक्तिगत अक्षरों को बदल सकता था या किसी वस्तु को पुनः स्थिति में ला सकता था — बस परिवर्तन का वर्णन करके।
तब मैंने सोचा: “यह वॉइस के साथ क्यों न किया जाए?” और ElevenLabs की शक्तिशाली वॉइस तकनीक से बेहतर आधार क्या हो सकता है?
.webp&w=3840&q=95)
वॉइस-ड्रिवन इमेज सिस्टम बनाने के लिए पांच प्रमुख समस्याओं को हल करना पड़ा:
Vibe Draw पूरी तरह से क्लाइंट-साइड पर चलता है और निम्नलिखित घटकों को एकीकृत करता है:
यह दृष्टिकोण प्रोटोटाइप को हल्का रखता है, लेकिन प्रोडक्शन डिप्लॉयमेंट्स को सुरक्षा के लिए सर्वर-साइड पर अनुरोधों को प्रॉक्सी करना चाहिए।
Vibe Draw ElevenLabs की टेक्स्ट-टू-स्पीच API का उपयोग करता है, जो संवादात्मक प्रतिक्रिया के लिए ट्यून किया गया है:
| 1 | const voiceSettings = { |
| 2 | model_id: "eleven_turbo_v2", |
| 3 | voice_settings: { |
| 4 | stability: 0.5, |
| 5 | similarity_boost: 0.75 |
| 6 | } |
| 7 | }; |
| 8 |
विविधता बनाने के लिए, वॉइस प्रतिक्रियाएं पूर्व-निर्धारित टेम्पलेट्स से रैंडमली चुनी जाती हैं:
| 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 |
ओवरलैपिंग वॉइस प्रतिक्रियाएं संवाद का भ्रम तोड़ देती हैं। Vibe Draw इसे ऑडियो कतार प्रणाली के साथ हल करता है:
| 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 |
प्रत्येक संदेश पूरी तरह से बजता है और फिर अगले को ट्रिगर करता है।
सिस्टम कीवर्ड और संदर्भ डिटेक्शन का उपयोग करता है यह तय करने के लिए कि यूज़र का संकेत एक नई इमेज अनुरोध है या एक एडिट:
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (currentImage && (hasEditKeyword || hasContextClue)) { |
| 5 | await handleEditRequest(text); |
| 6 | } else { |
| 7 | await handleGenerateRequest(text); |
| 8 | } |
| 9 |
यह दृष्टिकोण सुनिश्चित करता है कि एडिट्स केवल तभी लागू होते हैं जब कोई मौजूदा इमेज हो और संदर्भ स्पष्ट हो।
Kontext दो मोड्स का समर्थन करता है: जनरेशन और एडिटिंग।
| 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 |
| 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 |
कुछ संकेत ऐसे परिवर्तन सुझाते हैं जो एडिटिंग API की सीमाओं से परे हैं। जब इसका पता चलता है, तो सिस्टम एक फॉलबैक प्रदान करता है:
| 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 |
UI प्रतिक्रिया यूज़र्स को सिस्टम की स्थिति को ट्रैक करने में मदद करती है:
| 1 | function updateUI(state) { |
| 2 | switch(state) { |
| 3 | case 'listening': ... |
| 4 | case 'processing': ... |
| 5 | case 'generating': ... |
| 6 | case 'ready': ... |
| 7 | } |
| 8 | } |
| 9 |
प्राकृतिक संवाद के लिए प्राकृतिक समय की आवश्यकता होती है:
| 1 | if (Math.random() > 0.7) { |
| 2 | setTimeout(() => { |
| 3 | queueAudioResponse("Want me to change anything about it?"); |
| 4 | }, 3000); |
| 5 | } |
| 6 |
संदर्भ को बनाए रखने के लिए, सेशन डेटा संग्रहीत किया जाता है:
| 1 | const saveState = () => { ... }; |
| 2 | const restoreState = () => { ... }; |
| 3 |
प्रतिक्रिया सुनिश्चित करने के लिए:
संवादात्मक UI नई क्षमताओं के द्वार खोलते हैं:
Vibe Draw बनाने से वॉइस-फर्स्ट टूल्स के लिए कई मूल सिद्धांत सामने आए:
Vibe Draw दिखाता है कि जब संवादात्मक वॉइस AI दृश्य रचनात्मकता से मिलता है तो क्या होता है। ElevenLabs की प्राकृतिक स्पीच सिंथेसिस और FLUX Kontext की इमेज APIs मिलकर एक नया तरीका बनाते हैं — कोई क्लिक नहीं, कोई स्लाइडर नहीं — बस स्पीच।
जब बनाना उतना ही आसान होता है जितना वर्णन करना, हम कल्पना और निष्पादन के बीच की बाधाओं को हटा देते हैं।
पूरा सोर्स कोड GitHub पर उपलब्ध है. अपनी खुद की वर्जन चलाने के लिए:
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.
Many business phone systems rely on interactive voice response (IVR) menus. Until now, these systems created a barrier for AI agents, limiting automation in key workflows.
ElevenLabs द्वारा संचालित कन्वर्सेशनल AI
.webp&w=3840&q=95)