解锁 25 年新头像，仅用一小时，用扣子给抖音做了个小程序

特工宇宙

2025-01-01 00:02发布于浙江科技领域创作者

全文2548字，阅读约需8分钟，帮我划重点

划重点

01抖音推出了一款基于扣子平台的新头像功能，仅用一小时完成开发。

02该功能允许用户上传头像并选择替换不同的头像框，基于ProjectBuilder技术实现。

03与传统外包开发相比，扣子平台具有更低门槛、更高可控性和一站式托管优势。

04除此之外，扣子平台还支持在Web、小程序和硬件场景中分发和部署。

05未来，扣子平台有望推动更多有趣的AI应用轻松搭建完成。

以上内容由腾讯混元大模型生成，仅供参考

图片

眼尖的朋友可能发现了，这两天跨年嘛，就换了个有趣的新头像。
图片
再偷偷告诉大家一个秘密，其实这个头像是基于我们自己做的小程序生成的！
起因是半个多月前，扣子问我们有没有兴趣共创一个小应用。
期望能基于最近更新的 ProjectBuilder，给抖音美好跨年季活动，做其中一个功能的小程序技术支持，核心是支持用户上传头像后选择替换不同的头像框。
整体需求评估下来不算复杂，于是我们爽快地答应了下来！花了五分钟拆解具体需求，半个小时的开发，以及一段时间的测试部署，便完成了该项目。
请看 VCR！
图片
外包开发一个小程序需要多少钱？需要多久？
我们去某宝和某🐟上打听了下行情。别看首页上写着只需要几十几百，这里面的套路还挺深。
我们把我们简单的需求发给几家客服，得到的回复均是“这个涉及定制开发”，平均报价在 5k，开发周期在 7 天左右。
而最终这个需求，我们基于扣子，只花了一小时就完成了。
图片
为什么外包开发这么贵，我们思考了一下，原因大致有三：
1. 需求虽然不复杂但是不在他们的模板库里，无法基于现有模板微调上线，其中存在一定的不确定性和主观发挥的创造性。
2. 项目开发的外包（很可能是层层外包），其中涉及大量的沟通成本，甲方的需求大多数情况下无法一次性满足。
3. 无论是简单的代码还是复杂的，终究是要写代码的，程序员的工时相对较贵，现在即使有 AI 赋能，也还没有真正影响到行情。
而这些问题在扣子这儿都不是问题。不懂代码不会开发？不懂代码也照样使用扣子你懂代码；服务器需要成本？扣子帮你承担了；后面需要维护但不会改代码？扣子直接托管了，后面业务人员在扣子上直接修改就行了。
图片
为什么扣子能非常便捷的实现需求？咋实现的？
那么接下来就详细地介绍一下我们的搭建过程。
我们选择先完成整个项目的“后端”（即用户表面看不到背后的运行逻辑），因为工作流比较熟悉。整体流程可以拆解为：
1. 先确定好用户的输入，包括一个上传的图片，和选择的一个头像框风格。
将这部分放到工作流开始的输入节点。
图片
2. 将用户可能上传的不同尺寸不同分辨率的图片，按统一的规格进行缩放。
我们可以选择使用缩放插件的 Resize 函数，轻松将图片缩放到指定尺寸。
图片
3. 由于有多样化的头像框供用户选择，因此要让把不同的需求路由给不同的图像节点去处理。
这时候选择器节点就派上了用场，我们将素材包里的十五个头像框素材，按照标定的序号顺序，塞到选择器中。
图片
4. 下一步是核心步骤，将用户上传的头像与头像框进行拼接。
扣子的画板节点虽然功能不是非常强大，但简单的需求完全能 Cover！将素材上和 Resize 节点的输出进行一个拼接叠加，然后复制 14 份，替换其他的头像框素材。
图片
5. 最后将生成好的图像进行输出，再测试一下效果和速度。
此处我们选择使用了扣子的文本处理节点进行统一，然后汇总给结束节点，就 OK 啦！
图片
6.（还没做）将用户所有生成的记录都存到数据库，新建一个界面供用户查看所有的生成记录。
这一步通过代码和数据库节点可以实现，但不是硬需求，就还没花时间开发。
图片
图片
随后就到了前端 UI 的搭建部分。
尽管现在扣子的 UI Builder 还不是特别成熟，但现有的组件刚好够用～
1. 先把基本的元素和容器的布局搭建起来，然后把固定的图片素材进行填充。
背景和头部图片本地上传，并配置下位置和尺寸即可。
图片
在结构部分，我们能相对清晰的看清楚整个页面图层的错叠结构，当页面元素较多时，我们能在此处快速定位（希望能上线一个能将组件重命名的功能）。
图片
由于素材较多，我们将所有的样式展示采用了 3*5 的轮播滚动的展示方式，将溢出选为滚动，配置好容器和排版即可。
图片
2. 配置用户的输入头像和选择头像框的入口。
这部分是最核心的，也是与后端工作流进行交互的入口。
先套一个表单输入的组件，将图片上传的组件和下拉框组件放入其中。
图片
给按钮简单更改个样式，设置下运行事件的逻辑。
图片
3. 配置输出图片的展示窗口。
这一步是有些复杂的，我们先做了一个中间态的展示（本来弄了个生动的 gif 动画，但稍微有点丑就砍成文字了），给“生成中，请稍等一会儿～”的元素配置了 {{ !profile_picture_2.loading }} 的可见性逻辑，即当合成新头像的工作流没有在运行时，它隐藏。
最后在合适的区域加上最终合成头像的输出组件，将工作流的输出数据绑定在此即可。
图片
由于篇幅有限，其中有一些小的技巧无法完全展示。如果大家有相关需求或是同样是开发者遇到了一些问题，都可以加入我们的 Coze 开发交流群沟通喔（私信特工少女）。
图片
为什么不直接用 AI 编程产品完成项目，似乎会更快？
很简单，因为当下的 AI 编程助手，一定程度上是过誉的。不是高可用的，不能端到端完成开发和部署。
图片
具体原因如下：
1. 相较之下，扣子更可控、更可用。AI 写的代码越多，对于非资深 Coder 来说就越是一个黑盒。很多时候我们想要按照特定需求调整部分代码，但 AI 总是不能完全理解需求，或顾此失彼，一旦出了 AI 无法解决的问题，手动 Debug 前需要把 AI 写的代码看一遍理解一遍，再上手调试，其中的时间成本是不可预测的。
而扣子会带给你更多的确定性，由于封装好了工作流和前端组件（虽然现在还不多），哪一环节出了问题能够快速定位。后期维护也不需要程序员了，跟业务同学简单教学一下即可。
2. 扣子更低门槛，对开发小白更友好。使用 AI 编程工具，基本上需要较强的编程素养，这一学习门槛是很高的。但扣子上手相对更加轻松，比如完成我们整个小项目，没有写过一行真正的代码。
3. 扣子支持一站式托管，轻松发布到小程序等平台。虽然 AI 能够指导你配置环境、部署项目代码，但真正实际的部署环节中，由于环境、版本、系统等差异性问题，AI 往往爱莫能助，甚至因为幻觉给出更错误的答案。而扣子直接帮我们打消了这份担忧。
我们相信，基于现在扣子平台的能力和更长期的迭代更新，以及底层大模型效果的提升，未来会有更多好玩的、好用的 AI 应用，会通过扣子轻松搭建完成！
这不，AI 产品经理罗凯同学就做了一个「点评笔记助手」，下周一（1.6）在咱们社区做个分享，uu 们可以预约一下！
图片
图片
One More Thing！
扣子在分发场景上也一直在创新，Agent 的载体也从 ChatBot 扩展到了 Web、小程序，甚至是硬件。
在几天前的火山引擎 FORCE 原动力冬季大会上，扣子展示了许多 Agent 与硬件结合的有益尝试，其中现场最受参访嘉宾们关注的，就是和 TaShan 团队 x EduSnap 合作的 AI 天文望远镜。

1. 通过自然语言对话与意图识别，实现便捷交互控制；

2. 具备单智能体高精度指向、拍摄实时叠加；

3. 多智能体加入科学组网等专业模块。
他们甚至把它搬到了抖音美好跨年季-张杰跨年演唱会的现场！双厨狂喜！
“这一天我开始仰望星空，发现星不远，梦并不远，只要你踮起脚尖...”
在此前我们有多篇分析文章都有提及到，2025 年会是 Agent 备受期待，迎来爆发，并真正落地之年。
那么在 2025 年伊始，就让我们一起仰望星空，眺望那个即将到来的 AgentUniverse 吧！
查看原图 730K