🌸 情绪陪伴对话

一个温暖治愈的 AI 情绪陪伴聊天应用。纯前端实现（HTML5 + CSS3 + JavaScript），通过流式接口接入大语言模型，实时识别用户情绪并以结构化 JSON 返回，渲染为直观的情绪标签、情绪评分条与可点按的建议卡片。

随时有人倾听你在意的人和事 —— 无论开心、焦虑、低落还是疲惫。

---

仓库地址：https://gitcode.com/Zch070214/qingxu

码道项目生成

✨ 功能特性

• 💬 流式 AI 对话：基于 SSE（Server-Sent Events）逐字流式输出，实时显示"正在输入"动画
• 🧠 情绪智能识别：AI 返回结构化 JSON，自动识别你的即时情绪
• 📊 情绪评分条：0 - 100 分正向情绪指数，直观动态动画展示
• 💡 可点按建议卡片：点击即发送，把建议变成下一步行动
• 🌓 深浅双主题：暖色治愈 / 深色护眼，一键切换并本地记忆
• 🗑️ 一键清空：随时开启新的对话
• 📱 响应式布局：移动端与桌面端自适应
• 🎯 快捷话题：内置多个情绪开场白，一键开始倾诉

🚀 快速开始

1. 配置 API

打开 js/config.js，填入你自己的 API 密钥与请求参数：

const CONFIG = {
  apiUrl: "https://api-ai.gitcode.com/v1/chat/completions",
  apiKey: "你的_API_密钥",
  model: "deepseek-ai/DeepSeek-V4-Flash",
  maxTokens: 2048,
  temperature: 0.6,
  topP: 0.95,
  frequencyPenalty: 0,
  thinkingBudget: 2048,
};

⚠️ 安全提醒：apiKey 为敏感信息，请勿将含密钥的配置文件提交到公开仓库。如需公开演示，请部署在支持环境变量或后端代理的场景（示例见下文「密钥保护」段落）。

2. 启动项目

方式一：直接双击打开 index.html（本地 file 协议即可运行）。

方式二：使用任意静态服务器（推荐，便于调试）：

# Python
python3 -m http.server 8000

# Node.js
npx serve .

然后浏览器访问 http://localhost:8000。

🏗️ 项目结构

.
├── index.html          # 主页面结构
├── css/
│   └── style.css       # 主题样式（含深浅两套配色）
├── js/
│   ├── config.js       # 全局配置：API 地址 / 密钥 / 模型参数 / 系统提示词
│   ├── api.js          # API 封装：fetch + SSE 流式解析 + JSON 容错提取
│   └── app.js          # 应用逻辑：消息渲染、情绪面板、输入交互
└── README.md

🔗 从 Python 参考代码迁移说明

本项目由一段 Python（requests + 流式读取）参考代码迁移而来，主要差异：

Python 参考实现	JavaScript 迁移实现（js/api.js）
requests.post(..., stream=True)	fetch(url, { method: "POST", body: JSON.stringify(payload) })
response.iter_lines() 逐行读取	response.body.getReader() + TextDecoder 解码逐行切分
line.startswith(b"data:") 过滤	line.startsWith("data:") 过滤
json.loads(...) 解析每行	JSON.parse(...) 解析每行
生成器 yield 逐条产出	onChunk 回调逐条推送增量

🧠 系统提示词与 JSON 返回格式

为了让前端更好地渲染，系统提示词要求模型始终返回一个合法 JSON 对象：

{
  "reply": "给用户的陪伴回复",
  "mood": {
    "name": "焦虑",
    "score": 35
  },
  "tips": [
    "尝试做几次深呼吸，吸气 4 秒，呼气 6 秒",
    "把让你焦虑的事情写下来，理一理头绪"
  ]
}

字段	类型	说明
reply	string	AI 对用户的温暖回复正文
mood.name	string	识别到的用户情绪名称
mood.score	number	情绪正向指数，0 - 100（50 为中性，越低越消极）
tips	array<string>	1 - 3 条可执行建议，前端渲染为可点按钮

前端容错处理（AIApi.extractJson）：

• 自动剥离 ```````json ````代码块包裹
• 提取最外层花括号内内容
• 解析失败时降级为纯文本气泡展示，不影响对话

🔐 密钥保护建议

如需部署到公网，请避免将密钥写死在 config.js 中，推荐方式：

方案一：后端代理（推荐）
使用任意后端（如 Python/Node）转发请求，前端只调自己域名下的接口：

async function reply(messages) {
  const resp = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ messages }),
  });
  // 服务端负责拼接 apiKey，返回已解析好的流
}

方案二：环境变量注入（静态托管不可用）
若使用 Vercel / Netlify / Serverless 等支持函数的环境，将密钥放入平台的环境变量中，并在服务端函数中读取。

🛠️ 技术栈

• HTML5 + CSS3（Flex 布局、CSS 变量、动画、响应式、暗色主题）
• JavaScript（原生 ES2020+，无需构建工具、零依赖）
• 大语言模型 API（OpenAI 兼容格式的 v1/chat/completions 流式接口）

📄 免责声明

本项目仅供学习与技术演示用途，不构成任何心理咨询、诊断或治疗建议。如果你正在经历严重的情绪困扰，请及时寻求专业心理帮助或拨打当地心理援助热线。

📃 License

MIT License，可自由使用与修改。