AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


深入分享 Claude 3.5 Sonnet Artifacts 高级应用 | 附 Manim 与React 轻松上手指南
发布日期:2024-06-24 04:48:25 浏览次数: 3664 来源:kate人不错


引言

继前三天分享了Claude 3.5 Sonnet 实测的内容后,今天是第四波分享。这次我尝试了一些稍复杂的应用。

往期内容:

分享 Claude 3.5 Sonnet 多个精彩使用案例:编程无敌,轻松制作动画和幻灯片,数据分析功能出色

多案例、实测(二) | Claude 3.5 Sonnet:会编程、懂设计、做动画、幻灯片也很容易

多案例、实测(三) | 分享 Claude3.5 Sonnet Artifacts 如何快速开发 10+ 小应用 

CNN卷积可视化程序

提示词:

我要做出这样的程序 ,请用artifacts

make it better

看到下面博主的分享,我把截图发给Claude,让它做出类似的。

只需再加一句:make it better

它会做得更好,2次沟通后结果如下:

制作仪表板——CPI和PPI数据

提示词:

---根据上面内容,创建一个信息图来描述文章要点,信息要丰富,有图表,动画,配色商务风

注:文字内容来源——解读2024年5月份CPI和PPI数据

采用图片里配色重新生成仪表板,注意背景和文字的颜色要合拍,要能适合阅读

现在很流行渐变色背景,我将之前用AI生成的一张渐变图发给它,让它生成类似的配图,它生成的效果很不错(除了图标小些)。

用React制作仪表板还有一个好处是,它会自适应,适合不同截图用于不同场景。

我实际体验了几次仪表板制作后,觉得现在有了Claude,做图文类内容实在太方便了,无论是做成小?帖子还是公众号长图,都很容易。

像下面的时效性强的文章,1分钟做成长图,实在太方便了,后期可以把图标P大些。

制作Manim动画——展示财报亮点

前2天做的关于理想汽车财报亮点的视频还比较受欢迎,今天又尝试了做小米的,这次是多次沟通修改的。

注:这里示例用的是小米2024年第一季度业绩公告,44页PPT样式的PDF。

提示词:

提取附件财务报告的要点,使用Manim库编写动画进行展示。动画要多样化,显示效果要华丽。

首页标题页背景改成橙色,文字白色;其他页背景改成灰色#ececec,白色文字改成 黑色文字,橙色保持不变,请给到完整代码

make it better ,让动画效果更丰富

很不错,成功运行了,请你再努力下,make it better,幻灯片转换优化,字体大小优化、动画优化等

CLaude先总结这篇财报的亮点,接着基于这些亮点,写了代码。

最终,多次调整后的效果:

这里我解释下,不是Claude直接生成最后的视频效果,而是让Claude先用Manim库生成python脚本,之后本地运行Python脚本渲染生成MP4。

我之前写过3篇Manim的文章,有兴趣的可以读下。

Manim + ChatGPT 实践:零基础也能制作酷炫动画 (qq.com)

Manim + ChatGPT 实战:模仿苹果 WWDC 动画效果
Manim 动画制作不再难:ChatGPT + Graphviz/Mermaid 助你快速上手

我也看到一些用户反馈Manim本地安装各种依赖比较难,不用着急,今天推荐一个非常好用的平台——Replit,在这篇文章里我也介绍过它的基础使用方法。

Replit是一个在线的集成开发环境(IDE),可以让你直接在浏览器中编写、运行和分享代码,无需进行复杂的本地环境配置,非常适合快速原型设计和学习新的编程语言或框架。

Replit官方为Manim做了一个开箱即用的模版和拓展,只需在尝试创建新的repl时查找“manim”即可。

可以说,这把使用Manim的难度降到最低了,把Claude写的py放到main.py里,点击“Run”,等待它渲染完成,之后在videos文件夹里就可以找到你的视频。

制作两只兔子对话的动画

提示词:

帮我做成类似的动画,用react 用Claude3.5 Sonnet Artifacts,但是要求左边是一只SVG画的粉红兔子,右边是一个紫色兔子,想象两个兔子在讨论晚餐去哪吃,他们交替说话,当左边兔子说话时,它说的话也会显示在它的头上,它就会上下动,另一只兔子不变,反之亦然,对话至少7轮

把左边兔子改成下面的svg,嵌入到代码里

把右边兔子改成下面的svg,嵌入到代码里

要把他们放在一个画面里,他们一样大小,分别在画面的左边和右边,画面里出现他们的对话

很不错,但是左边兔子说话后,右边兔子开始说,它不跳转到左边,无论是左边兔子说话还是右边兔子说话,它们都能分别保持在画面的左边和右边

右边兔子说话时,不要跳到左边,它就在右边跳,请修改

改成可爱的背景,加上可爱的  播放、暂停、重新播放  这3个按钮,请用Claude3.5 Sonnet Artifacts

将对话改成中文,但是讨论的话题变成如何健身,假设这两个兔子都很棒,它们有一个连续12轮的对话来讨论减肥

还记得昨天我上传头像让Claude生成的SVG图片吗?今天我让它换个颜色,变成紫兔子,然后让他们讨论健身的话题,最后还给它们加个按钮和可爱的背景。

这也是一个沟通多次的项目,用React生成。

最终生成效果:

我也让Claude使用reveal js来做这个项目。

提示词:

帮我用reveal js做成幻灯片,要求左边是白色兔子svg,右边是一个蓝色兔子svg,两个兔子在讨论如何健身,对话是中文,它们交替说话,当左边兔子说话时,它说的话也会显示在它的头上,它就会上下动,另一只兔子不动,反之亦然,对话至少12轮

无论是左边兔子说话还是右边兔子说话,它们都分别保持在画面的左边和右边

请添加可爱的背景,加上可爱的 播放、暂停、重新播放 这3个按钮,请用Claude3.5 Sonnet Artifacts

未将兔子的SVG发给Claude前,它做出了如下效果:

将兔子的SVG发给Claude后,它不能很好消化我上传给它的两个SVG文件,最终做了简约版,生成了HTML。

我替换了占位符后的效果如下:

可以看出,这里React做的效果更好。

文本转视频

这里我给了它一则英文新闻正文,虽然要求让Claude用Reveal js生成,但是它用React生成了。之前我觉得Reveal js 幻灯片不错,现在感觉React的也不错。

提示词:

---请用Claude3.5 Sonnet Artifacts reveal js做成幻灯片,要有图标,图表,中文的幻灯片,配色要美观大方

生成结果:

我觉得可以用这个方法批量生成快资讯视频了,可以上传视频给Gemini 1.5 Pro,让它生成解说文字,之后再转语音。

也可以让它改成手动播放,控制每张页面的展示时间。

如何运行Claude生成的React程序?

对于初识JavaScript的编程新手来说,如何让它运行起来可能是一个问题。

这里还是推荐Replit。

以上文我上面的兔子动画为例,要在Replit上运行React生成的tsx文件,你可以按照以下步骤操作:

  1. 创建新的Repl:

    点击 “Create Repl“

    在语言选择中,搜索并选择 “React TypeScript“

  2. 设置项目:

    Replit 会自动为你设置一个基本的 React TypeScript 项目结构。

  3. 编写代码:

    src 文件夹中,你可以找到 .tsx 文件

    你可以编辑现有的文件或创建新的 .tsx 文件

  4. 运行项目:

    在 Replit 界面的顶部,你会看到一个 “Run“ 按钮

    点击 “Run“ 按钮来启动你的 React 应用

  5. 查看结果:

    Replit 会在右侧打开一个预览窗口,显示你的 React 应用

  6. 实时更新:

    当你修改代码时,Replit 会自动重新编译并更新预览

在Claude里,打开和模型对话生成的预览页面,如果你直接下载对应的代码,实际上对于在本地或Replit上运行这个程序会不足的。比如下面两张图,都是在Replit里运行相同程序的结果,但前者因为缺少样式文件,所以显示效果欠佳。

我是这样和Claude交流的。

我要求它提供目录结构。

当你和它交流,它把文件都提供了后,也可以在Artifacts页面里查看它生成的文件。

我还让它提供了一个项目运行指南,将我和它的交流保存为md文件提供下载。

之后,你按照它的指南里的指示在Replit里操作即可。

最后,分享一个看到的不错的Tip:


53AI,企业落地应用大模型首选服务商

产品:大模型应用平台+智能体定制开发+落地咨询服务

承诺:先做场景POC验证,看到效果再签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

与创始人交个朋友

回到顶部

 
扫码咨询