Model API Web

模型 API Web 快速开发——基于沐曦 Token 资源包

演示视频

【待补充】

项目介绍

沐曦 Token 资源包提供多类型模型 API 与远程算力。你可以在线体验资源包中的模型，也可以申请访问令牌，无需下载模型权重、配置本地 GPU 或部署推理服务，便能在本地通过脚本调用模型。

Model API Web 帮助你把资源包中目标模型的 API 调用开发成交互式 Web 界面。你可以使用沐曦 Token 资源包内的文本生成模型研究接口、设计网页用户界面，再使用资源包内的编程模型生成可运行的本地 Web 项目。

工作流程

模型 API 资料
      ↓ npm run research：整理接口、参数和返回结果
模型学习笔记
      ↓ npm run design：把模型能力转换为页面控件和交互
Web 设计需求
      ↓ npm run build：生成前端、服务端和项目配置
可运行的 Web 项目

准备目标模型的 API 资料和访问令牌后，运行上述三条命令，即可生成一个调用真实模型的本地 Web 项目。

生成目标包括参数控件、可执行脚本预览、运行状态、原始响应，以及文本、图片、音频、视频或文件结果的预览与下载。

项目特点

• 低成本：按 API 调用消耗资源包额度，省去本地 GPU 和模型部署环境；价格与可用模型以平台页面为准。
• 便捷：从模型资料直接生成 Web 项目，适合同步、异步、文件上传和多媒体结果接口。
• 简单：模型研究、界面设计、代码生成各对应一条命令，阶段结果保存在独立文件中。
• 可控：你可以修改提示词、核对 API 事实、调整页面需求，并保留完整生成记录。

快速开始

运行环境：Node.js 20 或更高版本，以及沐曦 Token 资源包访问令牌。

REM 下载项目并进入项目目录
git clone https://gitlink.org.cn/ccf-ai-infra/model-api-web.git
cd model-api-web

REM 安装本项目所需依赖
npm install

REM 创建只在本地使用的令牌配置文件
copy .env.example .env.local

在 .env.local 中填写 GITEE_AI_TOKEN。该文件已被 .gitignore 排除。

三条命令分别发起一次模型 API 请求。模型不会自行读取仓库，脚本只会提交下表列出的文件；三次请求也不共享对话上下文。

命令	提交给模型的内容	生成结果
npm run research	研究提示词 + 模型 API 原始资料	模型学习笔记
npm run design	网页设计提示词 + 已核对的模型学习笔记	Web 设计需求
npm run build	项目生成提示词 + 已核对的模型学习笔记 + Web 设计需求	原始代码回复 + 可运行 Web 项目

Step 1：研究目标模型

• 在 workspace/input/模型API资料.md 中填写目标模型准确名称，再粘贴模型介绍、在线体验代码、成功响应和 API 文档。
• 直接运行：

REM 调用文本生成模型，整理模型 API 学习笔记
npm run research

脚本会把默认的 01-研究模型提示词.md 和原始资料一起提交给文本生成模型 Qwen3-Next-80B-A3B-Instruct，并把回答写入 workspace/artifacts/01-模型学习笔记.md。确认学习笔记中的模型名称和 API 调用方式，有错误时直接修改并保存，然后进入 Step 2。

如需调整学习重点、笔记结构或补充关注问题，修改 01-研究模型提示词.md，再运行本命令。

Step 2：生成 Web 设计需求

• 直接运行：

REM 根据学习笔记生成 Web 设计需求
npm run design

脚本会把默认的 02-设计网页提示词.md 和已核对的模型学习笔记一起提交给文本生成模型 Qwen3-Next-80B-A3B-Instruct，并把回答写入 workspace/artifacts/02-网页设计需求.md。确认参数控件、操作流程和结果展示，有问题时直接修改并保存，然后进入 Step 3。

如需个性化设计网页，修改 02-设计网页提示词.md 中的页面名称、风格、布局或交互，再运行本命令。

Step 3：生成 Web 项目

• 直接运行：

REM 调用 AI 编程模型，生成完整 Web 项目
npm run build

脚本会把默认的 03-生成项目提示词.md、Step 1 生成的模型学习笔记和 Step 2 生成的 Web 设计需求一起提交给编程模型 Qwen3-Coder-30B-A3B-Instruct。模型的完整回复保存在 workspace/artifacts/03-项目生成原始回复.txt，脚本识别出的项目文件写入 workspace/web-project。

目标模型需要特殊的文件上传、异步轮询或结果预览方式时，修改 03-生成项目提示词.md 中的对应要求，再运行本命令。

运行生成项目

REM 把访问令牌配置复制到生成项目
copy .env.local "workspace\web-project\.env.local"

REM 进入生成项目并安装其依赖
cd "workspace\web-project"
npm install

REM 启动本地 Web 服务
npm start

根据终端显示的本地地址打开页面。生成项目的技术栈和运行细节由目标模型 API 决定。

项目目录

model-api-web/
├─ docs/                 API 入门课程与教学资料
├─ examples/             已验证的示例项目
├─ prompts/              三阶段提示词
├─ scripts/              研究、设计和生成脚本
├─ workspace/
│  ├─ input/             模型 API 原始资料
│  ├─ artifacts/         阶段成果与问题记录
│  └─ web-project/       生成的 Web 项目
├─ .env.example
├─ package.json
└─ README.md

API 入门课程

没有 API 使用经验时，从 docs/学生手册.md 开始。课程包含 API 基础、Token 申领、首次本地请求、完整 Web 制作流程和个人项目开源。

授课教师可查看 docs/课程大纲.md。课程资料入口见 docs/README.md。

开源自己的项目

完成开发后，可以选择两种开源方式：

方式	发布内容	适合场景
网页项目	workspace/web-project 中的可运行源码	分享网页功能，方便其他人安装和体验
完整开发项目	模型资料、提示词、阶段成果和最终网页	展示开发过程，供学习者研究和复现

只发布网页时，把 workspace/web-project 的内容复制到课程仓库外的新目录。发布完整项目时复制：

prompts/
scripts/
workspace/
.env.example
.gitignore
package.json
LICENSE

两种方式都需要更新 README，并检查 .env.local、访问令牌、node_modules、上传文件及运行结果中的个人信息。完整项目还要说明资料来源、提示词修改和阶段成果。

更详细操作步骤见 学生手册的任务 4。

示例

examples 中的教学示例采用完整开发项目格式，同时保存提示词、阶段成果和最终 Web 项目。【待补充】

安全

• 访问令牌只写入 .env.local，不要粘贴到提示词、源代码、截图或提交记录中。
• 生成项目应由服务端读取令牌，浏览器端代码不得包含鉴权信息。
• 提交代码前检查 .env.local、上传文件、运行结果和保存脚本。

贡献与协议

课程维护和项目改进参见 how-to-contribute.md。本项目采用 MulanPSL-2.0 开源协议。