为 Google Gemini API 设计全能模型聊天应用 All Model Chat 安装使用指南

All Model Chat 是一款专为 Google Gemini API 设计的强大网页聊天应用，能与 Gemini 家族模型（包括文本、图像、视频生成及文本转语音）无缝融合，用户能动态切换模型、自由选择流式或非流式响应，进行高级 AI 配置，如调整随机性参数、设置系统提示、查看模型思考过程、实现语音输入转录及文本转语音输出。具备卓越的多模态输入处理能力，支持用户通过拖放、粘贴、拍照、录音等多种灵活方式上传图像、视频、音频和多种文档格式，提供智能的文件管理和实时预览。通过浏览器本地存储实现聊天历史的持久化管理，用户可便捷地浏览、加载、删除过往对话，并能创建、导入及导出预设场景以快速定制会话环境。全面支持 GitHub Flavored Markdown 和 LaTeX 数学公式，提供交互式代码块，具备语法高亮、一键复制、下载以及 HTML/SVG 内容的实时预览等特性。提供了亮暗主题切换、个性化字体和语言设置、响应式布局、性能指标显示（如响应时间与Token使用）、丰富的键盘快捷键，通过 Service Worker 实现了离线访问支持，整体构建在 React 19 和 TypeScript 技术栈上。

All Model Chat核心AI能力

• 支持多种模型：原生支持Gemini文本模型（gemini-2.5-pro、gemini-2.5-flash）、图像生成模型（imagen-3.0）、视频生成模型（veo-2.0）以及文本转语音（TTS）模型。

• 动态模型选择：在应用头部或设置中能轻松切换所有可用的Gemini模型。

• 流式与非流式响应：能在实时流式接收AI响应或一次性接收完整消息之间自由切换。

• 高级AI配置：

• 调整Temperature（随机性）和Top-P（多样性）参数。

• 为任意对话配置专属的系统提示（System Prompt），引导AI的行为和角色。

• “显示思考过程”：查看模型（如Gemini 2.5 Flash）生成回答时的中间思考步骤，还能配置思考预算。

• 语音输入转录：使用Gemini模型直接在聊天框中转录语音输入，能为其单独选择模型。

• 文本转语音（TTS）：将模型的文本回答通过多种内置语音朗读出来。

• Canvas助手：一键加载预设的系统提示，指导模型生成丰富、可交互的HTML/SVG可视化输出。

多模态输入与文件处理

• 支持多种文件：上传文件后，AI能一起“阅读”，包括：

• 图像：JPEG、PNG、WEBP、GIF、HEIC、HEIF

• 视频：MP4、WebM、MOV、MPEG、OGG、AVI、MKV、FLV

• 音频：MP3、WAV、AAC、OGG、WEBM、FLAC、MP4

• 文档：PDF、HTML、TXT、JS、CSS、JSON、XML、MD

• 上传方式灵活：

• 拖放上传：将文件直接拖入应用窗口。

• 粘贴上传：从剪贴板粘贴文件。

• 文件选择器：用传统方式从设备上传。

• 拍照上传：直接使用设备摄像头拍照。

• 录音上传：使用麦克风录制音频。

• 创建文本文件：即时编辑并创建文本文件作为输入。

• 按文件ID添加：通过Gemini API的files/..、ID引用已上传的文件。

• 智能文件管理：

• 实时显示上传与处理进度条。

• 可以取消正在进行的上传任务。

• 有清晰的错误处理机制。

• 支持缩放和平移的交互式图片预览。

• 能一键复制成功上传文件的fileApiName。

聊天历史和场景管理

• 聊天历史持久化：所有对话会自动保存到浏览器的本地存储（localStorage）中。

• 历史侧边栏：方便浏览、加载和删除过去的对话。会话会根据首条消息自动生成标题。

• 预加载场景：创建、保存和加载预设的对话模板，快速设置特定聊天背景。

• 导入/导出场景：以JSON文件格式分享或备份场景。内置一个“解放者”场景供体验。

消息渲染和内容管理

• 完全控制消息：

• 编辑已发送的用户消息（编辑后会从该点重新发起请求）。

• 删除对话中的任意消息。

• 重试失败或不满意的模型响应。

• 将模型回答导出为高清PNG图片或独立的HTML文件。

• 丰富的Markdown渲染：

• 全面支持GFM（GitHub Flavored Markdown），包括表格、列表等。

• 通过KaTeX完美渲染LaTeX数学公式。

• 交互式代码块：

• 通过highlight.js支持数十种语言的语法高亮。

• 一键复制按钮。

• 下载代码片段为文件（例如.js、.py）。

• 在模态框或浏览器全屏中实时预览HTML/SVG。

• 长代码块可以折叠，保持界面清爽。

UI/UX与个性化

• 主题切换：内置精美的亮色与暗色主题。

• 个性化设置：调整基础字号适应阅读习惯，选择显示语言（中文/英文/跟随系统）。

• 响应式设计：在桌面、平板和手机上都有完美的显示效果。

• 性能指标：显示AI响应时间及Token使用量（输入、输出、累计）。

• 键盘快捷键：

• Ctrl/Cmd + Alt + N：开始新聊天。

• Delete：清空当前聊天（当输入框为空时）。

• Tab：循环切换固定的核心模型。

• 离线支持：通过Service Worker缓存应用核心文件，即使离线也能访问UI和历史数据。

技术栈

• 前端框架：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、marked

• 图片导出：html2canvas

• 模块加载：ES Modules & Import Maps（via esm.sh）

• 图标库：Lucide React

All Model Chat安装配置

安装环境要求

• 现代浏览器（如Chrome、Firefox、Edge、Safari）。

• Google Gemini API密钥。可以从Google AI Studio获取。

配置指南（推荐）

应用设计为开箱即用，推荐直接在应用内配置API密钥。

1、打开应用：在浏览器中启动应用。

2、进入设置：点击右上角的齿轮图标（⚙️）打开设置面板。

3、启用自定义配置：在“API配置”部分，打开“使用自定义API配置”的开关。

4、输入密钥：将Google Gemini API密钥粘贴到输入框中。可以输入多个密钥（每行一个），应用会在每次新会话时随机选择一个使用。

5、保存设置：点击“保存”按钮。密钥会安全地存储在浏览器的localStorage中，仅供本应用在本机访问。

本地开发（可选）

如果想在本地开发或修改： 1、克隆仓库：

git clone https://github.com/yeahhe365/All-Model-Chat.git
cd All-Model-Chat

2、安装依赖：

npm install

3、配置API密钥：在项目根目录创建一个.env文件，添加密钥：

VITE_API_KEY="YOUR_GEMINI_API_KEY"

注意：Vite配置会将VITE_API_KEY暴露为process.env.API_KEY。如果同时在应用内设置了密钥，应用内设置的优先级更高。

4、启动开发服务器：

npm run dev

5、在浏览器中打开 http://localhost:5173（或命令行提示的地址）。