【免费下载链接】openai-chatkit-advanced-samplesStarter app to build with OpenAI ChatKit SDK项目地址https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples点击查看免费下载本文基于开源项目openai-chatkit-advanced-samples详解ChatKit 听写语音转文字功能的完整实现前端如何用一行配置开启麦克风输入服务端又如何调用gpt-4o-transcribe把语音实时转成文字填入输入框。读完你即可在自己的 ChatKit 应用中复刻这套「开口说、不用打字」的体验。听写功能在哪里Customer Support 示例仓库收录了 4 个 ChatKit 场景示例其中Customer Support航空客服是唯一启用听写的示例聊天输入框内置麦克风按钮点击即可开口说话应用会先把语音转写为文字再发送。官方在仓库 README 的功能索引中也专门列出了这项能力README.md前端通过composer.dictation开启服务端通过实现ChatKitServer.transcribe()完成转写。下面逐层拆解。前端一键开启composer.dictation 配置听写的前端开关只有一个配置项。在 Customer Support 的聊天面板组件 ChatKitPanel.tsx 中useChatKit的composer选项里声明composer: { placeholder: Ask the concierge a question, attachments: { enabled: true, maxSize: MAX_UPLOAD_BYTES, accept: IMAGE_ATTACHMENT_ACCEPT }, dictation: { enabled: true }, },就这么一行dictation: { enabled: true }openai/chatkit-reactSDK 会自动在输入框里渲染出麦克风按钮并接管录音、上传等交互。你无需自己处理MediaRecorder、音频分片或 WebSocket 细节——这正是 ChatKit SDK「把复杂留给 SDK」的价值所在。体验路径参考 customer-support/README.md点击输入框的麦克风按钮 → 授予浏览器麦克风权限 → 说出你的请求例如“帮我把 OA476 航班换到 14C 座”→ 转写完成的文字会填入输入框确认后即可发送。服务端语音转文字实现 ChatKitServer.transcribe()前端录制的音频最终会发送到后端的/support/chatkit入口main.py由ChatKitServer统一路由。而真正决定「能不能转、用哪个模型转」的是服务端是否实现了transcribe()钩子。在 server.py 中CustomerSupportServer覆写了该方法async def transcribe(self, audio_input: AudioInput, context: dict[str, Any]) - TranscriptionResult: ext { audio/webm: webm, audio/mp4: m4a, audio/ogg: ogg, }.get(audio_input.media_type) if not ext: raise HTTPException(status_code400, detailUnexpected audio format) audio_file io.BytesIO(audio_input.data) audio_file.name faudio.{ext} transcription client.audio.transcriptions.create( modelgpt-4o-transcribe, fileaudio_file ) return TranscriptionResult(texttranscription.text)这段不到 15 行的代码包含 3 个关键决策格式白名单SDK 传入的AudioInput带有media_type这里只放行webm / m4a / ogg三种浏览器常见录音格式遇到未知格式直接返回 400避免把脏数据喂给转写模型文件命名技巧OpenAI 的audio.transcriptions接口需要依据文件名后缀识别格式所以代码给内存流临时命名为audio.{ext}这是不少初学者的踩坑点返回TranscriptionResult只需把transcription.text包进 SDK 定义的TranscriptionResult返回前端输入框就会自动填入文本。完整调用链路一次听写的旅程把前后端串起来一次语音输入经历如下流程步骤发生位置关键动作1浏览器输入框点击麦克风按钮dictation开始录音2前端 →/support/chatkit音频流webm发送到 ChatKit 服务端点3server.pytranscribe()校验格式并调用gpt-4o-transcribe4浏览器输入框转写文本回填用户确认或编辑5ChatKit 对话流消息作为普通文本消息发送进入 Agent 推理值得注意的一点听写只负责「语音 → 文本」这一步转写完成后走的就是普通消息通道与手打消息完全等价。因此 Agent 的工具调用、侧边栏状态同步等能力对语音输入天然可用零额外适配。本地运行3 步跑起来# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples # 2. 准备环境变量需安装 uv export OPENAI_API_KEYsk-... export VITE_SUPPORT_CHATKIT_API_DOMAIN_KEY任意非空占位值 # 3. 仓库根目录一键启动 npm run customer-support启动后访问http://localhost:5171在输入框点击麦克风即可体验。前后端分工可对照 customer-support/README.md 中的 Quickstart 章节逐步排查。复刻到你自己项目要点清单️ 想在其他示例Cat Lounge、News Guide、Metro Map中加入听写只需两步前端在对应ChatKitPanel.tsx的composer配置中加上dictation: { enabled: true }服务端让ChatKitServer子类实现transcribe()转写模型可沿用gpt-4o-transcribe也按需替换为你自己的 ASR 服务只需返回TranscriptionResult。两个小提醒生产环境部署时前端域名需登记到 OpenAI 平台的域名白名单并把正式 domain key 配入VITE_SUPPORT_CHATKIT_API_DOMAIN_KEY开发阶段任意非空占位值即可配置细节见 config.ts听写依赖浏览器麦克风权限务必在支持 HTTPS或 localhost的环境下测试否则浏览器会直接拒绝录音。总结ChatKit 的听写能力把「语音转文字」拆成了极简的前后端契约前端一行dictation配置负责开启体验服务端一个transcribe()方法负责落地转写中间的音频采集、上传、回填全部由 SDK 托管。以 Customer Support 示例为模板你几乎可以零成本地为任何 ChatKit 应用加上「开口说不用打字」的交互能力。赞分享【免费下载链接】openai-chatkit-advanced-samplesStarter app to build with OpenAI ChatKit SDK项目地址https://gitcode.com/gh_mirrors/op/openai-chatkit-advanced-samples点击查看免费下载相关推荐ChatKit Widgets 组件体系通关从 .widget 模板到交互卡片openai-chatkit-advanced-samples 深度实践ChatKit Widgets 组件体系通关从 .widget 模板到交互卡片openai chatkit advanced samples 深度实践 op打造 AI 航空客服系统openai-chatkit-advanced-samples Customer Support 场景全流程实战打造 AI 航空客服系统openai chatkit advanced samples Customer Support 场景全流程实战 openai chaopenai-chatkit-advanced-samples 实体标注完全指南让站点名、文章引用可点击直达openai chatkit advanced samples 实体标注完全指南让站点名、文章引用可点击直达 openai chatkit advanced上一篇TinyKVM协作式多线程实现Python和Node.js支持详解下一篇5 分钟摸清 Windows 系统安全家底OpenArk 零依赖上手指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
企业数字化 ERP 产品动态
相关推荐
三月七小助手快速上手教程:3步跑通星穹铁道自动清体力与日常任务 三月七小助手快速上手教程:3步跑通星穹铁道自动清体力与日常任务 【免费下载链接】March7thAssistant 日常交给三月七,开拓留给你。《崩坏:星穹铁道》开源自动化助手。 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant … · 2026/11/5 1:23:30
如何快速安装Persian-IPA-to-Speech-F5:新手波斯语TTS教程(附CUDA与FFmpeg配置) 【免费下载链接】Persian-IPA-to-Speech-F5 Simple Python API for Persian IPA-to-speech with F5-TTS 项目地址: https://gitcode.com/gh_mirrors/pe/Persian-IPA-to-Speech-F5 点击查看 免费下载 Persian-IPA-to-Speech-F5 是一个基于 F5-TTS 的波斯语 TTS&… · 2026/11/5 1:23:30
光纤传感器采购比价:同参数报价差异的五步核对方法 适用读者:平台运营者、商家、项目方、软硬件采购人员,以及负责工业检测选型的工程技术人员。
>
> 解决问题:两份光纤传感器参数表看起来一致,报价却明显拉开,如何判断价差是否合理、该选哪一份。
本文按五个步骤… · 2026/11/5 1:59:42
交接只给了 2 天,我把老师傅的话全录了下来 💡 岗位交接的场景大同小异:文档一大摞,人只剩几天。但接手一段时间后你会发现,真正帮你少加班的,往往不是那摞文档,而是老师傅嘴里的话——"这个别用""急单找谁""这条流程为什么… · 2026/11/5 1:59:42
STM32 FOC (四):TIM3 中断架构与物理极限分析 前言为了实现精确的控制周期,需要将 FOC 算法(读取角度、计算速度、PID 运算、SVPWM 输出)移入硬件定时器中断中执行。本文记录了在 TIM3 中断调试过程中遇到的时序冲突、参数配置错误以及对电机物理极限的验证过程。一、中断频率与 I2C 时序… · 2026/11/5 1:59:42
一文读懂FaceChain技术拆解:从逐人训练到FACT身份适配,AI写真如何保留可编辑性 写在前面 欢迎大家关注Rocky的知乎:Rocky Ding 《三年面试五年模拟》AIGC/LLM/AI Agent算法工程师/开发工程师求职面试秘籍独家资源:【三年面试五年模拟】WeThinkIn/AIGC-Interview-Book,欢迎大家Star~ Rocky最新撰写的10万字AI A… · 2026/11/5 1:59:42
迈从 A7 Pro 宏(快捷指令)无法录入 Win 键 Up 事件的解决方案 2026/11/4:补充
在M Hub v2.0.0 版本中,本功能已修复(提供了复制节点和插入节点对应up/down节点的功能)。原则上来说本文档不具备直接参考价值一、背景
目标:用一个按键触发"打开终端"。
实现思路࿱… · 2026/11/5 1:58:42
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38
多智能体协作系统架构设计与实践优化 1. 多智能体协作系统的时代背景2017年Transformer架构的诞生彻底改变了人工智能的发展轨迹。当行业还沉浸在单一大模型带来的性能突破时,Anthropic的研究团队已经将目光投向了更前沿的领域——如何让多个智能体通过协作产生超越单体能力的系统智能。这就像交响乐团中… · 2026/11/5 0:00:39
大模型系统性入门实战指南:从原理到部署微调的全链路路线 提到大模型的系统性入门,我先说个结论:这事真不难,难的是资料太散、路线太多,今天这个框架明天那个工具,新人很容易在“收藏夹吃灰”和“教程看到一半放弃”之间反复横跳。市面上关于大模型的内容少说有几十万篇&#… · 2026/11/5 0:00:39
鸿蒙文件系统沙箱机制解析与开发实践 1. 鸿蒙文件系统沙箱机制深度解析作为一名从Android转向鸿蒙开发的工程师,我深刻体会到文件系统访问是迁移过程中最先遇到的"拦路虎"。在Android上运行良好的文件读写代码,在鸿蒙真机环境却频频出现文件写入后神秘消失或直接抛出权限拒绝错误的… · 2026/11/5 0:00:39
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38