1. 项目背景与核心目标
最近在AtomGit平台上体验了GLM-5和Qwen3.5这两个大语言模型，突发奇想设计了一个有趣的对比实验：让这两个模型根据同一句游戏描述生成可运行的HTML5游戏，然后从代码质量、游戏完整性和创意度等维度进行横向评测。这个项目不仅能够直观展示不同模型在代码生成任务上的差异，也为开发者选择适合自己需求的AI编程助手提供了参考依据。
2. 技术架构设计
2.1 整体系统架构
项目采用前后端分离的设计模式：
- 前端使用Vue3 + Vite构建响应式界面
- 后端基于Fastify框架实现API服务
- 通过AtomGit提供的API接口调用GLM-5和Qwen3.5模型
- 使用iframe沙箱技术安全运行AI生成的游戏代码
2.2 关键技术选型考量
选择Vue3主要考虑到其组合式API更适合管理复杂的交互状态；Fastify相比Express具有更好的性能表现，特别适合处理并发的模型调用请求；iframe沙箱则确保了运行未知代码时的安全性。
3. 核心实现细节
3.1 提示词工程优化
经过多次迭代测试，最终确定的游戏生成提示词模板如下：
javascript复制const PROMPT_TEMPLATE = `你是一个专业的HTML5游戏生成引擎，请根据用户需求生成完整的游戏代码。
要求：
1. 输出必须是完整的HTML文档
2. 包含<!DOCTYPE html>声明
3. 所有CSS和JavaScript必须内联
4. 禁止使用Markdown格式
5. 不要包含任何解释性文字
6. 游戏必须具有可交互性
用户需求：{userInput}`
这个模板的关键在于：
- 明确角色定位（游戏生成引擎）
- 严格限定输出格式（纯HTML）
- 强调代码的完整性和可运行性
3.2 双模型并行调用实现
后端服务使用Promise.all实现并行调用，显著缩短响应时间：
javascript复制async function generateGames(prompt) {
const [glmResult, qwenResult] = await Promise.all([
callModel(prompt, 'GLM-5'),
callModel(prompt, 'Qwen3.5')
]);
return {
glm: processHtml(glmResult),
qwen: processHtml(qwenResult)
};
}
3.3 安全沙箱机制
前端使用严格限制的iframe沙箱来运行生成的游戏代码：
html复制<iframe
sandbox="allow-scripts allow-same-origin"
:srcdoc="gameCode"
></iframe>
这种配置允许执行JavaScript但禁止访问父页面DOM，有效隔离了潜在的安全风险。
4. 模型对比评测
4.1 评测维度设计
我们从以下几个关键维度对两个模型进行系统评测：
| 评测维度 | 说明 |
|---|---|
| 代码质量 | 代码结构、可读性、规范性 |
| 功能完整度 | 游戏核心机制实现程度 |
| 创意表现 | 游戏设计的创新性 |
| 响应速度 | 生成代码所需时间 |
| 错误率 | 生成不可用代码的概率 |
4.2 实测数据对比
以"俄罗斯方块"游戏生成为例：
| 指标 | GLM-5 | Qwen3.5 |
|---|---|---|
| 代码行数 | 420 | 380 |
| 完成时间 | 8.2s | 6.5s |
| 功能完整度 | 95% | 88% |
| 代码注释率 | 15% | 8% |
| 交互流畅度 | 优秀 | 良好 |
4.3 典型问题分析
在测试过程中发现的一些共性问题：
-
代码截断问题
- 原因：超出模型token限制
- 解决方案：优化提示词引导生成更简洁的代码
-
格式污染问题
- 现象：模型输出包含Markdown注释
- 解决方案：添加后处理清洗逻辑
-
交互逻辑缺失
- 现象：生成的游戏缺少关键交互
- 解决方案：在提示词中明确交互要求
5. 实操经验分享
5.1 提示词设计技巧
- 使用"角色扮演"技巧能显著提升输出质量
- 明确列出禁止事项比只说明要求更有效
- 提供输出格式示例可以帮助模型更好理解需求
5.2 性能优化实践
-
缓存策略
javascript复制const cache = new Map(); async function getCachedGeneration(prompt) { if (cache.has(prompt)) { return cache.get(prompt); } const result = await generateGames(prompt); cache.set(prompt, result); return result; } -
负载均衡
- 监控各模型的响应时间
- 动态调整请求分配策略
5.3 安全防护要点
- 永远不要直接eval AI生成的代码
- 沙箱配置应该遵循最小权限原则
- 对生成代码进行静态分析检查危险API调用
6. 扩展应用场景
这个项目的技术方案可以扩展到以下领域：
-
教育领域
- 编程教学辅助工具
- 算法可视化生成
-
原型开发
- 快速验证游戏创意
- 生成UI组件代码
-
代码审查
- 对比不同模型生成的代码质量
- 分析常见错误模式
7. 项目部署指南
7.1 本地开发环境搭建
-
克隆项目仓库：
bash复制git clone https://atomgit.com/ai-game-comparison -
安装依赖：
bash复制cd ai-game-comparison npm install -
配置环境变量：
bash复制cp .env.example .env # 编辑.env文件填写AtomGit API密钥
7.2 生产环境部署
推荐使用Docker容器化部署：
dockerfile复制FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
构建并运行容器：
bash复制docker build -t game-comparison .
docker run -p 3000:3000 game-comparison
8. 未来优化方向
-
模型微调
- 基于生成结果反馈微调提示词
- 建立游戏生成专用模型
-
评估体系完善
- 开发自动化评测工具
- 建立更全面的评估指标
-
交互体验提升
- 添加实时预览功能
- 支持用户反馈收集
在实际开发过程中，我发现GLM-5在生成结构化代码方面表现更稳定，而Qwen3.5则在创意实现上更有优势。建议开发者根据具体需求选择合适的模型，也可以像本项目这样同时使用多个模型取长补短。