本教程详细指导你如何在扣子开发平台上完成一个网页端 AI 翻译应用的开发。 ## AI 翻译应用介绍 这个 AI 翻译应用支持用户选择目标翻译语言，在输入文本内容后，点击**开始翻译**就可以获得到大模型的翻译结果了。  ## 步骤一：设计你的应用功能 首先，你需要进行应用设计，规划应用的主体功能和用户界面。 这个 AI 翻译应用的核心功能是能够满足用户的文本翻译需求，并支持用户选择指定翻译的语言。翻译功能可以通过创建一个包含大模型节点的工作流来实现。 基于以上功能规划，这个应用的用户界面会包含以下组件： * 一个让用户可以输入翻译内容的区域 * 一个让用户选择翻译语言的列表 * 一个翻译按钮来触发翻译操作 * 一个展示翻译结果的内容区域 完成主体功能设计和规划后，就可以开始 AI 应用搭建了。 ## 步骤二：创建 AI 应用项目 首先，你需要创建一个 AI 应用项目。 AI 应用项目支持使用工作流来完成复杂的业务逻辑编排，也支持使用数据库、知识库、插件等资源实现与本地数据或线上数据的交互。此外，AI 应用项目支持通过拖拉拽的方式搭建用户界面，并且能够实现与业务逻辑的联动。 参考以下操作，创建 AI 应用项目。 1. 登录[扣子开发平台](https://www.coze.cn/home)。 2. 在左侧菜单栏，单击**工作空间**。 3. 选择一个工作空间。 工作空间是各种资源和开发项目的集合。不同工作空间内的数据和资源相互隔离。 4. 在**项目开发**页面，单击**创建**，然后在弹出的页面，选择**创建应用**。  5. 在**应用模板**页面，单击**空白应用**。 6. 输入应用名称，并单击图标旁的 AI 图标使用 AI 自动生成一个图标。然后单击**确定**。 应用创建成功后，你会直接进入到应用的集成开发环境 (IDE)。  ## 步骤三：编排业务逻辑 创建完 AI 应用项目后，你可以开始进行业务逻辑编排了。扣子 提供了大模型、代码、意图识别、知识库写入与检索等丰富的工作流节点，以满足复杂的业务场景需求。此外，你还可以通过使用变量、插件、知识库等方式与你的本地数据和线上数据进行集成。 本教程中的 AI 翻译应用，主要是使用大模型实现多语言翻译，所以只需要创建一个包含大模型节点的工作流即可。 参考以下步骤，创建一个实现翻译功能的工作流。 1. 在**业务逻辑**页面，找到**工作流**，然后单击 **+ **>** 新建工作流**。  2. 输入工作流名称和说明，然后单击**确认**。 工作流名称只支持字母、数字和下划线，且必须以字母开头。  3. 在工作流画布，单击**开始**节点的连接线或画布下方的**添加节点**按钮，然后选择**大模型**节点，并完成连线。  4. 单击**开始**节点进行配置。开始节点用于设定启动工作流需要的信息。 本场景中，用户需要提供要翻译的内容和目标语言，所以需要配置两个对应的输入参数。 1. 在输入区域，单击 **+ **图标，配置第一个变量 (content) 用于传入用户要翻译的内容。 2. 再次单击 **+ **图标。输入第二个变量 (lang) 用来指定目标语言。  5. 单击**大模型**节点进行配置。 1. 在**模型**区域，展开模型列表，选择用来执行翻译任务的大模型。本教程中选择**豆包 工具调用 **模型，并使用模型默认配置。 如果你想调整模型配置，单击配置图标。  2. 配置输入参数，这些输入参数可以在模型提示词中使用。 本教程中需要将用户输入的译文内容和目标语言添加到提示词中，让模型按照用户选择的语言进行翻译。所以需要配置两个输入参数。 1. 单击**输入**区域的**+**图标，然后点击对应的设置图标，选择开始节点中配置的变量。  2. 重复上述操作，再添加目标语言的这个变量。 删除不需要的输入信息，确保输入中只包含下图中的这两个参数。  3. 在**系统提示词**区域，输入以下内容作为系统提示词。 系统提示词是一组指示模型行为和功能范围的指令，可以包括如何提问、如何提供信息、如何请求特定功能等。系统提示词也用于设定对话的边界，比如告知用户哪些类型的问题或请求是不被接受的。 ```Plain%20Text # 角色 你是一个专业的翻译官，能够准确地将用户输入的内容翻译成目标语言，不进行随意扩写。 ## 技能 ### 技能 1：翻译文本 1. 当用户提供一段文本时，迅速将其翻译成目标语言。 2. 确保翻译的准确性和流畅性。 ## 限制： - 只进行翻译工作，不回答与翻译无关的问题。 - 严格按照用户要求的目标语言进行翻译，不得擅自更改。 ```  4. 在**用户提示词**区域，输入用户提示词。 用户提示词通常是直接的命令，告诉模型要执行的任务或意图。例如“帮我翻译下这段内容”，指令越清晰，模型的输出也更贴近你的实际需求。 1. 首先输入以下内容。 ```Plain%20Text 将用户输入的内容翻译成目标语言。 ``` 因为不同用户提供的翻译内容，选择的目标语言都不同，所以需要将译文内容和目标语言使用输入变量来指代，这样就可以在运行时替换成真实的用户需求。 2. 在”内容”文字后输入{，然后选择指代翻译内容的变量。 如果你没有可用的变量，请检查是否按照教程配置了模型节点的输入变量。  3. 重复上述方法，添加目标语言变量。  5. 在**输出**区域，将**输出格式**配置为**文本**，使用默认配置的**output**变量。  6. 连接大模型节点与结束节点，然后选择**结束**节点进行配置。 1. 单击**结束**节点，然后选择**返回文本**。 2. 选择大模型节点的输出结果作为输出参数。  3. 在**回答内容**文本框中输入{{output}}，使用大模型的翻译内容作为最终的回复。 4. 开启**流式输出**，实现打字机一样的输出效果。  至此，你已经完成整个工作流的搭建。 7. 为了保证业务逻辑实现符合预期，单击**试运行**测试工作流的执行。  8. 在**试运行**页面，输入要翻译的内容和目标语言，然后单击**试运行**。  9. 查看运行结果是否符合预期。 如果不符合预期，你可以逐一检查每个节点的输出结果。  在完成业务逻辑搭建并通过测试后，你就可以开始用户界面搭建了。 ## 步骤四：搭建用户界面 扣子提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需写一行代码。 参考以下操作，搭建网页端翻译应用的用户界面。 1. 在应用 IDE，单击页面上方的**用户界面**页签。 2. 选择**桌面网页**，然后单击**开始搭建**。  3. 添加页面组件，完成页面搭建。 翻译页面由3个块级组成，具体使用的组件和配置请参考下表。  ### 1 搭建页面结构 整体上 AI 翻译应用的用户界面由上下两个部分组成。 * 上面是标题区域。 * 下面是功能区域。功能区域又分为左右两个区域。 想要实现这样的页面结构就需要使用容器组件。容器组件是用来进行页面布局的，可以把页面划分成不同的区域和排列顺序。容器组件中可以添加其他各种组件例如文本组件、按钮组件等。 参考以下操作，完成页面布局： 1. 确认画布的**排列方向**为**纵向**。  2. 在**组件**面板中，找到**布局组件 > 容器**组件，然后将容器组件拖入到中间的画布中。 3. 在画布中，选中拖入的**容器**组件。组件名称为Div1。  4. 参考以下配置，修改容器组件Div1的属性。 | **Div1的属性设置** | **示例** | | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | 设置尺寸和布局。* 将**宽度**设置为**填充容器**（即100%）。* 将**高度**设置为60 px。* 将**排列方向**设置为**横向**。 |  | | 设置样式。* 找到**填充**属性，然后单击删除图标去掉背景色。* 将边框设置为灰色。 |  | 5. 再拖入一个**容器**组件用来组织功能区，并在画布中选中该组件。组件名称为Div2。然后选中该组件，参考下表中的属性配置进行修改。  | **Div2的属性设置** | **示例** | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | * 设置尺寸，将**宽度**和**高度**都设置为**填充容器**（即100%）。* 排列方向设置为**横向**。* 设置样式。找到**填充**属性，然后单击删除图标去掉背景色。 |  | 6. 向画布的容器组件Div2的左侧区域中，拖入一个容器组件Div3，用来组织左侧的内容翻译区域。然后选中该组件，参考下表中的属性配置进行修改。  | **Div3的属性设置** | **示例** | | -------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | * 将**宽度**设置为50%。* 将**高度**设置为固定值550px。* 删除背景色。 |  | 7. 向画布中容器组件Div2的**右侧**区域中，拖入一个容器组件Div4，用来组织右侧的翻译结果区域。然后选中该组件，参考下表中的属性配置进行修改。  | **Div4的属性设置** | **示例** | | -------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | * 将**宽度**设置为50%。* 将**高度**设置为固定值550px。* 删除背景色。 |  | 至此，我们就完成了这个翻译应用的页面结构搭建。  ### 2 搭建页面标题 参考以下操作，搭建页面的标题区域。 1. 在**组件**面板中，找到**推荐组件 > 文本**组件，然后将文本组件拖入到顶部的容器组件Div1上。  2. 在画布中，选中拖入的**文本**组件，然后在右侧的**属性**面板中设置文本内容，字号大小等。  至此，你已经完成了标题区域的搭建。  ### 3 搭建左侧翻译内容区 参考以下操作，搭建翻译内容区域。 1. 在**组件**面板中，将表单组件拖入到画布的容器组件Div3中，然后选中不需要的组件并按下 Backspace* *键进行删除，只保留文本组件、选择组件和按钮组件。  2. 选中表单组件，参考下表修改它的属性 | **Form表单组件的属性设置** | **示例** | | ---------------------------------------------------- | ------------------------------------------------------------------------------ | | * 将**宽度**和**高度**都设置为填充容器。* 删除边框。 |  | 3. 选中表单内的文本输入框，然后将其拉伸它的大小，再修改属性配置。 * **标签内容**和**占位文案**都修改为：请输入翻译内容。 * **宽度**设置百分比 100%。  4. 选中表单组件中的**选择**组件，然后修改它的属性配置。 * 标签内容修改为：目标语言。 * 选项设置：保留两个选项，分别为英语和日语。确保名称和选项值正确。  5. 选中表单组件中的**按钮**组件，将**内容**修改为**开始翻译**。  至此，我们就完成了左侧的翻译内容区域的页面功能搭建。  ### 4 搭建右侧翻译结果区 参考以下操作，搭建翻译结果区域。 1. 在**组件**面板中，将 Markdown 组件拖入到画布的容器组件Div4中。  2. 选中新拖入的组件，配置以下属性。 * **内容**：删除已有内容，输入 Markdown 格式内容：###### 翻译结果。 * **高度和宽度**：设置为**填充容器**。 * **圆角**：设置为**10。** * **内边距**：设置为**20。** * **外边距**：设置为**0**。 * **边框**：设置为**灰色。**  至此，我们就完成了翻译应用的用户界面搭建，可单击**属性**面板上方的**预览**选项进行页面预览。  ### 5、添加事件 搭建好页面后，就可以通过配置事件和添加数据实现业务逻辑与用户页面的联动了。 本场景中，预期是希望用户点击开始翻译时，触发翻译工作流，并且将用户输入的译文和目标语言作为输入传入给工作流。所以，需要为**开始翻译**按钮组件添加一个点击事件。 1. 在**用户页面**页签下，单击已添加的**开始翻译**按钮组件，然后在配置面板中选择**事件**，最后单击**新建。**  2. 事件类型选择**点击时**。 3. 执行动作选择**调用工作流**，然后选择已经创建的工作流。选择工作流后，会自动展示所选工作流配置的输入参数。 4. 将鼠标悬浮至content参数的文本框上，然后单击右侧的配置图标。  5. 在展开的配置面板中，找到用户输入翻译内容的组件 (Textarea)，选择表单值作为工作流中content参数的值。配置完成后关闭参数配置面板。  6. 重复上述操作，将目标语言组件的值作为工作流lang参数的值。  单击**确认**完成工作流的调用。 7. 配置翻译结果数据。 最后需要将工作流返回的翻译内容展示在用户页面中。 1. 在画布中，选中最后添加的Markdown组件。 2. 在右侧的**属性**面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。  3. 在展开的面板中，首先在翻译结果下增加一行，然后选择工作流的返回数据作为翻译结果展示给用户。配置完成后，关闭配置面板。  ## 步骤五：效果测试 完成上述所有配置后，单击**预览**对查看整体功能并进行体验。  你可以在打开的预览页面中，输入一段文字，然后选择一个翻译语言，单击开**始翻译**。查看是否在翻译结果区域有出现翻译后的内容。  ## 步骤六：发布应用 完成应用测试后，你就可以将应用发布到商店或模板，或发布成 API 服务与其他应用集成。 本教程中以商店为例。 1. 在应用 IDE 中，单击右上角的**发布**按钮。 2. 在**发布**页面，输入版本号和发布描述。 3. 选择扣子商店，然后选择应用分类。  4. 单击页面上的**发布**按钮，完成应用发布。 发布完成后，你就可以在扣子商店上使用这个应用了。