GLM-5 与 Qwen3.5 双模型对比：一句话生成 HTML 小游戏 | 极客日志

JavaScriptNode.jsAI大前端

GLM-5 与 Qwen3.5 双模型对比：一句话生成 HTML 小游戏

一个基于 Vue3 和 Fastify 的双模型游戏生成工具。通过并行调用 GLM-5 和 Qwen3.5 接口，用户输入描述即可生成两个版本的 HTML 小游戏进行对比。项目包含缓存加速、沙箱安全隔离及投票功能。评测显示 GLM-5 在代码完整性和可维护性上更优，适合生产；Qwen3.5 在创意和简洁度上表现更好，适合快速原型。

独立开发者发布于 2026/3/30更新于 2026/5/2331 浏览

![界面示意图]

一、项目背景

近期 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 项目结构

相关免费在线工具

RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online
Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online
随机西班牙地址生成器
随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。在线工具，随机西班牙地址生成器在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

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 # 环境变量模板

const GAME_PROMPT_TEMPLATE = `你是一个 HTML 小游戏生成引擎。
严格要求：
1. 只输出完整 HTML 文档
2. 必须包含 <!DOCTYPE html>
3. 内嵌 CSS
4. 内嵌 JS
5. 不允许 Markdown
6. 不允许解释
7. 不允许外链资源
8. 代码必须可直接运行
9. 游戏必须有交互逻辑
用户需求：{userPrompt}`;

// 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, modelB: resultB };
}

// 内存缓存 + 文件缓存，24 小时过期
const memoryCache = new Map();
const CACHE_TTL = 24 * 60 * 60 * 1000;

缓存层	响应时间	持久性
内存	<1ms	进程重启丢失
文件	~10ms	24 小时有效

<iframe srcdoc="modelA?.html" sandbox="allow-scripts allow-popups allow-forms"></iframe>

权限	说明
`allow-scripts`	允许执行 JavaScript
`allow-popups`	允许弹窗
`allow-forms`	允许表单提交

维度	GLM-5	Qwen3.5
代码结构	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
创意程度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
完整性	⭐⭐⭐⭐⭐	⭐⭐⭐
简洁度	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

维度	GLM-5	Qwen3.5
界面信息	分数/等级/预览/控制提示	基础布局
代码行数	~400 行	~250 行
可维护性	高，结构清晰	中，适合二次开发

维度	GLM-5	Qwen3.5
视觉主题	统一，有氛围感	简洁，偏功能导向
交互反馈	地鼠形象 ok，敲打地鼠联动动画流畅	地鼠形象因为生成失败，动画效果不明显，游戏体验不好
游戏体验	完整，可直接使用	需补齐素材/动画

你的需求	追求什么？	推荐模型
完整度/可维护性	生产项目	GLM-5
创意点子/快速原型	探索验证	Qwen3.5

问题	原因	解决方案
代码截断	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

模型	适合场景	推荐指数
GLM-5	追求完整性和规范性，适合稳定项目	⭐⭐⭐⭐⭐
Qwen3.5	追求创意和灵活性，适合快速原型	⭐⭐⭐⭐

GLM-5 与 Qwen3.5 双模型对比：一句话生成 HTML 小游戏

一、项目背景

二、用 GLM-5 生成项目原型

三、项目介绍

3.1 怎么玩

3.2 技术架构

3.3 项目结构

更多推荐文章

相关免费在线工具

四、核心实现

4.1 提示词

4.2 双模型并行调用

4.3 缓存加速

4.4 安全沙箱

五、模型对比评测

5.1 综合评分

5.2 实测对比

5.3 选择建议

5.4 遇到的问题

六、项目亮点

七、部署指南

八、结语

更多推荐文章

相关免费在线工具

GLM-5 与 Qwen3.5 双模型对比：一句话生成 HTML 小游戏

一、项目背景

二、用 GLM-5 生成项目原型

三、项目介绍

3.1 怎么玩

3.2 技术架构

3.3 项目结构

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

四、核心实现

4.1 提示词

4.2 双模型并行调用

4.3 缓存加速

4.4 安全沙箱

五、模型对比评测

5.1 综合评分

5.2 实测对比

5.3 选择建议

5.4 遇到的问题

六、项目亮点

七、部署指南

八、结语

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具