7.3 KiB

Raw Blame History

LLM 聊天网站

一个基于 Vue 3 + Node.js 构建的大语言模型聊天网站，支持与AI进行实时对话。

🚀 特性

🤖 智能对话: 基于大语言模型的自然语言处理
💬 实时聊天: 支持流式响应，实时显示AI回复
📚 对话管理: 自动保存对话历史，支持搜索和管理
🎨 现代UI: 响应式设计，支持亮色/暗色主题
⚡ 高性能: LRU缓存优化，快速响应
🔒 数据安全: 本地SQLite数据库存储

🛠️ 技术栈

前端

Vue 3 - 渐进式JavaScript框架
Pinia - 状态管理
Vue Router - 路由管理
Element Plus - UI组件库
Vite - 构建工具
Axios - HTTP客户端

后端

Node.js - JavaScript运行时
Express - Web框架
SQLite - 轻量级数据库
LRU Cache - 内存缓存
OpenAI兼容API - 大语言模型接口

📦 项目结构

llm-chat-website/
├── package.json              # 根目录包管理
├── pnpm-workspace.yaml       # pnpm工作空间配置
├── README.md                 # 项目说明
├── .gitignore               # Git忽略文件
├── frontend/                # 前端项目
│   ├── src/
│   │   ├── components/      # Vue组件
│   │   ├── views/          # 页面视图
│   │   ├── stores/         # Pinia状态管理
│   │   ├── api/            # API接口
│   │   ├── router/         # 路由配置
│   │   ├── styles/         # 样式文件
│   │   └── utils/          # 工具函数
│   ├── package.json        # 前端依赖
│   └── vite.config.js      # Vite配置
└── backend/                # 后端项目
    ├── src/
    │   ├── routes/         # API路由
    │   ├── services/       # 业务服务
    │   ├── models/         # 数据模型
    │   ├── middleware/     # 中间件
    │   ├── config/         # 配置文件
    │   └── utils/          # 工具函数
    ├── database/           # 数据库文件
    ├── package.json        # 后端依赖
    └── server.js          # 服务器入口

🔧 安装与运行

环境要求

Node.js >= 16.0.0
pnpm >= 7.0.0

1. 克隆项目

git clone <repository-url>
cd llm-chat-website

2. 安装依赖

# 安装所有依赖
pnpm install:all

3. 配置环境变量

后端配置

复制并编辑后端环境配置：

cd backend
cp .env.example .env

编辑 .env 文件，配置必要的环境变量：

# 服务器配置
PORT=3000
NODE_ENV=development

# 数据库配置
DB_PATH=./database/chat.db

# LLM API配置 (必须配置)
LLM_API_BASE_URL=https://api.openai.com/v1
LLM_API_KEY=your_api_key_here
LLM_MODEL=gpt-3.5-turbo

# 缓存配置
CACHE_MAX_SIZE=500
CACHE_TTL=1800000

# 速率限制配置
RATE_LIMIT_WINDOW_MS=60000
RATE_LIMIT_MAX_REQUESTS=20

# CORS配置
CORS_ORIGIN=http://localhost:5173

前端配置

前端环境变量已预配置，如需修改可编辑：

.env.development - 开发环境
.env.production - 生产环境

4. 启动项目

开发模式（推荐）

# 同时启动前后端
pnpm dev

或者分别启动：

# 启动后端
pnpm dev:backend

# 启动前端（新终端）
pnpm dev:frontend

生产模式

# 构建前端
pnpm build

# 启动后端服务
pnpm start

5. 访问应用

前端地址: http://localhost:5173
后端API: http://localhost:3000

🔑 API配置

支持的LLM服务

项目支持任何兼容OpenAI API格式的服务：

OpenAI: 官方ChatGPT API
Azure OpenAI: 微软Azure OpenAI服务
Claude API: Anthropic Claude模型
本地部署: Ollama、LocalAI等
第三方服务: 各种OpenAI兼容的API服务

配置示例

OpenAI官方API

LLM_API_BASE_URL=https://api.openai.com/v1
LLM_API_KEY=sk-your-openai-api-key
LLM_MODEL=gpt-3.5-turbo

Azure OpenAI

LLM_API_BASE_URL=https://your-resource.openai.azure.com/openai/deployments/your-deployment
LLM_API_KEY=your-azure-api-key
LLM_MODEL=gpt-35-turbo

本地Ollama

LLM_API_BASE_URL=http://localhost:11434/v1
LLM_API_KEY=ollama
LLM_MODEL=llama2

📝 使用说明

基本功能

新建对话: 点击"新建对话"按钮开始聊天
发送消息: 在输入框输入问题，按Enter发送
查看历史: 在侧边栏查看所有对话历史
搜索对话: 使用搜索框快速找到相关对话
管理对话: 重命名、删除对话

快捷键

Ctrl + N: 新建对话
Ctrl + K: 快速搜索
Ctrl + B: 切换侧边栏
Enter: 发送消息
Ctrl + Enter: 发送消息（可在设置中切换）
Esc: 取消当前操作

高级功能

主题切换: 支持亮色/暗色主题
响应式设计: 完美适配移动端
导入导出: 支持对话数据的导入导出
设置自定义: 个性化界面和功能设置

🔧 开发指南

项目架构

前端架构

组件化: 模块化的Vue组件设计
状态管理: 使用Pinia管理全局状态
API集成: 统一的HTTP客户端和接口封装
响应式: 移动端优先的响应式设计

后端架构

RESTful API: 标准的REST接口设计
分层架构: 路由、服务、数据访问层分离
缓存优化: LRU缓存提升性能
错误处理: 完善的错误处理和日志记录

添加新功能

新增API: 在 backend/routes/ 中添加路由
业务逻辑: 在 backend/services/ 中实现业务逻辑
前端接口: 在 frontend/src/api/ 中封装API调用
状态管理: 在 frontend/src/stores/ 中添加状态管理
UI组件: 在 frontend/src/components/ 中创建组件

测试

# 运行后端测试
cd backend && npm test

# 运行前端测试
cd frontend && npm test

🚀 部署

Docker部署

# 构建镜像
docker build -t llm-chat-website .

# 运行容器
docker run -p 3000:3000 -v $(pwd)/data:/app/database llm-chat-website

传统部署

构建前端资源：pnpm build
配置Nginx代理前端静态文件
使用PM2等工具管理后端进程
配置SSL证书（推荐）

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

Fork本仓库
创建特性分支：git checkout -b feature/amazing-feature
提交更改：git commit -m 'Add amazing feature'
推送分支：git push origin feature/amazing-feature
提交Pull Request

开发规范

遵循ESLint配置
编写有意义的提交信息
添加必要的测试
更新相关文档

📄 许可证

本项目采用 MIT 许可证。

🆘 支持

如果您遇到问题或有建议，请：

查看常见问题
提交 Issue
参与讨论

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

Vue.js - 渐进式JavaScript框架
Element Plus - 优秀的Vue 3组件库
Express.js - 快速、开放、极简的Web框架
SQLite - 自包含的数据库引擎

⭐ 如果这个项目对您有帮助，请给我们一个星标！

7.3 KiB Raw Blame History Unescape Escape