SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场glmv-pdf-to-web

glmv-pdf-to-web

前端与建站

查看项目

更新于 10-16 08:52

技能介绍

用途

glmv-pdf-to-web 用于将研究论文或技术文档 PDF 转换为精美的单页项目网站，即常用于 NeurIPS、CVPR、ICLR 等论文发布的项目主页。当用户提出“从 PDF 制作项目主页”“创建论文网站”“为这篇论文构建学术网站”“论文主页”“做项目主页”“根据 pdf 做网页”“把论文做成主页”等中英文请求时触发。

主要能力

  • 将 PDF 页面在本地以 DPI 120 转换为图片。
  • 生成结构化的 outline.json（WebPlan schema）网页规划文件。
  • 在本地裁剪所需图片，保存至 crops/ 目录。
  • 通过 generate_web.py 生成最终单页 HTML 网站。
  • 支持本地 PDF 路径或 HTTP/HTTPS URL 输入（URL 先用 curl 下载再转换）。
  • 输出目录约定为 {WORKSPACE}/web/<pdf_stem>_<timestamp>/，其中 <pdf_stem> 为 PDF 文件名（不含扩展名），<timestamp> 格式为 YYYYMMDD_HHMMSS。
  • 网站为单个自包含 HTML 文件，内嵌 CSS，仅使用少量原生 JS，不使用外部 JS 框架，可使用 Google Fonts CDN。
  • HTML 通过相对路径 crops/<name>_crop.png 引用图片。

使用方式

依赖安装（一次性）：

pip install pymupdf pillow

系统工具：curl（macOS/Linux 预装）。

脚本位于：{SKILL_DIR}/scripts/

工作流程分为多个阶段：

  • 阶段 0：创建输出目录，并建立 crops 子目录。

  • 阶段 1：将 PDF 页面转换为图片（DPI 120）。若输入为 URL，先下载：

    pdf_stem=$(basename "$ARGUMENTS" .pdf) curl -L -o "/tmp/${pdf_stem}.pdf" "$ARGUMENTS"

    然后转换：

    python {SKILL_DIR}/scripts/pdf_to_images.py "<pdf_path>" --dpi 120

    输出 JSON 格式为 [{"page": 1, "path": "/abs/path/page_001.png"}, ...]。

  • 阶段 2：按顺序阅读所有页面图片，理解文档内容、图表和结构，记录标题、作者、单位、会议、年份、摘要原文、关键贡献、论文/代码/数据集链接、图表所在页面及大致区域、teaser/hero 图等。此阶段不规划章节。

  • 阶段 3：规划网站章节并保存 outline.json。学术论文的标准结构包括 hero、abstract、contributions、method、results、conclusion、citation 等章节。outline.json 使用指定 schema，包含 project_title、lang、authors、sections_plan 等字段。lang 为 "Chinese" 或 "English"，与 PDF 语言匹配；required_images 在无需图片时为空数组 []；url 为阶段 1 输出的本地页面路径。

  • 阶段 4：裁剪所需图片。必须通过 Agent 工具委托给干净的子代理完成所有裁剪，必须使用提供的 {SKILL_DIR}/scripts/crop.py 脚本，不得自行编写裁剪代码或直接使用 PIL/Pillow。子代理使用 grounding 式定位，输出 0–999 归一化坐标的边界框。裁剪命令示例：

    python <SKILL_DIR>/scripts/crop.py
    --path "<page_image_path>"
    --box X1 Y1 X2 Y2
    --name "<crop_name>"
    --out-dir "<out_dir>/crops"

    crop.py 输出 JSON：{"path": "/abs/path/<name>_crop.png"}。裁剪后需读取输出图片进行视觉验证，若未命中目标或过宽/过窄则调整坐标重新运行。独立页面可并行启动子代理。

  • 阶段 5：测量裁剪图片尺寸，根据宽高比给出布局建议：宽高比 < 0.7（高窄）建议 max-width: 400–500px 居中；0.7–1.3（近方形）建议 max-width: 600–700px；> 1.3（宽）建议全宽 max-width: 100%；> 2.0（极宽，如表格）建议全宽并带水平滚动回退。

  • 阶段 6：生成单页 HTML。先将 HTML 写入 /tmp/website.html，所有 <img src="..."> 必须使用相对路径 crops/<name>_crop.png，不得使用绝对路径。然后保存：

    python {SKILL_DIR}/scripts/generate_web.py
    --html-file /tmp/website.html
    --title "<paper title>"
    --out-dir "<out_dir>/"

HTML 规范

页面布局：最大内容宽度 900px 居中，舒适的侧边内边距；粘性顶部导航含章节锚点链接和平滑滚动；在 1200px 宽度下美观，在 768px 下可读。

排版：使用两种 Google Fonts（一种用于标题，一种用于正文/UI）；正文 17–18px，行高 1.7；清晰的标题层级（h1 >> h2 >> h3）。

视觉风格：若用户指定风格则严格遵循；否则根据论文领域和语气推断合适美学（如 CV/ML 论文 → 干净现代学术风；系统论文 → 深色技术风；人文学科 → 温暖编辑衬线风）。颜色和字体定义为 CSS 变量，无固定调色板或字体要求。

章节指南：

  • hero：大标题（2–3rem）、作者列表含单位上标、会议徽章胶囊；链接按钮 [📄 Paper] [💻 Code] [🗄️ Dataset]，无 URL 时置灰；下方为 teaser 图（若找到）。
  • abstract：原文文本，带细微左边框强调。
  • contributions：2–3 列 CSS 网格卡片，每张含 Unicode 符号 + 标题 + 描述。
  • method：全宽架构图（<figure><img><figcaption>）+ 文字说明。
  • results：定量表格使用真实 <table>，使用 PDF 中的实际数字，最佳数字加粗；定性图以网格展示（2–4 张图带说明）。
  • conclusion：2–3 段。
  • citation：<pre><code> BibTeX 块，从 PDF 元数据重建；使用 navigator.clipboard 原生 JS 的“复制”按钮。

图片：所有 <img> 使用相对路径 crops/<name>_crop.png；添加 loading="lazy" 和描述性 alt；包裹在 <figure> 和 <figcaption> 中。

动画（仅细微）：通过 IntersectionObserver + CSS transitions 实现滚动淡入；按钮/卡片悬停状态。

质量检查清单

  • 输出目录命名为 <pdf_stem>_<timestamp>/。
  • outline.json 保存为有效 WebPlan schema。
  • 所有裁剪保存至 crops/（仅本地）。
  • 所有元数据（标题、作者、会议、年份）来自 PDF。
  • 摘要为原文。
  • 定量表格含论文中的真实数字。
  • 所有裁剪图片通过 crops/<name>_crop.png 引用。
  • BibTeX 块准确且可复制。
  • 导航锚点滚动到正确章节。
  • 调用 generate_web.py 并确认成功。

语言

与 PDF 语言匹配。英文论文 → 英文网站；中文论文 → 中文。不混用。

适用场景

适用于需要从研究论文、技术报告或项目文档 PDF 快速生成学术/项目主页的场景，尤其是机器学习、计算机视觉等领域的论文发布页。

限制

  • 依赖 Python 包 pymupdf 和 pillow，以及系统工具 curl。
  • 裁剪必须使用提供的 crop.py 脚本，不得使用其他方法。
  • 裁剪必须委托给干净的子代理，以保证视觉坐标精度。
  • 网站为单页自包含 HTML，不使用外部 JS 框架。
  • 图片必须使用相对路径，不得使用绝对路径。
  • 关于收费、价格、平台等具体信息暂未提供。