From 531a7ddd1417f2679332f36bbd58aab02bd531fb Mon Sep 17 00:00:00 2001 From: xsl Date: Mon, 28 Sep 2026 02:22:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=8D=E7=85=A7=E9=A1=B5=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=20Figma(=E6=AD=A3=E2=86=92=E5=8F=B3=E2=86=92=E5=B7=A6?= =?UTF-8?q?/=E9=95=9C=E5=83=8F=E9=A2=84=E8=A7=88/WebView=20=E5=8F=A3?= =?UTF-8?q?=E5=BE=84=E5=AE=9A=E4=BD=8D/85%=E9=81=AE=E7=BD=A9)=20+=20?= =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E8=B0=83=E5=BA=A6=E9=87=8D=E5=86=99=20+=20?= =?UTF-8?q?=E6=AD=A3=E8=84=B8=E7=85=A7=E4=B8=8D=E9=95=9C=E5=83=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 拍照顺序改为正脸→右脸→左脸(对齐 Figma),左右以用户本人为准;送检前按 target 重排为 [正,左,右] - 三步预览均镜像(Figma 侧脸轮廓按镜像绘制),后置镜头侧脸轮廓自动翻转;抓帧恒为原始视角 - 蒙版 viewBox 取 Figma 帧 y86–812(扣除微信导航栏)+ meet 缩放,文案/引导/提示按 726 高定位;框外 85% 黑,静态态白底 - 语音:流程音排队不截断、姿态提示挂起补播、倒计时等播报收尾、拍摄完成打断过时引导、出报告/退出清队列;去重仅限姿态提示 - 语音文件改名 step2-rightface / step3-leftface,同步清单、生成脚本与设计文档 - 精华卡去重复正文、推荐依据写明具体原因;年龄仅数字;toast 按字数延时;备注去内部质量码 - 新增无头浏览器冒烟测试 h5/test/e2e-browser.mjs Co-authored-by: Cursor --- docs/语音播报内容设计文档_V1.0.md | 17 +- h5/README.md | 30 +-- h5/assets/voice/manifest.json | 4 +- ...tep3-rightface.mp3 => step2-rightface.mp3} | Bin ...{step2-leftface.mp3 => step3-leftface.mp3} | Bin h5/css/style.css | 28 +-- h5/index.html | 16 +- h5/js/app.js | 210 ++++++++++++------ h5/test/e2e-browser.mjs | 183 +++++++++++++++ tools/gen_voice.py | 4 +- 10 files changed, 383 insertions(+), 109 deletions(-) rename h5/assets/voice/{step3-rightface.mp3 => step2-rightface.mp3} (100%) rename h5/assets/voice/{step2-leftface.mp3 => step3-leftface.mp3} (100%) create mode 100644 h5/test/e2e-browser.mjs diff --git a/docs/语音播报内容设计文档_V1.0.md b/docs/语音播报内容设计文档_V1.0.md index 734322c..307dff4 100644 --- a/docs/语音播报内容设计文档_V1.0.md +++ b/docs/语音播报内容设计文档_V1.0.md @@ -20,18 +20,18 @@ | 文件名 | 文案 | 触发时机 | 时长 | |---|---|---|---| | `step1-front.mp3` | 请单人正脸出镜,面部对准取景框 | 进入拍照页 1/3 正脸步 | ≈3s | -| `step2-leftface.mp3` | 请慢慢向右转头,露出左脸 | 进入 2/3 左脸出镜步 | ≈3s | -| `step3-rightface.mp3` | 请保持单人出镜,慢慢向左转头,露出右脸 | 进入 3/3 右脸出镜步 | ≈4s | +| `step2-rightface.mp3` | 请保持单人出镜,慢慢向左转头,露出右脸 | 进入 2/3 右脸出镜步 | ≈4s | +| `step3-leftface.mp3` | 请慢慢向右转头,露出左脸 | 进入 3/3 左脸出镜步 | ≈3s | -> 语义说明:拍摄顺序为正脸 → 左脸 → 右脸。2/3 步需要画面中看到「左脸」= 用户头向**右**转;3/3 步看到「右脸」= 头向**左**转。语音引导的是用户动作,与取景蒙版方向一致,不要改写成"露出左侧/右侧脸"这类歧义表述。 +> 语义说明:拍摄顺序对齐 Figma,为正脸 → 右脸 → 左脸。左右一律以**用户本人**的左右为准:2/3「右脸」= 用户头向自己的**左**侧转;3/3「左脸」= 头向自己的**右**侧转。前置预览为镜像(照镜子),与取景蒙版方向一致。不要改写成"露出左侧/右侧脸"这类歧义表述。 ### B. 姿态提示(实时检测不通过时播,同一提示 4 秒内不重复) | 文件名 | 文案 | 触发时机(与屏幕提示同文本) | 时长 | |---|---|---|---| | `hint-noface.mp3` | 未检测到人脸,请正对镜头 | 画面无人脸 | ≈3s | -| `hint-near.mp3` | 请靠近一点 | 人脸框过高占比 <35%(太远) | ≈1.5s | -| `hint-far.mp3` | 请远一点 | 占比 >80%(太近) | ≈1.5s | +| `hint-near.mp3` | 请靠近一点 | 人脸框高占画面高 <26%(太远) | ≈1.5s | +| `hint-far.mp3` | 请远一点 | 占比 >58%(太近) | ≈1.5s | | `hint-front.mp3` | 请正对屏幕 | 正脸步角度不合格(正脸步一律只提示回正,不播转头/抬头低头) | ≈1.5s | | `hint-turn-left.mp3` | 请向左转头 | 仅侧脸步:需要头向左转修正角度时 | ≈1.5s | | `hint-turn-right.mp3` | 请向右转头 | 仅侧脸步:需要头向右转修正角度时 | ≈1.5s | @@ -50,8 +50,11 @@ 1. **清单制**:语音文件配 `assets/voice/manifest.json`(格式 `{"files":["step1-front","hint-near",...]}`,内容为已生成的文件名去 .mp3)。前端只播清单里声明的条目;清单或条目缺失时该条静默跳过——语音文件可分批补齐,每次补齐后更新清单。 2. **浏览器自动播放限制**:首次播放必须发生在用户手势链路里。前端在任意按钮点击时初始化并 resume WebAudio(点击「开始检测/继续/开始」即完成解锁),后续步骤提示均为程序触发。 -3. **同条去重**:同一文件名 4 秒内不重复播(姿态提示会随检测帧反复触发)。 -4. **不叠加**:新提示开播前停掉上一条未播完的(单通道);例外:倒计时「三、二、一」不在播报中途拦腰切入——姿态达标后先等「保持不动」等在播提示音自然收尾,再同步起播倒计时语音与画面数字(`voice.afterCurrent` 接续,期间姿态被破坏则取消倒计时)。 +3. **同条去重**:姿态提示同一文件名 4 秒内不重复播(会随检测帧反复触发);流程音是离散事件,每次都播(连拍的「拍摄完成」、取消后重来的倒计时)。 +4. **不叠加、不截断**:单通道,两类播报分开处理—— + - **流程音**(A 类步骤引导 + C 类倒计时/拍摄完成/分析中):排队顺序播,不互相截断(如「拍摄完成」播完再播下一步引导)。例外:`analyze-fail` 直接打断「分析中」。 + - **姿态提示**(B 类):提示之间可互相打断;流程音播放期间到来的提示不截断流程音,只挂起最新一条,流程音收尾后补播;换步或提示清空时挂起作废。 + - 倒计时「三、二、一」等全部在播/排队/挂起的播报自然收尾后,与画面数字同步起播(`voice.afterCurrent` 接续,期间姿态被破坏则取消倒计时)。 5. **不打断原则**:分析中/失败提示开播时,拍照页已离开,步骤与姿态提示不再触发。 6. **静音开关**:V1.0 暂不提供 UI 开关,跟随系统音量与静音键;后续如加开关,在拍照页右上角放小喇叭图标,状态存 localStorage。 diff --git a/h5/README.md b/h5/README.md index 9e5b532..6e7b69d 100644 --- a/h5/README.md +++ b/h5/README.md @@ -51,18 +51,18 @@ node server.js # 默认 8080,可用 PORT=xxx 修改 ## 拍照交互(引导式自动三连拍) -三步:1/3 正脸(target `front`)→ 2/3 左脸出镜(用户头向右转,target `left`,产物作 `left_image`)→ 3/3 右脸出镜(头向左转,target `right`,产物作 `right_image`)。 +三步(顺序对齐 Figma,左右一律以用户本人为准):1/3 正脸(target `front`)→ 2/3 右脸出镜(用户头向自己的左侧转,target `right`,产物作 `right_image`)→ 3/3 左脸出镜(头向自己的右侧转,target `left`,产物作 `left_image`)。送检前 `photosByView` 按 target 重排为 [正, 左, 右]。 - **步骤圆点**:顶部三点,当前步高亮、完成步绿色打勾。 -- **取景蒙版**:内联 SVG(`#cam-mask`)按步骤切换轮廓——正脸步为正脸剪影(含耳部),侧脸步为对应方向的侧脸剪影(鼻朝向与转头方向一致);**轮廓路径由 Figma 拍照示意图(`design/assets/images/*-拍照示意.png` 的 alpha 镂空区)逐像素描摹生成**,等比缩放到 375×812 viewBox;框外纯黑不透明(SVG mask 镂空,对齐 Figma:只有轮廓内显示实时画面),轮廓线 2.5px 半透明白。未检测到人脸时轮廓呼吸动画(1.8s);姿态 ok 时轮廓变绿并停止动效。 +- **取景蒙版**:内联 SVG(`#cam-mask`)按步骤切换轮廓——正脸步为正脸剪影(含耳部),侧脸步为对应方向的侧脸剪影(鼻朝向与转头方向一致);**轮廓路径由 Figma 拍照示意图(`design/assets/images/*-拍照示意.png` 的 alpha 镂空区)逐像素描摹生成**,坐标为 Figma 375×812 整帧,viewBox 只取 y 86–812(帧顶 86px 是微信导航栏,H5 视口从其下方开始;步骤文案/引导等纵向百分比也以 726 高为基准);框外 85% 黑(SVG mask 镂空,对齐 Figma 图层不透明度),轮廓线 2.5px 半透明白。未检测到人脸时轮廓呼吸动画(1.8s);姿态 ok 时轮廓变绿并停止动效。 - **正脸步提示口径**:正脸步角度不合格一律只提示「请正对屏幕」(不再提示左右转头/抬头低头),阈值 |yaw|≤15°、|pitch|≤18°(2026-09-28 产品要求放宽);侧脸步仍按方向提示「请向左/右转头」。 -- **实时检测**:face-api 从本地 `vendor/faceapi/` 加载(`tinyFaceDetector` + `faceLandmark68Net`)。进入拍照页即开始加载模型(状态提示"检测引擎加载中…"),加载完成前快门为手动模式。检测循环 ~150ms 一帧,`detectSingleFace(video, TinyFaceDetectorOptions({inputSize:416, scoreThreshold:0.3})).withFaceLandmarks()` 后拿 68 特征点调 `HeadPose.check(pos, target, mirrored)`——mirrored 正脸步跟随镜头(前置 true/后置 false),侧脸步恒 false(预览不镜像,特征点即原始视角;个别前置帧已镜像的机型由侧脸自校准翻转 `sideYawFlip`,只动判定不动画面);连续漏检 ≥3 帧才报"未检测到人脸"(容忍单帧抖动);人脸框高度占比 <26% 提示"请靠近一点"、>58% 提示"请远一点"(以取景框≈42% 屏高标定)。提示一次一条,优先级:无人脸 > 距离 > 角度。 +- **实时检测**:face-api 从本地 `vendor/faceapi/` 加载(`tinyFaceDetector` + `faceLandmark68Net`)。进入拍照页即开始加载模型(状态提示"检测引擎加载中…"),加载完成前快门为手动模式。检测循环 ~150ms 一帧,`detectSingleFace(video, TinyFaceDetectorOptions({inputSize:416, scoreThreshold:0.3})).withFaceLandmarks()` 后拿 68 特征点调 `HeadPose.check(pos, target, mirrored)`——特征点取自原始帧(预览 CSS 镜像不影响),侧脸步 mirrored 恒 false(个别前置帧已镜像的机型由侧脸自校准翻转 `sideYawFlip`,只动判定不动画面),正脸步只看 |yaw|;连续漏检 ≥3 帧才报"未检测到人脸"(容忍单帧抖动);人脸框高度占比 <26% 提示"请靠近一点"、>58% 提示"请远一点"(以取景框≈42% 屏高标定)。提示一次一条,优先级:无人脸 > 距离 > 角度。 - **倒计时自动拍**:姿态 ok 连续维持 ≥600ms 后,先等「保持不动」等在播提示音自然收尾(画面保持绿框+保持不动),再进 3s 倒计时(中央大数字,轮廓保持绿色,数字与「三、二、一」语音同步起播,不再拦腰切断);倒计时中任一帧不 ok 立即取消并回到对应提示。倒计时结束进入白屏补光。 -- **镜像策略**:正脸步前置镜像(自拍习惯),侧脸步预览与抓帧均不镜像(所见即摄像头原始视角,轮廓鼻朝向与转头方向一致,左右不再迷惑);后置镜头全程不镜像。 -- **白屏补光**:全屏纯白覆盖层瞬间点亮,~300ms 后抓全分辨率帧(与预览同镜像策略 + 最长边 1280 JPEG),保持 ~300ms 再淡出(总 600–900ms),同步 `navigator.vibrate(30)`。 +- **镜像策略**:前置镜头三步**预览**都镜像(照镜子习惯;Figma 侧脸轮廓即按镜像画面绘制:右脸出镜耳在画面右、左脸出镜耳在画面左);后置镜头预览不镜像,侧脸轮廓随之水平翻转(`.cam-mask.flip`)。**抓帧一律不镜像**:三张照片都是摄像头原始视角,Face++ 左右分区文案(左嘴角纹/左右脸颊)对应用户真实左右,与真值样本同口径。 +- **白屏补光**:全屏纯白覆盖层瞬间点亮,~300ms 后抓全分辨率帧(原始视角 + 最长边 1280 JPEG),保持 ~300ms 再淡出(总 600–900ms),同步 `navigator.vibrate(30)`。 - **手动兜底**:快门任何时刻可拍当前步(同样走白屏补光),不依赖检测;face-api/模型加载失败 → toast"自动识别不可用,已切换手动拍摄",全程手动。系统相机降级模式(getUserMedia 不可用/被拒)维持原样:无检测、无补光。 - **相册选图**:相机页「相册」按钮可选当前步的图片(任何模式下可用),与实拍同管线(压 1280 → 推进流程)。 -- **语音播报**:步骤引导/姿态提示/倒计时/拍摄完成/分析中/失败共 14 条,文案与文件名契约见 `../docs/语音播报内容设计文档_V1.0.md`。WebAudio 单通道播放、同条 4s 去重;`assets/voice/manifest.json` 清单制,**语音文件待生成**——清单未提供时全部静默跳过。 +- **语音播报**:步骤引导/姿态提示/倒计时/拍摄完成/分析中/失败共 14 条,文案与文件名契约见 `../docs/语音播报内容设计文档_V1.0.md`。WebAudio 单通道、姿态提示同条 4s 去重、解锁后预加载全部条目;流程音(步骤/拍摄完成/倒计时/分析中)排队顺序播放互不截断,姿态提示不截断流程音(期间只挂起最新一条,收尾后补播),失败提示可打断「分析中」。`assets/voice/manifest.json` 清单制(14 条已生成),清单缺失的条目静默跳过。 - **无进展提示**:单步 12s 未触发倒计时,底部浮出"识别不到?可点下方快门手动拍摄"(不阻塞流程)。 - **资源管理**:离开拍照页(cam-back/完成)停止检测循环、清全部定时器、释放摄像头;`camSeq`(流程)/`camSeqCam`(相机)双令牌防竞态;face-api 模型只加载一次(缓存 promise,失败后下次进入重试)。 @@ -70,7 +70,7 @@ node server.js # 默认 8080,可用 PORT=xxx 修改 1. 三视图送检:POST `/api/skin-analyze`,请求 `{ front_image, left_image, right_image }`(base64 可带 dataURL 前缀;正脸=photos[0],左=photos[2],右=photos[1])。 2. 服务端转发 Face++ **专业版 `skinanalyze_pro`**(三视图必须走 `image_file` 文件形式),请求 `return_side_results=jawline_info` 取左右下颌线角度,`return_maps`/`return_marks` 取叠加图与标注;响应 `{ ok:true, result, face_rectangle, side:{ left, right } }`,失败 `{ ok:false, code, message }`(message 已是用户可读文案)。`result.face_maps` 为对象,含报告页所需图层的完整 data URL(`red_area`/`brown_area`/`texture_enhanced_lines`/`texture_enhanced_pores`/`texture_enhanced_blackheads`,由 server.js 的 `REPORT_MAPS` 常量控制);`marks` 坐标(`acne`/`brown_spot`/`mole`/`closed_comedones`/`acne_pustule`/`acne_nodule`/`wrinkle_mark`/`melanin_mark`/`dark_circle_mark`)随 `result` 原样透传,与上传图片同一像素空间。 -3. 评分由 `js/skin-score.js` 引擎完成,公式/锁值/话术/产品推荐以 `docs/三维度评分与话术生成需求文档_V2.2.docx` 为最高契约(V2.2 口径): +3. 评分由 `js/skin-score.js` 引擎完成,公式/锁值/话术/产品推荐以 `docs/三维度评分与话术生成需求文档_V2.3.docx` 为最高契约(V2.3 口径,含 §8.5 护理建议五段): - 6 分类:轮廓 = min(眼袋映射分, 下颌线角度分);皱纹(12 分区);光滑(毛孔/黑头/纹理);肤色水润(色素×水润);敏感(泛红面积取 `red_spot.red_spot_area`/红区分);痘痘(分级映射×丘疹 `acne.count` 计数扣分);分组按实际年龄; - 三维度木桶 min:紧塑力(轮廓+皱纹)、活力感(光滑+肤色水润)、稳定力(敏感+痘痘); - S = 7 + 3×P/100;档位:良好(P≥90)/改善(80–90)/预警(<80);肤龄钳制到实际年龄 ±3 并留痕;三视图版 18 条话术; @@ -78,12 +78,13 @@ node server.js # 默认 8080,可用 PORT=xxx 修改 4. 前端 `SkinScore.buildViewModel(data.result, data.side, { realAge, skinType })` → viewModel 直渲报告页: - 头部:综合评分(`vm.total`,缺失回退三维度 S 均分×10)、肤龄 `vm.skinAgeDisplay` + 钳制标记 `vm.ageClampNote`;三维度 S(1 位小数)+ 档位配色(良好绿/改善琥珀/预警红); - 三个 Tab 面板各展示所辖两分类:分类名、S + 档位徽章、话术正文(`vm.cats.*.text`);P 值不直接展示,`P=null` 的分类显示"本次未检出有效数据"; - - 报告底部:降级标注(`vm.notes` 非空才展示,如下颌线未参与评分)、综合分析(`vm.summary`)、生活方式建议(`vm.lifestyle`)、精华推荐卡(`vm.essence` + 触发判据); + - 报告底部:降级标注(`vm.notes` 中与侧脸/下颌线/补拍相关的条目,去掉接口质量码后展示)、护理建议五段(`vm.careAdvice`)、精华推荐卡(`vm.essence.name` + 命中判据;推荐正文已在护理建议第 4 段,卡内不重复); - 近期优先关注 = 最差维度(`vm.focus`);6 分类各配检测可视化图:轮廓=正脸实拍、皱纹=正脸压暗+`texture_enhanced_lines` 皱纹增强线(线图层几乎全透明,直挂白底不可读,故与压暗沉脸合成)、光滑=正脸+色斑/痣/痤疮标记叠加、肤色=`brown_area` 色沉图、敏感=`red_area` 红区图、痘痘=正脸+闭口粉刺/痤疮标记叠加(marks 按原像素坐标叠加到正脸实拍)。 -5. 真值回归:`node h5/test/regression.js` 以 `docs/皮肤检测测试结果_三视图_20260926.xlsx`(sheet「三视图检测汇总」,数据第 3/4 行=案例1/案例2)两组三视图真值对照评分引擎输出。 -6. **报告历史**:检测成功后按「检测」为单位存入 localStorage(`juzi.reports.v1`,上限 5 条,超配额逐条淘汰)——含三张照片、档案、全部评分数据与 marks 坐标,**不含 face_maps 整幅图层**(体积原因;回看时皱纹/肤色/敏感图降级为占位,光滑/痘痘标记叠加仍可用)。当前无 UI 入口(第9轮移除),数据仅作本地追溯。 -7. **原始返回落盘**:服务端每次检测成功后把 Face++ 完整原始返回写入 `h5/data/results/<时间戳>-.json`(复核/真值用,已 .gitignore;写盘失败不影响响应)。 -8. 检测失败按服务端 message 提示并退回档案页。 +5. 浏览器冒烟:`node h5/test/e2e-browser.mjs`(需全局 `playwright` + `npx playwright install chromium`,服务跑在 8080)——mock 三连拍到报告页,并核对 14 条语音可拉取、流程语音完整播完不被截断。 +6. 真值回归:`node h5/test/regression.js` 以 `docs/皮肤检测测试结果_三视图_20260926.xlsx`(sheet「三视图检测汇总」,数据第 3/4 行=案例1/案例2)两组三视图真值对照评分引擎输出。 +7. **报告历史**:检测成功后按「检测」为单位存入 localStorage(`juzi.reports.v1`,上限 5 条,超配额逐条淘汰)——含三张照片、档案、全部评分数据与 marks 坐标,**不含 face_maps 整幅图层**(体积原因;回看时皱纹/肤色/敏感图降级为占位,光滑/痘痘标记叠加仍可用)。当前无 UI 入口(第9轮移除),数据仅作本地追溯。 +8. **原始返回落盘**:服务端每次检测成功后把 Face++ 完整原始返回写入 `h5/data/results/<时间戳>-.json`(复核/真值用,已 .gitignore;写盘失败不影响响应)。 +9. 检测失败按服务端 message 提示并退回档案页。 ## 部署 @@ -129,8 +130,9 @@ server { ## 已知占位清单 - 产品图(prod-1.jpg)为设计稿素材;检测图已替换为用户实拍。 -- **语音文件待生成**:播报文案/文件名/格式已定(`../docs/语音播报内容设计文档_V1.0.md`),生成后放入 `assets/voice/` 并更新 `manifest.json` 即生效。 -- 切换镜头、「了解更多」为开发中占位(Toast 提示)。 +- 语音 14 条已由 `tools/gen_voice.py` 生成;改文案后重跑脚本并同步 `manifest.json`。 +- 「了解更多」为开发中占位(Toast 提示);拍照页右下按钮为切换前后镜头(系统相机降级模式下提示在系统相机内切换)。 +- 产品推荐卡(COREⅡ 双仓精华液)为设计稿固定素材,不随精华推荐档位(25+/35+/50+)变化,待产品提供三档对应素材。 - **姿态与距离参数已用模拟摄像头校准**(2026-09-27):以 C3 三视图(+45° 侧脸)生成 Y4M 模拟摄像头视频,闭环修正了 yaw 增益(2.2→3.8)、pitch 基线(0.32→0.45)、check() 双重镜像符号 bug、距离阈值(0.35/0.8→0.26/0.58)、检测参数(320/0.4→416/0.3)与漏检 3 帧容忍;自动三连拍在无头浏览器全程通过(e2e E7)。**真机仍建议复核一次**:不同机型前置镜像策略/取景比例可能微调体验(校准接口:调用方 `mirrored` 标志与 `HeadPose.config`)。 ## 技术说明 diff --git a/h5/assets/voice/manifest.json b/h5/assets/voice/manifest.json index 14a976e..db39a8f 100644 --- a/h5/assets/voice/manifest.json +++ b/h5/assets/voice/manifest.json @@ -1,8 +1,8 @@ { "files": [ "step1-front", - "step2-leftface", - "step3-rightface", + "step2-rightface", + "step3-leftface", "hint-noface", "hint-near", "hint-far", diff --git a/h5/assets/voice/step3-rightface.mp3 b/h5/assets/voice/step2-rightface.mp3 similarity index 100% rename from h5/assets/voice/step3-rightface.mp3 rename to h5/assets/voice/step2-rightface.mp3 diff --git a/h5/assets/voice/step2-leftface.mp3 b/h5/assets/voice/step3-leftface.mp3 similarity index 100% rename from h5/assets/voice/step2-leftface.mp3 rename to h5/assets/voice/step3-leftface.mp3 diff --git a/h5/css/style.css b/h5/css/style.css index d4421c7..9ecd019 100644 --- a/h5/css/style.css +++ b/h5/css/style.css @@ -198,10 +198,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } /* ═══════════ 05-07 拍照页 ═══════════ */ #s-cam { background: #000; } -.cam-bg { - position: absolute; inset: 0; - background-size: cover; background-position: center; -} +/* 相机未就绪/降级时的静态态:白底经蒙版 85% 压暗 → 框外深灰、轮廓内白,即 Figma 05-07 静态稿 */ +.cam-bg { position: absolute; inset: 0; background: #fff; } /* 实时相机画面(getUserMedia 成功后显示,盖住静态示意图) */ #cam-video { position: absolute; inset: 0; @@ -212,11 +210,12 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } } #s-cam.cam-live #cam-video { display: block; } #s-cam.cam-live .cam-bg { display: none; } -/* 设计稿(Figma 05-07):取景框外全黑,仅轮廓镂空区显示实时画面,不再整屏压暗 */ +/* 设计稿(Figma 05-07):压暗只在取景蒙版框外(.cam-dim-rect),不再整屏压暗 */ #s-cam::before { content: none; } #s-cam .nav { position: fixed; left: 0; right: 0; } +/* 拍照页纵向定位按 WebView 口径:Figma 帧 812 高扣掉顶部 86px 微信导航栏 = 726 高视口,百分比均以 726 为基准 */ .cam-step { - position: absolute; left: 0; right: 0; top: 16.5%; + position: absolute; left: 0; right: 0; top: 6.4%; text-align: center; color: #fff; font-size: 21px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; @@ -224,7 +223,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } z-index: 2; } .cam-guide { - position: absolute; left: 0; right: 0; bottom: 20%; + position: absolute; left: 0; right: 0; bottom: 22.4%; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 2; } @@ -248,9 +247,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } } .cam-fill.on { opacity: 1; transition: none; } -/* 步骤圆点:当前步高亮、完成步绿色打勾 */ +/* 步骤圆点:当前步高亮、完成步绿色打勾(Figma 无此元素,放在步骤文案与取景轮廓之间的空隙) */ .cam-dots { - position: absolute; top: calc(var(--nav-h) + 10px); left: 0; right: 0; + position: absolute; top: 16.2%; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; z-index: 2; } @@ -266,7 +265,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } text-align: center; font-size: 8px; line-height: 10px; color: #fff; } -/* 取景蒙版:SVG mask 镂空 + 轮廓线框,按 data-step 切换轮廓;框外纯黑不透明(对齐 Figma:只有轮廓内显示画面) */ +/* 取景蒙版:SVG mask 镂空 + 轮廓线框,按 data-step 切换轮廓;框外 85% 黑 */ .cam-mask { position: absolute; inset: 0; width: 100%; height: 100%; @@ -276,7 +275,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } .cam-mask[data-step="0"] [data-shape="0"], .cam-mask[data-step="1"] [data-shape="1"], .cam-mask[data-step="2"] [data-shape="2"] { display: block; } -.cam-dim-rect { fill: #000; } /* 框外全黑(Figma 设计):摄像头画面只在轮廓镂空区可见 */ +.cam-mask.flip { transform: scaleX(-1); } /* 后置镜头预览不镜像:侧脸轮廓随之翻转 */ +.cam-dim-rect { fill: #000; fill-opacity: .85; } /* Figma 05-07 框外为 85% 黑(alpha 217):环境隐约可见,人脸只在轮廓内清晰 */ .cam-line path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.5; } /* 未检测到人脸:轮廓呼吸动画(~1.8s);姿态 ok:品牌绿定格 */ @keyframes maskBreath { 0%,100% { stroke-opacity: .3; } 50% { stroke-opacity: .95; } } @@ -285,7 +285,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } /* 检测引擎加载状态(小字胶囊) */ .cam-status { - position: absolute; top: calc(var(--nav-h) + 32px); left: 50%; + position: absolute; top: 17px; left: 50%; /* 与悬浮返回键同一行,不压步骤文案 */ transform: translateX(-50%); font-size: 10px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); @@ -565,7 +565,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } .vm-notes { font-size: 7px; font-weight: 400; color: var(--grey-3); line-height: 1.7; margin: 0 2px 9px; } /* 精华推荐卡 */ .essence-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } -.essence-triggers { font-size: 7px; color: var(--grey-3); margin-top: 6px; } +.essence-triggers { font-size: 8.7px; color: var(--grey-3); margin-top: 6px; } /* 设计规范 Caption 级:验收要求展示命中判据,需可读 */ /* ═══════════ 第5轮:报告页检测可视化(face_maps 图层 / marks 叠加,新增,不动以上已验收样式) ═══════════ */ /* 分类卡检测图复用 .ditem-img(左图右文、92×96 裁切);无检测图时(hidden)卡片退回文字占位 */ @@ -673,7 +673,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; } .rs { z-index: 50; } .rs-list { z-index: 50; } /* #4 无进展提示再上移(取景/拍摄区下方,引导 chips 上方) */ -.cam-nudge { bottom: 24%; } +.cam-nudge { bottom: 17.5%; } /* 引导 chips(bottom 22.4%) 与快门之间 */ /* #6 报告页头部:按 Figma 08 还原为内联白底顶栏(见报告页主区块),不再悬浮 */ /* ═══════════ 第9轮:真机反馈 ═══════════ */ diff --git a/h5/index.html b/h5/index.html index 3d19907..2a79ab6 100644 --- a/h5/index.html +++ b/h5/index.html @@ -90,13 +90,14 @@

1/3
请单人正脸出镜

- -

精华推荐

--

-

--

diff --git a/h5/js/app.js b/h5/js/app.js index 5590a87..7acce79 100644 --- a/h5/js/app.js +++ b/h5/js/app.js @@ -10,7 +10,8 @@ toastEl.textContent = msg; toastEl.classList.add('show'); clearTimeout(toastTimer); - toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, 1800); + // 长文案(如检测失败原因)按字数延长停留,短提示仍 1.8s + toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, Math.max(1800, String(msg).length * 130)); } /* ─── 屏幕管理 ─── */ @@ -64,6 +65,7 @@ $('#p-analyzing').addEventListener('click', function (e) { if (e.target !== this) return; // 只响应遮罩空白处,不误伤卡片 camSeq++; + voice.stop(true); closeOverlay('p-analyzing'); stopCamera(); shutterLock = false; // 流程终止解锁 @@ -164,20 +166,30 @@ }); document.addEventListener('click', rsClose); // 点空白收起 + // 年龄只收数字:inputmode=numeric 在部分安卓输入法仍可切到全键盘 + $('#f-age').addEventListener('input', function () { + var v = this.value.replace(/\D/g, '').slice(0, 2); + if (v !== this.value) this.value = v; + }); + /* ─── 实时相机(getUserMedia)+ 系统相机降级 ─── */ var IS_MOCK = /[?&]mock=1/.test(location.search); // mock:不加载 face-api、不跑检测,analyze 直返内置样本 var camVideo = $('#cam-video'), camFile = $('#cam-file'), albumFile = $('#album-file'); var camStream = null, camLive = false, camFallback = false, camSeqCam = 0; // camSeqCam:相机启动令牌,防止迟到的授权回调泄漏摄像头 - var photos = []; // 三连拍(dataURL),与 CAM_STEPS 同序:[0]正脸 [1]左脸(头右转) [2]右脸(头左转) + var photos = []; // 三连拍(dataURL),拍摄中与 CAM_STEPS 同序;送检前经 photosByView 重排为 [正脸, 左脸, 右脸] // 约束逐级放宽:facingMode 裸值在部分 Android 抛 OverconstrainedError,先 ideal 再退 video:true,最后才降级 var camFacing = 'user'; // 当前镜头:'user' 前置 | 'environment' 后置(翻转按钮切换) - var camMirrored = true; // 前置镜像开关:仅正脸步生效(自拍习惯);侧脸步始终不镜像(左右不再迷惑,与取景轮廓方向一致) + var camMirrored = true; // 预览镜像:前置 true(照镜子习惯,Figma 侧脸轮廓即按镜像画面绘制),后置 false var sideYawFlip = false; // 侧脸步语义 yaw 反向标志:个别机型前置帧本身已镜像时由自校准翻转 var mirrorCalibrated = false; // 侧脸自校准:本轮是否已翻转过一次(防振荡,一次校准管整个会话) var oppFrames = 0; // 侧脸步语义 yaw 连续反向帧计数 - // 预览/抓帧是否镜像:正脸步跟随 camMirrored,侧脸步恒不镜像 - function effMirror() { return camMirrored && CAM_STEPS[camStep].target === 'front'; } + // 预览是否镜像(仅预览;抓帧恒为原始视角)。后置不镜像时侧脸轮廓需水平翻转,才与画面中的脸朝向一致 + function effMirror() { return camMirrored; } + function applyMirror() { + camVideo.classList.toggle('mirror', effMirror()); + $('#cam-mask').classList.toggle('flip', !effMirror() && CAM_STEPS[camStep].target !== 'front'); + } function getCamStream() { return navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: camFacing }, width: { ideal: 1280 }, height: { ideal: 1280 } }, @@ -210,7 +222,7 @@ if (token !== camSeqCam) { stream.getTracks().forEach(function (t) { t.stop(); }); return; } // 期间已退出拍照页:立即释放 camStream = stream; camVideo.srcObject = stream; - camVideo.classList.toggle('mirror', effMirror()); + applyMirror(); // iOS 来电/切后台等系统打断会结束 track:挂 ended 监听走自动重连 stream.getTracks().forEach(function (t) { t.onended = function () { onCamTrackEnded(token); }; @@ -250,8 +262,9 @@ resetDetectState(); // 降级无检测、无补光:蒙版回到静态线框 toast('已切换为系统相机拍摄'); } - // 从视频帧截取照片(完整帧,不镜像侧脸步;压到最长边 1280 的 JPEG) + // 从视频帧截取照片(完整帧、摄像头原始视角,压到最长边 1280 的 JPEG) // 抓完整帧而非取景框可见区:新 UI 轮廓外全黑,用户只关注轮廓内人脸;按可见区裁切在侧脸/偏站位时会切掉人脸(Face++ INVALID_IMAGE_FACE) + // 正脸步预览虽镜像,照片不镜像:Face++ 的左右分区(左嘴角纹/左右脸颊等)按真实左右出文案,且与两张侧脸及真值样本同口径 function captureFromVideo() { var vw = camVideo.videoWidth, vh = camVideo.videoHeight; if (!vw || !vh) return null; @@ -260,7 +273,6 @@ var canvas = document.createElement('canvas'); canvas.width = cw; canvas.height = ch; var ctx = canvas.getContext('2d'); - if (effMirror()) { ctx.translate(cw, 0); ctx.scale(-1, 1); } // 与预览一致:正脸步前置镜像,侧脸步不镜像(照片=摄像头原始视角) ctx.drawImage(camVideo, 0, 0, vw, vh, 0, 0, cw, ch); return canvas.toDataURL('image/jpeg', 0.88); } @@ -302,7 +314,7 @@ /* ─── 语音播报(WebAudio 单通道;assets/voice/.mp3,缺失静默跳过;同条 4s 去重) 文案/文件名契约:docs/语音播报内容设计文档_V1.0.md ─── */ var VOICE = { - step: ['step1-front', 'step2-leftface', 'step3-rightface'], + step: ['step1-front', 'step2-rightface', 'step3-leftface'], hint: { '未检测到人脸': 'hint-noface', '请靠近一点': 'hint-near', '请远一点': 'hint-far', '请正对屏幕': 'hint-front', '请向左转头': 'hint-turn-left', '请向右转头': 'hint-turn-right', @@ -310,51 +322,110 @@ }, countdown: 'countdown-321', shot: 'shot-done', analyzing: 'analyzing', fail: 'analyze-fail' }; + // 两类播报:流程音(步骤引导/拍摄完成/倒计时/分析中/失败)排队顺序播,互不截断; + // 姿态提示可互相打断,但不截断流程音——流程音播放期间只挂起最新一条,收尾后补播 var voice = (function () { - var ctx = null, lastAt = {}, cur = null, curEnd = 0, files = null; // files:null=清单未加载;{}=无可用语音 + var ctx = null, lastAt = {}, files = null; // files:null=清单未加载;{}=无可用语音 + var bufs = {}; // id → Promise(解锁后预加载,弱网下首播不等下载) + var cur = null; // { id, kind:'flow'|'hint', token, src, end } + var queue = []; // 排队中的流程音 + var pendingHint = null; // 流程音期间到来的姿态提示(只留最新) + var waiters = []; // afterCurrent 回调:全部播报收尾后执行 // 清单制:只播 assets/voice/manifest.json 里声明的文件,不逐个探文件(避免控制台 404 噪音) fetch('assets/voice/manifest.json') .then(function (r) { return r.ok ? r.json() : { files: [] }; }) - .then(function (m) { files = {}; (m.files || []).forEach(function (f) { files[f] = 1; }); }) + .then(function (m) { files = {}; (m.files || []).forEach(function (f) { files[f] = 1; }); preload(); }) .catch(function () { files = {}; }); + function decode(ab) { + return new Promise(function (resolve) { + try { + var p = ctx.decodeAudioData(ab, resolve, function () { resolve(null); }); + if (p && p.catch) p.catch(function () { resolve(null); }); + } catch (e) { resolve(null); } + }); + } + function load(id) { + if (!bufs[id]) { + bufs[id] = fetch('assets/voice/' + id + '.mp3') + .then(function (r) { return r.ok ? r.arrayBuffer() : null; }) + .then(function (ab) { return ab ? decode(ab) : null; }) + .catch(function () { return null; }) + .then(function (buf) { if (!buf) delete bufs[id]; return buf; }); // 失败不缓存,下次再试 + } + return bufs[id]; + } + function preload() { if (ctx && files) Object.keys(files).forEach(load); } function unlock() { // iOS/微信自动播放限制:必须在用户手势里初始化并 resume - if (!ctx) { try { ctx = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) { ctx = null; } } + if (!ctx) { + try { ctx = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) { ctx = null; } + preload(); + } if (ctx && ctx.state === 'suspended') ctx.resume(); } - function play(id) { + function stopCur() { + if (!cur) return; + var c = cur; + cur = null; + if (c.src) { c.src.onended = null; try { c.src.stop(); } catch (e) {} } + } + function start(id, kind) { + stopCur(); + lastAt[id] = Date.now(); + var token = {}; + cur = { id: id, kind: kind, token: token, src: null, end: 0 }; + load(id).then(function (buf) { + if (!cur || cur.token !== token) return; // 加载期间已被打断 + if (!buf || !ctx) { cur = null; drain(); return; } + var src = ctx.createBufferSource(); + src.buffer = buf; + src.connect(ctx.destination); + cur.src = src; + cur.end = Date.now() + buf.duration * 1000; + src.onended = function () { if (cur && cur.token === token) { cur = null; drain(); } }; + src.start(0); + }); + } + function drain() { + if (cur) return; + if (queue.length) { start(queue.shift(), 'flow'); return; } + if (pendingHint) { var h = pendingHint; pendingHint = null; start(h, 'hint'); return; } + var w = waiters; + waiters = []; + w.forEach(function (fn) { fn(); }); + } + function busyWithFlow() { return (cur && cur.kind === 'flow') || queue.length > 0; } + // opts.hint:姿态提示(随检测帧反复触发,同条 4s 去重);opts.cut:打断在播与排队(失败提示不必等「分析中」播完) + // 流程音是离散事件,每次都播(连拍的「拍摄完成」、取消后重来的倒计时) + function play(id, opts) { + opts = opts || {}; if (!ctx || !id || ctx.state !== 'running' || !files || !files[id]) return; - var now = Date.now(); - if (lastAt[id] && now - lastAt[id] < 4000) return; - lastAt[id] = now; - fetch('assets/voice/' + id + '.mp3') - .then(function (r) { return r.ok ? r.arrayBuffer() : null; }) - .then(function (ab) { - if (!ab || !ctx) return; - ctx.decodeAudioData(ab, function (buf) { - if (cur) { try { cur.stop(); } catch (e) {} } - var src = ctx.createBufferSource(); - src.buffer = buf; - src.connect(ctx.destination); - cur = src; - curEnd = Date.now() + buf.duration * 1000; - src.onended = function () { if (cur === src) cur = null; }; - src.start(0); - }, function () { /* 解码失败忽略 */ }); - }) - .catch(function () { /* 网络异常忽略 */ }); + if (opts.hint) { + if (lastAt[id] && Date.now() - lastAt[id] < 4000) return; + if (busyWithFlow()) { pendingHint = id; return; } + start(id, 'hint'); + return; + } + if (opts.cut) { queue = []; pendingHint = null; start(id, 'flow'); return; } + if (busyWithFlow()) { if (queue.indexOf(id) < 0) queue.push(id); return; } + start(id, 'flow'); // 在播的姿态提示让位给流程音 } - // 等当前播报自然收尾后执行 cb(倒计时接续「保持不动」,不拦腰切断);无播报在执行则立即执行 - // 返回取消函数;注意:cur 被新播报 stop 也会触发 onended,调用方需配合 cancelCountdown 等路径取消 + function dropHint() { pendingHint = null; } // 提示已清空/换步:挂起的旧提示作废 + // 流程切走:作废排队/挂起/等待;hard 连在播一并掐断(退出拍照、页面隐藏),否则让在播自然收尾(出报告) + function stop(hard) { + queue = []; + pendingHint = null; + waiters = []; + if (hard) stopCur(); + } + // 等全部播报(含排队与挂起提示)自然收尾后执行 cb(倒计时接续「保持不动」,不拦腰切断);空闲则立即执行 function afterCurrent(cb) { - if (!cur || Date.now() >= curEnd - 60) { cb(); return null; } - var src = cur, cancelled = false; - src.onended = function () { - if (cur === src) cur = null; - if (!cancelled) cb(); - }; - return function () { cancelled = true; }; + var tail = cur && cur.src && Date.now() >= cur.end - 60; // 只剩尾音视为已收尾 + if ((!cur || tail) && !queue.length && !pendingHint) { cb(); return null; } + var fn = function () { cb(); }; + waiters.push(fn); + return function () { waiters = waiters.filter(function (w) { return w !== fn; }); }; } - return { unlock: unlock, play: play, afterCurrent: afterCurrent }; + return { unlock: unlock, play: play, dropHint: dropHint, afterCurrent: afterCurrent, stop: stop }; })(); document.addEventListener('click', voice.unlock); // 任意点击即完成解锁 @@ -397,10 +468,10 @@ } function setHint(text, ok, silent) { var h = $('#cam-hint'); - if (!text) { h.classList.remove('show', 'ok'); lastHint = ''; return; } + if (!text) { h.classList.remove('show', 'ok'); lastHint = ''; voice.dropHint(); return; } if (text !== lastHint) { h.textContent = text; // 同文案不重复触发布局 - if (!silent) voice.play(VOICE.hint[text]); // 语音同步(模块内 4s 去重) + if (!silent) voice.play(VOICE.hint[text], { hint: true }); // 语音同步(模块内 4s 去重) } h.classList.add('show'); h.classList.toggle('ok', !!ok); @@ -516,8 +587,8 @@ if (ratio < FACE_NEAR) hint = '请靠近一点'; else if (ratio > FACE_FAR) hint = '请远一点'; else { - // 距离不合格时角度不判 ok。镜像参数:正脸步跟随镜头(前置 true/后置 false); - // 侧脸步预览不镜像,特征点即原始视角,标准机型恒为 false,个别前置帧已镜像的机型由自校准翻转 sideYawFlip + // 距离不合格时角度不判 ok。特征点取自原始帧(预览的 CSS 镜像不影响),侧脸步语义方向按原始视角判定: + // 标准机型恒为 false,个别前置帧本身已镜像的机型由自校准翻转 sideYawFlip;正脸步只看 |yaw|,与符号无关 var tgt = CAM_STEPS[camStep].target; var pose = HeadPose.check(d.landmarks.positions, tgt, tgt === 'front' ? camMirrored : sideYawFlip); // 侧脸自校准:个别机型前置帧本身已镜像(语义 yaw 与实际转向持续相反)时自救—— @@ -550,19 +621,24 @@ } } - /* ─── 拍照流程(三步:正脸 → 左脸出镜 → 右脸出镜) ─── */ - // target 即 HeadPose.check 的 target:2/3 左脸出镜=用户头向右转(target 'left',产物作 left_image); - // 3/3 右脸出镜=头向左转(target 'right',产物作 right_image)。 + /* ─── 拍照流程(三步,顺序对齐 Figma:正脸 → 右脸出镜 → 左脸出镜) ─── */ + // 左右一律按用户本人的左右:右脸出镜=用户头向自己的左侧转(target 'right',产物作 right_image); + // 左脸出镜=头向自己的右侧转(target 'left',产物作 left_image)。 + // mask 为 index.html 取景轮廓编号(1=左脸出镜 耳在画面左,2=右脸出镜 耳在画面右,均按镜像预览绘制) var CAM_STEPS = [ - { bg: 'assets/img/cam-front.jpg', step: '1/3
请单人正脸出镜', guides: ['正脸居中', '取下眼镜', '光线充足'], target: 'front' }, - { bg: 'assets/img/cam-left.jpg', step: '2/3
请单人左脸出镜', guides: ['左脸居中', '取下眼镜', '光线充足'], target: 'left' }, - { bg: 'assets/img/cam-right.jpg', step: '3/3
请单人右脸出镜', guides: ['右脸居中', '取下眼镜', '光线充足'], target: 'right' } + { step: '1/3
请单人正脸出镜', guides: ['正脸居中', '取下眼镜', '光线充足'], target: 'front', mask: 0 }, + { step: '2/3
请单人右脸出镜', guides: ['右脸居中', '取下眼镜', '光线充足'], target: 'right', mask: 2 }, + { step: '3/3
请单人左脸出镜', guides: ['左脸居中', '取下眼镜', '光线充足'], target: 'left', mask: 1 } ]; + function photosByView(ph) { // 拍摄顺序 → 送检/报告/历史统一口径 [正脸, 左脸, 右脸] + var at = {}; + CAM_STEPS.forEach(function (s, i) { at[s.target] = ph[i]; }); + return [at.front, at.left, at.right]; + } var camStep = 0; function renderCamStep() { var cfg = CAM_STEPS[camStep]; - $('#cam-bg').style.backgroundImage = 'url(' + cfg.bg + ')'; $('#cam-step').innerHTML = cfg.step; $('#cam-guide').innerHTML = cfg.guides .map(function (g) { return '' + g + ''; }) @@ -573,8 +649,8 @@ dots[i].classList.toggle('done', i < camStep); dots[i].classList.toggle('on', i === camStep); } - $('#cam-mask').setAttribute('data-step', camStep); // 蒙版按步骤切换 - camVideo.classList.toggle('mirror', effMirror()); // 侧脸步预览切回不镜像(正脸步恢复前置镜像) + $('#cam-mask').setAttribute('data-step', cfg.mask); // 蒙版按步骤切换轮廓 + applyMirror(); resetDetectState(); voice.play(VOICE.step[camStep]); // 步骤引导语音 } @@ -587,7 +663,7 @@ shutterLock = true; // 推进窗口上锁:降级模式 change 里已解锁,这里重新锁住直到下一步/送检 photos[camStep] = dataUrl; $('#cam-dots').children[camStep].classList.add('done'); - voice.play(VOICE.shot); // 「拍摄完成」 + voice.play(VOICE.shot, { cut: true }); // 「拍摄完成」:已拍下,本步未播完的引导作废(自动拍时倒计时本就等播报收尾) var seq = camSeq; setTimeout(function () { if (seq !== camSeq) return; // 期间已 cam-back/重新开始:放弃本次推进 @@ -626,9 +702,10 @@ }, 300); } - // 三张拍完:三视图送检(正脸=photos[0],左=photos[1],右=photos[2]) + // 三张拍完:按视角重排后送检(正脸=photos[0],左脸=photos[1],右脸=photos[2]) function submitPhotos(seq) { camStep = 0; + photos = photosByView(photos); openOverlay('p-analyzing'); voice.play(VOICE.analyzing); // 「正在生成您的肌肤报告」 var t0 = Date.now(); @@ -639,9 +716,10 @@ if (seq !== camSeq) return; closeOverlay('p-analyzing'); stopCamera(); + voice.stop(); // 结果已出:排队中的「分析中」等不再补播 shutterLock = false; // 流程结束解锁 if (errMsg) { - voice.play(VOICE.fail); + voice.play(VOICE.fail, { cut: true }); toast(errMsg); showScreen('s-profile'); // 回档案页,允许重新提交再拍 return; @@ -969,7 +1047,9 @@ // 降级标注:只展示用户可感知/可执行的(下颌线、侧脸、补拍类); // 引擎内部技术项(上限锁未执行/字段未返回等)不面向用户展示 var notesEl = $('#vm-notes'); - var userNotes = (vm.notes || []).filter(function (t) { return /下颌线|侧脸|补拍|重拍/.test(t); }); + var userNotes = (vm.notes || []) + .filter(function (t) { return /下颌线|侧脸|补拍|重拍/.test(t); }) + .map(function (t) { return t.replace(/\(quality=[^)]*\)/g, ''); }); // 接口质量码仅留在引擎留痕里 if (userNotes.length) { notesEl.innerHTML = userNotes.map(function (t) { return '*' + esc(t); }).join('
'); notesEl.style.display = ''; @@ -987,12 +1067,16 @@ } // 精华推荐卡 + // 精华推荐卡只放产品名 + 命中判据:推荐正文已是护理建议第 4 段(V2.3 §8.5),卡内不再重复同一句 $('#essence-name').textContent = vm.essence.name; - $('#essence-text').textContent = vm.essence.text; // 命中判据:引擎内部名 → 用户可读措辞(引擎值被真值回归逐字锁定,仅展示层映射) - var TRIGGER_LABEL = { '均分档': '综合均分', '最差项约束': '最低分维度', '年龄组档': '年龄段' }; + var TRIGGER_LABEL = { + '均分档': vm.avgS != null ? '六项平均分 ' + vm.avgS : '六项平均分', + '最差项约束': vm.worst ? vm.worst.name + '得分偏低' : '单项得分偏低', + '年龄组档': vm.group ? '年龄段 ' + vm.group.replace('组', '') : '年龄段' + }; $('#essence-triggers').textContent = vm.essence.triggers.length - ? '推荐依据:' + vm.essence.triggers.map(function (t) { return TRIGGER_LABEL[t] || t; }).join('、') + ? '推荐依据：' + vm.essence.triggers.map(function (t) { return TRIGGER_LABEL[t] || t; }).join('、') : ''; } @@ -1077,6 +1161,7 @@ }, 'cam-back': function () { camSeq++; // 使未决的快门/分析回调失效,避免回退被旧定时器顶回 + voice.stop(true); // 回退/退出:上一步的播报不再接着念 shutterLock = false; // 中途退出也解锁 if (camStep > 0) { camStep--; renderCamStep(); } // renderCamStep 内含检测状态机重置 else { stopCamera(); showScreen('s-profile'); } @@ -1193,6 +1278,7 @@ function handleCamHidden() { if (currentScreen !== 's-cam') return; camSeq++; // 使未决的快门/推进/分析回调失效(白屏定时器醒来即自洁退出) + voice.stop(true); shutterLock = false; capturing = false; $('#cam-fill').classList.remove('on'); // 白屏若亮着立即熄灭 diff --git a/h5/test/e2e-browser.mjs b/h5/test/e2e-browser.mjs new file mode 100644 index 0000000..47161f7 --- /dev/null +++ b/h5/test/e2e-browser.mjs @@ -0,0 +1,183 @@ +/** + * 无头 Chromium 冒烟：mock 三连拍走到报告页，并核对语音清单是否真的被拉取、解码、起播。 + * + * 依赖：全局 playwright + `npx playwright install chromium` + * 服务：node h5/server.js（默认 http://127.0.0.1:8080） + * + * node h5/test/e2e-browser.mjs + */ +import { execSync } from 'node:child_process'; +import { pathToFileURL } from 'node:url'; + +const pwRoot = execSync('npm root -g', { encoding: 'utf8' }).trim(); +const { chromium } = await import(pathToFileURL(pwRoot + '/playwright/index.mjs').href); + +const BASE = process.env.BASE_URL || 'http://127.0.0.1:8080'; +const EXPECTED = [ + 'step1-front', 'step2-rightface', 'step3-leftface', + 'hint-noface', 'hint-near', 'hint-far', 'hint-front', + 'hint-turn-left', 'hint-turn-right', 'hint-hold', + 'countdown-321', 'shot-done', 'analyzing', 'analyze-fail', +]; + +const fails = []; +function check(name, ok, detail) { + const mark = ok ? 'PASS' : 'FAIL'; + console.log(`${mark} ${name}${detail ? ' ' + detail : ''}`); + if (!ok) fails.push(name + (detail ? ': ' + detail : '')); +} + +const browser = await chromium.launch({ + headless: true, + args: [ + '--use-fake-ui-for-media-stream', + '--use-fake-device-for-media-stream', + '--autoplay-policy=no-user-gesture-required', + ], +}); +const context = await browser.newContext({ + viewport: { width: 375, height: 812 }, + permissions: ['camera'], +}); +// 语音解锁后整批预加载，请求顺序不代表播放顺序：按 ArrayBuffer → AudioBuffer 反查条目名，记录真实起播与截断 +await context.addInitScript(() => { + window.__voice = []; + const abId = new WeakMap(), bufId = new WeakMap(); + const origFetch = window.fetch; + window.fetch = function (url, opts) { + const m = String(url).match(/voice\/([a-z0-9-]+)\.mp3/); + return origFetch.call(this, url, opts).then((res) => { + if (!m) return res; + const origAb = res.arrayBuffer.bind(res); + res.arrayBuffer = () => origAb().then((ab) => { abId.set(ab, m[1]); return ab; }); + return res; + }); + }; + const Orig = window.AudioContext || window.webkitAudioContext; + function WrappedAudioContext(...args) { + const ctx = new Orig(...args); + const origDecode = ctx.decodeAudioData.bind(ctx); + ctx.decodeAudioData = function (ab, ok, err) { + const id = abId.get(ab); + return origDecode(ab, (buf) => { bufId.set(buf, id); if (ok) ok(buf); }, err); + }; + const origCreate = ctx.createBufferSource.bind(ctx); + ctx.createBufferSource = function () { + const src = origCreate(); + const origStart = src.start.bind(src), origStop = src.stop.bind(src); + let rec = null; + src.start = function (...a) { + rec = { id: bufId.get(src.buffer) || '?', t: Date.now(), dur: Math.round(src.buffer.duration * 1000), cutAt: null }; + window.__voice.push(rec); + return origStart(...a); + }; + src.stop = function (...a) { + if (rec && rec.cutAt == null) rec.cutAt = Date.now() - rec.t; + return origStop(...a); + }; + return src; + }; + return ctx; + } + WrappedAudioContext.prototype = Orig.prototype; + window.AudioContext = WrappedAudioContext; + window.webkitAudioContext = WrappedAudioContext; +}); + +const page = await context.newPage(); +const pageErrors = []; +page.on('pageerror', (err) => pageErrors.push(String(err))); + +try { + // 1) 14 条语音文件与清单都在，且 HTTP 200 + const manifest = await (await page.request.get(BASE + '/assets/voice/manifest.json')).json(); + const listed = manifest.files || []; + check('清单含设计文档 14 条', EXPECTED.every((id) => listed.includes(id)) && listed.length === EXPECTED.length, + 'listed=' + listed.join(',')); + for (const id of EXPECTED) { + const res = await page.request.get(BASE + '/assets/voice/' + id + '.mp3'); + const len = (await res.body()).length; + const ctype = res.headers()['content-type'] || ''; + check('音频 ' + id, res.ok() && len > 1000 && /audio|mpeg|octet/.test(ctype), + `status=${res.status()} bytes=${len} type=${ctype}`); + } + + // 2) mock 直达报告页：评分与精华卡有内容 + await page.goto(BASE + '/?mock=1&screen=report', { waitUntil: 'domcontentloaded' }); + await page.waitForFunction(() => { + const b = document.querySelector('#stat-score b'); + return b && b.textContent && b.textContent !== '--'; + }, null, { timeout: 8000 }); + const score = await page.locator('#stat-score b').innerText(); + const essence = await page.locator('#essence-name').innerText(); + const reportOn = await page.locator('#s-report.active').count(); + check('直达报告页', reportOn === 1 && /^\d/.test(score) && essence && essence !== '--', + `score=${score} essence=${essence}`); + + // 3) 完整 mock 流程：启动 → 档案 → 三连拍 → 报告，并记录语音起播 + await page.goto(BASE + '/?mock=1', { waitUntil: 'networkidle' }); + await page.getByRole('button', { name: '开始检测' }).click(); + await page.locator('#privacy-check').click(); + await page.getByRole('button', { name: '继续' }).click(); + await page.locator('#f-age').fill('28'); + await page.locator('#f-gender').selectOption('女'); + await page.locator('#rs-current').click(); + await page.locator('#rs-list li[data-v="北京"]').click(); + await page.getByRole('button', { name: '提交' }).click(); + await page.getByRole('button', { name: '开始' }).click(); + + await page.waitForFunction(() => { + const v = document.querySelector('#cam-video'); + return v && v.videoWidth > 0 && document.querySelector('#s-cam').classList.contains('cam-live'); + }, null, { timeout: 12000 }); + const step1 = (await page.locator('#cam-step').innerText()).replace(/\s+/g, ''); + check('进入拍照 1/3', step1.includes('1/3') && step1.includes('正脸'), step1); + + // 听完每步引导再按快门（最长 step2 4.3s）：引导、「拍摄完成」、「分析中」都应完整播出 + // 步骤顺序与轮廓对齐 Figma：正脸 → 右脸（耳在画面右，mask 2）→ 左脸（耳在画面左，mask 1） + const FIGMA_STEPS = [['正脸', '0'], ['右脸', '2'], ['左脸', '1']]; + for (let i = 0; i < 3; i++) { + const n = i + 1; + await page.waitForFunction((num) => { + const t = document.querySelector('#cam-step'); + return t && t.textContent.includes(num + '/3'); + }, n, { timeout: 8000 }); + const st = await page.evaluate(() => ({ text: document.querySelector('#cam-step').textContent, mask: document.querySelector('#cam-mask').getAttribute('data-step') })); + check(`步骤 ${n}/3 文案与轮廓对齐 Figma`, st.text.includes(FIGMA_STEPS[i][0]) && st.mask === FIGMA_STEPS[i][1], `${st.text} mask=${st.mask}`); + await page.waitForFunction((id) => (window.__voice || []).some((v) => v.id === id), `step${n}-${['front', 'rightface', 'leftface'][i]}`, { timeout: 8000 }); + await page.waitForTimeout(4600); + await page.locator('[data-action="shutter"]').click(); + } + + await page.waitForFunction(() => document.querySelector('#s-report').classList.contains('active'), null, { timeout: 15000 }); + const score2 = await page.locator('#stat-score b').innerText(); + const age = await page.locator('#stat-age b').innerText(); + check('三连拍进入报告', /^\d/.test(score2), `score=${score2} skinAge=${age}`); + + await page.waitForTimeout(3200); // 等「分析中」播完 + const played = await page.evaluate(() => window.__voice || []); + const ids = played.map((v) => v.id); + console.log('VOICE 起播: ' + played.map((v) => `${v.id}(${v.dur}ms${v.cutAt != null ? ' 截断@' + v.cutAt : ''})`).join(' → ')); + for (const id of ['step1-front', 'step2-rightface', 'step3-leftface', 'shot-done', 'analyzing']) { + check('流程播报 ' + id, ids.includes(id)); + } + check('步骤引导顺序', ids.indexOf('step1-front') < ids.indexOf('step2-rightface') + && ids.indexOf('step2-rightface') < ids.indexOf('step3-leftface')); + check('拍摄完成每步各一次', ids.filter((id) => id === 'shot-done').length === 3, + 'count=' + ids.filter((id) => id === 'shot-done').length); + const cut = played.filter((v) => v.cutAt != null && v.cutAt < v.dur - 80); + check('流程语音无截断', cut.length === 0, cut.map((v) => `${v.id}@${v.cutAt}/${v.dur}`).join(',')); + check('页面无脚本异常', pageErrors.length === 0, pageErrors.join(' | ')); + + await page.screenshot({ path: '/tmp/juzi-e2e-report.png', fullPage: true }); + console.log('截图 /tmp/juzi-e2e-report.png'); +} catch (err) { + console.error('RUN ERROR', err); + fails.push(String(err && err.message || err)); + try { await page.screenshot({ path: '/tmp/juzi-e2e-fail.png', fullPage: true }); } catch (e) {} +} finally { + await browser.close(); +} + +console.log(fails.length ? `\n${fails.length} 项失败` : '\n全部通过'); +process.exit(fails.length ? 1 : 0); diff --git a/tools/gen_voice.py b/tools/gen_voice.py index 2fb7872..ea8e026 100644 --- a/tools/gen_voice.py +++ b/tools/gen_voice.py @@ -36,8 +36,8 @@ INSTRUCT = ( # (文件名不含扩展名, 文案) — 与设计文档第 2 节逐字一致 LINES: list[tuple[str, str]] = [ ("step1-front", "请单人正脸出镜,面部对准取景框"), - ("step2-leftface", "请慢慢向右转头,露出左脸"), - ("step3-rightface", "请保持单人出镜,慢慢向左转头,露出右脸"), + ("step2-rightface", "请保持单人出镜,慢慢向左转头,露出右脸"), + ("step3-leftface", "请慢慢向右转头,露出左脸"), ("hint-noface", "未检测到人脸,请正对镜头"), ("hint-near", "请靠近一点"), ("hint-far", "请远一点"),