jvs-ppt-ui 0.0.10 → 0.0.11

package/scripts/generate-complete-ppt-preview.js

@@ -0,0 +1,385 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { defaultDeck, defaultElement, defaultSlide, MCP_EXPORT_DIR, saveDeck } from "../mcp/deckStore.js";
+import { createPptxSafeDeck } from "../mcp/exportQualityTools.js";
+import { applyMotionToDeck } from "../mcp/motionTools.js";
+import { exportDeckToPptx } from "../mcp/pptxExport.js";
+import { generateDeckReviewReport } from "../mcp/reportTools.js";
+import { runPptxVisualRegression } from "../mcp/visualRegressionTools.js";
+
+const W = 1000;
+const H = 562.5;
+
+const theme = {
+  fontFamily: "Heiti SC",
+  fontColor: "#172033",
+  backgroundColor: "#f7fafc",
+  themeColor: ["#155eef", "#12a594", "#ffb020", "#e5484d", "#7258e8"],
+};
+
+function px(value) {
+  return `${value}px`;
+}
+
+function gid(seed) {
+  return `g_${seed}`;
+}
+
+function text(content, x, y, w, h, style = {}) {
+  return defaultElement("text", {
+    content,
+    style: {
+      left: px(x),
+      top: px(y),
+      width: px(w),
+      height: px(h),
+      fontFamily: theme.fontFamily,
+      color: style.color || "#172033",
+      fontSize: px(style.fontSize || 24),
+      fontWeight: style.bold ? "bold" : style.fontWeight,
+      textAlign: style.align || "left",
+      verticalAlign: style.valign || "top",
+      ...style,
+    },
+  });
+}
+
+function shape(kind, x, y, w, h, style = {}, label = "") {
+  return defaultElement("shape", {
+    shape: kind,
+    text: label,
+    style: {
+      left: px(x),
+      top: px(y),
+      width: px(w),
+      height: px(h),
+      fill: style.fill || "#ffffff",
+      borderColor: style.borderColor || "#d9e2f2",
+      borderWidth: style.borderWidth ?? "1px",
+      color: style.color || "#172033",
+      fontSize: px(style.fontSize || 18),
+      fontWeight: style.bold ? "bold" : style.fontWeight,
+      textAlign: style.align || "center",
+      verticalAlign: style.valign || "middle",
+      ...style,
+    },
+  });
+}
+
+function line(x1, y1, x2, y2, style = {}) {
+  return defaultElement("line", {
+    start: [x1, y1],
+    end: [x2, y2],
+    lineStyle: style.lineStyle || "solid",
+    style: {
+      left: px(Math.min(x1, x2)),
+      top: px(Math.min(y1, y2)),
+      width: px(Math.abs(x2 - x1) || 1),
+      height: px(Math.abs(y2 - y1) || 1),
+      borderColor: style.borderColor || "#cbd5e1",
+      borderWidth: style.borderWidth || "2px",
+    },
+  });
+}
+
+function chart(chartType, x, y, w, h, labels, datasets) {
+  return defaultElement("chart", {
+    chartType,
+    data: { labels, datasets },
+    style: { left: px(x), top: px(y), width: px(w), height: px(h) },
+  });
+}
+
+function slide(id, title, subtitle = "") {
+  return defaultSlide({
+    slideId: id,
+    title,
+    subtitle,
+    background: "#f7fafc",
+    notes: `本页用于说明：${title}`,
+  });
+}
+
+function addHeader(s, index, section) {
+  s.elements.push(text(section, 62, 28, 360, 24, { fontSize: 15, bold: true, color: "#5b6b82" }));
+  s.elements.push(text(String(index).padStart(2, "0"), 890, 28, 48, 24, { fontSize: 15, bold: true, color: "#5b6b82", align: "right" }));
+  s.elements.push(line(62, 58, 938, 58, { borderColor: "#d8e1ee", borderWidth: "1px" }));
+}
+
+function addTitle(s, titleValue, subtitleValue) {
+  s.elements.push(text(titleValue, 62, 78, 650, 54, { fontSize: 38, bold: true }));
+  if (subtitleValue) s.elements.push(text(subtitleValue, 64, 136, 760, 38, { fontSize: 18, color: "#5b6b82" }));
+}
+
+function coverSlide() {
+  const s = slide("complete_ppt_cover", "MCP 生产级 PPT 生成系统", "给 Codex 和其它 agent 的分步操作入口");
+  s.background = "#071426";
+  s.elements.push(shape("rect", 0, 0, W, H, { fill: "#071426", borderWidth: "0px" }));
+  s.elements.push(shape("rect", 632, 0, 368, H, { fill: "#0f766e", borderWidth: "0px" }));
+  s.elements.push(shape("roundRect", 68, 68, 150, 34, { fill: "#13243a", borderColor: "#284461", color: "#b7c6d8", fontSize: 14, bold: true }, "JVS PPT UI / MCP"));
+  s.elements.push(text("把 PPT 生成拆成 agent 可持续操作的生产流程", 68, 132, 548, 164, { fontSize: 44, bold: true, color: "#ffffff" }));
+  s.elements.push(text("从语义 DSL、组件布局、动效策略、质量评分到 PPTX 安全导出，每一步都可以被 Codex 独立调用、检查和返工。", 72, 318, 520, 76, { fontSize: 20, color: "#cbd7e6" }));
+  [["35+", "细粒度工具"], ["10", "完整页面"], ["QA", "渲染检查"]].forEach(([value, label], i) => {
+    s.elements.push(shape("roundRect", 72 + i * 166, 438, 138, 72, { fill: i === 0 ? "#155eef" : "#13243a", borderColor: "#2e4967", color: "#ffffff", fontSize: 20, bold: true }, `${value}\n${label}`));
+  });
+  s.elements.push(shape("roundRect", 684, 92, 234, 352, { fill: "#effaf7", borderWidth: "0px", color: "#0f2d2a", fontSize: 18, bold: true }, "PLAN\n\nDSL\n\nLAYOUT\n\nMOTION\n\nEXPORT"));
+  s.elements.push(text("完整效果预览", 710, 466, 180, 34, { fontSize: 28, bold: true, color: "#ffffff", align: "center" }));
+  return s;
+}
+
+function problemSlide() {
+  const s = slide("complete_ppt_problem", "一次性生成很快，但很难稳定到生产级", "问题不是模型不会写内容，而是缺少可检查、可返工、可复用的操作层。");
+  addHeader(s, 2, "01 / 为什么要拆");
+  addTitle(s, s.title, s.subtitle);
+  const items = [
+    ["结构不可控", "模型一次输出所有页面，页面之间的叙事、层级和版式约束很难被持续验证。"],
+    ["局部返工成本高", "只想调一个图表、一组卡片或一段动效时，重新生成会破坏其它已通过的页面。"],
+    ["导出风险隐藏", "复杂样式、动画、图片裁剪在 PPTX 导出时可能降级，需要显式预检。"],
+  ];
+  items.forEach(([k, v], i) => {
+    const y = 220 + i * 92;
+    s.elements.push(shape("roundRect", 66, y, 260, 62, { fill: "#fff4f4", borderColor: "#ffd0d3", color: "#a61b2b", fontSize: 23, bold: true }, k));
+    s.elements.push(text(v, 356, y + 6, 548, 54, { fontSize: 20, color: "#334155" }));
+  });
+  s.elements.push(shape("roundRect", 738, 94, 184, 76, { fill: "#172033", borderWidth: "0px", color: "#ffffff", fontSize: 22, bold: true }, "核心判断\n要生成，也要能编辑"));
+  return s;
+}
+
+function architectureSlide() {
+  const s = slide("complete_ppt_architecture", "MCP 应该变成 PPT 生产流水线，而不是一个生成按钮", "每个阶段都有输入、产物、检查点和下一步操作入口。");
+  addHeader(s, 3, "02 / 系统架构");
+  addTitle(s, s.title, s.subtitle);
+  const stages = [
+    ["需求", "topic / audience / objective"],
+    ["DSL", "semantic outline / registry"],
+    ["组件", "cards / charts / timeline"],
+    ["质量", "score / suggest / fix"],
+    ["动效", "strategy / timeline"],
+    ["导出", "safe pptx / visual QA"],
+  ];
+  stages.forEach(([name, desc], i) => {
+    const x = 70 + i * 146;
+    s.elements.push(shape("roundRect", x, 238, 112, 92, { fill: i % 2 ? "#eefbf7" : "#eef4ff", borderColor: i % 2 ? "#9ee5d4" : "#b8ccff", color: i % 2 ? "#0f766e" : "#155eef", fontSize: 23, bold: true }, name));
+    s.elements.push(text(desc, x - 8, 352, 128, 42, { fontSize: 14, color: "#64748b", align: "center" }));
+    if (i < stages.length - 1) s.elements.push(line(x + 118, 284, x + 140, 284, { borderColor: "#94a3b8", borderWidth: "2px" }));
+  });
+  s.elements.push(shape("roundRect", 150, 434, 700, 52, { fill: "#172033", borderWidth: "0px", color: "#ffffff", fontSize: 21, bold: true }, "agent 可以在任意节点暂停、检查、替换、继续，而不是只能整包重来"));
+  return s;
+}
+
+function entrySlide() {
+  const s = slide("complete_ppt_entries", "不同操作入口对应不同的返工粒度", "把“大生成”拆成可组合工具，才能让 Codex 在上下文中持续完善。");
+  addHeader(s, 4, "03 / 操作入口");
+  addTitle(s, s.title, s.subtitle);
+  const rows = [
+    ["Deck", "create / duplicate / snapshot / restore", "控制版本和整体结构"],
+    ["Slide", "add / delete / preset / DSL append", "控制页面顺序和叙事节奏"],
+    ["Element", "text / shape / image / chart / line", "控制单个对象的可编辑性"],
+    ["Component", "metric cards / roadmap / comparison", "控制可复用视觉模块"],
+    ["QA", "validate / score / suggest / visual regression", "控制交付前质量门禁"],
+  ];
+  rows.forEach(([name, ops, why], i) => {
+    const y = 190 + i * 58;
+    s.elements.push(shape("roundRect", 66, y, 126, 38, { fill: "#eaf2ff", borderColor: "#b8ccff", color: "#155eef", fontSize: 20, bold: true }, name));
+    s.elements.push(text(ops, 222, y + 4, 390, 30, { fontSize: 18, color: "#172033", bold: true }));
+    s.elements.push(text(why, 636, y + 5, 280, 30, { fontSize: 17, color: "#64748b" }));
+  });
+  return s;
+}
+
+function workflowSlide() {
+  const s = slide("complete_ppt_workflow", "推荐流程是先成稿，再用工具循环提质", "一次产出初稿，多轮进入局部优化，最终导出安全版本并留下报告。");
+  addHeader(s, 5, "04 / 生成流程");
+  addTitle(s, s.title, s.subtitle);
+  const steps = [
+    ["1", "生成语义大纲", "锁定叙事与页面角色"],
+    ["2", "编译为可编辑元素", "所有对象都有 id 和样式"],
+    ["3", "评分与建议", "发现稀疏、拥挤、重叠"],
+    ["4", "局部修复", "只改失败页面或组件"],
+    ["5", "导出与渲染", "PPTX + PNG + report"],
+  ];
+  steps.forEach(([num, titleValue, desc], i) => {
+    const x = 84 + i * 172;
+    s.elements.push(shape("circle", x + 32, 214, 74, 74, { fill: "#155eef", borderWidth: "0px", color: "#ffffff", fontSize: 28, bold: true }, num));
+    s.elements.push(text(titleValue, x, 318, 140, 34, { fontSize: 20, bold: true, align: "center" }));
+    s.elements.push(text(desc, x - 6, 358, 152, 48, { fontSize: 15, color: "#64748b", align: "center" }));
+    if (i < steps.length - 1) s.elements.push(line(x + 120, 251, x + 158, 251, { borderColor: "#94a3b8", borderWidth: "2px" }));
+  });
+  s.elements.push(shape("roundRect", 110, 454, 780, 48, { fill: "#fff7e8", borderColor: "#ffdf9c", color: "#8a5200", fontSize: 20, bold: true }, "关键：每一轮都留下 JSON 源、PPTX 版本、渲染图和质量报告"));
+  return s;
+}
+
+function qualitySlide() {
+  const s = slide("complete_ppt_quality", "生产级效果要靠质量维度驱动，而不是只靠视觉直觉", "检查项覆盖结构、版式、信息密度、动效和导出兼容性。");
+  addHeader(s, 6, "05 / 质量体系");
+  addTitle(s, s.title, s.subtitle);
+  s.elements.push(chart("bar", 70, 206, 430, 250, ["结构", "层级", "密度", "平衡", "动效"], [{ label: "目标评分", data: [92, 88, 84, 86, 78] }]));
+  const checks = [
+    ["结构完整", "标题、页面角色、备注、叙事顺序"],
+    ["版式安全", "边界、对齐、重叠、可读字号"],
+    ["视觉丰富", "图表、卡片、流程、指标合理组合"],
+    ["导出可控", "降级点、静态安全版、渲染回归"],
+  ];
+  checks.forEach(([k, v], i) => {
+    s.elements.push(shape("roundRect", 548, 202 + i * 62, 330, 44, { fill: i % 2 ? "#f4fbf9" : "#f4f7ff", borderColor: "#d8e1ee", color: "#172033", fontSize: 17, bold: true }, `${k}  -  ${v}`));
+  });
+  return s;
+}
+
+function layoutSlide() {
+  const s = slide("complete_ppt_layouts", "布局规范需要恢复成可选策略，而不是藏在代码里", "agent 需要知道什么时候用对比、指标、时间线、图表列表或封底。");
+  addHeader(s, 7, "06 / 布局规范");
+  addTitle(s, s.title, s.subtitle);
+  const cards = [
+    ["compare", "判断方案取舍"],
+    ["metric", "表达业务收益"],
+    ["timeline", "表达推进路径"],
+    ["chart-list", "用数据支撑结论"],
+    ["closing", "收束行动项"],
+    ["title-only", "制造章节停顿"],
+  ];
+  cards.forEach(([k, v], i) => {
+    const col = i % 3;
+    const row = Math.floor(i / 3);
+    const x = 82 + col * 288;
+    const y = 210 + row * 120;
+    s.elements.push(shape("roundRect", x, y, 238, 78, { fill: "#ffffff", borderColor: "#d8e1ee", color: "#155eef", fontSize: 22, bold: true }, k));
+    s.elements.push(text(v, x + 18, y + 86, 202, 28, { fontSize: 16, color: "#64748b", align: "center" }));
+  });
+  return s;
+}
+
+function motionSlide() {
+  const s = slide("complete_ppt_motion", "动效也要拆成策略和时间线，才能服务叙事", "PPTX 静态导出保留页面，JSON 源保留动画编排，二者各司其职。");
+  addHeader(s, 8, "07 / 动效拆分");
+  addTitle(s, s.title, s.subtitle);
+  const lanes = [
+    ["Executive", "标题先入场，主体分组递进，适合正式汇报"],
+    ["Data story", "先框架、再数据、最后强调结论"],
+    ["Roadmap", "沿阅读方向逐步展开里程碑"],
+    ["Minimal", "少量淡入，避免干扰高管阅读"],
+  ];
+  lanes.forEach(([name, desc], i) => {
+    const y = 202 + i * 66;
+    s.elements.push(shape("roundRect", 82, y, 190, 44, { fill: "#172033", borderWidth: "0px", color: "#ffffff", fontSize: 20, bold: true }, name));
+    s.elements.push(line(292, y + 22, 408, y + 22, { borderColor: "#12a594", borderWidth: "3px" }));
+    s.elements.push(text(desc, 430, y + 6, 450, 32, { fontSize: 18, color: "#334155" }));
+  });
+  s.elements.push(shape("roundRect", 126, 486, 740, 40, { fill: "#eefbf7", borderColor: "#9ee5d4", color: "#0f766e", fontSize: 18, bold: true }, "后续继续拆：动画触发、分组节奏、强调规则、PPTX 降级说明"));
+  return s;
+}
+
+function roadmapSlide() {
+  const s = slide("complete_ppt_roadmap", "落地路线按风险从低到高推进", "先把可控工具链跑通，再逐步提升模板、图像和原生动画能力。");
+  addHeader(s, 9, "08 / 落地路线");
+  addTitle(s, s.title, s.subtitle);
+  const quarters = [
+    ["Now", "完整 MCP 工具链", "生成、编辑、导出、渲染、报告"],
+    ["Next", "生产模板库", "行业模板、组件资产、版式规范"],
+    ["Later", "智能优化闭环", "自动拆页、自动重排、风格迁移"],
+    ["Future", "高保真多端输出", "PPTX 动画、网页演示、视频录制"],
+  ];
+  quarters.forEach(([q, titleValue, desc], i) => {
+    const x = 88 + i * 218;
+    s.elements.push(shape("roundRect", x, 226, 164, 142, { fill: i === 0 ? "#155eef" : "#ffffff", borderColor: i === 0 ? "#155eef" : "#d8e1ee", color: i === 0 ? "#ffffff" : "#172033", fontSize: 21, bold: true }, `${q}\n${titleValue}`));
+    s.elements.push(text(desc, x + 8, 386, 148, 52, { fontSize: 15, color: "#64748b", align: "center" }));
+    if (i < quarters.length - 1) s.elements.push(line(x + 170, 296, x + 208, 296, { borderColor: "#94a3b8", borderWidth: "2px" }));
+  });
+  return s;
+}
+
+function closeSlide() {
+  const s = slide("complete_ppt_close", "先用完整 PPT 验证效果，再继续拆工具入口", "下一轮建议重点优化模板库、组件丰富度和评分后的自动重排。");
+  s.background = "#071426";
+  s.elements.push(shape("rect", 0, 0, W, H, { fill: "#071426", borderWidth: "0px" }));
+  s.elements.push(text("结论", 74, 72, 160, 34, { fontSize: 24, bold: true, color: "#12a594" }));
+  s.elements.push(text("这个 MCP 的价值不是一次性生成 PPT，而是让 agent 拥有持续打磨 PPT 的手。", 74, 140, 760, 118, { fontSize: 45, bold: true, color: "#ffffff" }));
+  const items = [
+    "保留完整 JSON 源，后续可继续局部编辑",
+    "PPTX 安全版用于分发，渲染图用于视觉验收",
+    "质量报告指导下一轮拆分和优化",
+  ];
+  items.forEach((item, i) => {
+    s.elements.push(shape("roundRect", 78, 306 + i * 58, 640, 38, { fill: "#13243a", borderColor: "#284461", color: "#dce8f7", fontSize: 18, bold: true }, item));
+  });
+  s.elements.push(shape("roundRect", 764, 342, 128, 128, { fill: "#12a594", borderWidth: "0px", color: "#ffffff", fontSize: 28, bold: true }, "NEXT\nITERATION"));
+  return s;
+}
+
+async function main() {
+  const deck = defaultDeck({
+    deckId: "mcp_complete_ppt_preview",
+    title: "MCP 生产级 PPT 生成系统完整预览",
+    width: W,
+    height: H,
+    theme,
+  });
+
+  deck.slides.push(
+    coverSlide(),
+    problemSlide(),
+    architectureSlide(),
+    entrySlide(),
+    workflowSlide(),
+    qualitySlide(),
+    layoutSlide(),
+    motionSlide(),
+    roadmapSlide(),
+    closeSlide(),
+  );
+
+  deck.slides.forEach((s, index) => {
+    s.elements.forEach((element, elementIndex) => {
+      if (!element.groupId && element.type === "shape" && element.text) {
+        element.groupId = gid(`${index}_${elementIndex}`);
+      }
+    });
+  });
+
+  applyMotionToDeck(deck, { strategy: "auto", maxAnimations: 10, replaceExisting: true });
+  await saveDeck(deck);
+
+  const jsonPath = path.join(MCP_EXPORT_DIR, "mcp-complete-ppt-preview.json");
+  await writeFile(jsonPath, JSON.stringify(deck, null, 2), "utf8");
+
+  const safe = createPptxSafeDeck(deck, {
+    deckId: "mcp_complete_ppt_preview_safe",
+    title: "MCP 生产级 PPT 生成系统完整预览",
+  });
+  const safeJsonPath = path.join(MCP_EXPORT_DIR, "mcp-complete-ppt-preview-safe.json");
+  await writeFile(safeJsonPath, JSON.stringify(safe.deck, null, 2), "utf8");
+
+  const pptxPath = await exportDeckToPptx(safe.deck, {
+    fileName: "mcp-complete-ppt-preview-safe.pptx",
+    subject: "Complete PPT preview generated through JVS PPT UI MCP flow",
+  });
+  const visual = await runPptxVisualRegression({ pptxPath, dpi: 96 });
+  const report = await generateDeckReviewReport(safe.deck, {
+    fileName: "mcp-complete-ppt-preview-review",
+    format: "both",
+    visualResult: visual,
+    artifacts: {
+      json: jsonPath,
+      safeJson: safeJsonPath,
+      pptx: pptxPath,
+      renderDir: visual.render.outputDir,
+    },
+  });
+
+  console.log(JSON.stringify({
+    deckId: deck.id,
+    slideCount: deck.slides.length,
+    jsonPath,
+    safeJsonPath,
+    pptxPath,
+    renderDir: visual.render.outputDir,
+    imagePaths: visual.render.imagePaths,
+    visualValid: visual.valid,
+    report,
+  }, null, 2));
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

package/scripts/inspect_315_327.cjs

@@ -0,0 +1,19 @@
+const fs = require('fs');
+const JSZip = require('jszip');
+
+async function main() {
+  const p = 'C:/Users/57087/Desktop/组合的元素7.pptx';
+  const zip = await JSZip.loadAsync(fs.readFileSync(p));
+  const xml = await zip.file('ppt/slides/slide1.xml')?.async('text');
+  
+  // Find shape with id="315" and id="327"
+  for (const id of ['315', '327']) {
+    const regex = new RegExp('<p:(?:sp|cxnSp|grpSp)[\\s\\S]*?id="' + id + '"[\\s\\S]*?<\\/p:(?:sp|cxnSp|grpSp)>');
+    const m = xml.match(regex);
+    if (m) {
+      console.log(`=== Shape ${id} ===`);
+      console.log(m[0]);
+    }
+  }
+}
+main();