Pomiń
BlogDeweloper

Tworzenie Vibe Draw: połączenie ElevenLabs z FLUX Kontext do tworzenia obrazów za pomocą głosu

Autorzy
A man with glasses and a beard looking to the side in a room with bookshelves.
Ryan Morrison, Growth

Vibe Draw łączy głosowe AI od ElevenLabs z FLUX Kontext do tworzenia obrazów za pomocą głosu.

Vibe Draw
Skontaktuj się z działem sprzedażyConversational AI

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?

Vibe Draw

Techniczne wyzwanie

Budowa systemu obrazów sterowanego głosem wymagała rozwiązania pięciu kluczowych problemów:

  1. Zrozumienie języka naturalnego — Rozróżnianie między nowym tworzeniem a edycjami
  2. Świadomość kontekstowa — Utrzymywanie ciągłości w interakcjach
  3. Zarządzanie audio — Unikanie nakładających się odpowiedzi i zarządzanie kolejkami
  4. Generowanie wizualne — Płynne przejścia między generowaniem a edycją
  5. Doświadczenie użytkownika — Sprawienie, by zaawansowane interakcje AI były intuicyjne

Przegląd architektury

Vibe Draw działa całkowicie po stronie klienta i integruje następujące komponenty:

  • Web Speech API do rozpoznawania mowy
  • ElevenLabs TTS API do odpowiedzi głosowych
  • FLUX Kontext API do generowania i edycji obrazów
  • Wykrywanie intencji do rozumienia danych wejściowych użytkownika

To podejście utrzymuje prototyp lekki, ale wdrożenia produkcyjne powinny proxy'ować żądania po stronie serwera dla bezpieczeństwa.

Implementacja głosu z ElevenLabs

Vibe Draw używa API zamiany tekstu na mowę od ElevenLabs, dostosowanego do responsywności konwersacyjnej:

1const 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:

1const 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
14function getRandomResponse(type) {
15 const options = responses[type];
16 return options[Math.floor(Math.random() * options.length)];
17}
18

Zarządzanie odtwarzaniem audio

Nakładające się odpowiedzi głosowe psują iluzję rozmowy. Vibe Draw rozwiązuje to za pomocą systemu kolejki audio:

1let audioQueue = [];
2let isPlayingAudio = false;
3
4async 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.

Wykrywanie intencji i zarządzanie kontekstem

System używa wykrywania słów kluczowych i kontekstu, aby zdecydować, czy polecenie użytkownika to nowe żądanie obrazu, czy edycja:

1const editKeywords