文本图像转HTML可视化

文本图像转HTML可视化 是做什么的？

目的

将文本密集的参考图像转化为更清晰、更有用的HTML可视化页面。保留原始信息，优化措辞，重新设计信息结构，并在用户确认HTML方向后导出高分辨率截图。

工作流程

1. 理解来源

   • 视觉检查提交的图像。
   • 提取实体、标签、数字、类别、对比、结论、注意事项和来源品牌文本。
   • 将核心事实与装饰性文本、水印、平台品牌、冗余标签和布局伪影区分开。
   • 如果OCR不可靠，手动转录可见信息并标记不确定的字段。

2. 定义输出意图

   • 推断目标受众和阅读环境：社交媒体图片、文章配图、销售对比、内部报告、产品卡片、检查清单、仪表盘等。
   • 决定最佳输出形式：决策页面、对比表、信息图、摘要卡片、报告页面或类似轮播的长页面。
   • 除非用户明确要求忠实还原，否则不要简单复制参考布局。

3. 重写文案

   • 保留材料事实、数字、产品名称、限制、风险说明和注意事项。
   • 将密集的文字改写为简洁的用户导向陈述。
   • 优先使用“结论 + 条件 + 注意事项”的表述方式。
   • 使用明确的标签，如“最适合”、“注意”、“关键优势”、“限制”、“价格示例”和“决策点”，使页面更易于扫描。
   • 在法律、医疗、保险、金融和合规敏感声明方面保持保守，避免编造来源未支持的建议。

4. 重新设计信息架构

   • 将最重要的结论放在首位。
   • 对于密集的对比，添加顶部摘要或“如何选择”部分。
   • 对每项内容使用产品/实体卡片。
   • 在详细表格之前放置关键差异部分。
   • 将详细矩阵放在摘要之后，而不是之前。
   • 除非用户需要详尽的存档，否则淡化每项都完全相同的行。

5. 构建HTML

   • 除非用户要求框架，否则创建独立的HTML文件。
   • 使用适合截图的CSS：固定的导出宽度、稳定的网格尺寸、高对比度、可读的字体大小和足够的行间距。
   • 避免降低可读性的装饰元素。
   • 除非用户要求保留，否则移除来源平台品牌、水印和不相关的参考标签。
   • 保持生成的HTML可编辑且自包含。

6. 在最终截图前确认

   • 分享HTML路径或预览状态。
   • 总结结构和主要的文案/设计选择。
   • 如果用户尚未批准HTML方向，在生成最终高分辨率截图之前请求确认。
   • 如果用户明确要求“直接截图”或“直接出最终版”，可以跳过确认。

7. 导出高分辨率截图

   • 在Chrome可用时使用 scripts/export_highres_screenshot.py。
   • 对于密集文本，优先使用宽导出尺寸：
     • 标准：宽度2200-2600，缩放比例2
     • 非常密集：宽度2800-3200，缩放比例2
   • 导出PNG，然后裁剪底部空白。
   • 验证尺寸并目视检查输出。

设计规则

• 以一目了然为设计目标，而非像素相似度。
• 使用层次结构：标题、结论卡片、项目卡片、关键差异、详细表格。
• 使数字和限制在视觉上可发现。
• 使用有语义的颜色：
  • 绿色表示相对优势。
  • 橙色或品牌色表示关键差异。
  • 红色表示限制、排除或风险。
• 每个单元格使用更少的文字；如果某个单元格需要很多文字，则将解释移至关键差异卡片。
• 避免让整个作品成为一张巨大的密度表格。
• 对于截图工作，在导出前增加HTML画布宽度和字体大小，而不是依赖图片缩放。

文案规则

重写示例：

• 原来密集：“10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需”

• 改写后清晰：“医保内医疗费、质子重离子可10年保证续保；医保外、外购药和重疾特需不保证续保。”

• 原来密集：“30天，意外伤害无等待期”

• 改写后清晰：“等待期30天；意外伤害无等待期。”

• 原来密集：“医保内：5000元；医保外：1万”

• 改写后清晰：“医保内一般医疗免赔5000元；医保外免赔1万。”

必需验证

在交付前：

• 确认没有遗漏重要的来源事实。
• 确认在请求时移除了来源品牌/平台文本。
• 检查长单词和密集的中文行不会重叠。
• 检查HTML在预期的截图宽度下正常工作。
• 检查最终PNG尺寸且文件存在。
• 如果生成截图，包含截图路径并在可能时内联渲染。

如需紧凑的检查清单，请阅读 references/visual-html-checklist.md。