Spaces:
Running
Running
File size: 2,833 Bytes
80cb407 6b6d018 80cb407 0c67b3e 6b6d018 0c67b3e 6b6d018 0c67b3e 6b6d018 0c67b3e 6b6d018 0c67b3e 6b6d018 b6ae325 6b6d018 0c67b3e 6b6d018 0c67b3e 6b6d018 0c67b3e 6b6d018 80cb407 0c67b3e 6b6d018 80cb407 0c67b3e 80cb407 6b6d018 0c67b3e 6b6d018 80cb407 6b6d018 0c67b3e 6b6d018 80cb407 |
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 |
{% extends 'base.html' %}
{% block head %}
<title>Indonesian Lyrics Classification By Age Group - Prediction</title>
{% endblock %}
{% block body %}
{% include 'navbar.html' %}
<main class="flex flex-row justify-center items-center min-h-screen">
<div class="container max-w-xl w-full bg-white rounded-2xl p-8 text-center space-y-6">
<!-- Lyrics -->
<div class="mb-3">
<h1 class="text-lg font-semibold text-gray-800 sm:text-xl">🎵 Lyrics</h1>
<p class="text-center px-2 py-2 text-1xl sm:text-lg">{{ task }}</p>
</div>
<hr class="mb-3 border-t border-gray-200" />
<!-- Predicted Age Group -->
<div class="mt-2 mb-3">
<h2 class="text-lg font-semibold text-gray-800">Predicted Age Group</h2>
<span class="text-center text-lg font-extrabold text-slate-900 sm:text-2xl">
{{ prediction.upper() }}
</span>
</div>
<hr class="border-t border-gray-200" />
<!-- Class Probabilities -->
<div class="mt-2 mb-3 flex flex-col text-center items-center">
<h3 class="text-lg font-semibold text-gray-800 mb-2">📊 Class Probabilities</h3>
<div class="space-y-3">
<table>
{% for label, prob in probabilities %}
<tr class="{{ 'bg-green-500' if label == prediction else '' }}">
<td class="px-2 text-left">
<span class="capitalize text-gray-800 text-1xl sm:text-lg {{ 'font-medium' if label == prediction else '' }}">{{ label.capitalize() }}</span>
</td>
<td class="px-5"></td>
<td class="px-2 text-right">
<span class="text-gray-800 text-1xl sm:text-lg {{ 'font-medium' if label == prediction else '' }}">{{ prob }}</span>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<hr class="border-t border-gray-200" />
<!-- Processing Time -->
{% if total_time %}
<div class="text-sm mt-2 mb-3 text-gray-500">
⏱️ Total Processing Time: <strong>{{ total_time }}</strong>
</div>
{% endif %}
<!-- Action Button -->
<div class="w-full flex flex-col mb-5 overflow-y-auto"></div>
<div class="mt-2">
<a href="/" class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-1xl sm:text-lg px-5 py-2.5 text-center">
🔁 Try Another Lyrics
</a>
</div>
</div>
</main>
<footer class="flex flex-row justify-center items-center">
<div class="mb-3 text-gray-500">By Michael Natanael</div>
</footer>
{% endblock %} |