PPTX → 高保真单文件 HTML 演示稿
目标：不重新设计，只做忠实复刻。配色/位置/字号/圆角/底图全部照搬源稿。
分工
- 本技能负责：解析源 pptx 设计规格 → 生成 HTML → 截图自检。
- 排版规范（视口安全 16:9、导航 JS、打印导 PDF、主题/字体约束）沿用
html-ppt-skill模块 A，不要重复造。 - 交付形态默认只出
.html；用户明确要"可编辑/pptx"时再走 html-ppt-skill 的 B 分支。
五步流程
1. 提取文案与位置（python-pptx）
遍历 prs.slides[i].shapes，对每个 shape 打印：shape_type / name / left,top,width,height（转 inches：/914400）/ 段落文本 / run 字号pt / 字体名 / bold。
- 分组（shape_type==6）要递归进 sh.group.shapes。
- 表格走 shape.has_table。
- 同时读 slide.has_notes_slide 的备注。
2. 提取配色 / 渐变 / 圆角 / 自定义路径（zipfile + 正则）
直接读 ppt/slides/slideN.xml：
import zipfile, re
z = zipfile.ZipFile(pptx)
c = z.read(f"ppt/slides/slide{si}.xml").decode("utf-8", "ignore")
re.findall(r'srgbClr val="([0-9A-Fa-f]{6})"', c) # 配色直方图（Counter 取 top20）
re.search(r'<a:gradFill>.*?</a:gradFill>', c, re.S) # 渐变：gs 位置 + alpha + <a:lin ang>
re.search(r'<a:lin ang="(\d+)"', g) # OOXML 角度
re.search(r'prstGeom prst="(\w+)"', blk) # 形状类型
re.search(r'<a:gd name="adj" fmla="val (\d+)"/>', blk) # roundRect 圆角比例
re.findall(r'algn="(\w+)"', blk) # 段落对齐（ctr/l/r）
re.search(r'<a:custGeom>.*?</a:custGeom>', blk, re.S) # freeform 路径（判断细线/竖条）
关键换算：
- 渐变角度：CSS 角度 = 90 + OOXML_ang / 60000（OOXML 0° = 向右、顺时针）。
- 圆角半径(in) = adj/100000 × min(w,h)（PPT roundRect 默认 adj=16667）。
- custGeom 里 path 为 w=1140 h=40 且点集在 y=0..1 → 是顶部 1px 细线；点在 x=0..4 → 是左侧竖条。这类"任意多边形"几乎都是分隔线，不要当色块画。
3. 处理底图（通常带 AI 水印）
ppt/media/imageN.png 是整页底图；AI 生成的图右下角常有「AI生成 XXX」水印。
用 PIL 裁掉右下角（约 8–9%）后压 JPEG q82，再 base64 内嵌：
im = Image.open(p).convert("RGB"); W,H = im.size
im.crop((0,0,int(W*0.918),int(H*0.902))).resize((1600, 1047), Image.LANCZOS)\
.save(out, "JPEG", quality=82, optimize=True)
background-size:cover 会再裁掉上下边，水印区域彻底出框。
4. 生成 HTML（单位体系是关键）
slide 固定 16:9，不要用 px、也不要用 cqw（兼容性风险）：
.slide{
position:relative; width:min(100vw,177.78vh); height:min(56.25vw,100vh);
margin:0 auto; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always;
--s:min(1vw,1.7778vh); /* --s = 幻灯片宽的 1% */
}
.slide>div{position:absolute} /* ★ 必加：否则裸 div 不定位 */
英寸 → calc(var(--s)*in*7.5)；磅值 → calc(var(--s)*pt*0.104167)（13.3333in 宽推导）。
所有元素 position:absolute + left/top/width，高度留 auto（浏览器字体度量与 PPT 不同，写死高度会裁字）。
行高：标题 1.1–1.15、正文 1.35–1.5。
坑（务必检查）：
- 裸 <div style="left/top/..."> 没有 position:absolute 就完全不定位 → 圆点、卡片底板、灰底行全部消失。加 .slide>div{position:absolute} 一次性解决。
- 卡片里两行标题时正文 top 要下沉（1 行标题 +0.33in、2 行 +0.71in），否则重叠。
- 中文字体：HTML 侧 'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif（PPT 的微软雅黑在浏览器/非 Windows 环境不一定有）。
- 页码等页脚元素严格照抄源稿位置和内容（源稿总页数可能是全稿数，如 09 / 71），不要自己换算成当前页数。
5. 截图自检（playwright）
from playwright.async_api import async_playwright
b = await p.chromium.launch(channel="chrome") # 或 "msedge"；失败再退回自带 chromium
pg = await b.new_page(viewport={"width":1600,"height":900})
await pg.goto("file:///D:/path/deck.html"); await pg.wait_for_timeout(2500)
for i in range(await pg.locator(".slide").count()):
el = pg.locator(".slide").nth(i); await el.scroll_into_view_if_needed()
await pg.wait_for_timeout(700); await el.screenshot(path=f"shots/slide{i+1}.png")
逐页看图，重点核对：底板色块是否出现、文字有无重叠/溢出、渐变方向对不对。
交付
- 输出到当前项目工作区，用
present_files交付.html。 - 附带一句说明：源 pptx 共 N 页、HTML 是自包含单文件、
Ctrl+P可导 PDF（取消勾选页眉页脚）。
