延續上一篇 [交談式AI – ChatBot 元件],本篇繼續介紹 App Inventor 發布的兩個生成式 AI 元件:ChatBot 與 ImageBot。本元件串接了 openAI DALL-E 2 圖片生成服務,並且每日都有免費額度可以使用,感謝 MIT 開發團隊喔!
注意:MIT App Inventor ImageBot 元件只能接受英文提示,所以本範例加入了 Translator 元件來做一段中翻英,操作更方便!另外由於上述兩個元件都是串接網路服務,所以本範例需在有良好網路連線的狀況下執行。
ImageBot 元件
ImageBot 元件位於 Experimental 分類下,屬於非可視元件。根據 MIT 文件說明,ImageBot 元件使用 MIT 代理伺服器來呼叫 Dall-E 2 生圖引擎。雖然說使用者無需提供 ApiKey 就能使用,但因此也有呼叫次數上的限制。如果您後續執行 app 時看到 “Quota exceeds limits” 類似訊息,代表呼叫次數太頻繁,需稍等一會才能繼續使用。因此如果不想被這個問題煩心的話,請自行付費申請 openAI APIKEY 填入使用,當然也會根據您的使用量來收費。
過程中建議使用 Bing Image Creator,串接了 openAI 最新的 Dall-E 3 生圖引擎,非常厲害。ImageBot 雖只能使用 Dall-E 2,但實際上的效果也很不錯喔!建議您先用 Bing Image Creator 來練習如何下提示來生圖,最後再轉到您的 app 來操作比較不會碰到 quota 問題。等到最後要部署到 app 上時再從 app 端去操作 ImageBot 元件來生圖。
![](https://www.appinventor.tw/wp-content/uploads/2024/06/001.jpg)
Designer 介面配置
介面很簡單,重要元件說明如下:
- 清單選擇器 元件:選擇預先決定的風格,會被整合到 ImageBot 的 prompt 中
- 按鈕 元件:按下按鈕,呼叫 ImageBot 元件發送生圖用的文字給 Dall-E 2 服務。
- 標籤 元件:顯示經由 Translator 元件轉換後的生圖提示。
- 圖像 元件:顯示 ImageBot 的生圖結果
- ImageBot 元件:本文重點,用於串接 Dall-E 2 生圖服務。
- Translator 元件:把使用者所輸入的正體中文提示翻譯為英文。
![](https://www.appinventor.tw/wp-content/uploads/2024/06/app01-1024x606.png)
Blocks 程式設計
app 初始化先設定清單選擇器內容,在此使用一個 list 變數來放您所喜歡的風格,再將其指定為清單選擇器內容。您可以根據喜好與實際需要來加入更多風格。
![](https://www.appinventor.tw/wp-content/uploads/2024/06/app02.png)
按下按鈕,首先要呼叫 Translator.RequesTranslation
將使用者在 Textbox 中的輸入內容翻譯為英文。接著再從 Translator.GotTranslation
事件中呼叫 ImageBot.CreateImage
,使用剛剛翻譯好的英文提示來生成圖片。
![](https://www.appinventor.tw/wp-content/uploads/2024/06/app03.png)
一切順利的話,會觸發 ImageBot.ImageCreated
事件,將生成圖片 (fileName
) 顯示在 Image 元件上就完成囉!
如果發生任何錯誤 (例如上述的 “Quota exceeds limits” ),則由 ImageBot.ErrorOccurred
事件來處理,並顯示在 app 上方便我們除錯。
![](https://www.appinventor.tw/wp-content/uploads/2024/06/app04.png)
執行畫面
執行時,請輸入問題之後按下 [AI 繪圖] 按鈕,過一會兒就會產生圖片了,簡單小範例,希望大家喜歡喔!
![]() | ![]() |
![](http://www.appinventor.tw/wp-content/uploads/2022/08/cropped-cropped-customLogo.jpg)