发帖时，大赛按热门排序的 50+ 热门作品中，0 个面向视障人群。中国有约 1700 万视障用户，他们如何上网？
我长期参与无障碍和助老志愿活动，亲眼见过视障朋友上网时的真实困境——鼠标丢了找不回来、图表颜色分不清、图片完全"听"不到、文字看不清也没有朗读反馈。这些不是抽象的痛点，是我真实见过的场景。
瞳伴 EyeBuddy，一个插件，四种功能，一站解决视障人群上网的四类视觉障碍。
1. Demo 简介
1.1 是什么
瞳伴 EyeBuddy 是一款 Chrome 浏览器插件（Manifest V3 架构），面向视障人群，提供"四合一"无障碍上网能力。
1.2 面向谁
三类视障人群：
- 全盲用户 — 需要 AI 描述网页画面 + 文字朗读 （初始配置目前需要协助）
- 低视力用户 — 需要文字朗读高亮 + 鼠标十字准星增强
- 色盲色弱用户 — 需要色盲校正滤镜
1.3 主要功能（四合一整合）
| 功能 | 技术 | 解决的痛点 |
|---|---|---|
| ① AI 页面描述 | 通义千问 Qwen-VL 多模态视觉模型 | 全盲用户"看不见图"——截图网页后 AI 用中文描述画面内容 |
| ② 文字朗读 + 黄色高亮 | Web Speech API + DOM 高亮 | 低视力用户"看不清文字"——悬停段落自动朗读，黄色高亮同步跟随 |
| ③ 鼠标十字准星 | 固定定位的十字线 + 焦点环 | 低视力用户"找不到鼠标"——青色十字准星全屏跟随光标 |
| ④ 色盲校正 | SVG feColorMatrix 滤镜（3 模式） | 色盲用户"分不清颜色"——红绿/绿弱/蓝黄三模式实时切换 |
四功能协同设计（非单功能堆砌）：
- 朗读时十字准星自动跟随当前高亮元素中心
- 色盲模式开启时，AI 描述自动补充颜色信息（“红色按钮”“绿色链接”）
- AI 描述生成后，若朗读功能已开启，自动用中文语音播报描述内容
1.4 功能演示截图
以下 8 张截图来自完整操作视频的关键步骤，真实网页场景测试：
AI 页面描述功能
- 图 1：开启 AI 页面描述功能后的 popup 状态（EnChroma 色盲测试页）
- 图 5：AI 描述 + 文字朗读协同——AI 描述结果出现后自动朗读（Bilibili 首页）
文字朗读功能
- 图 2：成功朗读页面英文文字（EnChroma “Your Color Vision Result: Normal Color Vision”）
- 图 3：成功朗读页面中文文字（Bilibili 视频标题、按钮等）
- 图 4：朗读语速线性调节（0.5X 慢 ←→ 1.5X 快速，默认 0.9X），适配不同人群
鼠标十字准星功能
- 图 6：青色十字线醒目指示位置，不遮挡网页内容
- 图 7：文字朗读 + 十字准星同时开启，功能不冲突
色盲校正功能
- 图 8：绿色弱（Deutan）色盲测试结果 + popup 色盲校正三模式选项（红绿色盲/绿色弱/蓝黄色盲）
2. Demo 创作思路
2.1 灵感来源
我长期参与无障碍和助老志愿活动（南方科技大学致诚书院"橙光"志愿服务队）。瞳伴的每一个功能，都对应一个我亲眼见过的真实困境。这些不是市场调研出来的需求，是视障朋友上网时的真实生活。
2.2 真实痛点（4 个场景）
| 场景 | 痛点 | 对应功能 |
|---|---|---|
| 全盲用户看不见图片 | 一位全盲用户对着一张产品图发呆——屏幕阅读器只读出了 “image”，他不知道图里是什么 | AI 页面描述 |
| 低视力老人朗读时眼睛跟不上 | 一位低视力老人读书时，朗读软件在读第 3 段，他的眼睛还在第 1 段 | 文字朗读 + 黄色高亮 |
| 低视力用户找不到鼠标 | 一位低视力用户找不到鼠标光标，急得满屏乱划 | 鼠标十字准星 |
| 色盲朋友分不清红绿按钮 | 一位色盲朋友把红色警告按钮当成绿色，错过了重要提示 | 色盲校正 |
2.3 为什么做"四合一整合"而非单功能
市场调研结论（7 维度交叉验证 20+ 款产品）：
| 竞品 | 形态 | 四功能覆盖 |
|---|---|---|
| Be My Eyes | App（iOS/Android/macOS/HarmonyOS），非浏览器插件 | 仅 AI 描述（真实世界） |
| Seeing AI | 移动 App，非浏览器插件 | 9 频道，无网页文字高亮、无十字准星 |
| NVDA | Windows 系统级软件，非浏览器插件 | 仅语音朗读（有焦点高亮，但无朗读时同步文字高亮） |
| Chrome Color Enhancer | 浏览器插件 | 仅色盲滤镜，无 AI、无朗读、无准星 |
差异化定位：
- 浏览器插件形态 + 四功能整合 = 市场空白
- 本土化优势：Qwen-VL 中文描述 + 中文语音合成，国内体验优于英文产品
- 协同护城河：四功能不是堆砌，是协同（朗读时准星跟随、色盲模式下 AI 补色）
瞳伴是本次大赛唯一面向视障人群、唯一浏览器插件形态、唯一覆盖 4 类视觉障碍的无障碍作品。
3. Demo 体验地址
3.1 体验方式（二选一）
方式一：在线浏览展示页（无需安装）
- 下载压缩包，打开
展示页.html即可查看完整产品介绍 + 3 个交互式迷你 Demo（AI 描述模拟 / 文字朗读真实体验 / 色盲滤镜实时切换）
方式二：Chrome 加载完整插件（推荐，体验全部 4 功能）
- 下载并解压
瞳伴EyeBuddy_Demo提交包_v1.zip - 打开 Chrome → 地址栏输入
chrome://extensions - 右上角开启"开发者模式"
- 点击"加载已解压"→ 选择
插件文件夹 - 在插件弹窗的"设置"中填入通义千问 API Key（阿里云百炼平台免费申请，新用户 100 万 tokens 一次性免费额度，有效期 3 个月）
方式三：文末github仓库链接下载插件
3.2 4 个快捷键（键盘党友好）
| 快捷键 | 功能 |
|---|---|
Ctrl+Shift+X |
切换鼠标十字准星 |
Ctrl+Shift+A |
AI 描述当前页面 |
Ctrl+Shift+R |
开关文字朗读 |
Ctrl+Shift+C |
循环切换色盲校正模式 |
3.3 演示视频
完整操作视频（4分25秒），真实网页场景测试所有功能。双重来源：
本地观看：提交包内
演示视频_压缩.mp4（11MB，压缩版）（由于上传大小限制，视频暂不上传
瞳伴EyeBuddy_Demo提交包_v1.zip (60.2 KB)
）视频内容覆盖：
- AI 页面描述（EnChroma 色盲测试页 + Bilibili 首页）
- 文字朗读（英文 + 中文，含按钮等 UI 元素）
- 朗读语速线性调节（0.5X-1.5X）
- AI 描述 + 文字朗读协同（描述结果自动朗读）
- 鼠标十字准星（不遮挡内容 + 与朗读功能不冲突）
- 色盲校正（绿色弱 Deutan 模式 + 重新测试对比）
4. TRAE 实践过程
4.1 开发时间线
| 阶段 | 时间 | 产出 |
|---|---|---|
| 选题确认 | 2026.06.28 | 瞳伴 EyeBuddy 选题文档 |
| 报名帖 + 展示页 + 插件初版 | 2026.06.28 – 07.05 | 报名通过 + HTML 展示页 + Chrome 插件 5 文件 |
| 代码审查 + Bug 修复 | 2026.07.06 – 07.07 | systematic-debugging 四阶段修复 13/16 Bug |
| Demo 提升 + 测试 + 调研 | 2026.07.07 | A1-A8 八项提升 + 62 用例测试清单 + 535 行市场调研 |
| 初赛材料提交 | 2026.07.09 | 作品帖 + 交互式 HTML Zip |
4.2 TRAE 能力使用清单（五件套，分章节展示）
① 代码生成
- manifest.json / popup.html / popup.css / popup.js / content_script.js / background.js 全部由 TRAE IDE 生成
- 关键 Prompt 示例：生成 Chrome MV3 插件 manifest + 4 commands 快捷键 + Qwen-VL 多模态调用
② 调试（systematic-debugging 四阶段）
- 根因调查 → 模式分析 → 假设测试 → 实现修复
- 修复 13/16 个 Bug，包括：undefined handleDescribeImage、DEFAULT_STATE 三文件不一致、朗读时准星不跟随
③ 重构（四功能协同设计）
- 初版：4 功能独立运行
- 重构版：highlight() 调 Crosshair.update（朗读时准星跟随）+ callQwenVL 接收 colorBlindMode（色盲模式下 AI 补色）
④ 测试（62 用例 + 代码审查）
- 10 模块 62 用例手动测试清单
- 代码审查报告：16 个 Bug 修复 13 个，grep 验证 16 个关键点全部通过
⑤ 文档（市场调研 + 提升建议）
- 535 行市场调研报告（7 维度 20+ 产品交叉验证）
- 18 项 Demo 提升建议（初赛前必做 5 项 + 复赛 10 项 + 长期 3 项）
4.3 关键步骤截图
以下 3 张截图展示 TRAE 开发关键步骤：
- 截图 1：Systematic Debugging 技能调试 AI 描述 bug——Phase 0 上下文回忆 + Phase 1 根因调查（弹窗位置/持续弹出/内容不匹配三症状）
- 截图 2：文字朗读功能开发完成——TRAE 生成功能说明（悬停朗读/选中朗读/Web Speech API/中文优先 0.9X 语速）
- 截图 3：完整插件代码生成——TRAE 输出文件结构清单（manifest.json / popup.html/css/js / content_script.js / background.js）
4.4 关键任务对话 Session ID
Session ID（≥3 个）
- Session ID 1（6.28 21:53 — 选题确认 + 创意提案）:
529308321326099:fd5242a5c7cb0c2d6d617149f4f62fe9_6a40d05f27bed56d4c2004ac.6a41275a27bed56d4c200c58.6a41275a27bed56d4c200c56:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 21:53:30)- Session ID 2（6.28 22:52 — 报名帖文案 + 行动指南）:
529308321326099:94672bb26317a73cd3fef0dde2ca9b9f_6a40d05f27bed56d4c2004ac.6a41351627bed56d4c201025.6a41351627bed56d4c201023:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 22:52:06)- Session ID 3（6.29 01:55 — 展示页 + 插件初版开发）:
529308321326099:07e0a70e12203a67a99220901f014701_6a40d05f27bed56d4c2004ac.6a41601227bed56d4c20116b.6a41601127bed56d4c201169:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 01:55:30)- Session ID 4（6.29 02:08 — 四功能协同 + 快捷键体系）:
529308321326099:d66c0f356e3af88b554c46cfd4c7a946_6a40d05f27bed56d4c2004ac.6a41631427bed56d4c2011b2.6a41631427bed56d4c2011b0:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 02:08:20)- Session ID 5（6.29 02:27 — 深色主题 + 视觉提升）:
529308321326099:aeec0695e81cf8978dc3af9f74208809_6a40d05f27bed56d4c2004ac.6a41677c27bed56d4c201215.6a41677c27bed56d4c201213:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 02:27:08)- Session ID 6（6.29 02:39 — 代码审查 + Bug 修复）:
529308321326099:36914ae59d955995d52b9a5c90888139_6a40d05f27bed56d4c2004ac.6a416a6f27bed56d4c20123a.6a416a6f27bed56d4c201238:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/29 02:39:43)对话会话 ID（核心标识）：
6a40d05f27bed56d4c2004ac（6 个任务对话均归属此会话）
完整凭证见瞳伴EyeBuddy_Demo提交包_v1/Session_ID.txt
4.5 踩坑经历（精选 3 个）
| Bug | 根因 | 修复 |
|---|---|---|
| undefined handleDescribeImage | popup 直接调用 background 函数，MV3 不允许 | 改为 DESCRIBE_PAGE 消息路由 |
| DEFAULT_STATE 三文件不一致 | popup/background/content_script 独立维护默认状态 | 统一 readingRate 字段，三文件同步 |
| 朗读时准星不跟随 | highlight() 与 Crosshair 无联动 | highlight() 末尾调 Crosshair.update 传入元素中心坐标 |
附：报名帖链接
github仓库链接： 瞳伴 EyeBuddy：一个插件，四种功能，一站解决视障人群上网的视觉障碍。
瞳伴EyeBuddy_Demo提交包_v1.zip (60.2 KB)
瞳伴 EyeBuddy — 一个插件，四种功能，一站解决视障人群上网的视觉障碍。
