npm - botrun-horse - Versions diffs - 2.29.2 → 2.30.0 - Mend

botrun-horse 2.29.2 → 2.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (574) hide show

package/botrun-c/html-architecture/architecture/system-components.html ADDED Viewed

@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>系統元件圖 - 日本醫療表單系統</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- 導覽列 -->
+  <nav class="nav">
+    <div class="nav-container">
+      <a href="index.html" class="nav-logo">
+        🏥 日本醫療表單系統
+      </a>
+      <ul class="nav-links">
+        <li><a href="index.html" class="nav-link">總覽</a></li>
+        <li><a href="user-flow.html" class="nav-link">使用者流程</a></li>
+        <li><a href="system-components.html" class="nav-link active">系統元件</a></li>
+        <li><a href="deployment.html" class="nav-link">部署架構</a></li>
+      </ul>
+    </div>
+  </nav>
+  <!-- 主內容 -->
+  <div class="container">
+    <!-- 頁面標題 -->
+    <div class="section fade-in">
+      <h1>⚙️ 系統元件圖</h1>
+      <p class="text-center" style="font-size: 1.15rem; color: var(--text-secondary);">
+        這個頁面說明系統內部的各個元件如何協同工作，包含前端、後端、資料庫、儲存等
+      </p>
+    </div>
+    <!-- 系統架構 SVG -->
+    <div class="diagram-container fade-in">
+      <div class="diagram-title">🏗️ 系統元件架構圖</div>
+      <svg viewBox="0 0 1000 1200" xmlns="http://www.w3.org/2000/svg">
+        <!-- 定義箭頭 -->
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+            <polygon points="0 0, 10 3, 0 6" fill="#2196F3" />
+          </marker>
+          <marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+            <polygon points="0 0, 10 3, 0 6" fill="#4CAF50" />
+          </marker>
+        </defs>
+        <!-- 使用者層 -->
+        <g id="user-layer">
+          <rect x="350" y="20" width="300" height="80" rx="10" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
+          <text x="500" y="50" text-anchor="middle" fill="#1976D2" font-size="18" font-weight="bold">👤 使用者</text>
+          <text x="500" y="73" text-anchor="middle" fill="#1565C0" font-size="14">透過瀏覽器存取系統</text>
+          <text x="500" y="91" text-anchor="middle" fill="#1565C0" font-size="12">(Chrome / Safari / Edge)</text>
+        </g>
+        <!-- 箭頭：使用者 → 統一前端 -->
+        <line x1="500" y1="100" x2="500" y2="140" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="520" y="120" fill="#1976D2" font-size="12">HTTPS</text>
+        <!-- 統一前端層 -->
+        <g id="frontend-unified">
+          <rect x="300" y="140" width="400" height="120" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="3"/>
+          <text x="500" y="170" text-anchor="middle" fill="white" font-size="18" font-weight="bold">🌐 統一前端 (Unified Frontend)</text>
+          <text x="500" y="193" text-anchor="middle" fill="white" font-size="14">j.cameo.tw</text>
+          <!-- 子元件 -->
+          <rect x="320" y="205" width="160" height="45" rx="6" fill="rgba(255,255,255,0.3)" stroke="white" stroke-width="1"/>
+          <text x="400" y="223" text-anchor="middle" fill="white" font-size="12" font-weight="bold">登入頁面</text>
+          <text x="400" y="238" text-anchor="middle" fill="white" font-size="10">AuthContext.tsx</text>
+          <text x="400" y="250" text-anchor="middle" fill="white" font-size="10">LoginPage.tsx</text>
+          <rect x="520" y="205" width="160" height="45" rx="6" fill="rgba(255,255,255,0.3)" stroke="white" stroke-width="1"/>
+          <text x="600" y="223" text-anchor="middle" fill="white" font-size="12" font-weight="bold">權限檢查</text>
+          <text x="600" y="238" text-anchor="middle" fill="white" font-size="10">firestore-auth.ts</text>
+          <text x="600" y="250" text-anchor="middle" fill="white" font-size="10">Custom Claims</text>
+        </g>
+        <!-- 箭頭：統一前端 → Firebase Auth -->
+        <line x1="300" y1="200" x2="150" y2="200" stroke="#4CAF50" stroke-width="2" marker-end="url(#arrowhead-green)"/>
+        <text x="200" y="190" fill="#388E3C" font-size="11">認證</text>
+        <!-- Firebase Authentication -->
+        <g id="firebase-auth">
+          <rect x="20" y="160" width="130" height="80" rx="8" fill="#4CAF50" stroke="#388E3C" stroke-width="2"/>
+          <text x="85" y="185" text-anchor="middle" fill="white" font-size="14" font-weight="bold">🔐 Firebase</text>
+          <text x="85" y="202" text-anchor="middle" fill="white" font-size="13">Authentication</text>
+          <text x="85" y="218" text-anchor="middle" fill="white" font-size="10">Google Sign-In</text>
+          <text x="85" y="231" text-anchor="middle" fill="white" font-size="10">Custom Claims</text>
+        </g>
+        <!-- 箭頭：統一前端 → Firestore -->
+        <line x1="700" y1="200" x2="850" y2="200" stroke="#FF9800" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="750" y="190" fill="#F57C00" font-size="11">白名單檢查</text>
+        <!-- Firestore -->
+        <g id="firestore">
+          <rect x="850" y="160" width="130" height="80" rx="8" fill="#FF9800" stroke="#F57C00" stroke-width="2"/>
+          <text x="915" y="185" text-anchor="middle" fill="white" font-size="14" font-weight="bold">📊 Firestore</text>
+          <text x="915" y="202" text-anchor="middle" fill="white" font-size="13">Database</text>
+          <text x="915" y="218" text-anchor="middle" fill="white" font-size="10">system/</text>
+          <text x="915" y="231" text-anchor="middle" fill="white" font-size="10">allowedUsers</text>
+        </g>
+        <!-- 箭頭：統一前端 → Load Balancer -->
+        <line x1="500" y1="260" x2="500" y2="320" stroke="#2196F3" stroke-width="3" marker-end="url(#arrowhead)"/>
+        <text x="540" y="290" fill="#1976D2" font-size="12" font-weight="bold">重定向</text>
+        <!-- Load Balancer -->
+        <g id="load-balancer">
+          <rect x="300" y="320" width="400" height="100" rx="10" fill="#9C27B0" stroke="#7B1FA2" stroke-width="3"/>
+          <text x="500" y="350" text-anchor="middle" fill="white" font-size="18" font-weight="bold">⚖️ Load Balancer</text>
+          <text x="500" y="373" text-anchor="middle" fill="white" font-size="14">根據 URL 路徑路由請求</text>
+          <rect x="320" y="385" width="360" height="25" rx="4" fill="rgba(255,255,255,0.3)" stroke="white" stroke-width="1"/>
+          <text x="500" y="402" text-anchor="middle" fill="white" font-size="11">
+            /u/53288a47/* → botrun-j-53288a47 (bohachu)
+          </text>
+        </g>
+        <!-- 箭頭：Load Balancer → 個人後端 -->
+        <line x1="400" y1="420" x2="250" y2="480" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <line x1="600" y1="420" x2="750" y2="480" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="300" y="450" fill="#1976D2" font-size="11">路由</text>
+        <text x="670" y="450" fill="#1976D2" font-size="11">路由</text>
+        <!-- 個人後端 (使用者 A) -->
+        <g id="backend-a">
+          <rect x="50" y="480" width="250" height="200" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="175" y="510" text-anchor="middle" fill="white" font-size="16" font-weight="bold">🖥️ 個人後端 A</text>
+          <text x="175" y="530" text-anchor="middle" fill="white" font-size="12">botrun-j-53288a47</text>
+          <text x="175" y="546" text-anchor="middle" fill="white" font-size="10">(bohachu@gmail.com)</text>
+          <!-- API 端點 -->
+          <rect x="70" y="560" width="210" height="110" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="175" y="580" text-anchor="middle" fill="white" font-size="12" font-weight="bold">API 端點</text>
+          <text x="175" y="598" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-1</text>
+          <text x="175" y="613" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-2-1</text>
+          <text x="175" y="628" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-2-2</text>
+          <text x="175" y="643" text-anchor="middle" fill="white" font-size="10">GET /api/download/:token</text>
+          <text x="175" y="658" text-anchor="middle" fill="white" font-size="10">POST /mcp (MCP Server)</text>
+        </g>
+        <!-- 個人後端 (使用者 B) -->
+        <g id="backend-b">
+          <rect x="700" y="480" width="250" height="200" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="825" y="510" text-anchor="middle" fill="white" font-size="16" font-weight="bold">🖥️ 個人後端 B</text>
+          <text x="825" y="530" text-anchor="middle" fill="white" font-size="12">botrun-j-aee12461</text>
+          <text x="825" y="546" text-anchor="middle" fill="white" font-size="10">(cbh@cameo.tw)</text>
+          <!-- API 端點 -->
+          <rect x="720" y="560" width="210" height="110" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="825" y="580" text-anchor="middle" fill="white" font-size="12" font-weight="bold">API 端點</text>
+          <text x="825" y="598" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-1</text>
+          <text x="825" y="613" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-2-1</text>
+          <text x="825" y="628" text-anchor="middle" fill="white" font-size="10">POST /api/fill-form-2-2</text>
+          <text x="825" y="643" text-anchor="middle" fill="white" font-size="10">GET /api/download/:token</text>
+          <text x="825" y="658" text-anchor="middle" fill="white" font-size="10">POST /mcp (MCP Server)</text>
+        </g>
+        <!-- 更多後端提示 -->
+        <text x="500" y="650" text-anchor="middle" fill="#607D8B" font-size="14" font-weight="bold">... 更多個人後端 ...</text>
+        <text x="500" y="667" text-anchor="middle" fill="#90A4AE" font-size="11">(每位使用者都有獨立的後端服務)</text>
+        <!-- 箭頭：個人後端 → 表單生成核心 -->
+        <line x1="175" y1="680" x2="175" y2="740" stroke="#4CAF50" stroke-width="2" marker-end="url(#arrowhead-green)"/>
+        <line x1="825" y1="680" x2="825" y2="740" stroke="#4CAF50" stroke-width="2" marker-end="url(#arrowhead-green)"/>
+        <!-- 表單生成核心 -->
+        <g id="form-core">
+          <rect x="300" y="740" width="400" height="120" rx="10" fill="#4CAF50" stroke="#388E3C" stroke-width="3"/>
+          <text x="500" y="770" text-anchor="middle" fill="white" font-size="18" font-weight="bold">📝 表單生成核心</text>
+          <text x="500" y="793" text-anchor="middle" fill="white" font-size="14">JSDOM 操作 HTML 模板</text>
+          <rect x="320" y="805" width="360" height="45" rx="6" fill="rgba(255,255,255,0.3)" stroke="white" stroke-width="1"/>
+          <text x="500" y="823" text-anchor="middle" fill="white" font-size="11">form-1.ts | form-2-1.ts | form-2-2.ts</text>
+          <text x="500" y="838" text-anchor="middle" fill="white" font-size="10">fillForm1() | fillForm2_1() | fillForm2_2()</text>
+          <text x="500" y="851" text-anchor="middle" fill="white" font-size="10">⏱️ 3-5 秒生成完整表單</text>
+        </g>
+        <!-- 箭頭：表單核心 → HTML 模板 -->
+        <line x1="300" y1="800" x2="150" y2="800" stroke="#FF9800" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="200" y="790" fill="#F57C00" font-size="11">讀取</text>
+        <!-- HTML 模板 -->
+        <g id="templates">
+          <rect x="20" y="750" width="130" height="100" rx="8" fill="#FF9800" stroke="#F57C00" stroke-width="2"/>
+          <text x="85" y="775" text-anchor="middle" fill="white" font-size="14" font-weight="bold">📄 HTML</text>
+          <text x="85" y="792" text-anchor="middle" fill="white" font-size="13">模板檔案</text>
+          <text x="85" y="810" text-anchor="middle" fill="white" font-size="10">form-1-origin.html</text>
+          <text x="85" y="825" text-anchor="middle" fill="white" font-size="10">form-2-1-origin.html</text>
+          <text x="85" y="840" text-anchor="middle" fill="white" font-size="10">form-2-2-origin.html</text>
+        </g>
+        <!-- 箭頭：表單核心 → GCS -->
+        <line x1="700" y1="800" x2="850" y2="800" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="750" y="790" fill="#1976D2" font-size="11">上傳</text>
+        <!-- GCS 儲存 -->
+        <g id="gcs">
+          <rect x="850" y="750" width="130" height="100" rx="8" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="915" y="775" text-anchor="middle" fill="white" font-size="14" font-weight="bold">💾 GCS</text>
+          <text x="915" y="792" text-anchor="middle" fill="white" font-size="13">雲端儲存</text>
+          <text x="915" y="810" text-anchor="middle" fill="white" font-size="10">scoop-temp-</text>
+          <text x="915" y="825" text-anchor="middle" fill="white" font-size="10">forms-jp/</text>
+          <text x="915" y="840" text-anchor="middle" fill="white" font-size="10">⏱️ 3 小時過期</text>
+        </g>
+        <!-- 箭頭：GCS → 使用者下載 -->
+        <line x1="915" y1="750" x2="915" y2="700" stroke="#4CAF50" stroke-width="2" marker-end="url(#arrowhead-green)"/>
+        <line x1="915" y1="700" x2="700" y2="100" stroke="#4CAF50" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrowhead-green)"/>
+        <text x="830" y="400" fill="#388E3C" font-size="12" font-weight="bold">下載連結</text>
+        <!-- 說明：MCP Server -->
+        <g id="mcp-note">
+          <rect x="350" y="920" width="300" height="80" rx="8" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
+          <text x="500" y="945" text-anchor="middle" fill="#1976D2" font-size="14" font-weight="bold">🤖 MCP Server 整合</text>
+          <text x="500" y="965" text-anchor="middle" fill="#1565C0" font-size="11">每個後端都有獨立的 MCP Server</text>
+          <text x="500" y="980" text-anchor="middle" fill="#1565C0" font-size="11">支援 Claude 等 AI 助手直接呼叫</text>
+          <text x="500" y="995" text-anchor="middle" fill="#1565C0" font-size="11">端點: POST /mcp (JSON-RPC 2.0)</text>
+        </g>
+        <!-- 背景裝飾 -->
+        <rect x="10" y="10" width="980" height="1000" rx="15" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-dasharray="10,5"/>
+        <!-- 圖例 -->
+        <g id="legend">
+          <text x="50" y="1050" fill="#607D8B" font-size="14" font-weight="bold">圖例：</text>
+          <rect x="50" y="1060" width="20" height="20" fill="#2196F3" stroke="#1976D2" stroke-width="1"/>
+          <text x="80" y="1075" fill="#607D8B" font-size="12">前端/後端服務</text>
+          <rect x="200" y="1060" width="20" height="20" fill="#4CAF50" stroke="#388E3C" stroke-width="1"/>
+          <text x="230" y="1075" fill="#607D8B" font-size="12">認證/處理</text>
+          <rect x="340" y="1060" width="20" height="20" fill="#FF9800" stroke="#F57C00" stroke-width="1"/>
+          <text x="370" y="1075" fill="#607D8B" font-size="12">資料庫/儲存</text>
+          <rect x="480" y="1060" width="20" height="20" fill="#9C27B0" stroke="#7B1FA2" stroke-width="1"/>
+          <text x="510" y="1075" fill="#607D8B" font-size="12">路由/負載平衡</text>
+        </g>
+      </svg>
+    </div>
+    <!-- 元件詳細說明 -->
+    <div class="section fade-in">
+      <h2>🔍 元件詳細說明</h2>
+      <div class="grid">
+        <!-- 統一前端 -->
+        <div class="card">
+          <div class="badge badge-primary">前端層</div>
+          <h3 class="card-title">🌐 統一前端</h3>
+          <p class="card-text">
+            <strong>網址：</strong><code>j.cameo.tw</code><br>
+            <strong>技術：</strong>Next.js + React + TypeScript<br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>提供登入介面</li>
+            <li>處理 Firebase Authentication</li>
+            <li>檢查使用者權限（白名單 + Custom Claims）</li>
+            <li>重定向到個人專屬後端</li>
+          </ul>
+        </div>
+        <!-- Load Balancer -->
+        <div class="card">
+          <div class="badge badge-accent">路由層</div>
+          <h3 class="card-title">⚖️ Load Balancer</h3>
+          <p class="card-text">
+            <strong>技術：</strong>Google Cloud Load Balancer<br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>根據 URL 路徑 (<code>/u/{hash}/*</code>) 路由請求</li>
+            <li>將請求分配到對應的個人後端</li>
+            <li>處理 SSL/TLS 加密</li>
+            <li>提供統一域名存取</li>
+          </ul>
+        </div>
+        <!-- 個人後端 -->
+        <div class="card">
+          <div class="badge badge-primary">後端層</div>
+          <h3 class="card-title">🖥️ 個人後端</h3>
+          <p class="card-text">
+            <strong>技術：</strong>Hono + TypeScript + Cloud Run<br>
+            <strong>命名：</strong><code>botrun-j-{hash}</code><br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>提供表單生成 API</li>
+            <li>執行 MCP Server</li>
+            <li>管理下載 Token</li>
+            <li>每位使用者獨立運行</li>
+          </ul>
+        </div>
+        <!-- Firebase Authentication -->
+        <div class="card">
+          <div class="badge badge-secondary">認證層</div>
+          <h3 class="card-title">🔐 Firebase Authentication</h3>
+          <p class="card-text">
+            <strong>專案：</strong>scoop-386004<br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>處理 Google Sign-In</li>
+            <li>管理使用者 Token</li>
+            <li>設定 Custom Claims (<code>allowedService</code>)</li>
+            <li>提供身份驗證狀態</li>
+          </ul>
+        </div>
+        <!-- Firestore -->
+        <div class="card">
+          <div class="badge badge-accent">資料庫</div>
+          <h3 class="card-title">📊 Firestore Database</h3>
+          <p class="card-text">
+            <strong>集合：</strong><code>system/allowedUsers</code><br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>儲存白名單使用者列表</li>
+            <li>記錄使用者的 serviceUrl</li>
+            <li>提供權限檢查資料</li>
+            <li>支援離線查詢</li>
+          </ul>
+        </div>
+        <!-- GCS -->
+        <div class="card">
+          <div class="badge badge-primary">儲存層</div>
+          <h3 class="card-title">💾 Google Cloud Storage</h3>
+          <p class="card-text">
+            <strong>Bucket：</strong><code>scoop-temp-forms-jp</code><br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>暫存生成的 HTML 表單</li>
+            <li>提供安全下載連結</li>
+            <li>設定 3 小時過期時間</li>
+            <li>自動清理過期檔案</li>
+          </ul>
+        </div>
+        <!-- 表單生成核心 -->
+        <div class="card">
+          <div class="badge badge-secondary">核心邏輯</div>
+          <h3 class="card-title">📝 表單生成核心</h3>
+          <p class="card-text">
+            <strong>技術：</strong>JSDOM (伺服器端 DOM 操作)<br>
+            <strong>檔案：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li><code>form-1.ts</code> - 自立支援醫療 (308 行)</li>
+            <li><code>form-2-1.ts</code> - 精神障礙者手帳 (531 行)</li>
+            <li><code>form-2-2.ts</code> - 重度持續病患 (518 行)</li>
+            <li>⏱️ 每份表單 3-5 秒完成</li>
+          </ul>
+        </div>
+        <!-- MCP Server -->
+        <div class="card">
+          <div class="badge badge-accent">AI 整合</div>
+          <h3 class="card-title">🤖 MCP Server</h3>
+          <p class="card-text">
+            <strong>協定：</strong>Model Context Protocol (JSON-RPC 2.0)<br>
+            <strong>端點：</strong><code>POST /mcp</code><br>
+            <strong>職責：</strong>
+          </p>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">
+            <li>註冊 3 個 Tools (fill_form_1/2-1/2-2)</li>
+            <li>接收 AI 助手的呼叫請求</li>
+            <li>執行表單生成並回傳結果</li>
+            <li>支援 Claude、ChatGPT 等整合</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!-- 資料流程 -->
+    <div class="section fade-in">
+      <h2>🔄 資料流程說明</h2>
+      <div class="steps">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-content">
+            <div class="step-title">使用者提交表單資料</div>
+            <div class="step-description">
+              使用者在個人後端的前端介面填寫表單，點擊「生成表單」後，
+              前端會將資料（JSON 格式）POST 到 <code>/api/fill-form-1</code> 等端點。
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-content">
+            <div class="step-title">後端接收並驗證資料</div>
+            <div class="step-description">
+              後端 (Hono) 接收請求後，會驗證：
+              <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
+                <li>使用者身份（Firebase Token 驗證）</li>
+                <li>必填欄位是否完整</li>
+                <li>資料格式是否正確</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-content">
+            <div class="step-title">讀取 HTML 模板</div>
+            <div class="step-description">
+              從 <code>data/templates/form-*/origin.html</code> 讀取對應的 HTML 模板檔案。
+              這些模板是日本官方提供的原始格式，確保符合官方規範。
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <div class="step-title">JSDOM 填入資料</div>
+            <div class="step-description">
+              呼叫表單生成核心函數 (<code>fillForm1()</code> 等)，使用 JSDOM 操作 HTML：
+              <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
+                <li>填寫 <code>&lt;input&gt;</code> 欄位的 value</li>
+                <li>勾選對應的 <code>&lt;checkbox&gt;</code></li>
+                <li>填寫 <code>&lt;textarea&gt;</code> 內容</li>
+                <li>同步 value 到 HTML attribute（確保儲存時保留）</li>
+              </ul>
+              ⏱️ 這個過程只需 3-5 秒，不需要 AI 生成。
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">5</div>
+          <div class="step-content">
+            <div class="step-title">上傳到 GCS</div>
+            <div class="step-description">
+              將填寫完成的 HTML 上傳到 Google Cloud Storage：
+              <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
+                <li>Bucket: <code>scoop-temp-forms-jp</code></li>
+                <li>檔名: <code>{user_id}/{timestamp}/{form_type}.html</code></li>
+                <li>設定 3 小時後自動刪除（lifecycle policy）</li>
+                <li>產生一次性下載 Token</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">6</div>
+          <div class="step-content">
+            <div class="step-title">回傳下載連結</div>
+            <div class="step-description">
+              後端回傳 JSON 格式的結果：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.9rem;">
+{
+  "success": true,
+  "download_url": "https://j.cameo.tw/u/53288a47/api/download/abc123",
+  "expires_in": "3h"
+}</pre>
+              前端接收後，顯示下載按鈕讓使用者下載表單。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 技術特色 -->
+    <div class="highlight-box fade-in">
+      <h2>✨ 技術特色與優勢</h2>
+      <div class="grid-2">
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">⚡ 快速生成（JSDOM）</h3>
+          <p style="color: rgba(255, 255, 255, 0.95);">
+            使用 JSDOM 直接操作 HTML 模板，不需要 LLM 生成（容易出錯且慢），
+            每份表單只需 3-5 秒即可完成，準確率 100%。
+          </p>
+        </div>
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">🔒 資料隔離（獨立後端）</h3>
+          <p style="color: rgba(255, 255, 255, 0.95);">
+            每位使用者都有獨立的 Cloud Run 服務和資料庫，
+            確保資料完全隔離，符合 GDPR 和 HIPAA 等隱私法規。
+          </p>
+        </div>
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">📈 自動擴展（Cloud Run）</h3>
+          <p style="color: rgba(255, 255, 255, 0.95);">
+            使用 Google Cloud Run 部署，系統會根據使用量自動擴展，
+            高峰時自動增加實例，閒置時縮減至零，降低成本。
+          </p>
+        </div>
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">🤖 AI 整合（MCP）</h3>
+          <p style="color: rgba(255, 255, 255, 0.95);">
+            支援 Model Context Protocol，可以讓 Claude、ChatGPT 等 AI 助手
+            直接呼叫系統生成表單，實現對話式填表體驗。
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 頁尾導覽 -->
+    <div class="section text-center fade-in">
+      <p style="font-size: 1.1rem; margin-bottom: var(--space-md);">
+        📚 想了解更多細節嗎？
+      </p>
+      <div style="display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap;">
+        <a href="deployment.html" class="btn btn-primary">查看部署架構圖 →</a>
+        <a href="user-flow.html" class="btn btn-secondary">查看使用者流程圖 →</a>
+        <a href="index.html" class="btn btn-outline">返回總覽</a>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 頁面淡入效果
+    document.addEventListener('DOMContentLoaded', () => {
+      const fadeElements = document.querySelectorAll('.fade-in');
+      fadeElements.forEach((el, index) => {
+        el.style.opacity = '0';
+        setTimeout(() => {
+          el.style.transition = 'opacity 0.6s ease-out';
+          el.style.opacity = '1';
+        }, index * 100);
+      });
+    });
+  </script>
+</body>
+</html>