SUNFLOWER MATCH LAB 低代码集成在Dify平台上快速创建植物识别AI应用你是不是也对那些能识别花草树木的AI应用感到好奇觉得它们很酷但又觉得开发起来肯定特别复杂需要写很多代码还得懂深度学习今天我就带你打破这个刻板印象。我们手头有一个已经部署好的植物识别模型叫SUNFLOWER MATCH LAB。它的API接口已经在那儿了能接收一张植物图片然后告诉我们这是什么植物以及相关的信息。现在我们的目标不是去从头写一个网站或者App而是用一个叫Dify的平台像搭积木一样快速把这个AI能力包装成一个有界面、能交互的Web应用。整个过程你几乎不需要写一行前端代码。我们只需要在Dify里点点鼠标配置一下一个功能完整的植物识别应用就诞生了。这听起来是不是简单多了接下来我就手把手带你走一遍这个神奇的过程。1. 准备工作理清思路与获取钥匙在开始“搭积木”之前我们得先准备好两样最关键的东西清晰的思路和打开模型大门的“钥匙”。1.1 理解我们要做什么整个过程其实很简单就像设计一个流水线用户入口提供一个网页让用户可以上传一张植物图片。处理核心把用户上传的图片转发给我们部署好的SUNFLOWER MATCH LAB模型API。结果展示把模型返回的识别结果比如植物名称、科属、简介用美观清晰的方式展示给用户。Dify平台的作用就是帮我们轻松地搭建起这个流水线并且自动生成第1步和第3步的用户界面。1.2 获取模型API的“钥匙”这是最关键的一步。你需要从部署SUNFLOWER MATCH LAB模型的后端服务那里拿到调用它所需的凭证。通常这包括API端点地址一个URL类似于https://your-model-service.com/v1/predict。这就是我们发送请求的地址。API密钥一串字符用于验证你的身份确保只有你才能调用这个API。如何获取这些信息取决于你的模型是如何部署的。如果你用的是云服务商比如阿里云、腾讯云的模型部署服务或者自己在服务器上部署的那么在其控制台或文档里都能找到这些信息。请务必妥善保管你的API密钥不要泄露。假设我们已经拿到了以下信息请替换为你自己的真实信息API地址https://api.example.com/sunflower-match/predictAPI密钥sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx好了钥匙在手我们可以进入Dify开始搭建了。2. 在Dify中创建并配置AI应用Dify是一个可视化的AI应用开发平台我们的所有工作都将在这里完成。2.1 创建新应用首先登录你的Dify工作空间。在左侧导航栏找到并点击“应用”。点击右上角的“创建新应用”按钮。在弹出的窗口中选择“空白应用”。因为我们是完全自定义的工作流所以不从模板开始。给你的应用起个名字比如“我的植物识别助手”然后点击创建。现在你会进入一个画布界面这就是我们搭建工作流的地方。2.2 配置关键组件HTTP请求节点工作流的核心就是调用我们自己的模型API。在Dify中我们使用“HTTP请求”节点来实现。添加节点在画布左侧的节点列表中找到“工具”分类下的“HTTP请求”节点把它拖拽到画布中央。配置请求地址点击这个节点进行配置。在“URL”一栏填入我们之前准备好的模型API地址https://api.example.com/sunflower-match/predict。配置请求方法选择“POST”因为通常向模型发送图片数据都使用POST方法。配置请求头这是传递API密钥的地方。点击“添加头部”键输入Authorization这是最常见的认证头字段具体请参照你的模型API文档。值输入Bearer sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx注意Bearer后面有个空格。配置请求体我们需要告诉API要发送什么数据。选择“JSON”格式。这里的关键是我们需要把用户上传的图片文件转换成模型能接受的格式。假设我们的模型API接受一个包含图片Base64编码字符串的JSON那么配置可能如下{ image: {{输入变量名}} }这里的{{输入变量名}}是一个占位符我们稍后会把它和用户上传的图片连接起来。先保存这个节点的配置我们暂时还不知道{{输入变量名}}具体叫什么。2.3 设置用户输入图片上传现在我们来创建应用的起点——让用户能上传图片。添加开始节点从左侧节点列表的“开始”分类下拖拽一个“开始”节点到画布上通常放在最左边。配置用户输入点击“开始”节点在右侧配置面板我们可以定义用户需要提供什么。这里我们点击“添加变量”。变量类型选择“文件”。这会让Dify生成一个图片上传组件。变量名称填写一个英文标识例如plant_image。记住这个名字它就是我们刚才在HTTP请求节点里需要的{{输入变量名}}。标题填写中文提示如“请上传植物图片”。描述可选填写更详细的说明如“支持JPG、PNG格式图片中的植物主体应清晰可见”。现在回到刚才的“HTTP请求”节点把请求体JSON中的占位符改成我们刚定义的变量名{ image: {{plant_image}} }但这里有个细节用户上传的是文件对象而我们的API可能需要Base64字符串。Dify的“文件”类型变量在传递给HTTP节点时有时需要特殊处理。你可能需要在变量名后加上.base64来获取其Base64编码即{{plant_image.base64}}。这完全取决于你的模型API具体接收什么格式请根据API文档调整。假设我们的API接收Base64那么最终配置应为{ image: {{plant_image.base64}} }2.4 处理并展示模型响应模型API处理完图片后会返回一个结果。我们需要把这个结果提取出来并展示给用户。解析响应在“HTTP请求”节点的配置面板下方有一个“响应”部分。Dify会自动尝试解析返回的JSON。你需要根据你的模型API实际返回的数据结构来映射变量。例如如果你的API返回{“result”: {“name”: “向日葵” “family”: “菊科” “description”: “...”}}。你可以在“响应”部分点击添加映射将result.name映射到一个新变量比如plant_name。同样地映射result.family到plant_familyresult.description到plant_desc。添加回复节点从左侧节点列表拖拽一个“回复”节点到画布上放在HTTP请求节点的右边。连接节点从“开始”节点的输出点右边拖出一条线连接到“HTTP请求”节点的输入点左边。再从“HTTP请求”节点的输出点连接到“回复”节点的输入点。配置回复内容点击“回复”节点这里就是我们设计最终展示给用户界面的地方。你可以使用富文本并插入我们刚才解析出来的变量。在编辑框中你可以这样写识别结果如下 **植物名称**{{plant_name}} **科属信息**{{plant_family}} **简介**{{plant_desc}}你还可以用更丰富的Markdown格式来美化展示比如添加图标、调整排版等。3. 测试、发布与分享你的应用搭建完成后必须经过测试才能确保一切正常。3.1 在工作流中测试在Dify画布的右上角有一个“预览”面板。点击它右侧会展开测试区域。在测试区你会看到我们定义的“请上传植物图片”的上传框。点击上传选择一张你准备好的植物图片比如一张向日葵的图片。点击“运行”按钮。观察画布上节点的运行状态通常会高亮显示并在右侧查看“回复”节点输出的内容。如果顺利你应该能看到模型返回的植物信息被格式化地展示出来了。如果出错请检查API地址和密钥是否正确、网络是否通畅、请求体格式是否符合API要求、变量映射的路径是否正确。3.2 发布并获取访问链接测试通过后就可以发布了。点击画布右上角的“发布”按钮。Dify会为你生成一个唯一的应用访问链接。你可以直接复制这个链接通过浏览器打开。现在一个独立的、带有图片上传功能和结果展示页面的Web应用就诞生了在Dify的“应用”页面找到你创建的应用点击进入后还可以进行更多设置比如自定义域名、调整界面主题等。4. 总结走完整个流程你会发现借助Dify这样的低代码平台将一个已有的AI模型API转化为一个可用的应用竟然如此简单直接。我们不需要操心前端页面的HTML、CSS、JavaScript也不需要搭建复杂的后端路由。整个过程的核心就是定义输入图片 - 连接处理调用API - 定义输出展示结果。这种方式的优势非常明显速度快、门槛低、易维护。当你的模型API需要更新时你只需要在Dify的工作流里调整那个HTTP请求节点即可前端界面会自动适应。这特别适合产品经理、运营人员或者算法工程师快速验证AI想法构建原型或内部工具。当然这只是一个起点。Dify还支持更复杂的工作流比如多模型调用、条件判断、数据库连接等。你可以基于这个植物识别的例子发挥想象力去创造更多有趣的AI应用。下次当你有一个不错的模型API时不妨先想想能不能用Dify在喝杯咖啡的时间里给它做个界面呢获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。