Poznaj Eleven Music. Stwórz idealną piosenkę na każdą okazję.

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

3 cze 2025 • 5 minut czytania

A man with glasses and a beard looking to the side in a room with bookshelves.

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

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?

Techniczne wyzwanie

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

Zrozumienie języka naturalnego — Rozróżnianie między nowym tworzeniem a edycjami
Świadomość kontekstowa — Utrzymywanie ciągłości w interakcjach
Zarządzanie audio — Unikanie nakładających się odpowiedzi i zarządzanie kolejkami
Generowanie wizualne — Płynne przejścia między generowaniem a edycją
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

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', {
  ...
  body: JSON.stringify({
      prompt: enhancedPrompt,
      guidance_scale: 3.5,
      num_images: 1,
      safety_tolerance: "2",
      output_format: "jpeg"
  })
10});
11

Edycja (transformacja kontekstowa)

1const response = await fetch('https://fal.run/fal-ai/flux-pro/kontext', {
  ...
  body: JSON.stringify({
      prompt: instruction,
      image_url: currentImage,
      guidance_scale: 3.5,
      num_images: 1
  })
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:

Kontekst to wszystko — Śledzenie stanu sprawia, że interakcje są spójne
Czas dodaje osobowości — Tempo odpowiedzi sprawia, że AI wydaje się responsywne
Alternatywy utrzymują dynamikę — Gdy generowanie zawodzi, oferuj alternatywy
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ę:

Sklonuj repozytorium
Dodaj swój klucz API ElevenLabs
Dodaj swój klucz API FAL.ai
Otwórz vibe-draw-v2.html w nowoczesnej przeglądarce
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

Product

Product

GPT-5 Available in ElevenLabs Conversational AI

Agents in ElevenLabs Conversational AI can now use GPT-5 for reasoning

Research

Research

Eleven Music is Here

Studio-grade music generated with natural language prompts in any style and for countless uses

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

Zacznij za darmo

Masz już konto? Zaloguj się

1	const voiceSettings = {
2	model_id: "eleven_turbo_v2",
3	voice_settings: {
4	stability: 0.5,
5	similarity_boost: 0.75
6	}
7	};
8

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

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

1	const editKeywords = [ ... ];
2	const contextualEditPhrases = [ ... ];
3
4	if (currentImage && (hasEditKeyword \|\| hasContextClue)) {
5	await handleEditRequest(text);
6	} else {
7	await handleGenerateRequest(text);
8	}
9

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

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

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

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

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