為人工智能應(yīng)用程序設(shè)計(jì)圖形用戶界面

謝作如 浙江省溫州科技高級(jí)中學(xué)

人工智能是一種內(nèi)斂的技術(shù)，需要借助多模態(tài)交互技術(shù)，才能“具象化”。在XEdu的幫助下，學(xué)生不需要編寫(xiě)代碼也能快速訓(xùn)練出計(jì)算機(jī)視覺(jué)方向的模型，如圖像分類(lèi)和目標(biāo)檢測(cè)。那么，下一步的需求就是如何呈現(xiàn)這一學(xué)習(xí)成果，如結(jié)合攝像頭，編寫(xiě)出支持實(shí)時(shí)畫(huà)面推理的應(yīng)用程序。筆者曾經(jīng)用PyWebIO、Gradio等庫(kù)介紹過(guò)AI模型部署方面的案例，但更多的教師希望能編寫(xiě)一個(gè)類(lèi)似Windows應(yīng)用程序，有一個(gè)中規(guī)中矩的圖形用戶界面，方便學(xué)生體驗(yàn)。于是，筆者認(rèn)真研究了Python的GUI工具選擇，畢竟給中小學(xué)生使用的工具既要代碼簡(jiǎn)潔，又要功能強(qiáng)大。

●常見(jiàn)的Python圖形界面設(shè)計(jì)工具

圖形用戶界面（Graphical User Interface，簡(jiǎn)稱GUI，又稱圖形用戶接口）是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面。圖形用戶界面是一種人與計(jì)算機(jī)通信的界面顯示格式，允許用戶使用鼠標(biāo)等輸入設(shè)備操縱屏幕上的圖標(biāo)或菜單選項(xiàng)，以選擇命令、調(diào)用文件、啟動(dòng)程序或執(zhí)行其他一些日常任務(wù)。用戶界面通常包括許多視覺(jué)元素，如圖標(biāo)、按鈕、圖形、顯示文本，以及多種輸入控件，如復(fù)選框、文本輸入框等。

Python是一種容易上手、簡(jiǎn)單方便的開(kāi)源編程語(yǔ)言，其第三方的開(kāi)發(fā)工具數(shù)不勝數(shù)，在GUI這個(gè)方向同樣有很多的工具可以選擇。比較常用的GUI開(kāi)發(fā)工具有Tkinter、PyQt、wxPython、Gtk+、Kivy、FLTK和OpenGL等，其中最常用的是Tkinter。Tkinter的優(yōu)點(diǎn)在于是Python內(nèi)置標(biāo)準(zhǔn)庫(kù)，無(wú)需額外安裝，兼容性好，但缺點(diǎn)在于實(shí)現(xiàn)效果較為普通，開(kāi)發(fā)體驗(yàn)不好。比較受程序員推崇的是PyQt和wxPython，其功能強(qiáng)大，界面優(yōu)美，相關(guān)教程也很多，可惜學(xué)習(xí)曲線有些陡峭。在比較了多款GUI開(kāi)發(fā)工具之后，筆者最終選擇了PySimpleGUI。

●PySimpleGUI的安裝和典型代碼

顧名思義，PySimpleGUI是一個(gè)簡(jiǎn)單的GUI設(shè)計(jì)工具。PySimpleGUI的安裝和其他庫(kù)一樣，使用pip命令即可。整個(gè)庫(kù)很小，很快就能完成。參考命令如下：

pip install PySimpleGUI

一個(gè)典型的PySimpleGUI代碼，大致包含導(dǎo)入庫(kù)、設(shè)計(jì)窗體布局、創(chuàng)建窗體、窗體事件控制和關(guān)閉窗體等五個(gè)部分。以一個(gè)簡(jiǎn)單的輸入文本并輸出結(jié)果的程序?yàn)槔瑢?duì)核心代碼的作用分析如表1所示。

表1 PySimpleGUI代碼分析

在這段代碼中，最核心的部分是窗體設(shè)計(jì)和窗體事件控制部分。其中在“window.read()”返回的信息中，event為按鈕的名稱，values則為一個(gè)字典，鍵名是控件的名稱，如“{'in': 'XEdu'}”。仔細(xì)觀察PySimpleGUI代碼，會(huì)發(fā)現(xiàn)它和Arduino、掌控板之類(lèi)開(kāi)源硬件程序的運(yùn)行邏輯非常類(lèi)似——用一個(gè)無(wú)限循環(huán)來(lái)處理輸入和輸出窗體事件。該代碼的運(yùn)行效果如圖1所示，界面樣式規(guī)中矩，看起來(lái)并不丑。

圖1

●用PySimpleGUI編寫(xiě)模型推理程序

借助這樣的簡(jiǎn)單范例，就能寫(xiě)出帶輸入和輸出功能的程序了。考慮到需要編寫(xiě)的程序需要結(jié)合攝像頭，界面中得顯示實(shí)時(shí)畫(huà)面，那就要借助Image類(lèi)型的對(duì)象，然后在窗體事件控制部分實(shí)時(shí)更新畫(huà)面即可。

核心代碼介紹：在定義窗口布局中增加Image類(lèi)型對(duì)象，用size來(lái)定義畫(huà)面的大小（如圖2）。

圖2

核心代碼介紹：實(shí)時(shí)讀取攝像頭的畫(huà)面內(nèi)容，然后用OpenCV的tobytes功能將圖片轉(zhuǎn)化為字節(jié)流，并更新Image對(duì)象（如下頁(yè)圖3）。

圖3

核心代碼介紹：在事件處理代碼中，調(diào)用了模型推理的函數(shù)“my_inf”，這個(gè)函數(shù)使用了BaseDeploy庫(kù)。BaseDeploy庫(kù)是XEdu的一個(gè)組件，支持通用的ONNX模型（如下頁(yè)圖4）。

圖4

最終的程序非常簡(jiǎn)潔，50行左右，程序運(yùn)行結(jié)果如下頁(yè)圖5所示。

圖5

●用PySimpleGUI編寫(xiě)Web應(yīng)用程序

筆者選擇PySimpleGUI的最大原因在于其內(nèi)置了多個(gè)GUI框架。目前它已經(jīng)集成了tkinter、PyQt、wxPython和Remi四種。2021年，筆者曾在《用Python寫(xiě)一個(gè)基于Web的物聯(lián)網(wǎng)應(yīng)用程序》一文中介紹過(guò)Remi庫(kù)。其支持Web界面開(kāi)發(fā)，也就說(shuō)用PySimpleGUI也能開(kāi)發(fā)出Web應(yīng)用。

如果想要將上面的代碼效果以Web界面呈現(xiàn)，只要將前面的導(dǎo)入庫(kù)“import PySimpleGUI as sg”一句改為“import PySimpleGUIWeb as sg”，其他代碼都不需要改變，體現(xiàn)了“一次編寫(xiě)、處處運(yùn)行”的理念。當(dāng)運(yùn)行程序后，瀏覽器就會(huì)自動(dòng)打開(kāi)一個(gè)頁(yè)面，顯示效果如圖6所示。

圖6

●結(jié)語(yǔ)

也許是有VB和Arduino的編程基礎(chǔ)，筆者在用PySimpleGUI編寫(xiě)GUI的過(guò)程中，感覺(jué)非常順手。可見(jiàn)，PySimpleGUI很適合有創(chuàng)客教育或者開(kāi)源硬件編程基礎(chǔ)的師生使用，畢竟在幾分鐘內(nèi)用幾行代碼就可以構(gòu)建自定義GUI布局，是很愉快的編程體驗(yàn)，再加上PySimpleGUI還內(nèi)置了100多種顏色主題，適合“懶人”拿來(lái)就用。一旦能用簡(jiǎn)潔的代碼設(shè)計(jì)出GUI，相信就會(huì)有更多精彩的人工智能應(yīng)用程序涌現(xiàn)出來(lái)，讓我們拭目以待吧。