All Model Chat 是一款功能强大、支持多模态输入的聊天机器人界面，旨在提供与 Google Gemini API 家族无缝交互的极致体验。它集成了动态模型选择、多模态文件输入、流式响应、全面的聊天历史管理以及广泛的自定义选项，为您带来无与伦比的 AI 互动体验。
- 🤖 广泛的模型支持: 原生支持 Gemini 系列 (
2.5 Pro,Flash)、Imagen 系列 (3,4) 图像生成模型以及文本转语音 (TTS) 模型。这是一个真正意义上的多模态AI应用平台。 - ⚙️ 高级AI参数控制: 精确调整
Temperature和Top-P参数，以控制AI回复的创造性与确定性。您还可以为任意对话设置自定义的系统指令 (System Prompt)，从而塑造AI的性格和行为模式。 - 🤔 展示“思考过程”: 洞察模型（如 Gemini Flash）在生成回答前的中间思考步骤。此功能非常适合用于调试和理解AI的推理过程，您甚至可以配置“思考预算”来平衡质量与速度。
- 🎙️ 语音转文本 (STT): 使用强大的 Gemini 模型将您的语音实时转录为文字输入，准确率远超浏览器标准API。您甚至可以在设置中选择不同的 Gemini 模型用于转录。
- 🔊 文本转语音 (TTS): 将模型的文本回答一键转换为流畅的语音，并提供多种高质量音色供您选择，实现“听”AI的功能。
- 🌐 Google 搜索增强: 让模型能够联网搜索最新信息，以回答有关时事、新闻或其训练数据范围之外的主题。所有联网回答都会附带引用来源，方便您核实信息。
- 🎨 画布助手 (Canvas Assistant): 一个特别设计的系统指令，能将AI变为一名前端开发助手，生成丰富、可交互的 HTML/SVG 网页内容，例如使用 ECharts 创建图表、使用 Graphviz 生成流程图等。
- 📎 丰富的文件支持: 轻松上传和处理多种文件类型，包括图片、音频、PDF文档以及各类代码和文本文件。
- 🖐️ 多样化的上传方式: 提供了极致便利的文件上传体验，支持拖拽、从剪贴板粘贴、使用文件选择器，甚至可以直接调用摄像头拍照或使用麦克风录音。
- ✍️ 即时创建文本文件: 无需离开应用，即可在应用内快速创建和编辑文本文件，并将其作为上下文提交给模型。
- 🆔 通过文件ID引用: 对于高级用户，您可以直接引用已上传到 Gemini API 的文件（使用其
files/...ID），无需重复上传，节省时间和带宽。 - 🖼️ 交互式预览: 在应用内直接缩放和平移您上传的图片，或在交互式模态框中预览AI生成的HTML代码，甚至可以进入真正的全屏模式。
- 📊 智能文件管理: 提供实时上传进度条、进行中的上传可随时取消，并有清晰的错误处理提示，确保文件处理过程始终在您的掌控之中。
- 📚 持久化聊天历史: 所有对话都会自动保存在您的浏览器本地存储 (
localStorage) 中，确保了数据隐私，并允许您随时回顾过往的交流。 - 🎭 场景管理: 创建、保存、导入和导出“聊天模板”。这使得您可以快速设定复杂的对话背景（如编程问题、角色扮演），极大提升了沟通效率。
- ✏️ 完全的消息控制: 您可以编辑、删除或重试任何一条消息。智能编辑功能（编辑用户提示）会自动从该点截断并重新提交对话，从而正确地维持上下文。
- 🖼️ 导出消息: 将模型的精彩回答保存为高质量的PNG图片（便于分享）或一个包含所有格式的独立HTML文件。
- ⌨️ 键盘快捷键: 专为效率爱好者设计，提供新建对话、切换模型、打开日志等多种快捷键，让操作行云流水。
- 🛠️ 日志查看器与调试工具: 内置的日志查看器让高级用户可以洞察应用的内部行为、API调用详情以及API密钥的使用情况（当提供多个密钥时）。
本应用旨在浏览器中直接使用，无需任何安装配置。
- 打开应用: 访问 all-model-chat.pages.dev。
- 打开设置: 点击右上角的齿轮图标 (⚙️)。
- 启用自定义配置: 在“API 配置”部分，打开“使用自定义 API 配置”的开关。
- 输入您的 API 密钥: 将您的 Google Gemini API 密钥粘贴到文本框中。您可以从 Google AI Studio 获取密钥。支持每行输入一个，以使用多个密钥。
- 保存并开始聊天: 点击“保存”。您的密钥将安全地存储在您浏览器的
localStorage中，绝不会发送到任何其他地方。
如果您希望在本地运行此应用以进行开发：
-
克隆仓库:
git clone https://github.com/yeahhe365/All-Model-Chat.git cd All-Model-Chat -
安装依赖:
npm install
-
配置 API 密钥: 在项目根目录创建一个
.env文件，并添加您的密钥：VITE_API_KEY="YOUR_GEMINI_API_KEY"注意: 应用会优先使用在UI设置中输入的密钥，而不是
.env文件中的。 -
运行开发服务器:
npm run dev
在浏览器中打开
http://localhost:5173(或终端中显示的地址)。
- 框架: React 19 & TypeScript
- AI SDK:
@google/genai - 样式: Tailwind CSS (通过 CDN) & CSS 变量（用于主题化）
- Markdown 与渲染:
react-markdown,remark-gfm,remark-math,rehype-highlight,rehype-katex,highlight.js,DOMPurify - 图片导出:
html2canvas - 模块加载: 现代 ES 模块 & Import Maps (通过
esm.sh) - 图标: Lucide React
- 离线支持: Service Worker (
sw.js) 用于缓存应用外壳
All-Model-Chat/
├── public/ # 静态资源 (图标, manifest.json, sw.js)
├── src/
│ ├── components/ # React UI 组件 (头部, 聊天输入, 模态框等)
│ │ ├── chat/ # 聊天输入子组件 (文件预览, 摄像头捕获)
│ │ ├── message/ # 消息渲染子组件 (代码块, 搜索增强响应)
│ │ └── settings/ # 设置面板模块 (API配置, 外观)
│ ├── constants/ # 应用全局常量 (app, 主题, 文件, 指令默认值)
│ ├── hooks/ # ✨ 应用核心逻辑所在地
│ │ ├── useChat.ts # 组织所有功能的主 Hook
│ │ ├── useAppSettings.ts # 管理全局设置、主题和语言
│ │ ├── useChatHistory.ts # 处理聊天会话的加载与保存
│ │ ├── useFileHandling.ts# 所有文件上传和拖拽的逻辑
│ │ └── useMessageHandler.ts# 封装发送消息和相关操作 (编辑, 删除)
│ ├── services/ # 外部服务封装
│ │ ├── geminiService.ts# 封装所有对 Google GenAI API 的调用
│ │ └── logService.ts # 为日志查看器提供应用内日志服务
│ ├── utils/ # 工具函数 (翻译, 格式化等)
│ ├── App.tsx # 应用根组件
│ ├── index.tsx # React 应用入口文件
│ └── types.ts # 核心 TypeScript 类型定义
│
├── index.html # 主 HTML 文件，包含 import maps
└── ... (其他配置文件: vite.config.ts, tsconfig.json 等)
欢迎各种形式的贡献！如果您有任何改进建议或发现了错误，请随时提交 Issue 或 Pull Request。
- Fork 本项目。
- 创建您的功能分支 (
git checkout -b feature/AmazingFeature)。 - 提交您的更改 (
git commit -m 'Add some AmazingFeature')。 - 将分支推送到远程 (
git push origin feature/AmazingFeature)。 - 开启一个 Pull Request。
本项目基于 MIT 许可证。详情请见 LICENSE 文件。