句子語(yǔ)義圖顯示和查詢(xún)系統(tǒng)設(shè)計(jì)和實(shí)現(xiàn) 計(jì)算機(jī)科學(xué)與技術(shù)專(zhuān)業(yè)

目錄前言 5第一章緒論 61.1研究背景 61.2論文的內(nèi)容和意義 61.2.1論文的主要內(nèi)容 61.2.2論文的意義 61.3本文的組織結(jié)構(gòu) 7第二章技術(shù)綜述 82.1Python 82.2Flask 82.3Neo4j 82.3.1Neo4j簡(jiǎn)介 82.3.2Neo4j優(yōu)點(diǎn) 92.3.3Cypher語(yǔ)言語(yǔ)法簡(jiǎn)介 102.4JavaScript 102.5D3.js 112.5.1D3.js簡(jiǎn)介 112.5.2力導(dǎo)向圖 112.6Bootstrap樣式 12第三章需求分析 143.1功能性需求 143.2非功能性需求 14第四章系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì) 15第五章系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) 165.1系統(tǒng)整體設(shè)計(jì) 165.2數(shù)據(jù)處理及存儲(chǔ) 175.1.1數(shù)據(jù)分析 175.1.2結(jié)構(gòu)化存儲(chǔ) 185.2后端的搭建 195.3前端的數(shù)據(jù)可視化模塊 205.3.1網(wǎng)頁(yè)簡(jiǎn)介 205.3.2前端實(shí)現(xiàn)細(xì)節(jié) 21第六章總結(jié)與展望 246.1總結(jié) 246.2后續(xù)工作的展望 24參考文獻(xiàn) 26致謝 27 摘要 當(dāng)前有不少自然語(yǔ)言處理的科研工作都是以AMR即抽象語(yǔ)義表示的語(yǔ)法結(jié)構(gòu)為基礎(chǔ)的，即使用單根有向無(wú)環(huán)圖來(lái)表示一個(gè)句子的完整語(yǔ)義。本文的重點(diǎn)不在于研究AMR具體的語(yǔ)法，而是以AMR為研究背景，將特定AMR標(biāo)注格式的英語(yǔ)句子可視化為句子語(yǔ)義圖，通過(guò)Python進(jìn)行解析和處理后，存入Neo4j圖數(shù)據(jù)庫(kù)中，并搭建網(wǎng)站供用戶(hù)方便地進(jìn)行查詢(xún)。最后，將查詢(xún)句子的AMR語(yǔ)義結(jié)構(gòu)圖以D3.js的力導(dǎo)向圖的形式完整無(wú)誤地顯示在網(wǎng)頁(yè)上。關(guān)鍵詞：抽象語(yǔ)義表示；語(yǔ)義圖；Python；Neo4j圖數(shù)據(jù)庫(kù)；D3.js；力導(dǎo)向圖AbstractAtpresent,manyscientificresearchesonnaturallanguageprocessingarebasedonthegrammaticalstructureofAMR,namelyabstractsemanticrepresentation,whichistoexpressthesemanticsofasentencebyusingdirectedacyclicgraphwithasingleroot.ThefocusofthispaperisnottostudyspecificAMRsyntax,butwithAMRastheresearchbackgroundtovisualAMRsentencesemanticgraph.Firstly,parsingAMRcomplexoriginalannotationstructurewithPythonandsavingtheparsingresultsintoNeo4jgraphdatabase.Then,buildingwebsitesforuserqueryconveniently.Finally,AMRsemanticstructureofthequerysentenceinD3.jsforcedirectionfigurewilldisplayonthewebpagecompletelyandcorrectly.Keywords：AbstractSemanticRepresentation;SemanticGraph;Python;Neo4jgrapth-database;D3.js;Force 前言抽象語(yǔ)義表示(AbstractMeaningRepresentation,AMR)是一種近幾年國(guó)際上新興的語(yǔ)義表示結(jié)構(gòu)，它旨在對(duì)整個(gè)自然語(yǔ)言句子進(jìn)行語(yǔ)義表示，打破了傳統(tǒng)的句法樹(shù)結(jié)構(gòu)的局限性[1]。AMR將一個(gè)句子的語(yǔ)義抽象為一個(gè)含有單個(gè)根結(jié)點(diǎn)的有向無(wú)環(huán)圖，從而使得它可以不受限于句子的語(yǔ)法形式[1]。但不管對(duì)于專(zhuān)業(yè)還是非專(zhuān)業(yè)的人來(lái)說(shuō)，由AMR復(fù)雜的語(yǔ)法規(guī)則轉(zhuǎn)變得到的文本格式的句子看起來(lái)都非常地不直觀，尤其是對(duì)于單詞較多的句子而言，很難理清句子的結(jié)構(gòu)。所以，將根據(jù)AMR標(biāo)注得到的句子可視化為句子語(yǔ)義圖的工作，則成為了一個(gè)非常實(shí)際且有用的需求。語(yǔ)義圖可視化工作包括語(yǔ)義圖的生成、語(yǔ)義圖的存儲(chǔ)、語(yǔ)義圖顯示和查詢(xún)。存儲(chǔ)方面，使用近些年一種廣受歡迎圖數(shù)據(jù)庫(kù)neo4j，它可以很好的解決語(yǔ)義圖的存儲(chǔ)問(wèn)題；而顯示方面，以D3.js為首的一系列基于瀏覽器的前端數(shù)據(jù)庫(kù)可視化工具庫(kù)遠(yuǎn)遠(yuǎn)地超越了原始的圖形界面的客戶(hù)端程序，D3.js中的力導(dǎo)向圖Force更是可以完美地用于顯示語(yǔ)義圖。AMR句子語(yǔ)義圖顯示與查詢(xún)系統(tǒng)的軟件環(huán)境為：開(kāi)發(fā)工具：JetBrainsPyCharm2016.2.3,anaconda3開(kāi)發(fā)語(yǔ)言：python3數(shù)據(jù)庫(kù)：Neo4j前端：Javascript,D3.js后端：Flask第一章緒論1.1研究背景AMR（AbstractMeaningRepresentation，抽象語(yǔ)義表示）是一種新型的句子語(yǔ)義表示方式，由美國(guó)賓夕法尼亞大學(xué)的語(yǔ)言數(shù)據(jù)聯(lián)盟（LDC）、南加州大學(xué)、科羅拉多大學(xué)等科研機(jī)構(gòu)的多位學(xué)者共同提出[2]。并且開(kāi)發(fā)了一個(gè)較大規(guī)模的標(biāo)注語(yǔ)料庫(kù)，它由自然語(yǔ)言句子和與其對(duì)應(yīng)的用AMR形式表示的句子邏輯語(yǔ)義圖構(gòu)成[3]。AMR建立了統(tǒng)一的標(biāo)注規(guī)范，其簡(jiǎn)單可讀的特點(diǎn)方便人們理解，AMR表示的邏輯語(yǔ)義也方便計(jì)算機(jī)的處理[3]。雖然AMR形式表示的句子邏輯語(yǔ)義圖已比傳統(tǒng)的句法樹(shù)的格式更便于理解，但仍不夠直觀，復(fù)雜一點(diǎn)的甚至可能需要?jiǎng)邮之?huà)圖才能理清楚。所以，鑒于此背景，為了方便AMR相關(guān)的科研工作者能夠快速理清AMR句子的結(jié)構(gòu)，節(jié)省時(shí)間而不再為不夠直觀的邏輯結(jié)構(gòu)所紛擾，甚至可以快速查詢(xún)并顯示含有相關(guān)關(guān)鍵字的句子語(yǔ)義結(jié)構(gòu)圖以提高AMR工作的效率，便設(shè)計(jì)了該AMR句子語(yǔ)義圖顯示與查詢(xún)系統(tǒng)。1.2論文的內(nèi)容和意義1.2.1論文的主要內(nèi)容本文主要介紹AMR句子語(yǔ)義圖顯示與查詢(xún)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，重點(diǎn)在于原始數(shù)據(jù)的處理和存儲(chǔ)以及如何實(shí)現(xiàn)數(shù)據(jù)可視化，主要包括技術(shù)綜述、需求分析、數(shù)據(jù)庫(kù)設(shè)計(jì)和系統(tǒng)前后端的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)。1.2.2論文的意義本系統(tǒng)設(shè)計(jì)的重點(diǎn)之一在于數(shù)據(jù)的可視化。對(duì)于人類(lèi)的大腦，直觀的圖形圖像相比于枯燥的文本信息而言，要容易處理許多。尤其是面對(duì)使用單純的文本來(lái)表示的復(fù)雜結(jié)構(gòu)信息，如樹(shù)、圖等數(shù)據(jù)結(jié)構(gòu)，一般人的大腦想要快速地在腦海中把這些結(jié)構(gòu)重現(xiàn)出來(lái)是非常困難的。而且隨著數(shù)據(jù)規(guī)模的不斷增大，這種無(wú)法緩和的問(wèn)題還會(huì)進(jìn)一步加劇。在如今這個(gè)快速發(fā)展的科技時(shí)代，把復(fù)雜且不直觀的數(shù)據(jù)用人類(lèi)易于理解、接收的方式呈現(xiàn)出來(lái)，對(duì)于一個(gè)直面用戶(hù)的軟件系統(tǒng)而言，已經(jīng)成為非常必須、不可或缺的功能。AMR本身的標(biāo)注文本對(duì)讀者而言，帶有大量增加閱讀理解負(fù)擔(dān)的“冗余”信息，例如結(jié)點(diǎn)的代號(hào)信息、用以維持結(jié)點(diǎn)之間相互關(guān)系的括號(hào)和冒號(hào)等等。同時(shí)，通過(guò)文本對(duì)齊、括號(hào)匹配的方式來(lái)尋找父子結(jié)點(diǎn)或兄弟結(jié)點(diǎn)以確定結(jié)點(diǎn)之間的關(guān)系，也是非常吃力的。本系統(tǒng)便在AMR標(biāo)注句子的閱讀和理解等方面提供了非常大的幫助。目前，雖然先后有多種不同的AMR解析算法被提出，但對(duì)AMR解析算法的研究仍處于初級(jí)發(fā)展階段，性能都還相對(duì)較低。事實(shí)上，本系統(tǒng)的設(shè)計(jì)充當(dāng)?shù)氖腔缘淖饔?，它可以為更深層次的AMR算法研究工作提供良好的視覺(jué)基礎(chǔ)，對(duì)提高工作的效率等各方面都有一定的幫助。而且，現(xiàn)在還沒(méi)有類(lèi)似像本句子語(yǔ)義圖顯示與查詢(xún)系統(tǒng)這樣完整的網(wǎng)頁(yè)或相關(guān)的產(chǎn)品，是一個(gè)很不錯(cuò)的創(chuàng)新點(diǎn)?？傊敬萎厴I(yè)設(shè)計(jì)有著較重要的研究意義。1.3本文的組織結(jié)構(gòu)本文共分為六章，每章對(duì)應(yīng)的內(nèi)容概要如下：第一章：緒論，介紹本系統(tǒng)設(shè)計(jì)的研究背景、論文的主要內(nèi)容和研究意義。第二章：技術(shù)綜述，展示系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)過(guò)程中應(yīng)用的重要技術(shù)及其相關(guān)知識(shí)簡(jiǎn)介。第三章：需求分析，闡述系統(tǒng)的功能性需求和非功能性需求。第四章：系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)，闡明數(shù)據(jù)庫(kù)設(shè)計(jì)模式和結(jié)構(gòu)。第五章：系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)，介紹設(shè)計(jì)細(xì)節(jié)，主要包括數(shù)據(jù)處理及存儲(chǔ)、網(wǎng)站搭建和實(shí)現(xiàn)數(shù)據(jù)可視化。第六章：總結(jié)與展望，對(duì)本次畢業(yè)設(shè)計(jì)進(jìn)行總結(jié)，并對(duì)可改進(jìn)之處進(jìn)行展望。第二章技術(shù)綜述2.1PythonPython是一門(mén)成熟且優(yōu)秀的腳本語(yǔ)言，其中含有大量好用的內(nèi)置函數(shù)，同時(shí)，也可以方便地安裝和使用第三方庫(kù)和包，所以，很多人也稱(chēng)它為“膠水語(yǔ)言”。在我眼里，它很“萬(wàn)能”，可用于進(jìn)行快速便捷的數(shù)據(jù)處理、網(wǎng)絡(luò)爬蟲(chóng)、科學(xué)計(jì)算、Web開(kāi)發(fā)、人工智能等等，可以說(shuō)是無(wú)處不在。同時(shí)，相比于其他的編譯型語(yǔ)言如c或java，Python作為解釋型語(yǔ)言具有輕量級(jí)、易調(diào)試、易添加模塊等諸多優(yōu)勢(shì)。2.2Flask\hFlask是一個(gè)使用Python編寫(xiě)的網(wǎng)站后端框架，使用了MVC架構(gòu)，在保持了靈活、自由、可擴(kuò)展性強(qiáng)的特點(diǎn)的同時(shí)，也具備功能齊全、性能強(qiáng)大的特點(diǎn)。其中，F(xiàn)lask最大的特點(diǎn)是支持用戶(hù)為系統(tǒng)添加各類(lèi)插件，比如Flask自帶了Jinjia2的模板解析插件，而用戶(hù)可以根據(jù)需求靈活地進(jìn)行替換。對(duì)于個(gè)人開(kāi)發(fā)者而言，F(xiàn)lask能支持快速地構(gòu)建起一個(gè)完善的后端應(yīng)用；而在應(yīng)對(duì)大型工程時(shí)，F(xiàn)lask也可以用模塊化的方式進(jìn)行開(kāi)發(fā)，具有很大的潛力。2.3Neo4j2.3.1Neo4j簡(jiǎn)介圖形數(shù)據(jù)庫(kù)（GraphDatabase）是NoSQL數(shù)據(jù)庫(kù)家族中特殊的存在，用于存儲(chǔ)豐富的關(guān)系數(shù)據(jù)，Neo4j是目前最流行的圖形數(shù)據(jù)庫(kù)，支持完整的事務(wù)[4]。在屬性圖中，圖是由頂點(diǎn)（Vertex）、邊（Edge）和屬性（Property）組成的，頂點(diǎn)和邊都可以設(shè)置屬性，頂點(diǎn)也稱(chēng)作結(jié)點(diǎn)，邊也稱(chēng)作關(guān)系，每個(gè)結(jié)點(diǎn)和關(guān)系都可以由一個(gè)或多個(gè)屬性[4]。如圖2-1和圖2-2所示，它們之間的關(guān)系為：圖2-1的文本經(jīng)處理解析存儲(chǔ)到Neo4j數(shù)據(jù)庫(kù)中得到圖2-2。圖2-1標(biāo)注文本樣例圖2-2Neo4j數(shù)據(jù)庫(kù)中圖的樣例Neo4j優(yōu)點(diǎn)具有更快的數(shù)據(jù)庫(kù)操作。當(dāng)然，前提條件是數(shù)據(jù)量要較大；Neo4j使用Cypher來(lái)執(zhí)行數(shù)據(jù)庫(kù)的操作指令，而且自帶一個(gè)便捷的圖形顯示模塊，可以非常直觀的進(jìn)行調(diào)試與管理；靈活性更強(qiáng)。Neo4j的內(nèi)部存儲(chǔ)形式類(lèi)似于Redis等nosql數(shù)據(jù)庫(kù)，是基于json格式的鍵值對(duì)，存儲(chǔ)非常簡(jiǎn)單直觀。相比之下，mysql中則需創(chuàng)建大量的表，還要考慮和其他表的約束關(guān)系；數(shù)據(jù)庫(kù)操作的速度并不會(huì)隨著數(shù)據(jù)庫(kù)的增大有明顯的降低。這得益于Neo4j特殊的數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)和專(zhuān)門(mén)優(yōu)化的圖算法。Neo4j對(duì)于圖的存儲(chǔ)自然是經(jīng)過(guò)特別優(yōu)化的，不像傳統(tǒng)數(shù)據(jù)庫(kù)的一條記錄一條數(shù)據(jù)的存儲(chǔ)方式，Neo4j的存儲(chǔ)方式是：結(jié)點(diǎn)的類(lèi)別，屬性，邊的類(lèi)別，屬性等都是分開(kāi)存儲(chǔ)的，這將大大有助于提高圖形數(shù)據(jù)庫(kù)的性能[5]。2.3.3Cypher語(yǔ)言語(yǔ)法簡(jiǎn)介本節(jié)主要介紹一些較常用的簡(jiǎn)單cypher語(yǔ)法并給出樣例。（1）創(chuàng)建結(jié)點(diǎn)Neo4j創(chuàng)建結(jié)點(diǎn)十分簡(jiǎn)單，只需在創(chuàng)建結(jié)點(diǎn)時(shí)指定結(jié)點(diǎn)的類(lèi)型與屬性，而不需要?jiǎng)?chuàng)建任何的表或模式，同時(shí)，Neo4j會(huì)自動(dòng)為結(jié)點(diǎn)分配一個(gè)唯一的主鍵id。下面的Cypher查詢(xún)創(chuàng)建一個(gè)結(jié)點(diǎn)，標(biāo)簽是Word，具有兩個(gè)屬性code和content，通過(guò)RETURN子句，返回新建的結(jié)點(diǎn)：create(n:Word{code:'c',content:"comfortable"})returnn;（2）查詢(xún)結(jié)點(diǎn)通過(guò)match子句來(lái)查詢(xún)數(shù)據(jù)庫(kù)。在查詢(xún)時(shí)，也可以添加各類(lèi)約束條件，如結(jié)點(diǎn)的類(lèi)型或?qū)傩缘龋€可以添加where子句來(lái)構(gòu)造更加復(fù)雜的查詢(xún)條件。以圖2-2為例，其對(duì)應(yīng)的查詢(xún)語(yǔ)句為：match(n:Word)wheren.line_id="bolt12_10511_6782.13"returnn;（3）刪除結(jié)點(diǎn)以刪除所有Word類(lèi)型的結(jié)點(diǎn)為例，對(duì)應(yīng)的Cypher語(yǔ)句如下：Match(n:Word)detachdeleten;2.4JavaScriptJavascript是一種基于對(duì)象和事件\h驅(qū)動(dòng)開(kāi)發(fā)并具有相對(duì)安全性的客戶(hù)端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶(hù)端web開(kāi)發(fā)的腳本語(yǔ)言，可以嵌入到html頁(yè)面中，由來(lái)瀏覽器來(lái)解釋執(zhí)行，用來(lái)實(shí)現(xiàn)瀏覽器和用于交互[6]。常用來(lái)給html網(wǎng)頁(yè)添加動(dòng)態(tài)功能，響\h應(yīng)用戶(hù)的各種操作[6]。2.5D3.js2.5.1D3.js簡(jiǎn)介D3.js的全稱(chēng)是Data-DrivenDocuments，即數(shù)據(jù)驅(qū)動(dòng)文檔，是一個(gè)用JavaScript來(lái)編寫(xiě)的數(shù)據(jù)可視化框架[7]。D3.js的實(shí)現(xiàn)遵照了基本的Web標(biāo)準(zhǔn)，所以，D3.js可以在不依賴(lài)特定框架的情況下，充分利用現(xiàn)代瀏覽器的功能，將強(qiáng)大的可視化組件和數(shù)據(jù)驅(qū)動(dòng)的方法結(jié)合到最基本的DOM操作中。D3.js操作簡(jiǎn)潔明了，只需要對(duì)函數(shù)式編程略有了解就可以簡(jiǎn)單完成基本圖像的繪制。D3.js可制作的圖有多種，例如常見(jiàn)的柱狀圖(Histogram)、餅狀圖（Pie），除此以外還有集群圖（Cluster）、樹(shù)狀圖(Tree)、力導(dǎo)向圖（Force）、分區(qū)圖（Partition）等等。2.5.2力導(dǎo)向圖圖2-3本系統(tǒng)中力導(dǎo)向圖的顯示樣例本次顯示與查詢(xún)系統(tǒng)的設(shè)計(jì)中的圖便使用的是力導(dǎo)向圖，也稱(chēng)力學(xué)圖，如圖2-3所示，其在社交網(wǎng)絡(luò)研究、信息傳播途徑等群體關(guān)系研究中應(yīng)用非常廣泛，它可以直觀地反映群體與群體之間聯(lián)系的渠道、交集多少，群體內(nèi)部成員的聯(lián)系強(qiáng)度等。它在二維或三維空間里配置結(jié)點(diǎn)，結(jié)點(diǎn)之間用線(xiàn)連接，稱(chēng)為連線(xiàn)，各連線(xiàn)的長(zhǎng)度幾乎相等，且盡可能不相交[8]。結(jié)點(diǎn)和連線(xiàn)都被施加了力的作用，力是根據(jù)結(jié)點(diǎn)和連線(xiàn)的相對(duì)位置計(jì)算的，然后根據(jù)力的作用，來(lái)計(jì)算結(jié)點(diǎn)和連線(xiàn)的運(yùn)動(dòng)軌跡，并不斷降低它們的能量，最終達(dá)到一種能量很低的安定狀態(tài)[8]。我的理解是力導(dǎo)向圖中的各個(gè)結(jié)點(diǎn)類(lèi)似于宇宙中的星球，它們相互之間本身具有一定的斥力，同時(shí)，也具有一定的引力，也就是結(jié)點(diǎn)之間的連線(xiàn)，斥力和引力平衡時(shí)便可達(dá)到穩(wěn)定的狀態(tài)。力導(dǎo)向圖具有很強(qiáng)的交互性，結(jié)點(diǎn)可以進(jìn)行隨意的拖拽，稍微地拖拽幾下，便可伸展為清晰結(jié)構(gòu)的圖像，非常神奇，同時(shí)，可操作性和靈活性都很強(qiáng)，十分適合用于顯示AMR句子語(yǔ)義圖。2.6Bootstrap樣式Bootstrap是一個(gè)用于快速開(kāi)發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，其基于html、CSS和Javascript。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，簡(jiǎn)潔靈活，使得Web開(kāi)發(fā)更加快捷[9]。當(dāng)前主流的小型網(wǎng)站開(kāi)發(fā)為了能適應(yīng)快速開(kāi)發(fā)、快速迭代的需求，減少非核心開(kāi)發(fā)的成本，把更多寶貴的人力資源利用在網(wǎng)站功能性需求的同時(shí)，又能滿(mǎn)足用戶(hù)的審美需求，所以，大多數(shù)都會(huì)使用一些前端框架或者前端庫(kù)。而B(niǎo)ootstrap就是由FaceBook開(kāi)發(fā)并開(kāi)源的一套廣受歡迎的前端樣式庫(kù)。由于使用了Bootstrap，本系統(tǒng)在開(kāi)發(fā)的過(guò)程中大大減少了修飾網(wǎng)站外觀的工作量，并到滿(mǎn)足了較為美觀流暢的設(shè)計(jì)目的。本系統(tǒng)主要使用了Bootstrap的如下幾個(gè)功能：輸入組件（inputgroup）、表格（table）、區(qū)塊（div）等頁(yè)面元素（element）的樣式美化：主要使用方法為根據(jù)BootStrap的文檔，為對(duì)應(yīng)的元素添加或修改合適的屬性，如<divclass="card-body">意指將一個(gè)div標(biāo)記為card-body類(lèi)型的組件，在滿(mǎn)足合適的條件下，引入的bootstrap.js文件會(huì)自動(dòng)為此div來(lái)修正樣式，而不用人為編寫(xiě)大量的css規(guī)則。頁(yè)面布局（Layout）的自動(dòng)調(diào)整：Bootstrap內(nèi)部實(shí)現(xiàn)了一套復(fù)雜而強(qiáng)大的頁(yè)面布局邏輯控制系統(tǒng)，Bootstrap將其稱(chēng)為柵格系統(tǒng)（Grid）。對(duì)使用者來(lái)說(shuō)，此系統(tǒng)簡(jiǎn)單易用且非常靈活。本系統(tǒng)使用了柵格系統(tǒng)來(lái)完成了頁(yè)面布局的控制，提供了在不同尺寸的設(shè)備上依舊能基本保持原有頁(yè)面樣式，頁(yè)面元素自動(dòng)適應(yīng)設(shè)備屏幕尺寸的特性。具體原理為在頁(yè)面中中定義一個(gè)Bootstrap指定類(lèi)型的容器（Container），在容器內(nèi)的元素使用合適的尺寸控制標(biāo)記如col-sm，mb-3等來(lái)完成元素在柵格系統(tǒng)內(nèi)的布局，而B(niǎo)ootstrap會(huì)為不同設(shè)備的屏幕自動(dòng)適應(yīng)整個(gè)柵格系統(tǒng)，這就避免了開(kāi)發(fā)者為元素來(lái)指定固定的樣式。第三章需求分析為了開(kāi)發(fā)出盡可能滿(mǎn)足用戶(hù)需求的系統(tǒng)，在開(kāi)發(fā)之前，必須對(duì)系統(tǒng)的各個(gè)功能進(jìn)行詳細(xì)的需求分析，只有有了明確的需求分析結(jié)果之后，才能進(jìn)行下一步詳細(xì)的系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)。3.1功能性需求數(shù)據(jù)處理：將數(shù)據(jù)采用合適的方式進(jìn)行解析，提取出結(jié)點(diǎn)的content、結(jié)點(diǎn)之間的關(guān)系及其他有用的信息，如句子的line_id、結(jié)點(diǎn)的code即結(jié)點(diǎn)中存儲(chǔ)內(nèi)容的代號(hào)等。其中，特殊情況的結(jié)點(diǎn)選擇另外進(jìn)行處理。數(shù)據(jù)存儲(chǔ)：將解析后的結(jié)果以圖的結(jié)構(gòu)存儲(chǔ)到Neo4j圖數(shù)據(jù)庫(kù)中，供后續(xù)網(wǎng)站后端使用。后端：用Flask搭建網(wǎng)站后端，給D3.js提供數(shù)據(jù)查詢(xún)的接口，并提供面向用戶(hù)的Web服務(wù)。前端：即數(shù)據(jù)可視化模塊，需要根據(jù)用戶(hù)的請(qǐng)求申請(qǐng)調(diào)用數(shù)據(jù)查詢(xún)的接口，然后將數(shù)據(jù)查詢(xún)的結(jié)果渲染為可視化的效果。3.2非功能性需求（1）性能需求：用戶(hù)使用本軟件的的目的是對(duì)AMR語(yǔ)句進(jìn)行可視化，是用于輔助的演示型軟件，對(duì)時(shí)間性能并沒(méi)有很高的要求，只要求數(shù)據(jù)的查詢(xún)及顯示過(guò)程中沒(méi)有明顯的遲滯感。就當(dāng)前數(shù)據(jù)集，甚至更多的數(shù)據(jù)集而言，若用戶(hù)的網(wǎng)絡(luò)正常，則要求查詢(xún)操作的延時(shí)基本小于100ms。數(shù)據(jù)可視化的操作延時(shí)基本小于200ms以達(dá)到流暢操作的體驗(yàn)需求。（2）運(yùn)行環(huán)境要求：要求軟件占用空間少，盡量少的依賴(lài)其他的運(yùn)行環(huán)境及軟件。（3）界面設(shè)計(jì)需求：簡(jiǎn)潔明了，突出顯示與查詢(xún)的需求重點(diǎn)，使用戶(hù)不需要額外的引導(dǎo)便可進(jìn)行操作。第四章系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)使用Neo4j進(jìn)行數(shù)據(jù)庫(kù)設(shè)計(jì)時(shí)，并不需要建立大量的表，只需創(chuàng)建結(jié)點(diǎn)和關(guān)系即可。本次系統(tǒng)設(shè)計(jì)的結(jié)點(diǎn)含有的信息有：創(chuàng)建結(jié)點(diǎn)時(shí)自動(dòng)生成的唯一的id、結(jié)點(diǎn)內(nèi)存儲(chǔ)的單詞content、content的代號(hào)code、單詞所屬的句子的line_id及結(jié)點(diǎn)的type（表示該結(jié)點(diǎn)是正常結(jié)點(diǎn)還是特殊結(jié)點(diǎn)），如圖4-1所示。關(guān)系含有的信息有創(chuàng)建關(guān)系時(shí)自動(dòng)生成的唯一的id、關(guān)系的內(nèi)容type及關(guān)系所屬的句子的line_id，如圖4-2所示。圖4-1結(jié)點(diǎn)信息樣例圖4-2關(guān)系信息樣例第五章系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)5.1系統(tǒng)整體設(shè)計(jì)系統(tǒng)整體流程設(shè)計(jì)如下：如圖5-1，用戶(hù)輸入一些感興趣的關(guān)鍵詞，系統(tǒng)返回包含這些關(guān)鍵詞的句子列表。圖5-1關(guān)鍵詞查詢(xún)流程圖如圖5-2，用戶(hù)從句子列表中選擇某條感興趣的句子，系統(tǒng)將句子的AMR語(yǔ)義圖以力導(dǎo)向圖的方式顯示在網(wǎng)站上。圖5-2AMR結(jié)構(gòu)查詢(xún)流程圖5.2數(shù)據(jù)處理及存儲(chǔ)本節(jié)主要講述使用Python進(jìn)行數(shù)據(jù)的讀取、處理、分析及存儲(chǔ)的相關(guān)細(xì)節(jié)。5.1.1數(shù)據(jù)分析原始數(shù)據(jù)由外部提供，都是以AMR語(yǔ)法規(guī)則標(biāo)注的英語(yǔ)句子。其樣例如下：#::idbolt12_10489_5932.3::date2012-12-09T14:30:42::annotatorSDL-AMR-09::preferred#::sntAslongaswesticktothisissue,Xinghuisurelyhasnowayofwinningthelawsuitifitgoestocourt.#::save-dateFriNov8,2013::filebolt12_10489_5932_3.txt(s/sure:domain(h/have-03:polarity-:ARG0(c/company:name(n/name:op1"Xinghui")):ARG1(w2/way:instrument-of(w3/win-01:ARG0c:ARG1(l2/lawsuit))):condition(g/go-01:ARG1l2:ARG4(c2/court))):condition(a/as-long-as:op1(s2/stick-01:ARG1(w/we):ARG2(i/issue:mod(t/this)))))其中以#開(kāi)頭的為注釋部分，包含了句子id及句子原內(nèi)容snt的有效信息；以左括號(hào)(開(kāi)頭的部分表示一個(gè)單詞結(jié)點(diǎn)的定義，如(s/sure表示了一個(gè)代號(hào)為s的單詞結(jié)點(diǎn)，結(jié)點(diǎn)的內(nèi)容為sure；以冒號(hào):開(kāi)始的部分表示了一個(gè)關(guān)系，如(w2/way和:instrument-of(w3/win-01表示代號(hào)為w2的結(jié)點(diǎn)way對(duì)代號(hào)為w3的結(jié)點(diǎn)win-01具有instrument-of的語(yǔ)法關(guān)系；（4）其中有一些特殊的情況需要闡明：若一個(gè)結(jié)點(diǎn)被完整地定義過(guò)，如(s/sure，則在后面可能出現(xiàn)一個(gè)單獨(dú)的代號(hào)s來(lái)指代這個(gè)已經(jīng)出現(xiàn)過(guò)的結(jié)點(diǎn)，我們將稱(chēng)其為“代號(hào)結(jié)點(diǎn)”，也就是說(shuō)同一個(gè)單詞結(jié)點(diǎn)不會(huì)在同一句話(huà)中被定義兩次；有些單詞結(jié)點(diǎn)是用字面量表示的，沒(méi)有相應(yīng)的代號(hào)，只有相應(yīng)的內(nèi)容，如樣例中的"Xinghui"和:polarity–，另外，還有定義數(shù)字項(xiàng)的字面量，如:quant1000。這些單詞不存在單獨(dú)的定義，單詞的代號(hào)即是它的內(nèi)容，我們我們將其稱(chēng)為“字面結(jié)點(diǎn)”。5.1.2結(jié)構(gòu)化存儲(chǔ)本節(jié)提出了兩種方法來(lái)進(jìn)行數(shù)據(jù)的結(jié)構(gòu)化存儲(chǔ)，分別是：多次提取的方式和使用棧的方式。1．多次提取的方式，具體實(shí)現(xiàn)流程如下：讀取一個(gè)段落，即一句完整的AMR語(yǔ)義標(biāo)注結(jié)構(gòu)；提取出所有特殊的結(jié)點(diǎn)（代號(hào)結(jié)點(diǎn)和字面結(jié)點(diǎn)）及包含特殊結(jié)點(diǎn)的關(guān)系，進(jìn)行暫時(shí)的存儲(chǔ)。這樣做的原因如下：特殊結(jié)點(diǎn)如果為“代號(hào)結(jié)點(diǎn)”，則此結(jié)點(diǎn)必定已被定義過(guò)，此時(shí)，應(yīng)等待此結(jié)點(diǎn)的完整定義被存儲(chǔ)后再進(jìn)行存儲(chǔ)；提取所有的正常結(jié)點(diǎn)及正常關(guān)系；先對(duì)提取出的正常結(jié)點(diǎn)及關(guān)系進(jìn)行存儲(chǔ)，再對(duì)特殊的結(jié)點(diǎn)及關(guān)系進(jìn)行存儲(chǔ)。其中，特殊結(jié)點(diǎn)的存儲(chǔ)需注意：存儲(chǔ)前，應(yīng)先檢查此結(jié)點(diǎn)的代號(hào)是否已被存儲(chǔ)，若已被存儲(chǔ)則說(shuō)明此結(jié)點(diǎn)是代號(hào)結(jié)點(diǎn)，無(wú)需再次存儲(chǔ)；若代號(hào)未被存儲(chǔ)，則說(shuō)明此結(jié)點(diǎn)是字面結(jié)點(diǎn)，需要被存儲(chǔ)。2．使用棧的方式，具體實(shí)現(xiàn)流程如下：讀取一個(gè)段落，即一句完整的AMR語(yǔ)義標(biāo)注結(jié)構(gòu)；順序讀?。蝗糇x取到關(guān)系，則將關(guān)系入棧；每次讀取到一個(gè)結(jié)點(diǎn)的定義p；則在數(shù)據(jù)庫(kù)新建結(jié)點(diǎn)p；然后檢查棧頂是否有一條未出棧的關(guān)系arg；若有棧頂有一條關(guān)系，則將此關(guān)系出棧，再讀取棧頂?shù)囊粋€(gè)結(jié)點(diǎn)p',并在數(shù)據(jù)庫(kù)內(nèi)添加一條新的記錄(p',arg,p)，并將此結(jié)點(diǎn)p入棧；若棧頂沒(méi)有關(guān)系，則將此結(jié)點(diǎn)入棧；每次讀取到特殊結(jié)點(diǎn)，檢查此結(jié)點(diǎn)的代號(hào)是否已存在數(shù)據(jù)庫(kù)中,若存在則跳轉(zhuǎn)到（6）；若代號(hào)不存在數(shù)據(jù)庫(kù)中，則此結(jié)點(diǎn)是字面結(jié)點(diǎn)，則跳轉(zhuǎn)到（4）。5.2后端的搭建本設(shè)計(jì)的目標(biāo)是建立一個(gè)AMR句子語(yǔ)義圖顯示與查詢(xún)系統(tǒng)，系統(tǒng)必須要有“數(shù)據(jù)顯示”與“數(shù)據(jù)查詢(xún)”這兩個(gè)核心的功能。綜合考慮，有兩種實(shí)現(xiàn)方式：第一，基于web的顯示與查詢(xún)系統(tǒng)第二，基于客戶(hù)端的顯示與查詢(xún)系統(tǒng)相比于基于客戶(hù)端的系統(tǒng)而言，基于Web的系統(tǒng)沒(méi)有任何安裝成本，只需要通過(guò)瀏覽器上網(wǎng)便可以使用軟件。其次，web端實(shí)現(xiàn)數(shù)據(jù)可視化實(shí)現(xiàn)成本更低和易于調(diào)試，市面上的主流實(shí)現(xiàn)方式都是web端。同時(shí)，web系統(tǒng)的維護(hù)相對(duì)于傳統(tǒng)軟件更簡(jiǎn)單，因?yàn)槌绦蛉窟\(yùn)行在webserver上，有任何問(wèn)題了，可以快速定位[10]。而傳統(tǒng)的軟件是運(yùn)行在客戶(hù)的機(jī)器上的，需要收集需要的信息才能夠分析定位[11]?？偟膩?lái)說(shuō)，web程序更靈活，更方便，更易用。后端采用Python的輕量級(jí)網(wǎng)站框架Flask，F(xiàn)lask自由、靈活，可擴(kuò)展性強(qiáng)，可用的第三方庫(kù)豐富，十分適用于制作小型網(wǎng)站。后端向前端提供了三個(gè)接口，分別是：GET/，無(wú)參數(shù)，用于向用戶(hù)提供基本的網(wǎng)站主頁(yè)面index.html；GET/snts，參數(shù)為words，功能為根據(jù)接收到的words即關(guān)鍵詞列表，根據(jù)每個(gè)關(guān)鍵詞在數(shù)據(jù)庫(kù)內(nèi)進(jìn)行包含查詢(xún)，查詢(xún)得到句子的id與內(nèi)容，最后將結(jié)果取交集并返回給用戶(hù)，供用戶(hù)選擇感興趣的句子進(jìn)行AMR語(yǔ)義圖顯示；GET/graph，參數(shù)為line_id，功能為根據(jù)收到的句子id，向數(shù)據(jù)庫(kù)查詢(xún)此句子的AMR語(yǔ)義圖結(jié)構(gòu)信息，格式化為d3.js所需要的數(shù)據(jù)格式后返回。5.3前端的數(shù)據(jù)可視化模塊5.3.1網(wǎng)頁(yè)簡(jiǎn)介整體網(wǎng)站效果如圖5-3所示：圖5-3系統(tǒng)查詢(xún)與顯示樣例前端數(shù)據(jù)可視化模塊分為查詢(xún)模塊與顯示模塊，使用流行的瀏覽器腳本語(yǔ)言JavaScript來(lái)編寫(xiě)，控制整體頁(yè)面與用戶(hù)的交互邏輯。查詢(xún)模塊主要包括頂部的查詢(xún)輸入框與左側(cè)的查詢(xún)語(yǔ)句結(jié)果列表。其中，如圖5-3所示，查詢(xún)關(guān)鍵字在結(jié)果列表中用紅色標(biāo)注突出，光標(biāo)所選句子用高亮突出。用鼠標(biāo)點(diǎn)擊結(jié)果列表中的句子，便可在右側(cè)SVG圖框中顯示出選擇的句子對(duì)應(yīng)的AMR語(yǔ)義結(jié)構(gòu)圖；數(shù)據(jù)顯示模塊主要是中間的SVG圖框，如圖5-4所示，結(jié)點(diǎn)的差異性用不同的顏色來(lái)顯示區(qū)分，其中，頭結(jié)點(diǎn)為紅色，正常結(jié)點(diǎn)為藍(lán)色，特殊結(jié)點(diǎn)為綠色，使語(yǔ)義圖的結(jié)構(gòu)更加清晰；另外，將鼠標(biāo)放置在某結(jié)點(diǎn)或關(guān)系上時(shí)，結(jié)點(diǎn)或關(guān)系上內(nèi)容的字體會(huì)適量放大，可幫助用戶(hù)方便地查看，同時(shí)也提高了系統(tǒng)的友好性和交互性。圖5-4SVG圖框5.3.2前端實(shí)現(xiàn)細(xì)節(jié)輸入框：在輸入框上綁定了鍵盤(pán)事件監(jiān)聽(tīng)器，每當(dāng)對(duì)輸入框有回車(chē)鍵被按下，就等同于按下查詢(xún)按鈕，很好地提升了用戶(hù)的使用體驗(yàn)。查詢(xún)按鈕：在查詢(xún)按鈕上綁定了click事件的監(jiān)聽(tīng)器，每當(dāng)查詢(xún)按鈕被按下時(shí)，獲取輸入框中的內(nèi)容，并使用ajax向后臺(tái)構(gòu)造并發(fā)送查詢(xún)請(qǐng)求。若無(wú)返回結(jié)果，則用彈出頁(yè)面警告框的方式告知用戶(hù)。圖5-5查詢(xún)失敗提示框在查詢(xún)請(qǐng)求的回調(diào)函數(shù)中，對(duì)收到的查詢(xún)結(jié)果列表進(jìn)行解析，并在左側(cè)的列表中把結(jié)果逐一添加至table的tbody中；若查詢(xún)結(jié)果為空，即沒(méi)有含有所輸關(guān)鍵詞的AMR語(yǔ)句時(shí)，則在網(wǎng)頁(yè)上方跳出如圖5-5所示的提示框，以提示用戶(hù)進(jìn)行重新輸入。為了能夠讓用戶(hù)能更加清晰地看到自己想要查詢(xún)的內(nèi)容，則在添加結(jié)果的過(guò)程中，對(duì)每個(gè)結(jié)果進(jìn)行渲染，即使用正則表達(dá)式匹配查詢(xún)的關(guān)鍵詞。最后效果如圖5-6所示，我做了如下的優(yōu)化性工作：首先，將匹配的詞語(yǔ)替換為添加樣式后的詞語(yǔ)，所有查詢(xún)的關(guān)鍵詞都被標(biāo)記為明顯的紅色，使用戶(hù)能夠更快地判斷相關(guān)結(jié)果對(duì)其的有效性，即快速判斷是否列表中有其想要的查詢(xún)結(jié)構(gòu)；其次，列表頭Sentences右側(cè)列出了查詢(xún)列表中語(yǔ)句的數(shù)量，以便用戶(hù)下一步的操作；最后，列表框底部也添加了友好的提示語(yǔ)，如圖5-6底部，“點(diǎn)擊查詢(xún)結(jié)果顯示AMR圖像”，可提高用戶(hù)的體驗(yàn)和操作的流暢性。圖5-6查詢(xún)列表樣例在添加關(guān)鍵詞查詢(xún)的結(jié)果至左側(cè)顯示列表的過(guò)程中，還為其中每一個(gè)結(jié)果（即table的每一行）添加了click的事件監(jiān)聽(tīng)器。每當(dāng)其中一行被用戶(hù)點(diǎn)擊時(shí)，會(huì)再根據(jù)點(diǎn)擊對(duì)象的id使用ajax向后臺(tái)發(fā)送查詢(xún)對(duì)應(yīng)語(yǔ)句AMR結(jié)構(gòu)信息的請(qǐng)求。在列表點(diǎn)擊請(qǐng)求的回調(diào)函數(shù)中，對(duì)收到的數(shù)據(jù)進(jìn)行了如下操作來(lái)顯示對(duì)應(yīng)語(yǔ)句的力導(dǎo)向圖：在屏幕中央的chart區(qū)域生成一個(gè)空白的SVG圖像；為SVG圖像逐步添加forceSimulation（力導(dǎo)向模型，用于模擬結(jié)點(diǎn)間的力導(dǎo)向關(guān)系）、link（所有的結(jié)點(diǎn)間的關(guān)系）、marker（標(biāo)記器，用于繪制結(jié)點(diǎn)間關(guān)系上的指向箭頭）、node（所有結(jié)點(diǎn)的本體）、linktext（顯示在關(guān)系上的文字標(biāo)簽），nodetext（顯示在結(jié)點(diǎn)上的文字標(biāo)簽）、circle（用于可視化結(jié)點(diǎn)的圓形圖形）及各類(lèi)力導(dǎo)向模擬函數(shù)、鼠標(biāo)事件函數(shù)；將數(shù)據(jù)導(dǎo)入定義好的模型中，并啟用各類(lèi)函數(shù)；此時(shí)，從用戶(hù)的視角看，一個(gè)包含多個(gè)結(jié)點(diǎn)及其關(guān)系的力導(dǎo)向圖就顯示在了屏幕中，并自動(dòng)布局為一個(gè)比較伸展的圖像。其中藍(lán)色結(jié)點(diǎn)為普通結(jié)點(diǎn)，紅色結(jié)點(diǎn)為AMR結(jié)構(gòu)中的根結(jié)點(diǎn)，綠色結(jié)點(diǎn)為字面量結(jié)點(diǎn)。由于AMR結(jié)構(gòu)的復(fù)雜性，其數(shù)據(jù)結(jié)構(gòu)并不是一個(gè)標(biāo)準(zhǔn)的樹(shù)，是一種類(lèi)似樹(shù)的圖結(jié)構(gòu)，語(yǔ)句中經(jīng)常存在從一棵子樹(shù)的結(jié)點(diǎn)指向另一個(gè)子樹(shù)的結(jié)點(diǎn)的關(guān)系，所以，在二維平面下，可能無(wú)法依靠力導(dǎo)向圖的自動(dòng)布局特性來(lái)直接伸展為最清晰的結(jié)構(gòu)。此時(shí)，用戶(hù)可以通過(guò)鼠標(biāo)對(duì)結(jié)點(diǎn)進(jìn)行拖拽進(jìn)行稍微的整理，將聚在一起的結(jié)構(gòu)分分開(kāi)，即可獲得最清晰的結(jié)構(gòu)了。第六章總結(jié)與展望6.1總結(jié)本次畢業(yè)設(shè)計(jì)使用語(yǔ)言是Python，開(kāi)發(fā)工具選擇的是Pycharm，后臺(tái)數(shù)據(jù)庫(kù)選擇的是非常好用的Neo4j圖數(shù)據(jù)庫(kù)，前端采用了Javascript和D3.js等，此外，還用了Bootstrap樣式簡(jiǎn)單優(yōu)化了界面的設(shè)計(jì)。主要的工作是使用Python對(duì)有固定格式的AMR語(yǔ)義文本進(jìn)行結(jié)點(diǎn)和關(guān)系的解析，再將解析后的結(jié)果存入數(shù)據(jù)庫(kù)中，并搭建了一個(gè)前端網(wǎng)站供用戶(hù)進(jìn)行交互。用戶(hù)在輸入關(guān)鍵詞后，網(wǎng)站會(huì)返回包含詞關(guān)鍵詞的語(yǔ)句列表，用戶(hù)可從列表中選擇感興趣的語(yǔ)句，點(diǎn)擊后，系統(tǒng)就會(huì)查詢(xún)此語(yǔ)句的AMR結(jié)構(gòu)信息并在頁(yè)面上以力導(dǎo)向圖的