wizz-method 1.0.2 → 1.1.0

package/src/skills-lib/huashu-design/scripts/export_deck_stage_pdf.mjs

@@ -0,0 +1,130 @@
+#!/usr/bin/env node
+/**
+ * export_deck_stage_pdf.mjs — 单文件 <deck-stage> 架构专用 PDF 导出
+ *
+ * 用法：
+ *   node export_deck_stage_pdf.mjs --html <deck.html> --out <file.pdf> [--width 1920] [--height 1080]
+ *
+ * 什么时候用这个脚本？
+ *   - 你的 deck 是**单 HTML 文件**，所有 slide 是 `<section>`，外层用 `<deck-stage>` 包裹
+ *   - 此时 `export_deck_pdf.mjs`（多文件专用）用不上
+ *
+ * 为什么不能直接 `page.pdf()`（2026-04-20 踩坑记录）：
+ *   1. deck-stage 的 shadow CSS `::slotted(section) { display: none }` 让只有 active slide 可见
+ *   2. print 媒体下外层 `!important` 压不住 shadow DOM 规则
+ *   3. 结果：PDF 永远只有 1 页（active 那张）
+ *
+ * 解决方案：
+ *   打开 HTML 后，用 page.evaluate 把所有 section 从 deck-stage slot 拔出来，
+ *   挂到 body 下一个普通 div，内联 style 强制 position:relative + 固定尺寸，
+ *   每个 section 加 page-break-after: always，最后一个改 auto 避免尾部空白页。
+ *
+ * 依赖：playwright
+ *   npm install playwright
+ *
+ * 输出特点：
+ *   - 文字保留矢量（可复制、可搜索）
+ *   - 视觉 1:1 保真
+ *   - 字体必须能被 Chromium 加载（本地字体或 Google Fonts）
+ */
+
+import { chromium } from 'playwright';
+import fs from 'fs/promises';
+import path from 'path';
+
+function parseArgs() {
+  const args = { width: 1920, height: 1080 };
+  const a = process.argv.slice(2);
+  for (let i = 0; i < a.length; i += 2) {
+    const k = a[i].replace(/^--/, '');
+    args[k] = a[i + 1];
+  }
+  if (!args.html || !args.out) {
+    console.error('用法: node export_deck_stage_pdf.mjs --html <deck.html> --out <file.pdf> [--width 1920] [--height 1080]');
+    process.exit(1);
+  }
+  args.width = parseInt(args.width);
+  args.height = parseInt(args.height);
+  return args;
+}
+
+async function main() {
+  const { html, out, width, height } = parseArgs();
+  const htmlAbs = path.resolve(html);
+  const outFile = path.resolve(out);
+
+  await fs.access(htmlAbs).catch(() => {
+    console.error(`HTML file not found: ${htmlAbs}`);
+    process.exit(1);
+  });
+
+  console.log(`Rendering ${path.basename(htmlAbs)} → ${path.basename(outFile)}`);
+
+  const browser = await chromium.launch();
+  const ctx = await browser.newContext({ viewport: { width, height } });
+  const page = await ctx.newPage();
+
+  await page.goto('file://' + htmlAbs, { waitUntil: 'networkidle' });
+  await page.waitForTimeout(2500);  // 等 Google Fonts + deck-stage init
+
+  // 核心修复：把 section 从 shadow DOM slot 拔出来摊平
+  const sectionCount = await page.evaluate(({ W, H }) => {
+    const stage = document.querySelector('deck-stage');
+    if (!stage) throw new Error('<deck-stage> not found — 这个脚本只适用于单文件 deck-stage 架构');
+    const sections = Array.from(stage.querySelectorAll(':scope > section'));
+    if (!sections.length) throw new Error('No <section> found inside <deck-stage>');
+
+    // 注入打印样式
+    const style = document.createElement('style');
+    style.textContent = `
+      @page { size: ${W}px ${H}px; margin: 0; }
+      html, body { margin: 0 !important; padding: 0 !important; background: #fff; }
+      deck-stage { display: none !important; }
+    `;
+    document.head.appendChild(style);
+
+    // 摊平到 body 下
+    const container = document.createElement('div');
+    container.id = 'print-container';
+    sections.forEach(s => {
+      // 内联 style 拿到最高优先级；确保 position:relative 让 absolute 子元素正确约束
+      s.style.cssText = `
+        width: ${W}px !important;
+        height: ${H}px !important;
+        display: block !important;
+        position: relative !important;
+        overflow: hidden !important;
+        page-break-after: always !important;
+        break-after: page !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      `;
+      container.appendChild(s);
+    });
+    // 最后一页不分页，避免尾部空白页
+    const last = sections[sections.length - 1];
+    last.style.pageBreakAfter = 'auto';
+    last.style.breakAfter = 'auto';
+    document.body.appendChild(container);
+    return sections.length;
+  }, { W: width, H: height });
+
+  await page.waitForTimeout(800);
+
+  await page.pdf({
+    path: outFile,
+    width: `${width}px`,
+    height: `${height}px`,
+    printBackground: true,
+    preferCSSPageSize: true,
+  });
+
+  await browser.close();
+
+  const stat = await fs.stat(outFile);
+  const kb = (stat.size / 1024).toFixed(0);
+  console.log(`\n✓ Wrote ${outFile}  (${kb} KB, ${sectionCount} pages, vector)`);
+  console.log(`  验证页数：mdimport "${outFile}" && pdfinfo "${outFile}" | grep Pages`);
+}
+
+main().catch(e => { console.error(e); process.exit(1); });

package/src/skills-lib/huashu-design/scripts/fetch_images.py

@@ -0,0 +1,94 @@
+#!/usr/bin/env python3
+"""
+从 Wikimedia Commons 抓真实图片（公共领域 / CC），供 huashu-design「内容型设计取真图」用（Phase 3.5）。
+
+为什么有这个脚本：内容型设计（鹦鹉/咖啡/马来西亚…）必须用真图，不能 CSS 色块糊弄。
+每次让模型现写抓图逻辑既慢又容易漏坑（忘清代理→TLS 炸 / 忘合规 UA→429）。这里固化好，下次只改关键词。
+
+用法：
+  python3 scripts/fetch_images.py --query "Petronas Towers" "Langkawi beach" "George Town street" \
+      --out 项目/assets/img --count 2 --width 1600
+
+每个 query 取前 count 张、缩放到 width、下载到 out，并打印清单（路径 | 许可 | 作者 | 来源页）便于诚实性核对。
+全部抓不到 → 退出码 1，提示走 Phase 3.5 取图三级兜底（Unsplash/Pexels → 生图 → 诚实 placeholder）。
+"""
+import argparse, json, os, re, sys, urllib.parse, urllib.request
+
+# ① 清代理：本机 curl/urllib 走代理会 TLS 炸（见 memory feedback_gemini_proxy）
+for _k in ("ALL_PROXY", "all_proxy", "HTTP_PROXY", "http_proxy", "HTTPS_PROXY", "https_proxy"):
+    os.environ.pop(_k, None)
+
+API = "https://commons.wikimedia.org/w/api.php"
+# ② 合规 User-Agent 是硬性要求，否则 Wikimedia 返 429
+UA = "huashu-design-image-fetcher/1.0 (https://huasheng.ai; skill contact)"
+
+
+def _api_get(params):
+    url = API + "?" + urllib.parse.urlencode(params)
+    req = urllib.request.Request(url, headers={"User-Agent": UA})
+    with urllib.request.urlopen(req, timeout=30) as r:
+        return json.load(r)
+
+
+def _safe(name):
+    return re.sub(r"[^\w\-.]", "_", name)[:60]
+
+
+def fetch(query, out, count, width):
+    params = {
+        "action": "query", "format": "json", "generator": "search",
+        "gsrsearch": query, "gsrnamespace": 6, "gsrlimit": count,
+        "prop": "imageinfo", "iiprop": "url|extmetadata", "iiurlwidth": width,
+    }
+    try:
+        data = _api_get(params)
+    except Exception as e:
+        print(f"[FAIL search] {query}: {e}", file=sys.stderr)
+        return []
+    pages = (data.get("query", {}) or {}).get("pages", {})
+    got = []
+    for p in list(pages.values())[:count]:
+        ii = (p.get("imageinfo") or [{}])[0]
+        thumb = ii.get("thumburl") or ii.get("url")
+        if not thumb:
+            continue
+        meta = ii.get("extmetadata", {}) or {}
+        lic = (meta.get("LicenseShortName", {}) or {}).get("value", "?")
+        artist = re.sub("<[^>]+>", "", (meta.get("Artist", {}) or {}).get("value", "?")).strip()
+        ext = os.path.splitext(thumb)[1].split("?")[0] or ".jpg"
+        fn = _safe(query) + "_" + _safe(p.get("title", "img").replace("File:", ""))
+        fn = os.path.splitext(fn)[0][:55] + ext
+        path = os.path.join(out, fn)
+        try:
+            req = urllib.request.Request(thumb, headers={"User-Agent": UA})
+            with urllib.request.urlopen(req, timeout=60) as r, open(path, "wb") as f:
+                f.write(r.read())
+            got.append(path)
+            print(f"[OK] {path}  | {lic} | {artist} | {ii.get('descriptionurl','')}")
+        except Exception as e:
+            print(f"[FAIL dl] {thumb}: {e}", file=sys.stderr)
+    if not got:
+        print(f"[EMPTY] 「{query}」没抓到——换关键词，或走 Phase 3.5 兜底", file=sys.stderr)
+    return got
+
+
+def main():
+    ap = argparse.ArgumentParser(description="Wikimedia Commons 真图抓取（huashu-design Phase 3.5）")
+    ap.add_argument("--query", nargs="+", required=True, help="一个或多个英文关键词（英文命中率高）")
+    ap.add_argument("--out", required=True, help="输出目录（建议 项目/assets/img）")
+    ap.add_argument("--count", type=int, default=2, help="每个关键词抓几张（默认 2）")
+    ap.add_argument("--width", type=int, default=1600, help="缩放宽度 px（默认 1600）")
+    a = ap.parse_args()
+    os.makedirs(a.out, exist_ok=True)
+    allgot = []
+    for q in a.query:
+        allgot += fetch(q, a.out, a.count, a.width)
+    print(f"\n=== 共下载 {len(allgot)} 张到 {a.out} ===")
+    print("⚠️ 诚实性核对：去掉每张图信息是否有损？许可是否允许用途？不合适的删掉。")
+    if not allgot:
+        print("❌ 全部失败 → 走 Phase 3.5 取图三级兜底（Unsplash/Pexels → 生图 → 诚实 placeholder，不卡流程）", file=sys.stderr)
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

package/src/skills-lib/huashu-design/scripts/gen_deck_thumbs.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * gen_deck_thumbs.mjs — 为多文件 deck 每页生成缩略图（给 deck_index.html 的「无限画廊」概览用）。
+ *
+ * 背景：deck_index.html 有两种概览——
+ *   · 网格 grid（默认 60%）：用 iframe 渲染真实子页面，清晰、所见即所得，无需缩略图。
+ *   · 无限画廊 gallery（40%）：把所有页无缝无限平铺 + 缓慢漂移，几十~上百个瓦片若都用 iframe 会很卡，
+ *     所以画廊改用 <img> 缩略图——同一张图复用多次浏览器只解码一次，流畅。
+ *   本脚本就是给画廊准备这批缩略图。grid 模式不需要它。
+ *
+ * 用法（复制到 deck 项目根目录，装依赖后运行）：
+ *   npm install playwright sharp
+ *   node gen_deck_thumbs.mjs --slides slides --out thumbs [--width 1600] [--quality 86]
+ *
+ * 然后在 index.html 的 MANIFEST 给每项加 thumb（与 file 同名 .jpg）：
+ *   { file: "slides/01-cover.html", thumb: "thumbs/01-cover.jpg", label: "封面" }
+ * deck_index.html 仅在画廊模式用 thumb；网格模式始终用 file(iframe)。没有 thumb 时画廊回退 iframe。
+ *
+ * 提示：缩略图分辨率别太低（默认 1600px），否则画廊里卡片 hover 放大后会发虚。
+ */
+import { chromium } from 'playwright';
+import sharp from 'sharp';
+import fs from 'fs';
+import path from 'path';
+
+const arg = (n, d) => { const i = process.argv.indexOf('--' + n); return i > -1 && process.argv[i + 1] ? process.argv[i + 1] : d; };
+const slidesDir = arg('slides', 'slides');
+const outDir = arg('out', 'thumbs');
+const width = parseInt(arg('width', '1600'), 10);
+const quality = parseInt(arg('quality', '86'), 10);
+const W = parseInt(arg('canvas-w', '1920'), 10);
+const H = parseInt(arg('canvas-h', '1080'), 10);
+
+if (!fs.existsSync(slidesDir)) { console.error('找不到 slides 目录: ' + slidesDir); process.exit(1); }
+fs.mkdirSync(outDir, { recursive: true });
+const files = fs.readdirSync(slidesDir).filter(f => f.endsWith('.html')).sort();
+if (!files.length) { console.error('slides 目录里没有 .html'); process.exit(1); }
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: W, height: H }, deviceScaleFactor: 1 });
+let ok = 0;
+for (const f of files) {
+  const base = f.replace(/\.html$/, '');
+  const out = path.join(outDir, base + '.jpg');
+  try {
+    await page.goto('file://' + path.resolve(slidesDir, f), { waitUntil: 'load' });
+    await page.waitForTimeout(2800);                 // 等 webfont / 图片 paint
+    const buf = await page.screenshot({ type: 'png', clip: { x: 0, y: 0, width: W, height: H } });
+    await sharp(buf).resize(width).jpeg({ quality }).toFile(out);
+    ok++; console.log('[ok] ' + out);
+  } catch (e) { console.error('[FAIL] ' + f + ': ' + e.message); }
+}
+await browser.close();
+console.log(`\n=== ${ok}/${files.length} 张缩略图 → ${outDir}/ ===`);
+console.log('在 index.html 的 MANIFEST 每项加 thumb: "' + outDir + '/<同名>.jpg"（仅画廊模式用到）');