一步步教你用工作流模式无代码开发AI应用（下篇）

上次我们讲到《一步步教你用工作流模式无代码开发AI应用（上篇）》

我们在Coze中构建项目，构建业务逻辑工作流和后端 AI 模型的配置。

完成以上步骤后，我们的业务逻辑已经成功创建，并可以按照个性化需求进行进一步调整和优化。

如果试运行一切正常，我们接下来就进入搭建用户界面的工作。

七、设计用户 UI 界面

1. 进入用户界面设置
   点击画布上方的 “用户界面” 选项卡，进入页面设计模式。

这里可以根据你的需要选择 UI 搭建类型，咱们选择桌面网页。

2. 添加标题区域
   在左侧菜单的 组件面板 中，找到 布局组件 > 容器组件，将【文本】其拖入画布中央，作为页面的标题区域。

• 系统会自动将该容器命名为 Text1，拖动到页面中央，拉伸大小到合适的尺度，在右侧配置页面对其进行配置：

  • 内容：修改为【AI 文言文转换器】。
  • 布局：排列方向为 “横向”。
  • 样式：字号30，字重设置为粗体。字体颜色可以根据自己的喜欢调整。

3. 添加功能区域
   在 Text1 下方，再拖入一个容器组件，系统会自动命名为 Div1，用于作为功能区域。

• 配置方式：
  • 尺寸：宽度和高度都设为“填充容器”。
  • 布局：排列方向为 “横向”。
  • 样式：去除背景色。

4. 划分功能区域
   • 左侧用户输入区域：
     在 Div1 的左侧部分，拖入一个容器组件，系统会自动命名为 Div2，作为用户输入区域。
     • 配置方式：
       • 宽度：设为 50%。
       • 高度：设为 650px。
       • 样式：删除背景色。

• 右侧结果展示区域：
  在 Div2 的右侧部分，拖入另一个容器组件，系统会自动命名为 Div3，作为展示结果区域。
  • 配置方式：
    • 宽度：设为 50%。
    • 高度：设为 650px。
    • 样式：删除背景色。

5. 页面布局完成
   至此，页面布局如下图所示。

八、用户界面的搭建：页面细节完善

页面布局搭建好之后，我们来完善页面细节。

1、在 Div2 容器内部，拖入输入组件 > 文本输入，作为白话文输入框。

文本输入框：拉伸高度，宽度设为填充容器，标签和占位文案设为"请输入现代汉语白话文"。

2、在 Div3 容器内部，拖入推荐组件 > 按钮，作为点击转换按钮。

按钮：文本改为"转换文言文"，颜色默认是黑色，可以根据自己喜好调整。

3、在 Div3 容器中再拖入一个展示组件 > Markdown 组件，作为展示转换之后的文言文区域。

先删除 Markdown 组件的已有内容，改成"#### 文言文生成结果"。

高度和宽度改为填充容器，圆角修改为10，内边距修改为20，边框设置为灰色（#E2E8F0）。

到这里，页面细节完善完成，单击属性面板上方灰底蓝字的预览按钮，查看我们设计的页面效果。

九、用户界面的搭建：配置事件

整体页面 UI 外观设计完成后，要对事件进行配置，这一步的目的是把后端的我们设计好的大模型业务逻辑与 UI 用户界面连接起来。

1、点击"转换文言文"按钮，在配置面板切换到"事件"，点击"新建"。

事件类型设为"点击时"，执行动作设为"调用 Workflow"。

Workflow 设为已经创建好的"cl_chinese_creator"，并将工作流的入参配置 content 设为我们文本输入框的值 {{ Textarea1.value }}。

2、配置生成结果区域，展示转换之后的返回结果。

我们选中 Markdown 组件，在属性配置点击"内容"栏的扩展按钮。

扩展面板中，在#### 文言文生成结果 后面添加一行，插入大模型工作流的返回结果{{ cl_chinese_creator.data }}。

完成所有配置后，可以单击右上角灰底蓝字的"预览"按钮，测试一下整体效果。

如果测试转换一切正常，我们这个最简单的 AI 应用就算开发完成了。

十、发布 AI 应用

我们开发完成后，就可以公开发布这款 AI 应用，让更多的人也都可以使用和体验。

点击右上角蓝底白字的"发布"按钮，版本号可以设为 v0.0.1，发布平台设置为发布到扣子商店。

至此 ，我们的首款 “AI 文言文转换器” 应用就提交发布到扣子商店，经过10~15分钟的审核，如果没有问题，就面向全世界公开发布了。

我们可以尝试下，选择一段林清玄先生的现代散文进行转换。

十一、总结

大家可以根据我们这个案例，尝试改变输入 AI 模型的Prompt提示词，微调它执行不同的任务和模板，就能变化出很多不同功能的 AI 应用。

比如，Coze 官方的"AI 翻译"，就是让 AI 把用户输入的中文翻译成其他语言，跟我们的"AI 文言文转换器"本质上其实是一样的。

当然除了文本生成和转化，Coze 扣子还提供许多其他能力，搭配不同的 AI 大模型，可以生成AI 图片、抓取外部数据、连接数据库进行读写等等，从而可以做出各种更强大的 AI 应用。

通过"工作流模式"使用图形化界面全程无代码搭建一个 AI 应用，简单而便捷，随时查看效果，一键发布，值得大家多多尝试。