Updated index page + Added about and result pages

.gitignore

@@ -1,7 +1,10 @@
 internal_saves
 media
 *.sage.py
-venv
+venv*
 .idea
 __pycache__
 static_old
+build
+data
+*.egg-info

Dockerfile

@@ -0,0 +1,8 @@
+FROM python:3.10.12
+ADD . /stark-web
+WORKDIR /stark-web
+RUN pip install --upgrade pip
+RUN pip install waitress
+RUN pip install .
+
+CMD ["waitress-serve", "--call", "app:app"]

app.py

@@ -1,8 +1,13 @@
 import configparser
+import csv
 import os
+import random
+import re
+import string
+import time
 
 import requests
-from flask import Flask, render_template, request, send_file
+from flask import Flask, render_template, request, send_file, redirect, url_for
 from werkzeug.utils import secure_filename
 
 from stark import run
@@ -10,6 +15,7 @@ from stark import run
 app = Flask(__name__)
 UPLOAD_FOLDER = 'uploads'
 ALLOWED_EXTENSIONS = {'conllu'}
+DAYS_BEFORE_DELETION = 1
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
 
@@ -53,6 +59,7 @@ def allowed_file(filename):
     return '.' in filename and \
            filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
+
 @app.route('/upload')
 def upload_file2():
     return render_template('upload.html')
@@ -66,14 +73,65 @@ def upload_file():
         return 'file uploaded successfully'
 
 
+@app.route('/about', methods=['GET'])
+def about():
+    return render_template('about.html')
+
+
+# @app.route('/result/<result_id>/download', methods=['GET'])
+# def download_result(result_id):
+#     return
+
+
+@app.route('/result/<result_id>', methods=['GET', 'POST'])
+def result(result_id):
+
+    if request.method == 'POST':
+        for filename in os.listdir('media'):
+            file_path = os.path.join('media', filename)
+            f_t = os.path.getmtime(file_path)
+            c_t = time.time()
+            file_age_seconds = c_t - f_t
+            if file_age_seconds > DAYS_BEFORE_DELETION * 86400:
+                os.remove(file_path)
+        # TODO ADD LINKS
+        # TODO TEST VARYING SIZES OF TEXT IN TABLE
+        return send_file(os.path.join('media', result_id), as_attachment=True, download_name='results.tsv')
+
+    order_by = request.args.get('order_by')
+    order_type = request.args.get('order_type')
+    with open(os.path.join('media', result_id), 'r') as rf:
+
+        content = list(csv.reader(rf, delimiter='\t'))
+        head = content[0]
+        content_dict = {h: [] for h in head}
+        if order_by is not None and order_by[:-1] in head:
+            sort_id = head.index(order_by[:-1])
+            if order_type == 'asc':
+                # check if a number can be converted to float or int
+                ordered_content = sorted(content[1:], key=lambda x: -1 * float(x[sort_id]) if x[sort_id].isnumeric() or re.match(r'^-?\d+(?:\.\d+)$', x[sort_id]) is not None else x[sort_id], reverse=True)
+            else:
+                ordered_content = sorted(content[1:], key=lambda x: -1 * float(x[sort_id]) if x[sort_id].isnumeric() or re.match(r'^-?\d+(?:\.\d+)$', x[sort_id]) is not None else x[sort_id])
+        else:
+            ordered_content = content[1:]
+
+        for i, row in enumerate(ordered_content):
+            for j, v in enumerate(row):
+                content_dict[head[j]].append(v)
+
+    # content.sort(key=lambda x: x[1])
+    a = request
+    print(result_id)
+    return render_template('result.html', head_row=head, content=content_dict)
+
+
 @app.route('/', methods=['GET', 'POST'])
 def index():
     if request.method == 'POST':
         form = request.form
-        a = request
         configs = {}
         # mandatory parameters
-        configs['input_path'] = 'data/sl_ssj-ud_v2.4.conllu'
+        configs['input_path'] = ''
         validation = {}
 
 
@@ -93,7 +151,8 @@ def index():
             # TODO OPTIONALLY ADD conllu FILE CHECK
         elif 'input_url' in form and form['input_url']:
             try:
-                input_path = os.path.join('media', 'input.conllu')
+                name = form['input_url'].split('/')[-1]
+                input_path = os.path.join('media', name)
                 response = requests.get(form['input_url'])
                 open(input_path, "wb").write(response.content)
                 configs['input_path'] = input_path
@@ -138,10 +197,13 @@ def index():
 
             return True
 
-        # TODO radio button (maybe checkbutton)
         node_type = []
-        if 'node_type' in form:
+        if 'node_type_upos' in form:
-            node_type = form['node_type']
+            node_type.append('upos')
+        if 'node_type_form' in form:
+            node_type.append('form')
+        if 'node_type_lemma' in form:
+            node_type.append('lemma')
 
         if validate_node_type(node_type):
             configs['node_type'] = '+'.join(node_type)
@@ -154,12 +216,13 @@ def index():
 
         # TODO FINALIZE THIS!
         configs['complete_tree_type'] = True
-        configs['dependency_type'] = True
+        configs['dependency_type'] = 'labeled_trees' in form and form['labeled_trees'] == 'on'
-        configs['node_order'] = True
+        configs['node_order'] = 'fixed_order' in form and form['fixed_order'] == 'on'
-        configs['association_measures'] = False
 
         configs['label_whitelist'] = []
         configs['root_whitelist'] = []
+        if 'root_restriction' in form and form['root_restriction']:
+            configs['root_whitelist'] = form['root_restriction'].split('|')
 
         configs['query'] = None
 
@@ -182,14 +245,16 @@ def index():
 
         # configs = read_configs(config, args)
 
-
+        configs['association_measures'] = False
-
+        configs['grew_match'] = 'grewmatch_patterns' in form and form['grewmatch_patterns'] == 'on'
-        configs['output'] = os.path.join('media', 'result.tsv')
+        configs['depsearch'] = False
-        configs['complete_tree_type'] = form['complete'] == 'yes'
+        name = ''.join(random.choices(string.ascii_uppercase + string.digits, k=60))
+        configs['output'] = os.path.join('media', name)
 
         run(configs)
         # TODO DELETE STORED FILE AFTER PROCESSING
-        return send_file(configs['output'], as_attachment=True)
+        return redirect(url_for('result', result_id=name))
+        # return send_file(configs['output'], as_attachment=True)
     # return render_template('index.html')
     return render_template('index.html')
 

requirements.txt

@@ -1,14 +1,3 @@
-blinker==1.6.2
-certifi==2023.7.22
-charset-normalizer==3.3.0
-click==8.1.7
 Flask==3.0.0
-idna==3.4
-itsdangerous==2.1.2
-Jinja2==3.1.2
-MarkupSafe==2.1.3
-pyconll==3.2.0
 requests==2.31.0
 stark @ git+https://github.com/clarinsi/STARK@f6c7f810979c55f96b8dac111bf2017c0dd58429
-urllib3==2.0.6
-Werkzeug==3.0.0

setup.py

@@ -0,0 +1,23 @@
+import re
+from os import path
+
+from setuptools import setup, find_packages
+
+here = path.abspath(path.dirname(__file__))
+
+# read the version from classla/_version.py
+VERSION = '0.0.1'
+
+setup(name='stark-api',
+  version=VERSION,
+  description=u"Stark web application",
+  author='CLARIN.SI',
+  author_email='info@clarin.si',
+  license='Apache 2',
+  packages=find_packages(),
+  install_requires=[
+    'Flask>=3.0.0',
+    'requests>=2.31.0',
+    'stark @ git+https://github.com/clarinsi/STARK@master'
+  ],
+)

static/css/style.css

@@ -21,3 +21,57 @@
 .noUi-target.noUi-horizontal .noUi-tooltip {
     transform: scale(1) rotate(-45deg) translate(0px, 4px);
 }
+
+h4 {
+    font-size: 1.8rem;
+}
+
+label {
+    font-size: 1.2rem;
+}
+
+.input-field > label {
+    font-size: 1.2rem;
+}
+
+.table-wrapper {
+  overflow-x: scroll;
+  overflow-y: scroll;
+  height: 600px;
+  border: #555555;
+}
+
+.table-wrapper thead th {
+  position: sticky;
+  top: 0;
+}
+
+.table-wrapper thead th{
+  cursor: pointer;
+}
+
+.tr-link {
+  cursor: pointer;
+}
+
+table {
+  table-layout: fixed;
+}
+
+th {
+  width: 300px;
+  padding: 10px 0 10px;
+  background-color: #cccccc;
+  text-align: center;
+  border-left-radius: 2px;
+  border-right: solid 1px #bbbbbb;
+  border-left: solid 1px #bbbbbb;
+}
+
+td {
+  width: 300px;
+  padding: 10px 0 10px;
+  text-align: center;
+  border-right: solid 1px #bbbbbb;
+  border-left: solid 1px #bbbbbb;
+}

static/js/init.js

@@ -30,32 +30,43 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
   }); // end of document ready
   $(document).ready(function(){
-    // slider
+    $('#advanced-tree').hide();
-//    var valuesForSlider = [2,3,4,5];
+    $('.input-field span.helper-text').hide();
-//    var slider = document.getElementById('slider');
+    $('.input-field').bind('mouseenter', function(e) {
-//    var format = {
+      $(this).find('span.helper-text').show('fast')
-//      to: function(value) {
+    });
-//        return valuesForSlider[Math.round(value)];
+    var advancedTreeExpanded = false;
-//      },
+    $('#advanced-tree-expand').bind('click', function(e) {
-//      from: function (value) {
+      if (!advancedTreeExpanded){
-//        return valuesForSlider.indexOf(Number(value));
+        advancedTreeExpanded = true;
-//      }
+        $('#advanced-tree').show('fast');
-//    };
+        $('#advanced-tree-expand i').text('remove');
-//
+      } else {
-//    noUiSlider.create(slider, {
+        advancedTreeExpanded = false;
-//      start: [3, 4],
+        $('#advanced-tree').hide('fast');
-//      connect: true,
+        $('#advanced-tree-expand i').text('add');
-//      step: 1,
+      }
-//      orientation: 'horizontal', // 'horizontal' or 'vertical'
+      $(this).find('span.helper-text').show('fast')
-//      range: {
+    });
-//        'min': 0,
+    $('.input-field').bind('mouseleave', function(e) {
-//        'max': valuesForSlider.length - 1
+      $(this).find('span.helper-text').hide('fast')
-//      },
+    });
-//      format: wNumb({
+  });
-//     decimals: 0
-//   })
-//    });
 
+  $("#submit-form").submit( function(eventObj) {
+    var spans = $(".noUi-tooltip").find('span');
+    var tree_size_min = spans[0].innerText;
+    var tree_size_max = spans[1].innerText;
+    console.log('amm');
+    $("<input />").attr("type", "hidden")
+      .attr("name", "tree_size_min")
+      .attr("value", tree_size_min)
+      .appendTo("#submit-form");
+    $("<input />").attr("type", "hidden")
+      .attr("name", "tree_size_max")
+      .attr("value", tree_size_max)
+      .appendTo("#submit-form");
+    return true;
   });
 })(jQuery); // end of jQuery name space
 

static/js/result.js

@@ -0,0 +1,52 @@
+function addOrUpdateUrlParameter(url, key, value) {
+    var urlObject = new URL(url);
+    urlObject.searchParams.set(key, value);
+    return urlObject.href;
+}
+function getUrlParameters() {
+    var searchParams = new URLSearchParams(window.location.search);
+    var params = {};
+
+    // Iterate over each parameter and add to the 'params' object
+    searchParams.forEach(function(value, key) {
+      params[key] = value;
+    });
+
+    return params;
+}
+
+$(document).ready(function() {
+    var params = getUrlParameters();
+    // Make table rows clickable
+    $(".table-wrapper tbody tr").click(function() {
+        var url = $(this).data("href");
+        if (url) {
+            window.location.href = url;
+        }
+    });
+    $(".th-desc").hide();
+    $(".th-asc").hide();
+    if ('order_by' in params) {
+        if ('order_type' in params && params.order_type == 'desc') {
+            $('th:contains(' + params.order_by + ') .th-desc').show();
+        } else {
+            $('th:contains(' + params.order_by + ') .th-asc').show();
+        }
+    }
+    // Make table rows clickable
+    $(".table-wrapper thead th").click(function(e) {
+        var column_name = $(this).find('span:first').text();
+
+        var newUrl = addOrUpdateUrlParameter(window.location.href, 'order_by', column_name);
+        if ('order_by' in params && 'order_type' in params && params.order_by == column_name && params.order_type == 'desc') {
+            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'asc');
+        } else {
+            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'desc');
+        }
+
+
+
+        // Redirect to the modified URL
+        window.location.href = newUrl;
+    });
+});

templates/about.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
+  <title>Starter Template - Materialize</title>
+
+  <!-- CSS  -->
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  <link href="static/css/nouislider.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  <link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+</head>
+<body>
+  <nav class="grey darken-2" role="navigation">
+    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">STARK</a>
+<!--      <ul class="right hide-on-med-and-down">-->
+<!--        <li><a href="#">Navbar Link</a></li>-->
+<!--      </ul>-->
+
+<!--      <ul id="nav-mobile" class="sidenav">-->
+<!--        <li><a href="#">Navbar Link</a></li>-->
+<!--      </ul>-->
+<!--      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>-->
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="/">Processing</a></li>
+        <li><a href="/about">About</a></li>
+      </ul>
+    </div>
+  </nav>
+<!--  <div class="section no-pad-bot" id="index-banner">-->
+<!--    <div class="container">-->
+<!--      <br><br>-->
+<!--      <h1 class="header center orange-text">Starter Template</h1>-->
+<!--      <div class="row center">-->
+<!--        <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>-->
+<!--      </div>-->
+<!--      <div class="row center">-->
+<!--        <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>-->
+<!--      </div>-->
+<!--      <br><br>-->
+
+<!--    </div>-->
+<!--  </div>-->
+
+
+<!--  <div class="container">-->
+<!--    <div class="section">-->
+
+<!--      &lt;!&ndash;   Icon Section   &ndash;&gt;-->
+<!--      <div class="row">-->
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>-->
+<!--            <h5 class="center">Speeds up development</h5>-->
+
+<!--            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>-->
+<!--            <h5 class="center">User Experience Focused</h5>-->
+
+<!--            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>-->
+<!--            <h5 class="center">Easy to work with</h5>-->
+
+<!--            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+
+<!--    </div>-->
+<!--    <br><br>-->
+    <div class="container">
+      <br>
+      <div class="row">
+        <div class="col s12">
+          <h4>About</h4>
+          <p class="caption">Welcome to the online demo interface for STARK - a highly-customizible tool designed to extract various types of syntactic trees from dependency-parsed corpora (treebanks). Unlike the original command-line version, this user-friendly interface offers a streamlined set of settings, which are described in more detail here. Simply upload your treebank and click ‘SUBMIT’ to view the initial results!</p>
+        </div>
+      </div>
+  </div>
+
+  <footer class="page-footer light-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col l6 s12">
+          <h5 class="white-text">Credits</h5>
+          <p class="grey-text text-lighten-4">Add some logos here?</p>
+
+
+        </div>
+<!--        <div class="col l3 s12">-->
+<!--          <h5 class="white-text">Settings</h5>-->
+<!--          <ul>-->
+<!--            <li><a class="white-text" href="#!">Link 1</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 2</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 3</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 4</a></li>-->
+<!--          </ul>-->
+<!--        </div>-->
+<!--        <div class="col l3 s12">-->
+<!--          <h5 class="white-text">Connect</h5>-->
+<!--          <ul>-->
+<!--            <li><a class="white-text" href="#!">Link 1</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 2</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 3</a></li>-->
+<!--            <li><a class="white-text" href="#!">Link 4</a></li>-->
+<!--          </ul>-->
+<!--        </div>-->
+      </div>
+    </div>
+    <div class="footer-copyright">
+      <div class="container">
+      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
+      </div>
+    </div>
+  </footer>
+
+
+  <!--  Scripts-->
+  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="static/js/materialize.js"></script>
+  <script src="static/js/wNumb.js"></script>
+  <script src="static/js/nouislider.min.js"></script>
+  <script src="static/js/init.js"></script>
+
+  </body>
+</html>

templates/index.html

@@ -22,6 +22,10 @@
 <!--        <li><a href="#">Navbar Link</a></li>-->
 <!--      </ul>-->
 <!--      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>-->
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="/">Processing</a></li>
+        <li><a href="/about">About</a></li>
+      </ul>
     </div>
   </nav>
 <!--  <div class="section no-pad-bot" id="index-banner">-->
@@ -79,159 +83,135 @@
       <br>
       <div class="row">
         <div class="col s12">
-
+          <p class="caption">Welcome to the online demo interface for STARK - a highly-customizible tool designed to extract various types of syntactic trees from dependency-parsed corpora (treebanks). Unlike the original command-line version, this user-friendly interface offers a streamlined set of settings, which are described in more detail here. Simply upload your treebank and click ‘SUBMIT’ to view the initial results!</p>
-          <form>
+          <form action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data" id="submit-form">
-            <h4>General settings</h4>
+            <h4>Input data</h4>
             <div class="card">
               <div class="card-content">
-                <label>Treebank</label>
+                <label><b>Upload a treebank</b> in CONLL-U format</label>
                 <div class = "file-field input-field">
                   <div class = "btn">
                      <span>Browse</span>
-                     <input type = "file" />
+                     <input type = "file" name="file"/>
                   </div>
                   <div class = "file-path-wrapper">
                      <input class="file-path validate" type="text" placeholder="Upload"/>
 
                   </div>
-                  <span class="helper-text" data-error="wrong" data-success="right">Upload a treebank in CONLL-U format.</span>
                 </div>
                 <div class="row">
                   <div class="input-field col s12">
                     <input id="input_url" name="input_url" type="text" class="validate">
-                    <label for="input_url">Treebank url</label>
+                    <label for="input_url"><u>Or</u> insert a URL link to a treebank in CONLL-U format</label>
-                    <span class="helper-text" data-error="wrong" data-success="right">Insert a link to treebank in CONLL-U format.</span>
+<!--                    <span class="helper-text" data-error="wrong" data-success="right">Insert a link to treebank in CONLL-U format.</span>-->
                   </div>
                 </div>
               </div>
             </div>
             <br>
-            <h4>Tree specifications</h4>
+            <h4>Tree specification</h4>
             <div class="card">
               <div class="card-content">
-                <label>Tree size</label>
+                <label><b>Tree size</b>: number of tokens in the tree (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--size" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
                 <div class="row">
                   <div class="input-field col s12">
                     <br />
                     <div id="slider"></div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Specify the number of nodes in the trees to be extracted.</span>
                   </div>
                 </div>
 
-                <label>Node type</label>
+                <label><b>Node type</b>: token characteristics to consider (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--node_type" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
                 <div class="row">
-                  <div class="input-field col s12">
+                  <div class="input-field">
-                    <p>
+                    <div class="col s4">
                       <label>
-                        <input type="checkbox" class="filled-in" checked="checked" />
+                        <input type="checkbox" class="filled-in" name="node_type_upos" checked="checked" />
                         <span>UPOS</span>
                       </label>
-                    </p>
+                    </div>
-                    <p>
+                    <div class="col s4">
                       <label>
-                        <input type="checkbox" class="filled-in" />
+                        <input type="checkbox" class="filled-in" name="node_type_form"/>
                         <span>form</span>
                       </label>
-                    </p>
+                    </div>
-                    <p>
+                    <div class="col s4">
                       <label>
-                        <input type="checkbox" class="filled-in" />
+                        <input type="checkbox" class="filled-in" name="node_type_lemma"/>
                         <span>lemma</span>
                       </label>
-                    </p>
+                    </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Should extracted trees be differentiated based on the surface word order?</span>
                   </div>
                 </div>
               </div>
             </div>
             <br>
-            <h4>Advanced tree specifications</h4>
+            <h4><a class="btn-floating btn-large waves-effect waves-light inline" id="advanced-tree-expand"><i class="material-icons">add</i></a>  Advanced settings</h4>
-            <div class="card">
+            <div class="card" id="advanced-tree">
               <div class="card-content">
-                <label>Fixed order</label>
                 <div class="row">
-                  <div class="input-field col s12">
+                  <div class="col s6">
+                    <label><b>Labeled trees</b>: include names of dependency relations (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--labeled" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
+                    <div class="input-field">
                       <div class="switch">
                         <label>
                           No
-                        <input type="checkbox" checked="checked">
+                          <input type="checkbox" name="labeled_trees" checked="checked">
                           <span class="lever"></span>
                           Yes
                         </label>
                       </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Should extracted trees be differentiated based on the surface word order?</span>
                     </div>
                   </div>
 
-                <label>Labeled trees</label>
+                  <div class="col s6">
-                <div class="row">
+                    <label><b>Fixed order</b>: differentiate trees based on surface word order (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--fixed" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
-                  <div class="input-field col s12">
+                    <div class="input-field">
                       <div class="switch">
                         <label>
                           No
-                        <input type="checkbox" checked="checked">
+                          <input type="checkbox" name="fixed_order" checked="checked">
                           <span class="lever"></span>
                           Yes
                         </label>
                       </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Should the extracted trees contain names of dependency relations?</span>
+                    </div>
                   </div>
                 </div>
 
-                <label>Complete trees</label>
-                <div class="row">
-                  <div class="input-field col s12">
-                    <div class="switch">
-                      <label>
-                        No
-                        <input type="checkbox" checked="checked">
-                        <span class="lever"></span>
-                        Yes
-                      </label>
-                    </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Should only full subtrees be extracted (rather than all possible subtrees)?</span>
-                  </div>
-                </div>
                 <div class="row">
                   <div class="input-field col s12">
                     <input id="root_restriction" name="root_restriction" type="text" class="validate">
-                    <label for="root_restriction">Root restriction</label>
+                    <label for="root_restriction"><b>Head</b>: specify potential restrictions on the head node (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--head" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
-                    <span class="helper-text" data-error="wrong" data-success="right">Specify potential restrictions on the root of the trees to be extracted (e.g. ‘upos=NOUN’ if you are interested in nominal trees only)</span>
-                  </div>
-                </div>
                   </div>
                 </div>
 
-            <h4>Output settings</h4>
-            <div class="card">
-              <div class="card-content">
-                <label>Association measures</label>
                 <div class="row">
-                  <div class="input-field col s12">
+                  <div class="col s6">
+                    <label><b>Association measures</b>: print MI, MI3, Dice, logDice, t-score and simple-LL scores (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--association_measures" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
+                    <div class="input-field">
                       <div class="switch">
                         <label>
                           No
-                        <input type="checkbox">
+                          <input type="checkbox" name="association_measures">
                           <span class="lever"></span>
                           Yes
                         </label>
                       </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Include measures of statistical association between nodes of the tree (MI, MI3, Dice, logDice, t-score, simple-LL) in the output?</span>
                     </div>
                   </div>
-
+                  <div class="col s6">
-                <label>Grew-match patterns</label>
+                    <label><b>Grew-match</b>: convert tree structures to Grew-match patterns (<a class="nav-link" href="https://github.com/clarinsi/STARK/blob/master/settings.md#--grew_match" title="Help"><span class="menu-title sr-only">Help</span></a>)</label>
-                <div class="row">
+                    <div class="input-field">
-                  <div class="input-field col s12">
                       <div class="switch">
                         <label>
                           No
-                        <input type="checkbox">
+                          <input type="checkbox" name="grewmatch_patterns">
                           <span class="lever"></span>
                           Yes
                         </label>
                       </div>
-                    <span class="helper-text" data-error="wrong" data-success="right">Map the structure of the trees to the grew-match formalism used by https://universal.grew.fr?</span>
+                    </div>
                   </div>
                 </div>
               </div>

templates/result.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
+  <title>Starter Template - Materialize</title>
+
+  <!-- CSS  -->
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="/static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  <link href="/static/css/nouislider.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  <link href="/static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+</head>
+<body>
+  <nav class="grey darken-2" role="navigation">
+    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">STARK</a>
+<!--      <ul class="right hide-on-med-and-down">-->
+<!--        <li><a href="#">Navbar Link</a></li>-->
+<!--      </ul>-->
+
+<!--      <ul id="nav-mobile" class="sidenav">-->
+<!--        <li><a href="#">Navbar Link</a></li>-->
+<!--      </ul>-->
+<!--      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>-->
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="/">Processing</a></li>
+        <li><a href="/about">About</a></li>
+      </ul>
+    </div>
+  </nav>
+  <div class="section no-pad-bot" id="index-banner">
+    <div class="container">
+<!--      <br><br>-->
+<!--      <h1 class="header center orange-text">Starter Template</h1>-->
+<!--      <div class="row center">-->
+<!--        <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>-->
+<!--      </div>-->
+<!--      <div class="row center">-->
+<!--        <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>-->
+<!--      </div>-->
+<!--      <br><br>-->
+
+<!--    </div>-->
+<!--  </div>-->
+
+
+<!--  <div class="container">-->
+<!--    <div class="section">-->
+
+<!--      &lt;!&ndash;   Icon Section   &ndash;&gt;-->
+<!--      <div class="row">-->
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>-->
+<!--            <h5 class="center">Speeds up development</h5>-->
+
+<!--            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>-->
+<!--            <h5 class="center">User Experience Focused</h5>-->
+
+<!--            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        <div class="col s12 m4">-->
+<!--          <div class="icon-block">-->
+<!--            <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>-->
+<!--            <h5 class="center">Easy to work with</h5>-->
+
+<!--            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>-->
+<!--          </div>-->
+<!--        </div>-->
+      </div>
+
+    </div>
+<!--    <br><br>-->
+    <div class="container">
+      <br>
+      <div class="row">
+        <div class="col s12">
+          <form action="{{ url_for('result', result_id=request.view_args['result_id']) }}" method="POST" enctype="multipart/form-data" id="submit-form">
+            <button class="btn waves-effect waves-light btn-large" type="submit" name="action">Download complete results
+              <i class="material-icons right">download</i>
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <!-- Your table with many columns -->
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              {% for head in head_row %}
+                {% if not head == 'Grew-match URL' %}
+              <th><span>{{ head }} </span><span class="th-desc">&#x25be;</span><span class="th-asc">&#x25b4;</span></th>
+                {% endif %}
+              {% endfor %}
+            </tr>
+          </thead>
+          <tbody>
+            {% for i in range(content['Tree']|length) %}
+            <tr {% if 'Grew-match URL' in content %} class="tr-link" data-href={{ content['Grew-match URL'][i] }} {% endif %}>
+              {% for col in content %}
+                {% if not col == 'Grew-match URL' %}
+              <td>{{ content[col][i] }}</td>
+                {% endif %}
+              {% endfor %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+  </div>
+
+  <footer class="page-footer light-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col l6 s12">
+          <h5 class="white-text">Credits</h5>
+          <p class="grey-text text-lighten-4">Add some logos here?</p>
+
+
+        </div>
+      </div>
+    </div>
+    <div class="footer-copyright">
+      <div class="container">
+      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
+      </div>
+    </div>
+  </footer>
+
+
+  <!--  Scripts-->
+  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="/static/js/materialize.js"></script>
+  <script src="/static/js/wNumb.js"></script>
+  <script src="/static/js/result.js"></script>
+  </body>
+</html>