跳到内容
登录注册
联系销售团队登录
博客ElevenAPI

打造 Vibe Draw：结合 ElevenLabs 与 FLUX Kontext，实现语音驱动的图像创作

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

Vibe Draw 将 ElevenLabs 的语音 AI 与 FLUX Kontext 结合，实现语音驱动的图像创作。

Vibe Draw
了解更多联系销售对话式 AI

语音交互正在改变我们与 AI 的沟通方式。如果只需开口描述，就能生成一张图片，会怎样？

这正是我用周末时间开发 Vibe Draw 的初衷。它是一款以语音为主的创意工具，将 ElevenLabs 的语音 AI 与 Black Forest Labs 的 FLUX Kontext 结合，把语音提示转为图像。

FLUX Kontext 是新一代图像模型。与传统文本转图像系统不同，Kontext 既能生成，也能编辑图像。它可以根据提示生成新图像，修改已有图像，甚至将多张参考图合成为一张。

虽然 GPT-4o 和 Gemini 2 Flash 等模型具备多模态能力，但 FLUX Kontext 专为高质量视觉编辑设计。测试中，我只需描述变化，就能修改特定文字或移动物体。

于是我想到：“为什么不用语音来做这些？”而 ElevenLabs 强大的语音技术正是理想基础。

Vibe Draw

技术挑战

要构建语音驱动的图像系统，需要解决五个核心问题：

  1. 自然语言理解 — 区分新建与编辑
  2. 上下文感知 — 保持多轮交互的连贯性
  3. 音频管理 — 避免语音重叠，管理播放队列
  4. 图像生成 — 生成与编辑无缝切换
  5. 用户体验 — 让高级 AI 交互变得直观易用

架构概览

Vibe Draw 完全在本地运行，集成以下组件：

  • Web Speech API 进行语音识别
  • ElevenLabs TTS API 生成语音回复
  • FLUX Kontext API 生成和编辑图像
  • 自定义意图识别 理解用户输入

这种方式让原型更轻量，但正式上线时建议通过服务端代理请求以保证安全。

用 ElevenLabs 实现语音交互

Vibe Draw 使用 ElevenLabs 的 文本转语音 API，专为对话响应优化：

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

为增加多样性，语音回复会从预设模板中随机选择：

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

音频播放管理

语音回复重叠会破坏对话体验。Vibe Draw 通过音频队列系统解决：

let audioQueue = [];
let isPlayingAudio = false;

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

每条消息播放完毕后才会触发下一条。

意图识别与上下文管理

系统通过关键词和上下文判断用户提示是新建图像还是编辑：

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

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

这样只有在已有图像且上下文明确时才会执行编辑。

用 FLUX Kontext 生成图像

Image generated with Flux

Kontext 支持两种模式：生成和编辑。

生成（文本转图像）

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

编辑（上下文变换）

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

处理复杂变换

有些提示涉及超出编辑 API 能力的变更。检测到时，系统会提供备用方案：

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

优化体验

渐进式反馈

UI 反馈帮助用户了解系统状态：

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

智能时机控制

自然对话需要自然的节奏：

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

会话状态

为保持上下文，会话数据会被存储：

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

性能优化

为保证响应速度：

  • 按需加载 — 仅在需要时初始化 API
  • 防抖处理 — 限制每次交互的 API 请求次数
  • 错误处理 — 超时或失败时平滑恢复
  • 资源清理 — 正确释放音频对象和事件监听

后续展望

对话式界面带来更多可能：

  • 多模态输入 — “让它更像这张照片”
  • 协作会话 — 多人共同参与同一设计
  • 风格记忆 — 系统会逐步学习你的审美偏好
  • 实时流式处理 — 用户说话时实时更新图像，并集成 对话式 AI ，实现语音流式输出。

核心要点

开发 Vibe Draw 总结出语音优先工具的几个核心原则：

  1. 上下文至关重要 — 跟踪状态让交互更连贯
  2. 节奏赋予个性 — 合理节奏让 AI 更有回应感
  3. 备用方案保持流畅 — 生成失败时及时提供替代选项
  4. 多样性避免单调 — 重复同一句话会影响沉浸感

结语

Vibe Draw 展示了对话式语音 AI 与视觉创意结合的可能。ElevenLabs 的自然语音合成与 FLUX Kontext 的图像 API 结合，带来全新创作方式——无需点击，无需滑块，只需说话即可。

当创作变得像描述一样简单，想象与实现之间的障碍就被消除了。

亲自试试

完整源码已 发布在 GitHub。运行方法：

  1. 克隆代码库
  2. 添加 ElevenLabs API 密钥
  3. 添加 FAL.ai API 密钥
  4. 用现代浏览器打开 vibe-draw-v2.html
  5. 点击麦克风开始创作

    想打造自己的语音优先体验？欢迎了解 ElevenLabs 对话式 AI 或 联系我们.

查看更多 ElevenLabs 团队的文章

用高质量 AI 音频创作

联系销售团队注册