借助Gradio制作AI體驗活動的教學課件

謝作如 溫州科技高級中學

為激發學習興趣，教師在介紹圖像分類、目標檢測之類的人工智能技術時，總希望能制作一些個性化的展示AI應用的教學課件，讓學生深度體驗AI的強大功能。在《用PyWebIO“交互”呈現人工智能學習成果》一文中，我介紹了用PyWebIO來部署AI模型，并形成一個交互網頁的案例。但PyWebIO存在一些不足，如界面不夠美觀、不支持頁面布局、不支持Jupyter，也不支持攝像頭和麥克風等。前段時間，在本地部署Stable fuffsion的時候，我無意中找到了一款AI模型可視化演示的工具，即Gradio。經過深度測試，我認為它很適合用于教學演示。

●Gradio是為模型部署而生的工具

Gradio是一個開源的Python庫，用于構建演示機器學習、數據科學或者Web應用的程序。使用Gradio，用戶可以快速為機器學習模型或數據科學工作流創建一個漂亮的Web交互界面，讓用戶可以在瀏覽器上執行輸入文本、上傳圖像和錄制聲音等操作，與演示程序進行交互（如圖1）。

圖1 Gradio的官方頁面

值得強調的是，國內外多個人工智能模型托管網站都內置了Gradio，如Hugging Face、OpenXLab浦源、啟智AI協作平臺等。可以說，Gradio是一個主流的AI模型快速部署工具。

●Gradio的安裝和語法基礎

Gradio支持pip安裝，即“pip install gradio”。庫很小，關聯的依賴庫也很少，Python3.7以上即可安裝。（文檔地址為：https：//gradio.app/docs/）

G r a d i o 的核心函數是Interface類，通過fn、inputs、ouputs這三個參數進行初始化，其中，“fn”為關聯的函數，“inputs”為輸入組件類型，“ouputs”為輸出組件類型。通過這三個參數，可以快速創建一個接口并發布如圖2所示的程序。

圖2

運行圖2所示的代碼，訪問“http：//127.0.0.1：7860”，即可打開一個網頁，如圖3所示。其中左邊為輸入端，右邊為輸出端。

圖3 Gradio的運行界面

從上面的例子可以看到，輸入的內容為fn關聯函數“greet”的“name”參數值，“greet”返回的數據即輸出的內容。Interface對象還可以處理很多類型的數據，如：輸入類型有“text”“image”和“a u d i o”等，甚至還支持“sketchpad”涂鴉板；輸出類型則有“text”“image”和“label”等。

●用Gradio搭建基于Web的AI應用

以一個車牌識別模型的部署為例，當用XEdu的Det（目標識別）模塊訓練出一個車牌識別模型后，在模型推理的代碼中增加數行代碼，即可實現在Web頁面推理模型，參考代碼如圖4所示。

圖4

Gradio直接支持在Jupyter中運行代碼，并以嵌入幀的方式顯示在Jupyter筆記中，特別適合教學演示，如下頁圖5所示。

圖5 在浦育平臺的容器里運行Gradio

●Gradio的高級應用

雖然Gradio語法簡單，但功能卻非常強大，尤其是在多模態交互方面。下面簡單介紹如何調用攝像頭和麥克風，以及實現外部（互聯網）訪問。

1.調用攝像頭和麥克風

只要將inputs參數設為“gr.Image(source='webcam'，type='p il')”，就能在網頁上喚起攝像頭。使用方式是點擊一次“拍照”圖標，即上傳一張照片。我們甚至可以用這種方式來收集圖片，制作簡單的數據集。同樣，只要將inputs參數設為＂microphone＂，就能在網頁上使用麥克風了。

2.創建一個外部訪問鏈接

創建外部訪問鏈接有兩個作用，一是可以讓外網訪問內網電腦運行的代碼，二是可以訪問一些本來不支持Web訪問的服務器，如使用容器（Docker）技術運行代碼的平臺。只需要在launch函數中增加“share=True”的參數，在程序啟動時的打印信息中會看到外部訪問鏈接。免費用戶的鏈接可以使用24小時，想要長期的話需要在Gradio官方購買云服務。借助這一功能，我們可以隨時在浦育平臺或者Mo平臺上建一個臨時的應用分享網頁。

●總結

在部署Stable fuffsion時第一次見到Gradio，我就和其他老師一起討論了其教育價值。它除了用于做教學演示課件外，還可以用來設計一些AI模型的體驗作品。比如，將一些復雜的模型部署在迷你電腦或者一體機中，放在實驗室或者科技館的公共區域，供學生使用。

此外，隨著Keras、XEdu等這些門檻較低的深度學習工具的普及，學生基于真實問題進行數據收集和模型訓練也將越來越普遍。那么，教師也可以借助Gradio將學生的學習成果（模型）部署為人工智能應用，直觀形象地呈現他們的學習成果，一定能夠極大地提高學生學習的收獲感。