Speech Course

演讲课程功能介绍

Megaview Coach 的演讲课程模块,让销售团队通过 AI 驱动的演讲练习和互动问答,系统性地提升表达能力与客户沟通技巧。从课程创建到练习评分,全流程智能化。

01产品概述

演讲课程是 Megaview Coach 的三大练习模式之一,专为需要面对客户进行正式演讲的销售场景设计。

2
练习阶段
演讲 + 互动
7
支持语言
中 / 英 / 日 / 韩 / 法 / 德 / 西
9+
部署平台
Web / 桌面 / Bot 嵌入
Core
AI 客户角色扮演
基于课程配置的 AI 角色,在互动阶段模拟真实客户提问,支持自定义人设、语气和追问策略。
Core
实时语音识别
WebSocket 流式 ASR,练习过程中实时转写为文字,支持降级容错(ASR 资源不足时自动切换)。
Core
PPT 同步展示
练习时同步展示演讲 PPT,支持翻页、缩放、拖拽,模拟真实演讲场景。
Core
多维度智能评分
按维度(表达能力、内容完整性等)+ 指标 + 要点三级评分,支持关键点触发评分模式。

02核心流程

从管理员建课到学员练习再到报告生成,一条完整闭环。

1
创建课程
AI 辅助建课
2
配置参数
时长 / 语言 / 角色
3
上传 PPT
自动转图片
4
演讲练习
ASR 实时转写
5
互动问答
AI 客户提问
6
生成报告
多维度评分
Screenshot Placeholder
整体流程图 — 从建课到练习到报告的完整链路

03建课端 · AI 课程生成器

管理员通过对话式 AI 助手快速创建演讲课程,或手动编辑课程参数。

页面布局

课程生成器采用左右双栏布局:左侧为课程编辑区,右侧为 AI 对话面板。支持编辑/预览两种模式切换,预览模式下可直接体验练习流程。

Screenshot Placeholder
课程生成器 — 左侧编辑区 + 右侧 AI 对话面板

AI 辅助建课

在右侧对话面板中,管理员可以用自然语言描述课程需求,AI 会流式生成课程配置(描述、评分维度、互动阶段等),生成完成后自动填充到左侧编辑区。生成过程中可实时预览 AI 输出。

Screenshot Placeholder
AI 对话建课 — 流式生成课程配置

课程配置项

配置项 说明 取值范围
选择语言 练习时的 ASR 和 TTS 语言 中文 / 英文
演讲时长上限 超过后自动结束演讲阶段 1 – 180 分钟
演讲时长下限 不足则评分无效 0 – 180 分钟
互动时长下限 不足则互动评分无效 0 – 180 分钟
开启摄像头 练习时要求开启摄像头 开 / 关
防作弊 摄像头监控,检测异常行为 开 / 关
关键点评分模式 未触发关键点时的评分策略 满分 / 不给分
评分标准提示 是否向学员展示评分标准 隐藏 / 仅指标 / 指标 + 要点
Screenshot Placeholder
课程设置表单 — 语言、时长、摄像头、防作弊、评分模式

互动阶段编辑

互动阶段使用 Markdown 编辑器定义 AI 客户在互动环节中的提问方向和策略。编辑器支持自动高度、失焦自动保存。

Screenshot Placeholder
互动阶段编辑器 — Markdown 格式定义 AI 提问策略

角色配置

每个课程可配置 AI 客户角色,包括:头像、沉默视频(待机动画)、说话视频(对话动画)、人设描述、开场白。角色定义决定了互动阶段 AI 的语气和追问风格。

Screenshot Placeholder
AI 角色配置 — 头像、视频、人设、开场白

04练习端 · 演讲练习主界面

学员进入练习后,面对的是一个三栏布局的沉浸式练习环境。

三栏布局

左栏 · 课程侧边栏(320px,可折叠)

  • — 课程介绍(Markdown 渲染)
  • — 评分标准:维度 → 指标 → 要点
  • — 每个指标显示权重和关键要点

中栏 · PPT 展示区

  • — PPT 幻灯片图片展示
  • — 翻页、缩放、拖拽控制
  • — 顶部操作栏:计时器、互动按钮、完成/放弃/暂存
Screenshot Placeholder
练习主界面 — 三栏布局:侧边栏 + PPT + 视频/对话

右栏 · 视频通话 + 对话区

右栏是练习的核心交互区域,从上到下依次为:

视频通话区
全宽摄像头画面,右上角叠加 AI 角色视频(说话/沉默两套动画交叉淡入淡出)。状态栏显示"正在说话"或"等待说话"。
VideoCall · 双 video 元素 + opacity transition
阶段指示器
显示当前练习阶段(演讲中 / 互动中),带品牌色脉冲圆点。
对话列表
滚动区域,显示用户和 AI 的对话内容。每条消息包含头像、姓名、Markdown 渲染的正文、音频播放控件。AI 回复支持流式显示。
录音按钮
演讲模式:显示"开始演讲"按钮。互动模式:显示录音按钮(22 根动态波形条 + 时长计数器 + 停止按钮)。
RecordButton · recorder-core · PCM → WebSocket
Screenshot Placeholder
右栏细节 — 视频通话 + 对话列表 + 录音按钮

05演讲模式

学员面对 PPT 进行自由演讲,系统实时转写语音为文字。

3 秒倒计时
点击"开始演讲"后,全屏倒计时覆盖层(3 → 2 → 1),给学员准备时间。
ASR 实时转写
倒计时结束后自动开始录音。PCM 音频流通过 WebSocket 实时发送,服务端返回 asr_result 消息(partial → final),对话区实时显示转写文字。
WebSocket · /websocket/ai/speech · asr_start → asr_ack → asr_result
计时器运行
顶部操作栏显示练习时长(HH:MM:SS 格式),服务端可在时长即将耗尽时发送 plan_countdown 倒计时警告。
ASR 降级容错
当 ASR 服务资源不足时,服务端发送 asr_degrade,前端隐藏实时字幕并显示生成动画提示,但录音继续。最终结果在 is_last=true 时一次性返回。
文本纠错
服务端可发送 plan_revise_sales_saying 对已转写的文本进行修正,前端原地更新对应句子。
Screenshot Placeholder
演讲模式 — 实时转写中,对话区显示学员发言
防作弊模式:当课程开启 anti_cheat_enabled 时,练习初始化阶段会请求摄像头权限,练习全程监控摄像头画面。VideoCall 组件中本地视频始终可见,确保学员在镜头前完成演讲。

06互动模式

演讲结束后进入互动环节,AI 客户基于课程配置的角色和互动阶段进行提问。

进入互动

学员点击"互动"按钮或演讲时长达到上限后,系统检查最低演讲时长。时长不足时弹出确认对话框(3 秒倒计时后可强制提交),时长充足则发送 plan_interaction_start 进入互动模式。

Screenshot Placeholder
互动确认对话框 — 时长检查 + 倒计时取消

互动流程

AI 提问
服务端发送 plan_message(status: 1 开始 → 2 流式 → 3 完成),AI 角色的问题以"客户"身份出现在对话区。同时 TTS 音频通过 plan_tts_result 返回,VideoCall 切换到 AI 说话动画。
TTS 分段流式 · seq 字段拼接播放列表
学员回答
学员点击录音按钮开始回答,ASR 实时转写。回答完成后发送 plan_message(用户内容),AI 接收后生成下一轮回复。
多轮对话
AI 和学员交替发言,对话区持续滚动。每轮 AI 回复都伴随 TTS 音频播放和视频动画同步。
Screenshot Placeholder
互动模式 — AI 客户提问 + 学员录音回答

录音按钮状态

Ready
待录音状态
品牌色圆角按钮,麦克风图标 + "点击开始说话"文字。加载中时显示 spinner。
Recording
录音中状态
左侧 22 根动态波形条(CSS 动画,60ms 交错延迟)+ 时长计数器,右侧圆形停止按钮。
Screenshot Placeholder
录音按钮 — 待录音 vs 录音中两种状态

07评分体系

三级评分结构:维度 → 指标 → 要点,支持关键点触发评分模式。

评分结构

层级 说明 示例
EvaluateDimension 评分维度,最高层级 表达能力、内容完整性、互动应对
EvaluateMetric 维度下的具体指标,带权重 语言流畅度(权重 0.3)、逻辑结构(权重 0.2)
Gist 指标下的关键要点 是否使用数据支撑观点、是否回应客户疑虑

关键点评分模式

模式一:满分

  • 未触发关键点 → 该指标得满分
  • 适用于"加分项"场景
  • 鼓励学员自然发挥
vs

模式二:不给分

  • 未触发关键点 → 该指标零分
  • 适用于"必考项"场景
  • 确保核心内容覆盖

评分标准展示控制

课程创建者可以控制学员在练习前能看到多少评分信息:

Screenshot Placeholder
侧边栏评分标准展示 — 维度、指标权重、关键要点

08技术架构

演讲课程模块的技术实现要点。

架构分层

UI Layer
严格 UI/逻辑分离
主页面 index.tsx 只负责渲染,所有状态和业务逻辑集中在 useSpeechPageLogic 编排 Hook 中,下辖 7 个子 Hook。
State
handlersRef 解循环依赖
WebSocket 消息处理器与状态修改之间存在循环依赖,通过 handlersRef(可变引用对象)存储处理函数来打破。
Network
WebSocket 弹性连接
30 秒心跳(ping/pong),非 1000 关闭码自动重连(3 秒延迟),配置存储在 ref 中支持重连时读取。
Audio
recorder-core 录音
使用 recorder-core 库(非浏览器原生 MediaRecorder),本地编码 MP3(16kHz/16bit),WebSocket 传输原始 PCM(Float32Array)。

关键技术点

流式 ASR 闭环
PCM 音频 → WebSocket ArrayBuffer → 服务端 ASR → asr_result(partial/final)→ 前端实时渲染文字。60 秒静默超时(错误码 5000/5005)触发异常对话框。
分段 TTS 播放
服务端通过 plan_tts_resultseq 字段实现分段流式 TTS,前端按序拼接播放列表,与 VideoCall 的 AI 说话动画同步。
异步流程控制
模式切换和结束练习时,创建 Promise(recordingPromiseResolve),等待最终 ASR 结果到达后 resolve,确保状态转换干净。
iframe 双模式
页面既可独立运行,也可通过 iframe 嵌入 Bot 应用。通过 postMessage(PRACTICE_COMPLETE / EXIT_PRACTICE / NAVIGATE)实现父子通信。
流式课程创建
课程生成器通过 WebSocket course_config_stream 命令,接收 AI 流式生成的课程内容,逐步更新 UI,最终加载结构化数据。

多端部署

平台 接入方式 说明
Web 端 路由 /speech-practice 独立页面,RequireCoachSession 守卫
课程生成器 路由 /speech-course-generator 独立页面,含编辑/预览模式
Bot 应用 iframe 嵌入 iframe-public-speaking 组件,postMessage 通信
桌面端 Tauri 2.x WebView 共享 Web 代码,原生窗口

文件结构

路径 职责
pages/SpeechPractice/ 练习主页面 + 组件 + Hooks + 类型 + 工具函数
pages/SpeechCourseGenerator/ 课程生成器 + 设置表单 + 互动编辑 + 预览
api/modules/speech.ts 13 个 API 端点(创建/更新/配置/评分/音频)
utils/courseType.ts 课程类型路由映射(type 9 → /speech-practice)
bot/components/iframe-public-speaking/ Bot 端 iframe 封装