# my-chatbot

**Repository Path**: thiswind/my-chatbot

## Basic Information

- **Project Name**: my-chatbot
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-21
- **Last Updated**: 2025-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI聊天机器人

一个基于Flask的AI聊天机器人应用，使用流式传输技术实现实时对话，并提供响应式手机界面。

## 技术栈

- 后端：Flask
- 前端：HTML, CSS, JavaScript, Bootstrap 5
- API：支持OpenAI兼容模式的API

## 功能特点

- 流式传输实现实时对话
- 响应式设计，适配手机屏幕
- 自动增长的输入框
- 聊天记录左右布局（用户在右，AI在左）
- 支持多行文本输入（使用回车键换行）
- 支持Markdown格式渲染，包含代码高亮
- 支持图片上传功能，实现多模态交互
- 自动识别并高亮显示网址链接
- 优雅的错误处理和后备模拟聊天功能

## 安装与运行

1. 创建并激活conda环境：

```bash
conda create -n chatbot python=3.10 -y
conda activate chatbot
```

2. 安装依赖：

```bash
pip install -r requirements.txt
```

3. 配置环境变量：

   复制`.env.example`文件为`.env`，并填写你的API密钥和端点信息：

```bash
cp .env.example .env
# 然后编辑.env文件添加你的API密钥
```

或直接创建`.env`文件：

```
# API 配置
API_KEY=your_api_key_here
API_URL=your_api_endpoint_here
MODEL_ID=your_model_id_here

# 应用程序配置
FLASK_APP=app.py
FLASK_ENV=development
DEBUG=True
```

4. 创建上传目录：

```bash
mkdir -p uploads
```

5. 运行应用：

```bash
python app.py
```

6. 在浏览器中访问：http://127.0.0.1:5000/

## 使用方法

1. 在底部输入框中输入消息（可使用回车键换行）
2. 点击图片图标可以上传图片与AI交互
3. 点击"发送"按钮提交消息
4. 系统会通过流式传输显示AI的回复，支持Markdown格式渲染
5. 点击界面底部的"查看更多使用说明"链接获取详细帮助
6. 点击垃圾桶图标可以清除对话历史

## Markdown功能

AI回复支持以下Markdown格式：

- 标题：使用 # 到 ###### 表示不同级别的标题
- 列表：有序列表使用数字和点，无序列表使用 - 或 *
- 粗体和斜体：**粗体**，*斜体*
- 代码：行内代码使用反引号，代码块使用三个反引号包围并支持语法高亮
- 链接：[链接文本](URL)
- 引用：使用 > 开始一行
- 表格：使用 | 分隔列，使用 ---- 分隔表头和内容

## 文件上传功能

支持上传以下类型的图片：

- jpg, jpeg, png, gif, svg, webp

上传的图片将发送给多模态模型进行处理，使AI能够理解图像内容并提供相关回复。

## 自定义和配置

### API配置

默认情况下，应用会使用.env文件中的API配置。你可以通过修改以下环境变量来配置API：

- `API_KEY`：你的API密钥
- `API_URL`：API端点URL
- `MODEL_ID`：使用的模型ID

### 界面定制

如果你想自定义界面样式，可以修改以下文件：

- `static/css/style.css`：自定义样式
- `templates/index.html`：界面布局
- `static/js/script.js`：交互逻辑

## 注意事项

- 需要有效的API密钥才能连接大模型
- 确保API端点支持流式传输功能
- 应用包含错误处理和后备模拟聊天功能，以提高健壮性
- 上传的图片存储在本地`uploads`目录，生产环境中应考虑使用云存储
- 本应用仅用于开发和学习目的，请勿在生产环境使用，除非进行适当的安全加固