Upload 3 files

static/css/style.css

@@ -51,9 +51,9 @@ canvas#canvas3d {
     position: relative;
     z-index: 20;
     width: 100%;
-    max-width: 1200px;
+    max-width: 1300px;
     margin: 0 auto;
-    padding: 1.5rem;
+    padding: 1rem 2rem;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -83,7 +83,7 @@ nav {
 
 /* Typography */
 header {
-    margin: 3rem 0;
+    margin: 1.5rem 0;
     text-align: left;
 }
 
@@ -115,14 +115,15 @@ h1 .italic {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.05);
-    padding: clamp(2rem, 5vw, 4rem);
-    margin: 2rem 0;
+    padding: clamp(1.5rem, 3vw, 2.5rem);
+    margin: 1rem 0;
     width: 100%;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    border-radius: 8px;
 }
 
 .form-group {
-    margin-bottom: 2.5rem;
+    margin-bottom: 1.5rem;
 }
 
 label {
@@ -276,11 +277,34 @@ input[type="file"]:hover::file-selector-button {
 .table-wrapper {
     width: 100%;
     overflow-x: auto;
-    margin-top: 2rem;
+    overflow-y: auto;
+    max-height: 500px;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 4px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary-color) transparent;
+    position: relative;
+    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
+}
+
+/* Smart indicating effect: show more contrast on inner content */
+.table-wrapper table {
+    position: relative;
+    z-index: 1;
+}
+
+.table-wrapper::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+    border-radius: 10px;
+    box-shadow: 0 0 10px var(--secondary-color);
 }
 
 table {
@@ -573,10 +597,34 @@ td {
     }
 }
 
-/* Flush Section */
+/* Dashboard Layout */
+.report-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+}
+
+@media (min-width: 1100px) {
+    .report-grid {
+        grid-template-columns: 1fr 400px;
+    }
+
+    .sticky-side {
+        position: sticky;
+        top: 2rem;
+        height: min-content;
+    }
+}
+
+.scroll-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 .flush-section {
-    margin-top: 3rem;
-    padding-top: 2rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 

templates/report.html

@@ -30,122 +30,103 @@
         </header>
 
         {% if metrics %}
-        <section class="upload-card" style="padding: 2.5rem; border-radius: 8px;">
-            <p class="label-mini">Performance Summary</p>
-            <div class="metrics-grid">
-                <div class="metric-item">
-                    <span class="metric-value">{{ (metrics.accuracy * 100)|round(2) }}%</span>
-                    <span class="metric-label">ACCURACY</span>
-                    <p class="metric-note">Percentage of correct predictions out of total samples.</p>
-                </div>
-                <div class="metric-item">
-                    <span class="metric-value">{{ metrics.f1|round(4) }}</span>
-                    <span class="metric-label">WEIGHTED F1</span>
-                    <p class="metric-note">Harmonic mean of precision and recall, weighted by class frequency.</p>
-                </div>
-                <div class="metric-item">
-                    <span class="metric-value">{{ metrics.macro_f1|round(4) }}</span>
-                    <span class="metric-label">MACRO F1</span>
-                    <p class="metric-note">Unweighted mean of F1 scores across all classes (highlights imbalance
-                        issues).</p>
-                </div>
-                <div class="metric-item">
-                    <span class="metric-value">{{ metrics.precision|round(4) }}</span>
-                    <span class="metric-label">PRECISION</span>
-                    <p class="metric-note">Ability of the classifier not to label a negative sample as positive.</p>
-                </div>
-                <div class="metric-item">
-                    <span class="metric-value">{{ metrics.recall|round(4) }}</span>
-                    <span class="metric-label">RECALL</span>
-                    <p class="metric-note">Ability of the classifier to find all positive samples.</p>
-                </div>
-            </div>
+        <div class="report-grid">
+            <div class="scroll-card">
+                <section class="upload-card" style="margin: 0; padding: 2rem;">
+                    <p class="label-mini">Performance Summary</p>
+                    <div class="metrics-grid">
+                        <div class="metric-item">
+                            <span class="metric-value">{{ (metrics.accuracy * 100)|round(2) }}%</span>
+                            <span class="metric-label">ACCURACY</span>
+                            <p class="metric-note">Overall correctness.</p>
+                        </div>
+                        <div class="metric-item">
+                            <span class="metric-value">{{ metrics.f1|round(4) }}</span>
+                            <span class="metric-label">WEIGHTED F1</span>
+                            <p class="metric-note">Balanced score (weighted).</p>
+                        </div>
+                        <div class="metric-item">
+                            <span class="metric-value">{{ metrics.macro_f1|round(4) }}</span>
+                            <span class="metric-label">MACRO F1</span>
+                            <p class="metric-note">Unweighted average score.</p>
+                        </div>
+                    </div>
 
-            <!-- Confusion Matrix -->
-            <p class="label-mini" style="margin-top: 4rem;">Confusion Matrix (Prediction Stability)</p>
-            <div class="cm-container">
-                <table class="cm-table">
-                    <thead>
-                        <tr class="cm-label-row">
-                            <th>Actual \ Pred</th>
-                            {% for label in metrics.confusion_matrix.labels %}
-                            <th>{{ label }}</th>
-                            {% endfor %}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for row_idx in range(metrics.confusion_matrix.matrix|length) %}
-                        <tr>
-                            <td
-                                style="background: rgba(255,255,255,0.03); font-weight: 700; color: var(--secondary-color);">
-                                {{ metrics.confusion_matrix.labels[row_idx] }}
-                            </td>
-                            {% for col_idx in range(metrics.confusion_matrix.matrix[row_idx]|length) %}
-                            {% set val = metrics.confusion_matrix.matrix[row_idx][col_idx] %}
-                            <td
-                                class="cm-value {% if row_idx == col_idx %}cm-match{% endif %} {% if val == 0 %}cm-dimmed{% endif %}">
-                                {{ val }}
-                            </td>
-                            {% endfor %}
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                    <p class="label-mini" style="margin-top: 2rem;">Class-Wise Decomposition</p>
+                    <div class="table-wrapper" style="max-height: 400px;">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Grade</th>
+                                    <th>Prec.</th>
+                                    <th>Recall</th>
+                                    <th>F1</th>
+                                    <th>Sup.</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for item in metrics.class_metrics %}
+                                <tr>
+                                    <td style="font-weight: 700; color: var(--secondary-color);">{{ item.label }}</td>
+                                    <td>{{ item.precision }}</td>
+                                    <td>{{ item.recall }}</td>
+                                    <td>{{ item.f1 }}</td>
+                                    <td style="opacity: 0.5;">{{ item.support }}</td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </section>
             </div>
 
-            <div class="summary-metrics" style="margin-top: 2.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap;">
-                <div class="summary-card"
-                    style="background: rgba(168, 85, 247, 0.05); border: 1px solid var(--secondary-color); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
-                    <span class="lbl"
-                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Macro
-                        Avg F1</span>
-                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{
-                        metrics.macro_f1|round(4) }}</span>
-                </div>
-                <div class="summary-card"
-                    style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
-                    <span class="lbl"
-                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Weighted
-                        Avg F1</span>
-                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{ metrics.f1|round(4)
-                        }}</span>
-                </div>
-                <div class="summary-card"
-                    style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; flex: 1; min-width: 200px; text-align: center; border-radius: 4px;">
-                    <span class="lbl"
-                        style="font-size: 11px; font-weight: 800; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">Overall
-                        Accuracy</span>
-                    <span class="val" style="font-size: 3rem; font-weight: 900; color: white;">{{ (metrics.accuracy *
-                        100)|round(2) }}%</span>
-                </div>
-            </div>
+            <div class="sticky-side">
+                <section class="upload-card" style="margin: 0; padding: 2rem;">
+                    <p class="label-mini">Confusion Matrix</p>
+                    <div class="cm-container" style="margin-top: 1rem;">
+                        <table class="cm-table" style="width: 100%;">
+                            <thead>
+                                <tr class="cm-label-row">
+                                    <th>A\P</th>
+                                    {% for label in metrics.confusion_matrix.labels %}
+                                    <th style="min-width: 30px; padding: 0.5rem;">{{ label }}</th>
+                                    {% endfor %}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for row_idx in range(metrics.confusion_matrix.matrix|length) %}
+                                <tr>
+                                    <td
+                                        style="background: rgba(255,255,255,0.03); font-weight: 700; color: var(--secondary-color); padding: 0.5rem;">
+                                        {{ metrics.confusion_matrix.labels[row_idx] }}
+                                    </td>
+                                    {% for col_idx in range(metrics.confusion_matrix.matrix[row_idx]|length) %}
+                                    {% set val = metrics.confusion_matrix.matrix[row_idx][col_idx] %}
+                                    <td class="cm-value {% if row_idx == col_idx %}cm-match{% endif %} {% if val == 0 %}cm-dimmed{% endif %}"
+                                        style="padding: 0.5rem;">
+                                        {{ val }}
+                                    </td>
+                                    {% endfor %}
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
 
-            <p class="label-mini" style="margin-top: 4rem;">Class-Wise Decomposition</p>
-            <div class="table-wrapper">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Grade Class</th>
-                            <th>Precision</th>
-                            <th>Recall</th>
-                            <th>F1-Score</th>
-                            <th>Support</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for item in metrics.class_metrics %}
-                        <tr>
-                            <td style="font-weight: 700; color: var(--secondary-color);">{{ item.label }}</td>
-                            <td>{{ item.precision }}</td>
-                            <td>{{ item.recall }}</td>
-                            <td>{{ item.f1 }}</td>
-                            <td style="opacity: 0.5;">{{ item.support }}</td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                    <div class="summary-metrics"
+                        style="margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                        <div class="summary-card" style="padding: 1rem;">
+                            <span class="lbl">Macro F1</span>
+                            <span class="val" style="font-size: 1.5rem;">{{ metrics.macro_f1|round(4) }}</span>
+                        </div>
+                        <div class="summary-card" style="padding: 1rem;">
+                            <span class="lbl">Accuracy</span>
+                            <span class="val" style="font-size: 1.5rem;">{{ (metrics.accuracy * 100)|round(0) }}%</span>
+                        </div>
+                    </div>
+                </section>
             </div>
-        </section>
+        </div>
         {% endif %}
 
         <section class="upload-card" style="margin-top: 4rem; padding: 2.5rem; border-radius: 8px;">