开云官网入口登录网页版-开云手机版APP下载安装

Coze平台重大更新：现在Coze的开发者们可以在扣子平台搭建具有复杂交互功能的 AI 应用功能了，可以告别之前只有简单交互，自己不能定制复杂表单的烦恼了。

扣子的这次升级变化还是比较大的，本教程斜杠君就手把手教大家打造一个自己的AI应用：搭建一个「名画写真生成」应用，功能是在应用界面中上传一张照片，把照片变成名画风格。

本教程保证大家一篇就能学会，全文将近5000字，每步都细节都有，应该是最详细的教程了，大家耐心阅读。可以关注收藏，以免之后找不到，而且也不会错过我后面的教程。

全文主要分为五部分：

1、创建 AI 应用项目

2、工作流的准备

3、设计用户界面

4、数据绑定

5、测试应用

6、发布应用接下来，话不多说，开始教学。一、创建应用1、选择创建应用选择左侧项目开发，再击创建按钮，大家可以发现和之前相比，会多出一个创建应用的选择，那我们就点击这个选项开始创建。

图片

2、创建空白应用这里因为我们从头开始搭建，所以这里我们选择「创建一个空白应用」。

图片

3、填写信息填写应用名称，点击确认

图片

看到这个界面的，我们第一步就创建完成了。

图片

二、准备工作流1、创建工作流在这部分，我们需要准备一个工作流来完成应用的主要功能。点击左侧的「资源库」，再点击右侧的「+资源」按钮下的工作流。

图片

2、选择模版

为了大家更容易快速的理解，我们这里通过使用一个官方的「名画写真工作流模版」工作流来进行讲解。在创建工作流这个界面，我们选择「模版」

图片

在搜索框搜索「名画照相馆」，然后点击「复制」按钮。

图片

这时可以发现，「名画写真工作流」就被复制到了我们的资源库中，之后我们就可以使用这个工作流来完成我们应用主要工作了。

图片

整体的工作流是这样的

图片

因为工作流已经搭建好了，我们不用考虑很细节的过程，这里我们只需要查看「开始节点」和「结束节点」就可以了。有的同学可能会问，为什么要查看开始节点和结束节点呢？因为只有通过「开始节点」和「结束节点」，我们才能确认界面中输入的参数是什么，输出的参数是什么，这样我们接下来才能设计好与用户交互的界面。点击「开始节点」，我们发现有三个输入的参数。image_url：这个是用户上传的照片query：用户上传的名画主题。这里支持的名画有：1. 维米尔《戴珍珠耳环的少女》2. 达芬奇《蒙娜丽莎的微笑》3. 拉斐尔《自画像》4. 梵高《戴灰毡帽的自画像》5. 达芬奇《抱貂的女子》6. 梵高《梵高耳朵缠着绷带、拿着烟斗的自画像》7. 哈尔斯《笑容骑士》8. 拉斐尔《戴头纱的女子》gender：用户性别。

图片

点击「结束节点」，我们发现有一个输出的参数，变量名为image。

图片

通过以上信息，我们就可以创建与用户的交互界面了，到这里工作流就准备好了，接来开始设计用户界面。

三、设计用户界面敲黑板：到了重点讲解的环节了，这里才是扣子应用的重点玩法，大家仔细听讲，没关注的同学快关注收藏，以免之后找不到噢~通过对上一步工作流的分析，我们知道了需要输入的三个参数，那这里我们就来设计一个表单，来让用户上传或输入这三个参数。回来第一步中创建的应用界面。1、引入工作流

首先把刚刚在上一步中创建的工作流引入进来。

图片

点击「复制到项目」，把这个工作流复制到当前的项目。

图片

项目复制中，稍等一会儿，不要关闭窗口，否则还要重新复制~

图片

复制好以后，可以发现，工作流被引入进来了。

图片

2、设计用户界面点击「用户界面」选项卡，就可以开始设计用户界面了。

图片

通过前面的分析，我们需要三个输入的组件，分别是：用户照片、名画风格和用户性别。所以这里我们来创建一个表单，并在表单中创建这三个选项。3、添加表单选项左侧的表单，双击或拖拽，表单就会被加入到面板中了，表单中默认会有为以下三个组件，文本，数字和选择框。

图片

4、修改表单因为我们需要一个上传照片的组件，所以我们先把上传组件拖入进来。

图片

因为默认的组件中，一个是输入数字的这个，组件不是我们需要的，所以在这里我们把这个组件做一个隐藏。

图片

把这里改为true，组件就被隐藏了。

图片

这里吐槽一下：斜杠君在以往使用过的界面设计工具中，设计面版中的组件都是有「删除组件按钮」的，我不知道扣子故意这么设计的还是什么Bug，到目前为止，我一直没有找到删除组件的功能，所以只能通过隐藏组件的方式实现，希望扣子官方能修复这个功能。到这里，三个组件就准备好了。我们来修改一下各组件的标题和对应的值。

图片

点选需要修改的标题，在右侧这里就可以修改。按这个方式，大家把其它几项也进行修改。

图片

「性别」组件这里注意一下，需要设置选项的值。

图片

5、表单预览。表单设计好以后，我们来预览一下整体的界面。

图片

备注：「名画主题」的组件，其实是可以用下拉选项的方式表现，效果更好。教程这里为了更容易大家理解，就做成文本的形式了，大家可以根据自己的需求改为下拉框的形式也没问题。

到这里表单就设计完成了，接来就是重要的流程了，绑定工作流。

四、绑定工作流和数据1、绑定工作流

下面这张图演示的设置很重要，大家按下图的方式进行设置。大家可以保存一下，方便用到的时候查看。

图片

2、绑定数据

这里很重要：选择工作流以后，就可以看到工作流的三个入参设置了，我们就可以为工作流中的三个参数绑定表单中的数据了。

图片

我们点击面板中的任意一个组件，可以看到右侧有一个变量的名称，大家一定要记住这个名称，我们要在绑定数据时用到。每个组件都有这个变量，所以对应的要有三个变量。

图片

点击按钮回到刚刚绑定事件的界面，点击右侧这个小的「展开按钮」，可以更方便的进行数据绑定。

图片

展开以后，看到这个变量是不是很熟悉，就是刚才让大家记住的变量。我们要使用这个变量下的value值。

非常注意：这里大家一定要选变量下面的value，如果只是选变量，是绑定不上值的，而且这里的上传的图片是一个数组。

斜杠君在绑定完数据，预览调试了好久，一直不正确，经反复测试，原来是这里的问题，大家一定要注意这里。

图片

其它也组件也同样按此方式绑定，绑定以后是如图所演示的配置：

图片

这里要注意，一定别忘了点这个确认按钮，如果不点这个按钮，配置窗口关闭系统不保存，还要重新再填（这里扣子平台应该修复一下）。3、按钮loading状态这里是一个重要的细节问题，在点击按钮的时候，我们要给按钮一个loading的状态。

图片

我们要继续配置按钮，点击「开始生成」按钮，选择「加载态 」旁边的小的扩展按钮。

图片

这里可以看到，我们来选择工作流中的loading状态 。这里说明一下，工作流里有三个主要变量：一个是data，一个是loading，一个是error。这三个变量分别代表的意思是：data：工作流返回的值；loading：表示工作流是否在运行；error：如果工作流出错会返回错误信息。那这里我们就选择loading作为「加载态 」的状态。

图片

这时当点击按钮时，会出现一个加载的小圆圈。如图所示：4、输出图片上面的输入部分我们讲完了，接下来，我们要给应用添加一个输出了。因为我们的输出是一个图片，所以我们加一个图片添加进来。（这里也是为了讲解方便，我们把输出也放到表单里了，这里大家也可以自行设置位置。）

图片

同样在这里，我们为图片绑定一个输出的值。

图片

输出值就是我们在前面分析的，工作流结束节点的输出值，也就是image变量。

图片

到这里为止， 我们的表单和工作流的绑定，以及数据的绑定就完全配置完了。

图片

 看到这里并能动手实践的同学，恭喜你！你已经完成掌握了Coze应用搭建最重要的内容了，快给自己点个赞，也给斜杠君点个关注，支持一下吧~五、测试应用接下来放松一下，让我们测试一下我们打建的应用效果怎么样~点击预览按钮：

图片

可以看到以下界面：

图片

上传图片并填写表单：

图片

这里上传一张甄嬛的照片，看看维米尔风格的甄嬛。

图片

图片

点击运行

图片

甄嬛维米尔画作生成了，怎么样，效果不错吧~~ 本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。