Claude Fable 5 vs GPT-5.5：一道 Canvas 动画题测出“输出预算”这个坑
Claude Fable 5 vs GPT-5.5：一道 Canvas 动画题测出“输出预算”这个坑
适合读者：正在做大模型评测、AI 编程助手选型、前端代码生成测试、模型网关接入的开发者。
本文重点：不是做模型排行榜，而是记录一次可复现的小测试：同一道数学题、物理题、前端动画题，分别让claude-fable-5和gpt-5.5完成。真正有价值的结论不是“谁更强”，而是长代码任务里必须记录max_tokens、completion_tokens和finish_reason。
先说结论
这次我把模型对比题目从“简单数学 + 简单代码”升级了一档：
| 题目 | 类型 | 主要考察点 |
|---|---|---|
| MATH-003 | 数学期望 | 连续抛硬币直到 HH，不能直接用 1 / 概率 |
| PHYS-003 | 物理综合 | 非弹性碰撞、动量守恒、弹簧压缩、摩擦做功 |
| CODE-003-ANIM | 前端动画 | 一次性生成完整 HTML Canvas 动画 |
实测结果：
| 题目 | claude-fable-5 | gpt-5.5 |
|---|---|---|
| 数学期望 | 正确 | 正确 |
| 物理综合 | 正确 | 正确 |
Canvas 动画，max_tokens=3200 |
被截断 | 完整输出 |
Canvas 动画，Claude 复测 max_tokens=8000 |
完整输出 | 未复测 |
也就是说，claude-fable-5 第一次动画题不是“不会写”，而是输出预算不够。把 max_tokens 从 3200 提高到 8000 后，它可以输出完整 HTML，并且浏览器验证动画能正常运行。
这个坑很常见：如果只看最终文件不完整，很容易误判成模型能力不行；但看 finish_reason=length 和 completion_tokens=3200，就会发现它是被输出上限截断了。
测试环境
Base URL: https://cn.crazyrouter.com/v1
Endpoint: POST /v1/chat/completions
模型 1: claude-fable-5
模型 2: gpt-5.5
测试日期: 2026-07-06
请求时保持低随机性：
temperature = 0.2
本站测试入口：
https://crazyrouter.com/register?utm_source=csdn&utm_medium=article&utm_campaign=model_compare_series&utm_content=fable5_gpt55_round2_animation
第一题：连续抛硬币直到 HH
题目：
连续抛一枚公平硬币，直到第一次出现连续两个正面 HH 为止。
1. 求停止时所需抛掷次数的期望值。
2. 请用状态方程或递推方式推导，不要只给结论。
3. 最后用一句话解释为什么答案不是 4。
标准解法是建两个状态：
E0：当前没有 H 前缀时，到第一次出现 HH 还需要的期望次数
E1：当前已经有一个 H 前缀时，到第一次出现 HH 还需要的期望次数
状态方程：
E0 = 1 + 1/2 E1 + 1/2 E0
E1 = 1 + 1/2 * 0 + 1/2 E0
解得：
E0 = 6
两个模型都答对了。
这题的关键是不能直接写 1 / (1/4) = 4，因为“连续两个正面”是有状态记忆的，相邻窗口不是独立试验。
第二题：子弹嵌入木块后压缩弹簧
题目摘要：
子弹 m = 0.02 kg，v = 300 m/s
木块 M = 1.98 kg，初始静止
子弹嵌入木块
弹簧 k = 800 N/m
桌面动摩擦因数 μ = 0.10
g = 9.8 m/s^2
要求：
1. 求碰撞后共同速度
2. 求弹簧最大压缩量
3. 说明哪里用动量守恒，哪里用能量关系
标准思路：
碰撞瞬间用动量守恒：
mv = (M + m)V
V = 3.0 m/s
碰后压缩弹簧阶段用能量关系：
1/2(M+m)V^2 = 1/2kx^2 + μ(M+m)gx
9 = 400x^2 + 1.96x
x ≈ 0.148 m
两个模型也都答对了。
这里我更关注它们是否会犯一个经典错误：把子弹嵌入木块的全过程当作机械能守恒。
这一步不能用机械能守恒，因为完全非弹性碰撞会有大量机械能转化为内能、形变能和声能。
claude-fable-5 在解释上更直观一些，它额外指出：
碰前动能约 900 J
碰后整体动能约 9 J
这个对比能很直接地说明为什么碰撞过程机械能不守恒。
第三题：让模型生成一个 Canvas 动画
这轮真正有区分度的是前端动画题。
我要求模型只输出完整 HTML，不能解释，直接可保存为 .html 打开运行。
核心要求：
1. 原生 HTML/CSS/JavaScript
2. 不能依赖外部库、外部图片或网络资源
3. 页面包含 800x500 canvas
4. 中心恒星 + 至少 5 个绕行粒子
5. requestAnimationFrame 驱动
6. 半透明轨迹
7. 暂停/继续、重置、速度滑杆
8. 左上角显示 FPS 和速度倍率
9. 至少包含 init、update、draw、animate 四个函数
10. 刷新后轨道布局一致
GPT-5.5：原始测试一次过
gpt-5.5 在 max_tokens=3200 的原始测试里输出了完整 HTML。
静态检查结果：
包含 <!DOCTYPE html>
包含 </html>
包含 requestAnimationFrame
包含 init / update / draw / animate
包含暂停、重置、速度滑杆
canvas 为 800x500
浏览器运行验证：
控制台错误：无
canvas 尺寸：800x500
控件：存在
700ms 后 changedPixels = 37512
hasAnimation = true
截图如下：
这说明它不是只生成了静态画面，而是真的在跑动画。
Claude Fable 5：第一次被截断
claude-fable-5 第一次动画题的代码方向是对的：它写了页面结构、canvas、控件、粒子配置、轨道、恒星和 HUD。
但原始测试里有一个关键问题：
max_tokens = 3200
finish_reason = length
completion_tokens = 3200
HTML 没有 </html>
也就是说，它不是自然结束，而是正好打满了输出上限。
第一次输出的 HTML 末尾停在类似这样的地方：
ctx.beginPath();
后面的粒子绘制、事件绑定、animate、</script>、</body>、</html> 都没输出完。
这份文件不能直接运行。
如果只看“代码不完整”，很容易下结论：Claude Fable 5 不适合这类前端动画任务。
但这个结论是不严谨的，因为 finish_reason=length 已经提示我们：它是输出长度到顶了。
复测：把 Claude Fable 5 的 max_tokens 提到 8000
为了确认原因，我单独复测了一次 claude-fable-5：
| 测试 | max_tokens | finish_reason | completion_tokens | HTML 是否闭合 |
|---|---|---|---|---|
| 同参数复测 | 3200 | length | 3200 | 否 |
| 提高输出预算 | 8000 | stop | 3975 | 是 |
结论很明确：
3200 不够写完
8000 可以写完
实际只用了 3975 个 completion tokens
然后我把 8000 版本保存为 HTML，用浏览器打开验证：
控制台错误：无
canvas 尺寸：800x500
控件：暂停、重置、速度滑杆均存在
700ms 后 changedPixels = 15795
hasAnimation = true
Claude Fable 5 复测通过后的截图：
所以，正确结论不是“Claude Fable 5 不会写动画”，而是：
Claude Fable 5 在 max_tokens=3200 时写不完这个完整 HTML。
提高输出预算后，它可以完成，并且动画可运行。
这类对比为什么必须看 finish_reason
很多模型评测只展示最终输出，不展示 API 元数据。
这在长代码任务里很危险。
至少要记录这些字段：
requested_model
returned_model
max_tokens
completion_tokens
finish_reason
elapsed_ms
本次最关键的字段就是：
finish_reason = length
它表示输出不是自然完成，而是因为长度限制停止。
如果没有这个字段，读者只看到一个不完整 HTML，很可能以为模型写崩了。
但结合 completion_tokens=3200，就能判断这是输出预算问题。
接入时建议怎么设置
如果你用模型生成完整页面、小游戏、可视化组件、复杂脚本，不建议一开始就把 max_tokens 设得太小。
我现在的建议是：
| 任务类型 | 建议 |
|---|---|
| 数学/物理短推导 | max_tokens=1000-2000 通常够用 |
| 简单函数实现 | max_tokens=1500-3000 |
| 完整 HTML 页面 | 至少 max_tokens=6000-10000 |
| 带 CSS、JS、交互、动画的页面 | 建议从 8000 起步 |
| 生成失败后 | 先看 finish_reason，不要先改 prompt |
一个简化的请求结构：
payload = {
"model": "claude-fable-5",
"messages": [
{"role": "user", "content": prompt}
],
"temperature": 0.2,
"max_tokens": 8000
}
如果返回：
finish_reason = length
优先考虑：
1. 提高 max_tokens
2. 拆分任务
3. 要求模型先输出骨架，再补 CSS/JS
4. 让模型只输出核心 JS，不输出完整页面
最终评分怎么改
如果只看原始同参数测试：
| 题目 | claude-fable-5 | gpt-5.5 | 说明 |
|---|---|---|---|
| 数学期望 | 5/5 | 5/5 | 两者都正确 |
| 物理综合 | 5/5 | 5/5 | 两者都正确 |
Canvas 动画，max_tokens=3200 |
2/5 | 5/5 | Claude 被截断，GPT 完整 |
但复测后应该补充一行：
| 复测 | claude-fable-5 | 说明 |
|---|---|---|
Canvas 动画，max_tokens=8000 |
5/5 | 输出完整 HTML，浏览器验证通过 |
所以文章最终不应该写成“GPT-5.5 碾压 Claude Fable 5”。
更准确的说法是：
在相同 max_tokens=3200 的长代码任务里，GPT-5.5 更容易一次性完整输出。
Claude Fable 5 需要更高输出预算；预算足够时，也能完成可运行动画。
对开发者的实际意义
这次测试最有价值的地方不是数学题和物理题。
那两题两个模型都答对了。
真正有价值的是动画题暴露出的工程细节：
长代码任务里，max_tokens 是测试条件的一部分。
finish_reason 必须记录。
completion_tokens 必须记录。
生成 HTML 后必须用浏览器验证，而不是只看代码。
Canvas 动画还要验证像素是否变化，避免“看起来有 canvas，但实际上没动”。
如果你正在用 AI 做前端页面、小游戏、可视化工具或代码生成评测，这个坑很值得提前避开。
总结
这轮对比可以总结成三句话：
1. 数学和物理题上，claude-fable-5 与 gpt-5.5 都表现稳定。
2. Canvas 动画题上，gpt-5.5 在 max_tokens=3200 下完整输出。
3. claude-fable-5 第一次被截断，但提高 max_tokens 到 8000 后复测通过。
所以，模型对比不要只看“最终答出来没”。
对于长输出任务，必须把这些字段写进测试报告：
max_tokens
completion_tokens
finish_reason
浏览器运行结果
截图或像素变化验证
后续继续做模型对比时，我会把“可运行产物”作为固定测试项，比如小游戏、Canvas 可视化、拖拽工具、日志分析脚本等。这样比单纯问几道选择题更接近真实开发场景。
复现入口：
https://crazyrouter.com/register?utm_source=csdn&utm_medium=article&utm_campaign=model_compare_series&utm_content=fable5_gpt55_round2_animation_final
CSDN 图片检查
本文图片使用 jsDelivr 图床链接，未使用 raw.githubusercontent.com：
https://cdn.jsdelivr.net/gh/xujfcn/images@main/blog/posts/model-compare-fable5-gpt55-round2-gpt55.png
https://cdn.jsdelivr.net/gh/xujfcn/images@main/blog/posts/model-compare-fable5-gpt55-round2-claude-fable5.png
发布前已用 curl -I -L 检查，两个 URL 均返回 HTTP 200。
欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。
更多推荐
2
0- 0
已为社区贡献12条内容
所有评论(0)