Przedstawiamy Eleven v3 Alpha

Wypróbuj v3
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 = [ ... ];
2const contextualEditPhrases = [ ... ];
3
4if (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.

Generowanie obrazów z FLUX Kontext

Image generated with Flux

Kontext obsługuje dwa tryby: generowanie i edycję.

Generowanie (tekst na obraz)

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

Edycja (transformacja kontekstowa)

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

Obsługa skomplikowanych transformacji

Niektóre polecenia sugerują zmiany, które przekraczają limity API edycji. Gdy zostaną wykryte, system oferuje alternatywę:

1if (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

Optymalizacja doświadczenia

Progresywna informacja zwrotna

Informacje zwrotne w UI pomagają użytkownikom śledzić stan systemu:

1function updateUI(state) {
2 switch(state) {
3 case 'listening': ...
4 case 'processing': ...
5 case 'generating': ...
6 case 'ready': ...
7 }
8}
9

Inteligentne wyczucie czasu

Naturalna rozmowa wymaga naturalnego wyczucia czasu:

1if (Math.random() > 0.7) {
2 setTimeout(() => {
3 queueAudioResponse("Want me to change anything about it?");
4 }, 3000);
5}
6

Stan sesji

Aby zachować kontekst, dane sesji są przechowywane:

1const saveState = () => { ... };
2const restoreState = () => { ... };
3

Rozważania dotyczące wydajności

Aby zapewnić responsywność:

  • Lazy loading — Inicjalizuj API tylko wtedy, gdy są potrzebne
  • Debouncing — Ograniczaj żądania API na interakcję
  • Obsługa błędów — Odzyskuj płynność po timeoutach lub awariach
  • Czyszczenie zasobów — Prawidłowo usuwaj obiekty audio i nasłuchiwacze zdarzeń

Co dalej

Konwersacyjne interfejsy otwierają drzwi do nowych możliwości:

  • Wielomodalne wejście — „Spraw, by wyglądało bardziej jak to zdjęcie.”
  • Sesje współpracy — Wielu użytkowników współtworzących jeden projekt
  • Pamięć stylu — System uczy się twojej estetyki z czasem
  • Streaming w czasie rzeczywistym — Streamuj aktualizacje obrazów, gdy użytkownik mówi i integruj Conversational AI aby umożliwić strumieniowanie mowy.

Kluczowe wnioski

Budowa Vibe Draw ujawniła kilka kluczowych zasad dla narzędzi głosowych:

  1. Kontekst to wszystko — Śledzenie stanu sprawia, że interakcje są spójne
  2. Czas dodaje osobowości — Tempo odpowiedzi sprawia, że AI wydaje się responsywne
  3. Alternatywy utrzymują dynamikę — Gdy generowanie zawodzi, oferuj alternatywy
  4. Różnorodność utrzymuje świeżość — Powtarzanie tej samej frazy psuje immersję

Podsumowanie

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ą.

Wypróbuj sam

Pełny kod źródłowy jest dostępny na GitHub. Aby uruchomić własną wersję:

  1. Sklonuj repozytorium
  2. Dodaj swój klucz API ElevenLabs
  3. Dodaj swój klucz API FAL.ai
  4. Otwórz vibe-draw-v2.html w nowoczesnej przeglądarce
  5. Kliknij mikrofon i zacznij tworzyć

    Zainteresowany stworzeniem własnego doświadczenia głosowego? Odkryj ElevenLabs Conversational AI lub napisz do nas.

Przeglądaj artykuły zespołu ElevenLabs

ElevenLabs

Twórz z najwyższą jakością dźwięku AI

Zacznij za darmo

Masz już konto? Zaloguj się