Coze教程：开发一个 AI 翻译应用：从设计到发布全流程详解

你可能会觉得开发一个AI翻译应用需要编程基础，但在扣子平台上，即使是零代码经验的小白，也能轻松完成一个功能完善的翻译应用。今天我就来带大家从零开始，手把手搭建一个网页端的AI翻译应用，支持多语言翻译，简单又高效！

这个AI翻译应用的核心功能是：用户可以输入需要翻译的文本，选择目标语言，然后点击翻译按钮，就能获得翻译结果。整个功能基于大模型实现，翻译质量和效率都很高。

ai_tutorial_coze_advanced_AI_translation_application_1

在正式开始搭建之前，我们先来规划一下这个应用的功能和界面布局：

核心功能：文本翻译，支持用户选择目标语言。
界面布局：
- 一个输入框，用于输入待翻译内容；
- 一个下拉列表，用于选择目标语言；
- 一个翻译按钮，用于触发翻译操作；
- 一个显示区域，用于展示翻译结果。

设计完成后，我们就可以开始动手搭建了！

接下来，我们需要通过扣子的工作流功能实现翻译功能：

创建工作流：
- 在“业务逻辑”页面，点击“+ > 新建工作流”，输入工作流名称（如translate_workflow），点击确认。
- 在工作流画布中，点击“开始节点”的连接线，添加一个“大模型节点”，并完成连线。
配置开始节点：
- 配置两个输入参数：
  - content：用户输入的待翻译内容；
  - lang：用户选择的目标语言。

配置大模型节点：

在“系统提示词”中输入以下内容：

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

扣子平台的可视化界面搭建工具让你无需写代码即可完成页面设计：

页面结构：
- 在“用户界面”页签，选择“桌面网页”，开始搭建。
- 使用容器组件划分页面布局：
  - 顶部区域用于显示标题；
  - 左侧区域用于输入翻译内容和选择目标语言；
  - 右侧区域用于显示翻译结果。
标题区域：
- 拖入一个文本组件，设置标题内容为“AI翻译应用”，调整字体大小和样式。
左侧翻译内容区：
- 拖入一个表单组件，保留文本输入框、下拉选择框和按钮组件：
  - 文本输入框：占位文案为“请输入翻译内容”；
  - 下拉选择框：选项为“英语”和“日语”；
  - 按钮：内容为“开始翻译”。
右侧翻译结果区：
- 拖入一个Markdown组件，设置默认内容为“###### 翻译结果”。
添加事件：
- 为“开始翻译”按钮添加点击事件，调用工作流，将用户输入的内容和目标语言作为参数传入工作流。
- 配置Markdown组件，显示工作流返回的翻译结果。