一个支持多模态输入（文本、图片、视频）的大模型对话网站，用于稳定使用 Gemini 3.0 Pro 和 Gemini 3.0 Flash 模型。

在项目根目录下运行：

./start.sh

./stop.sh

或在启动终端按 Ctrl+C

• 前端界面: http://localhost:5173
• 后端 API: http://localhost:8000
• API 文档: http://localhost:8000/docs

💡 提示: 首次运行会自动安装所有依赖，需要几分钟时间。详细的启动说明请查看 STARTUP_GUIDE.md

• ✅ 多模态输入支持：同时支持文本、图片和视频输入
• ✅ 流式响应：使用 SSE (Server-Sent Events) 实现实时响应显示
• ✅ Think 过程展示：显示模型的思考过程，可折叠查看
• ✅ Markdown 渲染：支持完整的 Markdown 语法和代码高亮
• ✅ 一键复制：快速复制模型回复内容
• ✅ 对话管理：创建、查看、删除多个对话
• ✅ 清除上下文：一键清空当前对话历史
• ✅ 文件上传：支持多个文件同时上传
• ✅ 对话历史：自动保存所有对话记录
• ✅ 多模型支持：支持 Gemini 3.0/2.5 Pro 和 Flash（共 4 个模型）
• ✅ 参数控制：实时调整 Temperature、Top_P、Top_K
• ✅ System Prompt：自定义系统提示词
• ✅ Think 开关：可控制是否显示思考过程
• ✅ 双对话流：支持同一模型使用两个不同的 System Prompt 并行运行，并排对比结果

• FastAPI：现代、快速的 Web 框架
• SQLAlchemy：ORM 数据库操作
• SQLite：轻量级数据库
• OpenAI SDK：调用 LLM API
• SSE-Starlette：服务端事件流

• React 18：现代化 UI 框架
• Vite：快速的构建工具
• TailwindCSS：实用优先的 CSS 框架
• Axios：HTTP 客户端

gemini-multimodal-chat/
├── backend/                    # FastAPI 后端
│   ├── app/
│   │   ├── main.py            # 应用入口
│   │   ├── config.py          # 配置管理
│   │   ├── database.py        # 数据库连接
│   │   ├── models/            # 数据模型
│   │   ├── schemas/           # Pydantic 模型
│   │   ├── api/               # API 路由
│   │   └── services/          # 业务逻辑
│   ├── uploads/               # 文件存储
│   ├── requirements.txt       # Python 依赖
│   └── .env                   # 环境变量
│
└── frontend/                   # React 前端
    ├── src/
    │   ├── main.jsx
    │   ├── App.jsx
    │   ├── api/               # API 调用
    │   ├── components/        # React 组件
    │   └── hooks/             # 自定义 Hooks
    └── package.json           # Node 依赖

• Python 3.8+
• Node.js 16+
• npm 或 yarn

1. 进入后端目录：

cd backend

2. 创建虚拟环境（推荐）：

python -m venv venv
source venv/bin/activate  # Linux/Mac
# 或
venv\Scripts\activate  # Windows

3. 安装依赖：

pip install -r requirements.txt

4. 配置环境变量：

# .env 文件已经配置好了，如需修改请编辑 backend/.env
# 主要配置项：
# LLM_API_KEY: B站 llmapi 的 API Key
# LLM_BASE_URL: API 基础 URL

5. 启动后端服务：

cd app
uvicorn main:app --reload --host 0.0.0.0 --port 8000

后端将运行在 http://localhost:8000

API 文档：http://localhost:8000/docs

1. 打开新终端，进入前端目录：

cd frontend

2. 安装依赖：

npm install

3. 启动开发服务器：

npm run dev

前端将运行在 http://localhost:5173

1. 点击左侧边栏的 "New Chat" 按钮
2. 输入对话标题
3. 选择模型（Gemini 3.0 Pro 或 Flash）
4. 点击 "Create"

纯文本消息：

1. 在输入框输入文本
2. 点击 "Send" 或按 Enter 键

多模态消息（文本 + 图片/视频）：

1. 点击 "Choose Files" 选择文件
2. 点击 "Upload" 上传文件
3. 在输入框输入文本（可选）
4. 点击 "Send" 发送

支持的文件格式：

• 图片：JPEG, PNG, GIF, WebP（最大 10MB）
• 视频：MP4, MPEG, QuickTime（最大 100MB）

• 切换对话：点击左侧边栏的对话项
• 删除对话：悬停在对话项上，点击 "×" 按钮

1. 在对话界面点击 "Model Parameters" 展开参数面板
2. 使用滑块调整以下参数：
   • Temperature (0.0-2.0)：控制随机性，值越低越确定，越高越创造
   • Top P (0.0-1.0)：核采样，控制词汇多样性
   • Top K (1-100)：限制候选词数量
3. 参数实时保存，立即生效于后续对话

推荐设置：

• 代码生成：Temperature 0.3-0.7, Top P 0.8, Top K 30
• 创意写作：Temperature 1.2-1.8, Top P 0.95, Top K 80
• 日常对话：Temperature 0.8-1.2, Top P 0.9, Top K 40

双对话流功能允许同时运行两个并行的对话，每个使用不同的 System Prompt，方便对比不同的回答风格和内容。

1. 在参数面板中启用 "🔀 Enable Dual Stream Mode"
2. 设置两个不同的 System Prompt：
   • System Prompt 1: 例如 "你是一个详细的技术专家"
   • System Prompt 2: 例如 "你是一个简洁的助手"
3. 发送消息后，两个流的回复会并排显示

使用场景：

• 对比不同的回答风格（正式 vs 随意）
• 对比详细 vs 简洁的解释
• 对比不同角色的观点
• 对比不同语言的表达

详细说明请查看 DUAL_STREAM_GUIDE.md

• POST /api/conversations - 创建新对话
• GET /api/conversations - 获取对话列表
• GET /api/conversations/{id} - 获取对话详情
• DELETE /api/conversations/{id} - 删除对话

• GET /api/conversations/{id}/messages - 获取对话消息
• POST /api/conversations/{id}/messages/stream - 发送消息（SSE 流式）

• POST /api/files/upload - 上传文件
• GET /api/files/{id} - 获取文件信息

• GET /api/models - 获取可用模型列表

# LLM API 配置
LLM_API_KEY=your_api_key_here
LLM_BASE_URL=http://llmapi.bilibili.co/v1

# 数据库配置
DATABASE_URL=sqlite+aiosqlite:///./chat.db

# 文件上传配置
UPLOAD_DIR=./uploads
MAX_IMAGE_SIZE=10485760      # 10MB
MAX_VIDEO_SIZE=104857600     # 100MB
ALLOWED_IMAGE_TYPES=image/jpeg,image/png,image/gif,image/webp
ALLOWED_VIDEO_TYPES=video/mp4,video/mpeg,video/quicktime

如需修改后端 API 地址，创建 frontend/.env 文件：

VITE_API_BASE_URL=http://localhost:8000

在 backend/app/config.py 中修改 AVAILABLE_MODELS 列表：

AVAILABLE_MODELS: List[str] = [
    "gemini-3.0-pro",
    "gemini-3.0-flash",
    "your-new-model"  # 添加新模型
]

在 backend/.env 中修改：

MAX_IMAGE_SIZE=20971520  # 20MB
MAX_VIDEO_SIZE=209715200 # 200MB

确保：

• Python 版本 3.8+
• 已安装所有依赖
• .env 文件配置正确

检查：

• 文件大小是否超过限制
• 文件格式是否支持
• uploads 目录是否有写权限

确保：

• 浏览器支持 EventSource API
• 网络连接稳定
• 后端服务正常运行

如果前端域名不同，在 backend/app/config.py 中添加：

CORS_ORIGINS: List[str] = [
    "http://localhost:5173",
    "your-frontend-url"  # 添加你的前端 URL
]

1. 使用生产级 ASGI 服务器：

pip install gunicorn
gunicorn app.main:app -w 4 -k uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000

2. 考虑使用 PostgreSQL 替代 SQLite：

DATABASE_URL=postgresql+asyncpg://user:password@localhost/dbname

1. 构建生产版本：

npm run build

2. 部署 dist 目录到静态文件服务器（Nginx, Vercel, Netlify 等）

MIT License

欢迎提交 Issue 和 Pull Request！

如有问题，请提交 Issue 或联系开发团队。