-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathKG.html
More file actions
291 lines (265 loc) · 16.3 KB
/
KG.html
File metadata and controls
291 lines (265 loc) · 16.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Shuyang Du</title>
<link rel="shortcut icon" href="img/favicon.ico" type="images/x-icon"/>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/clean-blog.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Shuyang Du</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Other works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/KG2.jpg'); background-blend-mode: darken;">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1>Interactive personal knowledge graph for a service robot cooperated with Intel</h1>
<h2 class="subheading">Interactive Personal Knowledge Graph</h2>
<span class="meta" style="font-family: 'PingFang SC';">Ongoing now, Started from June, 2018</span>
</div>
</div>
</div>
</div>
</header>
<!-- Content -->
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2>Project Abstract</h2>
<p>In order to support service robot to accomplish its tasks effectively, it is important to develop a personalized
knowledge graph about the working environment and people it serves. However, the information error, missing,
confusion, and conflicts caused by its small data-based nature all posit big challenges in personalized knowledge
graph construction. In this project, we present a method of utilizing visual analysis technology to bring user input
into the construction of the personalized knowledge graph. Specifically, we introduce the concept of “Working knowledge
graph” and tremendously lower down the number of nodes presented to the user. At the same time, we use hyperbolic projection
to enable a smooth association of nodes in the Working Knowledge Graph with those in long-term personalized knowledge graph.
The effect of this interactive visualization in supporting personalized knowledge graph construction is evaluated in a
controlled usability test and exhibits a positive result. </p>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2>My Development Experience in Knowledge Graph</h2>
<p>Before involved in this project, I had already get in touch with the concept of knowledge graph, and developed 2 small
web applications using KG. In these 2 projects, I used Neo4j[1]--a graph database management system, which is the currently
most popular graph database according to DB-Engines Ranking[2]. Before importing the data into Neo4j, I used ETL to pre-process the
source data, decreased the data size form 16 million to 14 million by deleting the useless bidirectional relationships.
In the back-end, I used Neo4j Driver and Spring MVC[3] framework to access the database and provide the APIs for front-end.
In the front-end part, I used Vue CLI[4] framework, Bootstrap[5], Element UI[6], and used JavaScript library like d3.js[7] and
Three.js[8] to visualize the knowledge graph. </p>
<hr>
<img src="img/kg_icon.jpg" style="width: 100%;"/>
<img src="img/result_show.png" style="width: 80%; margin-top: 20px;">
<img src="img/st_show.jpg" style="width: 80%; margin-top: 40px; margin-bottom: 40px;">
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2>Project Analysis</h2>
<p>In order to gain a comprehensive understanding of the problem and construct proper test cases for our design and evaluation,
we first conducted interviews with experts in the relevant field. We interviewed 2 senior researchers whose research focuses
on application of knowledge graphs in service robots, and 2 robotics engineers that have expertise in development of service
robots and proficient familiarity with knowledge graph technology. </p>
<p>The interview consists of individual interviews and one group discussion session. We asked our participants (1) what are the
typical errors that arise with the application of knowledge graphs, (2) what types of correction would benefit the service
robot's functioning, and (3) the typical software analytical interface that a KG component would provide. </p>
<p>The result of the interview is too long to put it in this page. If you want to get further information about the interview, please click
<a href="https://drive.google.com/open?id=1vaV5A7lPaXOmf3PLNTVGN2KRNXQ9UrjS" style="font-size: 24px;">here</a></p>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2>Design & Development</h2>
<h3>System Design</h3>
<p>Based on the analysis of the interviews and sample dataset, we identified three design goals:</p>
<p>D1. Provide effective means for users to navigate, explore and manipulate the personalized knowledge graph.</p>
<p>D2. Provide a visual metaphor that is simple and informative, while maintaining direct relationship with the
underlying knowledge graph without requiring lossy translation.</p>
<p>D3. Provide a design that is resource-friendly and portable that can be applied to a wide variety of service robots.</p>
<p>To address these design goals, we present an interactive visual analytics tool that enables users to navigate, explore
and manipulate the personalized knowledge graph of service robots and aiding its construction in the process. We first
introduce a new structure named a “Working Knowledge Graph (WKG)” to limit the scope of visualization and user interaction
down to a more manageable level for non-expert users. The design of the system’s interface is then presented. The interface
consists of three main components: an interactive visualization panel that the user mainly operates on, a input panel for
searching and creating entities, and an detail panel for displaying and editing more detailed information of entities and relations. </p>
<hr>
<div id="Carousel_1" class="carousel slide" data-ride="carousel" style="margin-bottom: 40px;">
<ol class="carousel-indicators">
<li data-target="#Carousel_1" data-slide-to="0" class="active"></li>
<li data-target="#Carousel_1" data-slide-to="1" ></li>
<li data-target="#Carousel_1" data-slide-to="2" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/kg_design1.jpeg" alt="First slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/kg_design2.jpeg" alt="Second slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/kg_design3.jpeg" alt="Third slide" style="height: 500px;">
</div>
</div>
<a class="carousel-control-prev" href="#Carousel_1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Carousel_1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-10 col-md-10 mx-auto" style=" text-align:center;">
<h3>System Development</h3>
<p>In the first demo of this project, I first import the data from csv into a local Neo4j database server. Then, I used Python
Flask framework to develop the back-end, which provided 6 APIs. In the visualization part, I used the force directed system
in d3.js to initialize the x&y-coordinates of the nodes and links, and continue update them. Besides, I used paper.js to
realize the hyperbolic projection. The video below shows the interactive functions of the demo. </p>
<iframe width="896" height="504" src="https://www.youtube.com/embed/UIVvSJaO4q4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div id="Carousel_2" class="carousel slide" data-ride="carousel" style="margin-bottom: 40px;">
<ol class="carousel-indicators">
<li data-target="#Carousel_2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel_2" data-slide-to="1" ></li>
<li data-target="#Carousel_2" data-slide-to="2" ></li>
<li data-target="#Carousel_2" data-slide-to="3" ></li>
<li data-target="#Carousel_2" data-slide-to="4" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/flask1.jpg" alt="First slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/flask2.jpg" alt="Second slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/flask3.jpg" alt="Third slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/vis1.jpg" alt="Third slide" style="height: 500px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/vis2.jpg" alt="Third slide" style="height: 500px;">
</div>
</div>
<a class="carousel-control-prev" href="#Carousel_2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Carousel_2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC'; font-size: 18px;">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2 class="section-heading">Reference</h2>
<p><a target="view_window" href="https://neo4j.com/">[1] Official site of Neo4j database server</a></p>
<p><a target="view_window" href="https://db-engines.com/en/ranking/graph+dbms">[2] Official site of DB-Engines Ranking for Graph DBMS</a></p>
<p><a target="view_window" href="https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html">[3] Documentation of Spring MVC</a></p>
<p><a target="view_window" href="https://cli.vuejs.org/">[4] Documentation of Vue CLI</a></p>
<p><a target="view_window" href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">[5] Documentation of Bootstrap</a></p>
<p><a target="view_window" href="http://element.eleme.io/?ref=madewithvuejs.com#/en-US">[6] Official of Element UI</a></p>
<p><a target="view_window" href="https://d3js.org/">[7] Official of D3.js</a></p>
<p><a target="view_window" href="https://threejs.org/">[8] Official of Three.js</a></p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a target="view_window" href="https://twitter.com/DuShuyang">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a target="view_window" href="https://www.facebook.com/shuyang.du.1">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a target="view_window" href="https://github.com/Coldstream-Louis">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">© 2018 Shuyang Du, all rights reserved</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>