AMC-WebUI全景解读：面向Gemini的终极Local-First AI工作流WebUI，多模态聊天、代码执行与实时语音一站搞定

AMC-WebUI全景解读面向Gemini的终极Local-First AI工作流WebUI多模态聊天、代码执行与实时语音一站搞定【免费下载链接】AMC-WebUI面向 Gemini 的 Local-First AI 工作流 WebUI集成多模态聊天、Canvas、文件处理、实时搜索、代码执行与高级推理。项目地址: https://gitcode.com/gh_mirrors/al/AMC-WebUIAMC-WebUI是一款面向 Google Gemini 的Local-First AI 工作流 WebUI聊天数据默认存在浏览器本地IndexedDB隐私优先同时把多模态聊天、深度推理、实时语音、浏览器端代码执行、文件处理与图片生成整合进一个界面是本地优先的 AI 工作台一站式方案。 上图为 AMC-WebUI 桌面端界面左侧是会话分组与历史列表底部工具条集成语音、文件、快捷指令等入口顶部可直接切换模型如 3.1 Pro。为什么是 Local-First本地优先意味着什么Local-First本地优先是 AMC-WebUI 的核心设计哲学数据不出浏览器会话、日志、用量统计默认写入浏览器 IndexedDB由 src/services/db/dbService.ts 封装读写多标签同步基于 BroadcastChannel Web Locks 保护并发写入多标签页同时操作数据仍保持一致src/stores/chatSyncChannel.ts离线可用 Shell完整 PWA 支持Service Worker 安装提示可装到桌面/手机离线打开应用外壳可选后端托管担心 API Key 安全可切换到独立后端模式由 Node 服务端托管 Gemini Key 并代理请求。一句话日常使用零部署负担需要托管时一键升级两种姿势都覆盖。一分钟上手三种部署方式怎么选方式一标准开发模式最简单git clone https://gitcode.com/gh_mirrors/al/AMC-WebUI cd AMC-WebUI npm ci npm run dev启动后访问http://localhost:5175在设置 → API 配置填入 Gemini API Key 即可开聊。建议 Node 24仓库启用engine-strictnvm use可快速切版本。方式二Docker Compose 双容器自用推荐npm run build:docker docker compose up -d --buildweb容器托管前端并反向代理api容器提供/api/gemini/*、/api/openai/*与/api/live的 WebSocket 全代理默认访问http://localhost:8080。编排文件见 docker-compose.yml。方式三静态前端 独立 API 服务前端npm run build后部署到任意 Pages/CDN后端执行npm run build:api npm run start:api单独托管适合前端静态、后端上服务器的混合架构。核心功能全景一个 WebUI 解决 6 类 AI 工作流1️⃣ 多模态聊天与实时语音Live API图片、PDF、视频、音频、ZIP/文件夹拖入即解析支持 Gemini Files API 或 Base64 双通道上传细节等级可调双向实时音视频流语音通话、屏幕共享与视觉识别音频可视化基于 AudioWorkletsrc/components/audio/、src/hooks/live-api/30 种语音的 TTS 合成与语音转文字覆盖说-听-转完整语音链路。2️⃣ 深度推理Thinking 思维链可视化支持 Gemini 3.x / 2.5 系列思维链流式展示可设Token 预算或推理等级Minimal / Low / Medium / High实时看到模型怎么想的演算过程流式处理逻辑见 src/features/chat-streaming/processors.ts。3️⃣ 浏览器端代码执行本地 Python 沙箱不用服务器、不写 Dockerfile——基于 PyodideWASM的 Python 沙箱直接在浏览器跑预装 numpy / pandas / matplotlib按需自动安装 scipy、scikit-learn文件挂载、生成文件下载、matplotlib 图表自动捕获另有 Gemini 原生 Code Execution 链路可对照验证测试脚本见 scripts/verify-code-execution.mjs核心服务见 src/features/local-python/pyodideService.ts。4️⃣ Live Artifacts从代码块到交互界面代码块自动识别并渲染为交互式 HTML 预览自动全屏支持安全内联 HTML/SVG、表单控件、Mermaid 与 Graphviz 流程图还可配置自动生成 Live Artifacts的触发模型与提示词——AI 输出的不只是文字而是能点的界面。5️⃣ 生产力工具链搜索、图片生成、URL 上下文深度搜索聚合 Google Search自动规划搜索任务并给出精准引用URL 上下文粘贴链接即抓取网页作为对话上下文Nano Banana 图片生成原生 Gemini 图片生成支持宽高比、尺寸与四图模式会话标题 内容全文搜索、分组管理、导入导出数据管理见 src/hooks/data-management/。6️⃣ 企业级 API 管理双模式 多 Key 轮询Gemini 原生模式Thinking、Live、Files API、深度搜索等专属能力的主路径OpenAI 兼容模式独立 Key / Base URL / 模型列表请求发往{Base URL}/chat/completions与 Gemini 配置完全隔离互不污染多 Key 轮询、自定义 API 代理baseUrl注入、第三方 Provider 路由OpenAI / DeepSeek / Anthropic / OpenRouter 等服务端代理实现在 server/src/geminiProxy.ts 与 server/src/thirdPartyProxy.ts。界面细节为效率设计的小功能三主题系统Onyx暗/ Graphite灰/ Pearl亮支持跟随系统src/constants/themeRegistry.ts多语言中文 / 英文 / 跟随系统覆盖全部 UI 组件翻译源在 src/i18n/translations/⌨️全自定义快捷键新建聊天、打开日志、切模型、画中画全部可覆盖严格精确的用量计费日志与用量页只在字段足以精确还原官方费用时才显示价格避免估算陷阱️安全设置5 个安全过滤类别独立配置过滤级别。内置模型一览见 src/constants/modelConfiguration.tsGemini 3.x 全系、Robotics-ER、Gemma 4、图片生成与 TTS 模型均已就位。技术架构速览新手也能看懂的分层层级技术选择核心框架React 18 TypeScript 5.5 Vite 7样式Tailwind CSS 4 CSS 变量主题持久化原生 IndexedDB Web Locks 跨标签写锁模型能力google/genaiSDK流式/文件/图片/TTS/转录音频引擎AudioWorklet 实时流 Worker 端预处理压缩渲染React-Markdown KaTeX Highlight.js Mermaid viz.jsPython 沙箱PyodideWASMWeb Worker代码组织按组件 / 领域能力 / hooks / 服务清晰分层入口在 src/App.tsx完整目录说明见 README.md 的项目结构章节。总结谁应该试用 AMC-WebUI重度 Gemini 用户想在一个界面里用全 Thinking、Live 语音、深度搜索与代码执行隐私敏感者数据默认留在本地导出/导入随时可控极客与自托管爱好者Docker 双容器、Key 托管、第三方路由全部开放可配。Local-First 不是阉割版云端而是把 AI 工作流的主权交还给你——AMC-WebUI 证明了浏览器可以成为完整的 AI 工作台。【免费下载链接】AMC-WebUI面向 Gemini 的 Local-First AI 工作流 WebUI集成多模态聊天、Canvas、文件处理、实时搜索、代码执行与高级推理。项目地址: https://gitcode.com/gh_mirrors/al/AMC-WebUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考