templates/transcribe.html

{% 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 %}