伊登：我用上了扣子全家桶开发AI工具

✅

伊登：我用上了扣子全家桶开发AI工具 ✅ 伊登：我用上了扣子全家桶开发AI工具 Modified June 13, 2025 No access FocuSee Project 2025 06 13 20 41 29 00:00 • 在请求的 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音搜索，直接观看视频！"} 点击试运行获取示例结果把输入和返回结果输入下面示例中 Code block Markdown Copy 做一个提取视频文案的精美网页工具，输入视频链接后点击按钮能自动生成对应的口播文案。下面是请求扣子工作流API的代码以及API返回示例，需要取到返回结果中data下output的值。你需要根据这些信息生成一个包含输入框和按钮的HTML页面，并在按钮点击时调用API获取文案。第一步，生成精美的HTML页面代码；第二步，在HTML页面中添加JavaScript代码，实现按钮点击事件的处理和API调用；第三步，解析API返回结果，提取所需的文案内容。注意input的值需要用户输入，工作流返回的内容中，我需要提取data下output的值请求扣子工作流API代码，以及返回的结果如下：你会组成如下的提示词： Code block Markdown Copy 做一个提取视频文案的精美网页工具，输入视频链接后点击按钮能自动生成对应的口播文案。下面是请求扣子工作流API的代码以及API返回示例，需要取到返回结果中data下output的值。你需要根据这些信息生成一个包含输入框和按钮的HTML页面，并在按钮点击时调用API获取文案。第一步，生成精美的HTML页面代码；第二步，在HTML页面中添加JavaScript代码，实现按钮点击事件的处理和API调用；第三步，解析API返回结果，提取所需的文案内容。注意input的值需要用户输入，工作流返回的内容中，我需要提取data下output的值请求扣子工作流API代码，以及返回的结果如下： curl X POST 'https://api.coze.cn/v1/workflow/run' \ H "Authorization: Bearer pat HZsDBhLzfu n9OqN0cAAOHLbSftAj gFMH0FwzT0KifR4c" \ H "Content Type: application/json" \ d '{ "parameters": { "input": "1.58 01/10 W@M.wF NWz:/ 百米五虎为世人带来了一场不可复制的视觉盛宴 2012年伦敦奥运会，百米五虎的极限对决，博尔特跑出历史第二快的成绩博尔特百米五虎田径 https://v.douyin.com/ Amcs3UC2c/ 复制此链接，打开Dou音搜索，直接观看视频！" }, "workflow id": "7512077 2182975" }' {"code":0,"cost":"0","data":"{\"output\":\"这绝对是人类史上最残酷的百米比赛，九秒八零竟然站不上领奖台，五位个人最好成绩都在九秒七五以内的选手要在短短的十秒钟一决高下，你敢想象比赛的过程有多么紧张刺激吗？二零一二年八月六日，全世界的目光都聚集在了伦敦瓦，地球上有史以来跑的最快的五个人，也就是百米五虎齐聚于此，为世人带来了一场不可复制的视觉盛宴。强如博尔特，在这场比赛中也不敢有丝毫懈怠，就算是将他里约奥运会的夺冠成波尔多仍然是这个星球上跑的最快的人，的美国队，棋逢对手，将遇良才！三十六秒八四，博尔特率领的牙买加接力队将人类极限带入了三十七秒大！关最后一棒，波尔特和贝利几乎同时接棒，但很快波尔特便确立了领先优势。贝利做梦也没能想到，让他名声大噪的不是奥运会的奖牌，而是生吃贝利这一道经典名菜。\"}","debug url":"https://www.coze.cn/work flow?execute id=751210 64054580&space id=73954260077 512&workflow id=751207 82182975&execute mode=2","msg":"Success","token":0} 提取出来的内容字太多可以删掉一点，最终呈现的提示词就长这样。复制完整的提示词交给扣子空间第三步：在“扣子空间”中构建前端网页现在，我们来到“扣子空间”，通过刚才构建好的提示词，为我们的AI功能做一个漂亮的用户界面。 • 【效果演示】：（不能给地址，用的是我的token ）这提示里面的一个逻辑是： 1. 创建HTML页面： ◦ 在“扣子空间”中新建一个html文件。 ◦ 我们的目标是创建一个精美的网页，包含一个输入框、一个按钮和一个用于展示结果的区域。 2. 编写调用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作品。并且把做出来的应用分享给你的朋友们体验一下 No access FocuSee Project 2025 06 13 20 41 29 00:00 No access FocuSee Project 2025 06 13 20 41 29 00:00 • 在请求的 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音搜索，直接观看视频！"} ◦ workflow id: 你在第一步中获取的工作流ID ◦ parameters: 这是一个对象，里面包含了工作流“开始”节点所需的输入，格式为 {"input": "用户输入的视频链接"} 比如说： {"input":"1.58 01/10 W@M.wF NWz:/ 百米五虎为世人带来了一场不可复制的视觉盛宴 2012年伦敦奥运会，百米五虎的极限对决，博尔特跑出历史第二快的成绩博尔特百米五虎田径 https://v.douyin.com/ Amcs3UC2c/ 复制此链接，打开Dou音搜索，直接观看视频！"} 点击试运行获取示例结果把输入和返回结果输入下面示例中你会组成如下的提示词：提取出来的内容字太多可以删掉一点，最终呈现的提示词就长这样。复制完整的提示词交给扣子空间第三步：在“扣子空间”中构建前端网页现在，我们来到“扣子空间”，通过刚才构建好的提示词，为我们的AI功能做一个漂亮的用户界面。 • 【效果演示】：（不能给地址，用的是我的token ）这提示里面的一个逻辑是： 1. 创建HTML页面： ◦ 在“扣子空间”中新建一个html文件。 ◦ 我们的目标是创建一个精美的网页，包含一个输入框、一个按钮和一个用于展示结果的区域。 ◦ 在“扣子空间”中新建一个html文件。 ◦ 我们的目标是创建一个精美的网页，包含一个输入框、一个按钮和一个用于展示结果的区域。 2. 编写调用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文案，显示在你的网页结果区。 ◦ 当用户点击按钮时，获取输入框中的视频分享链接。 ◦ 使用fetch方法，向https://api.coze.cn/v1/workflow/run这个API端点发起一个POST请求。 ◦ 在请求的 Header 中，必须包含 Authorization: Bearer [你的个人访问令牌] 。 ◦ 在请求的 Body 中，需要用JSON格式提供两个信息： ▪ workflow id: 你在第一步中获取的工作流ID。 ▪ parameters: 这是一个对象，里面包含了工作流“开始”节点所需的输入，格式为 {"input": "用户输入的视频链接"}。 ▪ workflow id: 你在第一步中获取的工作流ID。 ▪ parameters: 这是一个对象，里面包含了工作流“开始”节点所需的输入，格式为 {"input": "用户输入的视频链接"}。 ◦ 接收到API返回的数据后，你需要解析这个JSON结果。我们真正需要的文案内容，藏在data字段下的output值里。 ◦ 最后，将提取到的output文案，显示在你的网页结果区。伊登寄语恭喜你！你已经成功地将“扣子”的强大AI逻辑与“扣子空间”的灵活前端展示结合起来，创造了一个远比默认Chat界面更专业、更个性化的AI应用。（但是要注意，这个方法完全暴露自己的api，只能给自己或者朋友用，如果后面不用了记得删掉个人令牌）这只是一个起点。你可以继续优化你的工作流，比如增加自动总结、错字纠正等功能；也可以用更炫酷的前端技术来美化你的网页（比如给扣子空间继续提要求）记住，API为你打开了一扇通往无限可能的大门，现在，你可以真正地将AI能力融入到任何你需要的地方了期待你用这个方法，打造出更多令人惊艳的AI作品。并且把做出来的应用分享给你的朋友们体验一下个人 ⭐ Yeadon（伊登）的个人说明书主页 ⭐ Yeadon（伊登）的个人说明书 hello，你好，我是伊登。今天我们来做一个非常有意思的实践：10分钟做一个视频口播文案提取AI应用工具很多人觉得“扣子”上创建的AI应用，那个聊天界面有点枯燥，或者很难，对吧？又或者你跟我一样，实在懒得通过自己动手去完成UI设计和事件绑定。。。。那如果我告诉你，我们可以完全绕开它，用一个让AI自己设计的、更精美的网页来调用“扣子”强大的后端能力，是不是听起来就很棒？这次的目标是，利用扣子空间作为前端开发平台，通过API调用你在扣子上已经创建好的工作流，亲手打造一个能提取视频文案的网页工具。这趟旅程的核心，是打通扣子的后端逻辑（也就是调用api）与扣子空间的前端展现，实现真正的“前后端分离”。准备好了吗？如果看不懂我这叽里咕噜说的一大堆，也没关系，跟着我做，让我们开始实现自己的第一个AI应用吧！扣子与扣子空间 • 在这次案例中它们的关系是什么？你可以把扣子想象成我们AI应用的“大脑和中枢神经系统” 。我们在这里通过扣子编排工作流，定义了AI的核心功能和逻辑。而“扣子空间”，则是我们为这个大脑量身定做的“脸和身体” 。它让我们能用更自由的方式（比如做一个网页）来与“大脑”交互，而不是局限于默认的聊天框。 • 这样做的价值是什么？最大的好处就是 “自由” 。我们可以将“扣子”强大的AI能力，无缝集成到任何我们已有的网站、应用或业务流程中。通过API调用的方式，后端交给工作流处理，前端UI的设计则可以完全交给AI，打造出高度定制化、深度融合的AI解决方案。实战演练：打造你的“视频文案提取器” 第一步：在“扣子”中搭建后端工作流这是我们AI应用的核心引擎，负责处理具体的任务。 1. 创建工作流并添加插件： ◦ 在“扣子”中新建一个工作流。 ◦ 我们需要两个关键的插件：一个是download，用于下载视频； ◦ 另一个是generate video captions sync，用于从视频中提取音频并生成文字。 ◦ 在“扣子”中新建一个工作流。 ◦ 我们需要两个关键的插件：一个是download，用于下载视频； ◦ 另一个是generate video captions sync，用于从视频中提取音频并生成文字。 2. 编排节点与连线： ◦ 开始节点：接收一个包含视频分享链接的文本输入input。 ◦ 开始节点：接收一个包含视频分享链接的文本输入input。 ◦ 将input连接到 download 插件的url输入上。同时，为该插件配置好你的api token 。 ◦ 将 download 插件的输出url（这通常是处理后的视频文件地址）连接到 generate video captions sync 插件的url输入上。 ◦ 结束节点：设置一个名为output的输出变量，将它连接到 generate video captions sync 插件的content（或类似名称的文本输出）上。 3. 发布工作流并获取ID ： ◦ 配置完成后，点击“发布”，为你的工作流创建一个版本。 ◦ 发布后，在浏览器的地址栏中找到 workflow id=，后面的那一串数字就是这个工作流的唯一标识，请复制并保存它。 ◦ 配置完成后，点击“发布”，为你的工作流创建一个版本。 ◦ 发布后，在浏览器的地址栏中找到 workflow id=，后面的那一串数字就是这个工作流的唯一标识，请复制并保存它。第二步：获取“扣子”API的通信凭证为了让外部应用（比如我们的“扣子空间”网页）能够安全地调用工作流，我们需要一套API凭证。 1. 创建个人访问令牌（Token）： ◦ 在“扣子”的左侧菜单，进入“扣子API”“授权”部分。 ◦ 在“扣子”的左侧菜单，进入“扣子API”“授权”部分。 ◦ 选择“个人访问令牌”，点击“添加新令牌” 。 ◦ 为令牌命名，并务必为其授予“工作流执行”的相关权限（可以像我一样全选权限和所有工作空间按）以及过期时间（最多30天，个人令牌暂不支持永久）。 ◦ 创建后，系统会生成一串以开头的令牌。请注意，这个令牌只会出现一次，你必须立即复制并妥善保管在安全的地方。组合代码示例在扣子API——工作流——执行工作流中配置

在小宇宙note 阅读完整内容