【AI相关】扣子开发一个 AI 翻译应用

AI 翻译应用介绍

这个 AI 翻译应用支持用户选择目标翻译语言，在输入文本内容后，点击开始翻译就可以获得到大模型的翻译结果了。

步骤一：设计你的应用功能

首先，你需要进行应用设计，规划应用的主体功能和用户界面。
这个 AI 翻译应用的核心功能是能够满足用户的文本翻译需求，并支持用户选择指定翻译的语言。翻译功能可以通过创建一个包含大模型节点的工作流来实现。
基于以上功能规划，这个应用的用户界面会包含以下组件：

• 一个让用户可以输入翻译内容的区域
• 一个让用户选择翻译语言的列表
• 一个翻译按钮来触发翻译操作
• 一个展示翻译结果的内容区域

完成主体功能设计和规划后，就可以开始 AI 应用搭建了。

步骤二：创建 AI 应用项目

首先，你需要创建一个 AI 应用项目。
AI 应用项目支持使用工作流来完成复杂的业务逻辑编排，也支持使用数据库、知识库、插件等资源实现与本地数据或线上数据的交互。此外，AI 应用项目支持通过拖拉拽的方式搭建用户界面，并且能够实现与业务逻辑的联动。
创建 AI 应用项目。
1.登录扣子平台。
2.在左侧菜单栏，单击工作空间。
3.选择一个工作空间。
工作空间是各种资源和开发项目的集合。不同工作空间内的数据和资源相互隔离。
4，在项目开发页面，单击创建，然后在弹出的页面，选择创建应用。

5.在应用模板页面，单击空白应用。
6.输入应用名称，并单击图标旁的 AI 图标使用 AI 自动生成一个图标。然后单击确定。
应用创建成功后，你会直接进入到应用的集成开发环境 (IDE)。

步骤三：编排业务逻辑

创建完 AI 应用项目后，你可以开始进行业务逻辑编排了。扣子 提供了大模型、代码、意图识别、知识库写入与检索等丰富的工作流节点，以满足复杂的业务场景需求。此外，你还可以通过使用变量、插件、知识库等方式与你的本地数据和线上数据进行集成。
本教程中的 AI 翻译应用，主要是使用大模型实现多语言翻译，所以只需要创建一个包含大模型节点的工作流即可。
参考以下步骤，创建一个实现翻译功能的工作流。
1.在业务逻辑页面，找到工作流，然后单击 + > 新建工作流。

2.输入工作流名称和说明，然后单击确认。
3.在工作流画布，单击开始节点的连接线或画布下方的添加节点按钮，然后选择大模型节点，并完成连线。

4.单击开始节点进行配置。开始节点用于设定启动工作流需要的信息。
本场景中，用户需要提供要翻译的内容和目标语言，所以需要配置两个对应的输入参数。

• 在输入区域，单击 + 图标，配置第一个变量 (content) 用于传入用户要翻译的内容。
• 再次单击 + 图标。输入第二个变量
  (lang) 用来指定目标语言。
  
  5.单击大模型节点进行配置。
  在模型区域，展开模型列表，选择用来执行翻译任务的大模型。本教程中选择豆包 工具调用 模型，并使用模型默认配置。
  如果你想调整模型配置，单击配置图标。
  配置输入参数，这些输入参数可以在模型提示词中使用。
  本教程中需要将用户输入的译文内容和目标语言添加到提示词中，让模型按照用户选择的语言进行翻译。所以需要配置两个输入参数。
  单击输入区域的+图标，然后点击对应的设置图标，选择开始节点中配置的变量。
  
  2.重复上述操作，再添加目标语言的这个变量。
  删除不需要的输入信息，确保输入中只包含下图中的这两个参数。
  3.在系统提示词区域，输入以下内容作为系统提示词。
  系统提示词是一组指示模型行为和功能范围的指令，可以包括如何提问、如何提供信息、如何请求特定功能等。系统提示词也用于设定对话的边界，比如告知用户哪些类型的问题或请求是不被接受的。

# 角色
你是一个专业的翻译官，能够准确地将用户输入的内容翻译成目标语言，不进行随意扩写。

## 技能
### 技能 1：翻译文本
1. 当用户提供一段文本时，迅速将其翻译成目标语言。
2. 确保翻译的准确性和流畅性。

## 限制：
- 只进行翻译工作，不回答与翻译无关的问题。
- 严格按照用户要求的目标语言进行翻译，不得擅自更改。

4.在用户提示词区域，输入用户提示词。
用户提示词通常是直接的命令，告诉模型要执行的任务或意图。例如“帮我翻译下这段内容”，指令越清晰，模型的输出也更贴近你的实际需求。
a) 首先输入以下内容。

将用户输入的内容翻译成目标语言。

因为不同用户提供的翻译内容，选择的目标语言都不同，所以需要将译文内容和目标语言使用输入变量来指代，这样就可以在运行时替换成真实的用户需求。
b) 在”内容”文字后输入{，然后选择指代翻译内容的变量。

c) 重复上述方法，添加目标语言变量。

在输出区域，将输出格式配置为文本，使用默认配置的output变量。

6.连接大模型节点与结束节点，然后选择结束节点进行配置。
a.单击结束节点，然后选择返回文本。
b.选择大模型节点的输出结果作为输出参数。

c.在回答内容文本框中输入{{output}}，使用大模型的翻译内容作为最终的回复。
d.开启流式输出，实现打字机一样的输出效果。

已经完成整个工作流的搭建。
7.为了保证业务逻辑实现符合预期，单击试运行测试工作流的执行。

8.在试运行页面，输入要翻译的内容和目标语言，然后单击试运行。

步骤四：搭建用户界面

扣子提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需写一行代码。
参考以下操作，搭建网页端翻译应用的用户界面。
1.在应用 IDE，单击页面上方的用户界面页签。
2.选择桌面网页，然后单击开始搭建。

从组件处选择“布局组件”->“容器”(div)，拖拽页面处，在将“文本”拖拽只容器

输入文本“翻译器”，调整元素分布。

再拖拽div容器至页面，从组件->表单拖拽至容器处，选择不必要的元素删除，保留按钮

再从组件选择“多行输入”、“下拉选择”、“markdown”等拖拽至form表单。

步骤五 添加事件

选择“翻译”按钮，选择“事件”属性标签，点击“新建”事件，选择“点击时”触发，执行动作选择“调用工作流”，workflow选择之前配置好的流程，配置workflow入参，在content点击{x},选择组件 (Textarea),使用其值{{Textarea.value}}，在long点击{x}，选择组件(select),使用其值{{select.value}}

点击确认完成工作流调用。

配置翻译结果数据。
最后需要将工作流返回的翻译内容展示在用户页面中。
在画布中，选中最后添加的Markdown组件。
在右侧的属性面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。

在展开的面板中，首先在翻译结果下增加一行，然后选择工作流的返回数据作为翻译结果展示给用户。配置完成后，关闭配置面板。

步骤五：效果测试

完成上述所有配置后，单击预览对查看整体功能并进行体验。

步骤六：发布

点击发布按钮完成发布。