Home
Softono
y

yeahhe365

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Total Products
4

Software by yeahhe365

AMC-WebUI
Open Source

AMC-WebUI

# AMC WebUI <p align="center"> <a href="./README.md">中文</a> | <a href="./README.en.md">English</a> </p> <div align="center"> <p> <strong>All-in-one Model Console WebUI,以 Gemini 原生能力为主,同时支持 OpenAI 兼容标准聊天 API</strong> </p> <p> <a href="https://all-model-chat.pages.dev/" target="_blank"> <img src="https://img.shields.io/badge/在线演示-Live_Demo-6366f1?style=for-the-badge&logo=cloudflare&logoColor=white" alt="Online Demo"> </a> <a href="https://github.com/yeahhe365/AMC-WebUI/actions/workflows/ci.yml" target="_blank"> <img src="https://img.shields.io/github/actions/workflow/status/yeahhe365/AMC-WebUI/ci.yml?branch=main&style=for-the-badge&label=CI" alt="CI"> </a> <a href="https://github.com/yeahhe365/AMC-WebUI/releases" target="_blank"> <img src="https://img.shields.io/github/v/release/yeahhe365/AMC-WebUI?style=for-the-badge&color=3b82f6" alt="Release"> </a> <img src="https://img.shields.io/badge/许可证-MIT-green?style=for-the-badge" alt="License"> </p> <p> <img src="https://img.shields.io/badge/React-18-61DAFB?style=flat-square&logo=react&logoColor=black" alt="React"> <img src="https://img.shields.io/badge/TypeScript-5.5-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript"> <img src="https://img.shields.io/badge/Tailwind-4.2-38BDF8?style=flat-square&logo=tailwind-css&logoColor=white" alt="Tailwind"> <img src="https://img.shields.io/badge/Gemini_SDK-1.50%2B-8E75B2?style=flat-square&logo=google&logoColor=white" alt="Gemini SDK"> <img src="https://img.shields.io/badge/PWA-Supported-5A0FC8?style=flat-square&logo=pwa&logoColor=white" alt="PWA"> </p> </div> --- ## 界面预览 <p align="center"> <img src="./docs/screenshots/app-desktop-20260426.png" alt="AMC WebUI 桌面端界面预览" width="100%"> </p> ## 项目简介 **AMC WebUI** 是一款基于 React 18 的 All-in-one Model Console WebUI,主打 Google Gemini 原生能力,并提供额外的 **OpenAI 兼容标准聊天模式**。项目坚持 **Local-First** 原则:聊天数据默认存储于浏览器 IndexedDB,在保障隐私的同时提供流畅体验;同时支持独立后端部署模式,用于服务端托管 Gemini 密钥与代理请求。 当前仓库围绕 **Vite + React SPA** 作为唯一主线构建形态: - **标准模式**:本地通过 Vite 开发 / 构建,适合日常开发与静态部署 - **Docker 部署模式**:`web + api` 双服务部署,普通 Gemini 请求走 `/api/gemini/*`,Live API 由浏览器使用本地 key 直连 - **静态前端 + 独立 API 模式**:前端部署到 Pages/CDN,后端单独托管 Node API 服务 ## API 模式说明 ### Gemini 原生模式 - 项目的主能力路径,适用于 Thinking、Live API、Gemini Files API、Deep Search、Google Search、代码执行、图片生成等 Gemini 专属能力 - 可结合 AMC 自带的 Gemini 代理与服务端托管密钥能力使用 ### OpenAI 兼容模式 - 面向 **标准聊天** 的兼容路径,使用独立的 API Key、Base URL 和模型列表 - 请求会发送到 `POST {Base URL}/chat/completions`,适用于 OpenAI 官方接口、Gemini 的 OpenAI 兼容端点,或其他兼容 `chat/completions` 的服务 - 支持普通响应与流式响应,并保留系统提示词、`temperature`、`top_p` 等通用聊天参数 ### 需要注意 - OpenAI 兼容模式 **不会覆盖** Gemini 原生配置;两套 Key 分开保存,模型列表也独立维护 - OpenAI 兼容模式当前 **不走 Gemini 原生工具链**;README 中提到的 Gemini 专属能力,仍以 Gemini 原生模式为准 - OpenAI 兼容 Base URL 应填写到接口根路径,例如 `https://api.openai.com/v1`;应用会自动补上 `/chat/completions` --- ## 核心功能 ### 深度推理 (Thinking) - 支持 Gemini 3.0 / 3.1 / 2.5 系列模型的思维链可视化 - 可设置 **Token 预算** 或 **推理等级** (Minimal / Low / Medium / High) - 实时查看 AI 的逻辑演算过程 ### 实时音视频 (Live API) - 双向实时流式交互,支持语音通话 - 屏幕共享与视觉识别 - 音频可视化 (AudioWorklet API) ### Live Artifacts - 代码块自动识别并渲染为交互式 HTML 预览(自动全屏) - 支持安全内联 HTML / SVG、表单控件与 follow-up 交互 - 支持 Mermaid 流程图与 Graphviz 图渲染 - 自动 Live Artifacts 生成模式(可配置触发模型、提示词版本与自定义提示词) ### 高级文件处理 - 浏览器端音频预处理与压缩流程,尽量降低音频上传的 Token 与带宽消耗 - 支持 ZIP / 文件夹拖入,自动解析代码库结构 - 支持图片、PDF、视频、音频、文本等多种文件类型 - 可配置各文件类型使用 Gemini Files API 还是直接 Base64 上传 - 输入细节等级可调(未指定 / Low / Medium / High;图片单文件可选 Ultra High) ### 生产力工具链 - **深度搜索**:聚合 Google Search,自动规划搜索任务并提供精准引用 - **URL 上下文**:自动抓取 URL 内容作为对话上下文 - **本地 Python 沙箱**:基于 Pyodide (WASM) 的浏览器端 Python 运行环境 - 预加载 numpy、pandas、matplotlib - 自动检测代码依赖,并在需要时按需安装 scipy、scikit-learn 等包 - 支持文件挂载与生成文件下载 - matplotlib 图表自动捕获输出 - **TTS 语音合成**:30 种语音可选 - **语音转录**:支持多种 Gemini 模型进行语音转文字 - **Imagen 4.0 图片生成**:支持 Fast / Standard / Ultra 三档,可配置宽高比与尺寸 ### 企业级 API 管理 - **双 API 模式**:支持在 Gemini 原生 与 OpenAI 兼容 两条请求路径之间切换 - **多 Key 轮询**:Gemini 原生 Key 与 OpenAI 兼容 Key 均支持多 Key 轮询 - **配置隔离**:OpenAI 兼容模式使用独立 Key、独立 Base URL、独立模型列表,不会污染 Gemini 设置 - **Gemini API 代理**:Gemini 原生模式支持通过 SDK 原生 `baseUrl` 配置接入自定义 Gemini API 代理 ### 多语言界面 - 支持中文 / 英文 / 跟随系统三种语言设置 - 覆盖所有 UI 组件(聊天、设置、侧边栏、快捷键等) ### PWA 支持 - 提供完整 Web App Manifest、Service Worker 与安装/更新提示 - 可安装为桌面/移动端应用,并支持离线打开应用 Shell - 运行时接口请求保持网络优先,模型响应与远端 API 能力仍需联网 - 支持画中画 (Picture-in-Picture) 模式 ### 日志价格统计 - 日志与用量页采用“严格精确”模式:只有在已存储字段足以精确还原官方费用时才显示价格 - 新生成的聊天、TTS、转写与部分图片生成请求会记录更完整的计费元数据 - 纯文本聊天请求会在本地补齐 `TEXT -> TEXT` 模态证据,因此纯文本 `gemini-3.1-pro-preview`、`gemini-3-flash-preview` 与 `gemini-3.1-flash-lite` 对话可显示价格 - 历史记录或缺少精确定价字段的请求会继续显示 `—` ### 多标签同步 - 基于 BroadcastChannel 的跨标签页同步,并通过 Web Locks API 保护 IndexedDB 写入 - 确保多标签页同时操作时数据一致性 ### 自定义快捷键 - 内置快捷键系统,支持新建聊天、打开日志、切换模型、画中画等操作 - 所有快捷键均可自定义覆盖 ### 安全设置 - 5 个安全过滤类别:骚扰、仇恨言论、色情内容、危险内容、公民诚信 - 每个类别可独立配置过滤级别(关闭 / 不拦截 / 拦截少量 / 拦截部分 / 拦截大部分) ### 主题系统 - 内置 Onyx(暗色)、Pearl(亮色)主题 - 支持跟随系统主题自动切换 ### 数据管理 - 完整的聊天记录导入 / 导出 - 会话分组管理 - 会话搜索(标题 + 内容全文搜索) - 开发者日志面板(API 调用监控、Token 用量统计) --- ## 快速开始 ### 方式一:标准开发模式 本地开发推荐使用 Node.js 26(仓库提供 `.nvmrc`,CI 主流程与 Docker 镜像也使用同一主版本),最低支持 Node.js 24。仓库启用了 `engine-strict`,如果你使用 Node 27+ 或 23 及以下版本,`npm install` 会直接失败;建议先执行 `nvm use` 使用推荐版本。 ```bash # 克隆仓库 git clone https://github.com/yeahhe365/AMC-WebUI.git cd AMC-WebUI # 安装依赖 npm install # 启动开发服务器 npm run dev ``` 如需分析生产包体积,可执行: ```bash npm run build:analyze ``` 命令会生成 `dist/bundle-stats.html`,用于查看主包、懒加载 chunk 与 PWA 预缓存边界。 访问 `http://localhost:5175`,在 **设置 -> API 配置** 中填入你的 Gemini API Key。 除了在界面中手动配置,也可在根目录创建 `.env.local`(仅前端开发模式使用): ```bash GEMINI_API_KEY=your_api_key_here VITE_OPENAI_API_KEY=your_openai_compatible_key_here ``` 如需切换到 OpenAI 兼容模式: 1. 进入 **设置 -> API 配置**,将 API 模式切换为 **OpenAI 兼容** 2. 填写 OpenAI 兼容 API Key,或在 `.env.local` 中预置 `VITE_OPENAI_API_KEY` 3. 填写 OpenAI 兼容 Base URL,例如 `https://api.openai.com/v1` 4. 进入 **设置 -> 模型**,选择或编辑该模式下独立维护的模型列表 示例 Base URL: - OpenAI 官方:`https://api.openai.com/v1` - Gemini OpenAI 兼容端点:`https://generativelanguage.googleapis.com/v1beta/openai` - 其他兼容服务:填写其 `chat/completions` 所属的 `/v1` 或等价根路径 ### 方式二:Docker Compose(自用推荐) 项目包含双容器部署: - `web`:Nginx 托管前端静态资源,并反向代理 `/api/*` 到 `api` 服务 - `api`:Node 服务,提供 `/api/gemini/*` 代理 运行方式: ```bash # 在仓库根目录 npm run build:docker docker compose up -d --build ``` 默认访问 `http://localhost:8080`。如需关闭后台运行可执行 `docker compose down`。 说明: - Docker 默认是 BYOK 自用模式:启动后在 **设置 -> API 配置** 填入 Gemini API Key 即可使用普通聊天与 Live API,不需要在 `.env` 或 `docker-compose.yml` 里配置 `GEMINI_API_KEY`。 - `web` 镜像默认直接打包宿主机已生成的 `dist/`,不再在容器内执行前端生产构建。 - 修改前端或后端 API 代码后,请先重新执行 `npm run build:docker`,再执行 `docker compose up -d --build`。 > ⚠️ 安全边界说明 > 当前 `web + api` 代理方案定位为 **受信任/自托管环境**(trusted self-hosted deployment)。 > 默认 BYOK 模式会使用浏览器设置里的 API Key 发起请求;它**本身并不足以**作为公开互联网下“无鉴权多用户 API 网关”。 > 若要对公网开放,请额外引入鉴权、配额/限流、滥用防护、审计与租户隔离等能力。 ### 运行时配置与环境变量 部署时请区分两类配置: | 变量名 | 用途 | 公开性 | Docker 默认值 | | :------------------------------ | :------------------------------------------------------------ | :----------------- | :------------------------------------------ | | `GEMINI_API_KEY` | 可选的服务端托管 Gemini API Key(配置后优先于浏览器设置 key) | **仅服务端** | 空 | | `PORT` | `api` 服务监听端口 | 仅服务端 | `3001` | | `GEMINI_API_BASE` | Gemini 上游地址(代理目标) | 仅服务端 | `https://generativelanguage.googleapis.com` | | `ALLOWED_ORIGINS` | 逗号分隔 CORS 白名单(跨域部署时使用) | 仅服务端 | 空 | | `ENABLE_MCP_STDIO` | 启用 `stdio` MCP 服务调用能力 | 仅服务端 | `false` | | `ENABLE_MCP_PRIVATE_HTTP` | 允许 API 服务访问内网/本机 HTTP MCP 地址 | 仅服务端 | `false` | | `RUNTIME_SERVER_MANAGED_API` | 前端默认启用服务端托管 API | **公开运行时配置** | `false` | | `RUNTIME_USE_CUSTOM_API_CONFIG` | 前端默认启用“自定义 API 配置” | 公开运行时配置 | `true` | | `RUNTIME_USE_API_PROXY` | 前端默认启用 API 代理 | 公开运行时配置 | `true` | | `RUNTIME_API_PROXY_URL` | 前端默认 Gemini 代理地址 | 公开运行时配置 | `/api/gemini` | | `RUNTIME_PYODIDE_BASE_URL` | 可选 Pyodide 运行时资源地址;留空时使用同源 `/pyodide/` | 公开运行时配置 | 空 | 说明: - 上述 `RUNTIME_*` 会在容器启动时写入 `runtime-config.js`,可被浏览器读取,因此只能放“可公开”信息。 - public/runtime-config.js 模板用于纯静态构建,默认不启用自定义 API 配置或代理;Docker 部署会由 `docker/web-entrypoint.sh` 按上表默认值覆盖该文件。 - Pyodide 产物会在生产构建时复制到 `dist/pyodide/`,运行时默认从同源 `/pyodide/` 加载;如需改用 CDN 或独立静态域,可将 `RUNTIME_PYODIDE_BASE_URL` 设置为完整目录 URL,例如 `https://cdn.jsdelivr.net/pyodide/v0.25.1/full/`。 - PWA 预缓存默认排除 `pyodide/` 大体积产物,首次执行本地 Python 时仍会按上述地址按需加载。 - 默认 BYOK 模式只需要在设置界面填写 API Key:普通 Gemini 代理会使用浏览器请求携带的 key;Live API 会使用浏览器本地 key 直接建立官方 Live WebSocket 连接,不再经过 AMC 后端换取临时 token。 - 如需服务端统一托管普通 Gemini 请求的 key,可配置 `GEMINI_API_KEY` 并将 `RUNTIME_SERVER_MANAGED_API=true`;Live API 仍需要浏览器中可用的 API Key。 - MCP 的 `stdio` 与内网/本机 HTTP 访问默认关闭;仅在可信自托管环境中按需设置 `ENABLE_MCP_STDIO=true` 或 `ENABLE_MCP_PRIVATE_HTTP=true`。 - OpenAI 兼容模式当前不读取 `RUNTIME_API_PROXY_URL`、`RUNTIME_USE_API_PROXY` 或 `RUNTIME_SERVER_MANAGED_API`;它会直接使用设置里的 OpenAI 兼容 Base URL 和独立 Key 发起 `chat/completions` 请求。如需走你自己的网关,请直接把该网关地址填为 OpenAI 兼容 Base URL。 - 浏览器本地 key 适合自用/可信部署。它不会因为“保存在本地”而变成服务器密钥,同一浏览器上下文中的脚本、扩展、XSS 或设备风险仍可能读取它。 - 前端在部署时默认只依赖后端端点:`/api/gemini/*`;Live API 从浏览器直连官方 Live 服务。 ### 方式三:Cloudflare Pages(静态前端)+ 独立 API 服务 可将前端部署在 Cloudflare Pages,同时将 `server/` 独立部署到任意 Node 运行环境(VM、容器平台、Serverless 容器等): 1. 前端(Pages)执行标准构建并发布 `dist`: ```bash npm run build ``` 2. 后端(独立服务)构建并启动: ```bash npm run build:api npm run start:api ``` 3. 在前端运行时配置中将以下值指向后端公开地址(示例): ```text RUNTIME_API_PROXY_URL=https://your-api.example.com/api/gemini ``` 4. 如需服务端统一托管普通 Gemini 请求的密钥,在后端环境设置 `GEMINI_API_KEY`;如果使用 BYOK,可不设置该变量。跨域部署时按需配置 `ALLOWED_ORIGINS=https://your-pages-domain.pages.dev`。Live API 不使用独立 API 服务的 token 端点,而是从浏览器直连。 补充: - `server/` 当前承载的是 Gemini 原生代理链路;OpenAI 兼容模式默认不会经过这个 Node API 服务 - 如果你希望 OpenAI 兼容模式也走自建网关,请把该网关的兼容 Base URL 直接填到前端设置中 #### 可选:使用 AIStudioToAPI 作为 Gemini 兼容后端 如果你希望通过 Google AI Studio 网页端账号提供 API 来源,也可以尝试将 [AIStudioToAPI](https://github.com/iBUHub/AIStudioToAPI) 部署为第三方 Gemini 兼容后端。它提供 Gemini Native API 格式的 `/v1beta/*` 接口,可作为 AMC WebUI 的自定义 API 代理地址。 示例: ```text RUNTIME_API_PROXY_URL=https://your-aistudio-to-api.example.com/v1beta ``` 在界面中也可以进入 **设置 -> API 配置**,启用“自定义 API 配置 / API 代理”,并填入 AIStudioToAPI 的 Gemini 兼容 Base URL(例如 `http://localhost:7860/v1beta`)。AMC WebUI 中填写的 API Key 应与 AIStudioToAPI 部署时配置的 `API_KEYS` 对应。 注意:AIStudioToAPI 属于第三方项目,请自行评估账号登录、鉴权、限流与公网暴露风险;它可替代普通 Gemini API 代理来源。AMC WebUI 的 Live API 当前采用浏览器直连官方 Live 服务,不再依赖 AMC 后端 token 端点。 ### 构建与预览 ```bash npm run build # 构建生产版本 npm run preview # 本地预览构建结果 ``` ### 质量检查 ```bash npm run typecheck npm run lint npm run test npm run knip npm run build npm run build:api # 或者一次性执行 npm run verify ``` 如果只想验证 Gemini Code Execution 相关链路,可以执行: ```bash npm run test:code-execution ``` 这个命令覆盖: - 文本 / CSV / 代码文件的 MIME 与上传策略 - Code Execution 请求构造与多轮历史回放 - 流式 `thoughtSignature` 保留 - Live API 中 `codeExecutionResult.output` 展示 如果你想用真实 `GEMINI_API_KEY` 做一次手动联调检查,也可以执行: ```bash GEMINI_API_KEY=your_key_here npm run verify:code-execution:api ``` 可选环境变量: - `CODE_EXECUTION_MODEL`:覆盖默认模型(默认 `gemini-2.5-flash`) 这个脚本会: - 上传一个临时 CSV 文件,并显式使用 `text/csv` - 发起一次启用 `codeExecution` 的请求 - 检查响应里是否同时出现 `executableCode` 和 `codeExecutionResult` - 复用第一轮完整模型内容发起第二轮追问,验证多轮历史可继续使用 --- ## 技术架构 | 层级 | 技术栈 | | :-------------- | :--------------------------------------------------------------------------------------- | | **核心框架** | React 18 + TypeScript 5.5 + Vite 7 | | **样式方案** | Tailwind CSS 4 + CSS 变量主题系统 | | **持久化层** | 原生 IndexedDB(dbService.ts 封装),支持 Web Locks 跨标签写锁 | | **Gemini SDK** | `@google/genai` 1.50+,含流式 / 非流式消息、文件上传、图片生成、TTS、转录 | | **音频引擎** | AudioWorklet API(实时流处理)+ 浏览器端 Worker 音频预处理 / 压缩流程 | | **渲染引擎** | React-Markdown + KaTeX (公式) + Highlight.js (代码高亮) + Mermaid.js + Graphviz (viz.js) | | **Python 沙箱** | Pyodide (WASM),Web Worker 内执行,预加载常用科学计算库并按需安装扩展包 | | **API 代理** | 基于 `@google/genai` SDK `httpOptions.baseUrl` 的 Gemini API 代理配置 | | **PWA** | Web App Manifest + `beforeinstallprompt` / `appinstalled` 安装事件处理 | | **部署形态** | Vite 标准构建 / Docker Compose(web+api)/ Cloudflare Pages + 独立 API | 生产部署若采用服务端托管普通 Gemini API,前端默认请求后端端点: - `/api/gemini/*` Live API 默认由浏览器使用本地 API Key 直连官方 Live 服务。 --- ## 项目结构 核心前端目录包括 `src/components/`、`src/features/`、`src/hooks/`、`src/services/`、`src/i18n/`、`src/pwa/`、`src/schemas/` 与 `src/test/`。 放置规则: - `src/components/` 只放可渲染 UI 与 UI 专属的小型 view model;跨页面复用的控件放 `components/shared/`。 - `src/features/` 放领域能力的实现边界,例如消息发送、本地 Python、音频处理、标准聊天工具循环。 - `src/hooks/` 放 React 编排层;如果 hook 只是某个领域能力的 React 入口,优先靠近对应领域目录命名。 - `src/services/` 放外部系统与持久化边界,例如 API client、IndexedDB、日志和对象 URL 生命周期。 - `src/utils/` 放无 React 状态的小型跨域工具;涉及 DOM、剪贴板、媒体、导出等浏览器边界时优先使用明确的文件名或子目录。 - `src/test/architecture/` 放结构和风格护栏测试,用来防止历史清理问题回流。 - `src` 内跨目录引用统一使用 `@/` alias,同目录引用保留 `./`。 ``` AMC-WebUI/ ├── src/ # 前端应用源码(Vite SPA) │ ├── components/ # UI 组件(chat / message / layout / settings / modals 等) │ ├── features/ # 本地 Python(src/features/local-python/)、消息发送、场景、音频、标准聊天等业务能力 │ ├── hooks/ # 业务 hooks(app / chat / chat-input / data-management / live-api / ui) │ ├── services/ # API、IndexedDB、日志、对象 URL 等基础设施 │ ├── stores/ # Zustand 状态(chat / settings / ui) │ ├── utils/ # 导出、会话、Markdown、文件处理、媒体等工具 │ ├── i18n/ # 翻译聚合、覆盖率测试与中英文文案 │ ├── pwa/ # Service Worker、PWA 注册与安装状态 │ ├── runtime/ # 运行时配置读取与公开配置映射 │ ├── schemas/ # Zod 配置 schema │ ├── contexts/ # I18n / WindowContext 等上下文 │ ├── constants/ # 模型、提示词、快捷键、主题等常量 │ ├── test/ # 测试工具、fixtures 与架构回归测试 │ ├── types/ # TypeScript 类型定义 │ ├── styles/ # 全局样式、动画、Markdown 样式 │ ├── App.tsx # 应用入口组件 │ └── index.tsx # React 挂载入口 ├── server/ # 独立 Node API(/api/gemini/*) │ ├── src/ │ └── tsconfig.json ├── public/ # 静态资源与 runtime-config.js 模板 ├── e2e/ # Playwright 端到端测试 ├── docs/ # 截图与文档资源 ├── docker/ # 部署辅助脚本 ├── vite.config.ts # Vite 配置(React、静态复制、手工分包) ├── playwright.config.ts # E2E 配置 ├── vitest.config.ts # 单元/集成测试配置 ├── eslint.config.js # ESLint 配置 ├── knip.json # 未使用文件/导出分析配置 ├── package.json # 前端依赖与脚本 └── docker-compose.yml # web + api 双服务部署入口 ``` --- ## Gemini 原生默认模型 OpenAI 兼容模式使用独立模型列表,可在设置中手动维护或从兼容端点拉取;下表列出应用内置的 Gemini 原生默认模型。 | 类型 | 模型 | | :------------- | :--------------------------------------------------------------------------------------------------- | | **Gemini 3.x** | gemini-3-flash-preview, gemini-3.1-flash-live-preview, gemini-3.1-flash-lite, gemini-3.1-pro-preview | | **Robotics** | gemini-robotics-er-1.6-preview | | **Gemma 4** | gemma-4-31b-it, gemma-4-26b-a4b-it | | **Imagen 4.0** | imagen-4.0-fast-generate-001, imagen-4.0-generate-001, imagen-4.0-ultra-generate-001 | | **图片生成** | gemini-2.5-flash-image, gemini-3-pro-image-preview, gemini-3.1-flash-image-preview | | **TTS** | gemini-3.1-flash-tts-preview (30 种语音) | --- ## 参与贡献 我们欢迎任何形式的贡献! 1. **报告问题**:提交 [GitHub Issue](https://github.com/yeahhe365/AMC-WebUI/issues) 2. **代码贡献**:Fork 仓库 -> 创建特性分支 -> 提交 Pull Request 3. **支持作者**:点个 **Star** 或前往 [爱发电](https://afdian.com/a/gemini-nexus) 支持持续开发 --- ## 友链 - [Linux.do](https://linux.do/):也称 L 站,是一个活跃的中文技术社区,围绕 AI、软件开发、资源分享与前沿资讯展开讨论;社区愿景是“新的理想型社区”,社区文化是“真诚、友善、团结、专业,共建你我引以为荣之社区”。 --- <div align="center"> <p>Developed with :heart: by <strong>yeahhe365</strong></p> </div>

AI & Machine Learning LLM Tools & Chat UIs
871 Github Stars
JustSearch
Open Source

JustSearch

# 🚀 JustSearch: 智能 AI 深度搜索助手 <p align="center"> <a href="./README.md">中文</a> | <a href="./README.en.md">English</a> </p> **JustSearch** 是一款基于大语言模型(LLM)和自动化浏览器技术的深度搜索工具。它不仅仅是一个搜索界面,更是一个能够像人类一样"思考、搜索、阅读、总结"的智能代理。它能自动拆解复杂问题,深入网页正文提取关键信息,并生成带有精确引用的详尽答案。 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Python](https://img.shields.io/badge/python-3.10+-blue.svg)](https://www.python.org/) [![Playwright](https://img.shields.io/badge/browser-Playwright-green.svg)](https://playwright.dev/) [![Docker](https://img.shields.io/badge/docker-ready-blue.svg)](https://www.docker.com/) --- ## 💡 为什么选择 JustSearch? 传统的搜索引擎往往只给你一系列链接,而 JustSearch 会: 1. **深度理解**:利用 LLM 拆解您的意图,不只是关键词匹配。 2. **真机阅读**:通过 Playwright 模拟真人打开网页,绕过简单的反爬,获取正文。 3. **事实核查**:在生成答案时强制要求标注引用,拒绝 AI 幻觉。 4. **自主迭代**:如果初次搜索结果不足以回答,它会自己决定"再搜一次"。 --- ## ✨ 核心特性 - **🎯 任务多级拆解**:自动分析用户意图,将复杂问题拆解为多个搜索查询或直接访问特定 URL。 - **🕵️ 深度爬取与分析**:模拟真实浏览器行为进入网页抓取正文。支持**交互模式**,能自动识别并点击"阅读更多"、"展开全文"等按钮(含中文按钮识别)。 - **🔄 迭代式搜索逻辑**:AI 会评估当前获取的信息是否足以回答问题。如果不足,会自动发起补充搜索,直到获取足够证据。 - **📝 自动标注引用**:生成答案时会严格标注来源编号 `[1]`, `[2]`,并在文末提供对应的原始链接,确保信息真实可靠、可追溯。 - **🛡️ 浏览器反爬规避**:集成 `playwright-stealth` 模拟真实人类行为,降低触发验证码(CAPTCHA)的概率。 - **🎨 现代 Web UI**:支持流式输出(Streaming)、实时搜索过程可视化、对话历史管理(支持重命名)、深色/浅色模式切换。 - **🔐 安全认证**:自动生成 Bearer Token 保护 API 与浏览器控制通道;本机访问会由服务端自动注入,无需额外配置。 - **🛡️ SSRF 防护**:阻止对内网地址(含 IPv4-mapped IPv6 和代理/VPN 虚拟 IP 段)的访问,防止服务端请求伪造。 - **🐙 GitHub 深度优化**:针对 GitHub 用户和仓库页面进行了专门的爬取逻辑优化,更准确地获取星数、活跃度等信息。 - **🔀 多模型切换**:支持配置多个模型 ID(逗号分隔),在对话界面顶部实时切换。 - **🤖 验证码实时交互**:搜索过程中遇到验证码时,UI 自动弹出浏览器实时画面,用户点击即可解决,无需中断流程。 - **📥 对话导出**:支持将对话记录导出为 Markdown 文件,方便保存和分享。 - **🌓 跟随系统主题**:支持浅色、深色、跟随系统三种主题模式。 - **🔍 多搜索引擎**:支持 DuckDuckGo、Google、Bing、搜狗、Brave Search、SearXNG 六个搜索引擎。 --- ## 🛠️ 技术栈 - **后端**: Python 3.10+, FastAPI, Playwright (Headless Chromium) - **AI 模型**: 兼容 OpenAI API 协议(支持 DeepSeek, GPT-4, Claude, NVIDIA NIM, GLM 等) - **前端**: 原生 JS (ES6 Modules), CSS3, Markdown-it, DOMPurify - **部署**: Docker / Docker Compose / 本地 Python 环境 --- ## 🚀 快速启动 我们提供了一键部署脚本,支持 Docker 和本地环境。**推荐使用 Docker 以获得最佳体验。** ### 1. 克隆项目 ```bash git clone https://github.com/yeahhe365/JustSearch.git cd JustSearch ``` ### 2. 一键部署 #### Mac / Linux 用户 ```bash chmod +x deploy.sh ./deploy.sh ``` #### Windows 用户 双击运行 `deploy.bat`。 > **脚本逻辑说明**: > 1. 优先检查 Docker 环境,若存在则自动构建镜像并启动容器。 > 2. 若无 Docker,则自动回退至本地 Python 环境,创建虚拟环境、安装依赖并启动服务。 ### 3. 访问与配置 1. 打开浏览器访问 `http://localhost:8000`。 - 首次访问时,服务端会自动注入认证 Token,**无需手动输入**。 - 仅在服务重启后 Token 变更时,本机页面会刷新到新 Token。 - 如果需要从其他设备访问,请在目标 URL 后带上 `?token=<backend/.auth_token 中的值>`。 2. 点击页面左下角的 **设置** ⚙️ 按钮。 3. 输入您的 `API Key` 和 `Base URL`。 - 默认配置为 DeepSeek API(`https://api.deepseek.com/v1`,模型 `deepseek-v4-pro`)。 - 也支持 OpenAI、NVIDIA NIM、Claude、任何兼容 OpenAI 协议的 API 服务。 - **💡 提示**:`API Key` 支持输入多个(用英文逗号分隔),程序会自动轮询使用,适合多 Key 负载均衡。 4. 在 `模型 ID` 中填入模型名称,支持多个模型(逗号分隔),保存后可在对话界面顶部下拉切换。 4. 开始提问! --- ## 📦 手动安装指南 (针对开发者) 如果您希望手动控制开发环境: ### 1. 环境准备 ```bash python3 -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate pip install -r backend/requirements.txt ``` ### 2. 安装浏览器内核 ```bash playwright install chromium ``` ### 3. 运行服务 ```bash # 使用脚本运行 ./run.sh # 或手动启动 python3 -m uvicorn backend.app.main:app --host 0.0.0.0 --port 8000 --reload ``` ### 环境变量 | 变量名 | 默认值 | 说明 | |--------|--------|------| | `HEADLESS` | `true` | 浏览器无头模式(`false` 显示浏览器窗口,便于调试) | | `CORS_ORIGINS` | `http://localhost:8000,http://127.0.0.1:8000,http://localhost,http://127.0.0.1` | 允许的 CORS 来源(逗号分隔) | | `MAX_CONCURRENT_PAGES` | `10` | 最大并发浏览器页面数,防止内存溢出 | | `OPENAI_API_KEY` | - | API Key 环境变量回退(优先使用设置面板中的配置) | ### Docker 部署 ```bash docker-compose up -d ``` 访问 `http://localhost:8000`。认证 Token 会自动注入到本机页面中,无需手动配置;远程访问请显式提供 token。 --- ## 🔄 更新指南 如果您需要更新到最新版本,请执行以下步骤: ### 1. 获取最新代码 ```bash git pull ``` ### 2. 重新部署 #### Docker 用户 (推荐) 直接运行: ```bash ./deploy.sh ``` 或者手动运行: ```bash docker-compose up -d --build ``` > **注意**:使用 `--build` 参数确保 Docker 重新构建镜像以应用最新的代码和依赖变更。运行数据保存在 `data/` 和 `user_data/` 中,会通过 Docker volume 保留。 #### 本地 Python 用户 ```bash ./deploy.sh ``` 或者手动更新: ```bash source venv/bin/activate pip install -r backend/requirements.txt playwright install chromium ``` --- ## 🤖 工作流程详解 JustSearch 采用多阶段迭代流程,确保回答的深度和准确性: 1. **Phase I: 分析 (Analysis)** - LLM 接收问题,决定是进行关键词搜索还是直接访问特定链接。 2. **Phase II: 搜索 (Search)** - 在 DuckDuckGo / Google / Bing 等引擎执行并发搜索。 3. **Phase III: 评估 (Assess)** - AI 筛选出最相关的多个结果进行深度阅读。评估时会优先选择官方权威来源。 4. **Phase IV: 爬取与交互 (Crawl & Interact)** - 浏览器进入页面抓取全文。如果开启"交互模式",AI 会自动点击潜在的内容展开按钮。 5. **Phase V: 生成 (Generate)** - 融合所有来源,生成带引用的结构化答案。如果信息不足,则返回 Phase I 重新迭代。 --- ## 🛠️ 实用工具:解决验证码 (CAPTCHA) ### 自动解决(推荐) 搜索过程中如果遇到验证码,JustSearch 会**自动弹出浏览器实时画面窗口**。您只需在弹窗中点击完成验证,搜索会自动继续。 ### 手动预登录 如果您希望提前保存 Cookies 以减少验证码出现频率: ```bash python tools/manual_login.py ``` 这会启动一个可见的 Chrome 窗口。登录您的常用搜索账号并完成一次搜索验证,JustSearch 的后台爬虫将共享这些登录状态。 --- ## 📂 项目结构 ```text JustSearch/ ├── backend/ │ ├── app/ │ │ ├── main.py # FastAPI 入口,路由定义 │ │ ├── workflow.py # 搜索工作流引擎(迭代式搜索核心) │ │ ├── llm_client.py # LLM 客户端(任务分析/评估/生成/交互决策) │ │ ├── openai_client.py # OpenAI 兼容客户端构造 │ │ ├── browser_manager.py # 浏览器搜索引擎封装 │ │ ├── browser_context.py # 全局浏览器生命周期与并发控制 │ │ ├── page_crawler.py # 页面正文爬取与 GitHub 页面优化 │ │ ├── crawler/ # URL 安全校验与搜索引擎重定向解析 │ │ ├── search_result_cleanup.py # 搜索结果标题/内部页过滤 │ │ ├── engine_health.py # 搜索引擎健康度与自动降级 │ │ ├── interaction.py # 用户交互会话管理(验证码等) │ │ ├── database.py # SQLite 模型、对话历史、设置持久化 │ │ ├── legacy_migration.py # 旧 JSON 数据一次性迁移 │ │ ├── auth.py # Token 认证与 HTML 启动参数注入 │ │ ├── routers/ # API 路由(chat/history/settings/stats) │ │ ├── prompts.py # LLM Prompt 模板 │ │ └── search_engine.py # 搜索引擎 CSS 选择器配置加载 │ ├── static/ │ │ ├── css/style.css # 样式入口,按顺序导入 sections/ │ │ ├── css/sections/ # base/sidebar/chat/modal/markdown/responsive 等样式分层 │ │ ├── js/ │ │ │ ├── main.js # 前端启动编排 │ │ │ └── modules/ # api/auth/chat/history/sidebar/settings/browser/source-renderer.js/ui 等模块 │ │ └── index.html │ ├── settings.json.example # 配置模板 │ └── requirements.txt ├── data/ # SQLite 数据库运行目录(自动创建) ├── tools/ │ └── manual_login.py # 手动登录脚本(保存 Cookies) ├── user_data/ # 浏览器持久化数据 (自动创建) ├── Dockerfile # Docker 构建文件 ├── docker-compose.yml ├── deploy.sh / deploy.bat # 一键部署脚本 (推荐) └── run.sh # 本地启动脚本 ``` ## 🤝 贡献 欢迎贡献代码!请遵循以下步骤: 1. Fork 本仓库 2. 创建功能分支:`git checkout -b feature/your-feature` 3. 提交更改:`git commit -m "feat: your feature"` 4. 推送分支:`git push origin feature/your-feature` 5. 创建 Pull Request --- ## ⚙️ 环境变量配置 | 变量 | 默认值 | 说明 | |------|--------|------| | `HEADLESS` | `true` | 浏览器无头模式 | | `CORS_ORIGINS` | `http://localhost:8000,http://127.0.0.1:8000,http://localhost,http://127.0.0.1` | CORS 允许的源(逗号分隔) | | `MAX_CONCURRENT_PAGES` | `10` | 最大并发页面数 | | `OPENAI_API_KEY` | — | 备用 API Key | --- ## 📄 开源协议 本项目采用 [MIT License](LICENSE) 协议。 --- ## 友链 - [Linux.do](https://linux.do/):也称 L 站,是一个活跃的中文技术社区,围绕 AI、软件开发、资源分享与前沿资讯展开讨论;社区愿景是“新的理想型社区”,社区文化是“真诚、友善、团结、专业,共建你我引以为荣之社区”。

AI Agents LLM Tools & Chat UIs Browser Automation
56 Github Stars
Gemini-Nexus
Open Source

Gemini-Nexus

<p align="center"> <a href="./README.md">English</a> | <a href="./README.zh-CN.md">中文</a> </p> <div align="center"> <a href="https://github.com/yeahhe365/Gemini-Nexus"> <img src="logo.png" width="160" height="160" alt="Gemini Nexus Logo"> </a> # Gemini Nexus ### Give your browser a native AI layer <p> <img src="https://img.shields.io/badge/Google_Gemini-8E75B2?style=for-the-badge&logo=googlegemini&logoColor=white" alt="Gemini"> <img src="https://img.shields.io/badge/Chrome_Extension-MV3-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white" alt="Chrome Extension"> <img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite"> </p> <p> <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript"> <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black" alt="JavaScript"> <img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="License"> </p> <p> <a href="README.zh-CN.md">Chinese README</a> </p> --- </div> ### Project Overview **Gemini Nexus** gives your browser a native AI layer by combining Gemini Web, the Google Gemini API, OpenAI-compatible APIs, and dedicated third-party API providers in one Chrome extension. It is more than a side panel: the extension includes an injected floating toolbar, image and screenshot input, Chrome DevTools Protocol based browser-control tools, and optional external MCP tools for browser-native AI workflows. ### Capability Overview Gemini Nexus currently focuses on these browser AI workflows: - Switch among **Gemini Web**, **Gemini API**, **OpenAI Compatible API**, **OpenAI Official API**, **DeepSeek API**, **OpenRouter API**, **Qwen / DashScope API**, **Anthropic API**, and **Zhipu API**, with provider-specific `Base URL`, `API Key`, and `Model IDs`. - Enable Gemini Web temporary chats so Web-provider requests are not added to Gemini Recent chats. - Use Gemini API Google Search grounding and show web sources in responses. - Use OpenAI-compatible web search through Responses API `web_search` or Chat Completions `web_search_options`, depending on the current endpoint. - Limit side-panel scope by tab to reduce distraction on pages where the assistant is not needed. - Re-edit historical user messages and continue from that point; this feature is enabled for API providers only. - Manage context with summary compression and recent-turn trimming to reduce the risk of exceeding model context limits. - Mark browser-control tasks with Chrome native tab groups and keep `list_pages` / `select_page` focused on the controlled scope. - Open external links in new browser tabs to avoid failed third-party loading inside the side panel. - Preserve settings as much as possible across extension identity and local upgrade paths. ### Provider Comparison The project includes provider drivers under `services/providers` and adapts behavior dynamically in code: | Provider | Entry | Models | Strength | Requirement | | :-------------------- | :--------------------- | :--------------------------------- | :----------------------------------------------------------------------------------- | :------------------------------ | | **Web Client** | `web.js` | Current Gemini Web chat modes | No API key; reuses the Gemini web session; optional temporary chats | Keep a Google account signed in | | **Official API** | `official.js` | Gemini Flash/Pro preview models | Fast responses with **Thinking** and Google Search grounding | Google AI Studio key | | **OpenAI Compatible** | `openai_compatible.js` | GPT, Claude, and compatible models | Highly extensible; supports Chat Completions / Responses API and optional web search | Third-party service key | | **OpenAI Official** | `openai_compatible.js` | GPT reasoning/search models | Dedicated Responses API path with reasoning summary and optional web search | OpenAI API key | | **DeepSeek API** | `openai_compatible.js` | DeepSeek chat/reasoning models | Dedicated defaults for DeepSeek Chat Completions and `reasoning_content` display | DeepSeek API key | | **OpenRouter API** | `openai_compatible.js` | OpenRouter model IDs | Fetches `/models`, supports provider routing JSON, and sends native `reasoning` | OpenRouter API key | | **Qwen / DashScope** | `openai_compatible.js` | Qwen text and VL models | Dedicated DashScope compatible endpoint with `enable_thinking` and VL image input | DashScope API key | | **Anthropic API** | `anthropic.js` | Claude models | Native Messages API adapter with image input and extended-thinking stream display | Anthropic API key | | **Zhipu API** | `openai_compatible.js` | GLM models | Dedicated GLM Chat Completions profile with native thinking toggle payloads | Zhipu API key | ### Browser Control Built on `background/control/` and Chrome DevTools Protocol, Gemini Nexus lets AI perform agentic browser tasks through a local tool loop: | Category | Core commands | Implementation | | :--------------- | :--------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------- | | Navigation | `navigate_page`, `new_page`, `close_page`, `list_pages`, `select_page` | Manages page lifecycle through `chrome.tabs` | | Interaction | `click`, `hover`, `fill`, `fill_form`, `press_key`, `type_text` | Uses Accessibility Tree UIDs for precise actions, hover, batch form fill, shortcuts, and input | | Observation | `take_snapshot`, `wait_for`, `handle_dialog` | Extracts reusable accessibility-tree UIDs, waits for target text, and handles blocking dialogs | | Script execution | `evaluate_script` | Runs custom JavaScript in the page context | After browser control is enabled, Gemini Nexus locks onto a target tab and uses a Chrome native tab group to show the current task title. `select_page` switches inside the controlled tab group by default; regular `new_page` tabs join the group, while `background: true` opens a separate popup window to reduce focus interruption. ### External MCP Tools Gemini Nexus can connect to one or more external MCP servers through **SSE**, **streamable HTTP**, or **WebSocket**, then expose their tools to the existing tool loop. #### Recommended Setup: Local Proxy for stdio Servers Chrome extensions cannot directly run stdio-based MCP servers, so the recommended setup is to run a local proxy, such as [MCP SuperAssistant](https://github.com/srbhptl39/MCP-SuperAssistant) Proxy. Configure your MCP servers, including stdio servers, in the proxy, then connect Gemini Nexus to the proxy endpoint. Common proxy endpoints: - **SSE**: `http://127.0.0.1:3006/sse` - **Streamable HTTP**: `http://127.0.0.1:3006/mcp` - **WebSocket**: `ws://127.0.0.1:3006/mcp` #### Setup Steps 1. Start your MCP proxy and configure MCP servers inside it. 2. In **Settings -> Connection -> External MCP Tools**: - Enable **External MCP Tools**. - Add or select a server entry. **Active Server** means the entry currently being edited; conversations use all enabled servers. - Choose the transport and set the server URL: SSE, streamable HTTP, or WebSocket. - Use SSE or streamable HTTP if you need custom request headers; browser-extension WebSocket transport does not support custom headers. - Click **Test Connection** and **Refresh Tools**. 3. Optional, and recommended when many tools exist: set **Expose Tools** to **Selected tools only**, then enable only the tools you want the model to see or use. 4. Start a normal conversation. When the model needs tools, it outputs a JSON tool block like the one below. In multi-server mode, the model may use unique tool names in the `serverId__toolName` format to route calls to a specific server: ```json { "tool": "tool_name", "args": { "key": "value" } } ``` ### Key Features - **Smart side panel**: Built on the `sidePanel` API for fast conversation access and full-text history search. - **Selection toolbar**: Injected content scripts let selected text be translated, summarized, explained, grammar-fixed, or inserted back into forms. - **Image and screenshot input**: - **OCR and screenshot translation**: Canvas cropping extracts and translates selected image regions. - **Screen or window capture**: The side panel can use `display-capture` to select another screen or app window as image input. - **Floating image detection**: Detects page images and shows a floating AI analysis button. - **Generated image display**: Shows fetched Gemini images without local pixel rewriting. - Gemini Web currently supports image attachments through the reverse provider. Use Gemini API for PDF/text/document attachments. - **Safe rendering**: Markdown, LaTeX, and code blocks render inside the isolated `sandbox` environment. ### Gemini Web Maintenance Gemini Web is reverse engineered and can change without notice. The current contract is documented in [`docs/gemini-web-reverse.md`](docs/gemini-web-reverse.md), including the verified tokens, RPC paths, upload flow, model hashes, temporary-chat markers, unsupported image-preview model routes, and the manual drift check command. ### Quick Start #### Repository Structure The repository root is the runnable Chrome extension project root. `package.json`, `manifest.json`, Vite config, source code, tests, and packaging scripts all live at the root. Cross-runtime shared utilities live in `shared/` and are grouped by capability under `shared/attachments/`, `shared/config/`, `shared/dom/`, `shared/logging/`, `shared/mcp/`, `shared/media/`, `shared/messaging/`, `shared/models/`, `shared/settings/`, `shared/text/`, `shared/ui/`, and `shared/utils/`; the project no longer keeps top-level `shared/*.js` compatibility entry points. Directory aggregation entry points consistently use an `index.js` inside the directory to avoid sibling `foo.js` and `foo/` modules. Runtime entry points remain at each runtime root, such as `background/index.js`, `content/index.js`, `sandbox/index.js`, `sidepanel/index.js`, and the standalone settings page `settings/index.js`. Runtime code uses `snake_case` filenames, while repository tooling scripts and workflow files may use `kebab-case`. #### Install from Release 1. Download the latest ZIP from [Releases](https://github.com/yeahhe365/Gemini-Nexus/releases) and unzip it. 2. Open `chrome://extensions/` in Chrome and enable **Developer mode** in the top-right corner. 3. Click **Load unpacked** and select the extracted folder. #### Build and Package from Source ```bash npm install npm run package:extension ``` After packaging, choose `artifacts/chrome-extension` when using Chrome **Load unpacked**. For development, you can also load the repository root directly, but releases and manual installs should use the packaged directory. `npm run build` only creates the Vite UI output in `dist/`; it is not a complete extension directory. The package step merges multiple content scripts into a single `content/index.js` in `manifest.json` order and rewrites the packaged manifest, avoiding reliance on a long manual script list in release artifacts. #### Publish to Chrome Web Store Chrome Web Store credentials should stay on your local machine and must not be committed: ```bash cp .env.chrome-webstore.example .env.chrome-webstore ``` Edit `.env.chrome-webstore` and fill in `CHROME_WEBSTORE_PUBLISHER_ID`, `CHROME_WEBSTORE_ITEM_ID`, and `CHROME_WEBSTORE_ACCESS_TOKEN` with the `https://www.googleapis.com/auth/chromewebstore` scope. After preparing the ZIP, run: ```bash npm run publish:chrome-webstore ``` The script uploads the ZIP pointed to by `CHROME_WEBSTORE_ZIP_PATH` through Chrome Web Store API v2, then submits it for review. ### Tech Stack - **Build tools**: Vite + TypeScript - **Architecture protocols**: Chrome MV3 + Chrome DevTools Protocol + local/external MCP tool calls - **Core libraries**: Marked.js, KaTeX, Highlight.js, Fuse.js ### License This project is open sourced under the **MIT License**. ### Acknowledgements This project has been shared in the [LINUX DO community](https://linux.do). Thanks to the community for support and feedback.

AI Agents Browser Automation
1.1K Github Stars
Dual-AI-Chat
Open Source

Dual-AI-Chat

# Dual AI Chat (双模协作智能) <p align="center"> <a href="./README.md">中文</a> | <a href="./README.en.md">English</a> </p> <div align="center"> [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![React](https://img.shields.io/badge/React-19-blue?logo=react)](https://react.dev/) [![Google GenAI SDK](https://img.shields.io/badge/GenAI_SDK-v1.0-green?logo=google)](https://www.npmjs.com/package/@google/genai) [![Vite](https://img.shields.io/badge/Vite-6.0+-purple?logo=vite)](https://vitejs.dev/) **通过辩证思维,解锁 AI 的深层潜力。** [在线体验](#-在线体验-live-demos) • [核心特性](#-核心特性) • [本地部署](#-本地部署) • [配置指南](#-配置指南) </div> **Dual AI Chat** 是一个基于 React 19 构建的下一代 AI 聊天应用。它引入了 **“协作智能”** 的概念,通过两个性格迥异的 AI 代理——**Cognito (逻辑)** 和 **Muse (创意)**——之间的内部辩论与协作,为您提供比单一模型更准确、更全面、经过深思熟虑的答案。 --- ## 🌐 在线体验 (Live Demos) 无需安装,立即体验 Dual AI Chat 的强大功能: | 平台 | 链接 | 说明 | | :--- | :--- | :--- | | **Google AI Studio** | [**🚀 点击免费使用**](https://ai.studio/apps/drive/1wS-wmXT_J4S-sfYxY1wItwh4UuV4STEk?fullscreenApplet=truea) | **推荐**。直接在 Google 官方环境中运行,通常无需配置 Key (或使用 Google 配额)。 | | **Cloudflare Pages** | [**🌐 网页版 Demo**](https://c3d98006.dual-ai-chat-dvb.pages.dev/) | **纯净版**。需在右上角设置中填入您自己的 API Key (Google Gemini 或 OpenAI 兼容 Key)。 | --- ## ✨ 核心特性 ### 🧠 双 AI 辩证系统 用户的一个问题,会触发两个 AI 的即时协作: * **Cognito (逻辑引擎):** 负责事实核查、逻辑推理、结构化分析和最终答案的综合。 * **Muse (创意引擎):** 负责横向思维、挑战假设、补充盲点和提供创新视角。 ### ⚡ 深度支持“思考模型” (Thinking Models) 原生集成 Google Gemini 2.5 / 3.0 系列模型的深度思考能力: * **可视化控制:** 在设置中直观调节 Token 预算 (Budget) 和 思考强度 (Level)。 * **混合模式:** 结合内部辩论与模型自身的思维链 (CoT),处理复杂推理任务。 ### 📝 智能协作记事本 记事本不仅是输出区域,更是 AI 的共享工作区: * **状态保持:** 两个 AI 均可读取并修改记事本,作为长对话的“外部记忆”。 * **Diff 视图:** 新增差异对比模式,清晰展示 AI 对代码或文本的每一次修改(新增/删除)。 * **全功能编辑器:** 支持 Markdown 预览、源码编辑及多步撤销/重做。 ### 🔌 全兼容后端架构 * **Google Gemini 原生:** 支持官方 API 及自定义代理 Endpoint。 * **OpenAI 兼容接口:** 无缝对接 **DeepSeek**、**Ollama**、**LM Studio** 等本地或第三方大模型服务。 ### 📱 现代化 UI/UX * **React 19 内核:** 利用最新的 React Hook 和并发特性构建,性能极致流畅。 * **移动端适配:** 响应式布局,手机端自动切换为底部导航模式。 * **多模态交互:** 支持图片上传与理解,AI 可基于视觉信息进行讨论。 --- ## 💻 本地部署 ### 1. 环境要求 * Node.js v18+ * npm 或 yarn ### 2. 安装项目 ```bash git clone https://github.com/your-username/dual-ai-chat.git cd dual-ai-chat npm install ``` ### 3. 配置 API Key (可选) 为了方便开发,您可以在根目录创建 `.env.local` 文件(也可以稍后在网页 UI 中设置): ```env GEMINI_API_KEY="AIzaSy..." ``` ### 4. 启动开发服务器 ```bash npm run dev ``` 访问终端显示的地址(通常为 `http://localhost:3000`)。 --- ## ⚙️ 模型与 API 配置指南 本项目支持高度自定义的模型连接方式,您可以在界面右上角的 **设置 (⚙️)** 面板中灵活切换: | 配置模式 | 适用场景 | 关键参数 | | :--- | :--- | :--- | | **标准 Gemini** | 最简单的 Google 官方服务接入 | 仅需 API Key (读取自环境变量或手动输入) | | **自定义 Gemini** | 需要使用反向代理或 Vertex AI | Endpoint (如 `https://my-proxy.com`), API Key | | **OpenAI 兼容** | **本地模型 (Ollama)** 或 **DeepSeek** | Base URL (如 `http://localhost:11434/v1`), 模型 ID (如 `deepseek-chat`) | > **提示:** 在 OpenAI 兼容模式下,您可以为 Cognito 和 Muse 分别指定不同的模型 ID。例如:让 Cognito 使用擅长推理的 `o1-reasoning`,让 Muse 使用擅长创意的 `gpt-4o`。 --- ## 🛠️ 技术栈详情 * **Core:** React 19, TypeScript, Vite * **AI Integration:** `@google/genai` (Google Official SDK v1.0+) * **Styling:** Tailwind CSS, Lucide React (Icons) * **Utilities:** * `marked` & `dompurify`: 安全的 Markdown 渲染 * `katex`: 数学公式渲染 * `diff`: 文本差异对比算法 --- --- ## 友链 - [Linux.do](https://linux.do/):也称 L 站,是一个活跃的中文技术社区,围绕 AI、软件开发、资源分享与前沿资讯展开讨论;社区愿景是“新的理想型社区”,社区文化是“真诚、友善、团结、专业,共建你我引以为荣之社区”。

LLM Tools & Chat UIs
347 Github Stars