课程地址：
https://zxdwhda-share.feishu.cn/wiki/Gi9aw4EDTiXxcekUWebcEtmUnb4应用
AI应用是指利用大模型技术开发的应用程序，这些应用程序能够使用大模型，执行复杂任务，分析数据，并作出决策。例如AI搜索和AI翻译等。
步骤一：设计你的应用功能
首先，需要进行应用设计，规划应用的主体功能和用户界面。
这个AI翻译应用的核心功能是能够满足用户的文本翻译需求，并支持用户选择指定翻译的语言。
翻译功能通过一个包含大模型节点的工作流来实现。
基于以上功能规划，这个应用的用户界面会包含以下组件：
一个让用户可以输入翻译内容的区域
一个让用户选择翻译语言的列表
一个翻译按钮来触发翻译操作
一个展示翻译结果的内容区域
以下是效果图，完成主体功能设计和规划后，就可以开始AI应用搭建了。
步骤二：创建 AI 应用项目
首先，需要创建一个 AI 应用项目。
在项目开发页面，单击创建，然后在弹出的页面，选择创建应用。
在应用模板页面，单击空白应用。
输入应用名称，然后单击确定。
应用创建成功后，你会直接进入到应用的集成开发环境(IDE)。
步骤三：制作一个智能体
创建完AI应用项目后，你可以开始进行业务逻辑编排了。
本教程中的AI翻译应用，主要是使用大模型实现多语言翻译，所以只需要创建一个包含大模型节点的工作流即可。
参考以下步骤，创建一个实现翻译功能的工作流。
新建工作流
在业务逻辑页面的左侧，找到工作流，然后单击 + > 新建工作流；输入工作流名称和说明，然后单击确认。
工作流命名：rendering
打开界面：
编辑开始节点
单击开始节点进行配置。
本场景中，用户需要提供要翻译的内容和目标语言，所以需要配置两个对应的输入参数。
在输入区域，单击 + 图标，配置第一个变量 (content) 用于传入用户要翻译的内容。
再次单击单击 + 图标。输入第二个变量 (lang) 用来指定目标语言。
编辑大模型节点
新建一个大模型节点
填写两个输入变量
填写系统提示词与用户提示词
下面两个是markdown格式：
# 角色
你是一个专业的翻译官，能够准确地将用户输入的内容翻译成目标语言，不进行随意扩写。
## 技能
### 技能 1：翻译文本
1. 当用户提供一段文本时，迅速将其翻译成目标语言。
2. 确保翻译的准确性和流畅性。
## 限制：
- 只进行翻译工作，不回答与翻译无关的问题。
- 严格按照用户要求的目标语言进行翻译，不得擅自更改。 将用户输入的内容{{content}}翻译成目标语言{{lang}}。
编辑结束节点和测试
连接大模型节点与结束节点，然后选择结束节点进行配置。
单击结束节点，然后选择返回文本。
选择大模型节点的输出结果作为输出参数。
在回答内容文本框中输入{{output}}，使用大模型的翻译内容作为最终的回复。
为了保证业务逻辑实现符合预期，单击试运行测试工作流的执行。
步骤四：搭建用户界面
在应用 IDE，单击页面上方的用户界面页签。
选择桌面网页，然后单击开始搭建。
搭建页面结构
1.确认画布的排列方向为纵向。
2.在组件面板中，找到布局组件 > 容器组件，然后将容器组件拖入到中间的画布中。
3.在画布中，选中拖入的容器组件。组件名称为Div1（会自动命名）。
4.参考以下配置，修改容器组件Div1的属性。
Div1的属性设置
设置尺寸和布局。
将排列方向设置为横向。
将宽度设置为填充容器（即100%）。
将高度设置为60 px。
5.再拖入一个容器组件用来组织功能区，并在画布中选中该组件
6.向画布的容器组件Div2的左侧区域中，拖入一个容器组件Div3，用来组织左侧的内容翻译区域。然后选中该组件，参考下表中的属性配置进行修改。
Div3的属性设置 |
|
7.向画布中容器组件Div2的右侧区域中，拖入一个容器组件Div4，用来组织右侧的翻译结果区域。然后选中该组件，参考下表中的属性配置进行修改。
Div4的属性设置 |
|
至此，我们就完成了这个翻译应用的页面结构搭建。
搭建页面标题
参考以下操作，搭建页面的标题区域。
1.在组件面板中，找到推荐组件 > 文本组件，然后将文本组件拖入到顶部的容器组件Div1上。
2.在画布中，选中拖入的文本组件，然后在右侧的属性面板中设置文本内容，字号大小等。
文本内容：AI 翻译
字号大小：18
字重：粗体
搭建左侧翻译内容区
在组件面板中，将表单组件拖入到画布的容器组件Div3中，然后选中不需要的组件并按下 Backspace 键进行删除，只保留文本组件、选择组件和按钮组件。
选中表单组件，参考下表修改它的属性
Form表单组件的属性设置
将宽度和高度都设置为填充容器。
3.选中表单内的文本输入框，然后将其拉伸它的大小，再修改属性配置。
标签内容和占位文案都修改为：请输入翻译内容。
宽度设置百分比 100%。
4.选中表单组件中的选择组件，然后修改它的属性配置。
标签内容修改为：目标语言。
选项设置：保留两个选项，分别为英语和日语。确保名称和选项值正确。
5.选中表单组件中的按钮组件，将内容修改为开始翻译。
至此，我们就完成了左侧的翻译内容区域的页面功能搭建。
搭建右侧翻译结果区
在组件面板中，将 Markdown 组件拖入到画布的容器组件Div4中。
选中新拖入的组件，配置以下属性。
内容：删除已有内容，输入 Markdown 格式内容：
### 翻译结果。高度和宽度：设置为填充容器。
圆角：设置为10。
内边距：设置为20。
外边距：设置为0。
边框：设置为灰色
至此，我们就完成了翻译应用的用户界面搭建，可单击属性面板上方的预览选项进行页面预览。
添加事件
搭建好页面后，就可以通过配置事件和添加数据实现业务逻辑与用户页面的联动了。
在用户页面页签下，单击已添加的开始翻译按钮组件，然后在配置面板中选择事件，最后单击新建。
事件类型选择点击时。
执行动作选择调用工作流，然后选择已经创建的工作流。选择工作流后，会自动展示所选工作流配置的输入参数。
4.将鼠标悬浮至content参数的文本框上，然后单击右侧的配置图标。
5.在展开的配置面板中，找到用户输入翻译内容的组件 (Textarea)，选择表单值作为工作流中content参数的值。配置完成后关闭参数配置面板。
6.重复上述操作，将目标语言组件的值作为工作流lang参数的值。
配置翻译结果数据。
最后需要将工作流返回的翻译内容展示在用户页面中。
在画布中，选中最后添加的Markdown组件。
在右侧的属性面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。
在展开的面板中，首先在翻译结果下增加一行，然后选择工作流的返回数据作为翻译结果展示给用户。配置完成后，关闭配置面板。
步骤五：预览结果
点击右上角——预览
在跳转页面，输入“早上好”，目标语言选择法语，等待片刻展示输出结果
配上一个背景：
步骤六：发布
选择合适的发布渠道
