AI应用开发之扣子第二课-AI翻译（第2节/共2节）

简介

共分为两节介绍，内容简单易懂，步骤详细，可以避免很多坑，建议直接上手操作。

AI应用开发之扣子第二课-AI翻译（第1节/共2节）：业务逻辑实现

[本篇博客] AI应用开发之扣子第二课学习-AI翻译（第2节/共2节）：用户界面设计（上手操作预估30分钟）

目标

提供用户交互界面，输入要翻译的内容，选择翻译的目标语言进行翻译。业务逻辑通过可视化的流程编排，调用LLM进行语言翻译。本节我们首先完成业务流程的编排，实现业务逻辑，并能进行调试验证。

用户界面设计

1.界面布局设计

依次点击用户界面 => “桌面网页” => 开始搭建。

点击界面选中默认主容器，设置为横向布局。

在左侧拖入一个容器到界面中，默认名称为DIV1。

设置DIV1的尺寸和布局。

• 将宽度设置为填充容器（即100%）。
• 将高度设置为60 px。
• 将排列方向设置为横向。
• 找到填充属性，然后单击删除图标去掉背景色。
• 将边框设置为灰色。

在左侧拖入一个容器到界面中，默认名称为DIV2，设置尺寸和布局。

• 设置尺寸，将宽度和高度都设置为填充容器（即100%）。
• 排列方向设置为横向。
• 设置样式。找到填充属性，然后单击删除图标去掉背景色。

在左侧拖入一个容器到界面中，默认名称为DIV3，设置尺寸和布局。

• 将宽度设置为50%。
• 将高度设置为固定值550px。
• 删除背景色。

在左侧拖入一个容器到界面中，默认名称为DIV4，设置尺寸和布局。

• 将宽度设置为50%。
• 将高度设置为固定值550px。
• 删除背景色。

至此，我们就完成了这个应用的界面布局设计。

2.标题、操作区、结果区设计

至此，我们就完成了应用的用户界面设计。可点击右上角“预览”按钮进行界面预览。

3.添加事件

选择“开始翻译”按钮，配置事件。点击时；调用工作流；translation；{{ Textarea1.value }}；{{ Select1.value }}。

选择markdown，配置翻译结果显示。添加{{ translation.data }}。至此，我们就完成了应用界面的事件绑定。

可以点击右上角“预览”按钮进行试用。

4.发布应用

至此，即完成整个AI翻译应用的开发。感谢阅读！真材实料的实践分享，别忘记给个点赞哦👍。

AI应用开发之扣子第二课-AI翻译（第1节/共2节）：业务逻辑实现

[本篇博客] AI应用开发之扣子第二课学习-AI翻译（第2节/共2节）：用户界面设计（上手操作预估30分钟）