templates/metrics.html

{% extends "base.html" %}

{% block extra_css %}
<style>
    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
        margin-top: 1rem;
    }
    
    .stats-header {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .spec-badge {
        display: inline-block;
        padding: 0.375rem 1rem;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 700;
        background: rgba(79, 70, 229, 0.1);
        color: var(--color-primary);
        margin-top: 0.75rem;
        letter-spacing: 0.025em;
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="section-full" style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">
    <div class="container text-center">
        <h1 style="color: white; margin-bottom: 1rem;">Metrik Evaluasi Model</h1>
        <p style="color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto;">Laporan performa dan spesifikasi model <strong>IndoGPT (GPT-2)</strong> fine-tuned untuk generasi pantun</p>
    </div>
</section>

<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">
    <!-- Summary Stats — Data riil dari training_args.bin -->
    <div class="stats-header">
        <div class="card text-center fade-in" style="animation-delay: 0.1s; padding: 2rem 1.5rem;">
            <div class="metric-label">Arsitektur</div>
            <div class="metric-value mt-1" style="font-size: 1.75rem; color: var(--color-text-main);">IndoGPT</div>
            <div class="spec-badge">GPT-2 · Causal LM</div>
        </div>
        <div class="card text-center fade-in" style="animation-delay: 0.2s; padding: 2rem 1.5rem;">
            <div class="metric-label">Jumlah Epoch</div>
            <div class="metric-value mt-1" style="color: var(--color-success); font-size: 2.5rem;">3</div>
            <div class="text-muted" style="font-size: 0.9rem; font-weight: 500;">iterasi pelatihan</div>
        </div>
        <div class="card text-center fade-in" style="animation-delay: 0.3s; padding: 2rem 1.5rem;">
            <div class="metric-label">Learning Rate</div>
            <div class="metric-value mt-1" style="color: var(--color-warning); font-size: 2.5rem;">5e-5</div>
            <div class="text-muted" style="font-size: 0.9rem; font-weight: 500;">AdamW Optimizer</div>
        </div>
        <div class="card text-center fade-in" style="animation-delay: 0.4s; padding: 2rem 1.5rem;">
            <div class="metric-label">Batch Size</div>
            <div class="metric-value mt-1" style="color: var(--color-accent); font-size: 2.5rem;">4</div>
            <div class="text-muted" style="font-size: 0.9rem; font-weight: 500;">per device</div>
        </div>
    </div>

    <!-- Row 2: Architecture details -->
    <div class="fade-in" style="animation-delay: 0.5s; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Transformer Layers</div>
            <div class="metric-value mt-1" style="font-size: 1.75rem; color: var(--color-primary);">12</div>
        </div>
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Attention Heads</div>
            <div class="metric-value mt-1" style="font-size: 1.75rem; color: var(--color-primary);">12</div>
        </div>
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Embedding Dim</div>
            <div class="metric-value mt-1" style="font-size: 1.75rem; color: var(--color-primary);">768</div>
        </div>
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Context Window</div>
            <div class="metric-value mt-1" style="font-size: 1.75rem; color: var(--color-primary);">1024</div>
        </div>
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Vocab Size</div>
            <div class="metric-value mt-1" style="font-size: 1.5rem; color: var(--color-primary);">40,004</div>
        </div>
        <div class="card text-center" style="padding: 1.5rem; background: var(--color-surface); box-shadow: none;">
            <div class="metric-label" style="font-size:0.875rem;">Model Size</div>
            <div class="metric-value mt-1" style="font-size: 1.5rem; color: var(--color-primary);">~466 MB</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="fade-in" style="animation-delay: 0.6s; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2.5rem; margin-bottom: 3rem;">
        
        <!-- Training Loss per Step Chart -->
        <div class="card">
            <h3 style="margin-bottom: 0.5rem;">Kurva Training Loss per Step</h3>
            <p class="text-muted" style="font-size: 0.9rem;">Data riil dari log training — 2523 steps, 3 epoch. Loss dimulai dari 4.81 dan konvergen ke <strong style="color: var(--color-success);">0.22</strong>.</p>
            <div class="chart-container">
                <canvas id="scoreChart"></canvas>
            </div>
        </div>

        <!-- Epoch Average Loss Chart -->
        <div class="card">
            <h3 style="margin-bottom: 0.5rem;">Rata-rata Loss per Epoch</h3>
            <p class="text-muted" style="font-size: 0.9rem;">Rata-rata training loss per epoch. Epoch 1: 1.86 → Epoch 2: 0.27 → Epoch 3: <strong style="color: var(--color-success);">0.23</strong>.</p>
            <div class="chart-container">
                <canvas id="lossChart"></canvas>
            </div>
        </div>

    </div>
    
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Metrics Logic -->
<script src="/static/js/metrics.js"></script>
{% endblock %}