sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 04:12:45 +00:00
Code Issues Projects Releases Wiki Activity

Add prototype

Browse Source
This commit is contained in:
Patrick Jentsch
2019-06-03 14:57:09 +02:00
parent b8fa8f47ab
commit 86557443a2
43 changed files with 24638 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
vre_www/website/account.html Normal file
View File

@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Benutzerverwaltung</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<header>
<ul id="main-nav-account-dropdown" class="dropdown-content">
<li class="active">
<a href="account.html">Benutzerverwaltung</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:logout();">Abmelden</a>
</li>
</ul>
<nav class="blue-grey darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="portal.html" class="brand-logo">
<i class="material-icons hide-on-small-only">cloud</i>
Opaque
</a>
<a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="main-nav" class="right hide-on-med-and-down">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li class="active">
<a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
<i class="material-icons left">account_circle</i>
Benutzer
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="main-nav-mobile">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li class="active">
<a href="account.html">
<i class="material-icons">account_circle</i>
Benutzer
</a>
</li>
<li>
<a href="javascript:logout();">
<i class="material-icons">account_circle</i>
Abmelden
</a>
</li>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-content">
<span class="card-title">Benutzerverwaltung</span>
<p>&nbsp;</p>
<form id="user_form" class="row">
<div class="input-field col s12 m6">
<i class="material-icons prefix">account_circle</i>
<input id="user-form-first-name" type="text">
<label for="first-form-first-name">Vorname</label>
</div>
<div class="input-field col s12 m6">
<input id="user-form-last-name" type="text">
<label for="first-form-last-name">Nachname</label>
</div>
<div class="input-field col s12 m6">
<i class="material-icons prefix">email</i>
<input id="user-form-e-mail" type="text">
<label for="first-form-e-mail">E-Mail</label>
</div>
<div class="input-field col s12 m6">
<p style="height: 64px;">
<label>
<input id="user-form-notifications" type="checkbox" checked="checked">
<span>Benachrichtigungen per E-Mail erhalten</span>
</label>
</p>
</div>
<div class="input-field col s12 m6">
<i class="material-icons prefix">phone</i>
<input id="user-form-phone" type="text">
<label for="first-form-phone">Phone</label>
</div>
<div class="input-field col s12 right-align">
<a id="user-form-reset" class="waves-effect waves-light btn disabled">Verwerfen</a>
<a id="user-form-submit" class="waves-effect waves-light btn disabled">Bestätigen</a>
</div>
</form>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Texterkennung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
Textdaten werden aus Scans oder Fotos zur anschließenden
Weiterverarbeitung extrahiert.
</p>
</div>
<div class="card-action right-align">
<a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Linguistische Datenverarbeitung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
weiteren Informationen angereichert.
</p>
</div>
<div class="card-action right-align">
<a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Auftragsübersicht</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
Aufträge aufgelistet.
</p>
</div>
<div class="card-action right-align">
<a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-2">
<div class="container">
<div class="row">
<div class="col s12">
<p class="grey-text text-lighten-4 left">
<a href="https://www.uni-bielefeld.de/">
<img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
</a>
</p>
<p class="grey-text text-lighten-4 right">
Gefördert durch die<br>
<a href="https://www.dfg.de/">
<img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Copyright
<a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
<a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
</div>
</div>
</footer>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/account.js"></script>
</body>
</html>

9067
vre_www/website/css/materialize.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

13
vre_www/website/css/materialize.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

43
vre_www/website/css/style.css Normal file
View File

@@ -0,0 +1,43 @@
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.tabs .tab {
cursor: pointer;
}
.tabs .tab a {
color: rgba(0,0,0,0.87);
}
.tabs .tab a:hover {
background-color: #eceff1;
color: rgba(0,0,0,0.87);
}
.tabs .tab a.active, .tabs .tab a:focus.active {
background-color: #fff;
color: rgba(0,0,0,0.87);
}
.tabs .indicator {
background-color: #455a64;
}
.no-padding {
padding: 0;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}

BIN
vre_www/website/images/dfg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
vre_www/website/images/sfb_1288-alt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
vre_www/website/images/sfb_1288.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
vre_www/website/images/universitaet_bielefeld.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
vre_www/website/images/workflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
vre_www/website/images/workflow.xml Normal file
View File

File diff suppressed because one or more lines are too long

54
vre_www/website/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Anmeldung</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<main class="valign-wrapper">
<div class="container">
<div class="row">
<div class="col card s12 m6 offset-m3">
<div class="card-content">
<span class="card-title"><i class="material-icons left">cloud</i> Opaque</span>
</div>
</div>
<div class="col card s12 m6 offset-m3">
<div class="card-content">
<span class="card-title">Anmeldung</span>
<form id="login_form" class="row" action="javascript:LoginFormSubmitHandler();">
<div class="input-field col s12">
<input id="login-form-user" type="text" class="validate" autofocus="autofocus" onfocus="this.select()">
<label for="login-form-user">Benutzername</label>
</div>
<div class="input-field col s12">
<input id="login-form-password" type="password" class="validate">
<label for="login-form-password">Passwort</label>
<span class="helper-text" data-error="Benutzername oder Passwort falsch"></span>
</div>
<div class="input-field col s12 hide">
<input id="login_form_submit" type="submit">
</div>
</form>
</div>
<div class="card-action right-align">
<a href="javascript:LoginFormSubmitHandler();" class="waves-effect waves-light btn">Anmelden</a>
</div>
</div>
</div>
</div>
</main>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/index.js"></script>
</body>
</html>

197
vre_www/website/job_manager.html Normal file
View File

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Auftragsverwaltung</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<header>
<ul id="main-nav-account-dropdown" class="dropdown-content">
<li>
<a href="account.html">Benutzerverwaltung</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:logout();">Abmelden</a>
</li>
</ul>
<nav class="blue-grey darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="portal.html" class="brand-logo">
<i class="material-icons hide-on-small-only">cloud</i>
Opaque
</a>
<a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="main-nav" class="right hide-on-med-and-down">
<li class="active">
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
<i class="material-icons left">account_circle</i>
Benutzer
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="main-nav-mobile">
<li class="active">
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a href="account.html">
<i class="material-icons">account_circle</i>
Benutzer
</a>
</li>
<li>
<a href="javascript:logout();">
<i class="material-icons">account_circle</i>
Abmelden
</a>
</li>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-content">
<span class="card-title">Auftragsübersicht</span>
<p>
Die Auftragsübersicht bietet eine Übersicht über Ihre
Aufträge. Nach erfolgreichem Abschluss können die Ergebnisse
hier heruntergeladen werden.
</p>
<p>&nbsp;</p>
<div class="card-panel no-padding z-depth-0">
<ul class="tabs">
<li class="tab col s3">
<a data-job-filter="" class="active">Alle</a>
</li>
<li class="tab col s3">
<a data-job-filter="finished">Abgeschlossen</a>
</li>
<li class="tab col s3">
<a data-job-filter="running">Laufend</a>
</li>
<li class="tab col s3">
<a data-job-filter="queued">Wartend</a>
</li>
</ul>
</div>
<ul id="jobs-collapsible" class="collapsible expandable z-depth-0"></ul>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Linguistische Datenverarbeitung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
weiteren Informationen angereichert.
</p>
</div>
<div class="card-action right-align">
<a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Texterkennung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
Textdaten werden aus Scans oder Fotos zur anschließenden
Weiterverarbeitung extrahiert.
</p>
</div>
<div class="card-action right-align">
<a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-2">
<div class="container">
<div class="row">
<div class="col s12">
<p class="grey-text text-lighten-4 left">
<a href="https://www.uni-bielefeld.de/">
<img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
</a>
</p>
<p class="grey-text text-lighten-4 right">
Gefördert durch die<br>
<a href="https://www.dfg.de/">
<img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Copyright
<a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
<a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
</div>
</div>
</footer>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/job_manager.js"></script>
</body>
</html>

110
vre_www/website/js/account.js Normal file
View File

@@ -0,0 +1,110 @@
function setUserCallback() {
userFormEMailElement.value = user["e-mail"];
userFormFirstNameElement.value = user["firstName"];
userFormLastNameElement.value = user["lastName"];
userFormNotificationsElement.checked = user["notifications"];
userFormPhoneElement.value = user["phone"];
M.updateTextFields();
userFormEMailElement.addEventListener("input", event => {
eMailChanged = (user["e-mail"] != userFormEMailElement.value) ? true : false;
evaluateUserForm();
});
userFormFirstNameElement.addEventListener("input", event => {
firstNameChanged = (user["firstName"] != userFormFirstNameElement.value) ? true : false;
evaluateUserForm();
});
userFormLastNameElement.addEventListener("input", event => {
lastNameChanged = (user["lastName"] != userFormLastNameElement.value) ? true : false;
evaluateUserForm();
});
userFormNotificationsElement.addEventListener("change", event => {
notificationsChanged = (user["notifications"] != userFormNotificationsElement.checked) ? true : false;
evaluateUserForm();
});
userFormPhoneElement.addEventListener("input", event => {
phoneChanged = (user["phone"] != userFormPhoneElement.value) ? true : false;
evaluateUserForm();
});
userFormResetElement.addEventListener("click", event => {
eMailChanged = false;
firstNameChanged = false;
lastNameChanged = false;
notificationsChanged = false;
phoneChanged = false;
userFormEMailElement.value = user["e-mail"];
userFormFirstNameElement.value = user["firstName"];
userFormLastNameElement.value = user["lastName"];
userFormNotificationsElement.checked = user["notifications"];
userFormPhoneElement.value = user["phone"];
evaluateUserForm();
});
userFormSubmitElement.addEventListener("click", event => {
if (eMailChanged) {
user["e-mail"] = userFormEMailElement.value;
eMailChanged = false;
}
if (firstNameChanged) {
user["firstName"] = userFormFirstNameElement.value;
firstNameChanged = false;
}
if (lastNameChanged) {
user["lastName"] = userFormLastNameElement.value;
lastNameChanged = false;
}
if (notificationsChanged) {
user["notifications"] = userFormNotificationsElement.checked;
notificationsChanged = false;
}
if (phoneChanged) {
user["phone"] = userFormPhoneElement.value;
phoneChanged = false;
}
localStorage.setItem("user", JSON.stringify(user));
M.toast({html: "Benutzerdaten wurden aktualisiert."});
evaluateUserForm();
});
}
function evaluateUserForm() {
var somethingChanged;
somethingChanged = eMailChanged || firstNameChanged || lastNameChanged || notificationsChanged || phoneChanged;
if (somethingChanged) {
userFormResetElement.classList.remove("disabled");
userFormSubmitElement.classList.remove("disabled");
} else {
userFormResetElement.classList.add("disabled");
userFormSubmitElement.classList.add("disabled");
}
}
var eMailChanged;
var firstNameChanged;
var lastNameChanged;
var notificationsChanged;
var phoneChanged;
var userFormEMailElement;
var userFormFirstNameElement;
var userFormLastNameElement;
var userFormNotificationsElement;
var userFormPhoneElement;
var userFormResetElement;
var userFormSubmitElement;
eMailChanged = false;
firstNameChanged = false;
lastNameChanged = false;
notificationsChanged = false;
phoneChanged = false;
userFormFirstNameElement = document.getElementById("user-form-first-name");
userFormLastNameElement = document.getElementById("user-form-last-name");
userFormEMailElement = document.getElementById("user-form-e-mail");
userFormNotificationsElement = document.getElementById("user-form-notifications");
userFormPhoneElement = document.getElementById("user-form-phone");
userFormResetElement = document.getElementById("user-form-reset");
userFormSubmitElement = document.getElementById("user-form-submit");

17
vre_www/website/js/index.js Normal file
View File

@@ -0,0 +1,17 @@
/**
* Process the submit event from the login form.
*/
function LoginFormSubmitHandler() {
var loginFormPasswordElement;
var loginFormUserElement;
loginFormPasswordElement = document.getElementById("login-form-password");
loginFormUserElement = document.getElementById("login-form-user");
try {
login(loginFormPasswordElement.value, loginFormUserElement.value);
} catch(e) {
loginFormPasswordElement.classList.add("invalid");
loginFormUserElement.classList.add("invalid");
}
}

43
vre_www/website/js/job_form_handler.js Normal file
View File

@@ -0,0 +1,43 @@
function jobFormChangeHandler() {
if (jobFormFileElement.files.length === 0 || jobFormLanguageElement.value === "" || jobFormNameElement.value === "") {
jobFormSubmitElement.classList.add("disabled");
} else {
jobFormSubmitElement.classList.remove("disabled");
}
}
function jobFormSubmitHandler() {
createJob(jobFormFileElement.files[0], jobFormLanguageElement.value, jobFormNameElement.value, jobFormServiceElement.value, user["id"]);
}
var jobFormElement;
var jobFormFileElement;
var jobFormLanguageElement;
var jobFormNameElement;
var jobFormServiceElement;
var jobFormSubmitElement;
jobFormElement = document.getElementById("job_form");
jobFormFileElement = document.getElementById("job_form_file");
jobFormLanguageElement = document.getElementById("job_form_language");
jobFormNameElement = document.getElementById("job_form_name");
jobFormServiceElement = document.getElementById("job_form_service");
jobFormSubmitElement = document.getElementById("job_form_submit");
jobFormFileElement.addEventListener("change", jobFormChangeHandler);
jobFormLanguageElement.addEventListener("change", jobFormChangeHandler);
jobFormNameElement.addEventListener("input", jobFormChangeHandler);
M.Modal.init(
document.getElementById("create_job"),
{
"onCloseEnd": modal => {
jobFormElement.reset();
M.updateTextFields();
}
}
);

172
vre_www/website/js/job_manager.js Normal file
View File

@@ -0,0 +1,172 @@
var JOBLANGUAGES = {
"nlp": {
"de": "Deutsch",
"en": "Englisch",
"fr": "Französisch",
"pt": "Portugisisch",
"es": "Spanisch"
},
"ocr": {
"deu": "Deutsch",
"deu_frak": "Deutsch (Fraktur)",
"eng": "Englisch",
"fra": "Französisch",
"por": "Portugisisch",
"spa": "Spanisch"
}
};
var JOBSERVICEICONS = {
"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page"
};
var JOBSTATUSCOLORS = {
"failed": "pink",
"finished": "teal",
"queued": "amber",
"running": "indigo"
};
var JOBSTATUSNAMES = {
"failed": 'Fehlgeschlagen',
"finished": 'Abgeschlossen',
"queued": 'Wartend',
"running": 'Laufend'
}
var JOBSTATUSTEXTS = {
'failed': 'Es ist ein Fehler bei der Bearbeitung des Auftrages aufgetreten. \
Für weitere Informationen wenden Sie sich mit dem \
Auftragskennzeichen an den Seitenbetreiber.',
'finished': 'Der Auftrag ist abgeschlossen, die Ergebnisse können nun \
heruntergeladen werden. Die Quelldatei bleibt verfügbar und \
kann jederzeit abgerufen werden.',
'queued': 'Der Auftrag befindet sich in der Warteschlange und wird vom \
System bearbeitet, sobald Rechenkapazität verfügbar ist.',
'running': 'Dieser Auftrag wird gerade bearbeitet, sobald der Vorgang \
abgeschlossen wurde, können die Ergebnisse hier heruntergeladen \
werden.'
}
var jobsCollapsibleElement;
var jobStatusFilter;
jobsCollapsibleElement = document.getElementById("jobs-collapsible");
jobStatusFilter = '';
M.Collapsible.init(
jobsCollapsibleElement,
{accordion: false}
);
document.querySelectorAll('[data-job-filter]').forEach(jobFilterElement => {
jobFilterElement.addEventListener("click", event => {
jobStatusFilter = event.currentTarget.getAttribute("data-job-filter");
jobListManager();
});
});
function jobListManager() {
jobs.forEach(job => {
var jobElement;
jobElement = document.getElementById(job["id"]);
// Check whether an element with id = job['id'] is found
if (jobElement) {
var jobResultElement;
var jobStatusElement;
var jobStatusTextElement;
jobResultElement = jobElement.querySelector('.job-result');
jobStatusElement = jobElement.querySelector('.job-status');
jobStatusTextElement = jobElement.querySelector('.job-status-text');
// Check whether the job status changed since it got printed
if (jobStatusElement.innerHTML != JOBSTATUSNAMES[job["status"]]) {
// Update the job status element (label and color)
jobStatusElement.innerHTML = JOBSTATUSNAMES[job["status"]];
jobStatusElement.classList.remove("pink", "teal", "amber", "indigo");
jobStatusElement.classList.add(JOBSTATUSCOLORS[job["status"]]);
// Update the job status text element
jobStatusTextElement.innerHTML = JOBSTATUSTEXTS[job["status"]];
// Check whether the new job status is 'finished'
if (job["status"] === "finished") {
// Unhide the jobs result element
jobResultElement.classList.remove("hide");
}
}
// If the job status doesn't match the current filter, remove it
//if (jobStatusFilter != "" && job["status"] != jobStatusFilter) jobElement.remove();
// If the job status doesn't match the current filter, hide it
if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
jobElement.classList.add('hide');
} else {
jobElement.classList.remove('hide');
}
} else {
// If the job status doesn't match the current filter, skip it
//if (jobStatusFilter != "" && job["status"] != jobStatusFilter) return;
jobElement = document.createElement("li");
jobElement.setAttribute("id", job["id"]);
// If the job status doesn't match the current filter, skip it
if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
jobElement.classList.add('hide');
} else {
jobElement.classList.remove('hide');
}
jobElement.innerHTML =
'<div class="collapsible-header">'
+ '<i class="material-icons dropdown-indicator">arrow_drop_down</i>'
+ '<i class="material-icons">'
+ JOBSERVICEICONS[job["service"]]
+ '</i>'
+ job["name"]
+ '<span class="job-status new badge ' + JOBSTATUSCOLORS[job["status"]] + '" data-badge-caption="">'
+ JOBSTATUSNAMES[job["status"]]
+ '</span>'
+ '</div>'
+ '<div class="collapsible-body">'
+ '<p class="job-status-text">' + JOBSTATUSTEXTS[job["status"]] + '</p>'
+ '<p>&nbsp;</p>'
+ '<p class="overflow-hidden">'
+ '<i class="material-icons blue-grey-text text-darken-2 left">bookmark</i>'
+ 'Auftragskennzeichen: '
+ job["id"]
+ '</p>'
+ '<p class="overflow-hidden">'
+ '<i class="material-icons blue-grey-text text-darken-2 left">insert_drive_file</i>'
+ 'Datei: '
+ '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"] + '">'
+ job["file"]
+ '</a>'
+ '</p>'
+ '<p class="overflow-hidden">'
+ '<i class="material-icons blue-grey-text text-darken-2 left">language</i>'
+ 'Sprache: '
+ JOBLANGUAGES[job["service"]][job["language"]]
+ '</p>'
+ '<p class="job-result' + (job['status'] != 'finished' ? ' hide' : '') + ' overflow-hidden">'
+ '<i class="material-icons blue-grey-text text-darken-2 left">archive</i>'
+ 'Ergebnisse: '
+ '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"].split(".").slice(0, -1).join(".") + '_-_' + job["service"] + '.zip">'
+ 'Download'
+ '</a>'
+ '</p>'
+ '</div>';
jobElement.querySelector('.collapsible-header').addEventListener("click", event => {
var dropdownIndicatorElement;
dropdownIndicatorElement = event.currentTarget.querySelector('.dropdown-indicator');
if (dropdownIndicatorElement.innerHTML === "arrow_drop_down") {
dropdownIndicatorElement.innerHTML = "arrow_drop_up";
} else {
dropdownIndicatorElement.innerHTML = "arrow_drop_down";
}
});
jobsCollapsibleElement.appendChild(jobElement);
}
});
}
setJobsCallback = jobListManager;

12374
vre_www/website/js/materialize.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

6
vre_www/website/js/materialize.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

154
vre_www/website/js/vre.js Normal file
View File

@@ -0,0 +1,154 @@
var JOBSPOLLINTERVALL = 1000;
var USERS = {
"testbenutzer": {
"e-mail": "t.benutzer@uni-bielefeld.de",
"firstName": "Test",
"id": "testbenutzer",
"lastName": "Benutzer",
"notifications": true,
"password": "passwort",
"phone": "+49 521 106-XXXXX"
}
};
// The job list of the current user
var jobs;
// The current user
var user;
/**
* Login a user and redirect the visitor to the portal page.
* @param {string} password - The password to use for login.
* @param {string} user - The user to use for login.
*/
function login(password, user) {
// Check if the user exists
if (USERS[user]) {
// Check if the password is correct
if (USERS[user]["password"] === password) {
// Save the user data to the local storage
localStorage.setItem("user", JSON.stringify(USERS[user]));
// Redirect the visitor to the portal page
window.location = "/vre/portal.html";
return;
}
}
// The function only ends here, when the user doesn't exists or when the
// password was wrong, in both cases it should throw an exception
throw "User doesn't exist or password was wrong!";
}
/**
* Logout the current user and redirect the visitor to the login page.
*/
function logout() {
// delete all data from the local storage
localStorage.clear();
// redirect to the login page
window.location = "/vre/";
}
/**
* The main function, which is executed on each page after it's completly
* loaded.
*/
function main() {
M.Dropdown.init(
document.getElementById("main-nav-account"),
{"constrainWidth": false, "coverTrigger": false}
);
// Indicates whether the current page is the login page
var isLoginPage;
// Indicates whether the current page is a service page (like ocr or nlp)
var isServicePage;
isLoginPage = window.location.pathname === "/vre/" || window.location.pathname === "/vre/index.html";
isServicePage = window.location.pathname === "/vre/nlp.html" || window.location.pathname === "/vre/ocr.html";
// Check if the visitor is logged in, by checking if the local storage
// contains a user
if (localStorage.getItem("user")) {
// Redirect to the portal page if the current page is the login page
if (isLoginPage) window.location = "portal.html";
// Load user from the local storage
user = JSON.parse(localStorage.getItem("user"));
// If a function named setUserCallback exists, call it
if (typeof(setUserCallback) === "function") setUserCallback();
} else {
// Redirect to the login page if the current page isn't the login page
if (!isLoginPage) window.location = "index.html";
return;
}
// Check if the local storage contains a copy of the users job list
if (localStorage.getItem("jobs")) {
// Load the job list from the local storage
jobs = JSON.parse(localStorage.getItem("jobs"));
// If a function named setJobsCallback exists, call it
if (typeof(setJobsCallback) === "function") setJobsCallback();
} else {
// Load the job list from the vre server
getJobs({"user": user["id"]}, function(newJobs) {
jobs = newJobs;
// If a function named setJobsCallback exists, call it
if (typeof(setJobsCallback) === "function") setJobsCallback();
});
}
// Set a continous poll for the job list
setInterval(getJobs, JOBSPOLLINTERVALL, {"user": user["id"]}, updateJobs);
}
/**
* Updates the job list in the local storage and the contents of the global
* job list variable. It also informs the visitor about job status changes.
* @param {Object[]} newJobs - The new job list.
*/
function updateJobs(newJobs) {
var i;
// Indicates whether the new job list differs from the old one
var hasJobsChanged;
// The new job list as JSON string
var newJobsAsJSONString;
newJobsAsJSONString = JSON.stringify(newJobs);
hasJobsChanged = localStorage.getItem("jobs") != newJobsAsJSONString;
if (hasJobsChanged) {
// Iterate over the old job list
for (i = 0; i < jobs.length; i++) {
// Check whether the status of the currently iterated job changed
if (jobs[i]["status"] != newJobs[i]["status"]) {
// Inform the visitor with a toast message about the new status
switch (newJobs[i]["status"]) {
case "failed":
M.toast({html: "Auftrag '" + jobs[i]["name"] + "' is fehlgeschlagen."});
break;
case "finished":
M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wurde abgeschlossen."});
break;
case "running":
M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wird bearbeitet."});
break;
default:
}
}
}
// Save the new job list to the local storage
localStorage.setItem("jobs", newJobsAsJSONString);
// Replace the global job list variable with the new job list
jobs = newJobs;
// If a function named setJobsCallback exists, call it
if (typeof(setJobsCallback) === "function") setJobsCallback();
}
}
window.onload = main;

180
vre_www/website/js/vre_manager_rest.js Normal file
View File

@@ -0,0 +1,180 @@
var VREMANAGER = "http://" + window.location.hostname + ":5000";
/**
* Sends an asynchronous HTTP request to the vre manager in order to create a
* new job.
* @param {File} file - The file to process with the job.
* @param {string} language - The language of the file contents.
* @param {string} name - A name for the job, this doesn't have to be unique.
* @param {string} service - The service this job belongs to.
* @param {string} user - The user this job belongs to.
* @param {function} [callback] - A function, that is called after the HTTP
* request finished.
*/
function createJob(file, language, name, service, user, callback = console.log) {
var formData;
var oReq;
var query;
formData = new FormData();
formData.append("file", file);
oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", function(oEvent) {
if (this.status === 201) {
M.toast({html: "Auftrag '" + name + "' wurde erstellt."});
callback(JSON.parse(this.responseText));
} else {
if (this.status === 415) {
M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Unerwarteter Dateityp)"});
} else {
M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Fehlercode: " + this.status + ")"});
}
}
});
query = "?language=" + language + "&name=" + name + "&service=" + service + "&user=" + user;
oReq.open("POST", VREMANAGER + "/vre/jobs" + query);
oReq.send(formData);
}
/**
* Sends an asynchronous HTTP request to the vre manager in order to delete an
* existing job.
* @param {string} id - The id of the job to be deleted.
* @param {function} [callback] - A function, that is called after the HTTP
* request finished.
*/
function deleteJob(id, callback = console.log) {
var oReq;
oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", function(oEvent) {
if (this.status === 204) {
M.toast({html: "Auftrag '" + id + "' wurde gelöscht."});
callback();
} else {
M.toast({html: "Auftrag '" + id + "' konnte nicht gelöscht werden.<br>(Fehlercode: " + this.status + ")"});
}
});
oReq.open("DELETE", VREMANAGER + "/vre/jobs/" + id);
oReq.send();
}
/**
* Sends an asynchronous HTTP request to the vre manager in order to get all
* informations about a specific and existing job.
* @param {string} id - The id of the job to get the information from.
* @param {function} [callback] - A function, that is called after the HTTP
* request finished.
*/
function getJob(id, callback = console.log) {
var oReq;
oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", function(oEvent) {
if (this.status === 200) {
callback(JSON.parse(this.responseText));
}
});
oReq.open("GET", VREMANAGER + "/vre/jobs/" + id);
oReq.send();
}
/**
* Sends an asynchronous HTTP request to the vre manager in order to get a
* (filtered) list of all jobs.
* @param {object} [filters=null] - An object containing filters. E.g.
* {'service': 'nlp', 'status': 'finished'}
* @param {function} [callback] - A function, that is called after the HTTP
* request finished.
*/
function getJobs(filters = null, callback = console.log) {
var oReq;
var query;
oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", function(oEvent) {
if (this.status === 200) {
callback(JSON.parse(this.responseText));
}
});
query = ""
if (filters) {
if (filters["name"]) {
query += (query === "") ? "?" : "&";
query += "name=" + filters["name"];
}
if (filters["service"]) {
query += (query === "") ? "?" : "&";
query += "service=" + filters["service"];
}
if (filters["status"]) {
query += (query === "") ? "?" : "&";
query += "status=" + filters["status"];
}
if (filters["user"]) {
query += (query === "") ? "?" : "&";
query += "user=" + filters["user"];
}
}
oReq.open("GET", VREMANAGER + "/vre/jobs" + query);
oReq.send();
}
/**
* Sends an asynchronous HTTP request to the vre manager in order to update the
* values of a specific and existing job.
* @param {string} id - The id of the job to update.
* @param {object} [newValues=null] - An object containing the new values. E.g.
* {'status': 'finished'}
* @param {function} [callback] - A function, that is called after the HTTP
* request finished.
*/
function updateJob(id, newValues = null, callback = console.log) {
var oReq;
var query;
oReq = new XMLHttpRequest();
oReq.addEventListener("loadend", function(oEvent) {
if (this.status === 200) {
M.toast({html: "Auftrag '" + id + "' wurde aktualisiert."});
callback(JSON.parse(this.responseText));
} else {
M.toast({html: "Auftrag '" + id + "' konnte nicht aktualisiert werden.<br>(Fehlercode: " + this.status + ")"});
}
});
query = ""
if (newValues) {
if (newValues["name"]) {
query += (query === "") ? "?" : "&";
query += "name=" + newValues["name"];
}
if (newValues["language"]) {
query += (query === "") ? "?" : "&";
query += "language=" + newValues["language"];
}
if (newValues["report"]) {
query += (query === "") ? "?" : "&";
query += "report=" + newValues["report"];
}
if (newValues["status"]) {
query += (query === "") ? "?" : "&";
query += "status=" + newValues["status"];
}
}
oReq.open("PUT", VREMANAGER + "/vre/jobs/" + id + query);
oReq.send();
}

295
vre_www/website/nlp.html Normal file
View File

@@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Linguistische Datenverarbeitung</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<header>
<ul id="main-nav-account-dropdown" class="dropdown-content">
<li>
<a href="account.html">Benutzerverwaltung</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:logout();">Abmelden</a>
</li>
</ul>
<nav class="blue-grey darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="portal.html" class="brand-logo">
<i class="material-icons hide-on-small-only">cloud</i>
Opaque
</a>
<a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="main-nav" class="right hide-on-med-and-down">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li class="active">
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
<i class="material-icons left">account_circle</i>
Benutzer
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="main-nav-mobile">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li class="active">
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a href="account.html">
<i class="material-icons">account_circle</i>
Benutzer
</a>
</li>
<li>
<a href="javascript:logout();">
<i class="material-icons">account_circle</i>
Abmelden
</a>
</li>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-content">
<span class="card-title">Linguistische Datenverarbeitung</span>
<p>
Mit Hilfe computergestützter linguistischer
Datenverarbeitungsmethoden können Textdateien mit weiteren
Informationen angereichert werden. Auf dieser Plattform werden
derzeit die im folgenden aufgeführten
Textverarbeitungsroutinen in automatisierter Form zur
Verfügung gestellt.
</p>
<div class="row">
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Tokenisierung
</span>
<p>
Aufteilung eines Textes in Sätze und Wörter. Dies
ist zur weiteren Verarbeitung notwendig.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Lemmatisierung
</span>
<p>
Reduktion der Flexionsformen eines Wortes auf dessen
Grundform.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Part-of-speech-Tagging
</span>
<p>
Kontext- und definitionsbezogene Zuordnung von Wörtern
und Satzzeichen zu Wortarten.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Eigennamenerkennung
</span>
<p>
Identifikation von Wörtern, die eine Entität
beschreiben, wie Firmen- und Personennamen.
</p>
</div>
</div>
</div>
</div>
<p>
Die Ausgabe erfolgt in Form einer <i>verticalized text</i>
Datei (Dateiendung: .vrt). In diesem Format kann der Text
einfach in Auswertungsprogramme, wie zum Beispiel der <a href="http://cwb.sourceforge.net/">IMS Open Corpus Workbench</a>,
eingefügt werden.
</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Auftrag erstellen</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>
Auftragsformular zur linguistische Datenverarbeitung von
Textdateien.
</p>
</div>
<div class="card-action right-align">
<a href="#create_job" class="waves-effect waves-light btn modal-trigger">Erstellen</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Auftragsübersicht</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
Hier wird der aktuelle Status sämtlicher vom Benutzer
erstellten Aufträge aufgelistet.
</p>
</div>
<div class="card-action right-align">
<a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
</div>
</div>
</div>
</div>
</div>
<div id="create_job" class="modal overflow-visible">
<div class="modal-content">
<h4 style="line-height: 60px;"><i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>Linguistische Datenverarbeitung</h4>
<p>
Um den Auftrag abschicken zu können, müssen alle Formularfelder
ausgefüllt werden. Anschließend erhalten Sie fortlaufende
Benachrichtigungen über den aktuellen Bearbeitungsstand des
Auftrags. Nach erfolgreicher Bearbeitung, stehen die Ergebnisse in
der <a href="job_manager.html">Auftragsverwaltung</a> zum Download
zur Verfügung.
</p>
<form id="job_form" class="row">
<div class="input-field col s12">
<input placeholder="Mein Auftragsname" id="job_form_name" type="text" class="validate">
<label for="job_form_name">Auftragsname</label>
</div>
<div class="file-field input-field col s12 m6">
<div class="btn">
<span>Datei</span>
<input id="job_form_file" type="file" accept="text/plain">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field col s12 m6">
<select id="job_form_language">
<option value="" disabled selected>Option auswählen</option>
<option value="de">Deutsch</option>
<option value="en">Englisch</option>
<option value="fr">Französisch</option>
<option value="pt">Portugisisch</option>
<option value="es">Spanisch</option>
</select>
<label>Sprache der Eingabedatei</label>
</div>
<div class="input-field col s12 m6 hide">
<select id="job_form_service">
<option value="nlp" selected></option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Abbrechen</a>
<a href="javascript:jobFormSubmitHandler();" id="job_form_submit" class="modal-close waves-effect waves-green btn disabled">Abschicken</a>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-2">
<div class="container">
<div class="row">
<div class="col s12">
<p class="grey-text text-lighten-4 left">
<a href="https://www.uni-bielefeld.de/">
<img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
</a>
</p>
<p class="grey-text text-lighten-4 right">
Gefördert durch die<br>
<a href="https://www.dfg.de/">
<img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Copyright
<a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
<a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
</div>
</div>
</footer>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/job_form_handler.js"></script>
</body>
</html>

293
vre_www/website/ocr.html Normal file
View File

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Texterkennung</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<header>
<ul id="main-nav-account-dropdown" class="dropdown-content">
<li>
<a href="account.html">Benutzerverwaltung</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:logout();">Abmelden</a>
</li>
</ul>
<nav class="blue-grey darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="portal.html" class="brand-logo">
<i class="material-icons hide-on-small-only">cloud</i>
Opaque
</a>
<a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="main-nav" class="right hide-on-med-and-down">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li class="active">
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
<i class="material-icons left">account_circle</i>
Benutzer
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="main-nav-mobile">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li class="active">
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a href="account.html">
<i class="material-icons">account_circle</i>
Benutzer
</a>
</li>
<li>
<a href="javascript:logout();">
<i class="material-icons">account_circle</i>
Abmelden
</a>
</li>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-content">
<span class="card-title">Texterkennung</span>
<p>
Der hier zur Verfügung gestellte Dienst basiert auf Verfahren der
optischen Zeichenerkennung. Dabei werden durch optische Analysemethoden
und einen anschließenden Abgleich mit Wörterbüchern aus Bilddaten,
wie Fotos oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
ermöglicht eine computergestützte Verarbeitung von Dokumenten.
</p>
<div class="row">
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Eingabe von Bilddaten
</span>
<p>
Über ein Auftragsformular können Bilddaten in Form von
PDF-Dateien hochgeladen werden.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Optische Zeichenerkennung
</span>
<p>
Die optische Zeichenerkennung erfolgt in der
Recheninfrastruktur der Plattform.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Fehlerkorrektur
</span>
<p>
Je nach Qualität der Eingabedaten kann es zu
Fehlern kommen, die korrigiert werden sollten.
</p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card z-depth-0">
<div class="card-content">
<span class="card-title">
<i class="material-icons blue-grey-text text-darken-2 left">layers</i>
Weiterverarbeitung
</span>
<p>
Die Textdaten können weiterverarbeitet<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel durch die hier angebotene linguistische Datenverarbeitung."><sup>[*]</sup></a>
oder in dieser Form bereits genutzt<a class="tooltipped" data-position="top" data-tooltip="Zum Beispiel mit dem Programm &quot;AntConc&quot;."><sup>[*]</sup></a> werden.
</p>
</div>
</div>
</div>
</div>
<p>
Die Ausgabe dieses Dienstes erfolgt in Form von Textdateien,
PDF Dateien mit hinterlegtem Text und <a href="https://tei-c.org/guidelines/p5/" target="_blank">TEI P5</a>
konformen XML Dateien.
</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Auftrag erstellen</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>
Auftragsformular zur Texterkennung von PDF-Dateien.
</p>
</div>
<div class="card-action right-align">
<a href="#create_job" class="waves-effect waves-light btn modal-trigger">Erstellen</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Auftragsübersicht</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
Aufträge aufgelistet.
</p>
</div>
<div class="card-action right-align">
<a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
</div>
</div>
</div>
</div>
</div>
<div id="create_job" class="modal overflow-visible">
<div class="modal-content">
<h4 style="line-height: 60px;"><i class="material-icons medium blue-grey-text text-darken-2 left">playlist_add</i>Texterkennung</h4>
<p>
Um den Auftrag erstellen zu können, müssen alle Formularfelder
ausgefüllt werden. Nachdem der Auftrag abgeschickt wurde, erhalten
Sie fortlaufende Benachrichtigungen über den aktuellen Bearbeitungsstand.
Nach erfolgreicher Bearbeitung stehen die Ergebnisse in
der <a href="job_manager.html">Auftragsübersicht</a> zum Download
zur Verfügung.
</p>
<form id="job_form" class="row">
<div class="input-field col s12">
<input placeholder="Mein Auftragsname" id="job_form_name" type="text" class="validate">
<label for="job_form_name">Auftragsname</label>
</div>
<div class="file-field input-field col s12 m6">
<div class="btn">
<span>Datei</span>
<input id="job_form_file" type="file" accept="application/pdf">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field col s12 m6">
<select id="job_form_language">
<option value="" disabled selected>Option auswählen</option>
<option value="deu">Deutsch</option>
<option value="deu_frak">Deutsch (Fraktur)</option>
<option value="eng">Englisch</option>
<option value="fra">Französisch</option>
<option value="por">Portugisisch</option>
<option value="spa">Spanisch</option>
</select>
<label>Sprache der Eingabedatei</label>
</div>
<div class="input-field col s12 m6 hide">
<select id="job_form_service">
<option value="ocr" selected></option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Abbrechen</a>
<a href="javascript:jobFormSubmitHandler();" id="job_form_submit" class="modal-close waves-effect waves-green btn disabled">Abschicken</a>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-2">
<div class="container">
<div class="row">
<div class="col s12">
<p class="grey-text text-lighten-4 left">
<a href="https://www.uni-bielefeld.de/">
<img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
</a>
</p>
<p class="grey-text text-lighten-4 right">
Gefördert durch die<br>
<a href="https://www.dfg.de/">
<img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Copyright
<a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
<a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
</div>
</div>
</footer>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/job_form_handler.js"></script>
</body>
</html>

233
vre_www/website/portal.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Opaque | Portal</title>
<link href="/vre/images/sfb_1288.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vre_manager_rest.js"></script>
<script src="js/vre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="blue-grey lighten-5">
<header>
<ul id="main-nav-account-dropdown" class="dropdown-content">
<li>
<a href="account.html">Benutzerverwaltung</a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:logout();">Abmelden</a>
</li>
</ul>
<nav class="blue-grey darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="portal.html" class="brand-logo">
<i class="material-icons hide-on-small-only">cloud</i>
Opaque
</a>
<a href="#" data-target="main-nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="main-nav" class="right hide-on-med-and-down">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a id="main-nav-account" class="dropdown-trigger" href="#!" data-target="main-nav-account-dropdown">
<i class="material-icons left">account_circle</i>
Benutzer
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="main-nav-mobile">
<li>
<a href="job_manager.html">
<i class="material-icons left">work</i>
Auftragsübersicht
</a>
</li>
<li>
<a href="nlp.html">
<i class="material-icons left">format_textdirection_l_to_r</i>
Linguistische Datenverarbeitung
</a>
</li>
<li>
<a href="ocr.html">
<i class="material-icons left">find_in_page</i>
Texterkennung
</a>
</li>
<li>
<a href="account.html">
<i class="material-icons">account_circle</i>
Benutzer
</a>
</li>
<li>
<a href="javascript:logout();">
<i class="material-icons">account_circle</i>
Abmelden
</a>
</li>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-content">
<span class="card-title">Portal</span>
<p class="overflow-hidden">
<i class="material-icons blue-grey-text text-darken-2 left" style="font-size: 135px;">cloud</i>
Opaque ist eine freie Plattform zur Unterstützung
textverarbeitender Prozesse. Sie soll es ermöglichen,
komplexe Programme zur einfachen Nutzung bereitzustellen und
bereits etablierte Textverarbeitungsroutinen ohne die Hürde langer
Einarbeitungszeiten zugänglich zu machen. Alle Berechnungen
werden dabei von den vom SFB 1288 zur Verfügung gestellten
Servern ausgeführt. So können Aufträge bearbeitet werden, ohne
dass der Computer des Benutzers eingeschaltet sein muss.
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="divider"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="overflow-hidden">
<i class="material-icons blue-grey-text text-darken-2 left" style="font-size: 135px;">lock_open</i>
Alle hier zur Verfügung gestellten Dienste wurden durch den
Einsatz freier Software realisiert. Um den Ansprüchen modernen
Forschungsdatenmanagements zu entsprechen, muss die
Nachnutzbarkeit von Ergebnissen sichergestellt werden. Aus diesem Grund
wird bewusst auf proprietäre Dateiformate verzichtet. Stattdessen werden nur
standardisierte und offene Formate genutzt, die eine
einfache Verbreitung und Weiterverarbeitung ermöglichen.
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="divider"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="overflow-hidden">
<img src="images/sfb_1288.png" alt="Logo: SFB 1288" class="left" style="width: 135px; height: 135px; margin-right: 15px;">
Diese Seite wurde vom Teilprojekt INF des Sonderforschungsbereich 1288
vor dem Hintergrund der gesammelten Erfahrungen entwickelt, die in einem
Pilotprojekt zur digitalen Verarbeitung von Textdaten im SFB gemacht wurden.<br>
Für Fragen und Anregungen steht das TP INF gerne via E-Mail zur Verfügung:
<br><a href="mailto:mailto:inf_sfb1288@lists.uni-bielefeld.de">inf_sfb1288@lists.uni-bielefeld.de</a>
</p>
<p>&nbsp;</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Linguistische Datenverarbeitung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">format_textdirection_l_to_r</i>
Mit Hilfe datenverarbeitender Methoden werden Textdaten mit
weiteren Informationen angereichert.
</p>
</div>
<div class="card-action right-align">
<a href="nlp.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Texterkennung</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">find_in_page</i>
Textdaten werden aus Scans oder Fotos zur anschließenden
Weiterverarbeitung extrahiert.
</p>
</div>
<div class="card-action right-align">
<a href="ocr.html" class="waves-effect waves-light btn">Zum Dienst</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Auftragsübersicht</span>
<p>
<i class="material-icons medium blue-grey-text text-darken-2 left">work</i>
Hier wird der aktuelle Status sämtlicher vom Benutzer erstellten
Aufträge aufgelistet.
</p>
</div>
<div class="card-action right-align">
<a href="job_manager.html" class="waves-effect waves-light btn">Öffnen</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-2">
<div class="container">
<div class="row">
<div class="col s12">
<p class="grey-text text-lighten-4 left">
<a href="https://www.uni-bielefeld.de/">
<img src="images/universitaet_bielefeld.png" alt="Logo: Universität Bielefeld" style="height: 72.5px">
</a>
</p>
<p class="grey-text text-lighten-4 right">
Gefördert durch die<br>
<a href="https://www.dfg.de/">
<img src="images/dfg.png" alt="Logo: Deutsche Forschungsgemeinschaft" style="height: 50px;">
</a>
</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Copyright
<a class="grey-text text-lighten-4" href="https://www.uni-bielefeld.de/sfb1288">Universität Bielefeld | SFB 1288</a>
<a class="grey-text text-lighten-4 right" href="impressum.html">Impressum</a>
</div>
</div>
</footer>
<script src="js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
</body>
</html>