forked from Haross/DTIM_projects_web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnextiadi.html
executable file
·503 lines (454 loc) · 33.6 KB
/
nextiadi.html
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>NextiaDI</title>
<link rel="stylesheet" href="public/dtim.css">
<link
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> -->
<!-- <scri2pt src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<script src="https://kit.fontawesome.com/92dab46df1.js" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="public/styles.css"> -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="public/nextiadi_logo.png" height="35"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#people">People</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#publications">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resources">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reproducibility">Reproducibility</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#demonstration">Demonstration</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#acknowledgements">Acknowledgements</a>
</li>
-->
</div>
</nav>
<br>
<div class="jumbotron" style="padding: 1.5em 1.5em; font-size: larger">
<h1><img src="public/nextiadi_logo.png" height="60"/>: Incremental and Agnostic Data Integration
</h1>
<p class="text-justify">
Nextia<sub>DI</sub>
is a library for incremental and agnostic Data Integration that facilitates generating schema of heterogeneous data sources and integrating them. This website is a companion of the research paper submitted to
<a href="http://www.semantic-web-journal.net/" target="_blank">Semantic Web Journal</a>, where we present the method underlying our approach. Nextia<sub>DI</sub>'s novelty lies on a) extraction of schemata leveraging on the structure of schemaless data sources; b) standardization of such extracted schemata into a canonical data modedl (i.e., the RDFS graph data model) using the technique of production rules; c) annotation-based schema integration for RDF graphs that allow to capture the relationships of the modeled data sources via unions and joins; d) automated derivation of the required DI constructs for specific querying systems (i.e., source schemata, schema
mappings, and target schema). All such features are provided in such a way that they are agnostic of the target
system, and are additionally performed in an incremental manner. Nextia<sub>DI</sub>
is implemented as a java library. We showcase the effectiveness of Nextia<sub>DI</sub>
to automatically generate all DI constructs of
<a href="https://www.essi.upc.edu/dtim/odin/" target="_blank">ODIN tool</a>.
</p>
</div>
<div class="bs-docs-section" id="people">
<h1>People</h1>
<div class="members-group">
<ul class="list-unstyled members-list">
<li class="member-item">
<a href="#">
<div class="member member--card ">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('https://res.cloudinary.com/dfg89e6oo/image/upload/w_1000,c_fill,ar_1:1,g_auto,r_max,b_rgb:262c35/v1555955606/afrry63rxmujltm2trk4.png');"> </div>
</div>
<div class="member-section member__info" style="padding-top:0">
<h5 style="text-align:center" class="member__title">Javier Flores</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a href="#">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces/v1554714443/o23esbrlzmv2mgmk0vbt.jpg');"> </div>
</div>
<!-- <div class="member-section avatar row" style="background-image: url('');"> </div> -->
<!-- <div class="member-section member__photo">
<img src="" width="180" height="180">
</div> -->
<div class="member-section member__info" style="padding-top:0">
<h5 style="text-align:center" class="member__title">Kashif Rabbani</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a target="_blank" href="http://www.essi.upc.edu/~snadal">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces,h_360,w_360/v1439218702/ffksjjujfa7gab5lbcxb.jpg');"> </div>
</div>
<!-- <div class="member-section member__photo">
<img src="https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces,h_360,w_360/v1439218702/ffksjjujfa7gab5lbcxb.jpg" width="180" height="180">
</div> -->
<div class="member-section member__info" style="padding-top:0">
<h5 style="text-align:center" class="member__title">Sergi Nadal</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a target="_blank" href="http://www.essi.upc.edu/~snadal">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces/v1556003099/h5rcbguzzdooz201vnc7.jpg');"> </div>
</div>
<!-- <div class="member-section member__photo">
<img src="http://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces/v1556003099/h5rcbguzzdooz201vnc7.jpg" width="180" height="180">
</div> -->
<div class="member-section member__info" style="padding-top:0">
<h5 style="text-align:center" class="member__title">Cristina Gómez</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a target="_blank" href="http://www.essi.upc.edu/~oromero">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces,h_360,w_360/v1445439382/gn7i1ne5vcfelalfdadh.jpg');"> </div>
</div>
<!-- <div class="member-section member__photo">
<img src="https://res.cloudinary.com/dfg89e6oo/image/upload/c_thumb,f_auto,g_faces,h_360,w_360/v1445439382/gn7i1ne5vcfelalfdadh.jpg" width="180" height="180">
</div> -->
<div class="member-section member__info" style="padding-top:0">
<h5 style="text-align:center" class="member__title">Oscar Romero</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a target="_blank" href="">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('public/avatar.png');"> </div>
</div>
<div class="member-section member__info" style="padding: 0 0.5em 1em 0.5em;">
<h5 style="text-align:center" class="member__title">Emmanuel Jamin</h5>
</div>
</div>
</a>
</li>
<li class="member-item">
<a target="_blank" href="">
<div class="member member--card">
<div class="d-flex justify-content-center align-items-center" style="margin: 1em;">
<div class="member-section avatar" style="background-image: url('public/avatar.png');"> </div>
</div>
<div class="member-section member__info" style="padding: 0 0.5em 1em 0.5em;">
<h5 style="text-align:center" class="member__title">Stamatia Dasiopoulou</h5>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="bs-docs-section" id="publications">
<h1>Publications</h1>
<br>
<h3>2022</h3>
<br>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
Incremental Schema Integration for Data Wrangling via Knowledge Graphs
<span class="badge badge-primary">paper submitted in Semantic Web Journal
</span>
</div>
<div>
<a href="https://www.semantic-web-journal.net/system/files/swj3286.pdf">
<i class="far fa-file-pdf fa-2x"></i>
</a>
<!-- <a href="#" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/u0dqqkH14JA"><i class="fab fa-youtube fa-2x"></i></a> -->
<!-- <a href="https://upcommons.upc.edu/handle/2117/343141"><i class="fas fa-info-circle fa-2x"></i></a> -->
</div>
</li>
<!-- <li class="list-group-item d-flex justify-content-between align-items-center">
<div>
End-to-End Incremental Data Integration via Knowledge Graphs
<span class="badge badge-primary">paper submitted in Semantic Web Journal
</span>
</div>
<div>
<a href="http://www.semantic-web-journal.net/system/files/swj3138.pdf">
<i class="far fa-file-pdf fa-2x"></i>
</a>
</div>
</li> -->
</ul>
<br>
</div>
<hr>
<div class="bs-docs-section" id="resources">
<h1>Resources</h1>
<h3>Software repository</h3>
<p class="text-justify">
The source code of the system can be found in the following
<a target="_blank" href="https://github.com/dtim-upc/NextiaDI">Github repository</a>.
</p>
<p class="text-justify">The easy way to use Nextia<sub>DI</sub>
is with Maven. For Gradle just add the following dependency in your build.sbt</p>
<div class="alert alert-info" role="alert">
implementation 'edu.upc.essi.dtim:nextiadi:0.1.0'
</div>
For bootstrapping, the following dependency is also required:
<div class="alert alert-info" role="alert">
implementation group: 'org.glassfish', name: 'javax.json', version: '1.1.4'
</div>
<p>For more ways to add Nextia<sub>DI</sub>
using Maven, please go
<a href="https://search.maven.org/artifact/edu.upc.essi.dtim/nextiadi/0.1.0/jar">here</a>
</p>
<p>You can check how to use Nextia<sub>DI</sub>
<a href="https://github.com/dtim-upc/NextiaJD#usage">here</a>
or see the zeppelin notebook with an explanation step by step, see
<a href="#demonstration">demonstration section</a>
</p>
<!-- <p class="text-justify">
We additionally provide the compiled JARs for Apache Spark 3.0.1 and Scala 2.12. This files must be placed (and replace if necessary) in Spark's libraries directory of the driver and all workers.
<ul>
<li><a href="https://mydisk.cs.upc.edu/s/7wKRxp3DJTgQ7yb/download" target="_blank">Spark-NextiaJD</a></li>
<li><a href="https://mydisk.cs.upc.edu/s/B36NjoYC6LTP5GQ/download" target="_blank">SparkSQL</a></li>
<li><a href="https://mydisk.cs.upc.edu/s/j6KfLkgqxtprDod/download" target="_blank">Catalyst</a></li>
</ul>
</p> -->
<!--
<br><br>
<h3>Online version</h3>
An online version of ODIN is available as a service via the <a href="#">following link</a>. You can interact with the demo (see next section), using the credentials (username: demo, password: demo).
-->
</div>
<hr>
<div class="bs-docs-section" id="reproducibility">
<h1>Reproducibility</h1>
<p class="text-justify">
We believe in transparent and shareable research
<a target="_blank" href="https://www.acm.org/publications/reproducibility">[1]</a>,
<a target="_blank" href="http://db-reproducibility.seas.harvard.edu/">[2]</a>. Hence, in the following you can find all material (e.g., notebooks, code, answers) related to our experiments
<h3>User study</h3>
<p>This user study aims at evaluating the efficiency and quality of NextiaDI in automatically supporting the task of
schema integration compared to a conventional schema integration pipeline. The study is, hence, divided in three
tasks: (i) generation of source schemata, (ii) generation of an integrated schema, and (iii) generation of mappings. In the following, you can find the all material related to this survey:</p>
<ul class="list-group ">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Survey instructions</span>
</div>
<div>
<a href="https://docs.google.com/document/d/1Lq3ZIEE3xd1jmRvJ3JJO95jC2WsErPHu/edit?usp=sharing&ouid=109315868422015202183&rtpof=true&sd=true" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download V1</span></a>
<a href="https://docs.google.com/document/d/11qwWRUOGOhU5jKDde9XjGFIv4DYfV-OE/edit?usp=sharing&ouid=109315868422015202183&rtpof=true&sd=true" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download V2</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Survey datasets</span>
</div>
<div>
<a href="https://mydisk.cs.upc.edu/s/smoqHbpX4aGLkY9" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Pre-study questionnaire: participants answers</span>
</div>
<div>
<a href="https://mydisk.cs.upc.edu/s/KsQxqrxMWGwQ3t3/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Task 1: participants answers</span>
</div>
<div>
<a href="https://mydisk.cs.upc.edu/s/tWRE7ikYTnFkCBG/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Task 2: participants answers</span>
</div>
<div>
<a href="https://mydisk.cs.upc.edu/s/N7s3jHa6z9ixGWF/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Task 3: participants answers</span>
</div>
<div>
<a href="https://mydisk.cs.upc.edu/s/jH3GQy5LX6r662Y/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">Jupyter Notebook</span>
</div>
<div>
<a href="https://colab.research.google.com/drive/1GYDsYCqTMJ99V3TC5AaS_J26bYqd42bL?usp=sharing" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Go</span></a>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<span style="color: #007bff;text-decoration: none;">ODIN system powered by NextiaDI</span>
</div>
<div>
<a href="http://quarry.essi.upc.edu:8082/index.html#/auth" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Go</span></a>
</div>
</li>
</ul>
<br>
<h3>Scalability experiments</h3>
<p> We evaluate our two technical contributions (i.e., bootstrapping and schema integration) to assess their computational complexity and runtime performance. We provide you with
<a href="https://github.com/dtim-upc/NextiaJD/tree/main/experiments" target="_blank">detailed instructions</a>
on how to reproduce the experiments presented in our work and the data sources used in each scenario:</p>
<ul class="list-group ">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<a target="_blank" href="https://github.com/dtim-upc/NextiaDI/tree/main/experiments/src/main/java/bootstrapping#bootstrapping-experiment">Bootstrapping experiment</a>
</div>
<a href="https://mydisk.cs.upc.edu/s/CerZ63AREA2f2qF/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download data sources</span></a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<a target="_blank" href="https://github.com/dtim-upc/NextiaDI/tree/main/experiments/src/main/java/integration1#schema-integration-experiment-1">Schema integration experiment 1</a>
</div>
<a href="https://mydisk.cs.upc.edu/s/Sd2zgb3AGYwCP8S/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download data sources</span></a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<a target="_blank" href="https://github.com/dtim-upc/NextiaDI/tree/main/experiments/src/main/java/integration2#schema-integration-experiment-2">Schema integration experiment 2</a>
</div>
<a href="https://mydisk.cs.upc.edu/s/X2FWGye3C5g5rjD/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download data sources</span></a>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<a target="_blank" href="https://github.com/dtim-upc/NextiaDI/tree/main/experiments/src/main/java/integration3#schema-integration-experiment-3">Schema integration experiment 3</a>
</div>
<a href="https://mydisk.cs.upc.edu/s/WeDZ3mySLz8MBgB/download" target="_blank"> <span class="badge bg-primary rounded-pill" style="padding: 5 8 5 8;">Download data sources</span></a>
</li>
</p>
</p>
</div>
<hr>
<div class="bs-docs-section" id="demonstration">
<h1>Demonstration</h1>
<br>
<h4>Notebook step by step</h4>
<p class="text-justify">
A live demo for learning how to use Nextia<sub>DI</sub> is available <a target="_blank" href="http://quarry.essi.upc.edu:8081/#/notebook/2H6ZMA4UP"> here</a>. Bear in mind that, <b>in order to access them you must first login</b> with the following credentials (user: <b>user2</b>, password: <b>nextiadi</b>). The login button can be found at the top right of the page.
</p>
<h4>Showcase</h4>
<p>
We showcase the effectiveness of Nextia<sub>DI</sub> in <a href="http://www.essi.upc.edu/~snadal/odin.html">ODIN tool </a> by automatically generating all DI constructs. Before these constructs were created manually. <a href="http://quarry.essi.upc.edu:8082/index.html#/auth">Here</a> you can access to ODIN tool.
</p>
<!-- <h4>Library usage</h4>
<p class="text-justify">
We also provide with a code-oriented demo showcasing how proficient data analysts can take full benefit of our tool
<a target="_blank" href="http://dtim.essi.upc.edu:8081/#/notebook/2FZ5HCMJQ">here</a>.
</p> -->
<!-- <h3>Videos</h3>
<div class="row justify-content-center">
<video width="100%" controls>
<source src="NextiaJD_demonstration.mp4" type="video/mp4">
</video>
</div> -->
</div>
<!-- <div class="bs-docs-section" id="acknowledgements">
<h1>Acknowledgements</h1>
<p>
TBA
</p>
</div>
-->
<!-- Modal -->
<!-- <div class="modal" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<!-- <div class="modal-header bg-dark border-dark">
<button type="button" class="close text-white" data-dismiss="modal">×</button>
</div>
<div class="modal-body bg-dark p-0">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="modal" tabindex="-1" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> -->
<hr><p>Last update: 2022/10/12 by Javier Flores
</p>
</div>
<style>
.avatar {
width: 140px;
height: 140px;
background-size: cover;
background-position: center;
border-radius: 50%;
}
</style>
<script>
$(document).ready(function () {
// Set iframe attributes when the show instance method is called
$("#videoModal").on("show.bs.modal", function (event) {
console.log("ebte");
let button = $(event.relatedTarget); // Button that triggered the modal
let url = button.data("video"); // Extract url from data-video attribute
$(this).find("iframe").attr({src: url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"});
});
// Remove iframe attributes when the modal has finished being hidden from the user
$("#videoModal").on("hidden.bs.modal", function () {
$("#videoModal iframe").removeAttr("src allow");
});
});
</script>
</body>
</body></html>