XIAOSAN

开源 · 本地 · 属于你的AI智能体

XIAOSAN OPEN SOURCE · 小彡开源 · ALWAYS HERE · ALWAYS WARM · YOUR AI YOUR DATA YOUR CONTROL · 小彡AI · OPEN SOURCE · FREE FOREVER · XIAOSAN OPEN SOURCE · 小彡开源 · ALWAYS HERE · ALWAYS WARM · YOUR AI YOUR DATA YOUR CONTROL · 小彡AI · OPEN SOURCE · FREE FOREVER ·

开源理念

代码在你手里，数据在你本地，你的秘密只有你知道。

为什么开源？

每个人都应该有自己的AI智能体伙伴。不是那种千篇一律的聊天机器人，而是真正属于你的、可以定制的、有温度的AI朋友。

"我希望每个人都能拥有自己的AI智能体，它了解你、陪伴你、在你需要的时候出现。这就是我开源小彡的原因。"

我的独白

在这个AI飞速发展的时代，大多数人只能使用别人提供的AI服务。你的对话记录、你的使用习惯、你的个人数据，都不属于你。

我想改变这一点。当我第一次写下小彡的第一行代码时，我只是想做一个属于自己的聊天工具。一个不会把我的对话拿去训练模型的工具，一个真正把注意力放在"陪伴"这件事上的工具。

后来我发现，很多人想要一个属于自己的AI智能体，但不知道从哪里开始。他们只是想要一个能聊天、能陪伴、能记住自己的AI朋友。

"开源小彡，意味着代码在你手里，数据在你本地，你的秘密只有你知道。它不属于任何公司，只属于你。"

开源意味着什么

完全掌控

代码在你手里，数据在你本地。

自由定制

修改人设、主题、功能。

持续进化

社区共建，让它更完善。

隐私安全

本地运行，完全隔离。

快速开始

跟着步骤一步一步来，5分钟就能拥有你自己的AI智能体。每一步我都写得很详细，完全零基础也能看懂。

获取 API Key —— 打开AI大门的钥匙（5分钟）

什么是 API Key？

想象一下：AI 就像一个超级聪明的朋友，但它住在"云上"（互联网的服务器里）。你需要一把"钥匙"才能跟它对话，这把钥匙就是 API Key。没有它，AI 就不认识你。

API Key 就像一串密码，格式大概是 sk-abc123xyz... 这样的。每个账号的 Key 都不同，而且只能看一次，所以一定要立刻复制保存好。

→ 推荐用 DeepSeek（便宜好用，新用户有免费额度）

打开注册网站：
在浏览器（Chrome、Edge、Safari 都行）的地址栏（就是最上面显示网址的那个输入框），输入 platform.deepseek.com，然后按回车键。

[Tip] 什么是地址栏？ 就是浏览器最顶部、显示网址的那一行。不是搜索框，是地址栏！直接输入网址就行。
注册账号：
打开网站后，点右上角的「注册」按钮。

用手机号注册（国内手机号就行），输入手机号 → 获取验证码 → 输入验证码 → 设置一个密码（要记住！）。

注册完成后会自动登录。
找到 API Keys 页面：
登录后，看左侧菜单栏，找到「API Keys」这一项，点击它。

[Tip] 如果看不到左侧菜单，可能需要点左上角的「☰」（三条横线）展开菜单。
创建你的 Key：
在 API Keys 页面，点「Create new secret key」（创建新的密钥）。

弹出一个框，让你填 Name（名称），随便填就行，比如写 "我的小彡"，然后点确认。
[Key] 复制你的 Key！（最关键的一步！）
创建成功后，页面会显示一串以 sk- 开头的字符串，比如 sk-abc123def456...

[!] 这个 Key 只会显示一次！关闭后就再也看不到了！

点旁边的「[Copy]」复制按钮，或者手动选中全部 → 右键复制。
保存好你的 Key：
打开电脑自带的记事本（Windows：点开始菜单，输入"记事本"搜索 / Mac：Cmd+空格，输入"TextEdit"）。

把 Key 粘贴进去（Ctrl+V 或 Cmd+V），然后保存文件（Ctrl+S），文件名随便取，比如 "我的Key"。

[Tip] 这样你就有了一个安全保存 Key 的地方，后面要用。

[!] API Key 就像银行卡密码，绝对不要分享给别人！ 如果泄露了，别人可以用你的额度。

[Tip] 不用 DeepSeek 也行，这些也都能用：

OpenAI（ChatGPT） — 去 platform.openai.com 注册，需要国外手机号或虚拟号
通义千问（阿里） — 去 dashscope.console.aliyun.com 注册，国内手机号直接注册
智谱AI — 去 open.bigmodel.cn 注册，新用户有免费额度
零一万物 — 去 platform.lingyiwanwu.com 注册

不同服务商的 API 地址和模型名称不一样，后面有对照表可以查。

选择适合你的版本 —— 挑一件合适的"外衣"

小彡有4个版本，功能从简单到复杂。就像买手机有基础版、标准版、Pro版一样，选一个适合你的就好。

★ V1 基础聊天版 — 最简单，1个文件，复制粘贴就能用。适合第一次尝试的人，1分钟搞定。就像一个"毛坯房"，能住但没装修。
★★ V2 主题定制版（推荐！） — 在 V1 基础上加了设置面板，可以换颜色、改头像、定义性格。就像"精装修房"，开箱即用还好看。推荐新手
★★★ V3 模块扩展版 — 代码分成多个文件，像"积木"一样模块化。适合想学编程的人，每个文件干一件事，方便理解和修改。
★★★★ V4 完整功能版 — 全部功能：人格测试、语音合成、联网搜索、弹簧动画。适合想要完整体验的人。

[Tip] 不知道选哪个？ 先选 V2 试试，满意了再升级到 V4。V1 是最简版，功能少但够用。

获取代码 —— 拿到你的"蓝图"

代码就是告诉电脑"怎么做"的指令。你不需要会写代码，只需要把代码复制过来就行。

[*] 如果你选了 V1 或 V2（单文件版）：

在下方的版本卡片里，点「查看教程」按钮
教程会展开，里面有一个深色背景的代码块
点代码块右上角的「复制代码」按钮 —— 代码就复制到剪贴板了
打开记事本（Windows：开始菜单搜"记事本" / Mac：Cmd+空格搜"TextEdit"）
粘贴（Ctrl+V 或 Cmd+V）—— 全部代码就进来了

[*] 如果你选了 V3 或 V4（多文件版）：

点「下载 ZIP」按钮，浏览器会下载一个 .zip 文件
什么是 ZIP？ 就像一个"压缩包裹"，里面装着好几个文件。需要"解压"（拆包裹）才能用。
Windows 解压方法：
找到下载的 .zip 文件（通常在"下载"文件夹里）

右键点击这个文件 → 选择「全部解压缩...」或「解压到当前文件夹」

弹出对话框点「解压」

解压后会多出一个文件夹，点进去就能看到里面的内容了
Mac 解压方法：
双击 .zip 文件，系统会自动解压，旁边会出现一个同名文件夹
手机解压方法：
安卓：用文件管理器找到 .zip → 点击 → 选择"解压"

iPhone：用"文件"App找到 .zip → 长按 → "解压缩"

也可以用 WPS Office 打开 .zip 文件

[Tip] 手机端编辑代码的方法

安卓：用「QuickEdit」或「Acode」App（应用商店搜索下载）
iPhone：用「Runestone」App
通用方法：把文件后缀 .html 改成 .txt → 用备忘录编辑 → 改回 .html
WPS：可直接打开 HTML 文件编辑（无代码高亮，但能用）

填入 API Key —— 把"钥匙"插进"锁"里

这一步就是把你第1步拿到的 API Key，填到代码里的正确位置。

[*] V1 / V2 用户（单文件版）：

用记事本打开你刚才粘贴的代码（如果已经关了，重新复制粘贴一次）
按 Ctrl+H（Mac: Cmd+H）打开"查找和替换"功能
查找框输入：YOUR_API_KEY_HERE
替换框输入：你的 Key（比如 sk-abc123xyz...）
点「全部替换」
检查一下：确保 Key 前后没有多余空格，而且保留了外面的引号

[v] 正确的写法：API_KEY: 'sk-abc123'

[x] 错误的写法：API_KEY: ' sk-abc123 '（Key 前后有空格）

[x] 错误的写法：API_KEY: sk-abc123（没有引号包裹）

[*] V3 / V4 用户（多文件版）：

进入解压后的文件夹 → 找到 js 文件夹 → 双击进入
找到 chat.js 文件
右键 → 用记事本打开（或拖进记事本窗口）
找到这一行：API_KEY: 'YOUR_API_KEY_HERE'
把 YOUR_API_KEY_HERE 替换成你的 Key
按 Ctrl+S 保存

[!] 常见错误：

Key 前后多了空格 → 导致认证失败
忘记外面的引号 → 代码报错
Key 复制不完整（少了几个字符）→ 认证失败
把 Key 填错了位置（填到 API_URL 那一行去了）

运行！—— 看到你的AI伙伴

代码准备好了，现在来运行它！有几种方法，选一种就行。

[*] 方法A：最简单 —— 双击打开

找到你保存的 index.html 文件
双击它，浏览器会自动打开
你应该能看到一个聊天界面，上面写着"小彡AI"
试试在输入框打字"你好"，然后按回车或点发送

[v] 看到聊天界面了？恭喜你成功了！ 跳到后面的FAQ看看常见问题。

[*] 方法B：推荐 —— 本地服务器（解决大部分问题）

如果方法A报错（比如 CORS 错误），用这个方法：

安装 Node.js：
打开 nodejs.org

点绿色的「下载」按钮（下载 LTS 版本）

下载完成后双击安装包，一路点"下一步"就行，不用改任何设置

安装完成后重启一下电脑（确保环境变量生效）
打开终端/命令行：
Windows：按 Win+R → 输入 cmd → 按回车

Mac：Cmd+空格 → 输入 Terminal → 按回车
进入你的文件夹：
输入 cd Desktop\xiaosan-v3（假设你解压到桌面的 xiaosan-v3 文件夹）

[Tip] 如果文件夹在"下载"里，改成 cd Downloads\xiaosan-v3

[Tip] 不确定路径？在文件资源管理器里打开文件夹，看地址栏的路径，复制过来
启动服务器：
输入 npx serve .（注意有个点！）

等几秒，看到类似 Accepting connections at http://localhost:3000 的提示
打开浏览器：
在浏览器地址栏输入 localhost:3000 → 按回车

!! 你的小彡AI就出来了！

[*] 方法C：不用装 Node.js —— Python 一行命令

打开终端/命令行（同方法B的步骤2）
进入文件夹：cd Desktop\xiaosan-v3
输入 python -m http.server 3000
浏览器打开 localhost:3000

[*] 手机访问电脑上的小彡：

确保手机和电脑连着同一个 WiFi
电脑启动服务器（方法B或C）
电脑按 Win+R → 输入 cmd → 输入 ipconfig → 找到「IPv4 地址」（类似 192.168.1.xxx）
手机浏览器输入 192.168.1.xxx:3000（替换成你电脑的实际IP）

[!] 双击打开报 CORS 错误？

看到控制台有红色的 "CORS" 或 "Access-Control-Allow-Origin" 错误？这是因为浏览器安全限制，直接打开文件不允许调用API。必须用方法B或C启动本地服务器才行。

选择适合你的版本

点击「查看教程」展开详细步骤和完整代码。

★ V1 基础聊天版

1个文件，复制粘贴就能用。

单文件流式输出深色主题

V1 适合谁？

适合第一次尝试的人。你不需要安装任何东西，只需要一个记事本和一个浏览器。

使用步骤（每步都写得很细）

复制代码：点上方代码块右上角的「复制代码」按钮，代码就复制到剪贴板了。
打开记事本：Windows 用户点左下角「开始」菜单，输入"记事本"，点击打开。Mac 用户 Cmd+空格，输入"TextEdit"打开。
粘贴代码：在记事本里按 Ctrl+V（Mac: Cmd+V），全部代码就出现了。
替换 API Key：
按 Ctrl+H 打开"查找和替换"

"查找"输入：YOUR_API_KEY_HERE

"替换"输入：你的 Key（比如 sk-abc123...）

点"全部替换"
保存文件：
点「文件」→「另存为」

"保存类型"选「所有文件 (*.*)」

文件名输入 index.html

编码选「UTF-8」

保存到桌面
运行：在桌面找到 index.html，双击打开。看到聊天界面就成功了！

V1 完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>小彡AI</title>
  <style>
    :root { --primary: #667eea; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: #0f0f23; color: #e4e4e7;
      height: 100vh; display: flex; flex-direction: column;
    }
    .topbar {
      padding: 16px 20px; background: #1a1a2e;
      border-bottom: 1px solid #2a2a4a;
      display: flex; align-items: center; gap: 12px;
    }
    .avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--primary); display: flex;
      align-items: center; justify-content: center;
      font-size: 18px; font-weight: 700; color: white;
    }
    .name { font-size: 16px; font-weight: 600; }
    .messages {
      flex: 1; overflow-y: auto; padding: 20px;
      display: flex; flex-direction: column; gap: 16px;
    }
    .msg {
      max-width: 80%; padding: 12px 16px; border-radius: 16px;
      font-size: 14px; line-height: 1.7;
      animation: fadeIn .3s ease;
    }
    .msg.user {
      align-self: flex-end; background: var(--primary);
      color: white; border-bottom-right-radius: 4px;
    }
    .msg.ai {
      align-self: flex-start; background: #1a1a2e;
      border: 1px solid #2a2a4a; border-bottom-left-radius: 4px;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; }
    }
    .input-area {
      padding: 16px 20px; background: #1a1a2e;
      border-top: 1px solid #2a2a4a; display: flex; gap: 12px;
    }
    .input-area input {
      flex: 1; padding: 12px 16px; border-radius: 12px;
      border: 1px solid #2a2a4a; background: #0f0f23;
      color: white; font-size: 14px; outline: none;
    }
    .input-area input:focus { border-color: var(--primary); }
    .input-area button {
      padding: 12px 24px; border-radius: 12px; border: none;
      background: var(--primary); color: white;
      font-size: 14px; font-weight: 600; cursor: pointer;
    }
  </style>
</head>
<body>
<div class="topbar">
  <div class="avatar">彡</div>
  <div class="name">小彡AI</div>
</div>
<div class="messages" id="messages">
  <div class="msg ai">你好，我是小彡！ </div>
</div>
<div class="input-area">
  <input id="input" placeholder="输入消息..."
    onkeydown="if(event.key==='Enter')send()">
  <button id="btn" onclick="send()">发送</button>
</div>
<script>
// ★ 必填：替换为你的 API Key
const API_KEY = 'YOUR_API_KEY_HERE';

// 以下参数一般不用改
const API_URL = 'https://api.deepseek.com/v1/chat/completions';
const MODEL   = 'deepseek-v4-flash';
const SYSTEM  = '你是一个温暖的AI伙伴，说话温柔，像朋友一样。';

// 对话历史
let history = [{ role: 'system', content: SYSTEM }];

// 添加消息到界面
function addMsg(text, role) {
  const div = document.createElement('div');
  div.className = 'msg ' + role;
  div.innerHTML = text;
  document.getElementById('messages').appendChild(div);
  div.scrollIntoView({ behavior: 'smooth' });
}

// 发送消息（流式输出）
async function send() {
  const input = document.getElementById('input');
  const btn = document.getElementById('btn');
  const text = input.value.trim();
  if (!text) return;

  input.value = '';
  addMsg(text, 'user');
  history.push({ role: 'user', content: text });
  btn.disabled = true;
  btn.textContent = '思考中...';

  try {
    const res = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + API_KEY
      },
      body: JSON.stringify({
        model: MODEL,
        messages: history,
        stream: true
      })
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let reply = '';

    // 创建空的AI消息气泡
    const bubble = document.createElement('div');
    bubble.className = 'msg ai';
    document.getElementById('messages').appendChild(bubble);

    // 逐块读取流式响应
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      for (const line of decoder.decode(value).split('\n')) {
        if (!line.startsWith('data: ')) continue;
        const json = line.slice(6);
        if (json === '[DONE]') break;
        try {
          const delta = JSON.parse(json).choices[0].delta.content;
          if (delta) {
            reply += delta;
            bubble.innerHTML = reply;
          }
        } catch (e) {}
      }
    }

    history.push({ role: 'assistant', content: reply });
  } catch (e) {
    addMsg('出错了: ' + e.message, 'ai');
  }

  btn.disabled = false;
  btn.textContent = '发送';
}
</script>
</body>
</html>

★★ V2 主题定制版

换颜色、改头像、定义性格。内置设置面板。

10种主题头像上传设置面板

V2 适合谁？

推荐新手选这个！比 V1 多了一个「设置面板」，你可以：

换主题 — 10种颜色主题随意切换（深色、浅色、蓝色、粉色等）
[Img] 换头像 — 点头像可以上传自己的图片
personality改性格 — 修改 AI 的名字、欢迎语、性格描述

使用步骤

复制代码：点代码块右上角「复制代码」
打开记事本：Windows 开始菜单搜"记事本" / Mac Cmd+空格搜"TextEdit"
粘贴代码：Ctrl+V（Mac: Cmd+V）
替换 API Key：Ctrl+H → 查找 YOUR_API_KEY_HERE → 替换为你的 Key → 全部替换
保存文件：文件 → 另存为 → 类型选"所有文件" → 文件名 index.html → 编码 UTF-8 → 保存到桌面
双击打开，看到聊天界面
探索设置：点右上角的 ⚙ 齿轮图标 → 切换主题、改名字、改性格、上传头像

[Tip] V2 和 V1 的代码结构一样，只是多了设置面板。如果你只想要基础聊天，用 V1 就够了。

V2 完整代码（含10种主题+设置面板）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>小彡AI</title>
  <style>
    :root {
      --primary: #667eea; --bg: #0f0f23;
      --surface: #1a1a2e; --border: #2a2a4a; --text: #e4e4e7;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: var(--bg); color: var(--text);
      height: 100vh; display: flex; flex-direction: column;
    }
    .topbar {
      padding: 16px 20px; background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
    }
    .avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--primary); display: flex;
      align-items: center; justify-content: center;
      font-size: 18px; font-weight: 700; color: white;
      cursor: pointer; overflow: hidden;
    }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .name { font-size: 16px; font-weight: 600; flex: 1; }
    .gear {
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: var(--border); color: var(--text);
      font-size: 18px; cursor: pointer;
    }
    .messages {
      flex: 1; overflow-y: auto; padding: 20px;
      display: flex; flex-direction: column; gap: 16px;
    }
    .msg {
      max-width: 80%; padding: 12px 16px; border-radius: 16px;
      font-size: 14px; line-height: 1.7;
    }
    .msg.user {
      align-self: flex-end; background: var(--primary);
      color: white; border-bottom-right-radius: 4px;
    }
    .msg.ai {
      align-self: flex-start; background: var(--surface);
      border: 1px solid var(--border); border-bottom-left-radius: 4px;
    }
    .input-area {
      padding: 16px 20px; background: var(--surface);
      border-top: 1px solid var(--border); display: flex; gap: 12px;
    }
    .input-area input {
      flex: 1; padding: 12px 16px; border-radius: 12px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 14px; outline: none;
    }
    .input-area button {
      padding: 12px 24px; border-radius: 12px; border: none;
      background: var(--primary); color: white;
      font-size: 14px; font-weight: 600; cursor: pointer;
    }
    /* 设置面板 */
    .ov {
      position: fixed; inset: 0; background: rgba(0,0,0,.5);
      z-index: 200; display: none; align-items: center; justify-content: center;
    }
    .ov.on { display: flex; }
    .pn {
      width: 90%; max-width: 400px; max-height: 80vh;
      background: var(--surface); border-radius: 16px;
      padding: 24px; overflow-y: auto; border: 1px solid var(--border);
    }
    .pn h3 { margin-bottom: 20px; }
    .fd { margin-bottom: 16px; }
    .fd label { display: block; font-size: 13px; margin-bottom: 6px; color: #a0a0b8; }
    .fd input, .fd textarea {
      width: 100%; padding: 10px 12px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 14px;
    }
    .fd textarea { height: 80px; resize: vertical; }
    .tg { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
    .tb2 {
      height: 36px; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
    }
    .tb2.ac { border-color: white; }
    .sv {
      width: 100%; padding: 12px; border-radius: 8px; border: none;
      background: var(--primary); color: white; font-size: 14px;
      font-weight: 600; cursor: pointer; margin-top: 16px;
    }
  </style>
</head>
<body>
<div class="topbar">
  <div class="avatar" id="av" onclick="document.getElementById('ai').click()">彡</div>
  <input type="file" id="ai" accept="image/*" style="display:none" onchange="setAv(this)">
  <div class="name" id="nm">小彡</div>
  <button class="gear" onclick="openS()">⚙</button>
</div>
<div class="messages" id="msgs">
  <div class="msg ai" id="w">你好，我是小彡！</div>
</div>
<div class="input-area">
  <input id="i" placeholder="输入..." onkeydown="if(event.key==='Enter')send()">
  <button onclick="send()">发送</button>
</div>
<div class="ov" id="ov" onclick="if(event.target===this)closeS()">
  <div class="pn">
    <h3>设置</h3>
    <div class="fd"><label>名字</label><input id="cn" value="小彡"></div>
    <div class="fd"><label>欢迎语</label><input id="cw" value="你好，我是小彡！"></div>
    <div class="fd"><label>性格</label><textarea id="cp">你是一个温暖的AI伙伴。</textarea></div>
    <div class="fd"><label>主题</label><div class="tg" id="tg"></div></div>
    <button class="sv" onclick="saveS()">保存</button>
  </div>
</div>

<script>
// ═══ CONFIG ═══
const C = {
  API_KEY: 'YOUR_API_KEY_HERE',
  AI_NAME: '小彡',
  WELCOME_MSG: '你好，我是小彡！',
  SYSTEM_PROMPT: '你是一个温暖的AI伙伴，说话温柔，像朋友一样。',
  MODEL: 'deepseek-v4-flash',
  API_URL: 'https://api.deepseek.com/v1/chat/completions',
  THEME: 'dark',
};

// ═══ 10种主题 ═══
const TH = {
  dark:     { bg: '#0f0f23', sf: '#1a1a2e', bd: '#2a2a4a', p: '#667eea', tx: '#e4e4e7' },
  light:    { bg: '#f5f5f5', sf: '#ffffff', bd: '#e0e0e0', p: '#333333', tx: '#111111' },
  blue:     { bg: '#0a1628', sf: '#0f2240', bd: '#1a3a5c', p: '#2196f3', tx: '#e3f2fd' },
  green:    { bg: '#0a1a14', sf: '#0f2a1e', bd: '#1a4a30', p: '#4caf50', tx: '#e8f5e9' },
  pink:     { bg: '#1a0f1a', sf: '#2a1a2a', bd: '#4a2a4a', p: '#e91e63', tx: '#fce4ec' },
  purple:   { bg: '#12082a', sf: '#1a1040', bd: '#2a1a60', p: '#9c27b0', tx: '#f3e5f5' },
  orange:   { bg: '#1a1008', sf: '#2a1a0f', bd: '#4a2a1a', p: '#ff9800', tx: '#fff3e0' },
  cyan:     { bg: '#0a1a1a', sf: '#0f2a2a', bd: '#1a4a4a', p: '#00bcd4', tx: '#e0f7fa' },
  rose:     { bg: '#1a0f14', sf: '#2a1a20', bd: '#4a2a35', p: '#f44336', tx: '#ffebee' },
  midnight: { bg: '#0a0e1a', sf: '#101828', bd: '#1a2840', p: '#5c6bc0', tx: '#e8eaf6' },
};

let ct = C.THEME, H = [{ role: 'system', content: C.SYSTEM_PROMPT }];

function apT(n) {
  const t = TH[n] || TH.dark, r = document.querySelector(':root');
  r.style.setProperty('--bg', t.bg);
  r.style.setProperty('--sf', t.sf);
  r.style.setProperty('--bd', t.bd);
  r.style.setProperty('--p', t.p);
  r.style.setProperty('--tx', t.tx);
  ct = n;
}

function bTG() {
  const g = document.getElementById('tg');
  g.innerHTML = '';
  Object.entries(TH).forEach(([n, t]) => {
    const b = document.createElement('div');
    b.className = 'tb2' + (n === ct ? ' ac' : '');
    b.style.background = t.p;
    b.title = n;
    b.onclick = () => {
      g.querySelectorAll('.tb2').forEach(x => x.classList.remove('ac'));
      b.classList.add('ac');
      apT(n);
    };
    g.appendChild(b);
  });
}

function setAv(i) {
  const f = i.files[0];
  if (!f) return;
  const r = new FileReader();
  r.onload = e => {
    document.getElementById('av').innerHTML =
      '<img src="' + e.target.result + '">';
  };
  r.readAsDataURL(f);
}

function openS() {
  document.getElementById('cn').value = C.AI_NAME;
  document.getElementById('cw').value = C.WELCOME_MSG;
  document.getElementById('cp').value = C.SYSTEM_PROMPT;
  document.getElementById('ov').classList.add('on');
}

function closeS() {
  document.getElementById('ov').classList.remove('on');
}

function saveS() {
  C.AI_NAME = document.getElementById('cn').value || '小彡';
  C.WELCOME_MSG = document.getElementById('cw').value;
  C.SYSTEM_PROMPT = document.getElementById('cp').value;
  document.getElementById('nm').textContent = C.AI_NAME;
  document.getElementById('w').textContent = C.WELCOME_MSG;
  H = [{ role: 'system', content: C.SYSTEM_PROMPT }];
  closeS();
}

function aM(t, r) {
  const d = document.createElement('div');
  d.className = 'm ' + r;
  d.innerHTML = t;
  document.getElementById('msgs').appendChild(d);
  d.scrollIntoView({ behavior: 'smooth' });
}

async function send() {
  const input = document.getElementById('i');
  const text = input.value.trim();
  if (!text) return;
  input.value = '';
  aM(text, 'u');
  H.push({ role: 'user', content: text });

  try {
    const res = await fetch(C.API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + C.API_KEY },
      body: JSON.stringify({ model: C.MODEL, messages: H, stream: true })
    });
    const rd = res.body.getReader(), dc = new TextDecoder();
    let rp = '';
    const b = document.createElement('div');
    b.className = 'm a';
    document.getElementById('msgs').appendChild(b);
    while (true) {
      const { done: d, value: v } = await rd.read();
      if (d) break;
      for (const l of dc.decode(v).split('\n')) {
        if (!l.startsWith('data: ')) continue;
        const j = l.slice(6);
        if (j === '[DONE]') break;
        try {
          const dl = JSON.parse(j).choices[0].delta.content;
          if (dl) { rp += dl; b.innerHTML = rp; }
        } catch (e) {}
      }
    }
    H.push({ role: 'assistant', content: rp });
  } catch (e) {
    aM('出错: ' + e.message, 'a');
  }
}

apT(ct);
bTG();
</script>
</body>
</html>

★★★ V3 模块扩展版

多文件模块化，适合学习和二次开发。

模块化详细注释

下载 ZIP

V3 适合谁？

适合想学编程的人，或者想深度定制的人。代码按功能分成多个文件，像"积木"一样，改哪个就改哪个，互不干扰。

第一步：下载并解压

点上方「下载 ZIP」按钮
Windows：找到下载的 xiaosan-v3.zip → 右键 →「全部解压缩」→「解压」
Mac：双击 xiaosan-v3.zip，自动解压
打开解压后的 xiaosan-v3 文件夹，你会看到这样的结构：

目录结构
xiaosan-v3/
├── index.html          ← 主页面（一般不用改）
├── css/
│   ├── base.css        ← 基础样式，CSS变量定义
│   ├── chat.css        ← 聊天界面样式
│   └── themes.css      ← 10种主题定义（想加新主题改这里）
└── js/
    ├── chat.js         ← ★★★ 必须改！填你的API Key
    ├── api.js          ← API调用封装（一般不用改）
    ├── ui.js           ← 界面渲染（想改UI改这里）
    ├── markdown.js     ← Markdown渲染（不用改）
    ├── themes.js       ← 主题切换逻辑（想加新主题改这里）
    ├── settings.js     ← 设置面板（不用改）
    ├── storage.js      ← 本地存储（不用改）
    ├── history.js      ← 历史记录（不用改）
    ├── shortcuts.js    ← 快捷键（不用改）
    ├── export.js       ← 导出（不用改）
    └── utils.js        ← 工具函数（不用改）

第二步：修改 API Key（只需改一个文件）

进入 js 文件夹
找到 chat.js，右键 → 用记事本打开
找到最上面的 CONFIG 对象，把 YOUR_API_KEY_HERE 替换成你的 Key

js/chat.js — 修改这里
const CONFIG = {
  // ★ 必填
  API_KEY: 'YOUR_API_KEY_HERE',  // ← 把这行的 YOUR_API_KEY_HERE 换成你的 Key

  // ★ 可选（想改就改）
  AI_NAME: '小彡',           // ← AI的名字
  WELCOME_MSG: '你好！',       // ← 开场欢迎语
  SYSTEM_PROMPT: '你是一个温暖的AI伙伴。',  // ← 性格设定
  MODEL: 'deepseek-v4-flash',     // ← 模型名称
  API_URL: 'https://api.deepseek.com/v1/chat/completions',  // ← API地址
  THEME: 'dark',             // ← 主题
};

第三步：运行

V3 是多文件结构，不能直接双击 index.html（会报 CORS 错误），必须用本地服务器：

打开终端（Windows: Win+R → cmd / Mac: Cmd+空格 → Terminal）
输入 cd Desktop\xiaosan-v3（进入文件夹，根据你的实际位置调整路径）
输入 npx serve .
等几秒，看到提示后，浏览器打开 localhost:3000

[Tip] 什么是"终端/命令行"？ 就是一个用文字和电脑对话的窗口。别怕，跟着上面的步骤输入就行，不用懂原理。

Windows 打开方式：按键盘上的 Win+R → 输入 cmd → 回车
Mac 打开方式：Cmd+空格 → 输入 Terminal → 回车

★★★★ V4 完整功能版

13模块，人格测试/TTS/搜索/弹簧动画。

13模块人格TTS搜索

下载 ZIP

V4 适合谁？

想要完整体验的人。包含人格测试（21种小游戏测你的人格）、语音合成（AI说话）、联网搜索、弹簧动画等高级功能。

第一步：下载并解压

点「下载 ZIP」→ 下载完成后解压（同 V3 的解压方法）
打开 xiaosan-v4 文件夹，文件结构：

目录结构
xiaosan-v4/
├── index.html              ← 主页面（不用改）
├── css/ (base.css, chat.css, themes.css)
└── js/
    ├── chat.js             ← ★★★ 必须改！填API Key
    ├── api.js              ← API封装（不用改）
    ├── ui.js               ← 界面渲染（想改UI改这里）
    ├── markdown.js         ← Markdown（不用改）
    ├── themes.js           ← 主题（想加新主题改这里）
    ├── settings.js         ← 设置面板（不用改）
    ├── storage.js          ← 本地存储（不用改）
    ├── history.js          ← 历史记录（不用改）
    ├── shortcuts.js        ← 快捷键（不用改）
    ├── export.js           ← 导出（不用改）
    ├── utils.js            ← 工具（不用改）
    ├── tts.js              ← ★ TTS语音 — 需小米MiMo API Key
    ├── search.js           ← ★ 联网搜索 — 需SearXNG
    ├── personality.js      ← ★ 人格测试 — 直接可用
    └── spring.js           ← ★ 弹簧动画 — 直接可用

第二步：修改配置文件

必须改的文件：

js/chat.js — 填 API Key（同 V3 的改法），这是唯一必须改的文件

可选改的文件（不需要就跳过）：

js/tts.js — 语音功能。需要小米 MiMo 的 API Key（去 MiMo 开放平台申请）。不填就用不了语音，但不影响其他功能。
js/search.js — 联网搜索。需要自己搭建 SearXNG 搜索引擎。不填就用不了搜索，但不影响其他功能。
personality.js / spring.js — 人格测试和弹簧动画，开箱即用，不需要任何配置。

第三步：运行

同 V3，必须用本地服务器：

终端 → cd Desktop\xiaosan-v4
npx serve .
浏览器打开 localhost:3000

各功能怎么用？

人格测试：点聊天界面里的人格测试按钮，开始21个小游戏，测出你属于20种人格中的哪一种。
语音合成：AI 回复后会自动朗读（需配置 tts.js）。可以在设置里开关。
联网搜索：AI 回答问题时自动搜索互联网获取最新信息（需配置 search.js）。
弹簧动画：消息出现时有弹性的动画效果，自动生效。

独立补丁包

像"插件"一样，下载后引入你的项目即可。每个补丁独立运行，不依赖其他补丁。

TTS 语音合成

让AI开口说话，支持小米MiMo，10款音色可选

10音色自动缓存

下载

TTS 语音合成 —— 让AI开口说话

什么是 TTS？就是"文字转语音"（Text To Speech）。AI 回复的文字可以自动变成语音播放出来。

接入步骤（一步一步来）

下载补丁：点上方「下载」按钮，得到 tts-patch.js 文件
放到正确位置：把 tts-patch.js 拖到你项目文件夹的 js/ 目录里
在 HTML 中引入：打开 index.html，在 <body> 标签的 </body> 之前，加一行：
<script src="js/tts-patch.js"></script>
部署代理服务器（重要！）：
为什么需要代理？因为小米的 TTS API 不允许浏览器直接调用（CORS 限制），所以需要一个 PHP 服务器来"中转"请求。

把 tts-proxy.php 上传到你的 PHP 服务器（宝塔面板直接拖进去就行）

打开 tts-proxy.php，把第3行的 your-mimo-key 换成你的小米 MiMo API Key

记住这个 PHP 文件的网址，比如 https://你的域名/tts-proxy.php
在代码中调用：
await TTSPatch.play('你好世界', '茉莉');

可用音色

音色名	风格	适合场景
冰糖	甜美可爱的少女	卖萌、日常聊天
茉莉	温柔的女声	默认推荐，温柔陪伴
知性	成熟知性女声	正式场合、知识讲解
元气	活泼少女	欢快、打气鼓励
清冷	清冷女声	高冷风格
苏打	温和男声	默认男声
白桦	沉稳男声	播音、讲故事

[Tip] 还可以传自定义描述：比如 TTSPatch.play('你好', '低沉沙哑的男声')，AI 会根据你的描述生成对应的声音。

tts-proxy.php 完整代码

PHP
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
$KEY='your-mimo-key'; $URL='https://api.xiaomimimo.com/v1/chat/completions';
$t=$_POST['text']??''; $v=$_POST['voice']??'茉莉';
$V=['冰糖'=>'甜美可爱的少女声音','茉莉'=>'温柔的女声','知性'=>'成熟知性女声','元气'=>'活泼少女','清冷'=>'清冷女声','苏打'=>'温和男声','白桦'=>'沉稳男声'];
$vd=$V[$v]??$v;
$t=strip_tags($t); $t=preg_replace('/\([^)]*\)/u','',$t); $t=trim($t);
$segs=preg_split('/(?<=[。！？])/u',$t,-1,PREG_SPLIT_NO_EMPTY); $cks=[]; $cur='';
foreach($segs as $s){$s=trim($s);if(!$s)continue;if(mb_strlen($cur.$s,'UTF-8')>150){if($cur)$cks[]=trim($cur);$cur=$s}else{$cur.=$s}}
if($cur)$cks[]=trim($cur); $aud=[];
foreach($cks as $ck){$p=json_encode(['model'=>'mimo-v2.5-tts-voicedesign','messages'=>[['role'=>'user','content'=>$vd],['role'=>'assistant','content'=>$ck]],'audio'=>['format'=>'wav','optimize_text_preview'=>true]]);$ch=curl_init($URL);curl_setopt($ch,CURLOPT_POST,true);curl_setopt($ch,CURLOPT_POSTFIELDS,$p);curl_setopt($ch,CURLOPT_HTTPHEADER,['api-key: '.$KEY,'Content-Type: application/json']);curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);$r=curl_exec($ch);curl_close($ch);$d=json_decode($r,true);if(isset($d['choices'][0]['message']['audio']['data']))$aud[]=$d['choices'][0]['message']['audio']['data']}
echo json_encode(['success'=>true,'audio'=>end($aud),'chunks'=>count($aud)]);
?>

[!] 代理服务器是什么？ 就是一台"中间人"服务器。浏览器不能直接调小米的 API（被安全策略拦了），所以让 PHP 服务器帮你转告。PHP 服务器没有这个限制。

Thinking 动画

AI思考时的加载动画，16种加载器+77句思考短语

16加载器77短语

下载

Thinking 动画 —— 让等待变有趣

AI 思考的时候，界面上会出现一个有趣的加载动画和随机短语（比如"正在查阅宇宙的使用手册..."），让等待不再无聊。

下载 thinking-patch.js 到项目文件夹的 js/ 目录
在 index.html 的 </body> 前加：<script src="js/thinking-patch.js"></script>
在你的 JS 代码中使用：

JavaScript
// 获取一个随机加载动画（16种之一）
const loader = ThinkingPatch.getRandomLoader();

// 获取一个随机思考短语（77句之一）
const phrase = ThinkingPatch.getRandomPhrase();

弹簧物理

弹性动画效果，让界面更有活力

5曲线Spring类

下载

弹簧物理动画 —— 让元素"弹"起来

就像弹簧一样，元素出现时会有弹性的动画效果，比普通的淡入淡出更有趣。

下载 spring-patch.js 到 js/ 目录
在 index.html 中引入：<script src="js/spring-patch.js"></script>
在 JS 中使用：

JavaScript
// 让某个元素弹出来
springAnimate(el, 'bounce', {
  scale: { from: 0.8, to: 1 }
});

// 可用曲线：bounce / elastic / overshoot / snap / wobble

人格测试

21种小游戏，测出你的20种人格类型

21游戏20人格

下载

人格测试 —— 发现真实的自己

通过21个有趣的小游戏（画图、选择、记忆等），分析出你属于20种人格类型中的一种。完全在浏览器本地运行，不上传任何数据。

下载 personality-patch.zip → 解压到 js/ 目录
在 index.html 中引入：<script src="js/personality-test.js"></script>
在 JS 中启动测试：

JavaScript
// 启动人格测试
PersonalityTest.start({
  onComplete: function(result) {
    console.log('你的人格类型：', result.type);
    console.log('详细描述：', result.description);
  }
});

[Tip] 人格类型列表（20种）：探险家、守护者、梦想家、实干家、艺术家、分析师、照顾者、领导者、思想家、表演者、和平者、完美主义者、冒险家、创新者、战略家、激励者、观察者、协调者、治疗者、建造者。

进阶配置

可选项，按需配置。如果你想让小彡更强大，可以试试这些。

记忆功能 —— 分级教学

记忆功能让AI记住之前的对话。根据需求复杂度，分三个等级：

等级1：基础记忆（V3/V4 自带）

V3/V4 已经内置了 localStorage 记忆，刷新页面对话还在。不需要任何配置。但有两个限制：

清除浏览器缓存会丢失
换设备/换浏览器就没了

等级2：进阶记忆（V1/V2 手动加）

V1/V2 默认没有记忆。加上以下代码就能拥有和 V3/V4 一样的 localStorage 记忆：

JavaScript — localStorage 记忆
// ===== 加到 <script> 里 =====

// 保存：每次发送消息后调用
function saveHistory() {
  const toSave = history.slice(-50); // 最多保存50条
  localStorage.setItem('chat_history', JSON.stringify(toSave));
}

// 加载：页面打开时自动恢复
function loadHistory() {
  const saved = localStorage.getItem('chat_history');
  if (saved) {
    history = JSON.parse(saved);
    history.forEach(msg => {
      if (msg.role === 'user') addMsg(msg.content, 'user');
      if (msg.role === 'assistant') addMsg(msg.content, 'ai');
    });
  }
}

// 清除：不想让AI记住了
function clearHistory() {
  localStorage.removeItem('chat_history');
  history = [{ role: 'system', content: SYSTEM }];
}

// ===== 怎么用？ =====
// 1. 在 send() 函数末尾加：saveHistory();
// 2. 在页面加载时加：loadHistory();

[!] localStorage 的局限：数据存在浏览器里，清除缓存会丢、换设备会丢。适合个人玩具项目。

等级3：服务器长期记忆（专业方案）

想要永久保存、跨设备同步？需要搭一个后端服务器：

建数据库：用 MySQL / MongoDB / SQLite 存储对话记录
写后端API：Node.js / Python / PHP 写接口，处理保存和读取
前端对接：在 send() 函数里，每次收到AI回复后，调用后端API保存
用户系统：加登录功能，每个用户独立的记忆空间

[Tip] 想快速实现？ 用 Vercel + Supabase 免费方案：Supabase 提供免费的 PostgreSQL 数据库，Vercel 部署后端，零成本搞定服务器记忆。

主题定制 —— 预设主题一览

复制下方 CSS 代码粘贴到 css/themes.css 末尾，然后在 CONFIG 中把 THEME 改成对应名称即可。

赛博朋克

THEME: 'cyberpunk'

森林绿

THEME: 'forest'

日落橙

THEME: 'sunset'

极光紫

THEME: 'aurora'

纯白极简

THEME: 'minimal'

每个色块从左到右：主色（按钮/强调）、背景色、边框色。

CSS — 预设主题（复制即用）
/* 赛博朋克 */
[data-theme="cyberpunk"] {
  --primary-color: #ff00ff;
  --bg-start: #0a0014; --bg-end: #140028;
  --surface: #1a0033; --text-primary: #fff;
  --border-color: #6600cc;
}
/* 森林绿 */
[data-theme="forest"] {
  --primary-color: #2ecc71;
  --bg-start: #0a1a0f; --bg-end: #0f2a18;
  --surface: #1a3a24; --text-primary: #e8f5e9;
  --border-color: #2e7d32;
}
/* 日落橙 */
[data-theme="sunset"] {
  --primary-color: #ff7043;
  --bg-start: #1a0f08; --bg-end: #2a1a0f;
  --surface: #3a2a1a; --text-primary: #fff3e0;
  --border-color: #e65100;
}
/* 极光紫 */
[data-theme="aurora"] {
  --primary-color: #7c4dff;
  --bg-start: #0a0820; --bg-end: #14103a;
  --surface: #1e1850; --text-primary: #ede7f6;
  --border-color: #4527a0;
}
/* 纯白极简 */
[data-theme="minimal"] {
  --primary-color: #222;
  --bg-start: #fff; --bg-end: #fafafa;
  --surface: #fff; --text-primary: #111;
  --border-color: #e0e0e0;
}
/* 使用：CONFIG 中 THEME: 'cyberpunk' */

V3/V4 文件参数详解 —— 每个文件改什么、有什么效果

V3/V4 是多文件结构，每个文件各司其职。下面是每个可修改文件的详解：

文件路径	必须改？	改什么	改了有什么效果
`js/chat.js`	必须	API_KEY / MODEL / API_URL / SYSTEM_PROMPT / THEME	核心配置：AI密钥、模型、性格、主题全在这里
`js/themes.js`	可选	添加新主题对象	多一种主题可选（配合 themes.css）
`css/themes.css`	可选	添加新的 [data-theme="xxx"] 样式	定义新主题的颜色变量
`js/ui.js`	可选	修改渲染逻辑、布局结构	改变聊天界面的外观和交互方式
`js/tts.js`	可选	填入小米 MiMo API Key	启用语音合成功能（AI说话）
`js/search.js`	可选	填入 SearXNG 或第三方搜索 API 地址	启用联网搜索（AI可查互联网）
`js/settings.js`	不用改	—	设置面板的逻辑，开箱即用
`js/storage.js`	不用改	—	localStorage 读写封装
`js/history.js`	不用改	—	对话历史管理
`js/markdown.js`	不用改	—	AI回复的 Markdown 渲染
`js/export.js`	不用改	—	对话导出功能
`js/shortcuts.js`	不用改	—	快捷键（Ctrl+K等）
`js/personality.js`	不用改	—	人格测试（V4自带，直接能用）
`js/spring.js`	不用改	—	弹簧动画（V4自带，直接能用）

chat.js 完整配置示例

js/chat.js — 所有可改参数
const CONFIG = {
  // ===== 必填 =====
  API_KEY: 'YOUR_API_KEY_HERE',      // 你的AI密钥

  // ===== 基础配置 =====
  AI_NAME: '小彡',                    // AI的名字，显示在顶栏
  WELCOME_MSG: '你好！',              // 打开时的欢迎语
  SYSTEM_PROMPT: '你是一个温暖的AI伙伴。', // 性格设定（见下方示例）

  // ===== API 配置 =====
  MODEL: 'deepseek-v4-flash',            // 模型名称
  API_URL: 'https://api.deepseek.com/v1/chat/completions', // API地址

  // ===== 外观 =====
  THEME: 'dark',                     // 主题名：dark/light/blue/pink/...

  // ===== 高级（一般不用改） =====
  MAX_HISTORY: 50,                   // 最多记住多少轮对话
  MAX_INPUT: 500,                    // 用户输入最大字数
  STREAM: true,                      // 是否流式输出（逐字显示）
};

SYSTEM_PROMPT 性格设定示例

JavaScript
// 温暖朋友型（默认）
SYSTEM_PROMPT: '你是一个温暖的AI伙伴，说话温柔，像朋友一样。'

// 幽默搞笑型
SYSTEM_PROMPT: '你是一个幽默的AI，喜欢讲冷笑话，说话轻松搞笑。'

// 专业助手型
SYSTEM_PROMPT: '你是一个专业的AI助手，回答简洁准确，不废话。'

// 可爱萌宠型
SYSTEM_PROMPT: '你是一只可爱的AI小猫咪，说话带喵~，用颜文字。'

// 中文老师型
SYSTEM_PROMPT: '你是中文老师，帮我纠正语法错误，解释成语典故。'

// 代码导师型
SYSTEM_PROMPT: '你是编程导师，用通俗易懂的方式解释代码，举生活中的例子。'

联网搜索 —— 让AI能查互联网

默认情况下，AI只能用训练时学到的知识回答。加上搜索功能后，AI可以实时联网搜索最新信息。

方案一：自建 SearXNG（免费，推荐）

SearXNG 是一个开源的元搜索引擎，聚合多个搜索引擎的结果。搭建后完全免费、无限制。

部署 SearXNG：
Docker 一键部署（推荐）：

docker run -d -p 8888:8080 searxng/searxng

部署好后访问 http://你的服务器IP:8888 确认能用

没有服务器？ 用免费的 Oracle Cloud / Google Cloud 免费套餐，或者用宝塔面板的 Docker 管理器一键部署
修改 search.js：
打开 js/search.js，找到搜索 API 地址配置

把地址改成你的 SearXNG 地址：http://你的IP:8888/search
测试：在聊天中问一个需要最新信息的问题（比如"今天天气"），AI 会自动搜索并回答

[Tip] SearXNG 的优势

完全免费，无 API 限制
隐私保护，不记录搜索历史
聚合 Google / Bing / DuckDuckGo 等多个引擎
可以自己控制，不依赖第三方

方案二：用第三方搜索 API（简单，但有费用）

不想自建服务器？可以用这些现成的搜索 API：

服务	价格	特点	注册地址
SerpAPI	100次/月免费	Google搜索结果，稳定	serpapi.com
Bing Search API	1000次/月免费	微软必应，Azure注册	azure.microsoft.com
Tavily	1000次/月免费	专为AI设计，返回摘要	tavily.com
DuckDuckGo	完全免费	无需API Key，但可能被限流	duckduckgo.com

注册后拿到 API Key，填入 js/search.js 对应位置即可。

search.js 配置示例

js/search.js — 常见配置
// ===== 方案一：自建 SearXNG =====
SEARCH_API: 'http://你的服务器IP:8888/search',
SEARCH_ENGINE: 'searxng',

// ===== 方案二：SerpAPI =====
SEARCH_API: 'https://serpapi.com/search',
SEARCH_KEY: '你的SerpAPI-Key',
SEARCH_ENGINE: 'google',

// ===== 方案三：Bing =====
SEARCH_API: 'https://api.bing.microsoft.com/v7.0/search',
SEARCH_KEY: '你的Bing-Key',
SEARCH_ENGINE: 'bing',

[!] 搜索功能会消耗额外的 API 调用次数。自建 SearXNG 无限制，第三方 API 有免费额度限制。

参数速查表

参数	作用	V1/V2 改哪里	V3/V4 改哪里	示例
`API_KEY`	AI密钥（必填）	index.html	js/chat.js	`'sk-abc...'`
`SYSTEM_PROMPT`	性格设定	index.html	js/chat.js	`'幽默的AI'`
`MODEL`	模型名称	index.html	js/chat.js	`'deepseek-v4-flash'`
`API_URL`	API地址	index.html	js/chat.js	见下方表格
`THEME`	主题	CONFIG	js/chat.js	`'dark'`

常用 API 地址 & 模型名

服务商	API_URL	MODEL	费用
DeepSeek	`https://api.deepseek.com/v1/chat/completions`	`deepseek-v4-flash`	便宜，新用户有免费额度
OpenAI	`https://api.openai.com/v1/chat/completions`	`gpt-4`	较贵，需要国外手机号
通义千问	`https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions`	`qwen-turbo`	国内手机号直接注册
智谱AI	`https://open.bigmodel.cn/api/paas/v4/chat/completions`	`glm-4-flash`	新用户有免费额度

常见问题

这是最常见的问题。按下面的步骤逐一排查，99%能解决：

① 检查 Key 格式

打开你的代码，找到填 Key 的那一行。确保：

Key 前后没有空格（最容易犯的错！）
Key 被引号包裹（单引号 ' 或双引号 " 都行）
Key 完整（以 sk- 开头，没有漏掉字符）

[v] 正确：API_KEY: 'sk-abc123xyz'

[x] 错误：API_KEY: ' sk-abc123xyz '（多了空格）

[x] 错误：API_KEY: sk-abc123xyz（没有引号）

② 检查账户余额

去 platform.deepseek.com → 登录 → 看左侧「费用」或「Billing」。DeepSeek 新用户有免费额度，但如果用完了就要充值。

③ 检查 API 地址

确认 API_URL 和你用的服务商匹配。比如用 DeepSeek 就必须是 https://api.deepseek.com/v1/chat/completions，不能用 OpenAI 的地址。

④ 检查模型名称

DeepSeek 的模型名是 deepseek-v4-flash（不是 deepseek，也不是 deepseek-chat）。

⑤ 浏览器控制台看报错

在聊天页面按 F12（或右键 →「检查」/「Inspect」）→ 点「Console」（控制台）标签 → 看有没有红色的错误信息。把错误信息告诉我，我帮你分析。

⑥ CORS 错误

如果看到 "CORS" 或 "Access-Control-Allow-Origin" 相关的红色错误，说明你是直接双击打开的 index.html。必须用本地服务器（npx serve .）才能正常调用 API。详见上方「快速开始 → 第5步」。

⑦ 网络/VPN 问题

如果你开了 VPN 或代理，可能会干扰 API 请求。试试关掉 VPN 再试。

改两个参数就行：API_URL 和 MODEL。

具体操作：

打开你的代码（V1/V2 改 index.html，V3/V4 改 js/chat.js）
找到 API_URL 和 MODEL 这两行
改成你想用的服务商对应的值

常用组合（直接复制）：

配置示例
// DeepSeek（推荐，便宜好用）
API_URL: 'https://api.deepseek.com/v1/chat/completions',
MODEL: 'deepseek-v4-flash',

// OpenAI GPT-4
API_URL: 'https://api.openai.com/v1/chat/completions',
MODEL: 'gpt-4',

// 通义千问（阿里）
API_URL: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
MODEL: 'qwen-turbo',

// 智谱AI
API_URL: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
MODEL: 'glm-4-flash',

[Tip] DeepSeek 的模型名区别

deepseek-v4-flash — 通用对话，便宜，够用
deepseek-v4-pro — 推理更强，但更贵

手机也能编辑代码，只是没有电脑方便。以下是几种方法：

安卓手机：

QuickEdit（推荐）— 应用商店搜索下载，免费，支持代码高亮
Acode — 更专业的代码编辑器，功能更强

iPhone 手机：

Runestone — App Store 搜索下载，免费
备忘录技巧：把 .html 改成 .txt → 用备忘录编辑 → 改回 .html

通用方法（任何手机）：

WPS Office — 可直接打开 HTML 文件编辑（没有代码高亮，但能用）
改后缀法：文件管理器里把 .html 改成 .txt → 用任何文本编辑器编辑 → 改回 .html

[!] 手机编辑时注意：不要用"纯文本"模式打开 HTML，否则可能丢失代码格式。

手机直接双击 HTML 文件是不行的（会报 CORS 错误）。以下是几种可行的方法：

方法1：微信/QQ传文件（最简单）

电脑上把 index.html 通过微信/QQ发给自己
手机上收到文件后，点「用其他应用打开」
选择浏览器（Chrome、Safari 等）
[!] 这个方法不保证能用，有些浏览器会拦截跨域请求

方法2：同WiFi下电脑当服务器（推荐）

确保手机和电脑连着同一个 WiFi
电脑启动服务器：npx serve .
电脑查IP：Win+R → cmd → ipconfig → 找「IPv4 地址」（类似 192.168.1.100）
手机浏览器输入 http://192.168.1.100:3000

方法3：Termux（安卓高级用户）

安卓装 Termux（应用商店或 F-Droid）
Termux 里运行 pkg install nodejs → npx serve .

[Tip] 怎么查电脑的IP地址？

Windows：Win+R → cmd → 输入 ipconfig → 找「IPv4 地址」
Mac：系统偏好设置 → 网络 → 选 WiFi → 看到 IP 地址

V1 / V2（单文件版）：默认不会保存。刷新页面或关闭浏览器后，对话记录就丢了。

V3 / V4（多文件版）：会自动保存。因为使用了 localStorage（浏览器本地存储），刷新后对话还在。但清除浏览器缓存会丢失。

想在 V1/V2 里也保存？ 加上「进阶配置 → 长期记忆」里的代码就行。

[Tip] 什么是 localStorage？ 就是浏览器自带的"本地小仓库"。数据存在你的电脑/手机上，不会上传到任何服务器。关闭浏览器后数据还在，但清除浏览器缓存会丢失。

非常安全。小彡的数据流是这样的：

你的对话发送到你选的AI服务商（比如DeepSeek的服务器）
AI回复后，结果返回到你的浏览器
所有数据都存在你的电脑/手机上，不会经过任何第三方服务器

什么人能看到你的对话？

[v] 你自己 —— 当然可以
[v] AI服务商（DeepSeek/OpenAI等）—— 因为对话发送到了他们的服务器
[x] 其他人 —— 看不到
[x] 小彡作者（三三）—— 看不到，代码是开源的，没有任何"后门"

小彡的代码是完全开源的，任何人都可以检查代码里有没有"偷数据"的行为。没有。

修改 SYSTEM_PROMPT 这个参数就行。它告诉AI"你是谁、该怎么说话"。

不同性格的示例：

性格设定示例
// 温暖朋友型（默认）
SYSTEM_PROMPT: '你是一个温暖的AI伙伴，说话温柔，像朋友一样。'

// 幽默搞笑型
SYSTEM_PROMPT: '你是一个幽默的AI，喜欢讲冷笑话，说话风格轻松搞笑。'

// 专业助手型
SYSTEM_PROMPT: '你是一个专业的AI助手，回答简洁准确，不废话。'

// 可爱萌宠型
SYSTEM_PROMPT: '你是一个可爱的AI小猫咪，说话带喵~，用颜文字，很萌。'

// 中文老师型
SYSTEM_PROMPT: '你是中文老师，帮我纠正语法错误，解释成语典故。'

CORS 全称是"跨域资源共享"（Cross-Origin Resource Sharing），是浏览器的安全限制。

通俗解释：当你直接双击 index.html 打开时，浏览器认为你在访问"本地文件"，不允许它向"远程服务器"（AI的API）发请求。这是浏览器为了安全故意设的限制。

解决方法：用本地服务器打开，而不是直接双击文件。

安装 Node.js（去 nodejs.org 下载安装）
打开终端 → 进入你的文件夹 → 输入 npx serve .
浏览器打开 localhost:3000

这样浏览器就认为你在访问一个"网站"而不是"本地文件"，就不会拦截了。

[Tip] 不想装 Node.js？ 用 Python 也行：终端输入 python -m http.server 3000，效果一样。

不能完全离线。

AI 对话需要联网，因为你的话要发送到 DeepSeek/OpenAI 的服务器，等AI回复后再返回来。没有网络就没有AI回复。

但是：

[v] 界面（UI）本身是本地文件，不需要联网就能显示
[v] 之前保存的对话记录（localStorage）不需要联网就能查看
[v] 主题切换、设置修改不需要联网
[x] 发消息、AI回复 —— 必须联网

遇到问题？

如果你遇到任何问题，或有技术咨询、定制需求

可加微信：i33-OuO

写在最后

AI 不应该只属于大公司和程序员。
每个人都有权利拥有一个——
不被监控、不被转卖、完全属于自己的AI伙伴。

小彡的代码是 open 的，数据是 local 的，
你的对话只属于你自己。

如果你觉得有用，告诉一个朋友就好。