最近 Coze 发布了新的功能，除了可以创建智能体，还可以实现 GUI 交互模式的 AI 应用，下面跟着我的教程一起来实现一个在线 AI 翻译平台，后续我会基于这个 AI 应用继续扩展更多的功能。
AI 应用实战｜手把手教你用扣子（Coze）实现在一个在线 AI 翻译应用
目录
AI 应用实战｜手把手教你用扣子（Coze）实现在一个在线 AI 翻译应用
创建 AI 应用
登录扣子平台，选择项目开发，点击创建按钮并选择“创建应用”。
和创建智能体一样，填写名称与介绍。
增加业务逻辑
业务逻辑是指需要实现业务功能的工作流，比如我准备实现翻译功能，就是接收用户输入，判断输入是中文还是英文，如果是英文就翻译成中文，反之翻译成英文，最后把结果返回给用户。
扣子支持选择新建工作流，也可以选择引入在智能体中使用过的工作流。
我这里直接使用原来已经创建好的工作流，工作流可参考 揭秘大模型驱动的三重角色的万字长文翻译智能体的实现逻辑
与智能体使用的工作流区别是，AI 应用使用的工作流只能使用自定义的参数，不能使用 BOT_USER_INPUT 参数，所以我把原来的工作流复制了一份，并增加了一个 long_text 参数来接入用户输入需要翻译的文本。
搭建用户界面
1、搭建页面结构
增加第一个容器 Div1：尺寸设定宽度百分比是 100%，高度固定为 60px。布局的排列方向设置横向。样式在背景色点“-”号去掉，边框设置为灰色。
增加第二个容器 Div2：尺寸设定宽度百分比是 100%，高度填充容器。布局的排列方向设置横向。样式在背景色点“-”号去掉。
向画布 Div2 左侧增加第三个容器 Div3：尺寸设定宽度百分比是 50%，高度固定为 600px。样式在背景色点“-”号去掉。
向画布 Div2 右侧增加第四个容器 Div4：尺寸设定宽度百分比是 50%，高度固定为 600px。样式在背景色点“-”号去掉。到目前为止 4 个图层就完成了，形成一个树形结构。
2、搭建页面标题
在组件面板中，找到推荐组件 > 文本组件，然后将文本组件拖入到顶部的容器组件 Div1 上，并在右侧的属性面板中设置文本内容，字号大小等。
如果希望标题在 Div1 的中间位置，可以先点击画布 Div1，然后调整布垂直对齐和水平对齐都是居中。
3、搭建左侧的翻译内容区
在组件面板中，将表单组件拖入到画布的容器组件 Div3 中，然后把不需要的组件按 Delete 键进行删除，只保留文本组件和按钮组件。
选中表单，将宽度和高度都设置为填充容器并删除边框。
选中表单内的文本输入框，然后将其拉伸它的大小，再修改尺寸，宽度设置填充容器。 标签内容和占位文案可修改为：请输入翻译的中文或英文。
选中表单组件中的按钮组件，将内容修改为翻译。
4、搭建右侧的翻译结果区
在组件面板中，将 MarkDown 组件拖入到画布的容器 Div4 中，删除已有内容。
然后调整 MarkDown 组件属性，比如高度设置为 100%和宽度设置为填充容器，还有样式可以调整为更好看一点：圆角：设置为 10；内边距：设置为 20；边框：设置为灰色。
现在我们的页面就搭建完成，展示如图所示
5、添加事件
搭建好页面后，下一步就是实现用户点击开始翻译时，触发翻译工作流，并且将用户输入的文本传给工作流。所以，需要为翻译按钮组件添加一个点击事件，当点击时调用 Workflow，选择我们前面实现的中英翻译工作流。
在入参配置中，点击展开配置面板，找到用户输入翻译内容的组件 （Textarea），选择表单值作为工作流中 long_text 参数的值，配置完成后关闭参数配置面板。
在画布中选中 Markdown 组件，点击内容中展开打开配置面板，选择工作流的返回数据作为翻译结果展示给用户。配置完成后，关闭配置面板。
测试效果
点击预览，就可以跳转到新页面展示出最终的 AI 应用效果，就可以验证页面效果。
经测试发现“翻译”后并不确定有没有事件执行，所以我这里加个提示，回到用户界面编辑台，点击“翻译”按钮，增加一个点击时事件，点击时展示提示信息，比如写上“翻译中，请稍等......”.
最终效果如下图所示
发布应用
点击应用编辑页右上角的发布按钮，在发布页面，输入版本号和发布描述，一般选择发布到扣子商店。
发布上架后就可以直接使用了。
往期精彩
AI 智能体实战｜优化迭代小学生古诗陪读智能体，提升使用体感
AI智能体实战｜实现一个自动生成小学生古诗词精读讲稿及插画的智能体
扫一扫
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
