《人工智能导论》实验三 有声单词卡智能体搭建

实验3有声单词卡智能体搭建一、实验目的及要求掌握扣子平台"低代码搭建"应用的创建入口，理解低代码应用与普通智能体的区别。学会创建并配置两个核心工作流（GetRandomWord和GenPictureAudio），掌握工作流中大模型节点、图像生成节点、语音合成节点的串联方法。掌握扣子低代码应用页面组件的配置方式，包括下拉选择、纵向列表、按钮、文本、图片、音频等组件的数据绑定与事件设置。理解页面间跳转逻辑的配置方法，能够为"生成"按钮同时绑定"调用工作流"和"页面跳转"两个点击事件。完成有声单词卡应用的整体预览测试，验证年级切换、单词生成、图片展示、音频播放等全部核心功能。二、实验学时2学时（建议时间分配：讲解10分钟，任务实践80分钟，总结报告10分钟）三、实验前准备账号环境：登录扣子国内版（），确保账号正常使用。知识储备：已学习教材第3章"低代码开发智能体"相关内容，了解工作流基本概念；完成实验一、实验二后，对扣子平台基本操作已熟悉。网络环境稳定，本实验涉及图像生成、语音合成功能，需要稳定的网络连接。四、实验任务任务1分析与设计（10分钟）（1）功能需求分析1）生成单词图片：根据单词含义生成卡通风格的具象图片（如“elephant”对应大象的卡通插画），画面简洁、色彩鲜明，符合小学生审美，帮助通过视觉联想记忆词义。2）生成适配例句：结合单词难度生成3条例句，句式简单，包含中文翻译，且场景贴近小学生生活，帮助理解单词用法。3）生成多场景音频：包含3部分内容--单词标准发音、中文释义朗读、例句双语朗读，通过听觉刺激加深记忆，同时支持反复播放。4）年级适配：能根据选择的年级（1-6年级）自动筛选难度匹配的单词，避免超纲内容打击学习信心。（2）应用结构设计两个工作流：·GetRandomWord：根据年级随机获取5个单词及释义（大模型节点输出JSON数组）；·GenPictureAudio：根据单词生成解释、例句、配图提示词、图片URL、音频URL（大模型+图像生成+语音合成）。两个页面：·首页：年级选择下拉框+随机单词列表+"换一批"按钮+手动输入单词区；·详情页：单词解释区+图片区+音频播放区+例句区。任务2创建低代码应用（5分钟）（1）在扣子主页点击左上角"创建"按钮，在弹出面板中单击"创建应用"下的"低代码搭建"按钮；（2）在应用模板中选择"创建空白应用"；（3）填写基础信息：·工作空间：选择"个人空间"·应用名称：有声单词卡·应用介绍：英语学习的好帮手，选择一个单词或输入一个单词，就能生成有声单词卡，帮助用户更好地学习英语单词。（4）点击由AI生成图标按钮，完成应用创建。任务3创建工作流1：GetRandomWord（根据年级随机获取单词）（15分钟）【步骤1】新建工作流在扣子应用IDE的"业务逻辑"模块中，点击工作流右侧"+"按钮→"新建工作流"，填写以下信息后点击"确定"：·工作流名称：GetRandomWord·工作流描述：根据年级随机获取单词【步骤2】添加"大模型"节点在"开始"节点后添加"大模型"节点，按以下参数配置后将其连接到"结束"节点：·模型：豆包·1.5·Pro·32K·输入变量：将"input"的值设置为"开始"节点的"input"变量·输出变量：将"output"的变量类型改为Array<Object>·系统提示词：填写如下内容#角色你是一位经验丰富的小学英语老师，对各年级英语词汇要求了如指掌。#目标1.根据学生的年级（一年级到六年级），随机生成5个该年级适用的单词供学生学习。2.针对生成的每个单词，给出准确且简单易懂的中文解释。#技能当接收到用户输入的年级信息后，在对应年级的词汇范围内进行随机选取。#限制-仅围绕小学各年级英语单词生成任务进行回复，拒绝回答与该任务无关的话题；-输出必须严格按照给定的JSON格式数组进行组织，不能偏离框架要求。#输出使用JSON格式数组，示例如下：[{"word":"cat","explain":"小猫"},{"word":"dog","explain":"小狗"}]·用户提示词：年级：{{input}}【步骤3】设置"结束"节点输出变量将"结束"节点的输出变量"output"的值设置为"大模型"节点的输出变量"output"。任务4创建工作流2：GenPictureAudio（根据单词生成单词卡）（20分钟）【步骤1】新建工作流在"业务逻辑"模块中新建工作流，填写以下信息：·工作流名称：GenPictureAudio·工作流描述：生成单词解释、例句、图片和音频【步骤2】添加"大模型"节点在"开始"节点后添加"大模型"节点，配置如下：·模型：豆包·1.5·Pro·32K·输入：将"input"的值设置为"开始"节点的"input"变量·输出：将"output"类型改为Object，并添加以下子项字段：explain（字符串）、picPrompt（字符串）、example（数组）·系统提示词：填写如下内容#角色你是一位专业的语言与多媒体创作助手，能够精准地根据用户提供的单词进行丰富的内容创作。#技能##技能1：单词解释与例句生成1.当用户提供一个单词时，给出该单词准确的中文解释；2.基于小学生词汇量，生成3个例句，句式简单易懂，包含中文翻译，场景贴近小学生生活。##技能2：生成图片的提示词结合生成的例句，提炼关键信息，生成该单词对应图片的提示词，描述需具体且有画面感。#限制-只围绕用户提供的单词进行相关内容生成，拒绝回答与单词处理无关的话题；-所输出的内容必须按照给定的JSON格式进行组织，不能偏离框架要求。#输出严格使用JSON格式输出，示例如下：{"output":{"explain":"单词对应的中文解释","picPrompt":"生成图片的提示词内容","example":[{"english":"具体的英文例句","chinese":"对应的中文翻译"},{"english":"具体的英文例句","chinese":"对应的中文翻译"},{"english":"具体的英文例句","chinese":"对应的中文翻译"}]}}·用户提示词：单词：{{input}}【步骤3】添加"文本处理"节点在"大模型"节点后添加"文本处理"节点，配置字符串拼接，将单词、释义和例句拼接为完整的语音合成文本：{{String1}},{{String1}},{{String1}}{{String2.explain}}{{String2.example[0].english}}{{String2.example[0].chinese}}{{String2.example[1].english}}{{String2.example[1].chinese}}{{String2.example[2].english}}{{String2.example[2].chinese}}（其中String1绑定"开始"节点的input变量，String2绑定"大模型"节点的output变量）【步骤4】添加"图像生成"节点在"大模型"节点后（与文本处理并行）添加"图像生成"节点，配置如下：·模型：通用·比例：1:1（1024×1024）·输入变量"input"：值设置为"大模型"节点的output变量·正向提示词：{{input.picPrompt}}·将"图像生成"节点连接到"结束"节点【步骤5】添加"Speech_synthesis"语音合成节点①在"文本处理"节点后添加节点，选择"插件"；②在插件商店搜索"语音合成"，找到扣子官方"语音合成"插件，添加"Speech_synthesis"工具到工作流；③将"Speech_synthesis"节点的输入变量"text"值设置为"文本处理"节点的output变量；④将"Speech_synthesis"节点连接到"结束"节点。【步骤6】配置"结束"节点输出变量在"结束"节点中设置以下输出变量（引用各节点对应输出）：·word：来自"开始"节点input·output：来自"大模型"节点output（含explain、example、picPrompt）·picUrl：来自"图像生成"节点的图片URL输出·audioUrl：来自"Speech_synthesis"节点的音频URL输出任务5创建页面1：首页（15分钟）（1）切换到扣子应用IDE的"用户界面"模块，选择"小程序和H5"，点击"开始搭建"。（2）点击默认生成的"首页"，设置页面属性：·页面标题：有声单词卡·导航栏：关闭（3）添加随机获取单词区：①拖拽"下拉选择"组件到首页，配置如下：·标签内容：年级|选项内容：固定内容·选项设置（见下表）|默认值：一年级|宽度：100%|高度：适应内容序号选项名称选项值1一年级一年级2二年级二年级3三年级三年级4四年级四年级5五年级五年级6六年级六年级·为"下拉选择"组件添加"数据改变时"事件：调用GetRandomWord工作流，入参input的值为{{Picker1.value}}②拖拽"纵向列表"组件到下拉选择下方，配置：·数据绑定：{{GetRandomWord.data.output}}|宽度：100%|高度：适应内容|内边距：12·删除列表中的图片组件·列表"标题一"内容：{{item.word}}，预设样式：标题五·列表"正文"内容：{{item.explain}}，预设样式：正文一·拖入"按钮"组件：样式：主要，内容：生成，宽度：25%，高度：40px·为"生成"按钮添加"点击时"事件：调用GenPictureAudio，入参input为{{item.word}}③拖拽"换一批"按钮到纵向列表下方：·样式：描边，内容：换一批，图标：Refresh·禁用表达式：{{GetRandomWord.loading}}·添加"点击时"事件：调用GetRandomWord，入参input为{{Picker1.value}}（4）添加手动输入单词区：①拖拽"单行输入"组件：标签内容：单词，占位文案：输入你想学习的单词，宽度：100%②拖拽"生成"按钮：样式：主要，内容：生成，图标：Star，宽度：50%，高度：40px·为按钮添加"点击时"事件：调用GenPictureAudio，入参input为{{Input1.value}}任务6创建页面2：详情页（10分钟）（1）在"用户界面"模块点击底部"新建页面"，将页面标题改为"详情页"，设置：·页面标题：有声单词卡|导航栏：关闭（2）添加单词解释区：·拖入"文本"组件：内容：{{GenPictureAudio.data.word}}，预设样式：标题三·再拖入"文本"组件：内容：{{GenPictureAudio.data.output.explain}}，预设样式：标题五（3）添加图片区：·拖入"图片"组件，来源：绑定数据，值为{{GenPictureAudio.data.picUrl}}·填充方式：覆盖|宽度：200px|高度：100px·显示设置表达式：{{GenPictureAudio.loading}}（4）添加音频播放区：·拖入"音频"组件，来源：绑定数据，值为{{GenPictureAudio.data.audioUrl}}·样式：大播放器|宽度：100%|高度：适应内容（5）添加例句区：·拖入"纵向列表"组件，数据绑定：{{GenPictureAudio.data.output.example}}·删除图片组件，"标题一"内容：{{item.english}}，颜色：#152140·"列表正文"内容：{{item.chinese}}，颜色：#324169（6）配置首页"生成"按钮的页面跳转事件（关键步骤）：·回到"首页"，为纵向列表中的"生成"按钮添加第二个"点击时"事件：执行动作选择"页面跳转"，跳转目标为"详情页"·同样为手动输入区的"生成"按钮添加"点击时"→"页面跳转"→"详情页"事件任务7整体预览与测试（10分钟）（1）点击应用IDE右上角"预览"按钮，进入预览页面；（2）按以下步骤逐项测试：①点击"年级"下拉框，切换年级，检查单词列表是否随之更新；②点击"换一批"按钮，检查单词列表是否刷新；③选择一个单词，点击"生成"，检查是否跳转至"详情页"；④检查详情页：单词和释义是否正确显示；⑤等待图片加载完成后检查配图是否显示；⑥点击音频播放按钮，检查音频是否正常播放；⑦检查例句列表中的英文例句和中文翻译是否正确显示；⑧在首页手动输入一个单词，点击"生成"，重复步骤③~⑦。结果记录表请将实验关键操作结果填入下表，用于撰写实验报告：验收项目完成情况（✓/✗）备注说明低代码应用成功创建工作流GetRandomWord正常输出单词数组Array<Object>格式工作流GenPictureAudio正常完成四节点串联大模型+文本处理+图像生成+语音合成首页下拉框年级切换单词列表同步更新首页"换一批"按钮功能正常首页"生成"按钮成功跳转详情页详情页单词和释义正确显示详情页图片正常加载显示详情页音频正常播放详情页例句列表正确显示（英文+中文）手动输入单词功能正常五、实验重点、难点重点：两个工作流的节点配置与数据流向（GetRandomWord的Array<Object>输出；GenPictureAudio的四节点串联）；低代码页面中数据绑定表达式的编写（{{工作流名.data.字段名}}）；"生成"按钮需同时绑定"调用工作流"和"页面跳转"两个事件。难点：工作流2中四个节点（大模型、文本处理、图像生成、语音合成）的串联，变量引用关系复杂，需逐节点核对；数据绑定表达式中变量名大小写、层级路径容易写错，导致组件内容不显示；图像生成和语音合成节点存在网络延迟，预览时需等待加载完成；首页两个"生成"按钮都需要配置两个点击事件（调用工作流+跳转页面），容易遗漏。六、操作要点选择"低代码搭建→空白应用"创建项目，确认进入扣子应用IDE而非智能体编辑页面。工作流1中大模型输出类型必须设为Array<Object