用鹈鹕骑车测试 Mac mini6 32 G 上的三个本地模型

摘要

同一句提示词「制作鹈鹕骑自行车动画」，在 mini6 上让三个模型各运行一次。

• Strata + Qwen3.8-Flash-Next（125B MoE、2-bit）：3 分 20 秒输出一个 6.4 KiB 的纯 CSS 页面。页面用块级元素拼装，结构简单，动画正常运行，几何检查未发现错误旋转。

• Ollama qwen3.8:27b-mlx：8 分 05 秒输出一个 15.6 KiB 的分层 SVG 页面。页面包含完整的自行车结构和分层场景，但前轮、后轮和曲柄的旋转原点错误。

• Ollama gemma4:12b-mlx：1 分 14 秒输出一个 5.5 KiB 的 SVG 页面。两个轮子位于同一个组内，绕画布中心一起旋转。

三个页面都能加载并播放动画，未记录运行时错误。Qwen 与 Gemma 的故障表现为元素绕错误原点旋转，浏览器不会就此报错。

一、测试条件

三个轮次的调用方式不同：

• Strata 使用 Web Chat，完整 HTML 直接出现在回答正文中，没有工具调用。

• 两个 Ollama 轮次在 mini6 上运行。截图只显示了模型标签 Qwen 3.8 27B MLX (64k) 和 Gemma 4 12B MLX (64k)，没有显示客户端应用名，本文按模型标签区分。Qwen 轮次开启工具，自己写入文件并打开浏览器；Gemma 轮次只把代码贴在聊天中。

Strata 轮次运行期间，siltop 记录到内存占用 26.0/32.0 GB，swap 已用 16.8 GB。表中的耗时对应这次运行环境，不作为不同设备之间的基准。

二、结果总表

Strata 轮次的应用侧统计

Qwen 27B 轮次的应用侧统计

Gemma 12B 轮次的应用侧统计

两项补充数据：

• Gemma 轮次为 2,709 token / 74 秒，按应用侧计数计算为 36.6 tok/s。10-13 裸跑记录为 34.85 tok/s。

• Qwen 轮次的应用界面只记录末条消息 472 token，正文代码由工具调用写入，总 token 数没有记录。

三、逐版复盘

3.1 Strata：div 拼装，几何正常

Strata 版渲染

这一版全部用 div 和 CSS 拼装：

• 车轮是 border-radius: 50% 的圆，辐条由 ::after 上的 repeating-linear-gradient 绘制。车轮容器不旋转，旋转的是内部辐条层。

• 车架是一个红色圆角方块，车座和车把各用一个小方块表示。鹈鹕由三个圆和一个圆角矩形嘴组成。

• 页面包含 8 项动画：辐条旋转、车身上下浮动、翅膀扇动、喙部轻啄、两条腿交替摆动、云层漂移、路面虚线滚动、速度线闪烁。

• 回答附有一张动画说明表，逐项写明元素和动作，与代码一致。

页面结构有限：比例与真实自行车不一致；没有曲柄和脚踏，两条腿原地摆动；鸟身位于车架上方，没有与车座接触。该版本是三个页面中唯一通过几何检查的页面。

几何结果：.wheel 和 .bike 的最大中心漂移均为 3.0 px，与车身 translateY(-3px) 的浮动一致；最大尺寸漂移为 0；报告中的 suspect_wrong_pivot 为空。

3.2 Qwen 27B：结构完整，旋转原点错误

Qwen 版连续六帧（真实时间）

这一版包含完整的自行车结构和分层场景：

• 太阳、六朵云、远山、路边小树和路面虚线分别以不同速度滚动，形成视差。

• 自行车包含下管、上管、座管、前叉、后下叉、辐条轮、曲柄和脚踏，鹈鹕的蹼足位于脚踏上。

• 鹈鹕有喉囊、眼睛高光、尾羽和扇动的翅膀，并带有一个气泡台词。

• 模型自己写入文件、打开浏览器，并在回复中列出可调参数所在的行。

几何上，前轮、后轮和曲柄都绕错误原点旋转：

• 前轮最大中心漂移 749.8 px，尺寸漂移 48.8 px。

• 后轮最大中心漂移 361.0 px，尺寸漂移 48.8 px。

• 曲柄最大中心漂移 597.4 px，尺寸漂移 68.2 px。

帧条中，前轮没有留在前叉上，而是绕画布右上方的一个点旋转；曲柄和两只脚随同一组一起偏移。后轮也有 361.0 px 的漂移，只是幅度小于前轮。

3.3 Gemma 12B：输出最快，轮组绕错原点

Gemma 版两帧对比

这一轮用时 1 分 14 秒，输出 5.5 KiB、165 行，没有开启工具。模型把 HTML 贴在聊天中，需要用户自己保存为 pelican.html。

页面使用浅青背景、白色卡片、圆角画布、红色车架和虚线辐条。几何和结构存在以下问题：

• 两个轮子位于同一个 <g class="wheel"> 内，绕同一个点旋转。t=0.07 s 时两轮左高右低，t=1.32 s 时变为右高左低。

• 车架与轮心不对齐，鸟身悬在车架上方，腿部悬空，没有脚踏和曲柄。

• 整组从左向右平移 700 px，并放大到 1.2 倍；路面不滚动。

• 标题写「鹈鹕的环球旅行」，图标使用骑车男 emoji。

几何结果为 .wheel 最大中心漂移 132.5 px，最大尺寸漂移 114.7 px，报告判定为 suspect_wrong_pivot。

四、旋转原点参考系

两个失败页面都使用了错误的 transform-origin 参考系，具体写法不同。

4.1 Gemma：两个轮子共用同一个组

1
2
3
4

.wheel {
  animation: rotateWheel 1s linear infinite;
  transform-origin: center;
}

1
2
3
4

<g class="wheel">
  <circle cx="50"  cy="150" r="30" />
  <circle cx="150" cy="150" r="30" />
</g>

这里有两个问题：

01两个轮子位于同一个 <g> 内，只能作为一个整体旋转，无法分别绕各自轮心旋转。

02.wheel 设置了 transform-origin: center，但没有设置 transform-box。SVG 元素的 transform-box 默认是 view-box，因此 center 指的是 viewBox="0 0 200 200" 的中心 (100,100)，不是两个轮心。

结果，轮组以 1 秒为周期绕 (100,100) 旋转，两个轮心到该点的距离均为 70.7 个用户单位。实测中心漂移为 132.5 px，尺寸漂移为 114.7 px，与画面中的高低翻转对应。

4.2 Qwen：fill-box 与内联像素原点同时使用

1
2
3
4
5
6
7
8
9
10

.wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin .55s linear infinite;
}

.crank {
  transform-box: fill-box;
  transform-origin: center;
}

1
2
3

<g class="wheel" style="transform-origin:150px 300px">   <!-- 后轮 -->
<g class="wheel" style="transform-origin:510px 300px">   <!-- 前轮 -->
<g class="crank" style="transform-origin:330px 300px">

内联样式的优先级高于样式表，所以 HTML 中的 150px 300px、510px 300px 和 330px 300px 覆盖了 CSS 中的 center。

同时，transform-box: fill-box 把原点的参考系改为元素自身包围盒。这里的像素值从包围盒左上角起算，而代码中的数值按整张 SVG 的用户坐标编写。两套坐标混用后，三个旋转原点都落在元素包围盒之外。

本次几何结果：

修正方向是让每个旋转部件单独成组，并让旋转原点使用同一套参考系：

1
2
3
4
5

.wheel,
.crank {
  transform-box: fill-box;
  transform-origin: center;
}

1
2
3

<g class="wheel">前轮</g>
<g class="wheel">后轮</g>
<g class="crank">曲柄</g>

Qwen 版需要删除内联的像素原点。若某个部件不能使用包围盒中心，应按 fill-box 重新计算原点，不能继续套用 SVG 用户坐标。本文没有对修正后的页面重新运行几何检查。

4.3 三份实现的差异

三份输出的实现方式不同：

• Strata 的旋转对象是每个轮子内部的辐条伪元素。两个轮子分别位于独立的块级盒中，使用 CSS 盒的默认中心原点。

• Qwen 使用 SVG fill-box，同时保留了按 SVG 用户坐标编写的内联像素原点。

• Gemma 把旋转动画加在包含两个轮子的 SVG 组上，并使用默认的 view-box 原点。

本次出现的几何故障与上述写法对应。三份输出在结构复杂度、代码量和交付速度上也有差异：Qwen 包含最多的自行车结构和文案，Gemma 输出量最小、耗时最短，Strata 是唯一通过几何检查的页面。

五、结论

本次结果按用途归纳：

• 需要一次交付即可运行的动画：Strata + Qwen3.8-Flash-Next 的页面通过几何检查。耗时 3 分 20 秒，输出速度 14.7 tok/s。

• 需要完整自行车结构和较多画面细节：qwen3.8:27b-mlx 的输出包含最多结构元素和文案，但当前文件有三个旋转原点错误。修正时需要拆分轮组、删除内联像素原点，并重新执行几何检查。

• 需要一分钟内的代码草稿：gemma4:12b-mlx 用时 1 分 14 秒。当前文件未通过几何检查，使用前需要把两个轮子拆成独立组，并分别设置原点。

可以把以下条件直接写进生成提示词：

每个会旋转的部件单独成组；旋转统一使用 transform-box: fill-box; transform-origin: center;，不要写 px 原点；不要把一个以上的轮子放进同一个组。交稿前检查：任一旋转部件在动画一周内，除设计位移外的包围盒中心漂移应小于 3 px。

以上结论只对应本次三个输出，不外推到模型在其他提示词、其他代码结构或其他硬件条件下的表现。

六、局限

• 每个模型只运行一次，使用同一句提示词，没有控温、固定种子或重复取均值。表中的数字不是稳定基准。

• 评估范围是页面结构和动画几何，没有做审美评分。

• Strata 轮次运行期间内存占用 26.0/32.0 GB、swap 16.8 GB，耗时不能与其他设备条件直接比较。

• 两个 Ollama 轮次的截图没有显示客户端应用名；工具调用次数取自界面显示，没有结构化调用日志。

• Qwen 轮次没有记录总 token 数。

• 修正后的代码没有重新测试。

可复核材料

• 三个原始页面：/Users/mac/tmp/bike2.html（Strata）、/Users/mac/tmp/bike.html（Gemma）、/Users/mac/Downloads/pelican-bike.html（Qwen）

• 几何自检脚本：00_META/scripts/check-web-anim-geometry.py（纯标准库，本机 Chrome 即可运行）

• 自检报告：assets/2026-10-24-mini6-pelican-bike/geometry-report.json

• 渲染帧与对比图：同目录 render-*.png；应用侧统计截图：ui-*.png

• 应用侧原始截图：~/Desktop/ 下 strata*.png、qwen3.8-27b-mlx.png、gemma4-12b-mlx*.png

• 相关记录：2026-10-18-mini6-strata-qwen3.8-flash-next-q2_0-deployment-and-capability-test.md、01_AREAS/learning/2026-10-13-hermes-local-model-benchmark-review.md