快速搭建一个低代码应用

随着人工智能技术的不断进步，大模型在翻译质量、效率、上下文理解和多语言支持等方面表现出色。因此，越来越多的人开始使用大模型进行文本翻译，以提升效率，降低成本。

本教程详细指导你如何在 AI 编程中完成一个网页端 AI 翻译应用的开发。

AI 翻译应用介绍

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

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

首先，你需要进行应用设计，规划应用的主体功能和用户界面。

这个 AI 翻译应用的核心功能是能够满足用户的文本翻译需求，并支持用户选择指定翻译的语言。翻译功能可以通过创建一个包含大模型节点的工作流来实现。

基于以上功能规划，这个应用的用户界面会包含以下组件：

• 一个让用户可以输入翻译内容的区域

• 一个让用户选择翻译语言的列表

• 一个翻译按钮来触发翻译操作

• 一个展示翻译结果的内容区域

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

步骤二：创建低代码应用项目

首先，你需要创建一个低代码应用项目。

低代码应用项目支持使用工作流来完成复杂的业务逻辑编排，也支持使用数据库、知识库、插件等资源实现与本地数据或线上数据的交互。此外，低代码应用项目支持通过拖拉拽的方式搭建用户界面，并且能够实现与业务逻辑的联动。

参考以下操作，创建低代码应用项目。

1. 登录 AI 编程并切换到目标工作空间。
2. 在左侧导航栏中单击新建项目。
3. 在低代码模式区域单击低代码应用。
4. 填写应用名称和描述，按需设置图标，然后单击确认。

• 应用创建成功后，你会直接进入到应用的集成开发环境 (IDE)。

步骤三：编排业务逻辑

创建完低代码应用项目后，你可以开始进行业务逻辑编排了。AI 编程提供了大模型、代码、意图识别、知识库写入与检索等丰富的工作流节点，以满足复杂的业务场景需求。此外，你还可以通过使用变量、插件、知识库等方式与你的本地数据和线上数据进行集成。

本教程中的 AI 翻译应用，主要是使用大模型实现多语言翻译，所以只需要创建一个包含大模型节点的工作流即可。

参考以下步骤，创建一个实现翻译功能的工作流。

在业务逻辑页面，找到工作流，然后单击 + > 新建工作流。

输入工作流名称和描述，然后单击确认。

• 说明

  工作流名称只支持字母、数字和下划线，且必须以字母开头。

在工作流画布，单击开始节点的连接线或画布下方的添加节点按钮，然后选择大模型节点，并完成连线。

单击开始节点进行配置。开始节点用于设定启动工作流需要的信息。

• 本场景中，用户需要提供要翻译的内容和目标语言，所以需要配置两个对应的输入参数。

在输入区域，单击 + 图标，配置第一个变量 (content) 用于传入用户要翻译的内容。

再次单击 + 图标。输入第二个变量 (lang) 用来指定目标语言。

单击大模型节点进行配置。

在模型区域，展开模型列表，选择用来执行翻译任务的大模型。本教程中选择豆包 工具调用 模型，并使用模型默认配置。

• 如果你想调整模型配置，单击配置图标。

配置输入参数，这些输入参数可以在模型提示词中使用。

• 本教程中需要将用户输入的译文内容和目标语言添加到提示词中，让模型按照用户选择的语言进行翻译。所以需要配置两个输入参数。

单击输入区域的**+**图标，然后点击对应的设置图标，选择开始节点中配置的变量。

重复上述操作，再添加目标语言的这个变量。

• 删除不需要的输入信息，确保输入中只包含下图中的这两个参数。

在系统提示词区域，输入以下内容作为系统提示词。

系统提示词用于规定模型角色、任务和边界，可使用以下示例：

# 角色
你是一个专业翻译，负责将用户输入准确翻译为指定目标语言。

## 要求
1. 保持原意，确保译文准确、流畅。
2. 只输出译文，不随意扩写。
3. 严格使用用户指定的目标语言。

## 限制
只处理翻译任务，不回答无关问题。

在用户提示词区域，输入用户提示词。

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

先输入“将以下内容翻译成指定目标语言”，再插入 content 和 lang 两个变量。

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

在“内容”文字后输入{，然后选择指代翻译内容的变量。

• 说明

  如果你没有可用的变量，请检查是否按照教程配置了模型节点的输入变量。

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

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

连接大模型节点与结束节点，然后选择结束节点进行配置。

单击结束节点，然后选择返回文本。

选择大模型节点的输出结果作为输出参数。

在回答内容文本框中输入{{output}}，使用大模型的翻译内容作为最终的回复。

开启流式输出，实现打字机一样的输出效果。

• 至此，你已经完成整个工作流的搭建。

为了保证业务逻辑实现符合预期，单击试运行测试工作流的执行。

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

查看运行结果是否符合预期。

• 如果不符合预期，你可以逐一检查每个节点的输出结果。

在完成业务逻辑搭建并通过测试后，你就可以开始用户界面搭建了。

步骤四：搭建用户界面

AI 编程提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需写一行代码。

参考以下操作，搭建网页端翻译应用的用户界面。

在应用 IDE，单击页面上方的用户界面页签。

选择桌面网页，然后单击开始搭建。

添加页面组件，完成页面搭建。

• 翻译页面由3个块级组成，具体使用的组件和配置请参考下述步骤。

1 搭建页面结构

整体上 AI 翻译应用的用户界面由上下两个部分组成。

• 上面是标题区域。

• 下面是功能区域。功能区域又分为左右两个区域。

想要实现这样的页面结构就需要使用容器组件。容器组件是用来进行页面布局的，可以把页面划分成不同的区域和排列顺序。容器组件中可以添加其他各种组件例如文本组件、按钮组件等。

参考以下操作，完成页面布局：

确认画布的排列方向为纵向。

在组件面板中，找到布局组件 > 容器组件，然后将容器组件拖入到中间的画布中。

在画布中，选中拖入的容器组件。组件名称为Div1。

参考以下配置，修改容器组件Div1的属性。

属性	设置值
宽度	填充容器（100%）
高度	60 px
排列方向	横向
填充	删除默认背景色
边框	灰色

再拖入一个容器组件用来组织功能区，并在画布中选中该组件。组件名称为Div2。将宽度和高度设置为填充容器，排列方向设置为横向，并删除默认背景色。

向Div2左侧拖入容器Div3，用来组织输入区域。将宽度设置为 50%、高度设置为 550 px，并删除默认背景色。

向Div2右侧拖入容器Div4，用来组织翻译结果。将宽度设置为 50%、高度设置为 550 px，并删除默认背景色。

至此，我们就完成了这个翻译应用的页面结构搭建。

2 搭建页面标题

参考以下操作，搭建页面的标题区域。

在组件面板中，找到推荐组件 > 文本组件，然后将文本组件拖入到顶部的容器组件Div1上。

在画布中，选中拖入的文本组件，然后在右侧的属性面板中设置文本内容，字号大小等。

至此，你已经完成了标题区域的搭建。

3 搭建左侧翻译内容区

参考以下操作，搭建翻译内容区域。

在组件面板中，将表单组件拖入到画布的容器组件Div3中，然后选中不需要的组件并按下 Backspace 键进行删除，只保留文本组件、选择组件和按钮组件。

选中表单组件，将宽度和高度设置为填充容器，并删除默认边框。

选中表单内的文本输入框，然后将其拉伸它的大小，再修改属性配置。

• 标签内容和占位文案都修改为：请输入翻译内容。

• 宽度设置百分比 100%。

选中表单组件中的选择组件，然后修改它的属性配置。

• 标签内容修改为：目标语言。

• 选项设置：保留两个选项，分别为英语和日语。确保名称和选项值正确。

选中表单组件中的按钮组件，将内容修改为开始翻译。

至此，我们就完成了左侧的翻译内容区域的页面功能搭建。

4 搭建右侧翻译结果区

参考以下操作，搭建翻译结果区域。

在组件面板中，将 Markdown 组件拖入到画布的容器组件Div4中。

选中新拖入的组件，配置以下属性。

• 内容：删除已有内容，输入 Markdown 格式内容：\###### 翻译结果。

• 高度和宽度：设置为填充容器。

• 圆角：设置为10。

• 内边距：设置为20。

• 外边距：设置为0。

• 边框：设置为灰色。

至此，我们就完成了翻译应用的用户界面搭建，可单击属性面板上方的预览选项进行页面预览。

5 添加事件

搭建好页面后，就可以通过配置事件和添加数据实现业务逻辑与用户页面的联动了。

本场景中，预期是希望用户点击开始翻译时，触发翻译工作流，并且将用户输入的译文和目标语言作为输入传入给工作流。所以，需要为开始翻译按钮组件添加一个点击事件。

在用户页面页签下，单击已添加的开始翻译按钮组件，然后在配置面板中选择事件，最后单击新建。

事件类型选择点击时。

执行动作选择调用工作流，然后选择已经创建的工作流。选择工作流后，会自动展示所选工作流配置的输入参数。

将鼠标悬浮至content参数的文本框上，然后单击右侧的配置图标。

在展开的配置面板中，找到用户输入翻译内容的组件 (Textarea)，选择表单值作为工作流中content参数的值。配置完成后关闭参数配置面板。

重复上述操作，将目标语言组件的值作为工作流lang参数的值。

单击确认完成工作流的调用。

配置翻译结果数据。

• 最后需要将工作流返回的翻译内容展示在用户页面中。

在画布中，选中最后添加的Markdown组件。

在右侧的属性面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。

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

步骤五：效果测试

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

你可以在打开的预览页面中，输入一段文字，然后选择一个翻译语言，单击开始翻译。查看是否在翻译结果区域有出现翻译后的内容。

测试时应同时确认：输入参数已传给工作流、工作流运行成功、结束节点返回了预期字段、页面结果组件正确读取返回值。

步骤六：发布应用

完成测试后，可以将应用发布为企业项目或模板；页面列出的其他渠道是否可用取决于应用类型和平台授权。

1. 在应用编辑器右上角单击发布，再单击去发布。
2. 填写发布版本和发布描述。
3. 按需上传最多三张展示截图。
4. 选择企业项目或模板商店等可用渠道，并设置分类。
5. 检查配置后单击右上角发布。

相关文档

• 编排业务逻辑

• 用户界面编辑器概述

• 低代码工作流介绍

• 了解项目发布