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

Rework service package

Browse Source
This commit is contained in:
Patrick Jentsch 2020-10-26 12:47:06 +01:00
parent 03db3f8c35
commit 73a597fdd2
7 changed files with 390 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/templates/services/_nav_content.html.j2 Normal file
View File

@ -0,0 +1,10 @@
<ul class="tabs tabs-transparent">
<li class="tab disabled"><i class="material-icons left">explore</i>Roadmap</li>
<li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
<li class="tab disabled"><i class="material-icons">navigate_next</i></li>
<li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
<li class="tab disabled"><i class="material-icons">navigate_next</i></li>
<li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
<li class="tab disabled"><i class="material-icons">navigate_next</i></li>
<li class="tab"><a{%if request.path == url_for('services.service', service='corpus_analysis') %} class="active"{% endif %} href="{{ url_for('services.service', service='corpus_analysis') }}" target="_self">Corpus Analysis</a></li>
</ul>

42
web/app/templates/services/corpus_analysis.html.j2
View File

@ -1,25 +1,36 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% from '_constants.html.j2' import COLORS %}
{% set main_class = 'corpus-analysis-color lighten' %} {% set scheme_color = COLORS.corpus_analysis %}
{% block nav_content %}
{% include 'services/_nav_content.html.j2' %}
{% endblock nav_content %}
{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }} <div class="container">
<div class="row">
<div class="col s12">
<p class="hide-on-small-only">&nbsp;</p>
<h1 id="title">{{ title }}</h1>
</div>
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);"> <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="corpus-analysis"></i> <i class="material-icons service" data-service="corpus-analysis"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<p>{{ rgb }}</p>
<p>Nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags. The results can either be displayed as text or abstract visualizations.</p> <p>Nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags. The results can either be displayed as text or abstract visualizations.</p>
</div> </div>
<div class="col s12"> <div class="col s12">
<h3>My Corpora</h3> <h2>My Corpora</h2>
<div class="card"> <div class="card">
<div class="card-content" id="corpora"> <div class="card-content" id="corpora">
<div class="input-field"> <div class="input-field">
@ -48,10 +59,10 @@
<a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a> <a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12"> <div class="col s12">
<h3>My query results</h3> <h2>My query results</h2>
<div class="card"> <div class="card">
<div class="card-content" id="query-results"> <div class="card-content" id="query-results">
<div class="input-field"> <div class="input-field">
@ -89,11 +100,16 @@
<a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('corpora.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a> <a class="btn corpus-analysis-color darken waves-effect waves-light" href="{{ url_for('corpora.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="module"> <script type="module">
import {RessourceList} from '../../static/js/nopaque.lists.js'; import {RessourceList} from '../../static/js/nopaque.lists.js';
let corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, "Corpus"); let corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, "Corpus");
let queryResultList = new RessourceList("query-results", nopaque.queryResultsSubscribers, "QueryResult"); let queryResultList = new RessourceList("query-results", nopaque.queryResultsSubscribers, "QueryResult");
</script> </script>
{% endblock %} {% endblock scripts %}

41
web/app/templates/services/file-setup.html.j2
View File

@ -1,11 +1,24 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %}
{% set main_class = 'file-setup-color lighten' %} {% set scheme_color = COLORS.file_setup_darken %}
{% block nav_content %}
{% include 'services/_nav_content.html.j2' %}
{% endblock nav_content %}
{% block main_attribs %} class="file-setup-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(file_setup_color_darken) }} <div class="container">
<div class="row">
<div class="col s12">
<p class="hide-on-small-only">&nbsp;</p>
<h1 id="title">{{ title }}</h1>
</div>
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
@ -13,10 +26,10 @@
<i class="material-icons service" data-service="file-setup"></i> <i class="material-icons service" data-service="file-setup"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card" style="border-top: 10px solid {{ file_setup_color_darken }};"> <div class="card" style="border-top: 10px solid {{ COLORS.file_setup_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
@ -28,9 +41,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-submit-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
@ -38,24 +51,26 @@
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="row"> <div class="row">
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.title, data_length='32', material_icon='title') }} {{ wtf.render_field(add_job_form.title, data_length='32', material_icon='title') }}
</div> </div>
<div class="col s12 l8"> <div class="col s12 l8">
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }} {{ wtf.render_field(add_job_form.description, data_length='255', material_icon='description') }}
</div> </div>
<div class="col s12"> <div class="col s12">
{{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', placeholder='Choose your .jpeg, .png or .tiff files') }} {{ wtf.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', placeholder='Choose your .jpeg, .png or .tiff files') }}
</div> </div>
<div class="col s12 hide"> <div class="col s12 hide">
{{ M.render_field(add_job_form.version, material_icon='apps') }} {{ wtf.render_field(add_job_form.version, material_icon='apps') }}
</div> </div>
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, material_icon='send') }} {{ wtf.render_field(add_job_form.submit, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
</div> </div>
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">

43
web/app/templates/services/nlp.html.j2
View File

@ -1,11 +1,24 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %}
{% set main_class = 'nlp-color lighten' %} {% set scheme_color = COLORS.nlp_darken %}
{% block nav_content %}
{% include 'services/_nav_content.html.j2' %}
{% endblock nav_content %}
{% block main_attribs %} class="nlp-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(nlp_color_darken) }} <div class="container">
<div class="row">
<div class="col s12">
<p class="hide-on-small-only">&nbsp;</p>
<h1 id="title">{{ title }}</h1>
</div>
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
@ -13,10 +26,10 @@
<i class="material-icons service" data-service="nlp"></i> <i class="material-icons service" data-service="nlp"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card" style="border-top: 10px solid {{ nlp_color_darken }};"> <div class="card" style="border-top: 10px solid {{ COLORS.nlp_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12 m6"> <div class="col s12 m6">
@ -46,9 +59,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-submit-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
@ -56,19 +69,19 @@
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="row"> <div class="row">
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.title, data_length='32', material_icon='title') }} {{ wtf.render_field(add_job_form.title, data_length='32', material_icon='title') }}
</div> </div>
<div class="col s12 l8"> <div class="col s12 l8">
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }} {{ wtf.render_field(add_job_form.description, data_length='255', material_icon='description') }}
</div> </div>
<div class="col s12 l5"> <div class="col s12 l5">
{{ M.render_field(add_job_form.files, accept='text/plain', placeholder='Choose your .txt files') }} {{ wtf.render_field(add_job_form.files, accept='text/plain', placeholder='Choose your .txt files') }}
</div> </div>
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.language, material_icon='language') }} {{ wtf.render_field(add_job_form.language, material_icon='language') }}
</div> </div>
<div class="col s12 l3"> <div class="col s12 l3">
{{ M.render_field(add_job_form.version, material_icon='apps') }} {{ wtf.render_field(add_job_form.version, material_icon='apps') }}
</div> </div>
<div class="col s12"> <div class="col s12">
<span class="card-title">Preprocessing</span> <span class="card-title">Preprocessing</span>
@ -94,10 +107,12 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, material_icon='send') }} {{ wtf.render_field(add_job_form.submit, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
</div> </div>
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">

43
web/app/templates/services/ocr.html.j2
View File

@ -1,11 +1,24 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %}
{% set main_class = 'ocr-color lighten' %} {% set scheme_color = COLORS.ocr_darken %}
{% block nav_content %}
{% include 'services/_nav_content.html.j2' %}
{% endblock nav_content %}
{% block main_attribs %} class="ocr-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(ocr_color_darken) }} <div class="container">
<div class="row">
<div class="col s12">
<p class="hide-on-small-only">&nbsp;</p>
<h1 id="title">{{ title }}</h1>
</div>
<div class="col s12 m3 push-m9"> <div class="col s12 m3 push-m9">
<div class="center-align"> <div class="center-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
@ -13,10 +26,10 @@
<i class="material-icons service" data-service="ocr"></i> <i class="material-icons service" data-service="ocr"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="col s12 m9 pull-m3"> <div class="col s12 m9 pull-m3">
<div class="card" style="border-top: 10px solid {{ ocr_color_darken }};"> <div class="card" style="border-top: 10px solid {{ COLORS.ocr_darken }};">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
@ -28,9 +41,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12"> <div class="col s12">
<h3>Submit a job</h3> <h3>Submit a job</h3>
<div class="card"> <div class="card">
<form class="nopaque-submit-form" data-progress-modal="progress-modal"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
@ -38,19 +51,19 @@
{{ add_job_form.hidden_tag() }} {{ add_job_form.hidden_tag() }}
<div class="row"> <div class="row">
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.title, data_length='32', material_icon='title') }} {{ wtf.render_field(add_job_form.title, data_length='32', material_icon='title') }}
</div> </div>
<div class="col s12 l8"> <div class="col s12 l8">
{{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }} {{ wtf.render_field(add_job_form.description, data_length='255', material_icon='description') }}
</div> </div>
<div class="col s12 l5"> <div class="col s12 l5">
{{ M.render_field(add_job_form.files, accept='application/pdf', color=ocr_color_darken, placeholder='Choose your .pdf files') }} {{ wtf.render_field(add_job_form.files, accept='application/pdf', color=ocr_color_darken, placeholder='Choose your .pdf files') }}
</div> </div>
<div class="col s12 l4"> <div class="col s12 l4">
{{ M.render_field(add_job_form.language, material_icon='language') }} {{ wtf.render_field(add_job_form.language, material_icon='language') }}
</div> </div>
<div class="col s12 l3"> <div class="col s12 l3">
{{ M.render_field(add_job_form.version, material_icon='apps') }} {{ wtf.render_field(add_job_form.version, material_icon='apps') }}
</div> </div>
<div class="col s12"> <div class="col s12">
<span class="card-title">Preprocessing</span> <span class="card-title">Preprocessing</span>
@ -121,10 +134,12 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <div class="card-action right-align">
{{ M.render_field(add_job_form.submit, color=ocr_color_darken, material_icon='send') }} {{ wtf.render_field(add_job_form.submit, color=ocr_color_darken, material_icon='send') }}
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
</div> </div>
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">

20
web/app/templates/services/roadmap.html.j2
View File

@ -1,20 +0,0 @@
<ul class="table-of-contents" id="roadmap">
<li><b>Roadmap</b></li>
<li>
<a href="{{ url_for('services.service', service='file-setup') }}">File setup</a>
</li>
<li>
<a href="{{ url_for('services.service', service='ocr') }}">Optical Character Recognition</a>
</li>
<li>
<a href="{{ url_for('services.service', service='nlp') }}">Natural Language Processing</a>
</li>
<li>
<a href="{{ url_for('services.service', service='corpus_analysis') }}">Corpus analysis</a>
</li>
</ul>
<script>
for (let entry of document.querySelectorAll(`#roadmap a`)) {
if (entry.href === window.location.href) {entry.classList.add("active");}
}
</script>

37
web/app/templates/utils/macros.html.j2
View File

@ -1,37 +0,0 @@
{%- macro insert_page_content() -%}
<noscript>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card red darken-1">
<div class="card-content white-text">
<span class="card-title">JavaScript is disabled</span>
<p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
<p>Some services are still useable without Javascript.</p>
</div>
<div class="card-action">
<a href="#">What services can I still use?</a>
<a href="#">What services and functions are not available?</a>
</div>
</div>
</div>
</div>
</div>
</noscript>
{% block page_content %}{% endblock %}
{%- endmacro -%}
{%- macro insert_color_scheme(hex_color) -%}
<style>
main button, main .btn, main .btn-floating {background-color: {{ hex_color }};}
main .pagination li.active {background-color: {{ hex_color }};}
main .table-of-contents a.active {border-color: {{ hex_color }};}
main .tabs .tab a {color: inherit;}
main .tabs .tab a:hover {color: {{ hex_color }};}
main .tabs .tab a.active, .tabs .tab a:focus.active {
color: {{ hex_color }};
background-color: {{ hex_color }}28;
}
main .tabs .indicator {background-color: {{ hex_color }};}
</style>
{%- endmacro -%}