File size: 11,827 Bytes
92da9af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
{% extends "headerfooter.html"%}
{% block body %}
<section class="jumbotron text-center pb-2">
<div class="container">
{% include 'partials/kami_logo_animation.svg' %}
<h1 id="welcome-title" class="jumbotron-heading">Welcome to KaMI App!</h1>
<p class="lead text-muted"><i>KaMI stands for Kraken Model Inspector. It evaluates the success of a transcription task (HTR, OCR) comparing a correct transcription (reference) and a prediction.</i></p>
<p><a href="https://colab.research.google.com/drive/1nk0hNtL9QTO5jczK0RPEv9zF3nP3DpOc?usp=sharing" class="btn btn btn-outline-dark my-2"><i class="fab fa-google-drive"></i> Do more with KaMI-lib colab</a>
</div>
</section>
<section class="mb-5">
<div class="container form-zone py-4">
<form name="options-to-compute" id="options-form-compare" onsubmit="return false;">
<div class="container">
<div class="form-group row mx-3">
<label class="" for="reference"><b>Reference</b> (Maximum characters: 7000) You have <input id="counter_ref" readonly type="text" name="countdown" size="5" value="7000"> characters left.</label>
<p style="font-size: small"> </p>
<textarea name="reference" class="form-control" id="reference" rows="6" placeholder="Drag & Drop or Paste the expected transcription..." required></textarea>
</div>
<div class="form-group row mx-3">
<label class="" for="prediction"><b>Prediction</b> (Maximum characters: 7000) You have <input id="counter_pred" readonly type="text" name="countdown" size="5" value="7000"> characters left.</label>
<textarea name="prediction" class="form-control" id="prediction" rows="6" placeholder="Drag & Drop or Paste the transcription produced by the model you wish to evaluate..." required></textarea>
</div>
</div>
<div class="form-group row mx-3">
<div class="container ml-5">
<p><b>Text preprocessing options</b></p>
<hr>
<div class="form-group row">
<input class="form-check-input" type="checkbox" name="optdigit" id="optdigit" value="D">
<label class="form-check-label" for="optdigit">Ignore all digits</label>
</div>
<div class="form-group row">
<input class="form-check-input" type="checkbox" name="optcase" id="optcase" value="L">
<label class="form-check-label" for="optcase">Ignore text case (all in lower case)</label>
</div>
<div class="form-group row">
<input class="form-check-input" type="checkbox" name="optponct" id="optponct" value="P">
<label class="form-check-label" for="optponct">Ignore the punctuation</label>
</div>
<div class="form-group row">
<input class="form-check-input" type="checkbox" name="optdiac" id="optdiac" value="X">
<label class="form-check-label" for="optdiac">Ignore diacritical signs</label>
</div>
<br>
<p><b>Features available</b></p>
<hr>
<div class="form-group row">
<input class="form-check-input" type="checkbox" name="optVT" id="optVT" value="1" checked>
<label class="form-check-label" for="optVT" title="If your text is very long, it can be useful to deactivate this option.">Create versus text</label>
</div>
</div>
</div>
<div class="text-center">
<button id="compare-btn" class="btn btn-primary" type="submit"><span id="spinner-compare" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span><span id="message-compare-btn">Compare</span></button>
</div>
</form>
</div>
</section>
<br>
<br>
<section>
<div id="metrics-dashboard-container" class="container pb-3 mb-2" style="display: none;">
<div class="panel-group" id="accordion">
<div class="panel panel-default card">
<div class="card-header panel-heading">
<h3 id="title-metrics-dashboard" aria-expanded="true"><i class="fa-solid fa-gauge"></i> Metrics dashboard</h3>
</div>
<div id="collapseMetrics">
<br>
<button id="export-table-csv" type="button" class="btn btn-success dash-btn" data-export="export" onclick="tableToCSV()"><i class="fa-solid fa-file-export"></i> Export to CSV</button>
<button type="button" class="btn btn-primary btn-help dash-btn" data-toggle="modal" data-target=".help_main"><i class="far fa-question-circle"></i> Understand the metrics</button>
<br>
<br>
<div id="table-result-container" class="table-responsive"></div>
</div>
</div>
</div>
</div>
</section>
<section>
<div id="main-vt-container" class="container pb-3 mb-2" style="display: none">
<div class="panel-group" id="accordion">
<div class="panel panel-default card">
<div class="card-header panel-heading">
<h3 id="title-vt-container" class="panel-title" data-toggle="collapse" data-target="#collapseVT"><i class="fa fa-code-compare"></i> Show versus text</h3>
</div>
<div id="collapseVT" class="panel-collapse collapse">
<div class="panel-body">
<div id="vt-configs">
<fieldset id="fieldset-vt">
<legend id="fieldset-vt-title">Show/Hide edit operations:</legend>
<div>
<input type="checkbox" id="exact-match" name="exact-match"
checked>
<label class="exact-matchl" for="exact-match">Exact match</label>
</div>
<div>
<input type="checkbox" id="insertion" name="insertion"
checked>
<label class="insertionl" for="insertion">Insertion</label>
</div>
<div>
<input type="checkbox" id="delSubts" name="delSubts" checked>
<label class="delSubtsl" for="delSubts">Deletion/substition</label>
</div>
</fieldset>
</div>
<br>
<div id="vt-container">
<div class="row">
<div class="col label-vs"><b>REFERENCE</b><hr></div>
<div class="col label-vs"><b>COMPARAISON</b><hr></div>
<div class="col label-vs"><b>PREDICTION</b><hr></div>
</div>
<div class="row card-body">
<pre class="col col-vt-text" id="vt-reference"></pre>
<pre class="col col-vt-text" id="vt-comparaison"></pre>
<pre class="col col-vt-text" id="vt-prediction"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade help_main" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header" style="background-color: var(--red-contrast); color: white">
<h4 class="modal-title"> Understand the metrics</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<ul>
<li><span class="font-weight-bold">Levensthein Distance (Char.):</span> Levenshtein distance at character level.</li>
<li><span class="font-weight-bold">Levensthein Distance (Words):</span> Levenshtein distance at word level.</li>
<li><span class="font-weight-bold">Hamming Distance:</span> a score if the strings' lengths match but their content is different; Ø if the strings' lengths don't match.</li>
</ul>
<ul>
<li><span class="font-weight-bold">WER:</span> Word Error Rate, proportion of words bearing at least one recognition error.</li>
<li><span class="font-weight-bold">CER:</span> Character Error Rate, proportion of characters erroneously transcribed.</li>
<li><span class="font-weight-bold">Wacc:</span> Word Accuracy, proportion of words bearing no recognition error.</li>
</ul>
<ul>
<li><span class="font-weight-bold">Match Error Rate:</span> metric borrowed from Speech Recognition</li>
<li><span class="font-weight-bold">Char. Information Lost:</span> metric borrowed from Speech Recognition</li>
<li><span class="font-weight-bold">Char. Information Preserve:</span> metric borrowed from Speech Recognition</li>
</ul>
<ul>
<li><span class="font-weight-bold">Hits:</span> number of characters identical between the reference and the prediction.</li>
<li><span class="font-weight-bold">Substitutions:</span> number of substitutions (a character replaced by another) necessary to make the prediction match the reference</li>
<li><span class="font-weight-bold">Deletions:</span> number of deletions (a character is removed) necessary to make the prediction match the reference</li>
<li><span class="font-weight-bold">Insertions:</span> number of insertions (a character is added) necessary to make the prediction match the reference</li>
</ul>
</div>
</div>
</div>
</section>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{{ url_for('static', filename='js/exportCsv.min.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/dragAndDropFunc.min.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/main.min.js')}}"></script>
{% endblock %}
|