nopaque/vre_www/website/ocr.html
Patrick Jentsch 86557443a2 Add prototype
2019-06-03 14:57:09 +02:00

294 lines
12 KiB
HTML

<!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>