Vibe Draw kombinerar ElevenLabs' röst-AI med FLUX Kontext för röststyrd bildskapande.
.webp&w=3840&q=95)
Röstgränssnitt förändrar hur vi kommunicerar med AI. Tänk om det var lika enkelt att skapa en bild som att beskriva den högt?
Det var idén som ledde till att jag skapade Vibe Draw som ett helgprojekt. Det är ett röstförst kreativt verktyg som parar ihop ElevenLabs’ röst-AI med Black Forest Labs’ FLUX Kontext för att omvandla talade kommandon till bilder.
FLUX Kontext representerar en ny klass av bildmodell. Till skillnad från traditionella text-till-bild-system hanterar Kontext både generering och redigering. Den kan skapa nya bilder från kommandon, ändra befintliga och till och med slå samman flera referensbilder till en enda utgång.
Medan modeller som GPT-4o och Gemini 2 Flash erbjuder multimodala funktioner, är FLUX Kontext specialbyggd för högkvalitativ visuell manipulation. Under tester kunde jag ändra enskilda bokstäver i stiliserad text eller flytta ett objekt — bara genom att beskriva ändringen.
Det var då jag tänkte: “Varför inte göra detta med röst?” Och vilken bättre grund än ElevenLabs’ kraftfulla röstteknologi?
.webp&w=3840&q=95)
Att bygga ett röststyrt bildsystem krävde att lösa fem nyckelproblem:
Vibe Draw körs helt klientbaserat och integrerar följande komponenter:
Denna metod håller prototypen lättviktig, men produktionsdistributioner bör proxyförfrågningar server-side för säkerhet.
Vibe Draw använder ElevenLabs’ text-to-speech API, anpassad för konversationsrespons:
| 1 | const voiceSettings = { |
| 2 | model_id: "eleven_turbo_v2", |
| 3 | voice_settings: { |
| 4 | stability: 0.5, |
| 5 | similarity_boost: 0.75 |
| 6 | } |
| 7 | }; |
| 8 |
För att skapa variation väljs röstrespons slumpmässigt från fördefinierade mallar:
| 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 |
Överlappande röstrespons bryter illusionen av konversation. Vibe Draw löser detta med ett ljudkö-system:
| 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 |
Varje meddelande spelas upp helt innan nästa triggas.
Systemet använder nyckelord och kontextdetektion för att avgöra om en användares kommando är en ny bildförfrågan eller en redigering:
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (currentImage && (hasEditKeyword || hasContextClue)) { |
| 5 | await handleEditRequest(text); |
| 6 | } else { |
| 7 | await handleGenerateRequest(text); |
| 8 | } |
| 9 |
Denna metod säkerställer att redigeringar endast tillämpas när det finns en befintlig bild och kontexten gör det tydligt.
Kontext stöder två lägen: generering och redigering.
| 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 |
Vissa kommandon antyder förändringar som överskrider redigerings-API:ets gränser. När detta upptäcks erbjuder systemet en reservlösning:
| 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-feedback hjälper användare att följa systemets status:
| 1 | function updateUI(state) { |
| 2 | switch(state) { |
| 3 | case 'listening': ... |
| 4 | case 'processing': ... |
| 5 | case 'generating': ... |
| 6 | case 'ready': ... |
| 7 | } |
| 8 | } |
| 9 |
Naturlig konversation kräver naturlig timing:
| 1 | if (Math.random() > 0.7) { |
| 2 | setTimeout(() => { |
| 3 | queueAudioResponse("Want me to change anything about it?"); |
| 4 | }, 3000); |
| 5 | } |
| 6 |
För att bevara kontext lagras sessionsdata:
| 1 | const saveState = () => { ... }; |
| 2 | const restoreState = () => { ... }; |
| 3 |
För att säkerställa responsivitet:
Konversationsgränssnitt öppnar dörren för nya möjligheter:
Att bygga Vibe Draw avslöjade flera kärnprinciper för röstförst verktyg:
Vibe Draw visar vad som händer när konversationell röst-AI möter visuell kreativitet. ElevenLabs’ naturliga talsyntes och FLUX Kontext’s bild-API:er kombineras för att skapa ett nytt sätt att skapa—inga klick, inga reglage—bara tal.
När skapande är lika enkelt som att beskriva, tar vi bort barriärerna mellan fantasi och utförande.
Den kompletta källkoden finns tillgänglig på GitHub. För att köra din egen version:
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.
Drivs av ElevenLabs Conversational AI
.webp&w=3840&q=95)