【Coze 平台全流程开发指南】从 0 到 1 构建智能翻译助手应用：多语言实时互译 + 场景化适配的低代码实现方案

最新推荐文章于 2025-07-07 16:52:32 发布

原创最新推荐文章于 2025-07-07 16:52:32 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #智能体 #Agent #coze #coze工作流 #AI智能体

1.创建AI应用项目

AI应用项目提供了灵活的业务逻辑编排能力，支持通过工作流实现复杂流程设计。同时系统还集成了数据库、知识库和插件等多种资源，方便开发者实现本地数据与线上服务的无缝对接。在界面设计方面，项目采用直观的拖拽式操作，能够轻松构建用户界面并与业务逻辑实时联动。
使用说明：

登录扣子平台
点击左侧导航栏的"工作空间"
选择"创建"按钮
点击"创建应用"选项
选择"创建空白应用"
填写应用信息：

名称：智能翻译助手
应用简介
图标(可上传或选择系统生成)

在这里插入图片描述
创建应用

2.业务逻辑编排

在业务逻辑页面，找到工作流，然后单击 + > 新建工作流
输入工作流名称和说明，然后单击确认。注意工作流名称只支持字母、数字和下划线，且必须以字母开头。
在这里插入图片描述
在工作流画布，单击开始节点的连接线或画布下方的添加节点按钮，然后选择大模型节点，并完成连线。

单击开始节点进行配置。开始节点用于设定启动工作流需要的信息。
本场景中，用户需要提供要翻译的内容和目标语言，所以需要配置两个对应的输入参数。
在输入区域，单击 + 图标，配置第一个变量 (content) 用于传入用户要翻译的内容。
再次单击 + 图标。输入第二个变量 (lang) 用来指定目标语言。
在这里插入图片描述

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

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

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

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

在用户提示词区域，输入用户提示词。
用户提示词通常是直接的命令，告诉模型要执行的任务或意图。例如“帮我翻译下这段内容”，指令越清晰，模型的输出也更贴近你的实际需求。因为不同用户提供的翻译内容，选择的目标语言都不同，所以需要将译文内容和目标语言使用输入变量来指代，这样就可以在运行时替换成真实的用户需求。

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

在输出区域，将输出格式配置为文本，使用默认配置的output变量。
在这里插入图片描述
连接大模型节点与结束节点，然后选择结束节点进行配置。
单击结束节点，然后选择返回文本。选择大模型节点的输出结果output作为输出参数。
在回答内容文本框中输入{{output}}，使用大模型的翻译内容作为最终的回复。
开启流式输出，实现打字机一样的输出效果。
在这里插入图片描述
至此，已经完成整个工作流的搭建。
为了保证业务逻辑实现符合预期，单击试运行测试工作流的执行。

3.用户界面搭建

扣子提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需写一行代码。
参考以下操作，搭建网页端翻译应用的用户界面。
在应用 IDE，单击页面上方的用户界面页签。选择桌面网页，然后单击开始搭建。
在这里插入图片描述
整体上 AI 翻译应用的用户界面由上下两个部分组成。
上面是标题区域。
下面是功能区域。功能区域又分为左右两个区域。
想要实现这样的页面结构就需要使用容器组件。容器组件是用来进行页面布局的，可以把页面划分成不同的区域和排列顺序。容器组件中可以添加其他各种组件例如文本组件、下拉组件、按钮组件等。
最终搭建UI效果如下图
在这里插入图片描述

每个组件的属性具体如下：
Div1
在这里插入图片描述
Div2

Div3

Form1

Textarea1

Select1

Button1

Markdown1

4.添加按钮事件

搭建好页面后，就可以通过配置事件和添加数据实现业务逻辑与用户页面的联动了。
本场景中，预期是希望用户点击开始翻译时，触发翻译工作流，并且将用户输入的内容和目标语言作为输入传入给工作流。所以，需要为开始翻译按钮组件添加一个点击事件。
在用户页面页签下，单击已添加的开始翻译按钮组件，然后在配置面板中选择事件，最后单击新建。
在这里插入图片描述
选择translate_flow工作流，并进行入参配置是对应Textarea1和Select1的value值，然后确定即可
最后配置翻译结果
最后需要将工作流返回的翻译内容展示在用户页面中。
在画布中，选中最后添加的Markdown组件。
在右侧的属性面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。
在这里插入图片描述