Vibe Draw łączy głosowe AI od ElevenLabs z FLUX Kontext do tworzenia obrazów za pomocą głosu.
.webp&w=3840&q=95)
Interfejsy głosowe zmieniają sposób, w jaki komunikujemy się z AI. A co, gdyby tworzenie obrazu było tak proste, jak jego opisanie na głos?
To pomysł, który doprowadził mnie do stworzenia Vibe Draw jako weekendowego projektu. To narzędzie kreatywne, które łączy głos AI od ElevenLabs z FLUX Kontext od Black Forest Labs, aby zamieniać wypowiedziane polecenia w obrazy.
FLUX Kontext reprezentuje nową klasę modelu obrazów. W przeciwieństwie do tradycyjnych systemów tekst-obraz, Kontext obsługuje zarówno generowanie, jak i edycję. Może tworzyć nowe obrazy z poleceń, modyfikować istniejące i nawet łączyć wiele obrazów referencyjnych w jeden.
Podczas gdy modele takie jak GPT-4o i Gemini 2 Flash oferują możliwości multimodalne, FLUX Kontext jest stworzony do wysokiej jakości manipulacji wizualnej. W testach mogłem zmieniać pojedyncze litery w stylizowanym tekście lub przemieszczać obiekt — tylko opisując zmianę.
Wtedy pomyślałem: „Dlaczego nie zrobić tego głosem?” A co lepsze niż potężna technologia głosowa ElevenLabs?
.webp&w=3840&q=95)
Budowa systemu obrazów sterowanego głosem wymagała rozwiązania pięciu kluczowych problemów:
Vibe Draw działa całkowicie po stronie klienta i integruje następujące komponenty:
To podejście utrzymuje prototyp lekki, ale wdrożenia produkcyjne powinny proxy'ować żądania po stronie serwera dla bezpieczeństwa.
Vibe Draw używa API zamiany tekstu na mowę od ElevenLabs, dostosowanego do responsywności konwersacyjnej:
| 1 | const voiceSettings = { |
| 2 | model_id: "eleven_turbo_v2", |
| 3 | voice_settings: { |
| 4 | stability: 0.5, |
| 5 | similarity_boost: 0.75 |
| 6 | } |
| 7 | }; |
| 8 |
Aby stworzyć różnorodność, odpowiedzi głosowe są losowo wybierane z predefiniowanych szablonów:
| 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 |
Nakładające się odpowiedzi głosowe psują iluzję rozmowy. Vibe Draw rozwiązuje to za pomocą systemu kolejki 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 |
Każda wiadomość odtwarzana jest w całości przed uruchomieniem następnej.
System używa wykrywania słów kluczowych i kontekstu, aby zdecydować, czy polecenie użytkownika to nowe żądanie obrazu, czy edycja:
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (currentImage && (hasEditKeyword || hasContextClue)) { |
| 5 | await handleEditRequest(text); |
| 6 | } else { |
| 7 | await handleGenerateRequest(text); |
| 8 | } |
| 9 |
To podejście zapewnia, że edycje są stosowane tylko wtedy, gdy istnieje obraz i kontekst to wyjaśnia.
Kontext obsługuje dwa tryby: generowanie i edycję.
| 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 |
Niektóre polecenia sugerują zmiany, które przekraczają limity API edycji. Gdy zostaną wykryte, system oferuje alternatywę:
| 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 |
Informacje zwrotne w UI pomagają użytkownikom śledzić stan systemu:
| 1 | function updateUI(state) { |
| 2 | switch(state) { |
| 3 | case 'listening': ... |
| 4 | case 'processing': ... |
| 5 | case 'generating': ... |
| 6 | case 'ready': ... |
| 7 | } |
| 8 | } |
| 9 |
Naturalna rozmowa wymaga naturalnego wyczucia czasu:
| 1 | if (Math.random() > 0.7) { |
| 2 | setTimeout(() => { |
| 3 | queueAudioResponse("Want me to change anything about it?"); |
| 4 | }, 3000); |
| 5 | } |
| 6 |
Aby zachować kontekst, dane sesji są przechowywane:
| 1 | const saveState = () => { ... }; |
| 2 | const restoreState = () => { ... }; |
| 3 |
Aby zapewnić responsywność:
Konwersacyjne interfejsy otwierają drzwi do nowych możliwości:
Budowa Vibe Draw ujawniła kilka kluczowych zasad dla narzędzi głosowych:
Vibe Draw pokazuje, co się dzieje, gdy konwersacyjny głos AI spotyka się z kreatywnością wizualną. Naturalna synteza mowy ElevenLabs i API obrazów FLUX Kontext tworzą nowy sposób tworzenia — bez kliknięć, bez suwaków — tylko mowa.
Gdy tworzenie jest tak proste, jak opisanie, usuwamy bariery między wyobraźnią a realizacją.
Pełny kod źródłowy jest dostępny na GitHub. Aby uruchomić własną wersję:
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.
Napędzane przez ElevenLabs Conversational AI
.webp&w=3840&q=95)