|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Annotation Page</title> |
|
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}"> |
|
|
|
<style> |
|
|
|
.selected { |
|
background-color: #a0e57e !important; |
|
|
|
} |
|
|
|
#splash-screen { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: #ffffff; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
|
|
#loading-text { |
|
font-size: 24px; |
|
font-weight: bold; |
|
} |
|
</style> |
|
<script> |
|
|
|
function updateRowColor(selectElement, row) { |
|
if (selectElement.value === "") { |
|
row.classList.remove("selected"); |
|
} else { |
|
row.classList.add("selected"); |
|
} |
|
} |
|
|
|
|
|
setTimeout(function () { |
|
document.getElementById("splash-screen").style.display = "none"; |
|
document.getElementById("main-content").style.display = "block"; |
|
}, 2000); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
|
|
<h1>Active Learning POC</h1> |
|
<form method="POST"> |
|
<h3>Active Learning Step #{{ al_step }} - Remain data: {{n_unlabeled}} / 100</h3> |
|
<div id="splash-screen"> |
|
<div id="loading-text">Active Learning Step #{{ al_step }}</br></br>{{al_process}}</div> |
|
</div> |
|
<div id="main-content" style="display: none;"> |
|
<table> |
|
<colgroup> |
|
<col style="width: 80%;"> |
|
<col style="width: 20%;"> |
|
</colgroup> |
|
<tr> |
|
<th>Text</th> |
|
<th>Label</th> |
|
</tr> |
|
{% for item in data.text %} |
|
<tr> |
|
<td>{{ item }}</td> |
|
<td> |
|
<select name="annotations" onchange="updateRowColor(this, this.parentNode.parentNode)"> |
|
<option value="">None</option> |
|
{% for label in labels %} |
|
<option value="{{ label }}">{{ label }}</option> |
|
{% endfor %} |
|
</select> |
|
</td> |
|
</tr> |
|
{% endfor %} |
|
</table> |
|
</div> |
|
<button type="submit">Next Samples</button> |
|
</form> |
|
</body> |
|
|
|
</html> |
