Vibe DrawはElevenLabsの音声AIとFLUX Kontextを組み合わせ、音声で画像を作成します。
.webp&w=3840&q=95)
音声インターフェースはAIとのコミュニケーションを変えています。画像を作成するのが声で説明するだけで済むとしたらどうでしょう？
それが週末プロジェクトとしてVibe Drawを作成するきっかけとなりました。これは音声を優先したクリエイティブツールで、ElevenLabsの音声AIとBlack Forest LabsのFLUX Kontextを組み合わせ、音声プロンプトを画像に変換します。
FLUX Kontextは新しいクラスの画像モデルを表しています。従来のテキストから画像へのシステムとは異なり、Kontextは生成と編集の両方を処理します。プロンプトから新しい画像を作成したり、既存のものを修正したり、複数の参照画像を1つの出力に統合することができます。
GPT-4oやGemini 2 Flashのようなモデルがマルチモーダル機能を提供する一方で、FLUX Kontextは高品質なビジュアル操作のために特化されています。テストでは、スタイライズされたテキストの個々の文字を変更したり、オブジェクトの位置を変更したりすることができました—ただ変更を説明するだけで。
その時に思ったのです：「これを音声でやってみたらどうだろう？」そしてElevenLabsの強力な音声技術以上の基盤はありません。
.webp&w=3840&q=95)
音声駆動の画像システムを構築するには、5つの主要な問題を解決する必要がありました：
Vibe Drawは完全にクライアントサイドで動作し、以下のコンポーネントを統合しています：
このアプローチによりプロトタイプは軽量に保たれますが、本番環境ではセキュリティのためにサーバーサイドでリクエストをプロキシするべきです。
Vibe DrawはElevenLabsのテキスト読み上げAPIを使用し、会話の応答性に調整されています：
| 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 |
重複する音声応答は会話の錯覚を壊します。Vibe Drawはオーディオキューシステムでこれを解決します：
| 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 |
このアプローチにより、既存の画像があり、コンテクストが明確な場合にのみ編集が適用されることを保証します。
Kontextは生成と編集の2つのモードをサポートしています。
| 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 |
一部のプロンプトは編集APIの限界を超える変更を示唆します。検出された場合、システムはフォールバックを提供します：
| 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フィードバックはユーザーがシステムの状態を追跡するのを助けます：
| 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 |
応答性を確保するために：
会話型UIは新しい機能への扉を開きます：
Vibe Drawの構築は、音声優先ツールのいくつかの基本原則を明らかにしました：
Vibe Drawは、会話型音声AIが視覚的創造性と出会うと何が起こるかを示しています。ElevenLabsの自然な音声合成とFLUX Kontextの画像APIが組み合わさり、クリックもスライダーも不要で、ただ音声で作成する新しい方法を生み出します。
作成が説明するだけで簡単になると、想像力と実行の間の障壁が取り除かれます。
完全なソースコードはGitHubで利用可能です。自分のバージョンを実行するには：
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.
Powered by ElevenLabs 会話型AI
.webp&w=3840&q=95)