◒刷牙训练助手

本次会话分析 · 不保存视频

日常刷牙练习

把两分钟，刷得更完整。

打开摄像头后，跟随区域提示完成一次刷牙练习。画面只在当前浏览器会话中使用，结束后自动清空。

实时取景

准备开始

等待摄像头
◌准备好后开启摄像头请让脸部与刷牙动作出现在画面中
02:00剩余

开启后会进行取景校准

使用方法

一次练习，只要三步

  1. 1
    调整取景

    让脸部清楚出现在镜头中，使用明亮环境。

  2. 2
    跟随区域

    按提示逐个练习，需要时切换内侧或外侧。

  3. 3
    查看报告

    完成后查看本次覆盖情况，不保存任何影像。

技术文档

刷牙训练系统技术说明

本系统采用浏览器端实时取景、姿态关键点计算、区域状态管理与轻量服务端复核组成的技术架构。以下内容只说明系统采用的技术、数据流和模块设计。

1. 系统流程图

HTML5 getUserMedia 采集视频流
↓
HTMLVideoElement 帧缓冲
↓
MediaPipe Tasks Vision 0.10.9 关键点推理
↓
FaceLandmarker
口腔基准点
HandLandmarker
手指关键点
Canvas 2D
叠加层绘制
↓
归一化坐标、方向向量与 12 区域映射
↓
内存会话统计 + Flask 复核接口 + 报告渲染

视频流由浏览器媒体接口提供，前端在内存中完成帧读取和坐标计算；FaceLandmarker 提供口腔参考点，HandLandmarker 提供手部关键点，随后通过归一化坐标映射到上 / 下、左 / 中 / 右和内 / 外侧的 12 个状态。Canvas 2D 负责参考线与定位点绘制，Flask 接收按间隔生成的压缩帧并返回结构化复核提示。

2. 软件基础信息

功能名称刷牙训练与分区检测系统
客户端形态HTML5 / CSS3 / JavaScript ES2022 单页浏览器应用
核心定位技术MediaPipe Tasks Vision 0.10.9、FaceLandmarker、HandLandmarker
浏览器接口HTML5 getUserMedia、HTMLVideoElement、Canvas 2D、requestAnimationFrame
服务端技术Python 3.12、Flask、Requests、Gunicorn
状态模型基于 JavaScript 内存对象的单次会话状态，包含计时器、动作点、方向、12 区域覆盖值
部署方式Ubuntu + systemd 进程托管 + Nginx HTTPS 反向代理
数据策略视频帧只在当前浏览器会话中处理；服务端不建立视频文件、图片目录、账号或历史记录

3. 软件系统设计

  1. 浏览器采集层：使用 getUserMedia 获取不带音频的摄像头 MediaStream，将流绑定到 HTMLVideoElement；页面离开、会话结束或重置时统一停止 MediaStreamTrack。
  2. 关键点计算层：通过 MediaPipe Tasks Vision 0.10.9 的 GPU 委托和 VIDEO 运行模式处理视频帧，FaceLandmarker 提取嘴唇上下左右参考点，HandLandmarker 提取食指与拇指候选点。
  3. 坐标与区域层：以嘴部中心和嘴宽构造归一化坐标系，计算候选点的横向偏移、纵向偏移和相邻帧位移，将结果编码为 `row-column-mode` 状态键。
  4. 会话状态层：使用 JavaScript 内存对象维护 120 秒计时、动作次数、当前方向、区域覆盖值和报告字段；不依赖数据库、Cookie 或本地持久化文件。
  5. 服务端复核层：前端按固定间隔将压缩 JPEG 作为 JSON 数据提交至 Flask `/api/review-frame`，Requests 负责可选的上游复核调用，超时或未配置时返回本地兜底结果。
  6. 展示与部署层：Canvas 2D 绘制参考圈和定位点，DOM 状态更新训练界面；Gunicorn 承载 Flask，systemd 管理进程，Nginx 仅提供 HTTPS 入口和路径转发。

4. 软件设计

视频采集模块

封装 getUserMedia、视频播放状态和 MediaStreamTrack 生命周期，提供前置摄像头约束、权限异常处理与结束清理。

关键点分析模块

封装 FaceLandmarker 与 HandLandmarker 的模型加载、VIDEO 模式逐帧调用、嘴部参考点计算和候选手指筛选。

区域映射模块

把归一化坐标和当前练习面编码成 12 个区域键，按区域独立累加覆盖值，并通过 Canvas 2D 显示当前参考位置。

计时与报告模块

使用 performance.now 与 setInterval 建立统一时间基准，计算剩余时间、覆盖数量、动作次数并生成会话内报告。

复核接口模块

Flask 提供健康检查和 `/api/review-frame` JSON 接口，限制单帧大小、校验数据格式并为上游不可用场景提供本地结果。

技术模块关键技术核心处理输出
采集与渲染getUserMedia、HTMLVideoElement、Canvas 2D视频流绑定、帧尺寸同步、参考图形绘制实时取景与定位叠加层
姿态定位FaceLandmarker、HandLandmarker嘴部基准与手指候选点提取归一化坐标点
状态计算JavaScript 内存状态、requestAnimationFrame方向向量、区域键、覆盖值和计时更新12 区域状态与动作提示
服务端复核Flask、Requests、JSON、JPEG帧大小限制、复核请求、超时兜底结构化提示结果
运行托管Gunicorn、systemd、Nginx、HTTPS进程守护、反向代理、TLS 终止稳定的 `/brushing-coach/` 服务入口

参考文献

英文原文与 PDF 下载

以下资料为与刷牙时长、区域覆盖、动作引导和数字化口腔卫生干预相关的公开英文文献。每份文件均已校验为可打开的 PDF。

  1. 01

    Manual toothbrushing techniques for plaque removal and the prevention of gingivitis — A systematic review with network meta-analysis

    Deinzer R, Weik U, Eidenhardt Z, et al. PLOS ONE. 2024;19(7):e0306302.

    关联内容：不同刷牙方向与手动刷牙方法的证据综述，可用于说明区域化、动作引导的研究背景。

    下载 PDF 33 页
  2. 02

    Effectiveness of a digital device providing real-time visualized tooth brushing instructions: A randomized controlled trial

    Takase N, Nishiura M, Okazawa Y, et al. PLOS ONE. 2020;15(6):e0235194.

    关联内容：验证实时可视化刷牙提示在成人刷牙训练场景中的应用价值。

    下载 PDF 14 页
  3. 03

    The effect of using a mobile application (“WhiteTeeth”) on improving oral hygiene: A randomized controlled trial

    Scheerman JFM, van Meijel B, van Empelen P, et al. International Journal of Dental Hygiene. 2020;18:73–83.

    关联内容：移动端教育、自动化辅导与口腔卫生行为改善的随机对照研究。

    下载 PDF 11 页
  4. 04

    Development of Tooth Brushing Recommendations Through Professional Consensus

    Glenny A-M, Walsh T, Iwasaki M, et al. International Dental Journal. 2024;74(3):526–535.

    关联内容：国际专业共识，涉及刷牙频率、时长、覆盖全牙面和日常口腔卫生行为建议。

    下载 PDF 10 页

文件来自开放获取文献库，仅用于本项目的学习、展示与研究参考；引用、再发布或商业使用请遵守各原文的许可与署名要求。