前后端分離文本摘要系統的設計與實現*

藺晨齊

(北京信息科技大學計算機學院，北京 100101)

0 引言

隨著信息時代的不斷發展，文本數據也爆炸性的增長，文本信息過載問題越來越嚴重，給人們帶來了越來越大的負擔，對文本摘要進行“降維”處理就顯得越發重要，而文本摘要作為自然語言處理的一個重要領域，旨在對文本信息經過一系列算法處理后得到更簡潔關鍵的文本信息。因此本文設計實現了瀏覽器擴展程序前后端分離文本摘要系統，該系統主要利用了Flask和Ajax技術，以及TextRank[1]文本摘要算法。開發的目標是通實現一種文本摘要系統來提供一種思路，以促進文本摘要的實際應用，推動文本摘要領域成果的落地應用，開發宗旨的制定也應該以此為依據，為了便于推廣應用，這個系統應該具有：復用性，易用性，高效性的使用特點。而Chrome擴展程序[2]恰好能夠滿足這幾點要求，首先，Chrome瀏覽器具有較高的市場占有率，使用的人群足夠大，有利于摘要功能產品更好地推廣；其次Chrome瀏覽器擴展的開發已經比較成熟，開發的成果易于使用，符合易用性要求和高效性需求；同時應用場景也足夠廣泛，Chrome瀏覽器擴展程序除了Chrome瀏覽器之外，還可以在其他具有webkit瀏覽器引擎的瀏覽器上使用，如獵豹瀏覽器、百度瀏覽器、opera瀏覽器、QQ瀏覽器等，能夠滿足復用性的要求。

同時，之所以采用前后端分離的框架，是因為雖然大多瀏覽器擴展程序都采用JavaScript實現應用功能以便于打包上架應用商店，但是文本摘要這類人工智能分支領域，在Python各類算法庫以及Numpy這類科學計算庫的加持下有著天然的開發條件優勢[3]，因此本項目還是采用Python語言進行后端的實現，而由于Chrome瀏覽器擴展程序本身的特點與安全限制[4]，不便于調用本地項目文件中的Python腳本文件，因此以用戶本地作為媒介進行前后端連接，前端將摘要的文本內容寫入本地，后端從本地得到文本處理后再寫回本地，由前端再次獲取完成摘要的方案難以實現，于是我們采用了Ajax與Flask框架通過web服務完成前后端分離的方式越過這個問題，實現該應用系統。

由此得到的應用系統的意義在于，除了探索了文本摘要應用的另一條道路外，還將此系統的復用性進行了擴充，除了系統上層的應用實現了復用性外，該系統框架還可以在采用的算法上實現復用性，這也是前后端分離的特點所在，在后端進行局部的算法調整就可以嘗試不同的算法效果，有助于促進文本摘要算法的實際應用。

1 系統設計

前后端分離文本摘要系統是一個以Chrome瀏覽器擴展程序為主體，以待摘要的文本信息為輸入，以摘要信息為輸出的基于Flask框架，Ajax技術以及TextRank摘要算法實現的前后端分離的文本摘要系統。如圖1所示，前端是一個Chrome擴展程序的形式，包括用戶交互模塊，以及通信模塊，后端為一個web服務的web應用，同樣包括通信模塊，同時還有文本摘要模塊。

1.1 前端設計

前端框架以Chrome瀏覽器擴展程序的manifest.json配置文件為藍本進行設計與實現。manifest.json作為整個Chrome擴展程序最核心的文件，規定了整個擴展程序的配置內容，除了manifest_version、name、version三個必不可少的配置屬性外，還包括很多擴展功能所需的權限屬性，例如本項目中使用browser_action屬性中所包含的default_popup屬性，通過此屬性可以定義一個popup.html窗口與用戶進行交互，提升用戶的交互體驗，而popup.html想獲取摘要信息則需要在background屬性中通過JavaScript文件調用Ajax[5]與后端服務器端進行通信。

前端的界面設計主要集中在popup.html中，參考百度翻譯，谷歌翻譯等文本信息處理的瀏覽器處理擴展程序，html界面主要應該至少包括三個部分，輸入框，功能按鈕以及輸出框。

1.2 后端設計

后端則以Flask為框架進行搭建。主體的摘要算法端通過Python編寫，因此后端整體為了便于搭建框架也采用基于Python的Flask框架進行搭建，Flask是一個輕量級的可定制框架，較其他同類型框架更為靈活、輕便、安全且容易上手。它可以很好地結合MVC模式進行開發，開發人員分工合作，小型團隊在短時間內就可以完成功能豐富的中小型網站或Web服務的實現。

后端的核心算法是TextRank算法，該算法是脫胎于PageRank算法的一種抽取式無監督文本摘要算法。與PageRank[6]算法相比TextRank使用句子代替網頁，將每兩個句子之間的相似度都等同于網頁轉換概率，以句子為節點，相似度為邊，構建一張帶權圖，根據各節點臨邊的權重進行排序，最終得出全文中與其他句子關聯度最高的句子，作為摘要結果。

圖1 前后端系統示意圖

1.3 前后端通信設計

前后端通信的過程設計為，用戶將想要摘要的內容輸入輸入框內，點擊按鈕，觸發background屬性中調用Ajax的JavaScript的監聽事件，事件會獲取輸入框中的文本信息，通過Ajax交由后端處理，后端整體通過Flask框架中的Werkzeug庫搭建一個web服務以接收前端的請求信息，將摘要算法封裝成一個web應用等待調用，同時持續監聽web服務的端口，準備接收以及解析前端發送的請求和信息，解析成功后將得到的文本信息交由被封裝的web應用進行處理，最后將處理后的信息通過web服務返回給請求信息的前端頁面，由JavaScript通過Ajax獲得返回信息，將文本處理結果寫入之前隱藏起來的結果框中并顯示出來，完成整個摘要過程，在此基礎上進行各個模塊的具體實現。

2 系統實現

基礎環境配置：Chrome瀏覽器采用Chrome極速瀏覽器75.0.3770.100(開發者內部版本)(32位)，JavaScript版本為V8 7.5.288.22，為了方便Ajax技術的使用，采用jQuery框架[7]，使用此框架中封裝好的Ajax方法，版本為jQuery v3.5.1，Flask版本為1.1.2。

本文中的Chrome瀏覽器文本摘要擴展程序實現了兩種摘要形式。

一種是通過點擊在manifest.json的icons屬性中添加的應用圖標呼出popup.html窗口，窗口直接通過web開發工具進行編寫，實現了美觀、簡約的界面效果目標。如圖2所示，整體包括三個重要部分摘要內容框，摘要按鈕以及摘要結果框，用戶將希望進行摘要的文本內容寫入內容框，點擊“摘要”按鈕后在結果框中即可得到摘要結果。同時可以通過底端鏈接直接訪問本項目的GitHub頁面，此外需要注意，出于安全限制的原因popup.html中禁止使用script標簽編寫的css與js語句，需要盡可能使用外鏈樣式與js文件進行樣式設計與動態渲染。

二是在瀏覽器中選中文本后，直接通過右鍵在功能菜單內選擇摘要功能進行摘要，如圖3所示，摘要結果會通過瀏覽器提示窗口展示，該形式的摘要功能需要在manifest.json權限控制屬性permission中列出contextMenus即上下文菜單權限標簽才能完成，發出申請的JavaScript文件通過genericOnClick函數監聽右鍵菜單事件當事件觸發后，將瀏覽器中選中的文本通過Ajax向后端發出請求，并在返回時通過瀏覽器提示框展示出來。

同時本文采用本地服務器進行了測試，在將web服務器運行之前先確保Flask構造的web應用框架監聽的網絡端口與前端發送至的端口一致，在接收到前端信息之后，通過Flask構造的Web應用框架對摘要算法進行函數修飾，以此對摘要算法進行web應用化，通過Flask庫中自帶的json信息解析類對前端發送的json信息進行解析，將解析后的信息傳遞給web應用化的摘要算法進行處理，并返回處理后的摘要結果信息。

3 結語

本文旨在為文本摘要的應用探索更多可行的路線，目前的工作通過Ajax與Flask前后端分離的技術實現了本地的Chrome瀏覽器擴展程序功能，實現的兩種功能通過本地服務器能夠流暢的使用，能夠滿足的易用性與高效性以及框架層面算法復用的要求，但通過web服務實現的前后端分離結構，能否滿足應用程序復用性要求還需要在在服務區端投入一定資金成本，因此上線應用商店還需要進一步探索。

圖2 應用窗口摘要示意圖

圖3 鼠標右鍵摘要示意圖