基于Flask數據可視化的網頁端顯示方法研究

摘要：隨著人類基因組計劃的完成和蛋白組學的迅猛發展，計算機藥物輔助設計成了生物制藥技術的重要環節。深度學習可用于探索藥物-靶標的相互作用，可視化技術可有效進行數據可視化和數據分析。針對網頁端不便于進行復雜計算和繪制復雜圖形的問題，文章使用Flask框架將深度學習和各種可視化顯示等復雜工作都交由Python執行，網頁端只進行最簡單的輸入輸出設計，極大地降低了網頁數據可視化的編程難度，無需復雜的JavaScript技術即可在網頁端展示各種可視化結果。

關鍵詞：數據可視化；Flask；機器學習；網頁設計

中圖分類號：TP312" 文獻標志碼：A

基金項目：河南工學院校級項目；項目名稱：基于深度學習的生信大數據挖掘系統設計與實現；項目編號：XJ2023005602。河南省科技攻關項目；項目名稱：基于云邊端架構的工業智能關鍵技術研究；項目編號：242102220035。2024 年度河南省高等學校重點科研項目計劃；項目名稱：面向金融領域的智能投顧大語言模型的關鍵技術及基礎研究；項目編號：24B520004。

作者簡介：王曉雷（1990— ），男，助理實驗師，碩士；研究方向：生物信息學，數據挖掘。

0" 引言

藥物-靶標相互作用預測是藥物篩選和藥物重定位的關鍵環節［1-2］。傳統的實驗方法研究藥物-靶標的相互作用，時間耗費長、成本高昂并且盲目性較大，難以快速準確地得到結果。近年來，深度學習是藥物-靶標相互作用預測的主流研究方法，不僅在疫情的抗擊中發揮了重要的作用［3-4］，還在一些疑難雜癥方面取得了不錯的效果，比如抑郁癥［5］。

機器學習和深度學習算法已應用于藥物-靶標相互作用的研究階段［6］。以深度學習為基礎建立的各種算法和程序，存在著一些明顯的問題。首先，深度學習的模型文件一般特別大，不方便通過網絡進行傳輸。其次，深度學習一般需要的計算資源巨大，普通用戶難以承受相應的成本。尤其是大語言模型的發展，更是加劇了這些困難。最后，研究者希望自己的成果能夠幫助到別人，但是又害怕源代碼泄露導致被抄襲。因此，越來越多的學者把自己的研究成果以網頁形式呈現，對外保護好自己的核心技術。

使用網頁形式可以很好地解決上述問題，但是使用網頁進行藥物-靶標的相互作用預測，存在以下問題。藥物和靶標的相互作用實際上就是藥物分子蛋白的結構產生的作用。蛋白質是一種具有空間結構的物質［7］，而空間結構的圖形，難以在網頁上繪制出來。王鮮芳等［8］進行了蛋白質功能的相關研究，并未實現網頁形式的效果。后來Wang等［9］使用C#和MATLAB實現了算法在網頁上的部署應用。Li等［10］使用PHP將算法部署到了網頁上。不同編程語言的數據類型不完全一致，并且深度學習等復雜操作又難以用JavaScript在網頁端實現，在網頁端繪制各種可視化圖表更是需要較多的精力。

隨著Python逐漸躋身為深度學習的主流編程語言之一，本文進行了使用Python開發網頁和銜接深度學習算法的研究。

1" Flask

Web服務器端的選擇有很多種，Python Flask基于Python實現，簡單易學，擴展性極高，采用的MVC構架也非常符合軟件設計的原則［11］。它不僅支持常規的網頁設計，還支持小程序等多種形式的網絡應用設計［12］ 。沃葉紅［13］使用Flask+Vue進行了網頁界面可視化的探索，李相霏等［14］和范路橋等［15］則使用了第三方的EChart庫進行了圖表可視化內容在網頁上的實現。雖然圖表內容在網頁端的顯示效果豐富了許多，但是主要功能是通過瀏覽器對JavaScript的支持來實現的，對開發者的網頁編程能力要求仍然較高。有些圖表如分子結構圖等，在Python中使用Rdkit等依賴包可以輕松繪制，但是這些在日常工作中出現頻率并不高的圖，缺少對應的第三方依賴包去操作JavaScript在網頁上繪制出來。尤其是近年來使用熱門的圖神經網絡［16］，結構較為復雜，為網頁端可視化帶來了不小的挑戰。

Flask采用三層構架設計，擴展性極高，能輕松結合各種第三方庫，提高開發效率，使數據的訪問更加輕便［17］。Python本身具有大量的畫圖依賴庫，比如matplotlib、seaborn、PIL等。如果將數據用Python生成圖表后顯示到瀏覽器中，避免使用JavaScript去繪制圖表，任何稍微會使用Python生成圖表的人都可以輕松地將復雜圖形顯示到網頁上。

圖1所示是個簡單的Flask項目。執行圖1代碼之后，用瀏覽器打開網址http：//127.0.0.1∶5000即可獲得字符串Hello World。這使得用戶能夠用Python來處理各種數據，然后將結果顯示在網頁上，而不必額外學習JavaScript等動態網頁設計技術。

2" 網頁前后端交互技術

使用Flask的Jinja2模板引擎可以輕松地將動態數據嵌入網頁顯示，然后返回至前端進行顯示或者其他后續操作。而前端和后端發送數據請求的方式，主" 要分為GET和POST 2種。為了優化用戶體驗，不使每次小操作都需要刷新整個網頁，本文使用Ajax進行異步加載，盡量減少網頁整體無意義的刷新變化。為了簡化JavaScript的開發工作，本文引入jQuery庫，可以把Ajax的操作簡寫為圖2所示。

3" 系統運行流程與結果展示

本系統的流程分為以下幾步：（1）部署好Flask接口，準備接收用戶的輸入；（2）把用戶的輸入交由算法進行處理；（3）使用Python生成各種形式的結果，在網頁端顯示。整個流程如圖3所示。

3.1" 展示文本效果

定義一個路由，用來展示網頁內容。網頁中的一部分值是用Python計算后傳入的，這樣在網頁上顯示任意臨時值而不需要學習復雜的JavaScript編程（見圖4）。

3.2" 展示一般圖像

定義一個路由，使用Ajax向Flask提交參數。參數即seaborn數據集中的某個數據的名稱。然后Flask使用seaborn.relplot繪制輸入名稱數據集的折線圖，并將繪制結果顯示在網頁上。相關結果如圖5所示。

3.3" 展示特殊圖像

RDKit是一個用于化學信息處理的開源工具包，在Python環境下可以輕松地處理分子結構信息，進行分子表示、相似性比較、藥物設計等方面的數據處理［18］。Ajax提交分子的SMILES表達式給Flask路由，Flask調用Python環境下的RDKit包繪制分子式的結構圖并在網頁端顯示。Python繪圖代碼如圖6所示，分子結構圖在網頁端顯示效果如圖7所示。

4" 結語

藥物-靶標相互作用預測是人類探索藥物設計的

關鍵環節，對此研究的現有主流方法是深度學習。盡管深度學習模型在藥物發現方面展現了巨大潛力，但大型模型的復雜性和安全性問題使得其在實際應用中面臨挑戰。使用網頁服務的形式雖然可以盡量降低核心代碼泄露的風險，但是網頁形式的程序不便于進行深度學習的運算以及一些復雜圖像的可視化展示，導致難以對其他研究人員提供快速、完整的功能服務，限制了使用者的直觀理解和快速操作。

針對這些問題，本文提出了一種解決方案，對網頁部分保留盡可能少的功能設計，將計算和復雜圖形的繪制均交由Python來執行。Python擅長處理數據，又能靈活調用各種依賴包，讓網頁只負責數據的輸入和結果的輸出，其余操作全部由Python完成。以Flask構建輸入路由，用Jinja2模板控制圖像和文本等各種形式的結果顯示，大幅度降低了網頁服務的開發難度，并且無需專門的動態網頁設計技術即可在網頁端完整地顯示各種可視化圖表。

參考文獻

［1］謝佩錦.藥物靶標作用表示與預測方法研究［D］.哈爾濱：哈爾濱工業大學，2022.

［2］劉曉光，李梅.基于深度學習的藥物-靶標相互作

用預測研究綜述［EB/OL］.（2024-04-28）［2024-06-06］.http：//kns.cnki.net/kcms/detail/23.1538.TP.20240426.1801.002.html.

［3］任星，楊靜，張菀桐，等.基于網絡藥理學探討新冠肺炎初期用藥清肺排毒湯的作用機制［J］.世界中醫藥，2021（19）：2845-2850.

［4］劉京華，譚旺曉，王斯維，等.基于網絡藥理學探討葶藶大棗瀉肺湯治療新冠肺炎的作用機制［J］.山東科學，2020（5）：1-13.

［5］ZHANG T T，XUE R，WANG X，et al.Network-based drug repositioning：A novel strategy for discovering potential antidepressants and their mode of action［J］.European Neuropsychopharmacology，2018（10）：1-14.

［6］李雙星，李一昊，林志，等.藥物發現過程中人工智能的應用研究進展［J］.藥物評價研究，2023（9）：2030-2036.

［7］魏想想，孟朝暉.河海圖結構蛋白質數據集及預測模型［EB/OL］.（2024-03-18）［2024-06-06］.http：//kns.cnki.net/kcms/detail/50.1075.TP.20240316.1643.006.html.

［8］王鮮芳，王俊美，王曉雷，等.基于改進的MIMLSVM預測蛋白質功能［J］.信陽師范學院學報（自然科學版），2017（4）：642-646.

［9］WANG X F，WANG J M，WANG X L，et al.Predicting the types of ion channel targeted conotoxins based on AVCSVM model［J］.BioMed Research International，2017（2017）：18.

［10］LI S H，GUAN Z X，ZHANG D，et al.Recent advancement in predicting subcellular localization of mycobacterial protein with machine learning methods［J］.Medicinal Chemistry，2020（5）：605-619.

［11］李超，徐云龍，華中偉，等.一種基于Python Flask的Web服務器端設計［J］.信息與電腦（理論版），2019（8）：87-88.

［12］朱心洲，胡譽，蔣靖妍.基于QQ小程序和Flask的高校閑置物品信息平臺［J］.計算機系統應用，2020（9）：102-108.

［13］沃葉紅.基于Vue+Flask的圓極化天饋系統數據可視化與預警軟件的設計［J］.數字技術與應用，2023（2）：207-209，233.

［14］李相霏，韓珂.基于Flask框架的疫情數據可視化分析［J］.計算機時代，2021（12）：60-63，68.

［15］范路橋，高潔，段班祥.基于Python+Flask+ECharts的國內熱門旅游景點數據可視化系統［J］.現代電子技術，2023（9）：126-130.

［16］甘宇雨，余彥佳，劉勇.CBSG-PPI：基于圖神經網絡的蛋白質-蛋白質相互作用的預測算法［J］.基因組學與應用生物學，2024（2）：207-216.

［17］李超，徐云龍，華中偉，等.一種基于Python Flask的Web服務器端設計［J］.信息與電腦（理論版），2019（8）：87-88.

［18］林明德，韓偉杰，徐小賀，等.基于深度學習和多種機器學習算法預測人體細胞色素P450抑制劑活性［J］.中國藥科大學學報，2023（3）：333-343.

（編輯" 王雪芬）

Study on web-side display method based on Flask data visualization

WANG Xiaolei1，2， WANG Qianqing1，2， WANG Xianfang1，2

（1.Henan Institute of Technology， School of Computer Science and Technology， Xinxiang 453003， China;

2.Data Engineering Technology Research Center of Manufacturing Materials， Xinxiang 453003， China）

Abstract：" With the completion of the human genome project and the rapid advancement of proteomics， computer aided drug design has become a vital component in biopharmaceutical technology. Drug-target interactions are explored through deep learning， and visualization technology is effective for data visualization and data analysis. For the description given by web that there is difficult to run a complex calculation and draw intricate image， a solution is presented that Flask framework takes deep learning and all kinds of data-visualization into executing by Python， on the same time takes the easy input and output into web. It significantly reduces the programming difficulty of web data visualization， enabling the presentation of various visualization results on the web without advanced JavaScript skills.

Key words： data-visualization; Flask; machine learning; web design