|
Coze平臺重大更新：現(xiàn)在Coze的開發(fā)者們可以在扣子平臺搭建具有復雜交互功能的 AI 應用功能了，可以告別之前只有簡單交互,，自己不能定制復雜表單的煩惱了,。 扣子的這次升級變化還是比較大的，本教程斜杠君就手把手教大家打造一個自己的AI應用：搭建一個「名畫寫真生成」應用,，功能是在應用界面中上傳一張照片,，把照片變成名畫風格。 本教程保證大家一篇就能學會,，全文將近5000字,，每步都細節(jié)都有，應該是最詳細的教程了,，大家耐心閱讀,。可以關注收藏,，以免之后找不到,，而且也不會錯過我后面的教程。全文主要分為五部分： 1,、創(chuàng)建 AI 應用項目 2,、工作流的準備 3、設計用戶界面 4,、數(shù)據(jù)綁定
5、測試應用 選擇左側(cè)項目開發(fā),，再擊創(chuàng)建按鈕,，大家可以發(fā)現(xiàn)和之前相比，會多出一個創(chuàng)建應用的選擇,，那我們就點擊這個選項開始創(chuàng)建,。這里因為我們從頭開始搭建，所以這里我們選擇「創(chuàng)建一個空白應用」,。看到這個界面的,，我們第一步就創(chuàng)建完成了,。在這部分,，我們需要準備一個工作流來完成應用的主要功能。點擊左側(cè)的「資源庫」,，再點擊右側(cè)的「+資源」按鈕下的工作流,。2、選擇模版 為了大家更容易快速的理解,，我們這里通過使用一個官方的「名畫寫真工作流模版」工作流來進行講解,。在創(chuàng)建工作流這個界面，我們選擇「模版」在搜索框搜索「名畫照相館」,，然后點擊「復制」按鈕,。這時可以發(fā)現(xiàn)，「名畫寫真工作流」就被復制到了我們的資源庫中,，之后我們就可以使用這個工作流來完成我們應用主要工作了,。 因為工作流已經(jīng)搭建好了，我們不用考慮很細節(jié)的過程,，這里我們只需要查看「開始節(jié)點」和「結束節(jié)點」就可以了,。有的同學可能會問，為什么要查看開始節(jié)點和結束節(jié)點呢,？因為只有通過「開始節(jié)點」和「結束節(jié)點」,，我們才能確認界面中輸入的參數(shù)是什么，輸出的參數(shù)是什么,，這樣我們接下來才能設計好與用戶交互的界面,。點擊「開始節(jié)點」，我們發(fā)現(xiàn)有三個輸入的參數(shù),。這里支持的名畫有：1. 維米爾《戴珍珠耳環(huán)的少女》2. 達芬奇《蒙娜麗莎的微笑》3. 拉斐爾《自畫像》4. 梵高《戴灰氈帽的自畫像》5. 達芬奇《抱貂的女子》6. 梵高《梵高耳朵纏著繃帶、拿著煙斗的自畫像》7. 哈爾斯《笑容騎士》8. 拉斐爾《戴頭紗的女子》點擊「結束節(jié)點」,，我們發(fā)現(xiàn)有一個輸出的參數(shù)，變量名為image,。通過以上信息,，我們就可以創(chuàng)建與用戶的交互界面了,，到這里工作流就準備好了，接來開始設計用戶界面,。 敲黑板：到了重點講解的環(huán)節(jié)了，這里才是扣子應用的重點玩法,，大家仔細聽講,，沒關注的同學快關注收藏，以免之后找不到噢~ 通過對上一步工作流的分析,，我們知道了需要輸入的三個參數(shù),，那這里我們就來設計一個表單，來讓用戶上傳或輸入這三個參數(shù),。首先把剛剛在上一步中創(chuàng)建的工作流引入進來,。 
點擊「復制到項目」,，把這個工作流復制到當前的項目。
項目復制中,，稍等一會兒,，不要關閉窗口，否則還要重新復制~
復制好以后,，可以發(fā)現(xiàn),，工作流被引入進來了。點擊「用戶界面」選項卡,，就可以開始設計用戶界面了。通過前面的分析,，我們需要三個輸入的組件,，分別是：用戶照片、名畫風格和用戶性別,。所以這里我們來創(chuàng)建一個表單,，并在表單中創(chuàng)建這三個選項,。選項左側(cè)的表單,，雙擊或拖拽，表單就會被加入到面板中了,，表單中默認會有為以下三個組件，文本,，數(shù)字和選擇框,。因為我們需要一個上傳照片的組件，所以我們先把上傳組件拖入進來,。因為默認的組件中,，一個是輸入數(shù)字的這個，組件不是我們需要的,，所以在這里我們把這個組件做一個隱藏,。這里吐槽一下：斜杠君在以往使用過的界面設計工具中,，設計面版中的組件都是有「刪除組件按鈕」的，我不知道扣子故意這么設計的還是什么Bug,，到目前為止,，我一直沒有找到刪除組件的功能，所以只能通過隱藏組件的方式實現(xiàn),，希望扣子官方能修復這個功能,。 到這里，三個組件就準備好了,。我們來修改一下各組件的標題和對應的值,。點選需要修改的標題，在右側(cè)這里就可以修改,。按這個方式,，大家把其它幾項也進行修改。備注：「名畫主題」的組件,，其實是可以用下拉選項的方式表現(xiàn),，效果更好。教程這里為了更容易大家理解,，就做成文本的形式了,，大家可以根據(jù)自己的需求改為下拉框的形式也沒問題。 到這里表單就設計完成了,，接來就是重要的流程了,，綁定工作流。 下面這張圖演示的設置很重要,，大家按下圖的方式進行設置。大家可以保存一下,，方便用到的時候查看,。 這里很重要：選擇工作流以后,，就可以看到工作流的三個入?yún)⒃O置了,，我們就可以為工作流中的三個參數(shù)綁定表單中的數(shù)據(jù)了。 我們點擊面板中的任意一個組件,，可以看到右側(cè)有一個變量的名稱,，大家一定要記住這個名稱，我們要在綁定數(shù)據(jù)時用到,。點擊按鈕回到剛剛綁定事件的界面,，點擊右側(cè)這個小的「展開按鈕」,，可以更方便的進行數(shù)據(jù)綁定。展開以后,，看到這個變量是不是很熟悉,，就是剛才讓大家記住的變量。我們要使用這個變量下的value值,。非常注意：這里大家一定要選變量下面的value,，如果只是選變量，是綁定不上值的,，而且這里的上傳的圖片是一個數(shù)組,。 斜杠君在綁定完數(shù)據(jù)，預覽調(diào)試了好久,，一直不正確,，經(jīng)反復測試，原來是這里的問題,，大家一定要注意這里,。
其它也組件也同樣按此方式綁定，綁定以后是如圖所演示的配置：這里要注意,，一定別忘了點這個確認按鈕,，如果不點這個按鈕，配置窗口關閉系統(tǒng)不保存,，還要重新再填（這里扣子平臺應該修復一下）,。 這里是一個重要的細節(jié)問題，在點擊按鈕的時候,，我們要給按鈕一個loading的狀態(tài)。我們要繼續(xù)配置按鈕,，點擊「開始生成」按鈕,，選擇「加載態(tài) 」旁邊的小的擴展按鈕。這里可以看到,，我們來選擇工作流中的loading狀態(tài) ,。這里說明一下，工作流里有三個主要變量：一個是data,，一個是loading,，一個是error。那這里我們就選擇loading作為「加載態(tài) 」的狀態(tài),。這時當點擊按鈕時,，會出現(xiàn)一個加載的小圓圈。如圖所示：上面的輸入部分我們講完了,，接下來，我們要給應用添加一個輸出了,。因為我們的輸出是一個圖片,，所以我們加一個圖片添加進來。（這里也是為了講解方便,，我們把輸出也放到表單里了,，這里大家也可以自行設置位置。）同樣在這里,，我們?yōu)閳D片綁定一個輸出的值,。輸出值就是我們在前面分析的，工作流結束節(jié)點的輸出值,，也就是image變量,。到這里為止， 我們的表單和工作流的綁定,，以及數(shù)據(jù)的綁定就完全配置完了,。 看到這里并能動手實踐的同學，恭喜你,！你已經(jīng)完成掌握了Coze應用搭建最重要的內(nèi)容了,，快給自己點個贊，也給斜杠君點個關注，支持一下吧~接下來放松一下,，讓我們測試一下我們打建的應用效果怎么樣~這里上傳一張甄嬛的照片，看看維米爾風格的甄嬛,。
|
