AI 翻译应用实战

随着大模型在翻译质量与上下文理解上的进步，越来越多团队选择在 Coze 上搭建专属翻译工具。本教程演示如何完成一个网页端的 AI 翻译应用，包括需求规划、工作流编排、界面搭建、调试与发布。

---

应用概述

• 支持输入任意文本并选择目标语言。
• 点击「开始翻译」后调用大模型生成译文。
• 前端页面采用左右双栏布局，左侧输入原文，右侧展示结果。

---

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

在动手前先梳理业务目标与界面元素：

• 核心能力：调用大模型完成翻译；根据用户选择动态控制目标语言。
• 界面组件：
  • 原文输入区域（支持多行文本）。
  • 目标语言下拉框（如英文、日文、韩文等）。
  • 触发翻译的按钮。
  • 显示翻译结果的文本区域。

明确功能后即可开始创建应用项目。

---

步骤二：创建 AI 应用项目

1. 登录 扣子开发平台 并切换到目标工作空间。
2. 进入左侧 项目开发，点击右上角 + 项目。
3. 在「创建应用」区域选择 低代码搭建 → 空白应用。
4. 填写应用名称，使用 AI 生成图标后点击 确定，自动进入应用 IDE。

---

步骤三：编排业务逻辑

AI 翻译功能通过单条工作流完成，主要配置开始节点、大模型节点与结束节点。

1. 新建工作流

在 业务逻辑 页面选择 工作流 → + → 新建工作流，输入名称与描述后确认。

2. 配置开始节点

• 添加两个输入变量：
  • content：传入待翻译文本。
  • lang：传入目标语言标识。

3. 配置大模型节点

1. 选择模型：推荐使用「豆包 工具调用」模型（可按需调整参数）。
2. 在输入参数中引用 content 与 lang 两个变量。
3. 编写提示词：

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

## 技能
1. 用户提供文本时，迅速翻译成目标语言。
2. 确保译文准确、流畅。

## 限制
- 只处理翻译请求。
- 必须按照用户指定的目标语言输出。

用户提示词示例：

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

4. 输出保持默认的 output 文本变量。

4. 配置结束节点

• 类型选择「返回文本」。
• 输出内容设置为 ，并启用流式输出提升体验。

5. 试运行校验

在画布右上角点击 试运行，输入示例文本与语言（如「你好」→ English），确认节点执行无误再继续下一步。

---

步骤四：搭建用户界面

界面在 用户界面 页面完成，可按以下流程操作：

1. 搭建页面结构：在页面上放置两列布局容器，左侧用于输入，右侧用于结果。
2. 页面标题：添加标题组件（如「AI 翻译助手」）及辅助文案。
3. 左侧翻译内容区：
   • 放置多行文本框并命名为 input_text，绑定变量以便后续写入工作流。
   • 配置目标语言选择器（下拉框），选项值与工作流中的 lang 对应。
   • 添加「开始翻译」按钮。
4. 右侧翻译结果区：使用文本组件展示工作流输出结果，绑定至 output 变量。
5. 添加事件：在按钮的 点击 事件中绑定「调用工作流」动作，传入 content=input_text 与 lang=selected_language，完成后将响应写入结果组件。

---

步骤五：效果测试

1. 在 IDE 右上角点击 预览。
2. 输入原文，选择目标语言，点击「开始翻译」。
3. 确认右侧结果区域实时显示译文；如有问题返回 IDE 调整提示词或变量绑定。

---

步骤六：发布应用

1. 在应用 IDE 中点击 发布。
2. 填写版本号与更新说明，选择发布渠道（例如扣子商店）。
3. 选择合适的分类并点击 发布，即可在商店或模板页访问该应用。

---

相关资料

• 编排业务逻辑
• 用户界面编辑器概述
• 工作流介绍
• 了解项目发布

---