基于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总结

通过本网站的知识图谱模块可以把很多碎片化的数据联系起来，能够方便地看出各个数据之间有何种联系。如果我们搜索唐朝，我们不只能够得到这个朝代的信息，我们还可以得到是谁建立的唐朝，有几任皇帝，唐朝之前的朝代是什么，之后的朝代是什么，它们之间有什么特殊关系。知识图谱运用简单的图来表达各种各样的关系。知识图谱最大的价值就在于凡是有关系的地方都可以用到知识图谱。相比于传统方式，知识图谱关系表达能力极强，并且它能像人一样分析数据，它可以模拟人的思考过程，去推理、发现、分析问题。

【通联编辑：光文玲】