一个例子说明ClaudeSonnet37有多强
刚刚过去的这一天里，有着太多的“ 重磅 ”消息了：
DeepSeek 开源 DeepEP、Claude Sonnet 3.7发布、阿里 qwen.ai 域名、阿里开源万相、DeepSeek R2 即将发布……
眼花缭乱有木有 
不知道你最关注的是哪个？
其中我关注的，其实是小小升级了一个版本号的 Claude Sonnet 3.7 。
如果你还没详细了解它，可以看我的前文：
关于Claude Sonnet 3.7的一切，看这里就够了【多图慎入】
在接下来的一整天，我几乎都在试用Claude Sonnet 3.7，至于为什么，看完下面这个例子，你应该就知道原因了。
今天就只用到一个 prompt，它长这样（你可以拷走复现）：
创建一个包含 CSS 和 JavaScript 的 HTML 文件，以生成动画天气卡。该卡片应以不同的动画直观地表示以下天气状况： 风：（例如，移动的云、摇曳的树木或风线） 雨：（例如，落下的雨滴、形成水坑） 太阳：（例如，闪亮的光线、明亮的背景） 雪：（例如，飘落的雪花、积雪） 并排显示所有天气卡 卡片应具有深色背景。在此文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包含一种在不同天气状况之间切换的方法（例如，一个函数或一组按钮），以演示每种天气状况的动画。
（不算很过分的的需求吧？
我测试了几个模型，结果如下 👇
Claude Sonnet 3.7
不多废话，直接看结果：
效果实在是…… 太炸裂了！
如果你不是很熟悉编程，你可能会说： 这有啥？不是很常见吗？
那我只能说，很可能，你并没有写过前端代码。
来看看被吹上天的其他模型们的表现就知道了。
没有对比，就没有伤害。
请往下看👇
o3-mini high
审题对了，但答题至少就矛盾了，我不想看结果了……（我懒
谁有空试下，可以贴评论区，感谢。
继续，下一个。
Grok 3 — 无思考
直接上才艺：
我只想问： 这是啥？
挺有点像我刚学写前端代码时的样子……
好吧，带上脑子（think）看看呢？
Grok 3 — 有思考
来吧！展示：
？
？？
？？？
这……
真•思考了吗？
这里必须@马斯克、@xai
最后，再来看下你最想知道的DeepSeek R1！
DeepSeek R1
别怪我对 V3 信心不足，我直接跳过到 R1 了。
做好心理准备了吗……
（我承诺……真没有作假……我也没恰任何 deepseek 无良友商的饭……
请
往
下
看
👇
（为表示重视，上个视频版吧）
DeepSeek 足足思考了316 秒，我一度以为它要走火入魔了……
（中间有些矛盾、反复、来来回回……我不多说了，你可以复现的）
最后还好完成了，效果……怎么讲呢？
没报错，能成功运行吧。
Qwen 2.5 Max QwQ
抱歉。
我好像漏了一个？
本来不想贴了，但想来会有人想知道。
好吧，过程见下图：
效果……不评价了，思考时长略微比 R1 快一点点，但……
看着最后给出的这简短的代码，我感觉被敷衍了，欺骗了我的感情……
图就不贴了，贴个代码吧有兴趣自己看吧。
<!DOCTYPE html><html><head> <title>Animated Weather Cards</title> <style> body { background-color: #1a1a1a; display: flex; justify-content: center; padding: 20px; min-height: 100vh; margin: 0; } .container { display: grid; grid-template-columns: repeat(4, 250px); gap: 20px; } .weather-card { background: #2d2d2d; border-radius: 15px; padding: 20px; position: relative; overflow: hidden; transition: transform 0.3s ease; } .weather-card:hover { transform: translateY(-5px); } .controls { position: fixed; top: 20px; left: 20px; } button { background: #4CAF50; border: none; color: white; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; transition: 0.3s; } button:hover { background: #45a049; } /* 风动画 */ .wind .cloud { position: absolute; width: 120px; height: 50px; background: white; border-radius: 50px; top: 50px; left: -60px; animation: cloud-move 4s linear infinite; } @keyframes cloud-move { 0% { transform: translateX(-50px); } 100% { transform: translateX(300px); } } /* 雨动画 */ .rain .raindrop { position: absolute; width: 2px; height: 15px; background: #87CEEB; animation: rain-fall 1s linear infinite; } .rain .raindrop:nth-child(1) { left: 20%; animation-delay: 0s; } .rain .raindrop:nth-child(2) { left: 45%; animation-delay: 0.3s; } .rain .raindrop:nth-child(3) { left: 70%; animation-delay: 0.6s; } @keyframes rain-fall { 0% { transform: translateY(-10%); opacity: 0; } 100% { transform: translateY(110%); opacity: 1; } } /* 太阳动画 */ .sun .sun-icon { position: absolute; width: 80px; height: 80px; background: #FFD700; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 30px #FFD700; animation: sun-glow 2s ease-in-out infinite; } @keyframes sun-glow { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } /* 雪动画 */ .snow .snowflake { position: absolute; width: 5px; height: 5px; background: white; border-radius: 50%; animation: snow-fall 3s linear infinite; } .snow .snowflake:nth-child(1) { left: 15%; animation-delay: 0s; } .snow .snowflake:nth-child(2) { left: 40%; animation-delay: 1s; } .snow .snowflake:nth-child(3) { left: 65%; animation-delay: 0.5s; } @keyframes snow-fall { 0% { transform: translateY(-10%) translateX(0); } 100% { transform: translateY(110%) translateX(30px); } } /* 隐藏所有元素，仅显示当前天气 */ .cloud, .raindrop, .sun-icon, .snowflake { display: none; } .wind .cloud, .rain .raindrop, .sun .sun-icon, .snow .snowflake { display: block; } </style></head><body> <div class="controls"> <button onclick="changeWeather('wind')">风</button> <button onclick="changeWeather('rain')">雨</button> <button onclick="changeWeather('sun')">太阳</button> <button onclick="changeWeather('snow')">雪</button> </div> <div class="container"> <div class="weather-card wind" id="card1"> <div class="cloud"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="sun-icon"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </div> <div class="weather-card rain" id="card2"> <div class="cloud"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="sun-icon"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </div> <div class="weather-card sun" id="card3"> <div class="cloud"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="sun-icon"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </div> <div class="weather-card snow" id="card4"> <div class="cloud"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="raindrop"></div> <div class="sun-icon"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </div> </div> <script> function changeWeather(weatherType) { document.querySelectorAll('.weather-card').forEach(card => { card.className = `weather-card ${weatherType}`; }); } // 初始化天气元素 document.querySelectorAll('.weather-card').forEach(card => { const weatherIcon = card.querySelector('.weather-icon'); // 生成雨滴 for(let i = 0; i < 3; i++) { const raindrop = document.createElement('div'); raindrop.className = 'raindrop'; card.appendChild(raindrop); } // 生成雪花 for(let i = 0; i < 3; i++) { const snowflake = document.createElement('div'); snowflake.className = 'snowflake'; card.appendChild(snowflake); } }); </script></body></html>
（这么短的代码想要能实现，真当LLM 是高效压缩了
别怪我敷衍，是你敷衍在先……
希望 QwQ 公关别找我麻烦，看在你名字长得萌的份上， 我已经把最大的篇幅给你了。
也算是对得起我那些在阿里的兄弟们了。
声明
本文仅对单一case 进行评测，存在 以偏概全 的问题， 极不严谨 。
仅供参考，勿以此下定论。
另，所有模型均仅进行一次测试，良心承诺无任务造假、欺诈。
还要声明的是，我的立场一直是不拉不踩。
国产模型 DeepSeek R1 和Qwen 2.5 QwQ 确实很强很 open ai 值得点赞——从这两天 DeepSeek 开源项目带来的全球网友疯狂点赞+好评就可见一斑。
但我们需要清晰地认识到，就目前已发布的产品相比，国产模型的差距还明显存在。
并且，还不小。
不能盲目自信，而是要清晰地认识到差距，然后奋起直追。
只有这样，才不是闭关锁国，才有希望能真正追上。
甚至超越！
不吹不黑，也欢迎打脸。
也期待 DeepSeek 明天的开源和即将放出来R2。
也希望 R2 或其他国产模型能狠狠痛击Claude Sonnet 3.7，和所有 其他 模型。
但在那之前，我会去使用最好的 AI 模型。
我的建议也一直是，永远使用最好的模型，不要在意那一点儿费用。
加油，Qwen！
版权声明：
作者：shadowrocket
链接：https://www.shadowrocket9.top/247.html
来源：Shadowrocket官网
文章版权归作者所有，未经允许请勿转载。
共有 0 条评论