圖像超分辨率重建Web系統的設計與實現

摘要：圖像的超分辨率重建技術近年來受到廣泛的關注，各種圖像重建模型相繼出現，但其運行通常需要特定的環境配置，不利于用戶使用。因此，文章結合Web開發技術，設計并實現了一種圖像超分辨率生成系統。系統通過調用已經訓練好的生成對抗網絡模型，在多端設備的瀏覽器上生成出更高分辨率的圖像，為用戶獲取高清圖像提供了便利。

關鍵詞：超分辨率重建；Web開發技術；生成對抗網絡；圖像上傳；多端應用

中圖分類號：TP391" " " 文獻標識碼：A

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

開放科學（資源服務） 標識碼（OSID）

0 引言

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

1 系統主要技術分析

1.1 生成對抗網絡

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

1.2 Web界面開發技術

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

1.3 Web服務端開發技術

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

2 系統總體設計

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

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

3 系統實現

3.1 用戶界面實現

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

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

3.2 圖片上傳模塊實現

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

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

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

3.3 超分辨率生成模塊實現

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

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

3.4 輸出顯示模塊實現

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

4 運行效果測試

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

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

5 結論

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

參考文獻：

[1] 周飛燕，金林鵬，董軍.卷積神經網絡研究綜述[J].計算機學報，2017，40（6）：1229-1251.

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

[3] 陳佛計，朱楓，吳清瀟，等.生成對抗網絡及其在圖像生成中的應用研究綜述[J].計算機學報，2021，44（2）：347-369.

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

[5] 溫少華.基于ARM+FPGA的超分辨率重建系統設計與實現[D].西安：西安電子科技大學，2017.

[6] 石亮.基于深度學習的單幅圖像超分辨率重建研究與系統設計[D].金華：浙江師范大學，2023.

[7] 劉建偉，謝浩杰，羅雄麟.生成對抗網絡在各領域應用研究進展[J].自動化學報，2020，46（12）：2500-2536.

[8] 張瑾，李佳瑩，李曉陽，等.基于SRGAN的圖像超分辨率重建[J].電腦知識與技術，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，FENG 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] 梁俊杰，韋艦晶，蔣正鋒.生成對抗網絡GAN綜述[J].計算機科學與探索，2020，14（1）：1-17.

【通聯編輯：謝媛媛】