基于Vue構(gòu)建現(xiàn)代化博物館可視化應(yīng)用

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

摘要：本文探討了現(xiàn)有博物館文物應(yīng)用的現(xiàn)狀，基于知識(shí)圖譜的博物館文物應(yīng)用的優(yōu)缺點(diǎn)，知識(shí)圖譜可視化介紹以及知識(shí)圖譜的構(gòu)建過(guò)程，并且簡(jiǎn)要說(shuō)明如何基于VUE構(gòu)建一個(gè)現(xiàn)代化博物館可視化應(yīng)用。

關(guān)鍵詞：知識(shí)圖譜;可視化;畫作;前端

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）14-0188-03

1博物館應(yīng)用的現(xiàn)狀

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

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

第二種是導(dǎo)游型，例如中國(guó)國(guó)家博物館的App。這種類型的App更加注重游客在館內(nèi)瀏覽文物時(shí)，對(duì)實(shí)體文物起到知識(shí)補(bǔ)充的作用。游客通過(guò)使用其App，將使用者的可移動(dòng)設(shè)備當(dāng)作講解器使用，使用者可在需要講解的地方通過(guò)掃碼來(lái)觸發(fā)語(yǔ)音講解功能，通過(guò)AR參與館內(nèi)互動(dòng)。但這種也僅限于在博物館內(nèi)使用，有很大的局限性。

這些傳統(tǒng)的介紹和導(dǎo)游型App僅局限于單一個(gè)體進(jìn)行介紹，卻沒有將各種實(shí)體之間聯(lián)系起來(lái)。隨著大數(shù)據(jù)時(shí)代的到來(lái)，以PB為單位的數(shù)據(jù)被存放在數(shù)據(jù)庫(kù)中，海量的信息數(shù)據(jù)呈爆炸式的增長(zhǎng)。在面對(duì)PB級(jí)別的數(shù)據(jù)選取中，如何在這些數(shù)據(jù)中篩選、整理有價(jià)值的數(shù)據(jù)，并將這些數(shù)據(jù)展現(xiàn)給使用者，這一問題給人們帶來(lái)了巨大的挑戰(zhàn)。

2知識(shí)圖譜可視化

2.1傳統(tǒng)展現(xiàn)形式的不足與數(shù)據(jù)可視化

目前，數(shù)據(jù)可視化更多應(yīng)用于互聯(lián)網(wǎng)上，這種方法更易于用來(lái)解讀數(shù)據(jù)。因此，很多人都更喜歡用圖形來(lái)表示數(shù)據(jù)，也可以用3D建模的方式來(lái)表示，這讓數(shù)據(jù)變得更加生動(dòng)形象。

數(shù)據(jù)可視化形式有很多，比如柱狀圖，餅圖，散點(diǎn)圖A等，我們現(xiàn)在通過(guò)計(jì)算機(jī)可以更方便地制作圖表，它們讓數(shù)據(jù)更具體的表現(xiàn)出來(lái)。

例如：目前數(shù)據(jù)庫(kù)中存在海量的著名詩(shī)人的數(shù)據(jù)，我們可以將數(shù)據(jù)進(jìn)行抽取以餅圖來(lái)展示，通過(guò)該種形式的圖表可以看出詩(shī)人所在的各個(gè)朝代的占比，但是各個(gè)詩(shī)人之間的聯(lián)系我們卻看不出來(lái)。例如李白和杜甫同是唐代的詩(shī)人，但是無(wú)法通過(guò)傳統(tǒng)圖表的形式展示出兩人朋友的關(guān)系。如果想要展示這些復(fù)雜的關(guān)系是無(wú)法通過(guò)傳統(tǒng)圖表進(jìn)行展示。如果通過(guò)某種形式使用傳統(tǒng)圖表來(lái)展示這些復(fù)雜的關(guān)系，則會(huì)造成閱讀混亂、表現(xiàn)力差等問題。通過(guò)數(shù)據(jù)可視化所需的目的是簡(jiǎn)化數(shù)據(jù)、方法閱讀，因此該種可視化的形式?jīng)]有存在的意義

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

2.2 知識(shí)圖譜可視化技術(shù)的實(shí)施和應(yīng)用

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

3關(guān)鍵技術(shù)

3.1 Webpack和Vue.js技術(shù)

在傳統(tǒng)開發(fā)的模式中，當(dāng)一個(gè)頁(yè)面擁有過(guò)多CSS、JS等靜態(tài)資源時(shí)，瀏覽器會(huì)限制允許異步發(fā)出的請(qǐng)求數(shù)，一旦超出這個(gè)數(shù)量將會(huì)阻塞頁(yè)面加載?；虍?dāng)一個(gè)頁(yè)面存在可重用部分，當(dāng)自己去維護(hù)這些依賴關(guān)系的時(shí)候通常會(huì)使項(xiàng)目變得復(fù)雜?；虍?dāng)使用TypeScript、SCSS等強(qiáng)化語(yǔ)言進(jìn)行編寫代碼的時(shí)候，瀏覽器無(wú)法直接識(shí)別這些代碼，只有去進(jìn)行編譯轉(zhuǎn)換為瀏覽器可識(shí)別語(yǔ)言，當(dāng) Webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，找到JavaScript模塊以及其他的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言后將所有這些模塊編譯、打包成一個(gè)或多個(gè)模塊。

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

4系統(tǒng)設(shè)計(jì)

4.1系統(tǒng)架構(gòu)

根據(jù)對(duì)系統(tǒng)整體架構(gòu)進(jìn)行分析，決定采用B/S架構(gòu)。

本系統(tǒng)采用B/S架構(gòu)（Browser/Server），在架構(gòu)下用戶通過(guò)使用瀏覽器瀏覽，基于HTTP協(xié)議提供的服務(wù)。Server通過(guò)提供api接口的方式響應(yīng)請(qǐng)求、傳遞數(shù)據(jù)，前端通過(guò)AJAX發(fā)送GET、POST、PUT等請(qǐng)求調(diào)用這些api接口，Server接收請(qǐng)求并響應(yīng)后，前端將數(shù)據(jù)展示給用戶?；贖TTP協(xié)議，也可以將Server提供的api接口方便地提供給其他平臺(tái)使用，最終實(shí)現(xiàn)跨平臺(tái)。模式結(jié)構(gòu)如圖2所示。

4.2 系統(tǒng)環(huán)境

4.2.1 硬件環(huán)境

CPU： 1.4GHz Inter Core i5處理器

內(nèi)存： 8GB 2133MHz LPDDR3 主板集成內(nèi)存

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

外置存儲(chǔ)設(shè)備： 512GB SSD

操作系統(tǒng)： MacOS Catalina

4.2.2 軟件環(huán)境

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構(gòu)建圖譜

5.1 概要

本圖譜主要基于名畫和作者中的關(guān)系抽取，數(shù)據(jù)源于http：//www.youhuadaquan.org/和https：//www.dpm.org.cn/Home.html本圖譜基于lstm長(zhǎng)短期記憶模型，對(duì)畫家和畫作的描述文本進(jìn)行分類，抽取出畫家畫作實(shí)體和關(guān)系，在存入neo4j數(shù)據(jù)庫(kù)后通過(guò)業(yè)務(wù)規(guī)則描述新的關(guān)系。

5.2 數(shù)據(jù)標(biāo)注

數(shù)據(jù)的預(yù)測(cè)類別有7種：

主語(yǔ)開頭：B-SUBJECT

主語(yǔ)非開頭：I-SUBJECT

謂語(yǔ)開頭：B-PREDICATE

謂語(yǔ)非開頭：I-PREDICATE

賓語(yǔ)開頭：B-OBJECT

賓語(yǔ)非開頭：I-OBJECT

其他：O

舉例：

凡·高來(lái)到法國(guó)小鎮(zhèn)阿爾，創(chuàng)作了《阿爾的吊橋》被標(biā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 數(shù)據(jù)預(yù)處理

5.3.1詞典映射

實(shí)現(xiàn)包括低頻詞過(guò)濾，字與id的映射（word2id）、預(yù)測(cè)類別與id的映射（lable2id），實(shí)現(xiàn)id-詞-類別的映射綁定。

5.3.2 從訓(xùn)練文件中獲取句子和標(biāo)簽并轉(zhuǎn)化為id

實(shí)現(xiàn)將文件中存儲(chǔ)的標(biāo)簽訓(xùn)練集加載到詞典中來(lái)，通過(guò)詞典將句子和標(biāo)注轉(zhuǎn)換為id，實(shí)現(xiàn)句子和標(biāo)簽的離散化，同時(shí)，為了保證數(shù)據(jù)的維度一致，在行向量中進(jìn)行句子填充。

5.4 構(gòu)建模型

利用pytorch中rnn的lstm類，傳入數(shù)據(jù)量，詞嵌入和標(biāo)簽的行向量，標(biāo)簽大小等超參數(shù)之后，利用model等Sequential（）函數(shù)進(jìn)行序列化，在crf層，利用tag參數(shù)進(jìn)行l(wèi)oss函數(shù)的構(gòu)建，最后將數(shù)據(jù)集導(dǎo)入模型中訓(xùn)練40個(gè)epoch。

5.5 圖譜存儲(chǔ)

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

6前端設(shè)計(jì)

6.1前端應(yīng)用技術(shù)棧

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

6.2前端項(xiàng)目部分結(jié)構(gòu)

其中node_modules目錄為自動(dòng)生成，只需在該項(xiàng)目目錄下運(yùn)行npm install即可自動(dòng)安裝相關(guān)依賴。

項(xiàng)目中所用到的api將會(huì)封裝于src/api/paint目錄中，src/api/index.js為公共請(qǐng)求封裝文件。

項(xiàng)目中所用到的靜態(tài)資源，例如圖片等將會(huì)保存于src/assets目錄中。

項(xiàng)目中所有頁(yè)面文件將會(huì)保存于src/pages目錄中。

項(xiàng)目中所用到的插件將會(huì)保存于src/plugins目錄中。

項(xiàng)目中頁(yè)面路由被統(tǒng)一封裝于src/router目錄中。

項(xiàng)目中的主題文件被封裝于src/theme目錄中。

6.3頁(yè)面設(shè)計(jì)

7總結(jié)

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

【通聯(lián)編輯：光文玲】