、
点击上方卡片关注 不要错过精彩文章
读完这篇文章，别忘记给舰长点一个关注！舰长的智能体搭建文章，不仅是节点的构建，也有思路的分享。智能体搭建最重要的就是思路。最希望，能给大家带来不一样的搭建思路和方法。
点一点上方的🔵蓝色小字关注，你的支持是我最大的动力！🙏谢谢啦！🌟"
大家好！我是舰长团队的伊登。
今天我们来做一个非常有意思的实践：10分钟做一个视频口播文案提取AI应用工具
很多人觉得"扣子"上创建的AI应用，那个聊天界面有点枯燥，或者很难，对吧？
又或者你跟我一样，实在懒得通过自己动手去完成UI设计和事件绑定。。。。
那如果我告诉你，我们可以完全绕开它，用一个让AI自己设计的、更精美的网页来调用"扣子"强大的后端能力，是不是听起来就很棒？
这次的目标是，利用扣子空间作为前端开发平台，通过API调用你在扣子上已经创建好的工作流，亲手打造一个能提取视频文案的网页工具。
这趟旅程的核心，是打通扣子的后端逻辑（也就是调用api）与扣子空间的前端展现，实现真正的"前后端分离"。准备好了吗？
如果看不懂我这叽里咕噜说的一大堆，也没关系，跟着我做，让我们开始实现自己的第一个AI应用吧！
扣子 与 扣子空间
在这次案例中它们的关系是什么？你可以把扣子想象成我们AI应用的"大脑和中枢神经系统" 。我们在这里通过扣子编排工作流，定义了AI的核心功能和逻辑 。而"扣子空间"，则是我们为这个大脑量身定做的"脸和身体" 。它让我们能用更自由的方式（比如做一个网页）来与"大脑"交互，而不是局限于默认的聊天框。
这样做的价值是什么？最大的好处就是 "自由" 。我们可以将"扣子"强大的AI能力，无缝集成到任何我们已有的网站、应用或业务流程中 。通过API调用的方式，后端交给工作流处理，前端UI的设计则可以完全交给AI，打造出高度定制化、深度融合的AI解决方案 。
实战演练：打造你的"视频文案提取器"
第一步：在"扣子"中搭建后端工作流
这是我们AI应用的核心引擎，负责处理具体的任务。
创建工作流并添加插件 ：
在"扣子"中新建一个工作流。
我们需要两个关键的插件：一个是download，用于下载视频；
另一个是generate_video_captions_sync，用于从视频中提取音频并生成文字 。
编排节点与连线 ：
开始节点：接收一个包含视频分享链接的文本输入input。
将input连接到 download 插件的url输入上 。同时，为该插件配置好你的api_token 。
将 download 插件的输出url（这通常是处理后的视频文件地址）连接到 generate_video_captions_sync 插件的url输入上 。
结束节点：设置一个名为output的输出变量 ，将它连接到 generate_video_captions_sync 插件的content（或类似名称的文本输出）上 。
发布工作流并获取ID ：
配置完成后，点击"发布"，为你的工作流创建一个版本 。
发布后，在浏览器的地址栏中找到 workflow_id=，后面的那一串数字就是这个工作流的唯一标识，请复制并保存它 。
第二步：获取"扣子"API的通信凭证
为了让外部应用（比如我们的"扣子空间"网页）能够安全地调用工作流，我们需要一套API凭证。
创建个人访问令牌（Token） ：
在"扣子"的左侧菜单，进入"扣子API""授权"部分 。
选择"个人访问令牌"，点击"添加新令牌" 。
为令牌命名，并 务必为其授予"工作流执行"的相关权限（可以像我一样全选权限和所有工作空间按） 以及过期时间（最多30天，个人令牌暂不支持永久）。
创建后，系统会生成一串以`pat`开头的令牌 。请注意，这个令牌只会出现一次，你必须立即复制并妥善保管在安全的地方 。
组合代码示例
在扣子API——工作流——执行工作流中配置
在请求的 Header 中，必须包含 Authorization: Bearer [你的个人访问令牌] （就是把你刚才复制的令牌粘贴进去）
在请求的 Body 中，需要用JSON格式提供两个信息 ：
workflow_id: 你在第一步中获取的工作流ID
parameters: 这是一个对象，里面包含了工作流"开始"节点所需的输入，格式为 {"input": "用户输入的视频链接"}
比如说：
{"input":"1.58 01/10 W@M.wF NWz:/ 百米五虎为世人带来了一场不可复制的视觉盛宴 2012年伦敦奥运会，百米五虎的极限对决，博尔特跑出历史第二快的成绩# 博尔特 # 百米五虎 # 田径 https://v.douyin.com/__Amcs3UC2c/ 复制此链接，打开Dou音搜索，直接观看视频！"}
点击试运行获取示例结果
加上一个提示词即可制作，提示词领取方式已经放在文章结尾了!
第三步：在"扣子空间"中构建前端网页
现在，我们来到"扣子空间"，通过刚才构建好的提示词，为我们的AI功能做一个漂亮的用户界面。
【效果演示】：（不能给地址，用的是我的token~~~）
这提示里面的一个逻辑是：
创建HTML页面：
在"扣子空间"中新建一个html文件 。
我们的目标是创建一个精美的网页，包含一个输入框、一个按钮和一个用于展示结果的区域 。
编写调用API的JavaScript代码：这是连接前后端的桥梁。我们需要在HTML文件中嵌入JavaScript代码，来实现以下逻辑：
当用户点击按钮时，获取输入框中的视频分享链接。
使用fetch方法，向https://api.coze.cn/v1/workflow/run这个API端点发起一个POST请求 。
在请求的 Header 中，必须包含 Authorization: Bearer [你的个人访问令牌] 。
在请求的 Body 中，需要用JSON格式提供两个信息 ：
workflow_id: 你在第一步中获取的工作流ID。
parameters: 这是一个对象，里面包含了工作流"开始"节点所需的输入，格式为 {"input": "用户输入的视频链接"}。
接收到API返回的数据后，你需要解析这个JSON结果。我们真正需要的文案内容，藏在data字段下的output值里 。
最后，将提取到的output文案，显示在你的网页结果区 。
好了本次分享就到这！
恭喜你！你已经成功地将"扣子"的强大AI逻辑与"扣子空间"的灵活前端展示结合起来，创造了一个远比默认Chat界面更专业、更个性化的AI应用。
（但是要注意，这个方法完全暴露自己的api，只能给自己或者朋友用，如果后面不用了记得删掉个人令牌）
这只是一个起点。你可以继续优化你的工作流，比如增加自动总结、错字纠正等功能；
也可以用更炫酷的前端技术来美化你的网页（比如给扣子空间继续提要求）
记住，API为你打开了一扇通往无限可能的大门，现在，你可以真正地将AI能力融入到任何你需要的地方了
期待你用这个方法，打造出更多令人惊艳的AI作品。并且把做出来的应用分享给你的朋友们体验一下
本次的分享就到，您有收获请麻烦您一键三连,搭建卡点可以加入舰长的交流群进行交流，有关本文中的提示词资料的，评论"0616"添加下方二维码领取🙏
关注公众号并添加舰长微信，领取智能体学习资料，并参与Coze技术直播讲解
另外非常欢迎大家加入[唐舰长AI落地智能体交流群],主要交流群每周都会进行公益直播教大家搭建AI智能体工作流
没有评论:
发表评论