文档转图表、图片

概述

Office → 双视图可视化 HTML

把一份文档变成「能同时看原文和图表」的网页：左边大纲，右边分屏（原文 ｜ 图表解读），默认两边都显示，也能拖拽调宽或只看一边。图表按内容自动生成，风格整篇统一，生成前让你先确认方案与风格。产出是单个离线 HTML，可直接发人。

触发场景

• 用户发来 PDF / Word(.docx) / Excel(.xlsx)，希望「可视化」「做成网页」「别让我读那么多字」「总结成图」。
• 用户希望原版和图表对照看、可导出、可小幅编辑。

默认开场白（skill 触发后，agent 第一句话）

检测到本 skill 被触发后，agent 应先给用户这段话（可微调措辞但不得遗漏要点），再等用户上传文件：

📎 office-to-visual-html 已就绪。可以把 PDF / Word(.docx) / Excel(.xlsx) 转成「左大纲 + 右分屏（原文｜图表化解读）」的单文件 HTML，离线自包含，可直接发人。

📌 上传前请确认 3 件事：

1. 一次只传一个文档（不支持批量）
2. 单个文件 ≤ 40 MB（超过会被抽取阶段直接拒绝）
3. .doc / .xls 旧格式请先另存为 .docx / .xlsx

💬 你只要把文件丢给我，再说一句类似：

• 「转成可视化网页」
• 「做成图表网页」
• 「可视化一下这份文档」
• 「别让我读那么多字，总结成图」

我会自动： 抽取 → 规划可视化方案 → 让你选风格（8 套预设）→ 生成 HTML 并打开给你看。导出支持：文字（Word/PDF/MD/TXT）、图表（PDF/PPT）。

对话示例（few-shot，按场景套用）

① 标准触发

👤 [上传 report.pdf] 「转成可视化网页」🤖 「好的，已抽取 N 章。下面是可视化方案——📊 每章图表：第一章=柱状图（季度营收，来自原表 1）；第二章=饼图（用户构成）+ 折线（活跃度）；第三章=要点卡片🎨 请选一套风格：tech-blue / minimal-gray / warm-biz / forest-green / indigo-purple / morning-mist / night-dark / graphite-dark选好后告诉我，我生成 HTML。」

② 指定风格

👤 [上传 报告.docx] 「用森林绿风格，可视化一下」🤖 「收到。已抽取 N 章 + 应用 forest-green 风格。请确认方案……」

③ 纯图片 / 扫描件

👤 [上传 扫描件.pdf] 「转成可视化网页」🤖 「检测到这是纯图片文档（无文字层）。我用 WorkBuddy 内置的云端 OCR 识别文字——你不需要配任何 key。识别完成后会自动回填并按正常流程生成图表化解读。稍等……」

④ 超限

👤 [上传 50MB.pdf] 「转成可视化网页」🤖 「文件 50 MB 超过 40 MB 上限，已被拒绝。请压缩或拆分后再试。」

⑤ 旧格式

👤 [上传 file.doc] 「转成可视化网页」🤖 「.doc 是旧版 Word 格式，离线很难直接生成。请先在 Word 里「另存为 .docx」再上传。」

⑥ 导出（生成完 HTML 后）

👤 「把图表导出成 PPT」「把文字导出成 docx / txt」🤖 「好的。」→ 点击顶部「导出图表 → PowerPoint(.pptx)」或「导出文字 → Word / 纯文本(.txt)」等。

工作流（按此顺序执行）

1. 抽取 → doc.json

在技能目录下，用 venv 运行抽取器（首次需装依赖）：

cd <skill_dir>
python3 -m venv .venv && source .venv/bin/activate && pip install -r requirements.txt
python scripts/extract.py "<用户文件绝对路径>" doc.json

得到统一结构：meta（来源/类型/标题）+ sections（每章的 id / level / title / text / tables）。

• PDF：用大纲（书签）切章；无大纲则整篇为一章。表格用 PyMuPDF 识别。
• Word：按标题样式切章，表格附在所属章后。
• Excel：每个工作表为一章，按空行自动拆分成若干表格。

2. 语义规划 → plan.json（默认用脚本全自动）

运行自带规划器，按规则启发式（离线、无需大模型）自动产出规划：

source .venv/bin/activate
python scripts/plan.py doc.json -o plan.json --theme tech-blue

规划器内置判定映射（如需微调，可直接改 plan.json 再进入下一步）：

• 数字 / 表格 / 统计 → bar / line / pie（ApexCharts）
• 步骤 / 流程 / 生命周期 → mermaid（flow / timeline）
• 概念 / 分类 / 层级 → mermaid（mindmap）
• 对比 / 多方案 → matrix 或 cards
• 纯散文无数据 → 不给 viz，给 summary 要点卡片（不要硬凑图）

plan.json 结构：

{
  "theme": "tech-blue",
  "overview": {
    "metrics": [{"label": "营收", "value": "120 万", "delta": "+12%"}],
    "mindmap": "mindmapn  root((核心主题))n    分支An    分支B",
    "conclusions": ["核心结论一", "核心结论二"]
  },
  "sections": [
    {
      "id": "s1",
      "title": "第一章",
      "summary": "可选：无图时的要点卡片文字",
      "viz": [
        {"kind": "bar", "title": "各季度营收",
         "apexOption": {"chart": {"type": "bar"}, "series": [{"name": "各季度营收", "data": [80, 95]}], "xaxis": {"categories": ["Q1", "Q2"]}, "colors": ["#3b82f6"]},
         "source": {"type": "table", "tableIndex": 0, "catCol": 0, "valCol": 1, "header": true}},
        {"kind": "mermaid", "title": "处理流程", "code": "graph TD; A-->B; B-->C"},
        {"kind": "matrix", "title": "方案对比", "headers": ["维度","方案A","方案B"], "rows": [["成本","低","高"]]},
        {"kind": "cards", "title": "要点", "items": [{"t":"要点1","d":"说明"}]}
      ]
    }
  ]
}

关键规则

• apexOption 不要硬编码颜色，组装时会强制套用选定主题的调色板，保证整篇风格一致。
• bar/line/pie 必须带 source（table 或 inline），否则原版编辑后无法同步。
  • source.type="table"：tableIndex 指该章第几个表格（0 起），catCol/valCol 为类别列/数值列，header 是否含表头。
  • source.type="inline"：从原版文字按「标签: 值」或「标签 值」逐行抽取。
• mermaid 的 code 写合法 Mermaid 语法（flow / timeline / mindmap）。

3. 方案预览（务必先确认再生成）

向用户展示两份信息，等其确认：

1. 可视化清单：每章 → 图类型 → 数据来源（哪一表 / 哪段文字）。
2. 视觉风格：从下方 8 套中选 1 套（说明亮/暗与调性）。

风格预设（生成时通过 --theme 传入，build_html 会据此统一整套图表）：tech-blue(科技蓝·亮) / minimal-gray(简约灰·亮) / warm-biz(暖色商务·亮) / forest-green(森林绿·亮) / indigo-purple(靛紫·亮) / morning-mist(晨雾·亮) / night-dark(暗夜·暗) / graphite-dark(石墨黑·暗)

4. 组装 → 单个 HTML

source .venv/bin/activate
python scripts/build_html.py doc.json plan.json -o "<输出名>.html" --theme <选定风格>

脚本会把 ApexCharts / Mermaid / pptxgenjs / jszip 内联进 HTML，产物离线自包含。

5. 呈现

用 present_files 打开生成的 HTML 给用户查看效果。

产物能力（用户侧）

• 顶部三按钮：文字和图表 / 仅文字 / 仅图表；双显时中间分隔条可拖拽调宽。
• 左大纲点击 → 原版与图表两栏同步跳到该章；首项「总览」为全局仪表盘（关键指标 + 结构脑图 + 核心结论）。
• 原版文字/表格可直接编辑；改数字或表格后，对应的数据图（柱/线/饼）自动重渲染。
• 导出分两个独立入口（顶部两个按钮，互不混用）：
  • 导出文字（原版文本内容）：Word(.docx) / PDF / Markdown(.md) / 纯文本(.txt)。
  • 导出图表（图表化解读）：PDF / PowerPoint(.pptx)。
• 页面已内置提示：流程图、思维导图等结构图编辑后不自动同步（需重新生成）。

OCR 流程（纯图片 / 扫描件）

当文档是纯图片 / 扫描件时，抽取出的文字为空，图表化会失效。按以下流程用云端 OCR（用户零配置）补齐文字：

1. 抽取：python scripts/extract.py "<文件>" doc.json — 检测到无文字会打印警告并置 meta.ocr_needed=True（页面顶部弹琥珀色横幅）。
2. 云端识别：调用 WorkBuddy 运行时内置的 OCR 能力（如腾讯文档 OCR 连接器 mcp__tencent-docs__ocr.extract，按页或整篇识别）。无需用户配置 API key，运行时自带。把识别结果写成 ocr.json（支持三种形态）：

   {"pages": [{"page":1,"title":"第一章","text":"识别出的文字…"}, {"page":2,"text":"…"}]}
   // 或 {"text":"整篇识别文字"}
   // 或 {"sections":[{"id":"s1","level":1,"title":"…","text":"…","tables":[]}]}

1. 回填：python scripts/apply_ocr.py doc.json ocr.json -o doc_ocr.json — 合并文字、翻转 ocr_needed=False / ocr_done=True，横幅自动消失。
2. 继续：把 doc_ocr.json 当作正常 doc.json 走 plan.py → build_html.py。

若运行环境未提供任何 OCR 能力（极少数情况），则维持警告横幅、仅展示原文——这是安全降级，不是 bug。

限制

• 单文件 & 体积：一次只处理一个文档；单个文件体积不得超过 40 MB，超过会在抽取阶段被直接拒绝（提示压缩 / 拆分）。
• .doc / .xls 旧格式不支持，请先另存为 .docx / .xlsx。
• 纯图片 / 扫描件（OCR 已支持，云端、用户零配置）：PDF、Word 若为纯图片或扫描件（无文字层），抽取阶段会置 meta.ocr_needed=True 并弹出警告横幅。此时由 WorkBuddy 运行时内置的云端 OCR（用户无需任何配置，运行时自带）识别文字，再用 apply_ocr.py 回填 doc.json，即可照常生成图表化解读。流程见下方「OCR 流程」。
• 编辑同步仅覆盖数据图（柱/线/饼）；结构图（流程/脑图）需重新生成文档才更新。
• 导出库内联使单文件体积较大（数百 KB~MB 级），但仍离线可用。