STARK-web/templates/index.html

273 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<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 action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data" id="submit-form">
<h4>Input data</h4>
<div class="card">
<div class="card-content">
<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" name="file"/>
</div>
<div class = "file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload"/>
</div>
</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"><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>-->
</div>
</div>
</div>
</div>
<br>
<h4>Tree specification</h4>
<div class="card">
<div class="card-content">
<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>
</div>
</div>
<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">
<div class="col s4">
<label>
<input type="checkbox" class="filled-in" name="node_type_upos" checked="checked" />
<span>UPOS</span>
</label>
</div>
<div class="col s4">
<label>
<input type="checkbox" class="filled-in" name="node_type_form"/>
<span>form</span>
</label>
</div>
<div class="col s4">
<label>
<input type="checkbox" class="filled-in" name="node_type_lemma"/>
<span>lemma</span>
</label>
</div>
</div>
</div>
</div>
</div>
<br>
<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" id="advanced-tree">
<div class="card-content">
<div class="row">
<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" name="labeled_trees" checked="checked">
<span class="lever"></span>
Yes
</label>
</div>
</div>
</div>
<div class="col s6">
<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">
<div class="switch">
<label>
No
<input type="checkbox" name="fixed_order" checked="checked">
<span class="lever"></span>
Yes
</label>
</div>
</div>
</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"><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>
</div>
</div>
<div class="row">
<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" name="association_measures">
<span class="lever"></span>
Yes
</label>
</div>
</div>
</div>
<div class="col s6">
<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="input-field">
<div class="switch">
<label>
No
<input type="checkbox" name="grewmatch_patterns">
<span class="lever"></span>
Yes
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn waves-effect waves-light btn-large" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
</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>