GLM-5 与 Qwen3.5 双模型并行生成 HTML 小游戏实战对比
提示：本文基于实际项目经验整理，旨在探讨大模型在代码生成领域的表现差异。
一、项目背景
近期 AI 社区上线了多款开源大模型，覆盖文本生成、代码开发等多个领域。作为一个喜欢折腾的开发者，我萌生了一个想法：能不能用 AI 双模型并行生成游戏，让用户对比投票选择最佳版本？
这个想法的核心价值在于：
- 横向对比：两个模型同台竞技，优劣一目了然
- 效率翻倍：一次请求，获得两个版本的代码
- 用户参与：投票机制增加趣味性和互动性
二、用 AI 生成项目原型
我直接在平台上让模型帮我搭个项目骨架，前端使用 Vue3，后端使用 Fastify。
我的提问策略：
请生成一个完整的"一句话生成游戏对比工具"项目代码。前端 Vue3，后端 Fastify。用户输入游戏描述，后端同时调用两个模型生成 HTML 游戏，并排展示在 iframe 中，左右分别显示两个模型的游戏，每个游戏下方有点赞按钮，底部显示历史记录。输出前后端完整代码。
模型给出了完整的前后端代码，我在其基础上做了以下优化：
- 加了缓存，避免每次都调 API 导致速度过慢
- 优化了下界面，改成左右双栏布局
- 用 iframe 沙箱隔离，防止生成奇怪的代码影响主页面
- 增加了错误处理，提升用户体验
![项目界面截图]
三、项目介绍
3.1 玩法说明
操作非常简单：
- 输入你想玩的游戏（比如'打地鼠'）
- 两个模型同时开始生成
- 左右对比看效果，觉得哪个好就投一票
![交互流程示意]
3.2 技术架构
系统主要包含以下几个部分：
- AI 模型：负责生成游戏代码
- 后端 (Fastify)：处理请求、调用模型、管理缓存
- 前端 (Vue3 + Vite)：提供输入组件、游戏预览和投票功能
技术栈详情：
| 层级 | 技术 | 说明 |
|---|---|---|
| 前端 | Vue 3 + Vite | 响应式框架 + 构建工具 |
| 后端 | Fastify | 高性能 Node.js 框架 |
| 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
│ │ └── cache.js
│ └── package.json
└── .env.example
