圖像超分辨率重建Web系統(tǒng)的設(shè)計與實現(xiàn)

摘要：圖像的超分辨率重建技術(shù)近年來受到廣泛的關(guān)注，各種圖像重建模型相繼出現(xiàn)，但其運行通常需要特定的環(huán)境配置，不利于用戶使用。因此，文章結(jié)合Web開發(fā)技術(shù)，設(shè)計并實現(xiàn)了一種圖像超分辨率生成系統(tǒng)。系統(tǒng)通過調(diào)用已經(jīng)訓(xùn)練好的生成對抗網(wǎng)絡(luò)模型，在多端設(shè)備的瀏覽器上生成出更高分辨率的圖像，為用戶獲取高清圖像提供了便利。

關(guān)鍵詞：超分辨率重建；Web開發(fā)技術(shù)；生成對抗網(wǎng)絡(luò)；圖像上傳；多端應(yīng)用

中圖分類號：TP391" " " 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2025）12-0098-03

開放科學(xué)（資源服務(wù)） 標(biāo)識碼（OSID）

0 引言

隨著信息化水平的不斷提高，人們對圖像質(zhì)量的要求也越來越高，低分辨率圖像已無法滿足大多數(shù)應(yīng)用場景，因此，圖像的超分辨率重建技術(shù)迅速得到了關(guān)注[1-8]。超分辨率重建技術(shù)通過深度學(xué)習(xí)利用大量高—低分辨率圖像數(shù)據(jù)進(jìn)行訓(xùn)練。訓(xùn)練好的模型能夠準(zhǔn)確反映高—低分辨率圖像之間的映射關(guān)系，然后應(yīng)用該模型將用戶輸入的圖像進(jìn)行高分辨率的生成。圖像的超分辨率重建能夠使用多種模型去實現(xiàn)，如基于卷積神經(jīng)網(wǎng)絡(luò)（SRCNN） 的實現(xiàn)[9]、基于先驗知識（DEGREE） 的實現(xiàn)[10]、基于生成對抗網(wǎng)絡(luò)（GAN） 的實現(xiàn)[11]。其中，生成對抗網(wǎng)絡(luò)憑借其新穎的理念在眾多模型中脫穎而出，同時大量的研究結(jié)果也證實了生成對抗網(wǎng)絡(luò)在圖像重建領(lǐng)域的成功。本文利用生成對抗網(wǎng)絡(luò)模型，在模型訓(xùn)練完成的前提下，結(jié)合Web開發(fā)技術(shù)，設(shè)計并實現(xiàn)了圖像超分辨率重建系統(tǒng)，用戶能夠隨時在一定程度上提升圖像的分辨率。

1 系統(tǒng)主要技術(shù)分析

1.1 生成對抗網(wǎng)絡(luò)

生成對抗網(wǎng)絡(luò)的基本原理是通過兩個神經(jīng)網(wǎng)絡(luò)，即生成器和判別器的相互對抗來進(jìn)行學(xué)習(xí)。生成器接收低分辨率圖像數(shù)據(jù)，提取特征并生成高分辨率圖像，其目的是讓生成的數(shù)據(jù)盡量接近真實數(shù)據(jù)以騙過判別器的判斷；將生成出來的數(shù)據(jù)送入判別器，同時真實數(shù)據(jù)也送入判別器，讓判別器對兩者進(jìn)行區(qū)分，無論區(qū)分結(jié)果正誤，該結(jié)果都會作用于生成器與判別器，在兩者進(jìn)行相應(yīng)的參數(shù)調(diào)整后進(jìn)行下一輪的訓(xùn)練。經(jīng)過不斷的訓(xùn)練與參數(shù)調(diào)整后，生成數(shù)據(jù)與真實數(shù)據(jù)已經(jīng)變得難以區(qū)分，此時的生成模型可以認(rèn)為訓(xùn)練完成[12]。

1.2 Web界面開發(fā)技術(shù)

當(dāng)前Web開發(fā)采用的主流模式為瀏覽器/服務(wù)器（B/S） 模式，瀏覽器即為客戶端，用戶在瀏覽器上能夠直接訪問系統(tǒng)的各個界面，通過瀏覽器來發(fā)送請求。Web界面開發(fā)技術(shù)的核心包括以下3種技術(shù)：HTML、CSS、JavaScript。HTML是界面構(gòu)建的基礎(chǔ)，使用標(biāo)簽?zāi)軌虍a(chǎn)生用戶界面的主要元素，同時也能通過標(biāo)簽把文字、圖像等元素合理地組織起來；CSS是界面修飾的關(guān)鍵部分，它能夠控制各個元素呈現(xiàn)的顏色、排版等效果，讓界面更具視覺吸引力；JavaScript主要用于增強(qiáng)界面的功能性，為用戶的點擊、鍵盤輸入等操作添加交互功能。

1.3 Web服務(wù)端開發(fā)技術(shù)

服務(wù)端采用MVC（Model-View-Controller，即模型—視圖—控制器） 的模式設(shè)計，其中M表示模型，負(fù)責(zé)業(yè)務(wù)處理；V表示視圖，負(fù)責(zé)將數(shù)據(jù)以用戶熟悉的方式呈現(xiàn)出來，C表示控制器，讓M與V能夠按照一定的流程進(jìn)行。當(dāng)服務(wù)端接到客戶端發(fā)來的請求后，控制器會將請求中的數(shù)據(jù)進(jìn)行封裝，并選擇合適的模型業(yè)務(wù)來處理這個請求，在模型處理完成后會把結(jié)果數(shù)據(jù)返回至控制器，此時控制器會選擇合適的視圖將數(shù)據(jù)呈現(xiàn)出來。

2 系統(tǒng)總體設(shè)計

系統(tǒng)架構(gòu)分為3個部分：客戶端、服務(wù)端和模型端，如圖1所示。用戶需要打開瀏覽器，并鍵入系統(tǒng)的起始地址進(jìn)入界面，在系統(tǒng)界面上選擇圖片并向服務(wù)端發(fā)送請求，將選擇的圖片數(shù)據(jù)上傳至服務(wù)端。服務(wù)端接收到圖片后，將圖片在瀏覽器上顯示，同時與模型端進(jìn)行通信，將用戶圖片數(shù)據(jù)作為輸入，并等待模型端的圖片生成。模型端為預(yù)先訓(xùn)練好的生成對抗網(wǎng)絡(luò)模型，該模型通過大量的數(shù)據(jù)訓(xùn)練已能夠生成出較為真實的超分辨率圖像。模型端生成圖片后，服務(wù)端讀取并顯示該圖片于瀏覽器上。

系統(tǒng)按功能劃分可分為圖片上傳、超分辨率生成、輸出顯示3個模塊，如圖2所示。其中，圖片上傳模塊為用戶提供文件選擇入口，用戶可以自由地在本地選擇圖片文件，當(dāng)文件上傳到服務(wù)器時，將文件保存到指定位置；超分辨率生成模塊為服務(wù)器提供調(diào)用外部模型的接口，當(dāng)服務(wù)器調(diào)用模型時，模型將直接讀取保存在服務(wù)器上的用戶圖片，讓模型以該圖片數(shù)據(jù)作為輸入，來進(jìn)行超分辨率圖片數(shù)據(jù)的輸出，將輸出結(jié)果以指定文件名及指定路徑保存；輸出顯示模塊主要用于為用戶呈現(xiàn)圖片效果，包括用戶上傳的原圖片和生成得到的圖片，用戶可以將生成的圖片保存下來。

3 系統(tǒng)實現(xiàn)

3.1 用戶界面實現(xiàn)

整個系統(tǒng)的用戶界面如圖3所示，用戶在瀏覽器中輸入地址http：//localhost：8080，即可進(jìn)入用戶界面。界面的頂部為系統(tǒng)標(biāo)題，標(biāo)題下方為文件選擇與上傳區(qū)域，用于用戶的圖片上傳；界面中心區(qū)域用于圖像展示，讓用戶直觀地看到原始圖像以及生成出來的圖像。同時為了能夠適應(yīng)不同的操作設(shè)備，界面使用@media進(jìn)行了響應(yīng)式的設(shè)計。當(dāng)用戶使用手機(jī)等屏幕寬度小于600像素的設(shè)備時，界面中心區(qū)域僅呈現(xiàn)一幅圖像，讓圖像在手機(jī)端更好地顯示。由于手機(jī)端大部分元素都相同，所以其界面在這里不再展示，詳見測試部分。

用戶在界面中可使用圖片上傳、超分辨率生成、輸出顯示3個模塊的功能，各模塊的具體實現(xiàn)如下。

3.2 圖片上傳模塊實現(xiàn)

圖片上傳模塊的用戶界面如圖3中所示，該區(qū)域界面使用lt;formgt;表單中的lt;input type=\"file\"gt;控件實現(xiàn)，lt;input type=\"file\"gt;控件能夠在頁面上產(chǎn)生選擇文件按鈕，具有打開文件選擇對話框的功能，同時產(chǎn)生與之匹配的文本區(qū)，用于顯示選中文件的文件名。圖像數(shù)據(jù)與普通文本數(shù)據(jù)不同，無法采用常規(guī)數(shù)據(jù)綁定功能傳遞至服務(wù)器，因此在項目中引入了commons-fileupload組件來處理圖像數(shù)據(jù)（該組件的依賴包可從apache官網(wǎng)中下載） 。為了能夠順利將圖像數(shù)據(jù)提交至服務(wù)端，還需要在lt;formgt;表單中添加屬性enctype= \"multipart/form-data\"，用于指定其為二進(jìn)制數(shù)據(jù)類型，且提交方式須設(shè)置為post方式。當(dāng)用戶選中一個圖像文件后，可點擊上傳按鈕將表單提交，此時瀏覽器將向服務(wù)端發(fā)送/upload請求。

服務(wù)端接到請求后，調(diào)用fileUpload方法來處理這個請求，核心代碼如圖4所示。

在fileUpload方法中，commons-fileupload組件的MultipartFile接口能夠綁定用戶上傳的圖片數(shù)據(jù)，然后設(shè)置圖像在服務(wù)端中的儲存地址，在存儲地址處創(chuàng)建File對象（地址見圖4中第3行） 用于接收瀏覽器傳遞來的數(shù)據(jù)，最后通過接口的transferTo方法將上傳的文件保存至該File對象中。

3.3 超分辨率生成模塊實現(xiàn)

用戶上傳文件成功后，可點擊生成按鈕，執(zhí)行圖像超分辨率生成功能。點擊按鈕后，瀏覽器將向服務(wù)端發(fā)送/generate請求，服務(wù)端將調(diào)用UseGAN方法來處理這個請求，核心代碼如圖5所示。

在UseGAN方法中，服務(wù)端以命令形式啟動機(jī)器學(xué)習(xí)環(huán)境、進(jìn)入模型根目錄、運行生成對抗網(wǎng)絡(luò)模型文件predict.py（3條命令見圖5中第3～5行，amp;amp;連接符讓需要運行的命令依次進(jìn)行） ，然后調(diào)用exec函數(shù)執(zhí)行這3條命令。由于模型生成圖像需要短暫的時間，所以使用waitFor函數(shù)來等待生成圖像進(jìn)程執(zhí)行結(jié)束。模型生成的超分辨率結(jié)果以result.jpg命名，與原始用戶文件保存在相同目錄。其中生成對抗網(wǎng)絡(luò)模型使用的是作者bubbliiiing訓(xùn)練好的模型（項目源碼地址https：//github.com/bubbliiiing/srgan-pytorch） ，由于服務(wù)端中已經(jīng)配置有python及機(jī)器學(xué)習(xí)環(huán)境，因此能夠直接在命令行中執(zhí)行。模型的接口文件predict.py將原始圖像文件user_pic.jpg作為入?yún)ⅲ诩虞d完已保存的訓(xùn)練參數(shù)后，模型將會開啟預(yù)測，即圖像生成，生成結(jié)果自動命名為result.jpg。

3.4 輸出顯示模塊實現(xiàn)

輸出顯示模塊的界面對應(yīng)圖3的兩處灰色區(qū)域，系統(tǒng)使用JavaScript腳本判斷圖片文件夾中是否存在user_pic.jpg和result.jpg，若存在則設(shè)置對應(yīng)的lt;imggt;標(biāo)簽的src鏈接屬性，若不存在則這兩處區(qū)域以灰色填充。左側(cè)的灰色區(qū)域用于顯示用戶上傳的原始圖像，當(dāng)上傳請求處理完成后，該區(qū)域的lt;imggt;標(biāo)簽刷新鏈接，顯示用戶上傳的圖像；右側(cè)的灰色區(qū)域用于顯示生成出來的圖像，當(dāng)生成功能執(zhí)行完成后產(chǎn)生result.jpg結(jié)果文件，該區(qū)域的lt;imggt;標(biāo)簽會自動加載result.jpg。

4 運行效果測試

使用谷歌瀏覽器訪問http：//localhost：8080，能夠正確打開用戶界面。通過“選擇文件”按鈕可在本地選擇目標(biāo)圖像，在選中目標(biāo)圖像文件并確認(rèn)后，界面上會出現(xiàn)目標(biāo)文件名，如圖6中部左側(cè)所示。點擊“上傳”按鈕后，圖像文件成功保存在服務(wù)端的img文件夾，并在左側(cè)顯示，如圖6左部所示。在正確完成上傳功能后，單擊“生成”按鈕，經(jīng)過短暫的等待，在右側(cè)顯示區(qū)能夠顯示出系統(tǒng)生成的圖像，如圖6右部所示。同時，這里可以看到系統(tǒng)生成的結(jié)果相較于原始圖像更為清晰，且失真度在一定程度上可以接受。

手機(jī)訪問系統(tǒng)的測試效果如圖7所示。由于手機(jī)端在運行測試時處于局域網(wǎng)內(nèi)，因此訪問地址為http：//192.168.0.111：8080。在手機(jī)界面上僅有一幅圖像區(qū)域，原始圖像與生成圖像均顯示在該區(qū)域。成功上傳圖像后，中心區(qū)域顯示上傳的圖像，在執(zhí)行完生成操作后，中心區(qū)域顯示內(nèi)容被生成圖像所替換。

5 結(jié)論

經(jīng)過程序的設(shè)計與運行測試，系統(tǒng)的圖像生成功能正常運行。系統(tǒng)的創(chuàng)新之處在于將Web開發(fā)技術(shù)與生成對抗網(wǎng)絡(luò)模型相結(jié)合，用戶無須配置煩瑣的運行環(huán)境即可通過瀏覽器地址快捷訪問，操作界面簡潔易用，適合大多數(shù)使用者進(jìn)行超分辨率圖像的獲取，同時在多種設(shè)備下均能較好地運行與顯示，具有一定的應(yīng)用價值。

參考文獻(xiàn)：

[1] 周飛燕，金林鵬，董軍.卷積神經(jīng)網(wǎng)絡(luò)研究綜述[J].計算機(jī)學(xué)報，2017，40（6）：1229-1251.

[2] 朱新峰，宋健.輕量級圖像超分辨率研究綜述[J].計算機(jī)工程與應(yīng)用，2024，60（16）：49-60.

[3] 陳佛計，朱楓，吳清瀟，等.生成對抗網(wǎng)絡(luò)及其在圖像生成中的應(yīng)用研究綜述[J].計算機(jī)學(xué)報，2021，44（2）：347-369.

[4] 唐艷秋，潘泓，朱亞平，等.圖像超分辨率重建研究綜述[J].電子學(xué)報，2020，48（7）：1407-1420.

[5] 溫少華.基于ARM+FPGA的超分辨率重建系統(tǒng)設(shè)計與實現(xiàn)[D].西安：西安電子科技大學(xué)，2017.

[6] 石亮.基于深度學(xué)習(xí)的單幅圖像超分辨率重建研究與系統(tǒng)設(shè)計[D].金華：浙江師范大學(xué)，2023.

[7] 劉建偉，謝浩杰，羅雄麟.生成對抗網(wǎng)絡(luò)在各領(lǐng)域應(yīng)用研究進(jìn)展[J].自動化學(xué)報，2020，46（12）：2500-2536.

[8] 張瑾，李佳瑩，李曉陽，等.基于SRGAN的圖像超分辨率重建[J].電腦知識與技術(shù)，2024，20（1）：14-17.

[9] DONG C，LOY C C，HE K，et al.Learning a Deep Convolutional Network for Image Super-Resolution[C]//European Conference on Computer Vision.Cham：Springer International Publishing，2014：184-199.

[10] YANG W，F(xiàn)ENG J，YANG J，et al.Deep Edge Guided Recurrent Residual Learning for Image Super-Resolution[J].IEEE Transactions on Image Processing，2017，26（12）：5895-5907.

[11] LEDIG C，THEIS L，HUSZAR F，et al.Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network[C]//Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition.Honolulu：IEEE Computer Society，2017：4681-4690.

[12] 梁俊杰，韋艦晶，蔣正鋒.生成對抗網(wǎng)絡(luò)GAN綜述[J].計算機(jī)科學(xué)與探索，2020，14（1）：1-17.

【通聯(lián)編輯：謝媛媛】