docs: split measured and estimated charts with Chinese SVG variants

chf553619-tech · chf553619-tech · commit 88f60ca227cd · 2026-04-22T02:46:42.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,3 +30,4 @@ All notable changes to this project will be documented in this file.
 - Verified GPU-mode embedding generation completed successfully on WSL CUDA (`291` embedded vectors from `125` documents)
 - Published a deployment audit summarizing health status, retrieval effectiveness, and estimated token savings (`docs/audit-2026-04-22.md`)
 - Added a Chinese deployment audit and homepage-friendly SVG/chart summary for QMD impact and estimated token savings
+- Split homepage visuals into separate measured-status and estimated-token-savings charts, with Chinese SVG variants for the Chinese README
diff --git a/README.md b/README.md
@@ -21,7 +21,13 @@
 
 ## Impact at a glance
 
-![QMD impact overview](./docs/assets/qmd-impact-overview.svg)
+### Measured runtime status
+
+![QMD runtime status](./docs/assets/qmd-runtime-status.svg)
+
+### Estimated token-savings analysis
+
+![QMD token savings estimate](./docs/assets/qmd-token-savings-estimate.svg)
 
 ### Audit snapshot
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -21,7 +21,13 @@
 
 ## 效果总览
 
-![QMD 效果总览](./docs/assets/qmd-impact-overview.svg)
+### 实测运行状态
+
+![QMD 运行状态](./docs/assets/qmd-runtime-status.zh-CN.svg)
+
+### Token 节省估算
+
+![QMD token 节省估算](./docs/assets/qmd-token-savings-estimate.zh-CN.svg)
 
 ### 当前审计快照
 
diff --git a/docs/assets/qmd-runtime-status.svg b/docs/assets/qmd-runtime-status.svg
@@ -0,0 +1,48 @@
+<svg width="1200" height="430" viewBox="0 0 1200 430" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">QMD runtime status</title>
+  <desc id="desc">Measured runtime health snapshot for the QMD OpenClaw deployment.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
+    <style>
+      .h1 { font: 700 34px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .h2 { font: 700 18px 'Segoe UI', Arial, sans-serif; fill: #e5e7eb; }
+      .body { font: 400 15px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+      .small { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .cardLabel { font: 400 13px 'Segoe UI', Arial, sans-serif; fill: #93c5fd; }
+      .num { font: 700 31px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .ok { font: 700 14px 'Segoe UI', Arial, sans-serif; fill: #86efac; }
+    </style>
+  </defs>
+  <rect width="1200" height="430" rx="24" fill="url(#bg)"/>
+  <text x="44" y="58" class="h1">QMD runtime status</text>
+  <text x="44" y="84" class="body">Measured deployment snapshot · OpenClaw + QMD · 2026-04-22</text>
+  <text x="44" y="106" class="small">Source: openclaw status --deep, qmd status, QMD health endpoint, completed embedding run.</text>
+
+  <rect x="44" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="66" y="182" class="cardLabel">Gateway</text>
+  <text x="66" y="220" class="num">Reachable</text>
+  <text x="66" y="244" class="body">OpenClaw gateway healthy</text>
+
+  <rect x="319" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="341" y="182" class="cardLabel">QMD MCP</text>
+  <text x="341" y="220" class="num">Running</text>
+  <text x="341" y="244" class="body">health endpoint: ok</text>
+
+  <rect x="594" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="616" y="182" class="cardLabel">GPU mode</text>
+  <text x="616" y="220" class="num">CUDA</text>
+  <text x="616" y="244" class="body">offloading: yes</text>
+
+  <rect x="869" y="148" width="287" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="891" y="182" class="cardLabel">Coverage</text>
+  <text x="891" y="220" class="num">125 / 291</text>
+  <text x="891" y="244" class="body">indexed docs / embedded vectors</text>
+
+  <text x="44" y="314" class="h2">Measured conclusions</text>
+  <text x="44" y="344" class="ok">● QMD is healthy and queryable</text>
+  <text x="44" y="368" class="ok">● CUDA acceleration is active on the WSL host</text>
+  <text x="44" y="392" class="ok">● Embeddings completed successfully for the current indexed set</text>
+</svg>
diff --git a/docs/assets/qmd-runtime-status.zh-CN.svg b/docs/assets/qmd-runtime-status.zh-CN.svg
@@ -0,0 +1,48 @@
+<svg width="1200" height="430" viewBox="0 0 1200 430" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">QMD 运行状态</title>
+  <desc id="desc">QMD 在 OpenClaw 部署中的实测运行状态快照。</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
+    <style>
+      .h1 { font: 700 34px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .h2 { font: 700 18px 'Segoe UI', Arial, sans-serif; fill: #e5e7eb; }
+      .body { font: 400 15px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+      .small { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .cardLabel { font: 400 13px 'Segoe UI', Arial, sans-serif; fill: #93c5fd; }
+      .num { font: 700 31px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .ok { font: 700 14px 'Segoe UI', Arial, sans-serif; fill: #86efac; }
+    </style>
+  </defs>
+  <rect width="1200" height="430" rx="24" fill="url(#bg)"/>
+  <text x="44" y="58" class="h1">QMD 运行状态</text>
+  <text x="44" y="84" class="body">实测部署快照 · OpenClaw + QMD · 2026-04-22</text>
+  <text x="44" y="106" class="small">来源：openclaw status --deep、qmd status、QMD health endpoint、embedding 完成结果。</text>
+
+  <rect x="44" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="66" y="182" class="cardLabel">Gateway</text>
+  <text x="66" y="220" class="num">Reachable</text>
+  <text x="66" y="244" class="body">OpenClaw gateway 正常</text>
+
+  <rect x="319" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="341" y="182" class="cardLabel">QMD MCP</text>
+  <text x="341" y="220" class="num">Running</text>
+  <text x="341" y="244" class="body">health endpoint: ok</text>
+
+  <rect x="594" y="148" width="255" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="616" y="182" class="cardLabel">GPU 模式</text>
+  <text x="616" y="220" class="num">CUDA</text>
+  <text x="616" y="244" class="body">offloading: yes</text>
+
+  <rect x="869" y="148" width="287" height="112" rx="18" fill="#111827" stroke="#1f2937"/>
+  <text x="891" y="182" class="cardLabel">覆盖规模</text>
+  <text x="891" y="220" class="num">125 / 291</text>
+  <text x="891" y="244" class="body">已索引文档 / 已生成向量</text>
+
+  <text x="44" y="314" class="h2">实测结论</text>
+  <text x="44" y="344" class="ok">● QMD 当前健康且可查询</text>
+  <text x="44" y="368" class="ok">● WSL 主机上的 CUDA 加速已启用</text>
+  <text x="44" y="392" class="ok">● 当前索引集合的 embedding 已成功生成</text>
+</svg>
diff --git a/docs/assets/qmd-token-savings-estimate.svg b/docs/assets/qmd-token-savings-estimate.svg
@@ -0,0 +1,67 @@
+<svg width="1200" height="560" viewBox="0 0 1200 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">QMD token savings estimate</title>
+  <desc id="desc">Estimated token savings from using retrieval-first with QMD instead of naive full-document rereads.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
+    <linearGradient id="blue" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="green" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#10b981"/>
+    </linearGradient>
+    <linearGradient id="amber" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+    <style>
+      .h1 { font: 700 34px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .body { font: 400 15px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+      .small { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .rowLabel { font: 600 15px 'Segoe UI', Arial, sans-serif; fill: #e5e7eb; }
+      .rowHint { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .value { font: 700 13px 'Segoe UI', Arial, sans-serif; fill: #dbeafe; }
+      .note { font: 400 13px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+    </style>
+  </defs>
+  <rect width="1200" height="560" rx="24" fill="url(#bg)"/>
+  <text x="44" y="58" class="h1">QMD token savings estimate</text>
+  <text x="44" y="84" class="body">Analysis estimate · representative local docs · compares naive reread vs retrieval-first</text>
+  <text x="44" y="106" class="small">Not provider billing truth. Derived from local document sizes using a rough chars/4 prompt-token estimate.</text>
+
+  <line x1="380" y1="190" x2="1088" y2="190" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="278" x2="1088" y2="278" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="366" x2="1088" y2="366" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="454" x2="1088" y2="454" stroke="#334155" stroke-width="1"/>
+
+  <text x="44" y="173" class="rowLabel">Full reread baseline</text>
+  <text x="44" y="193" class="rowHint">Representative docs reread directly without QMD narrowing</text>
+  <rect x="380" y="162" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="162" width="708" height="24" rx="12" fill="url(#blue)"/>
+  <text x="1104" y="179" class="value">3585</text>
+
+  <text x="44" y="261" class="rowLabel">Case A</text>
+  <text x="44" y="281" class="rowHint">query + README + qmd-setup + gpu-setup</text>
+  <rect x="380" y="250" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="250" width="472" height="24" rx="12" fill="url(#green)"/>
+  <text x="1104" y="267" class="value">2392 · -33.3%</text>
+
+  <text x="44" y="349" class="rowLabel">Case B</text>
+  <text x="44" y="369" class="rowHint">query + README + gpu-setup</text>
+  <rect x="380" y="338" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="338" width="409" height="24" rx="12" fill="url(#green)"/>
+  <text x="1104" y="355" class="value">2073 · -42.2%</text>
+
+  <text x="44" y="437" class="rowLabel">Case C</text>
+  <text x="44" y="457" class="rowHint">query + qmd-setup + deployment-notes + qmd-layer-memory</text>
+  <rect x="380" y="426" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="426" width="207" height="24" rx="12" fill="url(#amber)"/>
+  <text x="1104" y="443" class="value">1047 · -70.8%</text>
+
+  <text x="44" y="510" class="note">Interpretation: QMD reduces unnecessary rereads by narrowing the document set before large-context reads.</text>
+  <text x="44" y="532" class="small">Operational takeaway: treat this as a decision-support estimate, not a billing export.</text>
+</svg>
diff --git a/docs/assets/qmd-token-savings-estimate.zh-CN.svg b/docs/assets/qmd-token-savings-estimate.zh-CN.svg
@@ -0,0 +1,67 @@
+<svg width="1200" height="560" viewBox="0 0 1200 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">QMD token 节省估算</title>
+  <desc id="desc">使用 QMD 先检索再精读，相对直接整篇重读的 token 节省估算图。</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
+    <linearGradient id="blue" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="green" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#10b981"/>
+    </linearGradient>
+    <linearGradient id="amber" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+    <style>
+      .h1 { font: 700 34px 'Segoe UI', Arial, sans-serif; fill: #f8fafc; }
+      .body { font: 400 15px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+      .small { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .rowLabel { font: 600 15px 'Segoe UI', Arial, sans-serif; fill: #e5e7eb; }
+      .rowHint { font: 400 12px 'Segoe UI', Arial, sans-serif; fill: #94a3b8; }
+      .value { font: 700 13px 'Segoe UI', Arial, sans-serif; fill: #dbeafe; }
+      .note { font: 400 13px 'Segoe UI', Arial, sans-serif; fill: #cbd5e1; }
+    </style>
+  </defs>
+  <rect width="1200" height="560" rx="24" fill="url(#bg)"/>
+  <text x="44" y="58" class="h1">QMD token 节省估算</text>
+  <text x="44" y="84" class="body">分析估算 · 基于代表性本地文档 · 对比“直接重读”与“先检索再精读”</text>
+  <text x="44" y="106" class="small">不是 provider 账单真值。这里基于本地文档大小，按 chars/4 做粗略 prompt-token 估算。</text>
+
+  <line x1="380" y1="190" x2="1088" y2="190" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="278" x2="1088" y2="278" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="366" x2="1088" y2="366" stroke="#334155" stroke-width="1"/>
+  <line x1="380" y1="454" x2="1088" y2="454" stroke="#334155" stroke-width="1"/>
+
+  <text x="44" y="173" class="rowLabel">全量重读基线</text>
+  <text x="44" y="193" class="rowHint">不经过 QMD 缩小范围，直接重读代表性文档集合</text>
+  <rect x="380" y="162" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="162" width="708" height="24" rx="12" fill="url(#blue)"/>
+  <text x="1104" y="179" class="value">3585</text>
+
+  <text x="44" y="261" class="rowLabel">场景 A</text>
+  <text x="44" y="281" class="rowHint">query + README + qmd-setup + gpu-setup</text>
+  <rect x="380" y="250" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="250" width="472" height="24" rx="12" fill="url(#green)"/>
+  <text x="1104" y="267" class="value">2392 · -33.3%</text>
+
+  <text x="44" y="349" class="rowLabel">场景 B</text>
+  <text x="44" y="369" class="rowHint">query + README + gpu-setup</text>
+  <rect x="380" y="338" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="338" width="409" height="24" rx="12" fill="url(#green)"/>
+  <text x="1104" y="355" class="value">2073 · -42.2%</text>
+
+  <text x="44" y="437" class="rowLabel">场景 C</text>
+  <text x="44" y="457" class="rowHint">query + qmd-setup + deployment-notes + qmd-layer-memory</text>
+  <rect x="380" y="426" width="708" height="24" rx="12" fill="#334155"/>
+  <rect x="380" y="426" width="207" height="24" rx="12" fill="url(#amber)"/>
+  <text x="1104" y="443" class="value">1047 · -70.8%</text>
+
+  <text x="44" y="510" class="note">解释：QMD 不是让 LLM 成本消失，而是通过先缩小候选文档范围，减少不必要的大段重读。</text>
+  <text x="44" y="532" class="small">建议把这张图当成决策参考估算，而不是 provider 计费后台导出的账单数字。</text>
+</svg>
