分享 Claude 3.5 Sonnet 多个精彩使用案例:编程无敌,轻松制作动画和幻灯片,数据分析功能出色
Claude 3.5 Sonnet 简介
Claude 3.5 Sonnet昨晚发布,一句话总结,目前最强的大模型(除语音外),且价格比Claude 3 Opus要优惠不少,速度也更快。
Claude 3.5 Sonnet 和 Claude 3 Opus 每百万个输入token收费分别为 15,输出token收费分别为 75。
Claude 3.5 Sonnet 可在claude.ai和 Claude iOS 应用程序上免费使用。
新闻链接:
https://www.anthropic.com/news/claude-3-5-sonnet
Claude 3.5 Sonnet 在多个测试中表现优异,尤其在代码(92.0%)和小学数学(96.4%)方面表现突出,相比之下,Claude 3 Opus 和其他模型的表现略逊一筹。
Claude此次还有了Artifacts feature,这是一个交互友好的功能,让我觉得值得在Claude官网上充值。
点击头像,在设置里打开。
Artifacts feature可以干什么?
让Claude回答:
提示词:
What can Artifacts features do?Please explain in detail and output the form,Try to say what Artifacts features can do
回答:
Artifacts 功能介绍
Artifacts 是一项强大的功能,允许用户在对话中创建和引用大量独立的内容。对于你可能想要修改、迭代或重复使用的内容,它们特别有用。
Artifacts 的主要功能:
内容类型:
代码:我可以创建包含各种编程语言的代码片段或脚本的 artifacts。 文档:我可以生成纯文本、Markdown 或其他格式的文本文档。 HTML:我可以创建可在用户界面中呈现的单文件 HTML 页面。 SVG:我可以生成可缩放矢量图形 (SVG) 图像。 Mermaid 图表:我可以使用 Mermaid 语法创建图表。 React 组件:我可以开发 React 组件,包括使用 Hooks 和 Tailwind CSS 进行样式化的组件。
持久性和迭代:
在我们的整个对话过程中,都可以引用和更新 Artifacts。 这允许对代码、文档或其他内容进行迭代开发。
渲染:
根据类型的不同,artifacts 可以直接在用户界面中呈现。 例如,可以将 HTML 页面、SVG 图像和 Mermaid 图表可视化。
与聊天分离:
Artifacts 显示在单独的 UI 窗口中,保持主对话清晰和集中。
可重用性:
artifacts 中的内容可以轻松复制、修改或在我们对话之外使用。
复杂内容支持:
Artifacts 非常适合包含大量内容(通常超过 15 行),这些内容如果直接包含在聊天中可能会过于笨拙。
特定于语言的功能:
对于代码 artifacts,我可以指定编程语言,从而实现正确的语法高亮显示。
组件库:
对于 React 组件,我可以使用来自 shadcn/ui 等库的预构建组件。
占位符图像:
在 HTML 和 React artifacts 中,我可以使用具有指定尺寸的占位符图像。
Claude 3.5 Sonnet 编程无敌
最吸引我的是在 Claude 内部代理编码评估中,Claude 3.5 Sonnet 解决了 64% 的问题,明显优于 Claude 3 Opus 的 38%。
评估测试模型修复错误或向开源代码库添加功能的能力,并给出所需改进的自然语言描述。在接受指导并提供相关工具后,Claude 3.5 Sonnet 可以独立编写、编辑和执行代码,并具有复杂的推理和故障排除功能。
它可以轻松处理代码翻译,对于更新遗留应用程序和迁移代码库特别有效。
Anthropic 的 Alex Albert 说:Claude开始真正擅长编码和自主修复拉取请求。很明显,一年后,很大一部分代码将由LLM编写。
这里有个官方演示视频
这段视频展示了Anthropic的 Claude 3.5 Sonnet模型如何帮助软件工程师进行代码测试和修复。
0:00-0:07: 视频开始介绍了软件工程师在编写代码时,测试和修复代码通常比编写代码本身花费更多时间。
0:07-0:11: 视频介绍了Claude 3.5 Sonnet模型,并展示了它可以自动编写测试和修复代码。
0:11-0:25: 视频展示了一个示例场景:工程师编写了一个图像裁剪函数,该函数将图像裁剪成圆形,并希望确保所有用户头像的大小一致。
0:25-0:35: 视频指出,该函数存在一个bug,裁剪后的图像仍然是方形且背景是白色的。
0:35-0:47: 视频展示了如何将代码和描述bug的指令输入Claude模型。Claude模型自动创建了一个测试用例,并指出bug所在:代码将图像转换为RGB模式,导致透明度信息丢失。
0:47-0:56: Claude模型创建了一个测试文件,并解释了测试的步骤。
0:56-1:07: Claude模型执行了测试用例,测试用例失败,并解释了失败原因。
1:07-1:22: Claude模型自动修复了bug,并解释了修复过程:在转换图像模式之前,先检查图像是否已经是RGBA模式,如果是,则无需再次转换,以保留透明度信息。
1:22-1:30: Claude模型再次执行测试用例,测试用例通过,说明bug已经被修复。
Claude 3.5 Sonnet 图片识别能力强
官方这个视频演示也很惊艳,最后生成了一个很美的HTML格式的幻灯片。
它的发布打击了一些 AI PPT 应用,同时也展示了Claude现在有了数据分析功能。
不知是否还有读者记得我前段时间介绍Marp,有点类似reveal.js库制作了一个幻灯片。
视频过程:
教授向Claude发送信息,并附上两张图片:图1:一张关于人类基因组测序成本随时间推移的图表。
图2:一张关于人类基因组测序关键里程碑的时间轴图表。
Claude帮助教授将图表数据转换成JSON格式:Claude首先将两张图片中的数据分别转换成JSON数组,并分别命名genomeSequencingTimeline和costPerHumanGenome。
然后,Claude将两个数组合并成一个结构,并将它们命名为genomeSequencingTimelineAndCostJSON。
教授请Claude根据JSON数据创建一个交互式图表:教授提供了一个调色板文件,用于设置图表颜色。
Claude使用plotly.js库创建了一个交互式图表,并将里程碑信息设置为悬停提示。
教授请Claude使用reveal.js制作一个演示文稿:
Claude使用教授提供的图表数据和reveal.js库制作了一个演示文稿,其中包含了人类基因组测序的关键信息。
教授对演示文稿表示满意,并发送给学生:
教授对Claude的帮助表示感谢,并通过电子邮件将演示文稿发送给学生。
官方还有2个视频,都建议看下,Claude官方演示很不错,有很多提示词细节需要关注。
博主分享的优质使用 Claude 3.5 Sonnet 案例
Threejs+cannonjs 3D
画图标
甚至接入11lab的API,在Claude官网上播放声音
3D游戏制作
https://websim.ai/c/koXDcARYdiI95gIB3?stream=
我的Claude 3.5 Sonnet 实际体验
制作manim动画
提示词:
According to the above content, use manim to write code to create animations. The animations should be diverse and the display effect should be dazzling.
说实话,我琢磨用GPT4画Manim有段时间了,这次Claude 3.5 Sonnet的效果真实超级棒。
提示词:
I want to make a Manim animation about Apple's outstanding products over the years. Can we do the style and design to match 3bluelbrown?
如果说什么限制了Manim的设计,那就是Claude的使用次数。
制作简单游戏
体验了下Artifacts feature,让它写一个奔跑的兔子游戏,初看很好,背景颜色有好几种颜色,方块是在奔跑的样子
制作幻灯片( reveal.js)
提示词:
Please use the reveal.js library to write a slider to show the historical development of AI, at least 8 pages, the content should be interesting, and there is an SVG
除了最后一页画面出现了重叠,其他还不错。
制作可视化图表(plotly.js)
提示词:
Please plotly.js library to create an interactive chart to show the development of AI
Artifacts feature的交互显示特别棒
制作儿童动画( three.js)
提示词:
Let's say I'm 10 years old, please use three.js to make colorful and multiple svgs to show me the development of AI and make an interesting and vivid animation
提示词:
Help me make the above charts and animations into the previous slide
当我想把上面的动画加到之前的幻灯片里,出现了些错误,我准备之后再尝试。
图片识别并绘制
提示词:
Please draw it in js and have an animated effect
生成的动画效果不错。
我看了下文件的代码,它是用 React(一个用于构建用户界面的 JavaScript 库)编写的。React 是一个用于构建用户界面的开源库,特别适合构建单页面应用程序。代码中的动画效果是通过使用 JavaScript 的 animate
方法在 SVG 元素上实现的。
制作蝴蝶动画(three.js)
提示词:
Draw a picture of a butterfly fluttering with a three.js,many butterflies
得到回复:I apologize, but I'm not able to directly draw or generate images. However, I can provide you with code to create a 3D scene with multiple fluttering butterflies using Three.js. Would you like me to create a Three.js script that renders animated butterflies?
我让它继续了,得到如下效果。
制作烟花动画(three.js)
提示词:
Can you animate fireworks with three.js
当它生成的内容是黑屏,我看不到内容时,它还会帮我debug,而且是能直观地debug。
可以看出,Claude 3.5 Sonnet的编程能力已进入了一个新的阶段,部分呼应文中的第一个视频。
数据可视化
提示词:
条形图展示了评分最高的10部电影
图表里的文本改成中文
看来以后数据分析图表制作又多了一个工具。
根据文本制作幻灯片
提示词:
Make a slide based on the above
结果生成了tsx文件,展示效果如下:
提示词:
Change to reveal js to make a slideshow, at least 4 pages
可能现在用的人多,还有问题。
制作SVG logo
提示词:
Help me make the SVG logo with these colors, the hairpin of the little girl shown in the logo * Light blue: #76C9D2 Light green: #CAD9C9 Light orange: #F4B993 Light pink: #EF9381
Claude目前似乎存在一些问题,某些截图(如小红书页面)发送给它时,会显示模型不支持。
制作Mermaid图
提示词:
can you generate a diagram highlighting each key concept in Coca-Cola production
结语
在使用过程中,即使充值了Claude会员,能使用的次数也是有限的,Poe里也可以用 Claude 3.5 Sonnet,它比Claude 3 Opus便宜,性能更好。
Claude 3.5 Sonnet是最近一个月最让我心动的产品的,真的超级棒,我之前一直在思考如何更好地用 Manim 画动画、用 Marp 制作 PPT 和用 Gemini 生成 UI,这次 Claude 3.5 Sonnet 似乎都解决了这些问题。
这次Claude 的 Artifacts 功能真的很棒,交互好,还能实时debug,引入了React组件,多种js直接用,直接显示,真的非常厉害。
别的大模型做出来的贪吃蛇游戏界面不够美观,快来体验 Claude 3.5 Sonnet 吧!
欢迎在评论区留言,让我们一起交流进步。
拓展阅读
Artifacts 功能主要支持以下 JavaScript 相关的展示能力:
React 组件:Artifacts 可以创建和渲染 React 组件。这包括:
纯函数组件
使用 Hooks 的函数组件
React 类组件
在创建 React 组件时,你可以使用:
Tailwind CSS 进行样式设计
lucide-react 库(版本 0.263.1)用于图标
recharts 库用于创建图表和图形
HTML 中的基础 JavaScript:你可以在 HTML artifacts 中包含 JavaScript,但这仅限于内联脚本或从 https://cdnjs.cloudflare.com 托管的脚本。
SVG 中嵌入的 JavaScript:SVG artifacts 可以包含嵌入的 JavaScript 以实现简单的交互性。
Mermaid 图表:虽然不是基于 JavaScript 的,但 Mermaid 图表提供了一种使用简单标记语言创建各种图表和图形的方法。
精选历史文章,请看这里:
Groq Whisper API 进阶:使用提示词精准控制转录风格和内容,结合 spaCy 实现精准分句
Open Interpreter 本地模型深度体验:功能升级,离 LLM OS 还有多远?
推荐一个 GPT + DALLE 提示词模板,完美连续生成16页儿童绘本或科技漫画