launch-week

发布周第 3 天 - 语音模式 🎙️

今天，我们很高兴向您介绍 Langflow 中的一项很酷的新功能：语音模式！🎤 这项新功能允许您与任何 Langflow 流程进行自然的、基于语音的对话。

David Jones-Gilardi

2025年4月2日 — 阅读时长 4 分钟

今天，我们很高兴向您介绍 Langflow 中的一项很酷的新功能：语音模式！🎤

这项新功能允许您与任何 Langflow 流程进行自然的、基于语音的对话。此功能仍在积极开发中，我们期待您试用并分享您的见解。

让我们深入了解如何操作。

工作原理

首先，前往 Langflow 界面的 Playground。您可以在任何流程的 Langflow UI 右上角找到它。

在您的聊天窗口右下角，您会看到一个闪亮的新麦克风图标。🎙️

单击麦克风图标，系统会提示您输入您的 OpenAI API 密钥。输入您的密钥并点击保存。

（此功能由 OpenAI 的语音聊天技术提供支持。一旦输入并保存您的密钥，它将成为 Langflow 中的全局变量，可从任何组件或流程访问）

设置您的语音聊天

激活后，会出现一个配置对话框。

在这里，您可以

选择语音

语音聊天提供 OpenAI 的一组默认语音，但您可以通过输入 ElevenLabs API 密钥来使用 ElevenLabs 扩展此列表。（与上面输入 OpenAI 密钥类似，输入 ElevenLabs 密钥并点击离开后，它将存储在全局变量中）

选择音频输入

选择您偏好的音频输入。请注意，更高质量的麦克风将提高 OpenAI 语音聊天的理解能力。

选择您的语言

选择英语、意大利语、法语、西班牙语或德语以增强语音识别。您还可以要求您的代理使用多种语言与您交流。

开始聊天

配置完成后，即可开始讲话。您的语音代理可以执行您的普通代理可以执行的任何操作。但是，在此初始版本中，您应该注意一些注意事项。

在代理流程中使用语音模式时，请使用非常具有描述性的工具名称和描述。这是确保代理直接从工具本身准确了解工具是什么以及它能做什么的关键，这与第二点相关联。（为了获得最佳的代理体验，您也应该这样做）
语音代理不使用您流程中定义的相同代理指令，这是上面第一点重要的原因之一。如果您有自定义代理指令，请不要指望它会遵循这些指令。
语音模式只在您所在的对话会话中保留上下文。如果您退出对话并关闭 Playground，下次您开始聊天时它将不会记住您的对话。

在您的应用中使用语音模式

能够从 Playground 与您的代理聊天是一回事，但直接与您自己的应用聊天则更好。新的语音模式带有一个位于 /api/v1/voice/ws/flow_tts 的 websocket 端点，允许您直接与任何 Langflow 流程进行交互。

以下是一个使用 OpenAI 实时控制台 websocket 实现的示例。

左边是 Langflow，右边是控制台。您对控制台说话，您的声音会使用 OpenAI 的 TTS（文本转语音）服务进行转录，然后由您的 Langflow 工作流 flow_tts 端点处理。

以下是用于访问 Langflow 的完整构建的 websocket 端点示例

ws://127.0.0.1:7860/api/v1/voice/ws/flow_tts/cc624f50-c695-4e25-bd83-e4497f5cbd1a/relay-session

（在上面的示例中，cc624f50-c695-4e25-bd83-e4497f5cbd1a 是我们 Langflow 代理的流程 ID）

OpenAI 实时控制台带有一个中继器，您可以修改它以使用您自己的服务器。

以下是一个配置为与 Langflow 流程通信的基本实现的片段

/ relay.js - WebSocket relay server for text-to-speech functionality
import { WebSocketServer, WebSocket as NodeWebSocket } from 'ws';
import { v4 as uuidv4 } from 'uuid';
/**
 * RealtimeRelay - Manages WebSocket connections between a frontend client and Langflow backend
 * Primarily handles text-to-speech (TTS) functionality with message queueing and audio response handling
 */
export class RealtimeRelay {
  constructor({
    flowId = 'cc624f50-c695-4e25-bd83-e4497f5cbd1a',
    sessionId = 'relay-session',
    host = '127.0.0.1',
    port = 7860,
    path = '/api/v1/voice/ws/flow_tts',
    pingInterval = 30000,
    maxQueueSize = 100
  } = {}) {
    // Connection details
    this.flowId = flowId;
    this.sessionId = sessionId;
    this.path = path;
    
    // Construct backend URL with protocol detection
    const protocol = host.includes('localhost') || host.includes('127.0.0.1') ? 'ws:' : 'wss:';
    this.backendUrl = `${protocol}//${host}:${port}${path}/${this.flowId}/${this.sessionId}`;
    console.log('🔌 Connecting to backend at:', this.backendUrl);

完整的 relay.js 示例

要使用此示例，请克隆 OpenAI 实时控制台，按照设置说明操作，然后使用您的流程 ID 之一替换上面默认的 relay.js 为此处的示例。