SignBridge AI 技术文档

面向医疗场景的视-触多模态手语翻译系统 — 语音⇄手语双向实时翻译，3D 数字人 + 计算机视觉手部追踪，覆盖 CSL/ASL/BSL/LSE 四种手语。

🎙️语音 → 手语（3D数字人）

🤟手语 → 语音（MediaPipe）

⌨️文字 → 手语动画

📝AI 会话摘要

进入系统 →

技术文档

技术原理与算法说明

系统流程图

医护语音输入（麦克风）

↓

Stage 1: ASR 语音识别
44.1kHz → WebSocket 流式转写

↓

Stage 2: LLM 手语翻译
DeepSeek/GPT-4o → 手语词汇序列

↓

3D 数字人动画播放
Three.js + SMPL-X 骨骼插值 ≥30FPS

↓

Stage 3: 手语识别（听障患者）
MediaPipe Hands 21点 30FPS 浏览器端

↓

Stage 4: TTS 语音输出
实时字幕 + 语音播报同步

↓

Stage 5: AI 会话摘要 + 安全审计

图1：SignBridge 双向翻译系统流程

系统流程描述

系统提供双向实时翻译能力。正向路径（语音→手语）：浏览器通过 Web Audio API 以 44.1 kHz 采样率采集医护语音，经 WebSocket 流式发送至 ASR 引擎（百度语音识别，国内免费 5 万次/天）实时转写为文字；LLM（DeepSeek / GPT-4o / 通义千问可切换）将转写文本简化为手语友好表达并映射至手语词典，未命中词汇自动拆分为 A-Z 逐字母指拼序列；Three.js 驱动 3D 数字人（Avaturn + SMPL-X 骨骼系统）以 ≥30 FPS 播放关键帧动画，端到端延迟 <2 秒。反向路径（手语→语音）：听障患者面对摄像头做手语动作，MediaPipe Hands 在浏览器端以 30 FPS 提取 21 个手部关键点坐标，视频数据绝不上传服务器；规则分类器基于手指弯曲角、指尖间距、手掌朝向等几何特征匹配手语词条，识别结果经 LLM 优化为自然口语后由 TTS 合成语音播报，同时显示实时字幕。全过程受 Azure AI Content Safety 实时内容过滤和 PII 脱敏保护，所有 AI 决策记录在 Responsible AI 面板供用户审计。

项目基本信息

项目名称	SignBridge AI 听障就医手语翻译系统（Inclusive Communication Hub）
适用场景	医疗场景下听障人士与医护人员的无障碍沟通（就诊、问诊、康复指导）
技术框架	Next.js 15（App Router）+ React 18 + TypeScript 5
3D 渲染	Three.js + Avaturn（WebGL），SMPL-X 骨骼绑定 + 关键帧插值
手部追踪	MediaPipe Hands，21 关键点，30 FPS，完全浏览器端推理
AI 服务	DeepSeek / GPT-4o / 通义千问（LLM）、百度语音识别（ASR）、Azure Speech（TTS）
支持手语	CSL（中国手语）/ ASL（美国手语）/ BSL（英国手语）/ LSE（西班牙手语）
端到端延迟	< 2 秒（语音→手语动画）
安全机制	Azure AI Content Safety 实时过滤 + PII 脱敏 + Responsible AI 审计面板

关键模块说明

1. 语音识别引擎（Speech-to-Text）

浏览器 Web Audio API 以 44.1 kHz 采样率采集麦克风音频，经 WebSocket 流式推送至 ASR 引擎（默认百度语音识别，免费 5 万次/天；支持切换 Azure AI Speech）。引擎逐句返回实时转写文本，以字幕形式同步显示。支持中文、英文、日文等多语种识别。流式架构保证首个字词延迟 <500ms，长句无需等待完整录音。

2. LLM 手语翻译与词汇映射（Text → Sign Language）

核心翻译管线：① LLM（DeepSeek-chat / GPT-4o / qwen-plus 可切换）将口语转写文本简化为手语友好表达 — 去除复杂从句、保留核心语义；② 简化文本映射至手语词典（存储于数据库），查询对应动画关键帧序列；③ 词典未命中词汇自动拆分为逐字母指拼（A-Z fingerspelling）序列，保证任意词汇可表达；④ 支持四种手语体系切换（CSL/ASL/BSL/LSE），翻译结果缓存减少重复 LLM 调用。

3. 3D 数字人动画渲染（3D Avatar Rendering）

Three.js + Avaturn 在 WebGL 画布中渲染拟人化 3D 数字人（Ready Player Me 模型，GLB 格式 3.8MB）。SMPL-X 骨骼系统驱动手部/手臂/面部动作，关键帧插值保证动画帧率 ≥30 FPS。动画播放队列支持连续词汇流式驱动 — 前一个手势未播完即预加载下一个，消除词汇间停顿。模型托管于 nginx 本地（/models/avatar/avatar.glb），避免外网依赖。

4. 手语识别分类器（Sign Language Recognition）

浏览器摄像头捕获患者手部画面，MediaPipe Hands 逐帧提取 21 个手部关键点三维坐标 (x, y, z)，30 FPS 实时处理，推理完全在浏览器端完成，视频数据不上传任何服务器（隐私优先）。规则分类器基于关键点几何特征匹配预设手语词条：手指弯曲角（指尖-关节夹角）、指尖间距（拇指-食指距离等）、手掌朝向（法向量方向）、手腕相对位置。最大可识别侧面角度 ≤45°。识别结果作为实时字幕显示给医护人员。

5. 语音合成输出（Text-to-Speech）

识别出的手语词条组合为完整语句后，LLM 将其优化为自然口语表达；TTS 引擎（Azure AI Speech 或浏览器 Web Speech API 降级方案）合成语音播报给医护人员，同时显示优化后的文字字幕。语言自动匹配手语体系：ASL→英语，CSL→中文。TTS 播报与字幕严格同步，确保听障患者确认自己的表达被正确理解。

6. 会话摘要与责任 AI（Session Summary & Responsible AI）

会话全程文字记录存储于数据库，会话结束时 GPT-4o 生成结构化 Markdown 摘要（关键决策、行动项、完整文字记录），可直接分享至 Microsoft Teams。安全三层防线：① Azure AI Content Safety 实时过滤每一条消息，有害内容即刻拦截；② Azure AI Language 检测并脱敏 PII（姓名、电话、邮箱、地址）；③ Responsible AI 面板记录每个 AI 决策的输入、输出和模型信息，用户可随时查看、审计和控制数据。

技术指标汇总

阶段	目标	主要指标	阈值/目标	关键参数
Stage 1	语音识别	ASR 实时转写	首个字词 <500ms	44.1kHz + WebSocket 流式，多语种
Stage 2	语音→手语	端到端延迟	<2 秒	DeepSeek/GPT-4o + Three.js + SMPL-X
Stage 3	手语识别	手部追踪精度	21点 / 30FPS	MediaPipe Hands，规则分类器，≤45° 侧面角
Stage 4	手语→语音	TTS 输出	字幕+语音同步	Azure Speech TTS / Web Speech 降级
Stage 5	会话摘要	结构化 Markdown	全对话记录	GPT-4o + Content Safety + PII 脱敏

系统架构

┌───────────────┐ ┌──────────────────┐ ┌─────────────────────┐ │ 浏览器端 │ │ Next.js 服务端 │ │ AI 服务层 │ │ │ │ │ │ │ │ MediaPipe │ │ API Routes │ │ DeepSeek / GPT-4o │ │ Hands（21 点） │◄──►│ Orchestrator │◄──►│ 百度语音识别 (ASR) │ │ Three.js │ │ 会话管理 │ │ Azure Speech (TTS) │ │ 3D Avatar │ │ │ │ Azure Content Safety│ │ Web Audio │ │ 手语词典 │ │ Azure AI Language │ │ Web Speech │ │ 会话记录 │ │ │ └───────────────┘ └──────────────────┘ └─────────────────────┘ 数据流：语音输入 → 百度ASR → LLM翻译 → 手语词汇 → Three.js 3D Avatar 手语输入 → MediaPipe Hands (21pts, 30FPS) → 规则分类器 → TTS语音输出全部数据流经 Content Safety + PII 脱敏

核心算法实现

手部关键点几何特征分类（手语识别核心）

/**
 * 基于 MediaPipe Hands 21 关键点的规则分类器
 * @param {Array} landmarks - 21个手部关键点 [{x, y, z}, ...]
 * @returns {string} 识别出的手语词条
 */
function classifySign(landmarks) {
    const TIPS = { thumb: 4, index: 8, middle: 12,
                 ring: 16, pinky: 20 };
    const WRIST = 0;

    // 手指弯曲角：指尖-近端关节-掌根 三点夹角
    function fingerAngle(tipIdx, pipIdx) {
        const a = landmarks[tipIdx], b = landmarks[pipIdx], c = landmarks[WRIST];
        const ab = Math.hypot(a.x-b.x, a.y-b.y, a.z-b.z);
        const bc = Math.hypot(b.x-c.x, b.y-c.y, b.z-c.z);
        const ac = Math.hypot(a.x-c.x, a.y-c.y, a.z-c.z);
        // 余弦定理
        return Math.acos((ab*ab + bc*bc - ac*ac) / (2*ab*bc)) * 180/Math.PI;
    }

    // 指尖间距：拇指-食指（用于"OK"、数字等手势）
    const thumbIndexDist = Math.hypot(
        landmarks[TIPS.thumb].x - landmarks[TIPS.index].x,
        landmarks[TIPS.thumb].y - landmarks[TIPS.index].y);

    // 手掌朝向：中指根→指尖向量 与 中指根→无名指根向量 的叉积方向
    const palmNormal = crossProduct(
        vec(landmarks[9], landmarks[12]),
        vec(landmarks[13], landmarks[17]));

    // 规则匹配（示例：竖起大拇指 = "好"）
    if (fingerAngle(TIPS.thumb, 2) < 35 &&  // 拇指伸直
        fingerAngle(TIPS.index, 6) > 120 && // 其余手指弯曲
        fingerAngle(TIPS.middle, 10) > 120) {
        return palmNormal.y > 0 ? '好' : '坏';
    }
    // ... 更多词条规则（手指拼 A-Z、数字 0-9、常用医疗词汇）
    return '未识别';
}

LLM 手语翻译管线（语音→手语）

/**
 * 语音转写文本 → 手语词汇序列（含指拼回退）
 * @param {string} transcript - ASR 转写文本
 * @returns {Array} 手语动画序列 [{type: 'sign'|'spell', word}]
 */
async function translateToSigns(transcript) {
    // 1. LLM 简化：去除从句，保留核心语义
    const simplified = await llmComplete({
        prompt: '将医疗对话简化为手语友好表达：' + transcript,
        model: process.env.OPENAI_MODEL || 'deepseek-chat'
    });

    // 2. 分词并映射词典
    const words = simplified.split('');  // 中文按字分词
    const sequence = [];

    for (const word of words) {
        const entry = await lookupSignDict(word);
        if (entry) {
            sequence.push({ type: 'sign', word, frames: entry.keyframes });
        } else {
            // 3. 词典未命中 → 逐字母指拼回退
            for (const ch of word) {
                sequence.push({ type: 'spell', letter: ch,
                                frames: FINGERSPELLING[ch] });
            }
        }
    }
    return sequence;  // → 3D Avatar 播放队列
}

系统技术参数

参数	值	说明
FRAMEWORK	Next.js 15 App Router	React 18 + TypeScript 5
HAND_TRACKING	MediaPipe Hands 21pts	30 FPS，浏览器端推理，视频不上传
AVATAR_MODEL	avatar.glb (3.8MB)	Ready Player Me，nginx 本地托管
ANIMATION_FPS	≥30 FPS	SMPL-X 关键帧插值，流式队列播放
ASR_SAMPLE_RATE	44.1 kHz	WebSocket 流式传输
LLM_ENGINE	deepseek-chat（可切换）	qwen-plus / gpt-4o 备选
E2E_LATENCY	<2 秒	语音输入 → 手语动画
SIGN_LANGUAGES	CSL / ASL / BSL / LSE	四种手语体系可切换
MAX_SIDE_ANGLE	≤45°	手语识别最大侧面角度
CONTENT_FILTER	Azure Content Safety	每条消息实时审查
PII_PROTECTION	Azure AI Language	姓名/电话/邮箱/地址自动脱敏
DATA_STORAGE	数据库会话记录	摘要导出 Markdown，可分享 Teams