尧图网站建设 
fastrtc 实战Llama Code Editor——用语音驱动单文件 HTML 应用生成的完整实现剖析【免费下载链接】fastrtcThe python library for real-time communication项目地址: https://gitcode.com/GitHub_Trending/fa/fastrtc导读本文以demo/llama_code_editor/为研究对象剖析一个基于 fastrtc Gradio-WebRTC 构建的语音交互式编码 Demo用户对着麦克风说出需求系统自动完成语音识别 → Llama 生成/修改单文件 HTML 应用 → 沙箱实时预览的完整闭环。读完本文你将掌握 fastrtc 的Stream/ReplyOnPause语音流处理范式、AdditionalOutputs多输出机制、Twilio TURN 凭据接入以及如何把该 Demo 一键部署到 Hugging Face Space 并支持网页与手机双端访问。一、项目定位Create interactive HTML web pages with your voiceLlama Code Editor 是 fastrtc 仓库README.md中一个极具代表性的语音 Agent Demo。其官方一句话描述是Create interactive HTML web pages with your voice用你的语音创建交互式 HTML 网页核心目标非常聚焦用户只说一句话例如做一个番茄钟页面或把按钮改成圆角系统就能生成或修改一个单文件 HTML 应用生成的代码会立即渲染到界面的Sandbox 沙箱中所见即所得会话附带多轮历史上下文支持对已有代码持续迭代修改。该 Demo 的技术组合为Gradio WebRTCfastrtc采集语音 → Groq 的 whisper-large-v3-turbo 做语音转写 → SambaNova 托管的 Meta-Llama-3.1-70B-Instruct 生成 HTML → iframe data URI 沙箱预览完整演示了 fastrtc 在音频输入 多路附加输出 流式处理场景下的标准写法。二、README 元数据解读Hugging Face Space 配置骨架demo/llama_code_editor/README.md本质上是一份Hugging Face Space 配置文件YAML front matter它决定了该 Demo 在 HF Space 上的构建与运行方式。逐项拆解如下字段值含义titleLlama Code EditorSpace 展示标题emojiSpace 头像 emoji对应项目使用的 Llama 模型colorFrom/colorToindigo / pinkSpace 卡片渐变色sdkgradio使用 Gradio SDK 构建界面sdk_version5.16.0锁定 Gradio 版本与 requirements.txt 中gradio5.16.0一致app_fileapp.pySpace 启动入口文件pinnedfalse是否置顶该 Spacelicensemit开源协议short_descriptionCreate interactive HTML web pages with your voiceSpace 的一句话描述tagswebrtc, websocket, gradio 4 个 secret 占位符Space 特性标签secret\|XXX声明该 Space 需要配置的密钥其中tags里的secret|TWILIO_ACCOUNT_SID、secret|TWILIO_AUTH_TOKEN、secret|SAMBANOVA_API_KEY、secret|GROQ_API_KEY是部署时必须填写的四个环境密钥详见下文第五节。这些字段与 app.py 中get_space()的运行时判断相互配合在 HF Space 上运行时自动启用 Twilio TURN 与 90 秒会话限制本地运行时则关闭。三、整体工作流从语音到 HTML 沙箱的完整链路结合 handler.py 与 ui.py 的源码该 Demo 的运行链路如下用户语音 → WebRTC 音频帧48kHz 单声道 → ReplyOnPause 静音检测Silero VAD → Groq whisper-large-v3-turbo 语音转写为文本 → system prompt 多轮历史 组装消息 → SambaNova Meta-Llama-3.1-70B-Instruct 生成/修改 HTML → 正则提取 !DOCTYPE html.../html 片段 → 双路输出Chatbot 追加对话记录 Sandbox 更新 HTML → iframe data URI 实时渲染预览三个文件各司其职app.py应用入口组装Stream、FastAPI 路由、三种启动模式handler.py核心业务逻辑语音转写、LLM 调用、HTML 提取与沙箱封装ui.pyGradio 界面布局麦克风组件、Sandbox/Code/Chat 三个标签页及其联动。四、核心源码走读4.1 入口文件 app.pyStream 组装与三模式启动app.py 用 fastrtc 的Stream装配整个应用stream Stream( handlerCodeHandler, modalityaudio, modesend-receive, concurrency_limit10 if get_space() else None, time_limit90 if get_space() else None, ) stream.ui uihandlerCodeHandler绑定由ReplyOnPause(generate)包装的语音处理器modalityaudio仅处理音频模态modesend-receive客户端发送音频、接收响应此处响应主要是附加输出而非音频concurrency_limit10、time_limit90仅在 HF Spaceget_space()为真时启用限制并发数与会话时长防止免费 Space 资源被耗尽——这也是 UI 中提示Each conversation is limited to 90 seconds的来源。启动部分通过环境变量MODE切换三种形态app.pyif (mode : os.getenv(MODE)) UI: stream.ui.launch(server_port7860, server_name0.0.0.0) elif mode PHONE: stream.fastphone(host0.0.0.0, port7860) else: import uvicorn uvicorn.run(app, host0.0.0.0, port7860)默认模式用uvicorn启动 FastAPI 应用根路径/会 302 重定向到/ui本地或 HF 线上地址MODEUI直接以 Gradio Blocks 方式启动适合本地调试界面MODEPHONE调用stream.fastphone(...)进入手机通话模式fastrtc 的 WebSocket 电话接入能力。4.2 handler.py语音驱动的代码生成核心handler.py 是整个 Demo 的大脑其关键设计如下。① 双模型客户端初始化groq_client Groq(api_keyos.environ.get(GROQ_API_KEY)) client openai.OpenAI( api_keyos.environ.get(SAMBANOVA_API_KEY), base_urlhttps://api.sambanova.ai/v1, )语音转写走Groqwhisper-large-v3-turbo速度极快代码生成走SambaNova托管的 OpenAI 兼容接口Meta-Llama-3.1-70B-Instruct密钥均通过环境变量注入且load_dotenv()支持.env文件。② Prompt 设计system_prompt You are an AI coding assistant. Your task is to write single-file HTML applications based on a users request. Only return the necessary code. Include all necessary imports and styles. You may also be asked to edit your original response. user_prompt Please write a single-file HTML application to fulfill the following request.\nThe message:{user_message}\nCurrent code you have written:{code}system prompt 明确约束模型只返回必要代码、包含所有 import 与样式并支持编辑原始回复多轮修改user prompt 同时注入本次语音转写文本user_message与当前已有代码code这是实现在已有基础上继续修改的关键history初始为[{role: system, content: system_prompt}]见 ui.py多轮对话整体作为上下文传给 LLM。③ 生成函数 generatefastrtc 多输出范式def generate(user_message: tuple[int, np.ndarray], history: list[dict], code: str): yield AdditionalOutputs(history, spinner_html) text groq_client.audio.transcriptions.create( file(audio-file.mp3, audio_to_bytes(user_message)), modelwhisper-large-v3-turbo, response_formatverbose_json, ).text user_msg_formatted user_prompt.format(user_messagetext, codecode) history.append({role: user, content: user_msg_formatted}) response client.chat.completions.create( modelMeta-Llama-3.1-70B-Instruct, messageshistory, temperature0.1, top_p0.1, ) output response.choices[0].message.content html_code extract_html_content(output) history.append({role: assistant, content: output}) yield AdditionalOutputs(history, html_code)值得注意的细节输入签名generate(user_message, history, code)的三个参数分别对应用户音频、对话状态、当前代码与ui.py中webrtc.stream(..., inputs[webrtc, history, code], ...)的输入列表一一对应yield AdditionalOutputs(...)两次产出第一次立即返回更新后的 history 加载动画 spinner让界面先呈现正在生成状态第二次在 LLM 响应后返回新 history 生成的 HTML。这正是 fastrtcAdditionalOutputs机制定义于 backend/fastrtc/utils.py的典型用法——handler 除了音频流外还能向 Gradio 组件推送任意附加数据audio_to_bytesbackend/fastrtc/utils.py把(sample_rate, np.ndarray)音频元组转成字节流再以(audio-file.mp3, ...)形式喂给 Groq 的音频转写 API低随机性参数temperature0.1, top_p0.1让代码生成更稳定、更少幻觉HTML 提取extract_html_content用正则!DOCTYPE html.*?/htmlDOTALL 模式从模型输出中截取完整 HTML 文档鲁棒地剥离可能的解释性文字。④ ReplyOnPause 包装与沙箱渲染CodeHandler ReplyOnPause(generate) def display_in_sandbox(code): encoded_html base64.b64encode(code.encode(utf-8)).decode(utf-8) data_uri fdata:text/html;charsetutf-8;base64,{encoded_html} return fiframe src{data_uri} width100% height600px/iframeReplyOnPause实现见 backend/fastrtc/reply_on_pause.py是 fastrtc 的语音流处理器它用 Silero VAD 模型持续分析音频块一旦检测到开始说话 → 停顿即把累积的语音交给fn执行。可配置参数AlgoOptions包括audio_chunk_duration0.6s、started_talking_threshold0.2s、speech_threshold0.1s等本 Demo 全部采用默认值display_in_sandbox将 HTML 做Base64 编码后塞进 data URI再包一层 iframe实现零后端依赖的纯前端沙箱渲染。4.3 ui.py三标签页界面与组件联动ui.py 构建了左侧麦克风 右侧三个标签页的布局麦克风列WebRTC(rtc_configurationget_twilio_turn_credentials() if get_space() else None, modesend, modalityaudio)——在 HF Space 上自动拉取 Twilio TURN 凭据backend/fastrtc/credentials.py以穿透 NAT/防火墙modesend表示客户端只上传音频Sandbox 标签页初始渲染assets/sandbox.htmlNo Application Created占位卡片Code 标签页gr.Code(languagehtml)只读展示当前生成的 HTML 源码Chat 标签页gr.Chatbot(typemessages)展示语音转写与回复记录。组件联动是理解本 Demo 界面逻辑的关键webrtc.stream( CodeHandler, inputs[webrtc, history, code], outputs[webrtc], time_limit90 if get_space() else None, concurrency_limit10 if get_space() else None, ) webrtc.on_additional_outputs( lambda history, code: (history, code, history), outputs[history, code, cb] ) code.change(display_in_sandbox, code, sandbox, queueFalse)webrtc.stream(...)把 WebRTC 音频流接到CodeHandler上webrtc.on_additional_outputs(...)见 backend/fastrtc/webrtc.py负责把 handler 每次yield的附加输出分发回 Gradio 组件第一项 history 更新history与聊天框cb第二项 code 更新code编辑器code.change(...)在代码更新后自动触发沙箱 iframe 重渲染形成生成 → 展示 → 预览的闭环。五、环境变量与密钥配置部署前需要准备四个环境变量对应 READMEtags中声明的 secrets环境变量用途获取方GROQ_API_KEY调用 Groq 的 whisper-large-v3-turbo 做语音转写Groq 控制台SAMBANOVA_API_KEY调用 SambaNova 托管的 Meta-Llama-3.1-70B-Instruct 生成代码SambaNova 控制台TWILIO_ACCOUNT_SID在 HF Space 上生成 TURN 凭据跨网络音频传输Twilio 控制台TWILIO_AUTH_TOKEN同上配套鉴权Twilio 控制台本地运行时可创建.env文件python-dotenv会自动加载见 handler.py部署到 HF Space 时在 Settings → Variables and secrets 中配置同名 secret 即可。注意本地运行时 Twilio 两个变量非必需get_space()为 False 时rtc_configurationNone走标准 WebRTC 直连而两个 API Key 在本地与线上都必需。六、依赖与安装依赖声明采用requirements.in源清单requirements.txtuv 编译锁定版双文件模式requirements.infastrtc[vad] # fastrtc 本体[vad] 额外引入 Silero VAD 所需依赖onnxruntime 等 groq # Groq 语音转写客户端 openai # SambaNova OpenAI 兼容接口客户端 python-dotenv # .env 加载 twilio # TURN 凭据获取requirements.txt由uv pip compile自动生成并锁定全部传递依赖版本fastrtc 0.0.2.post4、gradio 5.16.0、aiortc 1.10.1、twilio 9.4.5 等。安装方式pip install -r demo/llama_code_editor/requirements.txt或使用 uv 直接编译安装uv pip compile demo/llama_code_editor/requirements.in -o demo/llama_code_editor/requirements.txt pip install -r demo/llama_code_editor/requirements.txt七、本地运行与验证配置好密钥后在仓库根目录执行# 方式一Gradio UI 模式适合快速验证界面 MODEUI python demo/llama_code_editor/app.py # 方式二FastAPI 自动重定向默认/ 会跳转到 /ui python demo/llama_code_editor/app.py # 方式三手机通话模式fastrtc fastphone MODEPHONE python demo/llama_code_editor/app.py三种模式统一监听0.0.0.0:7860。浏览器打开http://localhost:7860后点击麦克风说创建一个带番茄钟的网页几秒后 Sandbox 标签页即出现可交互的 HTML 应用Code 标签页同步展示源码Chat 标签页记录对话继续说话如把背景改成深色即可基于已有代码迭代修改。若在 HF Space 上运行get_space()为真时会自动启用 90 秒会话限制与 Twilio TURN保证跨网络音频质量。八、小结从本 Demo 可复用的 fastrtc 模式Llama Code Editor 展示了三条极具复用价值的 fastrtc 开发模式ReplyOnPause 生成器fn写成生成器函数用yield分阶段产出结果先出加载态、再出最终结果配合AdditionalOutputs把任意数据history、HTML、图片等分发到 Gradio 组件WebRTC 组件声明式接线webrtc.stream(handler, inputs[...], outputs[...])一行完成音频流 → handler → 组件回写的绑定on_additional_outputs负责非音频输出路由get_space()驱动的双环境适配同一份代码在本地与 HF Space 上自动切换 TURN 凭据、并发上限与会话时长是 Gradio Space 部署的标准范式。如需继续深入可对照阅读 handler.py、ui.py、reply_on_pause.py 以及 credentials.py并将此 Demo 与仓库中 llm_voice_chat、talk_to_sambanova 等语音 Demo 对比可以更全面地理解 fastrtc 在不同交互形态下的设计取舍。【免费下载链接】fastrtcThe python library for real-time communication项目地址: https://gitcode.com/GitHub_Trending/fa/fastrtc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 fastrtc 实战：Llama Code Editor——用语音驱动单文件 HTML 应用生成的完整实现剖析
fastrtc 实战Llama Code Editor——用语音驱动单文件 HTML 应用生成的完整实现剖析【免费下载链接】fastrtcThe python library for real-time communication项目地址: https://gitcode.com/GitHub_Trending/fa/fastrtc导读本文以demo/llama_code_editor/为研究对象剖析一个基于 fastrtc Gradio-WebRTC 构建的语音交互式编码 Demo用户对着麦克风说出需求系统自动完成语音识别 → Llama 生成/修改单文件 HTML 应用 → 沙箱实时预览的完整闭环。读完本文你将掌握 fastrtc 的Stream/ReplyOnPause语音流处理范式、AdditionalOutputs多输出机制、Twilio TURN 凭据接入以及如何把该 Demo 一键部署到 Hugging Face Space 并支持网页与手机双端访问。一、项目定位Create interactive HTML web pages with your voiceLlama Code Editor 是 fastrtc 仓库README.md中一个极具代表性的语音 Agent Demo。其官方一句话描述是Create interactive HTML web pages with your voice用你的语音创建交互式 HTML 网页核心目标非常聚焦用户只说一句话例如做一个番茄钟页面或把按钮改成圆角系统就能生成或修改一个单文件 HTML 应用生成的代码会立即渲染到界面的Sandbox 沙箱中所见即所得会话附带多轮历史上下文支持对已有代码持续迭代修改。该 Demo 的技术组合为Gradio WebRTCfastrtc采集语音 → Groq 的 whisper-large-v3-turbo 做语音转写 → SambaNova 托管的 Meta-Llama-3.1-70B-Instruct 生成 HTML → iframe data URI 沙箱预览完整演示了 fastrtc 在音频输入 多路附加输出 流式处理场景下的标准写法。二、README 元数据解读Hugging Face Space 配置骨架demo/llama_code_editor/README.md本质上是一份Hugging Face Space 配置文件YAML front matter它决定了该 Demo 在 HF Space 上的构建与运行方式。逐项拆解如下字段值含义titleLlama Code EditorSpace 展示标题emojiSpace 头像 emoji对应项目使用的 Llama 模型colorFrom/colorToindigo / pinkSpace 卡片渐变色sdkgradio使用 Gradio SDK 构建界面sdk_version5.16.0锁定 Gradio 版本与 requirements.txt 中gradio5.16.0一致app_fileapp.pySpace 启动入口文件pinnedfalse是否置顶该 Spacelicensemit开源协议short_descriptionCreate interactive HTML web pages with your voiceSpace 的一句话描述tagswebrtc, websocket, gradio 4 个 secret 占位符Space 特性标签secret\|XXX声明该 Space 需要配置的密钥其中tags里的secret|TWILIO_ACCOUNT_SID、secret|TWILIO_AUTH_TOKEN、secret|SAMBANOVA_API_KEY、secret|GROQ_API_KEY是部署时必须填写的四个环境密钥详见下文第五节。这些字段与 app.py 中get_space()的运行时判断相互配合在 HF Space 上运行时自动启用 Twilio TURN 与 90 秒会话限制本地运行时则关闭。三、整体工作流从语音到 HTML 沙箱的完整链路结合 handler.py 与 ui.py 的源码该 Demo 的运行链路如下用户语音 → WebRTC 音频帧48kHz 单声道 → ReplyOnPause 静音检测Silero VAD → Groq whisper-large-v3-turbo 语音转写为文本 → system prompt 多轮历史 组装消息 → SambaNova Meta-Llama-3.1-70B-Instruct 生成/修改 HTML → 正则提取 !DOCTYPE html.../html 片段 → 双路输出Chatbot 追加对话记录 Sandbox 更新 HTML → iframe data URI 实时渲染预览三个文件各司其职app.py应用入口组装Stream、FastAPI 路由、三种启动模式handler.py核心业务逻辑语音转写、LLM 调用、HTML 提取与沙箱封装ui.pyGradio 界面布局麦克风组件、Sandbox/Code/Chat 三个标签页及其联动。四、核心源码走读4.1 入口文件 app.pyStream 组装与三模式启动app.py 用 fastrtc 的Stream装配整个应用stream Stream( handlerCodeHandler, modalityaudio, modesend-receive, concurrency_limit10 if get_space() else None, time_limit90 if get_space() else None, ) stream.ui uihandlerCodeHandler绑定由ReplyOnPause(generate)包装的语音处理器modalityaudio仅处理音频模态modesend-receive客户端发送音频、接收响应此处响应主要是附加输出而非音频concurrency_limit10、time_limit90仅在 HF Spaceget_space()为真时启用限制并发数与会话时长防止免费 Space 资源被耗尽——这也是 UI 中提示Each conversation is limited to 90 seconds的来源。启动部分通过环境变量MODE切换三种形态app.pyif (mode : os.getenv(MODE)) UI: stream.ui.launch(server_port7860, server_name0.0.0.0) elif mode PHONE: stream.fastphone(host0.0.0.0, port7860) else: import uvicorn uvicorn.run(app, host0.0.0.0, port7860)默认模式用uvicorn启动 FastAPI 应用根路径/会 302 重定向到/ui本地或 HF 线上地址MODEUI直接以 Gradio Blocks 方式启动适合本地调试界面MODEPHONE调用stream.fastphone(...)进入手机通话模式fastrtc 的 WebSocket 电话接入能力。4.2 handler.py语音驱动的代码生成核心handler.py 是整个 Demo 的大脑其关键设计如下。① 双模型客户端初始化groq_client Groq(api_keyos.environ.get(GROQ_API_KEY)) client openai.OpenAI( api_keyos.environ.get(SAMBANOVA_API_KEY), base_urlhttps://api.sambanova.ai/v1, )语音转写走Groqwhisper-large-v3-turbo速度极快代码生成走SambaNova托管的 OpenAI 兼容接口Meta-Llama-3.1-70B-Instruct密钥均通过环境变量注入且load_dotenv()支持.env文件。② Prompt 设计system_prompt You are an AI coding assistant. Your task is to write single-file HTML applications based on a users request. Only return the necessary code. Include all necessary imports and styles. You may also be asked to edit your original response. user_prompt Please write a single-file HTML application to fulfill the following request.\nThe message:{user_message}\nCurrent code you have written:{code}system prompt 明确约束模型只返回必要代码、包含所有 import 与样式并支持编辑原始回复多轮修改user prompt 同时注入本次语音转写文本user_message与当前已有代码code这是实现在已有基础上继续修改的关键history初始为[{role: system, content: system_prompt}]见 ui.py多轮对话整体作为上下文传给 LLM。③ 生成函数 generatefastrtc 多输出范式def generate(user_message: tuple[int, np.ndarray], history: list[dict], code: str): yield AdditionalOutputs(history, spinner_html) text groq_client.audio.transcriptions.create( file(audio-file.mp3, audio_to_bytes(user_message)), modelwhisper-large-v3-turbo, response_formatverbose_json, ).text user_msg_formatted user_prompt.format(user_messagetext, codecode) history.append({role: user, content: user_msg_formatted}) response client.chat.completions.create( modelMeta-Llama-3.1-70B-Instruct, messageshistory, temperature0.1, top_p0.1, ) output response.choices[0].message.content html_code extract_html_content(output) history.append({role: assistant, content: output}) yield AdditionalOutputs(history, html_code)值得注意的细节输入签名generate(user_message, history, code)的三个参数分别对应用户音频、对话状态、当前代码与ui.py中webrtc.stream(..., inputs[webrtc, history, code], ...)的输入列表一一对应yield AdditionalOutputs(...)两次产出第一次立即返回更新后的 history 加载动画 spinner让界面先呈现正在生成状态第二次在 LLM 响应后返回新 history 生成的 HTML。这正是 fastrtcAdditionalOutputs机制定义于 backend/fastrtc/utils.py的典型用法——handler 除了音频流外还能向 Gradio 组件推送任意附加数据audio_to_bytesbackend/fastrtc/utils.py把(sample_rate, np.ndarray)音频元组转成字节流再以(audio-file.mp3, ...)形式喂给 Groq 的音频转写 API低随机性参数temperature0.1, top_p0.1让代码生成更稳定、更少幻觉HTML 提取extract_html_content用正则!DOCTYPE html.*?/htmlDOTALL 模式从模型输出中截取完整 HTML 文档鲁棒地剥离可能的解释性文字。④ ReplyOnPause 包装与沙箱渲染CodeHandler ReplyOnPause(generate) def display_in_sandbox(code): encoded_html base64.b64encode(code.encode(utf-8)).decode(utf-8) data_uri fdata:text/html;charsetutf-8;base64,{encoded_html} return fiframe src{data_uri} width100% height600px/iframeReplyOnPause实现见 backend/fastrtc/reply_on_pause.py是 fastrtc 的语音流处理器它用 Silero VAD 模型持续分析音频块一旦检测到开始说话 → 停顿即把累积的语音交给fn执行。可配置参数AlgoOptions包括audio_chunk_duration0.6s、started_talking_threshold0.2s、speech_threshold0.1s等本 Demo 全部采用默认值display_in_sandbox将 HTML 做Base64 编码后塞进 data URI再包一层 iframe实现零后端依赖的纯前端沙箱渲染。4.3 ui.py三标签页界面与组件联动ui.py 构建了左侧麦克风 右侧三个标签页的布局麦克风列WebRTC(rtc_configurationget_twilio_turn_credentials() if get_space() else None, modesend, modalityaudio)——在 HF Space 上自动拉取 Twilio TURN 凭据backend/fastrtc/credentials.py以穿透 NAT/防火墙modesend表示客户端只上传音频Sandbox 标签页初始渲染assets/sandbox.htmlNo Application Created占位卡片Code 标签页gr.Code(languagehtml)只读展示当前生成的 HTML 源码Chat 标签页gr.Chatbot(typemessages)展示语音转写与回复记录。组件联动是理解本 Demo 界面逻辑的关键webrtc.stream( CodeHandler, inputs[webrtc, history, code], outputs[webrtc], time_limit90 if get_space() else None, concurrency_limit10 if get_space() else None, ) webrtc.on_additional_outputs( lambda history, code: (history, code, history), outputs[history, code, cb] ) code.change(display_in_sandbox, code, sandbox, queueFalse)webrtc.stream(...)把 WebRTC 音频流接到CodeHandler上webrtc.on_additional_outputs(...)见 backend/fastrtc/webrtc.py负责把 handler 每次yield的附加输出分发回 Gradio 组件第一项 history 更新history与聊天框cb第二项 code 更新code编辑器code.change(...)在代码更新后自动触发沙箱 iframe 重渲染形成生成 → 展示 → 预览的闭环。五、环境变量与密钥配置部署前需要准备四个环境变量对应 READMEtags中声明的 secrets环境变量用途获取方GROQ_API_KEY调用 Groq 的 whisper-large-v3-turbo 做语音转写Groq 控制台SAMBANOVA_API_KEY调用 SambaNova 托管的 Meta-Llama-3.1-70B-Instruct 生成代码SambaNova 控制台TWILIO_ACCOUNT_SID在 HF Space 上生成 TURN 凭据跨网络音频传输Twilio 控制台TWILIO_AUTH_TOKEN同上配套鉴权Twilio 控制台本地运行时可创建.env文件python-dotenv会自动加载见 handler.py部署到 HF Space 时在 Settings → Variables and secrets 中配置同名 secret 即可。注意本地运行时 Twilio 两个变量非必需get_space()为 False 时rtc_configurationNone走标准 WebRTC 直连而两个 API Key 在本地与线上都必需。六、依赖与安装依赖声明采用requirements.in源清单requirements.txtuv 编译锁定版双文件模式requirements.infastrtc[vad] # fastrtc 本体[vad] 额外引入 Silero VAD 所需依赖onnxruntime 等 groq # Groq 语音转写客户端 openai # SambaNova OpenAI 兼容接口客户端 python-dotenv # .env 加载 twilio # TURN 凭据获取requirements.txt由uv pip compile自动生成并锁定全部传递依赖版本fastrtc 0.0.2.post4、gradio 5.16.0、aiortc 1.10.1、twilio 9.4.5 等。安装方式pip install -r demo/llama_code_editor/requirements.txt或使用 uv 直接编译安装uv pip compile demo/llama_code_editor/requirements.in -o demo/llama_code_editor/requirements.txt pip install -r demo/llama_code_editor/requirements.txt七、本地运行与验证配置好密钥后在仓库根目录执行# 方式一Gradio UI 模式适合快速验证界面 MODEUI python demo/llama_code_editor/app.py # 方式二FastAPI 自动重定向默认/ 会跳转到 /ui python demo/llama_code_editor/app.py # 方式三手机通话模式fastrtc fastphone MODEPHONE python demo/llama_code_editor/app.py三种模式统一监听0.0.0.0:7860。浏览器打开http://localhost:7860后点击麦克风说创建一个带番茄钟的网页几秒后 Sandbox 标签页即出现可交互的 HTML 应用Code 标签页同步展示源码Chat 标签页记录对话继续说话如把背景改成深色即可基于已有代码迭代修改。若在 HF Space 上运行get_space()为真时会自动启用 90 秒会话限制与 Twilio TURN保证跨网络音频质量。八、小结从本 Demo 可复用的 fastrtc 模式Llama Code Editor 展示了三条极具复用价值的 fastrtc 开发模式ReplyOnPause 生成器fn写成生成器函数用yield分阶段产出结果先出加载态、再出最终结果配合AdditionalOutputs把任意数据history、HTML、图片等分发到 Gradio 组件WebRTC 组件声明式接线webrtc.stream(handler, inputs[...], outputs[...])一行完成音频流 → handler → 组件回写的绑定on_additional_outputs负责非音频输出路由get_space()驱动的双环境适配同一份代码在本地与 HF Space 上自动切换 TURN 凭据、并发上限与会话时长是 Gradio Space 部署的标准范式。如需继续深入可对照阅读 handler.py、ui.py、reply_on_pause.py 以及 credentials.py并将此 Demo 与仓库中 llm_voice_chat、talk_to_sambanova 等语音 Demo 对比可以更全面地理解 fastrtc 在不同交互形态下的设计取舍。【免费下载链接】fastrtcThe python library for real-time communication项目地址: https://gitcode.com/GitHub_Trending/fa/fastrtc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考