Vibe Draw kombiniert die Voice-KI von ElevenLabs mit FLUX Kontext für sprachgesteuerte Bilderstellung.
.webp&w=3840&q=95)
Sprachschnittstellen verändern, wie wir mit KI kommunizieren. Was wäre, wenn das Erstellen eines Bildes so einfach wäre, wie es laut zu beschreiben?
Das ist die Idee, die mich dazu brachte, Vibe Draw als Wochenendprojekt zu entwickeln. Es ist ein sprachgesteuertes Kreativwerkzeug, das ElevenLabs’ Voice AI mit FLUX Kontext von Black Forest Labs kombiniert, um gesprochene Eingaben in Bilder zu verwandeln.
FLUX Kontext repräsentiert eine neue Klasse von Bildmodellen. Im Gegensatz zu traditionellen Text-zu-Bild-Systemen beherrscht Kontext sowohl die Erstellung als auch die Bearbeitung. Es kann neue Bilder aus Eingaben erstellen, bestehende ändern und sogar mehrere Referenzbilder zu einem einzigen Ergebnis zusammenführen.
Während Modelle wie GPT-4o und Gemini 2 Flash multimodale Fähigkeiten bieten, ist FLUX Kontext speziell für hochwertige visuelle Manipulationen entwickelt. In Tests konnte ich einzelne Buchstaben in stilisiertem Text ändern oder ein Objekt neu positionieren – nur durch Beschreibung der Änderung.
Da dachte ich: „Warum nicht mit Sprache?“ Und was wäre eine bessere Grundlage als die leistungsstarke Sprachtechnologie von ElevenLabs?
.webp&w=3840&q=95)
Der Aufbau eines sprachgesteuerten Bildsystems erforderte die Lösung von fünf Schlüsselproblemen:
Vibe Draw läuft vollständig clientseitig und integriert folgende Komponenten:
Dieser Ansatz hält den Prototyp leichtgewichtig, aber für Produktionseinsätze sollten Anfragen serverseitig weitergeleitet werden, um Sicherheit zu gewährleisten.
Vibe Draw nutzt die Text-to-Speech API von ElevenLabs, abgestimmt auf konversationelle Reaktionsfähigkeit:
| 1 | const voiceSettings = { |
| 2 | model_id: "eleven_turbo_v2", |
| 3 | voice_settings: { |
| 4 | stability: 0.5, |
| 5 | similarity_boost: 0.75 |
| 6 | } |
| 7 | }; |
| 8 |
Um Vielfalt zu schaffen, werden Sprachantworten zufällig aus vordefinierten Vorlagen ausgewählt:
| 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 |
Überlappende Sprachantworten zerstören die Illusion eines Gesprächs. Vibe Draw löst dies mit einem Audio-Warteschlangensystem:
| 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 |
Jede Nachricht wird vollständig abgespielt, bevor die nächste ausgelöst wird.
Das System verwendet Schlüsselwort- und Kontexterkennung, um zu entscheiden, ob eine Benutzereingabe eine neue Bildanfrage oder eine Bearbeitung ist:
| 1 | const editKeywords = [ ... ]; |
| 2 | const contextualEditPhrases = [ ... ]; |
| 3 | |
| 4 | if (currentImage && (hasEditKeyword || hasContextClue)) { |
| 5 | await handleEditRequest(text); |
| 6 | } else { |
| 7 | await handleGenerateRequest(text); |
| 8 | } |
| 9 |
Dieser Ansatz stellt sicher, dass Bearbeitungen nur angewendet werden, wenn ein bestehendes Bild vorhanden ist und der Kontext dies klar macht.
Kontext unterstützt zwei Modi: Generierung und Bearbeitung.
| 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 |
Einige Eingaben implizieren Änderungen, die die Grenzen der Bearbeitungs-API überschreiten. Bei Erkennung bietet das System eine Alternative:
| 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 hilft Benutzern, den Status des Systems zu verfolgen:
| 1 | function updateUI(state) { |
| 2 | switch(state) { |
| 3 | case 'listening': ... |
| 4 | case 'processing': ... |
| 5 | case 'generating': ... |
| 6 | case 'ready': ... |
| 7 | } |
| 8 | } |
| 9 |
Natürliche Konversation erfordert natürliches Timing:
| 1 | if (Math.random() > 0.7) { |
| 2 | setTimeout(() => { |
| 3 | queueAudioResponse("Want me to change anything about it?"); |
| 4 | }, 3000); |
| 5 | } |
| 6 |
Um den Kontext zu bewahren, werden Sitzungsdaten gespeichert:
| 1 | const saveState = () => { ... }; |
| 2 | const restoreState = () => { ... }; |
| 3 |
Um Reaktionsfähigkeit sicherzustellen:
Konversationelle Benutzeroberflächen eröffnen neue Möglichkeiten:
Beim Aufbau von Vibe Draw wurden mehrere Kernprinzipien für sprachgesteuerte Werkzeuge deutlich:
Vibe Draw zeigt, was passiert, wenn konversationelle Sprach-KI auf visuelle Kreativität trifft. Die natürliche Sprachsynthese von ElevenLabs und die Bild-APIs von FLUX Kontext schaffen eine neue Art des Schaffens – ohne Klicks, ohne Schieberegler – nur Sprache.
Wenn das Erstellen so einfach ist wie das Beschreiben, beseitigen wir die Barrieren zwischen Vorstellungskraft und Ausführung.
Der vollständige Quellcode ist auf GitHub verfügbar. Um Ihre eigene Version auszuführen:
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.
Bereitgestellt von ElevenLabs Konversationelle KI
.webp&w=3840&q=95)