改造演示 · 一个旧静态页 + 一行 SDK = 真 AI

这页放在 kindling-iteration-2/demo-retrofit-china.html。左边模拟"改造前"——所有 AI 回复都是写死的占位文字。右边"改造后"——同样的 UI，但调用真实的国产 AI（DeepSeek 经我们 ECS 转一道）。

提示：右边要看到真效果，需要服务端已经按 ALIYUN-BAOTA-DEPLOY.md 部署好，且 /api/health 是 200 状态。本机预览时右边会报错，那是正常的——上线后才能跑。

模块 1 · 普通聊天

改造前

问"恐龙小专家"

改造后

问"恐龙小专家"

看代码差异

// === 改造前 ===
function answerBefore1() {
  document.getElementById('out1-before').textContent =
    '（这里假装恐龙小专家回了一句）';
}

// === 改造后 ===
async function answerAfter1() {
  const out = document.getElementById('out1-after');
  out.textContent = '想一想...';
  out.textContent = '';
  await kindlingAI.chat({
    system: '你是 11 岁恐龙迷小专家，回答任何问题都要引用真实恐龙，先夸一下问问题的人。',
    user: document.getElementById('q1-after').value,
    stream: true,
    onToken: (t) => { out.textContent += t; }
  });
}

模块 2 · 给作业打分（审美工作室）

改造前

作业打分

改造后

作业打分

看代码差异

// === 改造后 ===
async function scoreAfter() {
  const out = document.getElementById('out2-after');
  out.textContent = '判官思考中...';
  const r = await kindlingAI.judge({
    rubric: '5 条标准（每项 0–10 分）：1. 具体性 2. 真诚 3. 克制 4. 记忆点 5. 意图',
    candidate: document.getElementById('hw-after').value
  });
  out.innerHTML =
    `得分 ${r.score}/10

` +
    `理由：
` + r.reasons.map(x => '• ' + x).join('<br>') +
    `<br><br><strong>改进建议：</strong> ${r.suggestion}`;
}

模块 3 · 让 AI 画图（通义万相）

改造前

画一幅画

（占位）一张写死的小图...

改造后

画一幅画

看代码差异

// === 改造后 ===
async function drawAfter() {
  const out = document.getElementById('out3-after');
  out.innerHTML = '通义万相画画中... 大约 15 秒';
  const r = await kindlingAI.image({
    prompt: document.getElementById('img-q-after').value,
    size: '1024*1024'
  });
  out.innerHTML = `<img src="${r.imageUrl}" style="max-width:100%; border-radius:8px;">`;
}

就这么简单

整个页面除了底下这一行 SDK 引入：

<script src="kindling-ai-sdk.js"></script>

剩下的代码 100% 是普通 HTML + JavaScript。没有 React、没有打包工具、没有任何复杂构建。孩子打开浏览器就能看 source 学。

下一步看 RETROFIT-GUIDE.md，有 7 种常见场景的复制即用模板。