弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够

前言

包哥惹了祸最近,惹了个大祸,前面去大同访友时,恰有几分闲暇功夫,又恰逢博物馆很近,随之就预约了。万万没想到的是,大同不止有着丰富的文物馆藏,还有一个单独的恐龙化石馆。

说实话,这还是包第一次见到活生生的恐龙化石,这不开眼了,快速相机捏了几张,然后开心的分享给家人。

这好家伙,弟弟看到,难受住了,你小子在外面看恐龙,好潇洒啊。不行,我也要看。

这,我也变不出来啊,该咋办,愁坏包了。

这不,前几天,也就是 9月9日,在 Wavesummit 开发者大会上,文心快码发布3.5S(Super Synergistic AgentS)版本,打造"多智能体自协同引擎",让智能体之间真正实现自主协作、共同完成任务,全面满足当下开发者的三大核心需求。

Ai coding 这一年来,大家肯定都不陌生了,cursor、trae、文心快码各自登台亮相,每一款产品都体验过,甚至有些包都在深度使用,已经融入了包的日常开发中,成为密不可分的一部分。

前段时间,包使用某款工具做了一个小米 su7 的 3d 展示平台,让小包也体验了一下, su7 车主的尊贵生活。那这次不如咱们就试试,使用文心快码 3.5S 做一个恐龙乐园,让弟弟看个够。

先说结论,文心快码 3.5S 的体验非常的 nice,实现的效果也特别特别不错,先来看一下实现效果

无奖竞猜:实现下面的效果,小包+文心快码 3.5S 共使用了多久时间?

实现过程

小包并没有选择使用插件的方式,直接选择安装了 Comate AI IDE

获取模型

在实现一个恐龙乐园之前,首先需要一些准备工作

这里比较推荐 sketchfab,从里面下载一下,恐龙的模型非常多, porsche_taycan 模型相对少一些,而且还不够精美。

注意红框处,代表内置动画和支持免费下载。

其他 3D 模型获取方式:free3d cgmodel cgtrade ...

模型有很多种格式,本文选用 GLTF 格式,根据扩展名可以分为两种

  • gltf: gltf 格式文件没有被压缩,会附带额外的 bin 数据文件,在文本编辑器中容易阅读,方便进行调试。
  • glb: 所有数据都包含在二进制文件中,文件小,推荐使用,本文选用

框架实现

框架搭建部分直接交给文心快码 3.5S 来完成,直抒胸臆的交待要求即可

先插入几句,使用的时候,发现文心快码 3.5S 提供了多种 Agent,当时就很疑惑,提供这么多是在做啥那?于是小包去稍微查了一下,大致如下

  • Zulu 综合智能体: 不仅懂你还会灵活调用工具,多文件协同编辑,代码一步到位。

  • Plan 规划智能体: 与你协同澄清并完善需求,拆解为清晰可执行的步骤,确保生成的代码是你想要的。

  • UT 单测智能体: 写单测超棒,同步提供覆盖率报告,助你发现潜在 bug。

  • F2C 设计稿转代码智能体: 高保真还原设计稿,自动生成可运行、可维护的前端代码。

评估下来,综合智能体Zulu 最适合,输入需求

目的是要做一个展示平台,做的过程中也没有很仔细的去想细节,想尽可能的增加文心快码3.5S发挥的自由度最后提示词给出的如下,比较简单

文心快码 3.5S 会首先规划要做的事,将上面的笼统且复杂的任务拆解成 9 个清晰的 todo,看到这里,小包心中大定

比想象中快很多,大约等了5-6分钟,运行项目,竟然一次成功啦

预想是三次交互能成功就非常不错了,结果也令人惊喜,而且还做了一些舒适的细节处理,比如展示台和空中的移动云朵效果等。

文心快码3.5S,首先检查了 dinosaur-glb 文件夹下模型的大小和信息,并编写脚本将模型同步到了 public/assets 中

接着给出了后续优化的指导

持续优化

初步分析后,发现了两个问题

  1. 点击选择xxx龙按钮没反应(这里其实并没问题,迅猛龙的模型过大,导致挡住了其他两个模型)
  2. 龙的位置没有在草坪上

继续输入需求,进行改进

后续完成后,才发现上面两个问题是存在歧义的,当时并没有意识到模型元素的大小会存在不同。

模型是随便下载的,不成体系,各个模型的尺寸差距很大。

后续就这个问题拉扯了几番,也没能实现,毕竟提出的需求就是有些问题的。

这时候发现文心快码 3.5S一个超强的功能,爱了。文心快码 3.5S 提供 IDE 內预览的能力,正如你所想,就是在 IDE 中打开网页,进行预览。

嗨,那这有什么稀奇的?

还真有!除了能正常的预览外,右下角提供了选择元素和发送 console.log 错误的功能,可以将页面中的元素和错误作为 Agent 的上下文进行使用。这功能有点强啊,相当于 AI 来帮我调试。

因此看不到迅猛龙(这里真的有些🐷了,当前页面中显示的就是迅猛龙,当时误解为霸王龙了,毕竟霸王龙他大啊),选中了迅猛龙按钮元素,传递到 Agent。

根据我的需求,文心快码 3.5S调整了迅猛龙的位置,才发现中间躲着一个小龙(霸王龙)。突然意识到,可能是模型大小存在差异,我倒,但问题是此时我还是认错了龙。。。。

由于一直改正不成功,怀疑是不是有一些基础性的问题,由此去重新看了一下模型效果,发现大的是迅猛龙(被蠢哭),我倒啊。

修改描述,重新询问,得到阶段性效果如下:

最终效果

恐龙不够多,不够壮观,又去模型网站下载了几个模型,只需一句话,文心快码 3.5S 就给同步完成了

同样的问题再次出现了,模型的大小不一致。文心快码 3.5S 生成的代码非常清晰,在前面的交互基础上,找到相应代码位置,手动修改完成了

光有恐龙也没啥意思,如果想要具备科教的意义,需要添加一些文字介绍

依旧是 todo 先行,没一会,成功实现非常简约又美观的卡片效果

至此,就成功得到文章开头的效果

总结

体验下来,文心快码 3.5S 这次升级效果之好,令人惊艳。

  • 在恐龙乐园的整体代码生成过程中,中途没出现过一次报错,这部分真的惊叹到小包了
  • Todo 拆解的非常合理,清晰。把复杂琐碎的需求拆解成合理、清晰的需求,点赞
  • 响应速度很快,中间小包由于错误理解,导致了一些时间浪费,即使是这样,恐龙乐园总消耗时间不到 1h
  • 很多非常人性化的功能,提供了多款官方智能体、IDE 预览,Agent 理解图片的能力等
  • 生成代码逻辑清晰,代码的审美也超好。恐龙乐园整个沟通过程中,只使用了可爱一个风格词,最后的布局啊,整体风格都有些惊喜。

推荐大家都快快去体验一下,感觉文心快码 3.5S 是近期最大的收获了,不止可以成为工作的有力助手,还平抚了我的老弟。

相关推荐
咚咚锵咚咚锵2 小时前
DrissionPage的学习
前端·python·学习
huabuyu2 小时前
将 Markdown 转为 AST:实现思路与实战解析
前端
前端Hardy2 小时前
惊艳同事的 Canvas 事件流程图,这篇教会你
前端·javascript·css
哔哩哔哩技术2 小时前
KMP on iOS 深度工程化:模块化、并发编译与 98% 增量构建加速
前端
神仙别闹2 小时前
基于 Vue+SQLite3开发吉他谱推荐网站
前端·vue.js·sqlite
Async Cipher3 小时前
CSS 居中
前端·css·css3
IT_陈寒3 小时前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
方安乐3 小时前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23333 小时前
Vue 3.5 升级指南
前端·vue.js