AI 聊天助手

AI 聊天助手

一、项目简介

基于 DeepSeek API 的 PC 端在线 AI 对话项目。前端为单页 HTML（Vue 2），后端为 Express 代理服务，负责转发聊天请求并隐藏 API Key，支持多轮上下文对话、打字机效果展示与错误提示，适合作为大模型接入与前后端分离入门示例。

---

功能介绍

核心功能

功能	说明
实时对话	用户输入消息后，调用 DeepSeek 大模型生成回答并展示在聊天窗口
多轮对话	每次请求携带完整历史消息，AI 可结合上下文连续作答
打字机效果	AI 回复逐字显示，模拟真实输入体验
加载状态	等待回复时显示「正在输入」动画，发送按钮自动禁用
错误提示	网络异常或 API 失败时，在聊天区展示友好错误信息

界面与交互

• 聊天气泡布局：用户消息靠右（蓝色），AI 消息靠左（灰色）
• 支持 Enter 键发送，空内容时发送按钮不可点击
• 新消息自动滚动到底部
• 页面打开时展示一条 AI 欢迎语

技术实现要点

浏览器 (index.html)
    │  POST /api/chat  { messages: [...] }
    ▼
Express 服务 (server.js)
    │  角色转换：ai → assistant
    │  调用 OpenAI SDK（baseURL 指向 DeepSeek）
    ▼
DeepSeek API (deepseek-chat)
    │  返回 completion.choices[0].message.content
    ▼
前端打字机渲染

• 前后端分离：前端只负责 UI 与请求，不直接接触 API Key
• CORS 已开启：允许跨域访问（开发时前端与后端同源，由 Express 统一托管）
• 单文件前端：index.html 内聚 HTML、CSS、Vue 逻辑，无构建步骤

---

文件目录介绍

ai-chat-deepseek-pc/
├── index.html          # 前端页面：聊天 UI、Vue 逻辑、样式
├── server.js           # 后端服务：静态资源托管、/api/chat 接口、DeepSeek 调用
├── package.json        # 项目依赖与启动脚本（start / dev）
├── pnpm-lock.yaml      # pnpm 锁文件（依赖版本锁定）
├── README.md           # 项目简介、API Key 配置与运行说明
├── 项目说明.md          # 本文件：功能与目录说明
├── .gitignore          # Git 忽略规则
├── node_modules/       # 依赖包（npm/pnpm install 后生成，勿手动修改）
└── 演示材料/
    └── 截图/
        ├── 图-1.png    # 项目演示截图
        └── 图-2.png    # 项目演示截图

主要文件说明

index.html

前端唯一入口，包含：

• 模板：标题栏、消息列表、输入框与发送按钮
• 样式：聊天气泡、打字动画、响应式布局（最大宽度 800px）
• 脚本：Vue 2 实例，负责消息管理、fetch 调用后端、打字机效果与滚动

关键请求地址：POST http://localhost:3000/api/chat

server.js

Node.js 后端，主要职责：

职责	实现
静态托管	express.static 托管项目根目录，提供 index.html
首页路由	GET / 返回 index.html
聊天接口	POST /api/chat 接收消息数组，转发至 DeepSeek
角色映射	将前端 role: "ai" 转为 API 要求的 "assistant"
错误处理	参数校验、API 异常时返回 400 / 500 及错误信息

API Key 配置位置：server.js 中 OpenAI 客户端的 apiKey 字段。

package.json

脚本	命令	用途
start	node server.js	生产/日常使用
dev	nodemon server.js	开发时热重载

主要依赖：express、cors、openai（兼容 DeepSeek 接口）、nodemon（开发）。

---

运行方式

# 1. 安装依赖
npm install   # 或 pnpm install

# 2. 在 server.js 中配置有效的 DeepSeek API Key

# 3. 启动服务
npm start     # 开发可用 npm run dev

# 4. 浏览器访问
http://localhost:3000

注意：不可直接双击 index.html 用 file:// 打开。页面依赖后端 http://localhost:3000/api/chat，必须先启动 server.js。

---

配置说明

• 端口：默认 3000，可通过环境变量 PORT 修改
• 模型：deepseek-chat
• 系统提示词：You are a helpful assistant.（可在 server.js 中调整）

---

注意事项

• 仅供学习与研究使用
• DeepSeek API 有调用额度限制，请合理使用
• API Key 请勿提交到公开仓库

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/ai-chat-deepseek-pc