基于Vue構建現代化博物館可視化應用

劉朔言 吳涵 楊一夫 鄭雯鍇 高晗 劉杰

摘要：本文探討了現有博物館文物應用的現狀，基于知識圖譜的博物館文物應用的優缺點，知識圖譜可視化介紹以及知識圖譜的構建過程，并且簡要說明如何基于VUE構建一個現代化博物館可視化應用。

關鍵詞：知識圖譜;可視化;畫作;前端

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）14-0188-03

1博物館應用的現狀

目前以數字化博物館為主體的App通常是對實體物品進行掃描、建模等方式，將其轉化為數字化的電子媒介，并且通過圖像、文字、聲音、及影像等形式進行展示。

這些App的類型大致分為兩種，第一種是介紹型。例如故宮博物院推出的“每日故宮”。在這種類型的App 中大多數的展現形式為圖片，并配上一些與其相關的文字資料，以及它位于博物館的展示位置。該類型App缺少成體系的結構化知識，這種類型的App更偏向是對文物知識有一定基礎的人群。

第二種是導游型，例如中國國家博物館的App。這種類型的App更加注重游客在館內瀏覽文物時，對實體文物起到知識補充的作用。游客通過使用其App，將使用者的可移動設備當作講解器使用，使用者可在需要講解的地方通過掃碼來觸發語音講解功能，通過AR參與館內互動。但這種也僅限于在博物館內使用，有很大的局限性。

這些傳統的介紹和導游型App僅局限于單一個體進行介紹，卻沒有將各種實體之間聯系起來。隨著大數據時代的到來，以PB為單位的數據被存放在數據庫中，海量的信息數據呈爆炸式的增長。在面對PB級別的數據選取中，如何在這些數據中篩選、整理有價值的數據，并將這些數據展現給使用者，這一問題給人們帶來了巨大的挑戰。

2知識圖譜可視化

2.1傳統展現形式的不足與數據可視化

目前，數據可視化更多應用于互聯網上，這種方法更易于用來解讀數據。因此，很多人都更喜歡用圖形來表示數據，也可以用3D建模的方式來表示，這讓數據變得更加生動形象。

數據可視化形式有很多，比如柱狀圖，餅圖，散點圖A等，我們現在通過計算機可以更方便地制作圖表，它們讓數據更具體的表現出來。

例如：目前數據庫中存在海量的著名詩人的數據，我們可以將數據進行抽取以餅圖來展示，通過該種形式的圖表可以看出詩人所在的各個朝代的占比，但是各個詩人之間的聯系我們卻看不出來。例如李白和杜甫同是唐代的詩人，但是無法通過傳統圖表的形式展示出兩人朋友的關系。如果想要展示這些復雜的關系是無法通過傳統圖表進行展示。如果通過某種形式使用傳統圖表來展示這些復雜的關系，則會造成閱讀混亂、表現力差等問題。通過數據可視化所需的目的是簡化數據、方法閱讀，因此該種可視化的形式沒有存在的意義

知識圖譜則是把一組數據轉換成實體，實體是有屬性的，在不同實體之間會存在各種聯系。比如我們說蘋果，我們知道它的屬性是水果，那么與它相關聯的就有如香蕉，橘子等其他水果，它又是季節性水果，我們也可以想到與它同季節的水果有哪些，同時蘋果還是美國的IT公司，屬于電子產品，我們又可以想到如華為，小米等電子產品，這些關系我們用傳統手段是無法展示出來的，而知識圖譜可視化工具可以將它們的聯系清晰地展示出來，就如同網一樣，將這些信息都關聯起來，這些數據之間的關系也就簡單明了地呈現在我們眼前了。現在知識圖譜技術已經很成熟了，最早的知識圖譜技術是應用在搜索引擎上的。

2.2 知識圖譜可視化技術的實施和應用

構建知識圖譜的過程，分為三步。第一步信息抽取，從得到的數據中抽取實體，關系和屬性，再在此基礎上形成知識表達;第二步知識融合，得到新的數據后，就需要進行整合，消除歧義和矛盾，因為有的實體會有不同的表達，如人名，地名，公司名稱都有可能存在不同的別名。比如我們稱呼一個明星，成龍，但他也還有很多其他的稱呼，陳港生（原名）、房仕龍、元樓、陳元龍等，我們需要將這些不同的名稱都劃分到同一個實體之下;第三步知識加工，得到這些融合后的信息之后，通過人工甄別，最終把合格的信息加入知識庫中，以確保知識的正確性和質量。

3關鍵技術

3.1 Webpack和Vue.js技術

在傳統開發的模式中，當一個頁面擁有過多CSS、JS等靜態資源時，瀏覽器會限制允許異步發出的請求數，一旦超出這個數量將會阻塞頁面加載。或當一個頁面存在可重用部分，當自己去維護這些依賴關系的時候通常會使項目變得復雜。或當使用TypeScript、SCSS等強化語言進行編寫代碼的時候，瀏覽器無法直接識別這些代碼，只有去進行編譯轉換為瀏覽器可識別語言，當 Webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖，其中包含應用程序需要的每個模塊，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的拓展語言后將所有這些模塊編譯、打包成一個或多個模塊。

Vue.js是一款基于JavaScript構建用戶界面的漸進式框架，Vue的使用者僅需要關心視圖層，并不需要Vue的底層原理就可以方便、快速的構建出一套中大型應用。

4系統設計

4.1系統架構

根據對系統整體架構進行分析，決定采用B/S架構。

本系統采用B/S架構（Browser/Server），在架構下用戶通過使用瀏覽器瀏覽，基于HTTP協議提供的服務。Server通過提供api接口的方式響應請求、傳遞數據，前端通過AJAX發送GET、POST、PUT等請求調用這些api接口，Server接收請求并響應后，前端將數據展示給用戶。基于HTTP協議，也可以將Server提供的api接口方便地提供給其他平臺使用，最終實現跨平臺。模式結構如圖2所示。

4.2 系統環境

4.2.1 硬件環境

CPU： 1.4GHz Inter Core i5處理器

內存： 8GB 2133MHz LPDDR3 主板集成內存

圖形處理器： Intel Iris Plus Graphics 645 圖形處理器

外置存儲設備： 512GB SSD

操作系統： MacOS Catalina

4.2.2 軟件環境

NodeJS 12.18.2、Webpack、Vue 2.6.6、ElementUI 2.4.5、Echart 4.8.0、Vue-Axios 2.1.5、Vue-Router 3.4.3、Vue-Cookie 1.1.4

5構建圖譜

5.1 概要

本圖譜主要基于名畫和作者中的關系抽取，數據源于http：//www.youhuadaquan.org/和https：//www.dpm.org.cn/Home.html本圖譜基于lstm長短期記憶模型，對畫家和畫作的描述文本進行分類，抽取出畫家畫作實體和關系，在存入neo4j數據庫后通過業務規則描述新的關系。

5.2 數據標注

數據的預測類別有7種：

主語開頭：B-SUBJECT

主語非開頭：I-SUBJECT

謂語開頭：B-PREDICATE

謂語非開頭：I-PREDICATE

賓語開頭：B-OBJECT

賓語非開頭：I-OBJECT

其他：O

舉例：

凡·高來到法國小鎮阿爾，創作了《阿爾的吊橋》被標注為：

B-SUBJECT I-SUBJECT O O O O O O O O B-PREDICATE I-PREDICATE O

B-OBJECT I-OBJECT I-OBJECT I-OBJECT I-OBJECT

5.3 數據預處理

5.3.1詞典映射

實現包括低頻詞過濾，字與id的映射（word2id）、預測類別與id的映射（lable2id），實現id-詞-類別的映射綁定。

5.3.2 從訓練文件中獲取句子和標簽并轉化為id

實現將文件中存儲的標簽訓練集加載到詞典中來，通過詞典將句子和標注轉換為id，實現句子和標簽的離散化，同時，為了保證數據的維度一致，在行向量中進行句子填充。

5.4 構建模型

利用pytorch中rnn的lstm類，傳入數據量，詞嵌入和標簽的行向量，標簽大小等超參數之后，利用model等Sequential（）函數進行序列化，在crf層，利用tag參數進行loss函數的構建，最后將數據集導入模型中訓練40個epoch。

5.5 圖譜存儲

利用爬蟲引擎scrapy和元素解析引擎jsoup進行數據挖掘，將數據源網站上的文本進行持久化，導入到mysql中，按batch進入模型進行識別，輸出形式化結果，利用正則表達式篩選合并后存入csv文件中，利用neo4j圖數據庫提供的import工具進行導入和存儲.存儲的實體類型和屬性包括：作品（作品名、作者名、創作時間、類型、圖片url、博物館名稱）、作者（姓名、國籍、出生年份、死亡年份、頭像圖片url、描述），關系類型和屬性包括：相同時期（SAME_ERA）、相同博物館（SAME_MUSEUM）、被創作（MADE_BY）、同作者（SAME_MAKER）。

6前端設計

6.1前端應用技術棧

AJAX可以實現在不刷新網頁的情況下，與服務器交換數據并更新部分視圖的一種技術。NodeJS是一種運行環境，與JAVA中的JVM的作用一樣，為JS提供運行環境。Webpack是一種打包技術，用于打包JS文件，并且能夠起到轉換代碼的作用。Vue.js是一款漸進式前端框架，能夠方便快速的構建中大型應用。JavaScript是作為web開發的基礎技術，用于處理事件、數據交換等作用。CSS （SCSS）用于描述頁面控件的樣式。HTML用于描述頁面中存在的控件。

6.2前端項目部分結構

其中node_modules目錄為自動生成，只需在該項目目錄下運行npm install即可自動安裝相關依賴。

項目中所用到的api將會封裝于src/api/paint目錄中，src/api/index.js為公共請求封裝文件。

項目中所用到的靜態資源，例如圖片等將會保存于src/assets目錄中。

項目中所有頁面文件將會保存于src/pages目錄中。

項目中所用到的插件將會保存于src/plugins目錄中。

項目中頁面路由被統一封裝于src/router目錄中。

項目中的主題文件被封裝于src/theme目錄中。

6.3頁面設計

7總結

通過本網站的知識圖譜模塊可以把很多碎片化的數據聯系起來，能夠方便地看出各個數據之間有何種聯系。如果我們搜索唐朝，我們不只能夠得到這個朝代的信息，我們還可以得到是誰建立的唐朝，有幾任皇帝，唐朝之前的朝代是什么，之后的朝代是什么，它們之間有什么特殊關系。知識圖譜運用簡單的圖來表達各種各樣的關系。知識圖譜最大的價值就在于凡是有關系的地方都可以用到知識圖譜。相比于傳統方式，知識圖譜關系表達能力極強，并且它能像人一樣分析數據，它可以模擬人的思考過程，去推理、發現、分析問題。

【通聯編輯：光文玲】