Black Friday
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:
On November 11, 2025, San Francisco became the epicentre of innovation as the ElevenLabs 11/11 Summit brought together leaders, creators, and advocates shaping the future of voice-first technology. Among the presenters was Yvonne Johnson, a passionate Motor Neurone Disease (ALS) advocate, who lives with ALS herself and has lost her natural voice to this condition.
Expanding access and productivity with voice-first AI
Drivs av ElevenLabs Agenter
.webp&w=3840&q=95)