` 替换原来的"复制 + 跳转" UI： ```html

``` SDK 自动渲染成完整的"输入框 + ▶ 按钮 + 流式输出框"。孩子什么都不用配。 --- ## 二、新 `

` 组件实现放在 `kindling-ai-sdk.js` 同一目录： ```js // ai-runner-component.js (function() { function init(host) { const system = host.dataset.system || '你是友好的助手。'; const stage = host.dataset.stage || 'middle'; const suggested = host.dataset.suggested || ''; host.innerHTML = `

🤖 AI 试跑器

⚙ 看 / 改 prompt

`; const run = host.querySelector('.ar-run'); const out = host.querySelector('.ar-out'); run.addEventListener('click', async () => { const u = host.querySelector('.ar-q').value.trim(); const s = host.querySelector('.ar-system').value.trim(); if (!u) return; run.disabled = true; run.textContent = '...'; out.textContent = ''; try { await window.kindlingAI.chat({ system: s, user: u, stage, stream: true, onToken: (t) => out.textContent += t, }); } catch (e) { out.innerHTML = '出错：'+e.message+''; } run.disabled = false; run.textContent = '▶ 运行'; }); } function activate() { document.querySelectorAll('.ai-runner:not([data-init])').forEach(h => { h.dataset.init = '1'; init(h); }); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', activate); else activate(); })(); ``` --- ## 三、retrofit 中阶项目 03 的"复制 + 跳转" ### 之前的代码（kindling-middle-level/projects/code-01-real-page.html）整段步骤 2 的代码是教孩子写一个"复制 + 跳 Qwen"的网页。**孩子做完后体验是：** 1. 在 VS Code 里写代码 2. 浏览器双击 .html 3. 点按钮 → 复制 + 跳走 4. 在 Qwen Chat 粘贴 ### 升级后的代码（最小改动）把那段代码示例改成"用 kindlingAI.chat 直接调"。代码量更短，体验更直接： ```html ``` 5 行代码。孩子做完，**自己电脑上的网页 = 真能问 AI 的网页**。 --- ## 四、3 步迁移现有 100+ 页面 ### 步骤 1：在共享 head 加脚本在 `shared.css` 同级建一个 `shared-head.html`，让所有页面通过 SSI 或简单的 build 脚本统一注入： ```html ``` ### 步骤 2：替换"复制 + 跳转" UI 写一个 Python 脚本扫描所有 HTML，找： ```html ... ... ``` 把这块替换成： ```html

``` ### 步骤 3：renotify 学院页学院落地页加一个"💎 现在可以直接在网页里跑 AI"的小贴纸，让孩子知道有这个新能力。 --- ## 五、上线 checklist - [ ] Worker 部署到 Cloudflare（见 `worker/README.md`） - [ ] 设好 GROQ_API_KEY、OPENROUTER_API_KEY、HF_TOKEN - [ ] 配自己的域名（如 `ai.kindling-edu.com`） - [ ] 把 `data-endpoint="..."` 改成正式域名 - [ ] 在主入口加一段"💎 这套课程现在可以在网页里直接跑 AI"的更新通告 - [ ] 在第一周关注 OpenRouter / Groq dashboard，看 token 消耗 + 错误率 - [ ] 写好 status page（可以用 Better Uptime 免费层） --- ## 六、之后的迭代方向接好基础 chat 之后，可以继续： 1. **每个项目自带"现成 prompt 模板库"** —— 孩子点一下就用，不用每次重写 2. **保存孩子的 prompt 历史** —— localStorage + 一键导出 3. **班级模式** —— 老师给孩子一个班级码，孩子的所有产出汇总在老师面板 4. **"我做的"作品页** —— 孩子可以发布自己做出来的东西到 showcase 5. **多模态混搭** —— 孩子用语音问 + AI 生图回答 + 孩子再用语音改指令但这些都依赖第一步：**worker 部署上线**。先把基础打好。