# chatbot

**Repository Path**: thiswind/chatbot

## Basic Information

- **Project Name**: chatbot
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2025-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 聊天机器人 🤖

一个功能完整的纯前端聊天机器人应用，支持 OpenAI 兼容的 API，具有现代化的用户界面和丰富的功能。

## ✨ 主要特性

### 🎯 核心功能
- **纯前端实现** - 无需后端服务器，可直接部署到静态网站
- **OpenAI 兼容 API** - 支持标准的 `/chat/completions` 端点
- **流式响应** - 实时显示 AI 回复，提供更好的用户体验
- **会话管理** - 自动保存对话历史，支持上下文连续对话
- **响应式设计** - 完美适配桌面和移动设备

### 🛠 高级功能
- **Markdown 支持** - 自动渲染 Markdown 格式的回复
- **代码高亮** - 自动高亮显示代码块
- **设置面板** - 可配置 API 参数、模型设置等
- **本地存储** - 自动保存设置和对话历史
- **错误处理** - 完善的错误提示和重试机制
- **键盘快捷键** - 支持快捷键操作

## 🚀 快速开始

### 1. 下载文件
将以下文件下载到同一目录：
- `index.html` - 主页面
- `style.css` - 样式文件
- `script.js` - 核心 JavaScript 逻辑

### 2. 配置 API
打开 `index.html` 文件，在浏览器中运行，然后：
1. 点击右上角的设置按钮 ⚙️
2. 配置您的 API 信息：
   - **API 端点**：您的 OpenAI 兼容 API 地址
   - **API 密钥**：您的 API 密钥
   - **模型 ID**：使用的模型名称

### 3. 开始使用
在输入框中输入您的问题，按回车键或点击发送按钮即可开始对话。

## 📋 详细功能说明

### 消息功能
- **发送消息**：输入文本后按 Enter 或点击发送按钮
- **多行输入**：使用 Shift + Enter 换行
- **字符计数**：实时显示输入字符数量
- **自动调整**：输入框高度自动调整

### 设置选项
- **API 配置**：配置 API 端点、密钥和模型
- **模型参数**：调整温度、最大令牌数等
- **系统消息**：设置 AI 助手的角色和行为
- **流式响应**：启用/禁用实时响应显示
- **历史记录**：启用/禁用对话历史保存

### 键盘快捷键
- `Enter` - 发送消息
- `Shift + Enter` - 换行
- `Ctrl/Cmd + /` - 打开设置面板
- `Esc` - 关闭设置面板

## 🔧 配置说明

### 默认配置
```javascript
{
    apiUrl: 'https://apinexus.net/v1',
    apiKey: 'sk-2SiNx3VlMOvlnArsO4WqL3GhogMKSg8FUhek0PCLRz3vJT65',
    modelId: 'gpt-4o-mini',
    temperature: 0.7,
    maxTokens: 2048,
    systemMessage: '你是一个乐于助人的AI助手，请用中文回答问题。',
    enableStream: true,
    saveHistory: true
}
```

### 参数说明
- **apiUrl** - API 基础地址
- **apiKey** - API 认证密钥
- **modelId** - 使用的模型名称
- **temperature** - 回复的随机性 (0-2)
- **maxTokens** - 最大生成令牌数
- **systemMessage** - 系统角色设定
- **enableStream** - 是否启用流式响应
- **saveHistory** - 是否保存对话历史

## 📱 移动端支持

应用完全支持移动设备，包括：
- **响应式布局** - 自动适配不同屏幕尺寸
- **触摸友好** - 优化的触摸交互
- **虚拟键盘** - 智能处理虚拟键盘显示

## 🌐 部署指南

### GitHub Pages
1. 创建新的 GitHub 仓库
2. 上传所有文件到仓库
3. 在仓库设置中启用 GitHub Pages
4. 选择 main 分支作为源
5. 访问生成的 URL

### Netlify
1. 将文件压缩为 ZIP 文件
2. 访问 [Netlify](https://netlify.com)
3. 拖拽 ZIP 文件到部署区域
4. 等待部署完成

### Vercel
1. 安装 Vercel CLI：`npm i -g vercel`
2. 在项目目录运行：`vercel`
3. 按照提示完成部署

### 本地服务器
```bash
# 使用 Python
python -m http.server 8000

# 使用 Node.js
npx http-server

# 使用 PHP
php -S localhost:8000
```

## 🔒 安全说明

### API 密钥安全
- API 密钥存储在浏览器本地存储中
- 建议使用限制权限的 API 密钥
- 定期更换 API 密钥

### HTTPS 部署
- 建议使用 HTTPS 部署应用
- 确保 API 端点支持 HTTPS
- 避免在不安全的网络中使用

## 🛠 自定义开发

### 修改样式
编辑 `style.css` 文件自定义界面：
- 修改颜色主题
- 调整布局和间距
- 添加自定义动画

### 扩展功能
在 `script.js` 中添加新功能：
- 添加新的 API 端点支持
- 实现文件上传功能
- 集成语音识别

### 消息格式
支持的消息格式：
- 纯文本
- Markdown
- HTML（有限支持）
- 代码块（自动高亮）

## 📝 API 兼容性

### 支持的 API 标准
- OpenAI Chat Completions API
- Azure OpenAI API
- 其他 OpenAI 兼容的 API

### 请求格式
```javascript
{
    "model": "gpt-4o-mini",
    "messages": [
        {"role": "system", "content": "系统消息"},
        {"role": "user", "content": "用户消息"}
    ],
    "temperature": 0.7,
    "max_tokens": 2048,
    "stream": true
}
```

### 响应格式
```javascript
{
    "choices": [
        {
            "message": {
                "role": "assistant",
                "content": "AI 回复内容"
            }
        }
    ]
}
```

## 🐛 常见问题

### Q: 无法发送消息
A: 请检查：
- API 地址是否正确
- API 密钥是否有效
- 网络连接是否正常
- 浏览器控制台是否有错误信息

### Q: 回复显示异常
A: 请尝试：
- 清空浏览器缓存
- 检查 API 返回格式
- 确认模型是否支持流式响应

### Q: 无法保存设置
A: 请确认：
- 浏览器是否支持 localStorage
- 是否在隐私模式下使用
- 浏览器存储是否已满

## 🔄 更新日志

### v1.0.0
- 基础聊天功能
- OpenAI API 集成
- 流式响应支持
- 设置面板
- 移动端适配
- 本地存储支持

## 📄 许可证

MIT License - 可自由使用、修改和分发。

## 🤝 贡献

欢迎提交问题和功能建议！

---

**享受与 AI 的对话吧！** 🎉