《人工智能導論》實驗三 有聲單詞卡智能體搭建

實驗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