File size: 2,764 Bytes
1a82bcb |
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 |
<!DOCTYPE html>
<html>
<head>
<title>Annotation Page</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<style>
/* Style for selected rows */
.selected {
background-color: #a0e57e !important;
/* Change this color as desired */
}
#splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
/* Style for the loading text */
#loading-text {
font-size: 24px;
font-weight: bold;
}
</style>
<script>
// JavaScript function to update row color
function updateRowColor(selectElement, row) {
if (selectElement.value === "") {
row.classList.remove("selected");
} else {
row.classList.add("selected");
}
}
// JavaScript to hide the splash screen after 3 seconds and display the main content
setTimeout(function () {
document.getElementById("splash-screen").style.display = "none";
document.getElementById("main-content").style.display = "block";
}, 2000); // 3000
</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> |