【开源】基于 New API 原版模型广场改造：选好分组一键开通 API Key + 比官方省多少 + 树状卡片 + 多模型对比

[TransAPI-eng]

各位站长好，分享一个给 New API 站点做的开源小工具。

这是在 New API 原版模型广场（/pricing 定价页）基础上改造的展示界面：数据仍然来自 New API 自带的公开接口（/api/pricing、/api/status、/api/perf-metrics/summary），只是把展示方式重新设计了一遍。不改后端、不碰数据库、不动任何计费配置，原站照常运营，随时可以撤掉。

🔑 最大亮点：选好就能开通，不再「跳进后台就找不到了」

别的模型广场只能看价格，客户选好渠道后还得自己去「令牌管理」，常常忘了该选哪个分组。这里在卡片上点「开通」，直接用这个分组一键创建 API Key，Key 和接口地址当场复制走；没登录会先引导登录，并把分组名复制好。

改造前后对比（左：New API 原版，右：改造后；示例站点已匿名）：

在线演示：https://transapi-eng.github.io/new-api-model-plaza/

为什么做这个

原版定价页把「模型 × 分组 × 倍率」平铺在一起，分组一多（我们见过 30+ 个分组的站），客户很难看出每个渠道有什么区别，也算不清到底比官方便宜多少。

相比原版多了什么

• 一键开通 API Key：卡片上点「开通」，用所选分组直接创建 Key（调用 New API 自带的令牌接口，客户自己的账号、自己的操作）
• 树状结构：厂商卡片 → 渠道分支 → 模型卡，渠道说明加粗显示，自动识别「零注入 / 满血 / 高缓存 / 可蒸馏 / 企业级 / AWS / Azure」等特点做成徽章
• 比官方省多少：每张卡显示「比官方省 X%」和「官方原价 → 实付价」，按当日汇率 + 本站充值价换算；官方价匹配不上的模型不显示，不编数字
• 动态计费：解析 billing_expr，长/短上下文分档价格都列出来
• 按模型比价：一个模型在所有渠道的价格从低到高排列
• 多选对比：勾选最多 6 个「模型@渠道」并排对比价格、折扣、成功率、延迟、吞吐
• 筛选 + 模糊搜索：比如勾「企业级 + 可蒸馏」；输入 OPUS5.5、opus 5-5 都能找到 claude-opus-5-5
• 币种切换：$ 额度 / ¥ 人民币（人民币按充值价换算，不会错用市场汇率）
• 管理员可视化编辑：管理员登录后直接在卡片上改名、加说明、加备注、排序、隐藏、推荐、建「精选分组」；只改展示层，不碰计费；管理员身份由 New API 服务端确认
• 保留原版的 24h 成功率、延迟、吞吐；自适应手机和暗色模式

接入

同域名下放一个页面即可：

<model-plaza config="/plaza.config.json"></model-plaza>
<script src="https://cdn.jsdelivr.net/gh/TransAPI-eng/new-api-model-plaza@0/plaza.js"></script>

CDN 引用会自动更新，官方价每天由 GitHub Action 自动刷新。也可以自己托管，详见 README。

GitHub：https://github.com/TransAPI-eng/new-api-model-plaza （MIT 开源）

欢迎提 Issue / PR，特别是官方价匹配规则和渠道特点关键词。觉得有用的话点个 Star ⭐

---

关于 Trans86

项目由 Trans86.com 开发维护（一个地址统一接入 Claude / GPT / Gemini，按量计费无月费）。模型广场的扇形卡片设计就来自我们的首页：

首页	模型定价	简易教程

💡 如果大家有需求，Trans86 站点本身（包括这套首页设计）也可以开源，欢迎在帖子下面留言。

联系我们

接入问题、合作、定制、想要 Trans86 站点开源，都可以找我们：

• 微信：66476118 或 TransAIAPI
• QQ：66476118
• 邮箱：ljceng@icloud.com
• GitHub：提 Issue

本项目是社区插件，与 New API 官方无隶属关系，只调用其公开接口。