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

![界面示意图]

一、项目背景

近期 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, modelB: 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 编程感兴趣，欢迎尝试这些首发模型！

![界面示意图]

一、项目背景

近期 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, modelB: 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 编程感兴趣，欢迎尝试这些首发模型！

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 遇到的问题

六、项目亮点

七、部署指南

八、结语

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具