Make demo outputs dynamic

Author: xptzz

web/app.js

@@ -1,21 +1,3 @@
-const presets = {
-  strengths: [
-    "你已经抓住了一个因果链，而不是只背概念。",
-    "你在尝试从结果倒推原因，这说明学习目标已经进入理解层。",
-    "你的表达里有可演示的判断，可以被继续打磨成作品。"
-  ],
-  gaps: [
-    "现在还需要区分关键变量之间的关系，避免把多个机制压成一句话。",
-    "有些判断略绝对，需要补上边界条件。",
-    "还缺一个外行也能听懂的例子来固定记忆。"
-  ],
-  questions: [
-    "如果从结果反推，最先断掉的变量是哪一个？",
-    "这个机制什么时候成立，什么时候不成立？",
-    "你能不能把它讲成一个 30 秒故事，而不是概念列表？"
-  ]
-};
-
 const topicEl = document.querySelector("#topic");
 const stageEl = document.querySelector("#stage");
 const roughEl = document.querySelector("#rough");
@@ -24,15 +6,105 @@ const strengthsEl = document.querySelector("#strengths");
 const gapsEl = document.querySelector("#gaps");
 const questionsEl = document.querySelector("#questions");
 const finalPitchEl = document.querySelector("#finalPitch");
-const canvas = document.querySelector("#mindMap");
-const ctx = canvas.getContext("2d");
+const canvasEl = document.querySelector("#mindMap");
+const ctx = canvasEl.getContext("2d");
+
+const domainProfiles = [
+  {
+    test: /凯恩斯|经济|市场|利率|就业|消费|投资|货币|财政|宏观/,
+    frame: "因果循环",
+    variables: ["预期", "投资", "消费", "就业", "收入"],
+    strengths: [
+      "你已经在用系统关系看问题，而不是把它当成单个概念。",
+      "你抓住了“预期会改变行为，行为又反过来验证预期”的循环。",
+      "这个主题适合做成一条可正推、逆推的因果链。"
+    ],
+    gaps: [
+      "需要区分货币政策和财政政策，不然“干预”会显得太粗。",
+      "“市场不会恢复”要补边界：不是永远不能，而是恢复太慢、代价太高。",
+      "需要解释预期到底卡在哪个变量上。"
+    ]
+  },
+  {
+    test: /AI|大语言|模型|LLM|幻觉|智能体|agent|提示词|prompt|RAG/,
+    frame: "输入-推理-校验链",
+    variables: ["上下文", "概率生成", "证据", "约束", "校验"],
+    strengths: [
+      "你已经把现象和机制分开了，这是理解 AI 问题的正确入口。",
+      "你开始意识到模型不是资料库，而是一个生成系统。",
+      "这个主题适合用“输入、生成、校验”的链条讲清楚。"
+    ],
+    gaps: [
+      "需要区分“模型不知道”和“模型没有被约束住”。",
+      "需要补上证据来源、上下文窗口和校验机制的关系。",
+      "要避免把所有错误都叫幻觉，最好拆成事实错误、推理错误和引用错误。"
+    ]
+  },
+  {
+    test: /黑客松|hackathon|路演|demo|产品|评委|获奖|拿奖/,
+    frame: "评委决策链",
+    variables: ["痛点", "人群", "差异化", "现场演示", "可信度"],
+    strengths: [
+      "你已经抓住黑客松的关键不是功能堆满，而是让评委快速相信。",
+      "你知道 demo 必须现场可见、可操作、可复述。",
+      "这个主题适合按“评委如何做决定”来倒推产品表达。"
+    ],
+    gaps: [
+      "需要把目标用户说得更窄，否则痛点会泛。",
+      "需要一句足够锋利的定位，让评委 10 秒内记住。",
+      "需要证明这个 demo 不是玩具，而是能扩展成真实产品。"
+    ]
+  },
+  {
+    test: /英语|单词|语言|雅思|阅读|背诵|记忆|学习/,
+    frame: "记忆-使用循环",
+    variables: ["场景", "表达欲", "复习", "输出", "迁移"],
+    strengths: [
+      "你已经把记忆和使用场景连起来了，不是在机械背诵。",
+      "你知道复习不是重复看，而是反复调用。",
+      "这个主题适合做成“看到、想用、讲出、复习”的循环。"
+    ],
+    gaps: [
+      "需要把复习节奏讲清楚，否则方法会显得只靠天赋。",
+      "需要区分识别、回忆和使用三个层级。",
+      "要补一个可执行的日常流程。"
+    ]
+  }
+];
 
-function tokenise(text) {
+const fallbackProfile = {
+  frame: "问题-结构-表达链",
+  variables: ["目标", "变量", "关系", "边界", "表达"],
+  strengths: [
+    "你已经有一个可以被打磨的初始判断。",
+    "你的表达里出现了可继续追问的关键词。",
+    "这个主题可以先被整理成一条主干逻辑链。"
+  ],
+  gaps: [
+    "现在还需要把关键词之间的关系说清楚。",
+    "需要补充这个判断成立的边界条件。",
+    "还缺一个能讲给外行听的例子。"
+  ]
+};
+
+function profileFor(text) {
+  return domainProfiles.find((profile) => profile.test.test(text)) || fallbackProfile;
+}
+
+function tokenize(text) {
   return text
-    .replace(/[，。！？；：、,.!?;:]/g, " ")
+    .replace(/[，。！？；：、,.!?;:()[\]【】""''“”]/g, " ")
     .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 8);
+    .map((word) => word.trim())
+    .filter((word) => word.length > 1)
+    .filter((word, index, arr) => arr.indexOf(word) === index)
+    .slice(0, 10);
+}
+
+function sentenceSeed(text) {
+  const clean = text.replace(/\s+/g, " ").trim();
+  if (!clean) return "你现在还没有给出第一版理解";
+  return clean.split(/[。！？.!?]/).find(Boolean)?.slice(0, 42) || clean.slice(0, 42);
 }
 
 function setList(target, items) {
@@ -44,36 +116,73 @@ function setList(target, items) {
   }
 }
 
-function buildPitch(topic, stage, rough) {
-  const cleanTopic = topic.trim() || "这个主题";
-  const words = tokenise(rough);
-  const anchor = words.length ? `围绕“${words.slice(0, 3).join(" / ")}”` : "围绕你的第一版表达";
-  return `为了在「${stage}」里讲清楚「${cleanTopic}」，你要先${anchor}搭出主干因果链：先说核心判断，再解释变量如何互相牵连，最后补上边界条件和一个例子。下一轮不要追求完整，先用 3 句话重讲一版。`;
+function buildDynamicStrengths(profile, topic, roughWords) {
+  const anchor = roughWords[0] || profile.variables[0];
+  return [
+    profile.strengths[0],
+    `你已经把「${anchor}」放进了主题里，这可以作为第一轮递归追问的入口。`,
+    `接下来适合用「${profile.frame}」来组织「${topic || "这个主题"}」。`
+  ];
+}
+
+function buildDynamicGaps(profile, roughWords) {
+  const first = roughWords[0] || profile.variables[0];
+  const second = roughWords[1] || profile.variables[1];
+  return [
+    profile.gaps[0],
+    `「${first}」和「${second}」之间的作用关系还需要讲成因果句。`,
+    profile.gaps[2] || "需要补一个能让听众立刻理解的具体例子。"
+  ];
 }
 
-function drawMindMap(topic, rough) {
+function buildQuestions(profile, topic, roughWords) {
+  const variables = [...roughWords.slice(0, 3), ...profile.variables].filter(Boolean);
+  const a = variables[0];
+  const b = variables[1];
+  const c = variables[2];
+  return [
+    `如果从结果倒推，「${topic || "这个主题"}」最先卡住的是「${a}」还是「${b}」？为什么？`,
+    `「${a}」变化以后，会怎样影响「${b}」，再怎样影响「${c}」？`,
+    `这个判断在什么情况下不成立？请给它补一个边界条件。`,
+    `把它讲给外行听时，你会用哪个生活场景来替代抽象概念？`
+  ];
+}
+
+function buildPitch(profile, topic, stage, rough) {
+  const seed = sentenceSeed(rough);
+  const variables = profile.variables.slice(0, 4).join(" -> ");
+  return `为了在「${stage}」里讲清楚「${topic || "这个主题"}」，先把你的第一版判断压缩成一句话：「${seed}」。然后用「${profile.frame}」重构它：${variables}。下一轮你只做一件事：用三句话重讲，第一句下判断，第二句讲变量如何牵连，第三句补边界和例子。`;
+}
+
+function drawMindMap(topic, profile, roughWords) {
   const dpr = window.devicePixelRatio || 1;
-  const rect = canvas.getBoundingClientRect();
-  canvas.width = Math.max(720, Math.floor(rect.width * dpr));
-  canvas.height = Math.floor((canvas.width / 2) * 0.98);
+  const rect = canvasEl.getBoundingClientRect();
+  const width = Math.max(640, Math.floor(rect.width || 720));
+  const height = Math.max(300, Math.floor(width * 0.47));
+  canvasEl.width = width * dpr;
+  canvasEl.height = height * dpr;
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-  const width = canvas.width / dpr;
-  const height = canvas.height / dpr;
   ctx.clearRect(0, 0, width, height);
 
   const gradient = ctx.createLinearGradient(0, 0, width, height);
   gradient.addColorStop(0, "#f8fbf7");
-  gradient.addColorStop(1, "#e8f0e7");
+  gradient.addColorStop(1, "#e9f0ee");
   ctx.fillStyle = gradient;
   ctx.fillRect(0, 0, width, height);
 
+  const labels = [
+    "输出目标",
+    roughWords[0] || profile.variables[0],
+    roughWords[1] || profile.variables[1],
+    roughWords[2] || profile.variables[2],
+    "重讲一版"
+  ];
   const nodes = [
-    { label: "输出目标", x: width * 0.18, y: height * 0.34, color: "#245b45" },
-    { label: "粗糙表达", x: width * 0.43, y: height * 0.22, color: "#d75f42" },
-    { label: "逻辑断点", x: width * 0.68, y: height * 0.34, color: "#4d6f9d" },
-    { label: "递归追问", x: width * 0.56, y: height * 0.68, color: "#f1bd55" },
-    { label: "重讲一版", x: width * 0.3, y: height * 0.68, color: "#245b45" }
+    { label: labels[0], x: width * 0.17, y: height * 0.35, color: "#245b45" },
+    { label: labels[1], x: width * 0.43, y: height * 0.22, color: "#d75f42" },
+    { label: labels[2], x: width * 0.7, y: height * 0.35, color: "#4d6f9d" },
+    { label: labels[3], x: width * 0.58, y: height * 0.69, color: "#f1bd55" },
+    { label: labels[4], x: width * 0.3, y: height * 0.69, color: "#245b45" }
   ];
 
   ctx.lineWidth = 3;
@@ -93,45 +202,59 @@ function drawMindMap(topic, rough) {
     ctx.arc(node.x, node.y, 42, 0, Math.PI * 2);
     ctx.fill();
     ctx.fillStyle = "#ffffff";
-    ctx.font = "700 14px system-ui, sans-serif";
+    ctx.font = "700 13px system-ui, sans-serif";
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.fillText(node.label, node.x, node.y);
+    wrapCanvasText(node.label, node.x, node.y - 7, 58, 16);
   }
 
   ctx.fillStyle = "#181915";
   ctx.font = "800 22px system-ui, sans-serif";
   ctx.textAlign = "left";
-  ctx.fillText("Recursive loop", 28, 42);
+  ctx.fillText(profile.frame, 28, 42);
 
   ctx.fillStyle = "#686b60";
   ctx.font = "14px system-ui, sans-serif";
-  const topicText = (topic.trim() || "你的学习主题").slice(0, 32);
-  ctx.fillText(topicText, 28, 68);
+  ctx.fillText((topic || "输入主题开始递归").slice(0, 34), 28, 68);
 
-  const keywords = tokenise(rough).slice(0, 4);
   ctx.fillStyle = "rgba(36, 91, 69, 0.12)";
-  ctx.fillRect(28, height - 58, Math.min(width - 56, 420), 32);
+  ctx.fillRect(28, height - 58, Math.min(width - 56, 520), 32);
   ctx.fillStyle = "#245b45";
   ctx.font = "700 13px system-ui, sans-serif";
-  ctx.fillText(keywords.length ? keywords.join("  ·  ") : "先讲粗糙版，再递归修正", 42, height - 38);
+  ctx.fillText(profile.variables.slice(0, 5).join("  ·  "), 42, height - 38);
+}
+
+function wrapCanvasText(text, x, y, maxWidth, lineHeight) {
+  const chars = [...String(text)];
+  let line = "";
+  const lines = [];
+  for (const char of chars) {
+    const test = line + char;
+    if (ctx.measureText(test).width > maxWidth && line) {
+      lines.push(line);
+      line = char;
+    } else {
+      line = test;
+    }
+  }
+  lines.push(line);
+  const startY = y - ((lines.length - 1) * lineHeight) / 2;
+  lines.forEach((item, index) => ctx.fillText(item, x, startY + index * lineHeight));
 }
 
 function runDemo() {
-  const topic = topicEl.value;
+  const topic = topicEl.value.trim();
   const stage = stageEl.value;
-  const rough = roughEl.value;
-
-  statusText.textContent = "Tracing your logic chain";
-  setList(strengthsEl, presets.strengths);
-  setList(gapsEl, presets.gaps);
-  setList(questionsEl, presets.questions);
-  finalPitchEl.textContent = buildPitch(topic, stage, rough);
-  drawMindMap(topic, rough);
-
-  window.setTimeout(() => {
-    statusText.textContent = "Recursive path generated";
-  }, 420);
+  const rough = roughEl.value.trim();
+  const roughWords = tokenize(rough);
+  const profile = profileFor(`${topic} ${rough}`);
+
+  statusText.textContent = `已生成：${profile.frame}`;
+  setList(strengthsEl, buildDynamicStrengths(profile, topic, roughWords));
+  setList(gapsEl, buildDynamicGaps(profile, roughWords));
+  setList(questionsEl, buildQuestions(profile, topic, roughWords));
+  finalPitchEl.textContent = buildPitch(profile, topic, stage, rough);
+  drawMindMap(topic, profile, roughWords);
 }
 
 function resetDemo() {
@@ -143,6 +266,10 @@ function resetDemo() {
 
 document.querySelector("#runBtn").addEventListener("click", runDemo);
 document.querySelector("#resetBtn").addEventListener("click", resetDemo);
-window.addEventListener("resize", () => drawMindMap(topicEl.value, roughEl.value));
+for (const element of [topicEl, stageEl, roughEl]) {
+  element.addEventListener("input", runDemo);
+  element.addEventListener("change", runDemo);
+}
+window.addEventListener("resize", runDemo);
 
 runDemo();