文章信息长图制作专家
概述
将学术论文 PDF 转化为结构化的信息图长图（PNG），用于学术传播与新媒体展示。
核心能力：从 PDF 提取论文核心信息 → 选择合适模块组合 → 生成 HTML 信息图 → 渲染为高清 PNG。
硬性质量标准：
- 默认输出1张图：信息图完整输出为单张长图
- 最终 PNG 分辨率不低于 800 DPI：device_scale_factor=2 → PIL 等比缩放至 ≤6MP → 写入 dpi=(800,800) 元数据
- 按内容实际高度等比缩放，确保全部内容完整显示，同时控制总像素 ≤600万（6MP）。不裁剪、不补白、不强制固定宽高比。9:16 比例仅作为设计参考值，若内容自然高度超出该比例则允许偏长
- 渲染流程：先以 2x scale 渲染获得足够基础分辨率，再用 PIL LANCZOS 按内容实际高度等比缩放至 ≤6MP
字号标准（1500px 宽通用）：
- 标题（section-title）：34px
- 正文信息栏（info-bar）：28px
- 卡片描述（card-desc）：26.5px
- 内联正文（two-col 内、卡片内）：27.5px
- 流程图主文字（flow-step .txt）：27.5px
- 流程图副文字（flow-step 小字）：22px
- 数字大字（metric .num）：48px，单位（unit）：28px，标签（label）：25px
- 卡片标题（card-title）：29px
- 引用框（quote-box p）：29px
- 两列布局标题：29px，正文：27.5px
- 页眉标题 h1：44px，期刊名：26px，作者/DOI：26px
- 页脚信息（引用格式/DOI）不得出现，页面末尾仅留适度内边距收尾
布局参数：
- 模板宽度：1500px
- 内边距：60px（header 36px垂直/60px水平，section 24px垂直/60px水平）
- QR码区域：140×140px
- 卡片内距：18px
触发条件
当用户提供 PDF 文件并请求以下任一操作时触发：
- 制作信息图 / 信息长图
- 论文可视化 / 学术长图
- 论文配图 / 论文摘要图
- 将论文转为长图
附加输入：用户可能同时提供文章二维码图片（PNG 格式，通常为期刊网站文章页链接），应嵌入信息图标题区域。
工作流程
第一步：PDF 文本提取
使用 pdfplumber 或 PyMuPDF (fitz) 提取论文文本。
# 优先尝试 PyMuPDF（对中文支持更好）
import fitz
doc = fitz.open(pdf_path)
total = doc.page_count
for page_num in range(total):
page = doc[page_num]
text = page.get_text()
doc.close()
常见问题：部分 PDF 使用嵌入式 CID 字体，中文提取可能乱码。此时：
- 英文摘要通常完整可读，作为内容骨架
- 结合可辨识的中文片段（作者、标题、DOI、章节标题等）
- 运用学科知识补全内容
第二步：内容分析
从提取文本中识别以下关键信息：
- 论文标题（中文 + 英文）
- 作者列表
- 期刊名称、DOI
- 研究背景 — 政策背景、现实困境、研究必要性（精炼为3-5句话）
- 科学问题 — 论文明确提出的核心研究问题（通常在引言末尾，1-3个）
- 核心方法
- 关键数据/发现 — 这些将转化为指标卡
- 主要结论
- 创新点 / 启示
第三步：模块选择
根据论文特点，从以下模块中选择合适组合：
| 模块 | 适用场景 |
|---|---|
| Background（研究背景） | 精炼概括研究背景，作为独立全宽模块（Info Bar 样式），内容要求精炼，突出政策背景、现实困境与研究必要性 |
| Research Questions（科学问题） | 列出论文探讨的核心科学问题（通常1-3个），作为独立全宽模块，用编号圆点逐条呈现 |
| Metrics（指标卡） | 论文有量化结果（n个维度、m个指标等） |
| Info Bar（信息栏） | 需要展示研究方法或数据来源 |
| Flow（流程图） | 论文描述分步骤的方法或演化过程 |
| Cards Grid（卡片网格） | 论文有3-5个并列的核心发现/创新实践 |
| Eco Grid（生态系统图） | 论文呈现分层结构或系统架构 |
| Insights Grid（启示卡片） | 论文有多条并列启示或建议 |
| Quote Box（引用框） | 需要突出核心结论 |
| Two Column（双列布局） | 需要左右对比展示 |
| Footer（页脚） | 必须包含引用信息 |
模块选择原则：
- 研究背景和科学问题为必选模块，排在 Header 之后、Metrics 之前，形成"背景→问题→数据→方法→发现→结论"的完整叙事逻辑
- 研究背景内容须精炼概括，控制在3-5句话，突出核心矛盾与研究必要性，不堆砌文献综述
- 科学问题直接引用论文原文表述，保持准确性，每个问题独立成行
- 指标卡紧随科学问题之后（抓眼球）
- 卡片类模块 3-4 个为一组
- 每个模块配一个 section-title
第四步：生成 HTML
视觉风格：严格遵循 references/visual_style.md 中的规范。核心要点：
- 深蓝主色 #1B3A5C，5 种辅色循环使用
- 信息图宽度 1500px
- 模块标题：左侧 4px 橙色竖线
- 卡片圆角 8px，间距 12px
Header 布局（含二维码）：Header 采用 flex 左右双列布局：
- 左侧：文字区（flex: 1），含期刊名、标题、作者/DOI 等元数据
- 右侧：二维码图片（flex-shrink: 0），140×140px，白色背景（#fff），6px 圆角，6px 内边距
Header CSS 模板：
.header { display: flex; gap: 28px; align-items: center; ... }
.header .header-text { flex: 1; min-width: 0; }
.header .qr-code { flex-shrink: 0; width: 140px; height: 140px; border-radius: 6px; padding: 6px; background: #fff; }
.header .qr-code img { width: 100%; height: 100%; display: block; }
Header HTML 模板：
<div class="header">
<div class="header-text">
<div class="journal">期刊名 · 英文名 · 卷期</div>
<h1>论文标题</h1>
<div class="meta"><span>作者</span><span>机构</span><span>DOI</span></div>
</div>
<div class="qr-code">
<img src="{二维码 base64 data URI}" alt="文章二维码">
</div>
</div>
二维码处理流程（若用户提供）：
1. 读取二维码 PNG 文件，转为 base64 data URI
2. 嵌入到 Header 的 .qr-code img 标签中
3. 若用户未提供二维码，Header 保持全宽文本布局（无右侧 QR 区）
从模板开始：以 assets/infographic_template.html 为起点，替换 {{PLACEHOLDER}} 变量并填充 {{MODULES}} 区域。
格式转换注意：
- 作者列表使用中文逗号分隔
- DOI 使用完整格式
- HTML 中的 & 需写为 &amp;
- 确保 HTML 文件使用 UTF-8 编码
第五步：渲染 PNG
使用 Playwright + Microsoft Edge 无头模式渲染为单张 PNG，再通过 PIL 等比缩放至 ≤6MP（不裁剪，不补白，内容完整性优先）：
import os, math, shutil, tempfile
from PIL import Image
from playwright.sync_api import sync_playwright
# Copy HTML to temp ASCII path to avoid file:// URL encoding issues
tmp_html = os.path.join(tempfile.gettempdir(), "infographic_render.html")
shutil.copy2(html_path, tmp_html)
file_url = "file:///" + tmp_html.replace(os.sep, "/")
with sync_playwright() as p:
browser = p.chromium.launch(channel="msedge", headless=True, args=["--no-sandbox", "--disable-gpu"])
page = browser.new_page(viewport={"width": 1500, "height": 100}, device_scale_factor=2)
page.goto(file_url, wait_until="networkidle")
height = page.evaluate("document.body.scrollHeight")
page.set_viewport_size({"width": 1500, "height": height + 40})
page.screenshot(path=png_path, full_page=True)
browser.close()
# PIL proportional resize to ≤6MP — NO cropping, NO padding, NO fixed aspect ratio
# 9:16 ratio is a guideline; if content needs more height, preserve all content
img = Image.open(png_path)
ow, oh = img.size
raw_mp = ow * oh
max_mp = 6_000_000
if raw_mp > max_mp:
scale = math.sqrt(max_mp / raw_mp)
new_w = int(ow * scale)
new_h = int(oh * scale)
while new_w * new_h > max_mp:
new_w -= 1
new_h = int(max_mp / new_w)
img_resized = img.resize((new_w, new_h), Image.LANCZOS)
else:
img_resized = img
img_resized.save(png_path, dpi=(800, 800))
前置依赖：
pip install playwright pillow
playwright install msedge
可直接使用 scripts/render_png.py：该脚本封装了上述渲染+缩放流程，支持命令行调用：
python scripts/render_png.py <html_path> [output_png_path]
第六步：交付
- 交付 1 张 PNG 文件给用户
- 将 HTML 和 PNG 复制到工作区输出目录
- 清理临时文件（PDF 提取脚本、中间文本文件）
重要注意事项
- PDF 乱码处理：遇到 CID 字体乱码时，不要反复尝试提取 — 使用英文摘要 + 可识别的中文片段 + 学科常识完成信息图。
- 内容准确性：信息图中的数据和结论必须来自论文原文，不得编造。
- 分辨率与像素量（硬性）：按内容实际高度等比缩放，确保全部内容完整显示，同时控制总像素 ≤600万（6MP）。不裁剪、不补白、不强制固定宽高比。9:16 比例仅作为设计参考值。DPI 元数据 800。流程：
device_scale_factor=2渲染 → PILLANCZOS按内容实际高度等比缩放至 ≤6MP（不裁剪不补白）→dpi=(800,800)。 - 单张输出：信息图完整输出为单张长图，不拆分。
- 文件路径：所有输出文件保存到当前工作区目录。
- 模块数量：建议 4-7 个模块（含 header），避免信息过载。
- 文章二维码：若用户提供了文章二维码图片，必须在 Header 标题右侧嵌入。Logo 转为 base64 data URI 内嵌，尺寸 140×140px、白色底、6px 圆角、6px 内边距。若用户未提供则跳过该区域。
- 页脚禁止：信息图末尾不得出现引用格式、DOI、收稿日期、"信息图制作"等任何页脚标注信息。页面以最后一个内容模块的 section padding 自然收尾。
资源文件
references/visual_style.md— 完整的视觉风格规范（色彩、字体、布局、模块结构）assets/infographic_template.html— HTML 模板（含完整 CSS 样式）scripts/render_png.py— HTML→PNG 渲染脚本
