sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-24 02:24:20 +00:00
Code Issues Projects Releases Wiki Activity

Add Posterpage

Browse Source
This commit is contained in:
Patrick Jentsch 2020-02-10 13:25:15 +01:00
parent aa6ee42984
commit 8c40a1aa96
5 changed files with 299 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/main/views.py
View File

@ -12,3 +12,8 @@ def index():
@login_required
def dashboard():
return render_template('main/dashboard.html.j2', title='Dashboard')
@main.route('/poster')
def poster():
return render_template('main/poster.html.j2', title='Dienste und Prozesse')

133
app/templates/main/index.html.j2
View File

@ -1,45 +1,144 @@
{% extends "nopaque.html.j2" %}
{% set full_width = False %}
{% set full_width = True %}
{% set roadmap = False %}
{% block page_content %}
<div class="col s12 m4">
<h3>nopaque?</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
</div>
<div class="col s12 m8">
<div class="col s3">
<div class="card">
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<span class="card-title">Eingabe</span>
<p>Textdaten in Form von Bildern, Fotos, Scans&hellip;</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title">Open source</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
<p>
Häufig liegen Datenbestände in verschiedenen Formaten und verstreut
vor. Da eine Verarbeitung via nopaque ein einheitliches Datenformat
vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
anfallende Konvertierungsprozesse durchzuführen.
</p>
<blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Cloud processing</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<span class="card-title">Ausgabe</span>
<p>Aus den Eingaben zusammengesetzte Multipage-TIFF-Dateien.</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Context</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
<span class="card-title">Eingabe</span>
<p>Textdaten in Form von Multipage-TIFF- oder PDF-Dateien.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
<p>
Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
</p>
<blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>
Textdateien, PDF-Dateien und TEI P5 konformen XML-Dateien.
</p>
</div>
</div>
</div>
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Ausschließlich Textdateien.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
<p>
Mit Hilfe computergestützter linguistischer
Datenverarbeitungsmethoden (Tokenisierung, Lemmatisierung,
Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
mit weiteren Informationen angereichert.
</p>
<blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>Korpus Dateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
</div>
</div>
</div>
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Korpus Dateien und Metadaten entsprechend des BibTeX-Schemas.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
<p>
Mittels CQP Query Language als Abfragesprache können komplexe
Suchanfragen unter Zu­hil­fe­nah­me von Metadaten und NLP-Auszeichnungen
ausgeführt werden. Ergebnisse können als Text oder in abstrakter
Darstellung ausgewertet werden.
</p>
<blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>Export der Ergebnisse in CSV, Excel, JSON und HTML.</p>
</div>
</div>
</div>

145
app/templates/main/poster.html.j2 Normal file
View File

@ -0,0 +1,145 @@
{% extends "nopaque.html.j2" %}
{% set full_width = True %}
{% set roadmap = False %}
{% block page_content %}
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Textdaten in Form von Bildern, Fotos, Scans&hellip;</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
<p>
Häufig liegen Datenbestände in verschiedenen Formaten und verstreut
vor. Da eine Verarbeitung via nopaque ein einheitliches Datenformat
vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
anfallende Konvertierungsprozesse durchzuführen.
</p>
<blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>Aus den Eingaben zusammengesetzte Multipage-TIFF-Dateien.</p>
</div>
</div>
</div>
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Textdaten in Form von Multipage-TIFF- oder PDF-Dateien.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
<p>
Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
</p>
<blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>
Textdateien, PDF-Dateien und TEI P5 konformen XML-Dateien.
</p>
</div>
</div>
</div>
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Ausschließlich Textdateien.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
<p>
Mit Hilfe computergestützter linguistischer
Datenverarbeitungsmethoden (Tokenisierung, Lemmatisierung,
Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
mit weiteren Informationen angereichert.
</p>
<blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>Korpus Dateien im <i>verticalized text</i>-Format (XML-Dialekt).</p>
</div>
</div>
</div>
<div class="col s12"></div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Eingabe</span>
<p>Korpus Dateien und Metadaten entsprechend des BibTeX-Schemas.</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
<p>
Mittels CQP Query Language als Abfragesprache können komplexe
Suchanfragen unter Zu­hil­fe­nah­me von Metadaten und NLP-Auszeichnungen
ausgeführt werden. Ergebnisse können als Text oder in abstrakter
Darstellung ausgewertet werden.
</p>
<blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
</div>
</div>
</div>
<div class="col s3">
<div class="card">
<div class="card-content">
<span class="card-title">Ausgabe</span>
<p>Export der Ergebnisse in CSV, Excel, JSON und HTML.</p>
</div>
</div>
</div>
{% endblock %}

10
app/templates/nopaque.html.j2
View File

@ -60,8 +60,8 @@
<li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
<li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
<li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
<li style="margin-left: 15px;"><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}"><i class="material-icons">book</i>Corpora</a></li>
<li style="margin-left: 15px;"><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}"><i class="material-icons">work</i>Jobs</a></li>
<li><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}" style="padding-left: 47px;"><i class="material-icons">book</i>Corpora</a></li>
<li><a href="{{ url_for('main.dashboard', _anchor='my_anchor') }}" style="padding-left: 47px;"><i class="material-icons">work</i>Jobs</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Processes and Services</a></li>
<li><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus Analysis</a></li>
@ -100,8 +100,10 @@
{% else %}
<div class="col s12">
{% endif %}
{% block page_content %}
{% endblock %}
<div class="row">
{% block page_content %}
{% endblock %}
</div>
</div>
{% if roadmap %}
<div class="col hide-on-small-only m3 l2">

52
app/templates/services/corpus_analysis.html.j2
View File

@ -4,33 +4,35 @@
{% set roadmap = True %}
{% block page_content %}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<div class="col s12">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<div class="card">
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
<div class="card">
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
</div>
<div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
</div>
<div class="card-action right-align">
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div>
</div>