Files
QSmartAssistant/docs/UI_LAYOUT_UPDATE.md
lizhuoran e92cb0b4e5 feat: 完整的语音助手系统实现
主要功能:
-  离线语音识别 (ASR) - Paraformer中文模型
-  在线语音识别 - Streaming Paraformer中英文双语模型
-  语音合成 (TTS) - MeloTTS中英文混合模型
-  语音唤醒 (KWS) - Zipformer关键词检测模型
-  麦克风录音功能 - 支持多种格式和实时转换
-  模型设置界面 - 完整的图形化配置管理

KWS优化亮点:
- 🎯 成功实现关键词检测 (测试成功率10%→预期50%+)
- ⚙️ 可调参数: 阈值、活跃路径、尾随空白、分数权重、线程数
- 🔧 智能参数验证和实时反馈
- 📊 详细的调试信息和成功统计
- 🎛️ 用户友好的设置界面

技术架构:
- 模块化设计: ASRManager, TTSManager, KWSManager
- 实时音频处理: 自动格式转换 (任意格式→16kHz单声道)
- 智能设备检测: 自动选择最佳音频格式
- 完整资源管理: 正确的创建和销毁流程
- 跨平台支持: macOS优化的音频权限处理

界面特性:
- 2×2网格布局: ASR、TTS、录音、KWS四大功能模块
- 分离录音设置: 设备参数 + 输出格式独立配置
- 实时状态显示: 音频电平、处理次数、成功统计
- 详细的用户指导和错误提示
2025-12-23 13:47:00 +08:00

6.4 KiB
Raw Permalink Blame History

界面布局更新说明

🎯 更新概述

QSmartAssistant的用户界面已从垂直分割器布局更新为两行两列的网格布局提供更好的空间利用率和用户体验。

🔄 布局变更

之前的布局

  • 垂直分割器: 所有功能模块垂直排列
  • 空间利用: 需要大量垂直滚动
  • 视觉效果: 功能模块呈长条状分布

现在的布局

  • 网格布局: 2×2网格四个功能模块均匀分布
  • 空间利用: 更好的水平和垂直空间利用
  • 视觉效果: 紧凑且平衡的界面设计

📐 新布局结构

┌─────────────────────┬─────────────────────┐
│   语音识别 (ASR)    │   语音合成 (TTS)    │
│                     │                     │
│ • 文件识别          │ • 文本输入          │
│ • 实时麦克风识别    │ • 说话人选择        │
│ • 识别结果显示      │ • 合成结果显示      │
├─────────────────────┼─────────────────────┤
│   麦克风录音        │   语音唤醒 (KWS)    │
│                     │                     │
│ • 录音设置          │ • 关键词检测        │
│ • 输出设置          │ • 唤醒状态监控      │
│ • 录音控制          │ • 检测结果显示      │
└─────────────────────┴─────────────────────┘

功能模块分布

第一行第一列:语音识别 (ASR)

  • 文件选择和识别
  • 实时麦克风识别控制
  • 识别结果显示区域

第一行第二列:语音合成 (TTS)

  • 文本输入区域
  • 说话人ID设置
  • 合成结果和控制

第二行第一列:麦克风录音

  • 录音设置(设备参数)
  • 输出设置(保存格式)
  • 录音控制和结果显示

第二行第二列:语音唤醒 (KWS)

  • 唤醒检测控制
  • 实时状态监控
  • 关键词检测结果

🎨 界面优化

尺寸调整

  • 最小窗口尺寸: 1200×800 像素
  • 默认窗口尺寸: 1400×900 像素
  • 文本框高度: 统一调整为80-120像素范围

布局参数

  • 网格间距: 10像素
  • 边距: 10像素
  • 拉伸策略: 行列均匀拉伸(拉伸因子=1

视觉改进

  • 更紧凑的功能模块设计
  • 更好的空间利用率
  • 减少垂直滚动需求
  • 提升整体视觉平衡

🔧 技术实现

代码变更

布局系统更新

// 之前:垂直分割器
auto* splitter = new QSplitter(Qt::Vertical, this);
splitter->addWidget(asrGroup);
splitter->addWidget(ttsGroup);
splitter->addWidget(recordGroup);
splitter->addWidget(kwsGroup);

// 现在:网格布局
auto* gridLayout = new QGridLayout();
gridLayout->addWidget(asrGroup, 0, 0);    // 第一行第一列
gridLayout->addWidget(ttsGroup, 0, 1);    // 第一行第二列
gridLayout->addWidget(recordGroup, 1, 0); // 第二行第一列
gridLayout->addWidget(kwsGroup, 1, 1);    // 第二行第二列

拉伸策略配置

// 设置行列拉伸策略,让各模块均匀分配空间
gridLayout->setRowStretch(0, 1);    // 第一行拉伸因子为1
gridLayout->setRowStretch(1, 1);    // 第二行拉伸因子为1
gridLayout->setColumnStretch(0, 1); // 第一列拉伸因子为1
gridLayout->setColumnStretch(1, 1); // 第二列拉伸因子为1

文本框高度优化

// 统一设置文本编辑框的高度范围
textEdit->setMinimumHeight(80);
textEdit->setMaximumHeight(120);

新增头文件

#include <QGridLayout>  // 网格布局支持

📱 响应式设计

窗口缩放

  • 最小尺寸限制: 确保所有功能模块可见
  • 比例保持: 网格布局自动调整模块大小
  • 内容适应: 文本框和控件自动适应容器大小

屏幕适配

  • 高分辨率: 更好利用宽屏显示器
  • 标准分辨率: 保持良好的可用性
  • 紧凑显示: 减少不必要的空白区域

🎯 用户体验提升

操作效率

  • 并行操作: 可同时查看多个功能模块状态
  • 快速切换: 无需滚动即可访问所有功能
  • 视觉关联: 相关功能在视觉上更接近

界面美观

  • 平衡布局: 四个模块形成视觉平衡
  • 空间利用: 更高效的屏幕空间使用
  • 现代感: 符合现代应用界面设计趋势

功能发现

  • 一览无余: 所有主要功能一屏显示
  • 逻辑分组: 相关功能就近放置
  • 清晰分区: 每个功能模块边界清晰

🔍 使用建议

最佳实践

  1. 窗口大小: 建议使用1400×900或更大尺寸
  2. 功能使用: 可同时使用多个功能模块
  3. 状态监控: 便于同时监控多个功能状态

工作流程

  1. 语音识别: 左上角进行文件或实时识别
  2. 语音合成: 右上角输入文本进行合成
  3. 录音功能: 左下角进行高质量录音
  4. 语音唤醒: 右下角启动关键词检测

🚀 未来扩展

布局灵活性

  • 支持用户自定义模块位置
  • 支持模块大小调整
  • 支持模块显示/隐藏

多屏支持

  • 支持多显示器布局
  • 支持模块拖拽到其他屏幕
  • 支持独立窗口模式

主题定制

  • 支持不同的布局主题
  • 支持颜色和间距自定义
  • 支持紧凑/宽松布局切换

📊 性能影响

渲染性能

  • 网格布局: 比分割器布局更高效
  • 重绘优化: 减少不必要的界面重绘
  • 内存使用: 布局管理器内存占用更少

响应速度

  • 布局计算: 网格布局计算更快
  • 窗口调整: 响应窗口大小变化更流畅
  • 控件更新: 界面更新更及时

兼容性

系统兼容

  • macOS: 完全支持,原生外观
  • Windows: 支持(如需要)
  • Linux: 支持(如需要)

Qt版本

  • Qt 6.x: 完全支持
  • 向后兼容: 保持API兼容性

📝 更新日志

Version 2.0 - 网格布局

  • 将垂直分割器替换为2×2网格布局
  • 优化窗口最小和默认尺寸
  • 统一文本编辑框高度设置
  • 添加网格布局拉伸策略
  • 提升整体用户体验

新的网格布局为QSmartAssistant带来了更现代、更高效的用户界面提升了空间利用率和操作便利性为用户提供了更好的语音处理工作体验。