2024年12月23日星期一

最新扣子(coze)实战应用工作流 : 自带画笔和照片上传功能的检验小程序《你画我猜》,手把手教学快来试试吧


点击上方卡片关注 不要错过精彩文章



🎉

读完这篇文章,别忘记给舰长点一个关注!舰长的智能体搭建文章,不仅是节点的构建,也有思路的分享。智能体搭建最重要的就是思路。最希望,能给大家带来不一样的搭建思路和方法。  

点一点上方的🔵蓝色小字关注,你的支持是我最大的动力!🙏谢谢啦!🌟"  

 

我是船长团队的技术AJ阿军!就在最近大家是否有看到,在个人主页多了一个模型管理的菜单栏? 

 

而且里面分类了很多模型,当你按照"多模态模型"条件筛选时,会看到最新的多模态模型:豆包·视觉理解·Pro模型 

 

首先大家知道什么是多模态模型吗?让我用一个形象的比喻解释一下,多模态模型和Coze上其它模型的区别: 

 

比如你是一个超级侦探,你的大脑就像是一个多模态模型。你不仅能够读懂嫌疑人留下的字条(文本理解),还能通过观察嫌疑人的面部表情和肢体语言来判断他们是否在撒谎(视觉识别)。 

 

此外,你还能通过听嫌疑人的声音变化来感知他们的情绪(音频分析)。你的大脑能够同时处理这些不同的信息(文本、视觉、音频),并且把它们结合起来,得出一个综合的判断。这就是所谓的"多模态"! 

 

豆包·视觉理解·Pro目前所具备的能力官方解释如下: 

Doubao-vision 系列模型是豆包推出的多模态大模型,具备强大的图片理解与推理能力,以及精准的指令理解能力。模型在图像文本信息抽取、基于图像的推理任务上有展现出了强大的性能,能够应用于更复杂、更广泛的视觉问答任务。 

 

大家有尝试吗?没关系,今天带领大家用另一种有趣的方式开箱评测一下这个模型的能力是否如官方所示。 

 

在本地搭建一个


 

 

 

实现逻辑和流程: 

1.本地搭建页面(也可部署到服务器) 

2.用户选择画图或者上传图片 

3.通过API调用Coze上传文件接口 

4.通过API调用Coze视觉理解Pro模型工作流接口 

5.最终返回工作流中模型理解的内容 

 

搭建前的准本大致分为四步: 

 

1.搭建一个工作流并发布(主要任务是调用豆包·视觉理解·Pro) 

 

2.获取扣子个人API访问令牌(外部调用扣子相关API所需凭证) 

 

3.对接调试"上传文件"API和"执行工作流"API(用apifox来调试或者其它网站软件) 

 

4.创建一个本地的html文件(编写网页界面和交互逻辑代码) 

 

 

一.在Coze上搭建调用豆包·视觉理解·Pro模型工作流 

 

1.总共就三个节点(包括首尾节点) 

 

2.开始节点:设置两个变量image、prompt分别是image和string类型(一个用来上传图片,一个用来写视觉模型的提示词) 

 

3.模型节点:中的模型选择、输入引用、系统提示词、用户提示词如下图所示: 

 

4.输出节点:将模型理解的文本输出即可参考下图 

 

工作流搭建完毕后测试一下,然后发布即可! 

 

 

二.获取扣子个人API访问令牌 

大家可以查看前几期介绍Zion时获取令牌的文章参考,或者按照官方的文档获取,然后保存好令牌,这里就不赘述了!请点击:扣子Coze发布到函子(Zion)无代码工作平台,封装出[网页端AI应用 

 

 

 

三.对接调试"上传文件"API和"执行工作流"API 

 

1.找到对应的Coze官方文档 

 

 

2.访问https://app.apifox.com/进行接口调试(没有账户的的自行注册,免费的) 

 

2.1 上传文件接口调试:配置好请求地址、请求头令牌、和上传一张照片然后发送验证是否调通Coze接口 

 

2.2 执行工作流接口调试:和上传文件接口调试方式一样配置好相关内容后,点击发送按钮看一下Coze接口是否返回成功。 

 

 

 

四.创建一个本地的html文件(包括页面内容和交互代码) 

 

1.Html前端页面部分: 

  <buttonid="panelToggle"onclick="togglePanel()">画图/照片切换</button>
    <divid="canvasContainer">
        <!-- 画板区域内容 -->
        <canvasid="myCanvas"></canvas>
        <div>      

代码篇幅多达上百行,有收货一键三连在评论区留言"999",截图找船长领取】 

2.JavaScript交互逻辑部分: 

// JavaScript代码
        var currentPanel = 'canvas'// 默认显示画板区域

        functiontogglePanel() {
            if (currentPanel === 'canvas') {               

代码篇幅多达上百行,有收货一键三连在评论区留言"999",截图找船长领取】 

3.最后修改一下JavaScript文件中3处配置即可 

 

3.1 两处代码的"ajroom1688"文本内容替换成你的Coze令牌即可 

 

3.2 "你的工作流id"文本改成你的工作流id即可 

 

3.3然后点击右键在浏览器运行这个html文件,你就可以用《你画我猜》测试豆包最新的视觉模型Pro啦! 



 

html源码: 

<!DOCTYPE html>
<htmllang="en">

<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">

代码篇幅多达上百行,有收货一键三连在评论区留言"999",截图找船长领取】  

关注公众号并添加舰长微信,领取智能体学习资料,并参与Coze技术直播讲解 

舰长积极创建智能体;工作流交流群,让我们在AI时代一起进步互相学习!每天会在群里分享智能体的搭建,欢迎各位小伙伴加入~ 

船长团队创作智能体专栏小册,里面有最新进阶的Coze智能体文章,在文章有收获的同时,可以分销而获取60%的小册费用,聚财成多 

 

 







没有评论:

发表评论

Gemini 2。5 Pro:国内,免费,直接用!🤯

网友狂喜!Gemini 2.5 Pro免费国内可直接使用! 网友狂喜!Gemini 2.5 Pro免费国内可直接使用! 谷歌高调宣布, Gemini 2.5 Pro  已取代 Claude 3.7 Sonnet, 成为 Aider Polyglot(真实世界编码)测评中性能最...