ChemVision MiniProgram 是一款旨在通过移动端摄像头实时识别化学品瓶子，并提取瓶身文字信息的微信小程序。项目利用端侧AI能力，结合目标检测和光学字符识别 (OCR) 技术，为用户提供快速、便捷的化学品信息获取与管理辅助。
- 便捷性: 用户无需手动输入或查阅，通过拍照即可快速识别化学品。
- 实时性: 尽可能在小程序端完成核心识别任务，保证低延迟和离线可用性。
- 扩展性: 未来可集成更多化学品信息数据库，提供安全信息、存储建议等。
* **需求描述**: 打开小程序后，应能启动摄像头，并在界面上实时显示摄像头捕获的画面。
* **验收标准**:
* 小程序能够成功调用设备摄像头。
* 预览画面流畅，无明显卡顿或延迟。
* 用户可以切换前后摄像头（如果硬件支持且有必要）。
* **需求描述**: 在摄像头预览帧中，小程序应能实时检测出画面中的化学品瓶子，并以某种方式（例如，绘制边界框）在预览上标示出来。
* **模型格式**: ONNX
* **部署方式**: 小程序端侧推理
* **验收标准**:
* 能够成功加载和初始化YOLO ONNX模型。
* 对于清晰可见的化学品瓶子，能够以较高的准确率检测到，并在瓶子周围绘制出边界框。
* 检测具有一定的实时性，用户移动摄像头时，边界框能跟随瓶子移动。
* 能够处理单瓶及多瓶同时出现的场景（如果模型支持）。
* **需求描述**: 在YOLO模型检测到化学品瓶子后，针对瓶子区域（或整个裁剪后的瓶子图像），调用微信VisionKit OCR能力识别瓶身上的文字。
* **技术选型**: 微信小程序 VisionKit OCR (mode 2: 静态图片/图像帧检测)
* **触发方式**: 通常在YOLO成功定位到瓶子后，对定位区域进行OCR。
* **验收标准**:
* 能够成功初始化VisionKit OCR会话。
* 对于瓶身上印刷清晰的常见字体文字（中英文、数字），能够以较高的准确率识别。
* 识别结果能够以文本形式获取。
* 能够处理一定程度的瓶身曲面、反光和拍摄角度带来的识别挑战（但识别率可能下降）。
* **需求描述**: 将OCR识别到的文字结果清晰地展示在小程序界面上。
* **验收标准**:
* OCR结果文本显示在预设的界面区域。
* 文本清晰可读。
* **需求描述**: 除了实时摄像头，允许用户从手机相册中选择已拍摄的化学品图片进行检测和OCR识别。
* **验收标准**:
* 提供图片选择入口。
* 选择图片后，能触发YOLO检测和OCR流程。
* 识别结果能正常展示。
* **需求描述**: 保存用户的识别历史（图片、识别结果文本），方便回顾。
* **验收标准**:
* 提供历史记录查看入口。
* 能正确保存和展示历史条目。
* **需求描述**: 将OCR识别到的化学品名称或关键信息，作为关键词去检索外部数据库（如化学品安全说明书MSDS、CAS号查询等）或小程序内建数据库。
* **验收标准**:
* 提供检索入口或自动触发检索。
* 能将OCR结果作为查询参数。
* 能展示检索到的相关信息。
* **实时帧处理**: 目标检测和OCR的整体处理速度应尽可能快，避免用户感知到明显卡顿。理想情况下，在主流机型上达到一定的处理帧率 (例如 >5 FPS)。
* **模型加载速度**: ONNX模型首次加载时间应在可接受范围内。
* **资源消耗**: 小程序运行时的CPU、内存占用应控制在合理水平，避免导致手机过热或小程序崩溃。
* **目标检测**: 对于常见形状和光照条件下的化学品瓶子，检测准确率应较高 (例如 Precision/Recall > 设定阈值)。
* **OCR识别**: 对于印刷清晰的文字，字符级识别准确率应较高。
* **界面简洁直观**: 操作流程清晰明了。
* **反馈及时**: 对于操作和处理状态（如"识别中..."、"识别成功"、"未检测到目标"）应有明确的视觉反馈。
* **错误处理**: 对于模型加载失败、相机权限未授予、识别失败等情况，应有友好的错误提示。
* **微信版本**: 兼容主流微信客户端版本。
* **设备**: 兼容主流iOS和Android设备。
- 前端: 微信小程序 (WXML, WXSS, JavaScript)
- AI推理:
- 目标检测: 微信小程序ONNX Runtime (运行YOLO模型)
- OCR: 微信小程序VisionKit
- 模型:
- YOLO: 用户提供的
.onnx格式模型 (例如 Opset 11) - (辅助测试): MobileNetV2
.onnx(已成功运行)
- YOLO: 用户提供的
- 代码管理: Git, GitHub
1. 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。
2. Git客户端。
1. 克隆本项目到本地:
```bash
git clone https://github.com/qwe4559999/Chem-miniprogram.git
```
2. 打开微信开发者工具，选择 "导入项目"。
3. AppID: 使用测试号或您申请的小程序AppID。
4. 项目目录: 选择克隆到本地的项目文件夹 (`Chem-miniprogram/miniprogram`，具体路径取决于您的项目结构，当前我们的代码在 `Chem-miniprogram/miniprogram/miniprogram` 下，可能需要调整一下目录层级或者在导入时指定到正确的 `miniprogram` 根目录)。
5. 后端服务: 选择 "无云服务" 或您配置的云开发环境。
小程序需要从网络下载ONNX模型文件。请在微信公众平台 (mp.weixin.qq.com) 的 "开发" -> "开发管理" -> "开发设置" -> "服务器域名" 中配置 `request合法域名`，添加以下域名：
* `raw.githubusercontent.com` (用于从GitHub Raw下载模型)
* (如果您的模型部署在其他地方，请添加对应域名)
1. 在微信开发者工具中，点击 "编译" 按钮。
2. 如果编译成功，可以点击 "预览" 生成二维码，使用手机微信扫码进行真机预览和调试。
3. 模拟器中的AI相关功能（特别是相机帧处理和部分VisionKit）可能受限或无法正常工作，强烈建议使用真机调试。
* **ES6转ES5与增强编译**: 请确保在微信开发者工具的 "详情" -> "本地设置" 中开启 "将 JS 编译成 ES5" 和 "增强编译" 选项，以支持 `async/await` 等现代JavaScript特性。
* **模型文件**:
* 当前MobileNetV2测试模型是从 `https://raw.githubusercontent.com/qwe4559999/Chem-miniprogram/main/mobilenetv2-7.onnx` 下载的。
* 后续YOLO模型也需要一个可公网访问的URL，并在代码中 (`pages/index/index.js` -> `initOnnxSession` 函数) 正确配置。
* 模型文件名必须以 `.onnx` 结尾。
* **VisionKit OCR**: OCR功能通常在真机上才能正常工作，模拟器中可能会报错或无法启动。
- 确认YOLO模型细节:
- 输入张量名称、形状、数据类型。
- 输出张量名称、形状、数据类型。
- 类别数量和含义。
- 修改代码以适配YOLO:
- 更新
initOnnxSession中的模型URL和文件名。 - 更新
runYoloDetection中的inputName,outputName,targetWidth,targetHeight。 - 调整
onReady中preprocessedCanvas的尺寸。 - 实现YOLO输出的后处理逻辑 (解码边界框, NMS等)。
- 更新
- 在界面上绘制检测框: 将YOLO检测到的瓶子边界框实时绘制在相机预览上。
- 集成OCR: 对YOLO检测到的瓶子区域调用VisionKit OCR。
- 联调与测试。