跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
JavaScriptNode.jsAI大前端

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

综述由AI生成通过构建双模型并行生成 HTML 小游戏的工具,对比 GLM-5 与 Qwen3.5 的代码生成能力。项目采用 Vue3 和 Fastify 架构,实现输入描述后同时调用两个模型接口,并在前端并排展示结果供用户投票。文中解析了提示词工程、并发请求处理、缓存策略及 iframe 沙箱安全机制。评测显示 GLM-5 在代码完整性上表现更佳,适合生产环境;Qwen3.5 更轻量灵活,适合快速原型验证。

zhang发布于 2026/3/22更新于 2026/5/75 浏览
GLM-5 与 Qwen3.5 双模型对比:一句话生成 HTML 小游戏实战

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

项目背景

最近尝试了多款开源大模型,覆盖文本生成、代码开发等多个领域。作为一个开发者,我萌生了一个想法:能不能用 AI 双模型并行生成游戏,让用户对比投票选择最佳版本?

这个实验的核心价值在于横向对比两个模型的优劣,同时通过一次请求获得两个版本的代码,效率翻倍。

玩法与技术架构

核心流程

操作很简单:输入游戏描述(比如'打地鼠'),两个模型同时生成,左右并排展示效果,用户觉得哪个好就投一票。

技术栈

层级技术说明
前端Vue 3 + Vite响应式框架 + 构建工具
后端Fastify高性能 Node.js 框架
AIGLM-5 / Qwen3.5通过 API 调用
安全iframe sandbox沙箱隔离,防止恶意代码

项目结构

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

核心实现细节

1. 提示词工程

想让模型生成能直接跑的游戏,提示词挺关键的。我试了几版,最后定型是这样的:

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

主要就几点:明确告诉它是'游戏生成引擎',禁止输出废话,要求单文件,复制就能跑。

2. 双模型并行调用

这里的关键是并发请求。我们使用 Promise.all 来同时发起对两个模型的调用,减少等待时间。

// server/src/services/model.js
async function callAIModel(prompt, modelConfig) {
  const response = await fetch(, {
    : ,
    : {
      : ,
      : 
    },
    : .({
      : modelConfig.,
      : [{ : , : systemPrompt }],
      : ,
      : modelConfig.,
      : 
    })
  });
   ( response.());
}


   () {
   [resultA, resultB] =  .([
    (prompt),
    (prompt)
  ]);
   { : resultA, : resultB };
}
`${config.api.baseUrl}/chat/completions`
method
'POST'
headers
'Content-Type'
'application/json'
'Authorization'
`Bearer ${config.api.apiKey}`
body
JSON
stringify
model
model
messages
role
'user'
content
stream
false
max_tokens
maxTokens
temperature
0.6
return
extractHtml
await
json
// 双模型并发
export
async
function
callModels
prompt
const
await
Promise
all
callGLM
callQwen
return
modelA
modelB

3. 缓存加速

每次请求都调 API 太慢了,而且成本也高。所以我加了内存缓存 + 文件缓存,24 小时过期。

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

缓存策略:

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

4. 安全沙箱

生成的代码可能包含恶意脚本,所以必须用 iframe 沙箱隔离。

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

即使生成恶意代码,也被限制在沙箱内,无法访问父页面或执行危险操作。

模型对比评测

公平性说明:两个模型统一使用 maxTokens: 4096 参数,确保公平对比。

综合评分

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

实测对比

俄罗斯方块对比:

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

打地鼠对比:

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

选择建议

  • 追求完整度/可维护性:选 GLM-5,适合生产项目。
  • 追求创意点子/快速原型:选 Qwen3.5,适合探索验证。

遇到的问题及解决

问题原因解决方案
代码截断token 限制提示词精简 + 引导生成精简代码
输出污染模型输出 Markdown后处理正则清洗标记
响应时间长API 调用耗时缓存机制 + 加载动画

部署指南

# 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 API 配置
API_KEY=your_api_key_here
API_BASE_URL=https://api.example.com/v1

# 服务端口
PORT=3000

访问 http://localhost:5173 即可体验!

结语

这次双模型并行的体验非常棒,两者都展现出了强大的代码生成能力。如果你也对 AI 编程感兴趣,不妨试试这种对比模式,看看哪个模型更适合你的场景。

目录

  1. GLM-5 与 Qwen3.5 双模型对比:一句话生成 HTML 小游戏实战
  2. 项目背景
  3. 玩法与技术架构
  4. 核心流程
  5. 技术栈
  6. 项目结构
  7. 核心实现细节
  8. 1. 提示词工程
  9. 2. 双模型并行调用
  10. 3. 缓存加速
  11. 4. 安全沙箱
  12. 模型对比评测
  13. 综合评分
  14. 实测对比
  15. 选择建议
  16. 遇到的问题及解决
  17. 部署指南
  18. 1. 克隆项目
  19. 2. 配置环境变量
  20. 编辑 .env,填入 AI API Key
  21. 3. 安装依赖并启动
  22. AI API 配置
  23. 服务端口
  24. 结语
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 向大模型学习:优化人类思维模式与认知结构
  • Java 解析磁力链(Magnet URI)实现指南
  • OpenClaw 本地 AI 智能体入门与实战指南
  • VS Code 中配置 GitHub Copilot Agent Skills 指南
  • 前端拖拽交互实现:从原生 API 到专业库
  • 在 Cursor 中配置和使用 MCP 服务
  • Linux 多线程:深入互斥与同步机制
  • JavaScript 运算符与流程控制全解析
  • lora-scripts 实现 Stable Diffusion 全流程自动化微调
  • JDK 17 安装与配置指南
  • Xilinx SRIO IP 核详解与 FPGA 实现仿真流程
  • 大模型在机器视觉行业的落地路径
  • IntelliJ IDEA 中安装 Python xlrd 模块
  • 大模型面试核心知识点与参考答案
  • 大模型新手指南:推荐五本核心入门书籍
  • 从零搭建 AI Agent 框架:原理、ReAct 与实现
  • 基于 DeepSeek 与 Cursor 构建智能代码审查工具实战
  • 8 篇必读的大模型论文精选
  • 前端核心知识点梳理与面试复习
  • 8 篇必读的大模型论文精选

相关免费在线工具

  • 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