-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
420 lines (408 loc) · 42.9 KB
/
index.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CLEF</title>
<script src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@500&display=swap" rel="stylesheet">
<style media="screen">
body {font-family: 'Karla', sans-serif !important; line-height: 1.7em; color: #29003b !important;}
main {padding: 7em !important; margin-right:25% !important;}
#aside {width:25%; height: 100%; padding: 5em !important;position: fixed; top: 0; right:0; overflow-x: scroll;}
#aside ul {list-style-type: none; padding-left: 0px !important;}
#aside a {text-decoration: none !important;}
h5 {margin: 2em 0px; font-weight: 500; font-size: 2em;}
h6 {color : rgba(100,23,180,1);margin: 2em 0px; font-size: 1.7em;}
a.H6 {display:inline-block; padding-left: 0.5em; color:grey !important;}
.red {color: red;}
img {margin: 1em auto; border: solid 1px;}
.tip {display: inline-block; border:solid 1px #29003b; padding: 0.2em !important; width:2.3em;}
</style>
</head>
<body>
<main>
<h1>CLEF. Crowdsourcing Linked Entities via web Form</h1>
<a href="https://zenodo.org/badge/latestdoi/479251315"><img src="https://zenodo.org/badge/479251315.svg" alt="DOI"></a>
<img src="https://img.shields.io/badge/License-ISC-blue.svg" alt="">
<p><a href="https://github.com/polifonia-project/clef">Source code</a></p>
<section>
<h5>Introduction</h5>
<p>CLEF is a lightweight Linked Open Data (LOD) native cataloguing system tailored to small-medium collaborative projects.
It offers a web-ready solution for setting up data collection or crowdsourcing campaigns.</p>
<p>CLEF is designed to facilitate admin tasks,
and to allow collaborators to produce high quality linked open data via user interface, without the burden of understanding what all this fuzz around LOD is about!</p>
</section>
<section class='jumbotron'>
<p>Some highlights</p>
<ul>
<li><strong>customisable</strong>: create your templates for data collection</li>
<li><strong>collaborative</strong>: allow everybody to contribute to your catalogue and grant permissions to smaller groups of collaborators</li>
<li><strong>peer-review</strong>: allow collaborators to review records before publication</li>
<li><strong>autocompletion</strong>: ensure collaborators reference the same contents. Autocomplete suggestions from Wikidata, geonames and your own catalogue make it easier!</li>
<li><strong>synchronization with github</strong>: use github to authenticate collaborators, to backup and version your data</li>
<li><strong>web archiving</strong>: save your web sources for future use in Internet archive</li>
<li><strong>release 5-star data</strong> store, serve, and query your data as Linked Open Data</li>
<li><strong>browse data immediately</strong> CLEF comes with an online browsable catalogue. You can create indexes with one click (no need to develop another application for showcasing your data!)</li>
<li><strong>work locally or remote</strong> use CLEF from your desktop or on a remote server</li>
</ul>
</section>
<section>
<h5>Install and run</h5>
<h6>macOS</h6>
<p>On Mac you can install via installer, from source or with Docker</p>
<p><strong>With the installer</strong></p>
<ul>
<li>download <code>install</code> from the latest release</li>
<li>open the terminal, change the permissions to the file <code>chmod 755 Downloads/install</code></li>
<li>in the terminal, run <code>./install.sh</code>. The installer clones the repository in the folder <code>/Users/{USERNAME}/Desktop/crowdsourcing</code>, creates a virtual environment, installs dependencies, and downloads blazegraph triplestore.</li>
<li>in Finder, open the folder <code>/Users/{USERNAME}/Desktop/crowdsourcing</code> and run the executable script <code>run.sh</code> (double click)</li>
<li>open your browser at <code>http://0.0.0.0:8080/</code></li>
<li>follow the instructions for <a href="#customization">customization</a></li>
</ul>
<p><strong>From source code (No virtualenv)</strong></p>
<ul>
<li>download the source code from the latest release or clone the repository</li>
<li>install <code>requirements.txt</code> with pip (<code>pip3 install -r requirements.txt</code>)</li>
<li>download the latest version of <a href="https://github.com/blazegraph/database/releases/tag/BLAZEGRAPH_2_1_6_RC">blazegraph</a></li>
<li>move the file <code>blazegraph.jar</code> in the root folder of the cloned repository</li>
<li>download the latest version of <a href="https://github.com/SPARQL-Anything/sparql.anything/releases/latest">SPARQL Anything server</a></li>
<li>move the file <code>sparql-anything-server.jar</code> in the root folder of the cloned repository</li>
<li>in the terminal, launch blazegraph <code>java -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8 -server -Xmx2g -Djetty.port=3000 -Dbigdata.propertyFile=blaze.properties -jar blazegraph.jar</code> (NB. <code>-Xmx2g</code> requires 2GB RAM, change according to your preference)</li>
<li>then, launch SPARQL Anything <code>java -jar sparql-anything-server-0.8.2.jar --port=8081</code> (NB. change 0.8.2 according to your version of the .jar file)</li>
<li>launch the web application <code>python3 app.py 8080</code></li>
<li>open your browser at <code>http://0.0.0.0:8080/</code></li>
<li>follow the instructions for <a href="#customization">customization</a></li>
</ul>
<p>With <strong>Docker</strong></p>
<ul>
<li>install Docker on your system</li>
<ul>
<li><a href="https://docs.docker.com/desktop/windows/install/">Windows</a> update to the newest version of Windows to ensure that Docker can be installed. For example, if you have a Windows Home, ensure you have at <a href="https://golb.hplar.ch/2020/05/docker-windows-home-2004.html">least the version 2004</a></li>
<li><a href="https://docs.docker.com/desktop/mac/install/">macOS</a></li>
<li><a href="https://docs.docker.com/engine/install/">Linux</a></li>
</ul>
<li>clone or download the repository</li>
<ul>
<li>with <a href="https://git-scm.com/downloads">git</a> for easier installation and update (optional, recommended) <code>git clone https://github.com/polifonia-project/clef.git</code></li>
<li>or <a href="https://github.com/polifonia-project/clef/archive/refs/heads/main.zip">download the zip repository</a> and unpack it.</li>
</ul>
<li>no extra action is needed for configuration. The configuration is loaded from <code>conf.py</code>. The only difference regards the set up of the endpoints for Blazegraph and the application (in two containers). This is set in <code>docker-compose.yml</code> by two properties:</li>
<ul>
<li><code>BLAZEGRAPH_ENDPOINT=http://db:8080/bigdata/sparql</code></li>
<li><code>PUBLIC_BLAZEGRAPH_ENDPOINT=http://localhost:8080/sparql</code></li>
</ul>
<li>ensure that your Docker engine is running</li>
<li>run <code>docker compose up</code> (the first build might take couple of minutes)</li>
<li>access your web browser at <a href="http://localhost:8080">http://localhost:8080</a></li>
<li>follow the instructions for <a href="#customization">customization</a></li>
</ul>
<p>See section <a href="#setup">Setup</a> for detail on how to change default ports.</p>
<h6>Windows</h6>
<p>On Windows you can install CLEF with <strong>Vagrant</strong></p>
<ul>
<li>ensure you have <a href="https://www.virtualbox.org/wiki/Downloads">VirtualBox</a></li>
<li>ensure you have <a href="https://www.vagrantup.com/downloads.html">Vagrant</a></li>
<li>clone the repository</li>
<li>cd into the repository and run <code>vagrant up</code>. <em>(NB. The first time this command will take longer, as the underlying virtual machine needs to be downloaded and provisioned. The second time, the provisioning is skipped and the runtime is much faster.)</em></li>
<li>access your web browser at <a href="http://localhost:8080">http://localhost:8080</a></li>
<li>follow the instructions for <a href="#customization">customization</a></li>
</ul>
<p>If you change the configuration or update the git repository, <a href="https://www.vagrantup.com/docs/cli/reload">reload the running vagrant</a> <code>vagrant reload</code></p>
</section>
<section id="customization">
<h5>Setup</h5>
<h6 id="setup">Default setup</h6>
<p>You can modify the default configuration of the application from the Member area > Setup. Changes to the configuration have immediate effect (no need to restart the application). </p>
<img style="max-width:100%;" src="docs/2setup.png" alt="">
<p>What you can modify:</p>
<p><strong>PROJECT (SHORT) NAME:</strong> Personalise the project name and the payoff, which appear in the homepage and the menu across pages.</p>
<p><strong>MY ENDPOINT:</strong> The local SPARQL endpoint runs on port 3000. Changes are disabled. To modify the default port you'll have to modify the following files:</p>
<ul>
<li>change <code>myEndpoint</code> in <code>conf.py</code>, in the root folder of the application.</li>
<li>if you are running the application from source code, change also the running command</li>
<li>if you are running the app in docker, change also <code>docker-compose.yml</code></li>
<li>if you are running the app with the bash script, change also <code>run.sh</code></li>
<li>if you are running the app in Vagrant, change <code>Vagrantfile</code></li>
</ul>
<p><strong>MY PUBLIC ENDPOINT:</strong> the public URL of your SPARQL endpoint, used for front-end functionalities, e.g. autocomplete. Default URI is <code>http://127.0.0.1:3000/blazegraph/sparql</code>. Similarly to the local endpoint address, to change the port of the web application, change the aforementioned files.</p>
<ul>
<li>If you are running the application locally, this value must be the same as <strong>MY ENDPOINT</strong></li>
<li>If run remotely, the web application provides an out-of-the-box read-only SPARQL endpoint at <code>{YOURDOMAIN}/sparql</code>. Use this URL.</li>
<li>if you are running the app in docker, change <code>docker-compose.yml</code></li>
</ul>
<p><strong>URI BASE:</strong> The URI base is the persistent URI of new entities. You can use external services such as w3id. Be aware that content negotiation is not automatically enabled. See an <a href="https://github.com/perma-id/w3id.org/tree/master/musow">example</a> on how to enable it with w3id.</p>
<p><strong>LIMIT REQUESTS:</strong> Limit the number of daily anonymous contributions per user - requests coming from the same IP address.</p>
<p><strong>PAGINATION LIMIT:</strong> Choose the number of records to be shown in the backend and frontend (pagination of results).</p>
<h6>GitHub backup</h6>
<p>CLEF can be synchronised with a GitHub repository to (1) create a versioned backup of data (and keep track of changes to records) and (2) to create a team to collaborate to the catalogue.</p>
<p>Before modifying the Setup page, you will need:</p>
<ul>
<li>to create <a href="https://github.com/join">a github account</a> (if you do not have it yet)</li>
<li>to create <a href="https://docs.github.com/en/get-started/quickstart/create-a-repo">a github repository</a> for storing the backup version of your data. Here <span class='red'>you must create a folder</span> called <code>records</code>.</li>
<li>to obtain <a href="https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token">a github bearer token</a>, to allow CLEF to read/write on your repository on your behalf</li>
</ul>
<p>When selecting the scopes of the permissions for the bearer token, ensure <code>repo</code> rights are selected.</p>
<p>In the setup page you can then enable Github synchronization by modifying the following fields:</p>
<ul>
<li><strong>Enable Github backup:</strong> <code>True</code></li>
<li><strong>COMMITS DEFAULT AUTHOR:</strong> your GitHub username </li>
<li><strong>COMMITS DEFAULT AUTHOR EMAIL:</strong> the email you used to register on Github</li>
</ul>
<p>Remember the repository must be either yours or of an organisation where you have been accredited as a collaborator with admin privileges. </p>
<ul>
<li><strong>REPOSITORY OWNER:</strong> If the repository is yours, use your username, otherwise use the organisation name</li>
<li><strong>REPOSITORY NAME:</strong> the name of the repository as recorded in the URL (after the owner name)</li>
<li><strong>GITHUB BEARER TOKEN:</strong> Copy and paste the bearer token. Be aware you may need to change this code over time - according to the expiry date you choose.</li>
</ul>
<h6>Authentication</h6>
<p>To allow only a restricted number of collaborators to access the backend of your application, you can use Github for authentication.
Every collaborator must have:</p>
<ul>
<li> a github account</li>
<li> been invited (via GitHub) to collaborate to the repository</li>
</ul>
<p>In addition to prior requirements for synchronization, the owner of the repositoy must also create a github <a href="https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app">OAuth application</a> connected to the repository and the web application</p>
<ul>
<li>Follow the instructions for creating the OAuth app</li>
<li>when asked, select as Authorization callback URL the following path <code>{YOURDOMAIN}/oauth-callback</code>, e.g. http://mydomain.org/oauth-callback</li>
<li>At the end, copy and paste the <strong>CLIENT ID</strong> and <strong>SECRET KEY</strong> in the Setup page</li>
</ul>
<p>GitHub authentication is <span class='red'>strongly recommended</span> for applications that run online.
If you do not enable it, any visitor will be able to access the backend of your application.
Once it is enabled, only accredited GitHub users that are collaborators of your repository will be allowed to access the Member area from the menu.
Notice that anonymous contributions will still be possible (from the menu <code>Add a resource</code>). Only accredited users will be able to review and publish the new record though.</p>
</section>
<section>
<h5>Templates and ontologies</h5>
<p>Templates are interfaces designed to setup the web forms for data collection. Each template corresponds to a topic of interest to be described (an entity). Templates can be created, modified, and deleted from the Member area. </p>
<h6>Resource templates</h6>
<section class='row'>
<section class='col-md-4 col-sm-4'>
<img src="docs/2createtemplate.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-7 col-sm-7'>To create a new template, click on <strong>Create a new template</strong> in the Member area.
First, you must provide a meaningful unique name (e.g. <code>Book</code>, <code>Person</code>) and the URI of a OWL class (e.g. <code>http://xmlns.com/foaf/spec/#term_Person</code>). Notice that <span class='red'>name and class cannot be modified</span>
in later stages (you can only delete and start a new template). </p>
</section>
<p>Once filled in name and class, you are redirected to a dedicated webpage for customizing the template.
Templates are lists of fields, each corresponding to a RDF property having as a subject an instance of the class already specified.</p>
<img src="docs/2createtpl.png" style="max-width:100%;" alt="">
<p>You can create new fields choosing between: textboxes (short texts), text areas (long texts), dropdown (select 1 term from list), and checkbox (multiple terms from list). </p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2textbox.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-4 col-sm-4'>For each new field you are asked to fill in a few details, like: display name (to be shown in the final web form for data entry), a description (that will appear next to the field), the RDF property associated to the field, values type or list (see below), and placeholder (an example value of the field). </p>
</section>
<p><span class='tip'>Tip!</span> You can type the complete URI of the RDF property or, if known, start with the prefix and property name. Autocompletion suggestions will appear (powered by <a href="https://lov.linkeddata.es/">LOV</a>). To accept a suggestion, click on the short name in violet. If you ignore suggestions, type the full URI of your property.</p>
<p>You can modify the order of fields or delete fields using the icons that appear at the bottom of each field box.</p>
<p></p>
<p><strong>TEXT BOX</strong></p>
<p>Text boxes can be used to record 4 types of information. In the <strong>VALUE TYPE</strong> field you can choose between:</p>
<ul>
<li><strong>Free text (Literal):</strong> short texts (e.g. a title). When this value is selected, a checkbox appears on the bottom of the box, asking whether to use this value as primary label. <span class='red'>At least one free text field</span> must be included in the template and <span class='red'>at most one free text field</span> must be flagged as primary label to associate a title to the record.</li>
<li><strong>Entity URI (from Wikidata, VIAF, or catalogue):</strong> the final field will provide autocompletion suggestions from wikidata or, if nothing is found on Wikidata, from the catalogue. Users may accept or reject the suggestions. (<em>NB. this field is not meant to record URLs of web resources. Use Free text instead.</em>). When this value is selected, a checkbox appears on the bottom of the box, asking whether to use this field value as a filter in the <strong>Explore</strong> page, i.e. it creates an index of catalogued resources by values of the selected field. You can create as many filters as you want.</li>
<li><strong>Location (from geonames):</strong> the final field will provide autocompletion suggestions from <a href="https://www.geonames.org/">geonames</a>, a specialised service for administrative and geographical locations. Like with <strong>Entity URI</strong>, when this value is selected, a checkbox appears on the bottom of the box, and this field can be used as filter in the <strong>Explore</strong> page.</li>
<li><strong>URL:</strong> to record URLs of web resources (e.g. an online video or a blog post). In the final form you will be asked if a copy of the website should be preserved in the long term. While you cannot store external documents in CLEF, CLEF sends a request to the Internet archive <a href="https://archive.org/web/">Wayback machine</a> to store a copy of your favourite webpages.</li>
</ul>
<p><strong>TEXT AREA</strong></p>
<p>A text area can include a long textual description. </p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2textarea.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>In this field you can automatically extract Named Entities (powered by <a href="https://spacy.io/">SpaCy</a>). After filling in the field, press return and wait for suggestions to appear at the bottom of the text area. Suggested entities (people, places, organisations, etc.) are matched to Wikidata entities and are stored as <strong>keywords</strong> associated to the record (<code>schema:keywords</code>) - not as values of the field. You can accept or reject suggestions.</p>
</section>
<p><strong>DROPDOWN AND CHECKBOX</strong></p>
<p>Dropdown and checkboxes behave similarly. These allow the final user to choose one or more terms from a list of controlled values. Specifically, dropdowns restrict the selection to one term from the list, while checkboxes allow multiple choice selections.</p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2checkbox.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>In the field <strong>VALUES</strong> you must provide a comma-separated list of terms to fill in the final list in dropdown or checkbox. List of terms are URIs associated with a label. Both internal and external vocabularies can be used (and mixed). In each line, write the URI of a resource, followed by comma and the label.</p>
</section>
<p><strong>DATE</strong></p>
<p>Date fields allow the final user to insert a date in a predefined format.</p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2date.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>Specifically, the format must be chosen among the available options in the field <strong>CALENDAR</strong>, which include: YYYY/MM/DD (Full Date: <code>xsd:gDate</code>), YYYY/MM (Month and Year: <code>xsd:gYearMonth</code>), YYYY (Year: <code>xsd:gYear</code>). The first two formats will be displayed as a calendar input, while the last one will function as a textbox, generating a dropdown of suggestions based on user input.</p>
</section>
<p><strong>MULTIMEDIA AND WEBSITE PREVIEW</strong></p>
<p>The Multimedia and Website preview fields operate similarly, enabling end users to insert links to external resources: Image, Audio and Video for the former, Webpages for the latter. A preview of the chosen resources will be displayed in the final record.</p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2multimedia.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>Multimedia fields have an extra parameter, <strong>MULTIMEDIA TYPE</strong>, which permits the selection of the desired type of multimedia resource, namely: Image (".jpg", ".jpeg", ".png", ".gif", ".ico", ".svg", etc.), Audio (".mp3", ".wav", ".ogg"), Video (".mp4", ".ogg", ".webm"), or All (including all the formats mentioned before). </p>
</section>
<p><strong>VOCABULARY</strong></p>
<p>A Vocabulary field behaves similarly to Entity URI (Text Box), i.e. suggestions are provided while typing. In this case, suggestions are terms gathered from available SKOS vocabularies.</p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2vocabulary.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>A collection of predefined SKOS vocabularies is already available (<strong>VOCABULARIES LIST</strong>), which include <a href="https://vocabs.dariah.eu/tadirah/en/">TaDiRAH</a>, <a href="https://op.europa.eu/en/web/eu-vocabularies/dataset/-/resource?uri=http://publications.europa.eu/resource/dataset/data-theme">Data theme</a>, <a href="https://op.europa.eu/en/web/eu-vocabularies/dataset/-/resource?uri=http://publications.europa.eu/resource/dataset/file-type">File type</a>, <a href="https://op.europa.eu/en/web/eu-vocabularies/dataset/-/resource?uri=http://publications.europa.eu/resource/dataset/access-right">Access right</a>, <a href="https://op.europa.eu/en/web/eu-vocabularies/concept-scheme/-/resource?uri=http://publications.europa.eu/resource/authority/language">Language</a>, <a href="https://schema.gov.it/lodview/controlled-vocabulary/licences">Licenses</a>, <a href="https://op.europa.eu/en/web/eu-vocabularies/dataset/-/resource?uri=http://publications.europa.eu/resource/dataset/frequency">Frequency</a>. Still, you can add a new vocabulary by clicking on the <span class='red'>ADD A NEW VOCABULARY</span> button. To add a new vocabulary you must provide a label, a link to the vocabulary webpage, a SPARQL endpoint, and a SPARQL query to retrieve terms. The query must return two default variables, i.e. ?uri and ?label, which respectively return the URI and a string label for the term. Once added, the new vocabulary will be saved and made available for later reuse. Additionally, it is possible to specify whether the final user can select more than one term for that particular field (<strong>NUMBER OF TERMS</strong>).</p>
</section>
<p><strong>KNOWLEDGE EXTRACTION</strong></p>
<p>A Knowledge Extraction field enables automatically extracting key Named Entities (URI-label pairs). To perform this task, users must provide one or more queries to be sent to specific APIs and SPARQL endpoints or to parse Static Files.</p>
<section class="row">
<section class="col-md-7 col-sm-7">
<img src="docs/2extractor.png" style="max-width: 100%;" alt ="">
</section>
<p class='col-md-5 col-sm-5'>Unlike other fields, this prototypical Knowledge Extraction tool does not allow specifying custom parameters. However, a much higher degree of flexibility is provided to Record creators.</p>
</section>
<h6>Data model</h6>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2datamodel.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>In CLEF it is not possible to import ontologies and vocabularies. Instead, the data model is created from the classes and properties specified in templates. The final data model is documented in a dedicated web page called <strong>Data Model</strong>, available from the footer of every web page. For each template, class, and property, the <a href="https://lov.linkeddata.es/">LOV</a> catalogue is queried to retrieve original labels associated with the URI. If the class or property is not indexed in LOV, the local label (the display name) is shown instead.</p>
</section>
</section>
<section>
<h5>Getting started!</h5>
<h6>Overview</h6>
<p>CLEF comes with the following webpages, accessible from the menu:</p>
<ul>
<li><strong>Homepage</strong> a landing page presenting the project. Title and payoff can be changed from the Setup page. Instead, the page content can be only changed manually by modifying the HTML file <code>templates/login.html</code></li>
<li><strong>Explore</strong> an automatically generated index of resources. For each template a tab is created for exploring resources of the specified class. Properties selected as filters in their respective templates are here used to create sections for exploration. For each template an alphabetical index is displayed. Other filters (i.e. those having Entity URI, locations, or controlled lists, as values) are shown sorted by distribution (i.e. most recurring values are shown first).</li>
<li><strong>Member area</strong> the backend of the application. Can be accessed via github authentication or, if not applicable, in anonymous mode. The welcome page shows the list of created records, and the actions possible on those (modify / publish / delete). From here, users can modify the Setup of the application and the form template.</li>
<li><strong>Add a resource</strong> create a new record in anonymous mode. To create a record with user credentials, access the member area via github authentication first.</li>
</ul>
<p>From the footer:</p>
<ul>
<li><strong>SPARQL endpoint</strong> a GUI for querying against your data in SPARQL. The same URL <code>{YOURDOMAIN}/sparql</code> corresponds to the SPARQL endpoint REST API.</li>
<li><strong>Data model</strong> the specifications of the ontology terms used in templates</li>
<li><strong>Editorial guidelines</strong> a list of tips for creating new records. The page is also available as right sidebar when creating a new record.</li>
</ul>
<p>Moreover, each record has a dedicated webpage, permanently identified by its URI. Likewise, terms from <em>internal</em> controlled vocabularies and new entities referenced in records (e.g. new entities created in Free text fields) have a dedicated webpage. External terms do not have dedicated page. Rather, a link to the source is provided (e.g. Wikidata items)</p>
<h6>Create a record</h6>
<img src="docs/2create.png" style='max-width:100%;' alt="">
<p>Users can create a new record in two modalities: anonymous or authenticated mode.</p>
<ul>
<li><strong>Anonymous users</strong> can create new reocrds via the button <code>Add a resource</code> in the menu. In this way the user is not authenticated, and their personal information is not stored. The IP address of the user is tracked and a limited number of new records can be created per day. Records created in this way can be accessed from the member area by accredited users, who can modify and publish the record.</li>
<li><strong>Authenticated users</strong> should first access the `Member area` from the menu to authenticate via Github. The user is redirected to Github authentication mask, where they are asked to give CLEF permissions to read/write repositories on their behalf. From the Member area, they can use the button <code>Create a new record</code>. <em>NB. Only users that are collaborators of the organisation and/or repository associated to the project can use this method (see Setup)</em>.</li>
</ul>
<p>The first step to create a new record is to select the template for the resource to be created.</p>
<img src="docs/2select.png" style='max-width:100%;' alt="">
<p>After selecting the template the user is redirected to the data entry interface. The page shows the fields specified in the associated template. On the top-right, a light bulb icon shows a shortcut to the editorial guidelines, including tips for data entry. Click on the icon to toggle the helper.</p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2new.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>Each field includes three elements: label, description (<code>i</code> icon), and input area. A tooltip shows a description of the expected value when hovering with the mouse. Likewise, a placeholder in the input area can show an example value. The input area can be a free-text field, a dropdown, or a checkbox.</p>
</section>
<p><strong>TEXT FIELD</strong></p>
<p>If the label is followed by <span class='red'>*</span>, the field is mandatory and it is used to associate a title to the record. While typing, a lookup service searches the catalogue to show whether records with a similar title already exist and prevents from data duplication. However, the lookup does not enforce any behaviour (duplicates <em>could</em> be created).</p>
<p>If followed by the Wikidata icon (a bar code), an autocomplete service is called while typing. The user is encouraged to reuse terms from Wikidata. If no matches with the input text are found in Wikidata, terms from the catalogue are also suggested, to encourage reuse and consistency of data.</p>
<img src="docs/autosuggest.png" style='max-width:100%;' alt="">
<p>To accept a suggestion, click on the link in the result (e.g. <code>Federico Fellini</code>). The selected value appears under the input area (highlighted in violet). Users can reject all suggestions and create a new value: press enter and the new value will appear under the input area (highlighted in orange). Multiple values are allowed in this type of field.</p>
<p>Text areas allow longer descriptions to be included and can be expanded vertically. </p>
<section class='row'>
<section class='col-md-7 col-sm-7'>
<img src="docs/2ner.png" style='max-width:100%;' alt="">
</section>
<p class='col-md-5 col-sm-5'>Once users finish typing, they can press return and wait for <em>named entities</em> to be extracted from the text (e.g. people, places, organizations). Such entities are reconciled to Wikidata and are stored as keywords associated to the record (not to the specific field). Suggestions can be rejected by clicking on the <code>x</code></p>
</section>
<p></p>
<h6>Manage records</h6>
<p>Records are accessible via the member area to authenticated users. Records are paginated and sorted by date (from the most recent to the oldest).</p>
<img src="docs/2backend.png" style='max-width:100%;' alt="">
<p>The list of records can be filtered by publication status:</p>
<ul>
<li><code>not reviewed</code> correspond to records created and never opened/modified. In the table of records, these records are flagged with <strong>STAGE: not modified</strong></li>
<li><code>under review</code> correspond to records created and modified at least once. In the table of records, these records are flagged with <strong>STAGE: modified</strong></li>
<li><code>published</code> correspond to records created, modified at least once and published, i.e. visible from the web page <strong>Explore</strong> and flagged with <strong>STAGE: published</strong>.</li>
</ul>
<p>In the column <code>ACTIONS</code>, the button <code>modify</code> allows a reviewer to modify a record. When clicking, the template is shown filled in with data, and values can be modified. After saving changes, the reviewer's name (if Gitub authentication is enabled) appears in the backend in the column <code>modified by</code>, and the status of the record changes to <code>modified</code>. Once it is reviewed at least once, the record appears in the Explore page.</p>
<p><em>NB. Before being reviewed, records do not appear in the Explore page. Records must be reviewed at least once before being published. Once a record has been published it cannot be temporarily removed from the Explore page (e.g. modifying a published record). Rather, the record keeps appearing in the Explore page, and the title is flagged with the label </em><code>draft</code>.</p>
<img src="docs/2draft.png" style='max-width:100%;' alt="">
<p>The button <code>review</code> allows a reviewer to modify a record and, if the review process is deemed over, to publish it straightaway. When modifying the record, the reviewer may decide to save the changes without publishing the record. After publication, the status changes to <code>published</code> and the label <code>draft</code> is removed from the title of published records.</p>
<p>To remove the record from the Explore page, it must be deleted. The button <code>delete</code> in the column <code>ACTIONS</code> allows a reviewer to delete a record permanently. If Github synchronisation is enabled, the action affects also the file stored in the repository.</p>
<h6>Visualize records</h6>
<p>New records are available at <code>{YOURDOMAIN}/view-{RESOURCEID}></code>. The web page shows fields in the same order as in the template.
When clicking on values, the website can redirect users to Wikidata pages (e.g. <code>Department of classical philology</code>), geonames pages (e.g. <code>Bologna</code>) or to internal pages describing terms belonging to controlled vocabularies (e.g. <code>female</code>).</p>
<img src="docs/2record.png" style='max-width:100%;' alt="">
<h6>Explore and search</h6>
<p>Records can be browsed in the page <code>Explore</code>. Records are grouped by template in tabs, also showing the number of records falling uder that cetegory. In each tab, sections are shown for each field specified as a filter in the template. </p>
<p>By default, an initial filter is created for the text field defined as <strong>primary label</strong>, and records are sorted alphabetically. Filters based on entities (i.e. text fields referencing entity URIs and locations, or dropdwon and checkboxes referencing controlled vocabularies) are grouped by frequency of values, and then sorted alphabetically.</p>
<img src="docs/2explore.png" style='max-width:100%;' alt="">
<p>The top-right search bar in the menu looks into the catalogue for resources titles. The search is performed on the <em>primary label</em> of records. Suggestions are shown while typing.</p>
<img src="docs/2search.png" style='max-width:100%;' alt="">
<h6>Data access</h6>
<p><strong>THE DATASET</strong></p>
<p>New resources (records) are associated with the <code>class</code> and the URI base specified in the template. Instead, URIs from Wikidata and geonames are directly reused and no information on their classes or properties are stored.</p>
<p>For every new resource a <code>named graph</code> is generated, which includes triples all having the same subject the <code>{resourceURI}</code> identifying the resource. The named graph appears in the form <code>{resourceURI}/</code> (the same URI of the resource, followed by a slash).</p>
<p>Basic provenance information is associated with named graphs. Whenever applicable the PROV ontology is reused, namely:</p>
<ul>
<li><code>RDFS.label</code> the label corresponds to the field set as primary label in template</li>
<li><code>PROV.wasAttributedTo</code> the creator of the resource. Can be anonymous if the user did not log in, or a URI including a normalised string of the github user email <code>{BASE}/{GITHUB_EMAIL}</code></li>
<li><code>PROV.wasInfluencedBy</code> the modifier of the resource.</li>
<li><code>PROV.generatedAtTime</code> the datetime of the creation/change of the record. Versioning details are not stored in the graph. To get details on the modified files (e.g. which fields were modified and by whom), users must review github commits.</li>
<li><code>DBPedia.currentStatus</code> the stage of the record in the editorial process. Values (literals) include:</li>
<ul>
<li><code>not modified</code> a record created that has not been reviewed</li>
<li><code>modified</code> a record reviewed that has been reviewed</li>
<li><code>published</code> a record reviewed and published.</li>
</ul>
</ul>
<p><strong>DATA MODEL</strong></p>
<p>A reference page dedicated to the data model is automatically generated by the system to support developers in data reuse. The webpage is available at <code>{YOURDOMAIN}>/model</code> (link in the footer).
The documentation is automatically generated by querying CLEF, to retrieve class and properties effectively used, and <a href="https://lov.linkeddata.es/">Linked Open Vocabularies (LOV)</a>, to retrieve labels and comments associated to the original specification in the ontology. If a property is not available from the LOV catalogue, a default label is shown.</p>
<p><strong>USER INTERFACE</strong></p>
<p>New records are available at <code>{YOURDOMAIN}/view-{RESOURCEID}</code>. The webpage also serves data as RDFa (according to <code>schema.org</code>). <em> NB. Dereferentiation is not a built-in feature. Users must refer and configure external persistent URI providers (e.g. <a href="https://w3id.org/">w3id</a>).</em></p>
<p><strong>SPARQL endpoint</strong></p>
<p>CLEF comes with a built-in SPARQL endpoint. A GUI for querying the SPARQL endpoint (read only) and a REST API for programmatic querying the triplestore is available at <code>{YOURDOMAIN}/sparql</code>.</p>
<p><strong>DATA DUMP</strong></p>
<p>When Github backup is enabled, a backup of records is there provided in Turtle (a file for each record). By default, files are included in a folder called <code>records</code>. Versioning is provided by github. Every time a change happens to a record in the application, an update is sent to Github.
Be aware that the synchronization between the triplestore and the repository is one-way, that is, changes happening on github only are not sent to the triplestore.</p>
</section>
<section>
<h5>Deployment</h5>
<p>CLEF is based on <a href="https://webpy.org/">webpy</a>. To deploy CLEF in production server, you'll need a professional web server process, such as <a href="https://gunicorn.org/">gunicorn</a>, which will serve the app. See <a href="https://webpy.readthedocs.io/en/latest/deploying.html">how to deploy web.py applications</a>.</p>
<p>DEPLOY WITH DOCKER</p>
<p>The <code>docker-compose.prod.yml</code> is set up for the server deployment using three docker containers, with nginx handling the static files as described above.</p>
<ul>
<li><code>docker-compose -f "docker-compose.prod.yml" up -d --build'</code></li>
<li>The app listens on port 80, so if you run this locally, access your browser at <code>http://localhost</code></li>
</ul>
</section>
<section>
<h5>Credits</h5>
CLEF is part of <a href="https://polifonia-project.eu/">Polifonia</a>, a H2020 funded project (101004746).
The repository is maintained by <code>marilena.daquino2@unibo.it</code>
</section>
</main>
<section id="aside">
<h3>Contents</h3>
<script type="text/javascript">
var toc = document.getElementById('aside');
var tocList = document.createElement("ul");
var headers = Array.from(document.querySelectorAll("h5,h6"))
for (i = 0; i < headers.length; i++){
// Create an id
name = "h"+i;
headers[i].id=name;
cl = headers[i].tagName
// a list item for the entry
tocListItem = document.createElement("li");
// a link for the h3
tocEntry = document.createElement("a");
tocEntry.setAttribute("href","#"+name);
tocEntry.setAttribute("class",cl);
tocEntry.innerText=headers[i].innerText;
tocListItem.appendChild(tocEntry);
tocList.appendChild(tocListItem);
}
toc.appendChild(tocList);
</script>
</section>
</body>
</html>