作者：Jack OmniXRI
相信很多朋友都是使用 Python 及 Jupyter Notebook 環境在開發人工智慧應用程式，不論是影像辨識、分類，還是大語言模型、影音生成應用。當只能使用命令列(Command Line)模式操作而沒有圖形化人機介面(Gaphical User Interface, GUI)，那麼使用上就會變得非常不直覺且不方便。
傳統上要開發 Python GUI 大概會想到使用 Tkinter, PySide, PyQT 等工具，但這些工具比較適合開發桌機或手機版的應用，並不容易和 Jupyter Notebook 這類網頁版程式整合，包含 Google Colab, Intel OpenVINO Notebooks, Hugging Face 等。所以這裡要幫大家介紹另一項常見的 GUI 開源工具「Gradio」。[1]
Gradio 提供了很便捷的網頁型式的各種輸入和輸出模組，如下所示。[2]
- 應用介面：Interface(簡單應用)、Blocks（客製化應用）
- 輸出輸入：文字框(Textbox)、資料框（DataFrame）、影像(Image)、下拉盒(Dropdown)、數字(Number)、文字說明（Markdown）、檔案(File)
- 控制元件：按鍵(Button)
- 版面佈局：標籤頁（Tab）、列佈局(Row)、行佈局(Column)
以上內容除了可直接顯示在 Jupyter Notebook 欄位上，還可透過獨立網頁顯示，包括裝置端（本地端）網址(http://localhost:7860)，或公開（雲端）網址(https：//xxxx.gradio.live)，方便分享結果給其它人使用。
接下來就依序介紹幾個常用模組的使用方式給大家參考。完整範例可點擊下列連結直接於 Google Colab 上啟動。
建議開啟後，先點擊選單「檔案」─「在雲端硬碟中儲存複本」，方便之後可以修改及測試程式。接著點擊選單「執行階段」─「全部執行」可一口氣把所有範例都執行一遍。
Fig. 1 Google Colab 工作及執行畫面。
1. 安裝 Gradio 及必要函式庫
在 Colab 中通常已預安裝好很多 Python 常用套件，如TensorFlow, PyTorch, OpenCV等，這裡只需安裝最重要的 gradio 即可，另外由於後面會下載一些配套檔案，所以另外多安裝一些必要的函式庫，如 requests, numpy 等。
2. 基本文字/數字輸出入
2.1. 簡單應用介面一（簡單型）
Gradio 使用上非常簡單，只需定義一個處理函式 fn，接著就可呼叫介面 Interface() 函式 ，指定輸出入格式後，再呼叫執行函式 launch() 函式即可秀出一個漂亮的輸出入介面。
以下範例執行後，左半邊為文字輸入，左半邊為輸出結果。當輸入一個「名字」（字串），按下「Submit」即可在右半邊顯示「Hello 名字!!」，而其內容就是經過 greet1() 組合出來的。當按下「Clear」時可清除輸出入內容。
執行後，除了在 Jupyter Notebook 欄位中出現介面，另外會提供一個公開網址，點擊後會出現一個新網頁，顯示一樣的內容。這個網址就可分享給其它人，享受你設計出的應用。
註：共享連結只保留72小時，如需免費永久托管，需在終端機模式執行「gradio deploy」部署到 Hugging Face Spaces。
Fig. 2 簡單文字輸出入介面執行結果。
2.2. 簡單應用介面二（自定義型）
上一個範例，只有簡單的顯示介面。在這個範例可指定較複雜的設定，具有多個輸入和輸出，同時也自定義了輸出入的標籤，方便使用者辨識用途。
當在 name 欄位輸入「名字」，點選或解除「是早上」複選盒，拉動滑桿或直接輸入華氏溫度數值並按下「Submit」鍵，就會產生處理函式的輸出文字內容及溫度。當按下「Clear」鍵可清除輸入及輸出結果。
在處理函式 greet2() 引入三個變數，分別為 name(字串), is_morning（布林值）及temperature(數值)，而回返值為二組字串 greeting 及四捨五入取小數點二位的攝氏溫度值。
在介面函式 Interface(), 分別使用 inputs, outputs 來定義每個輸出入值的更進一步外觀。如果想了解更多各元件用法可參考 [2]。Fig. 3 自定義文字輸出入介面執行結果。
Fig. 3 自定義文字輸出入介面執行結果。
2.3. 執行預設計 GUI （*.py）
對於常用的網頁表單格式，在不托管情況下也可以把相關內容預編成一個 Python 模組 (*.py)。
假設想要把上一步驟的 GUI 變成可引用之函式，可將後半段程式變成名為 launch_demo 的函式，再將程式儲存成 gradio_test.py 的程式，放在同一路徑下即可，如 Fig. 4所示。
若想在 Colab 上執行上述模組時，需先自行下載到 Colab 提供的臨時雲端硬碟，預設使用者根目錄路徑為 content。亦可自行手動上傳。
由於執行路徑並不包含此路徑，所以還需使用 sys.path.append() 將路徑加入才能正確引用。若在本地端執行則不用增加該目錄。
Fig. 4 以 Python 模組方式引用，完成文字輸出入介面執行結果。
3. 基本影像輸出入
3.1. 使用 numpy 格式影像
當執行後，可支持三種影像輸入方式，直接上傳（支持從電腦檔案夾點擊或直接拖拉置放）、從網路攝影機直接拍照取像及貼上已剪貼簿中的影像。
上傳影像後，按下「Submit」鍵，即可呼叫影像處理函式 sepia()，這裡會令原始影像變成棕色影像顯示在輸出。
Fig. 5 影像輸出入介面執行結果。
3.2. 使用 OpenCV 格式影像
如果想要使用 OpenCV 影像格式進行影像處理，在介面函式輸人部份需加上 type=”filepath” ，而處理函式部份則需加上 input_img = cv2.imread(input_img) 才能順利工作。
Fig. 6 使用 numpy 和 OpenCV 影像格式程式比較。
4. 基本影音輸出入
為方便測試，會先下載兩個影音檔「Jack_OmniXRI.mp4」、「good_weather.wav」作為 Examples 。
另外為豐富人機介面另外加上四個項目：
- title = 標題
- description = 描述
- examples = [ [樣本1影片, 樣本1聲音], [樣本2影片, 樣本2聲音] ]
- article = 表單最後註腳，可使用 Markdown 語法
當按下 Examples 中文字時會自動載入影音檔到輸入欄位，若不想使用範例影音，亦可自行拖拉影音檔到輸入區。
這裡的影音處理函式 av_identity 為空的，直接輸出原影音檔，若有需要可在此處增加所需程式。
當按下「Submit」鍵後，會把輸入區之影音複製一份到輸出區。
Fig. 7 自定義影音輸出入介面執行結果。
小結
透過以上的介紹，相信大家已經對 Gradio 有了一些基本認識，只要透過更複雜的排列組合，就能讓大家更容易創建出屬於自己需求的應用。目前已有很多 AI 相關應用都是使用這項工具，包括大型語言模型對話，影音生成等，在 Hugging Face 上也有許多範例，後續有機會再為大家介紹更進階的應用。
參考文獻
[1] Gradio, Home Page & Github
https://www.gradio.app/
https://github.com/gradio-app/gradio
[2] Gradio, Documentation – interface
https://www.gradio.app/docs/gradio/interface
延伸閱讀
[A] Hugging Face, Gradio 塊簡介（NLP Coures)
https://huggingface.co/learn/nlp-course/zh-TW/chapter9/7
（本篇文章經同意轉載自vMaker，原文連結；責任編輯：謝嘉洵。）
主持歐尼克斯實境互動工作室(OmniXRI)：http://omnixri.blogspot.com
Edge AI Taiwan邊緣智能交流區：https://www.facebook.com/groups/edgeaitw/
- 【Edge AI專欄 】 如何使用 Gradio 快速搭建人工智慧應用圖形化人機介面 - 2024/12/23
- 如何使用Intel AI PC及OpenVINO實現虛擬主播 - 2024/12/16
- 【Edge AI專欄】 邊緣端小語言模型崛起，開發板跟上了嗎？ - 2024/11/26
.jpg)
.jpg)