Tworzenie Vibe Draw: połączenie 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:

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 korzysta z ElevenLabs

const voiceSettings = {
    model_id: "eleven_turbo_v2",
    voice_settings: {
        stability: 0.5,
        similarity_boost: 0.75
    }
};

Aby stworzyć różnorodność, odpowiedzi głosowe są losowo wybierane z predefiniowanych szablonów:

const responses = {
    generating: [
        "Ooh, I love that idea! Let me bring it to life...",
        "That sounds awesome! Creating it now...",
        "Great description! Working on it..."
    ],
    editing: [
        "Got it! Let me tweak that for you...",
        "Sure thing! Making those changes...",
        "No problem! Adjusting it now..."
    ]
};

function getRandomResponse(type) {
    const options = responses[type];
    return options[Math.floor(Math.random() * options.length)];
}

Zarządzanie odtwarzaniem audio

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

let audioQueue = [];
let isPlayingAudio = false;

async function queueAudioResponse(text) {
    audioQueue.push(text);
    if (!isPlayingAudio) {
        playNextAudio();
    }
}

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:

const editKeywords = [ ... ];
const contextualEditPhrases = [ ... ];

if (currentImage && (hasEditKeyword || hasContextClue)) {
    await handleEditRequest(text);
} else {
    await handleGenerateRequest(text);
}

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)

const 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"
    })
});

Edycja (transformacja kontekstowa)

const 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
    })
});

Obsługa skomplikowanych transformacji

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

if (hasSignificantChange) {
    try {
        const enhanced = instruction + ", maintain composition but apply requested changes";
        await editImage(enhanced);
    } catch {
        queueAudioResponse("That's quite a transformation! Would you like me to create a fresh image instead?");
    }
}

Optymalizacja doświadczenia

Progresywna informacja zwrotna

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

function updateUI(state) {
    switch(state) {
        case 'listening': ...
        case 'processing': ...
        case 'generating': ...
        case 'ready': ...
    }
}

Inteligentne wyczucie czasu

Naturalna rozmowa wymaga naturalnego wyczucia czasu:

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

Stan sesji

Aby zachować kontekst, dane sesji są przechowywane:

const saveState = () => { ... };
const restoreState = () => { ... };

Rozważania dotyczące wydajności

Aby zapewnić responsywność:

• Ładowanie na żądanie — 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 AIElevenLabs Conversational AI lub napisz do nasnapisz do nas.