Transformers.js 扩展：网页图片标注怎么做

范围与权限

先把目标限定为“读取当前页面中用户主动选择的图片，生成候选标签，再由人工确认后保存”。不要一开始就扫描所有标签、自动上传图片或自动发布内容。这样既便于调试，也能缩小隐私风险。

• 页面入口：扩展弹窗或侧边面板，提供开始识别、暂停和清空按钮。
• 图片范围：只处理用户点击的图片，或限定当前标签页的可见图片。
• 输出字段：先确定分类、描述、主题词、置信度、人工确认状态。
• 权限清单：只申请完成读取页面、加载模型和保存结果所需的权限。

资料包确认 Hugging Face Blog 目录收录了 Transformers.js 在 Chrome 扩展中的相关文章，但没有提供本题所需的具体权限清单、模型 ID 或参数。实现时应以当前扩展平台和 Transformers.js 文档为准。

扩展页面结构

建议先完成一个不带模型的页面骨架，确认数据流畅通后再接入推理。面板可以分成四块：

1. 选择区：显示当前页面可识别的图片数量，并允许用户选择单张或多张。
2. 任务区：显示模型加载、图片预处理和推理中的状态。
3. 结果区：为每张图片展示分类、描述、关键词和人工修改入口。
4. 保存区：提供保存当前条目、批量保存和删除临时结果的操作。

每条记录建议使用统一对象结构：imageId、pageUrl、imageUrl、category、description、keywords、confidence、reviewStatus、updatedAt。其中人工填写的内容与模型候选内容要分开保存，方便回溯。

浏览器端推理流程

1. 创建扩展项目，并先让弹窗能读取当前标签页的基本信息。
2. 把模型加载封装成单独函数，页面打开时不要立即处理全部图片，改为用户点击后再加载。
3. 读取图片元素的实际资源。优先使用用户选中的图片，并检查图片是否已经完成加载。
4. 将图片转换为模型接受的输入形式。跨来源图片、懒加载图片和受限资源要单独记录失败原因。
5. 调用适合视觉分类或图像描述的任务管线。模型名称、任务类型和输入格式必须以当前文档为准。
6. 把原始输出转换成统一字段，不要直接把模型返回对象渲染到页面。
7. 先展示候选结果，只有用户确认后才写入持久化存储。

推理层可以采用“模型单例加任务队列”：第一次任务负责加载模型，后续图片复用同一实例；队列逐张处理并支持取消，避免同时处理大量图片导致页面卡顿。若环境支持 WebGPU，可将它作为可选后端测试项，不要把它当成所有设备都具备的前提。

网页图片标签字段

假设内容运营正在整理一组产品页面截图，面板可以按下面的规则生成候选结果：

例如一张网页产品截图可以先得到“界面截图”“软件操作界面”“待确认”等候选值。这里的候选值只是字段示例，不代表模型一定会输出相同结果。若要了解网页图片标注的拆分思路，可参考浏览器端视觉推理的图片分类流程，但仍需按当前项目字段重新设计。

常见故障和修正

• 图片数量为零：原因可能是页面使用懒加载、图片还未完成加载，或读取范围过窄。修正动作是等待图片加载，检查可见元素，并允许用户手动选择图片。
• 图片能显示但推理失败：原因可能是输入类型不符合管线要求，或资源受到跨来源限制。修正动作是先把图片转换为明确的 Blob、ImageBitmap 或文档要求的输入格式，并在日志中记录失败阶段。
• 模型加载后页面卡顿：原因通常是首次加载和多张图片同时推理占用较多资源。修正动作是延迟加载、单例复用、限制队列长度，并提供取消按钮。
• 标签内容过度确定：原因是把模型描述直接当成事实。修正动作是给结果标记为候选，要求人工确认，并对低置信度或涉及人物、品牌的内容强制复核。
• 刷新后结果消失：原因是只保存在内存变量中。修正动作是保存经过确认的结构化记录，同时为页面地址和图片标识建立关联。

发布前验收清单

1. 扩展只申请已说明用途的权限，未使用的权限已删除。
2. 用户未点击识别前，不会自动扫描或上传页面图片。
3. 模型加载、图片读取、推理、保存和失败状态都能在界面中区分。
4. 至少准备正常图片、懒加载图片、受限图片和损坏图片四类样本测试。
5. 分类、描述、关键词、置信度和人工状态字段能够稳定保存。
6. 低置信度结果不会自动标记为已确认，也不会直接进入发布流程。
7. 页面地址、图片地址和标签记录的保存范围已向使用者说明。
8. 关闭扩展或删除记录后，临时图片数据和未确认结果会按预期清理。
9. 模型版本、任务类型和推理后端已记录，后续可以复测同一批样本。

验收通过后，再考虑批量处理、导出表格或接入写作素材库。先把“可选择、可解释、可撤回、可复核”做好，通常比一次加入更多自动化功能更稳。