GLM-5.1无需明确指令即可生成SVG和CSS动画

关键信息

模型最初因CSS变换与SVG定位冲突导致动画失效，但在后续提示下，它通过使用<code>&lt;animateTransform&gt;</code>正确修复了问题，实现了坐标系统的精确处理。

资讯摘要

来自Z.ai的GLM-5.1是一个拥有7540亿参数的开源大模型，它出人意料地不仅生成了一个鹈鹕骑自行车的SVG图像，还自动创建了一个包含CSS动画的完整HTML页面，且没有收到任何明确指令。初始动画存在一个错误：鹈鹕从屏幕消失。

但在用户提出反馈后，GLM-5.1诊断出问题根源——CSS变换覆盖了SVG定位属性，并提供了一个修正版本，使用正确的SVG动画技术（如<code>&lt;animateTransform&gt;</code>），甚至实现了喙部细微的摆动效果。这展示了模型对复杂Web技术的理解能力和自我纠错能力，是实现自主长程任务的重要一步。

资讯正文

GLM-5.1：迈向长程任务

中国AI实验室Z.ai的最新模型是一个拥有7540亿参数、体积达1.51TB（在Hugging Face上）的巨型模型，许可证为MIT，与他们此前发布的GLM-5模型规模相同，并共享同一份论文。

该模型可通过OpenRouter访问，我让它帮我画一只鹈鹕：

llm install llm-openrouter

llm -m openrouter/z-ai/glm-5.1 'Generate an SVG of a pelican on a bicycle'

这一次发生了有趣的新情况——未加提示，模型就给了我一个HTML页面，其中不仅包含SVG图像，还附带了一组CSS动画！

SVG图像非常出色，可能是我目前最喜欢的一个开源权重模型生成的作品：


但动画却出了问题：


那只鹈鹕飘到了左上角。

我通常不会对这个鹈鹕测试做后续追问，但这次我破例了：

llm -c 'the animation is a bit broken, the pelican ends up positioned off the screen at the top right'

GLM 5.1回复道：

“问题是CSS的transform动画会覆盖SVG元素上的transform属性，导致鹈鹕失去定位并飞向右上角。解决方法是将定位（SVG属性）和动画（内部组）分开，并使用<animateTransform>来处理SVG旋转，因为它能正确处理坐标系统。”

随后它输出了一份新的HTML文件，修复了这个问题！


我尤其喜欢鹈鹕喙部的动画效果，在SVG注释中这样描述：

<!-- Pouch (lower beak) with wobble -->

<g>

GLM-5.1：迈向长周期任务

标签：css、svg、ai、生成式ai、llms、鹈鹕骑自行车、llm发布、中国ai、glm

来源与参考

1. 原始链接
2. GLM-5.1: Towards Long-Horizon Tasks