![界面示意图]
一、项目背景
近期 AI 社区上线了多款开源大模型，包括 GLM-5、Qwen3.5 等，覆盖文本生成、代码开发、多模态等多个领域。
作为一个喜欢折腾的开发者，我萌生了一个想法：能不能用 AI 双模型并行生成游戏，让用户对比投票选择最佳版本？
这个想法的核心价值：
- 横向对比：两个模型同台竞技，优劣一目了然
- 效率翻倍：一次请求，获得两个版本的代码
- 用户参与：投票机制增加趣味性和互动性
二、用 GLM-5 生成项目原型
我直接在平台上问 GLM-5，让它帮我搭个项目骨架：
我的提问：
请生成一个完整的"一句话生成游戏对比工具"项目代码。前端 Vue3，后端 Fastify。用户输入游戏描述，后端同时调用 GLM-5 和 Qwen3.5 生成 HTML 游戏，并排展示在 iframe 中，左右分别显示两个模型的游戏，每个游戏下方有点赞按钮，底部显示历史记录。API 地址：[AI 服务接口]。输出前后端完整代码。
GLM-5 给了完整的前后端代码，我在这基础上改了改：
- 加了缓存，不然每次都调 API 太慢了
- 优化了下界面，改成左右双栏
- 用 iframe 沙箱隔离，防止生成奇怪的代码
- 加了错误处理，体验好一点
项目就这么跑起来了。
![界面示意图]
三、项目介绍
3.1 怎么玩
输入游戏描述 -> 双模型并行生成 -> GLM-5 生成游戏 A -> Qwen3.5 生成游戏 B -> 并排展示 -> 用户投票选择
操作很简单：
- 输入你想玩的游戏（比如"打地鼠"）
- 两个模型同时生成
- 左右对比看效果，觉得哪个好就投一票
![界面示意图]
3.2 技术架构
AI 模型 -> 后端 (Fastify) -> 前端 (Vue3 + Vite)
输入组件 -> 游戏预览 -> 投票组件
API 路由 -> 模型调用服务 -> 缓存服务
GLM-5 / Qwen3.5
技术栈：
| 层级 | 技术 | 说明 |
|---|---|---|
| 前端 | Vue 3 + Vite | 响应式框架 + 构建工具 |
| 后端 | Fastify | 高性能 Node.js 框架 |
| AI | GLM-5 / Qwen3.5 | 通过 AI 模型 API 调用 |
| 安全 | iframe sandbox | 沙箱隔离，防止恶意代码 |
3.3 项目结构
ai-game-generator/
├── client/ # 前端
│ ├── src/
│ │ ├── App.vue # 主组件
│ │ └── main.js
│ └── vite.config.js
├── server/ # 后端
│ ├── src/
│ │ ├── config.js # 模型配置
│ │ ├── index.js # 入口文件
│ │ ├── routes/
│ │ │ └── generate.js
│ │ └── services/
│ │ ├── model.js # API 调用
│ │ └── cache.js # 缓存服务
│ └── package.json
└── .env.example # 环境变量模板
四、核心实现
4.1 提示词
想让模型生成能直接跑的游戏，提示词挺关键的。我试了几版，最后定型是这样的：
const GAME_PROMPT_TEMPLATE = `你是一个 HTML 小游戏生成引擎。
严格要求：
1. 只输出完整 HTML 文档
2. 必须包含 <!DOCTYPE html>
3. 内嵌 CSS
4. 内嵌 JS
5. 不允许 Markdown
6. 不允许解释
7. 不允许外链资源
8. 代码必须可直接运行
9. 游戏必须有交互逻辑
用户需求：{userPrompt}`;
主要就几点：
- 明确告诉它是"游戏生成引擎"
- 禁止输出废话（Markdown、解释）
- 要求单文件，复制就能跑
4.2 双模型并行调用
// server/src/services/model.js
async function callGitCodeAPI(prompt, modelConfig) {
const response = await fetch(`${config.gitcode.baseUrl}/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${config.gitcode.apiKey}`
},
body: JSON.stringify({
model: modelConfig.model,
messages: [{ role: 'user', content: systemPrompt }],
stream: false,
max_tokens: modelConfig.maxTokens,
temperature: 0.6
})
});
return extractHtml(await response.json());
}
// 双模型并发
export async function callModels(prompt) {
const [resultA, resultB] = await Promise.all([callGLM(prompt), callQwen(prompt)]);
return { modelA: resultA, : resultB };
}
4.3 缓存加速
// 内存缓存 + 文件缓存，24 小时过期
const memoryCache = new Map();
const CACHE_TTL = 24 * 60 * 60 * 1000;
缓存策略：
| 缓存层 | 响应时间 | 持久性 |
|---|---|---|
| 内存 | <1ms | 进程重启丢失 |
| 文件 | ~10ms | 24 小时有效 |
4.4 安全沙箱
<iframe srcdoc="modelA?.html" sandbox="allow-scripts allow-popups allow-forms"></iframe>
沙箱权限说明：
| 权限 | 说明 |
|---|---|
allow-scripts | 允许执行 JavaScript |
allow-popups | 允许弹窗 |
allow-forms | 允许表单提交 |
即使生成恶意代码，也被限制在沙箱内，无法访问父页面或执行危险操作。
五、模型对比评测
公平性说明：两个模型统一使用
maxTokens: 4096参数，确保公平对比。
5.1 综合评分
| 维度 | GLM-5 | Qwen3.5 |
|---|---|---|
| 代码结构 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 创意程度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 完整性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 简洁度 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
5.2 实测对比
俄罗斯方块对比：
![界面示意图]
| 维度 | GLM-5 | Qwen3.5 |
|---|---|---|
| 界面信息 | 分数/等级/预览/控制提示 | 基础布局 |
| 代码行数 | ~400 行 | ~250 行 |
| 可维护性 | 高，结构清晰 | 中，适合二次开发 |
打地鼠对比：
![界面示意图]
| 维度 | GLM-5 | Qwen3.5 |
|---|---|---|
| 视觉主题 | 统一，有氛围感 | 简洁，偏功能导向 |
| 交互反馈 | 地鼠形象 ok，敲打地鼠联动动画流畅 | 地鼠形象因为生成失败，动画效果不明显，游戏体验不好 |
| 游戏体验 | 完整，可直接使用 | 需补齐素材/动画 |
5.3 选择建议
| 你的需求 | 追求什么？ | 推荐模型 |
|---|---|---|
| 完整度/可维护性 | 生产项目 | GLM-5 |
| 创意点子/快速原型 | 探索验证 | Qwen3.5 |
5.4 遇到的问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 代码截断 | token 限制 | 提示词精简 + 引导生成精简代码 |
| 输出污染 | 模型输出 Markdown | 后处理正则清洗标记 |
| 响应时间长 | API 调用耗时 | 缓存机制 + 加载动画 |
六、项目亮点
| 亮点 | 说明 |
|---|---|
| 🎮 双模型并行 | 一个请求，两个结果，对比直观 |
| ⚡ 即时可玩 | 生成 HTML 直接运行，无需编译 |
| 🗳️ 投票互动 | 增加趣味性和用户参与感 |
| 🔒 安全沙箱 | iframe 隔离，保障安全 |
| 💾 智能缓存 | 节省成本，毫秒级响应 |
七、部署指南
# 1. 克隆项目
git clone https://github.com/example/ai-game-generator
cd ai-game-generator
# 2. 配置环境变量
cp .env.example .env
# 编辑 .env，填入 AI 服务 API Key
# 3. 安装依赖并启动
npm install
npm run dev
环境变量配置：
# AI 服务配置
AI_API_KEY=your_api_key_here
AI_BASE_URL=https://api.ai-service.com/v1
# 服务端口
PORT=3000
访问 http://localhost:5173 即可体验！
八、结语
这次使用开源大模型的体验非常棒！GLM-5 和 Qwen3.5 都展现出了强大的代码生成能力。
| 模型 | 适合场景 | 推荐指数 |
|---|---|---|
| GLM-5 | 追求完整性和规范性，适合稳定项目 | ⭐⭐⭐⭐⭐ |
| Qwen3.5 | 追求创意和灵活性，适合快速原型 | ⭐⭐⭐⭐ |
如果你也对 AI 编程感兴趣，欢迎尝试这些首发模型！
