为什么要开源前端过去几个月我在做一套Gemini 多模态 API 网关对话走 OpenAI 兼容层图片/音乐/视频走 Gemini 原生v1beta。服务端用 Java Spring Boot 实现计费、鉴权、转发与充值用户侧还需要一个能「看得见、点得着」的控制台。这套用户端 Web 前端web/目录从官网、文档页到游乐场和工作室都是日常迭代出来的。最近把它开源出来主要考虑给同类项目做 UI 参考——多模态控制台怎么拆路由、怎么做 SSE 流式、怎么展示 Markdown 回复可以直接对照代码降低二次开发成本——Fork 后改site.js里的品牌与域名接自己的后端即可边界清晰——前端开源后端与管理后台仍商业授权想做完整私有部署的团队可以按需合作。下面按「开源了什么 → 技术实现 → 怎么跑起来 → 两种使用方式」说明。开源范围哪些开了、哪些没有模块是否开源说明用户端 Webweb/✅ 开源本文主角Java 后端server/❌ 未开源网关、计费、支付、Gemini 转发等管理后台admin/❌ 未开源随后端商业授权提供前端不包含Gemini Key、JWT Secret、支付密钥等敏感信息所有鉴权与扣费逻辑都在后端。这也是可以放心把前端公开的原因之一。功能一览开源前端覆盖一条完整的「开发者使用 AI 网关」路径页面路由能力官网首页/产品介绍、接入引导模型价格/pricing公开价目API 文档/docsOpenAI / Gemini 接入说明站内 Markdown登录注册/auth邮箱验证码、短信验证码控制台/dashboard用量概览对话游乐场/playground流式多轮对话支持上传图片与PDF 文档理解图片工作室/imagesNano Banana 文生图 / 图生图音乐工作室/musicLyria 文生音乐视频工作室/videosVeo 视频生成财务账单/billing余额、充值、消费明细API 密钥/api-keys创建与管理 Key游乐场里 PDF 走的是 Gemini 原生文档理解inlineDataapplication/pdf适合「上传论文/合同后直接问答」的场景图片则走多模态视觉理解。流式输出用SSE和后端text/event-stream对齐。技术栈与目录Vue 3Composition API script setupVue Router 4Vite 8Tailwind CSS 3marked highlight.js DOMPurifyAI 回复 Markdown 渲染与 XSS 过滤核心目录结构web/ ├── public/ # logo、图标、首页配图 ├── src/ │ ├── api/ # fetch 封装、SSE 流式 chat │ ├── components/ # 布局、Markdown、对话框等 │ ├── composables/ # 参考图/PDF 附件选择 │ ├── config/site.js # 站点名、域名、文档里的 API Base URL │ ├── router/ │ ├── utils/ # imageParts、markdown 等 │ └── views/ # 各业务页面 ├── vite.config.js # 开发时代理 /api → 后端 └── tailwind.config.js前后端怎么通信1. 普通 RESTsrc/api/client.js里统一走相对路径/api/...生产环境由Nginx 反代到 Java 服务本地开发时 Vite 代理到localhost:15555// vite.config.js节选server:{proxy:{/api:{target:http://localhost:15555,changeOrigin:true},},},2. 游乐场流式对话streamChat()用fetchReadableStream解析 SSE按event: chunk/event: done更新 UI不依赖额外 SSE 库。核心思路请求头Accept: text/event-stream按\n\n拆事件块解析event:与data:流结束回调里刷新 Token 用量3. 登录态Access Refresh 双 Token前端实现了短 Access 长 Refresh自动续期Access 快过期时静默调/api/auth/refresh401 时尝试刷新一次再重试。Token 存localStorage不会把密钥写进源码。4. 多模态附件用户消息里的图片/PDF 在发送前转 Base64后端再组装 GeminiinlineData。历史消息里图片可上传对象存储后只留 URL减小数据库体积——这部分逻辑前后端配合前端只负责选择与预览。本地跑起来3 步环境Node.js 18以及一个可用的后端 API本地 Java 或测试环境。gitclone https://gitee.com/mtq851/aisoui-model-transfer-station.gitcdaisoui-model-transfer-station/webnpminstallnpmrun dev浏览器打开http://localhost:5173。若后端也在本机15555端口登录、游乐场等页面即可联调。生产构建npmrun build# 产物在 dist/配合 Nginx 静态托管 /api 反代品牌与域名在src/config/site.js修改即可例如站点名、文档里展示的 API Base URL。两种使用方式怎么选方式一直接用现成平台SaaS若你只是要调 API、不想运维注册平台账号、创建 Key 即可不必部署本前端。开源仓库更适合「看实现、学 SSE/Markdown/多模态 UI」。方式二私有部署前端 Fork 后端商业授权若需要自有品牌、独立域名、计费自主可控Fork / 定制本前端改 UI、改site.js购买并获得Java 后端源码与部署文档自建 MySQL、Redis、对象存储、支付与短信等Nginx/→ 前端静态/api→ 后端后端源码不在公开仓库里私有部署与授权事宜见 Gitee 仓库README → 联系我们微信扫码。开源仓库GiteeAisoui 模型中转站https://gitee.com/mtq851/aisoui-model-transfer-stationgitclone https://gitee.com/mtq851/aisoui-model-transfer-station.git建议阅读根目录README.md— 产品能力、API 快速开始web/README.md— 前端专用说明、合作模式、部署细节web/src/views/PlaygroundView.vue— 流式对话 附件web/src/api/client.js— 请求封装与 Token 续期欢迎Star、Issue、PRUI 修复、文档、无障碍、i18n 等方向都欢迎。小结开源的是用户端 Vue3 控制台不是完整后端。技术点SSE 流式、Markdown 渲染、多模态附件、双 Token 续期、Tailwind 深色 UI。想用现成服务 → 直接注册平台想私有部署 → Fork 前端 商业后端授权。如果你也在做 AI 网关或开发者控制台希望这套 UI 能少踩一点坑。有问题欢迎在评论区或 Gitee Issue 交流。免责声明本文为个人开源说明与技术分享前端代码按仓库 License 使用。API 调用、数据安全与合规请自行评估请勿将 API Key 提交到公开仓库。上游模型能力以各厂商实际为准。