Upload 5 files

app.py

@@ -1,6 +1,8 @@
 import os
+import sys
 import zipfile
 import pandas as pd
+import numpy as np
 from flask import Flask, request, redirect, url_for, send_from_directory, flash, render_template
 from werkzeug.utils import secure_filename
 from tqdm import tqdm
@@ -73,6 +75,24 @@ def get_inference_engine():
             print(f"[WARNING] Could not download from HF: {e}. Expecting local files.")
         
         infer_engine = DiamondInference(model_path, encoder_dir, MODEL_ID)
+        
+        # Warmup prediction to initialize TF graph and prevent "stuck" feeling on first stone
+        print("[INFO] Warming up Inference Engine...")
+        try:
+            # Create a dummy row and zero patches for warmup
+            dummy_row = {"StoneType": "NATURAL", "Color": "D", "Brown": "N", "BlueUv": "N", "GrdType": "GIA", "Carat": 1.0, "Result": "D"}
+            # We don't need a real image for warmup, just a pass through predict
+            # We'll mock process_image to return zeros
+            orig_process = infer_engine.process_image
+            try:
+                infer_engine.process_image = lambda path, tta_transform=None: np.zeros(infer_engine.hp["flat_patches_shape"], dtype=np.float32)
+                infer_engine.predict(dummy_row, "warmup.jpg", use_tta=False)
+            finally:
+                infer_engine.process_image = orig_process
+            print("[INFO] Warmup complete.")
+        except Exception as e:
+            print(f"[WARNING] Warmup failed: {e}")
+            
     return infer_engine
 
 @app.route('/flush', methods=['POST'])
@@ -157,11 +177,21 @@ def upload_files():
     y_pred = []
     
     print(f"[INFO] Initializing Inference Pipeline for {len(df)} stones...")
-    for index, row in tqdm(df.iterrows(), total=len(df), desc="Inference Progress"):
+    sys.stdout.flush()
+    
+    # Progress bar with direct stdout for Gunicorn visibility
+    pbar = tqdm(df.iterrows(), total=len(df), desc="Inference Progress", file=sys.stdout)
+    
+    for index, row in pbar:
         l_code = str(row.get('L_Code', '')).split('.')[0]
         sr_no = str(row.get('SrNo', '')).split('.')[0]
         stone_id = str(row.get('Stone_Id', ''))
         
+        # Log currently processing stone for "aliveness" verification
+        if index % 5 == 0:
+            print(f"[PROC] Stone {index+1}/{len(df)}: {l_code}")
+            sys.stdout.flush()
+        
         img_path = None
         for full_path in all_extracted_files:
             fname = os.path.basename(full_path)

static/css/style.css

@@ -51,12 +51,12 @@ canvas#canvas3d {
     position: relative;
     z-index: 20;
     width: 100%;
-    max-width: 1400px;
     margin: 0 auto;
-    padding: 0.5rem 1.5rem;
+    padding: 0.5rem 1rem;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    box-sizing: border-box;
 }
 
 nav {
@@ -596,29 +596,269 @@ td {
     }
 }
 
-/* Dashboard Layout */
-.report-grid {
+/* Ultra-Dense Dashboard Grid */
+.dashboard-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 2rem;
+    gap: 1rem;
+    margin: 0.5rem 0;
 }
 
 @media (min-width: 1100px) {
-    .report-grid {
-        grid-template-columns: 1fr 380px;
+    .dashboard-grid {
+        grid-template-columns: 1fr 1fr;
+        gap: 1.5rem;
     }
+}
 
-    .sticky-side {
-        position: sticky;
-        top: 1rem;
-        height: min-content;
-    }
+.dashboard-main {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.scroll-card {
+.dashboard-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     height: 100%;
+}
+
+/* Compact KPI Row */
+.kpi-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 0.8rem;
+}
+
+.kpi-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1rem 1.2rem;
+    text-align: center;
+    transition: all 0.3s;
+}
+
+.kpi-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--secondary-color);
+}
+
+.kpi-value {
+    display: block;
+    font-size: 1.8rem;
+    font-weight: 900;
+    color: white;
+    line-height: 1;
+    margin-bottom: 0.3rem;
+}
+
+.kpi-label {
+    display: block;
+    font-size: 9px;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    opacity: 0.7;
+    font-weight: 700;
+}
+
+/* Section Labels */
+.section-label {
+    font-size: 8px;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    opacity: 0.5;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+/* Compact Table Section */
+.compact-table-section {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1rem;
+}
+
+.compact-table-wrapper {
+    max-height: 280px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary-color) transparent;
+}
+
+.compact-table-wrapper::-webkit-scrollbar {
+    width: 3px;
+}
+
+.compact-table-wrapper::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+    border-radius: 10px;
+}
+
+.compact-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 11px;
+}
+
+.compact-table th {
+    text-align: left;
+    padding: 0.4rem;
+    font-size: 8px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.5;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    position: sticky;
+    top: 0;
+    background: rgba(5, 5, 5, 0.95);
+}
+
+.compact-table td {
+    padding: 0.4rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.compact-table .grade-col {
+    font-weight: 700;
+    color: var(--secondary-color);
+}
+
+.compact-table .sup-col {
+    opacity: 0.4;
+}
+
+/* Compact Confusion Matrix */
+.cm-compact {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1rem;
     display: flex;
     flex-direction: column;
+    height: 100%;
+}
+
+.cm-compact-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 8px;
+    table-layout: auto;
+}
+
+.cm-compact-table th,
+.cm-compact-table td {
+    padding: 0.3rem 0.35rem;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    font-size: 8px;
+}
+
+.cm-compact-table th {
+    font-size: 7px;
+    letter-spacing: 0.03em;
+    background: rgba(255, 255, 255, 0.02);
+    color: var(--secondary-color);
+    font-weight: 600;
+}
+
+.cm-corner {
+    width: 30px;
+}
+
+.cm-row-label {
+    background: rgba(255, 255, 255, 0.02);
+    font-weight: 700;
+    color: var(--secondary-color);
+}
+
+.cm-cell {
+    font-weight: 600;
+}
+
+.cm-diag {
+    background: rgba(168, 85, 247, 0.15);
+    color: white;
+}
+
+.cm-zero {
+    opacity: 0.2;
+}
+
+/* Summary Mini Cards */
+.summary-mini {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.6rem;
+}
+
+.summary-mini-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 0.6rem;
+    text-align: center;
+}
+
+.summary-mini-label {
+    display: block;
+    font-size: 7px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.6;
+    margin-bottom: 0.2rem;
+}
+
+.summary-mini-value {
+    display: block;
+    font-size: 1.2rem;
+    font-weight: 900;
+    color: var(--secondary-color);
+}
+
+/* Manifest Section (Collapsible) */
+.manifest-section {
+    margin-top: 1rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 0.8rem;
+}
+
+.manifest-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-icon {
+    font-size: 10px;
+    opacity: 0.5;
+    transition: transform 0.3s;
+}
+
+.manifest-content {
+    transition: all 0.3s;
+}
+
+.stone-id-col {
+    font-weight: 700;
+    color: white;
+    font-size: 11px;
+}
+
+.result-col {
+    font-weight: 700;
+    color: var(--secondary-color);
+    font-size: 11px;
+}
+
+/* Sticky header row in manifest table */
+.manifest-content table thead th {
+    position: sticky;
+    top: 0;
+    background: rgba(5, 5, 5, 0.98);
+    z-index: 10;
+    border-bottom: 2px solid rgba(168, 85, 247, 0.3);
 }
 
 .flush-section {

templates/index.html

@@ -132,21 +132,21 @@
             const loaderText = document.querySelector('.loader-text');
             let p = 0;
             const itv = setInterval(() => {
-                if (p < 99) {
-                    // Logic to simulate real work: slow down as it gets closer to 99
-                    const increment = (99 - p) * 0.03 + 0.1;
+                if (p < 92) {
+                    // Logic to simulate real work: slow down as it gets closer to 92
+                    const increment = (92 - p) * 0.03 + 0.1;
                     p += increment;
                 }
                 const displayP = Math.floor(p);
                 loaderBar.style.width = displayP + '%';
 
                 let phase = "ANALYZING";
-                if (displayP > 30) phase = "INFERENCING";
-                if (displayP > 70) phase = "GRADATING";
-                if (displayP > 90) phase = "COMPILING REPORT";
+                if (displayP > 25) phase = "INFERENCING";
+                if (displayP > 60) phase = "GRADATING";
+                if (displayP > 85) phase = "COMPILING REPORT";
 
                 loaderText.innerText = `PROCS / ${phase} DATA [${displayP}%]`;
-            }, 80);
+            }, 100);
         });
 
         function confirmFlush() {

templates/report.html

@@ -13,176 +13,182 @@
     <div class="atmospheric-grain"></div>
 
     <div class="container animate-up">
-        <nav>
+        <nav style="padding: 0.5rem 0;">
             <div class="nav-logo">RESULTS / DASHBOARD</div>
             <div class="nav-meta">
                 <span>STATUS: COMPLETE</span>
             </div>
         </nav>
 
-        <header style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem;">
+        <header style="display: flex; justify-content: space-between; align-items: center; margin: 0.5rem 0;">
             <div>
                 <p class="label-mini">Batch Processing Overview</p>
-                <h1 style="font-size: 3rem;">ANALYTICS <span class="italic">REPORT</span></h1>
+                <h1 style="font-size: 2.5rem; line-height: 1;">ANALYTICS <span class="italic">REPORT</span></h1>
+            </div>
+            <div style="display: flex; gap: 0.8rem;">
+                <a href="/" class="btn-launch"
+                    style="text-decoration: none; padding: 0.6rem 1.2rem; font-size: 9px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.5); color: white; opacity: 1;">←
+                    NEW BATCH</a>
+                <a href="/download/{{ report_file }}" class="btn-launch"
+                    style="text-decoration: none; padding: 0.6rem 1.2rem; font-size: 9px;">EXPORT DATASET</a>
             </div>
-            <a href="/download/{{ report_file }}" class="btn-launch"
-                style="text-decoration: none; padding: 0.8rem 1.5rem; font-size: 10px;">Export Result Dataset</a>
         </header>
 
         {% if metrics %}
-        <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>
+        <!-- Single-Screen Dashboard Grid -->
+        <div class="dashboard-grid">
+            <!-- Left Column: KPIs + Class Decomposition -->
+            <div class="dashboard-main">
+                <!-- KPI Row -->
+                <div class="kpi-row">
+                    <div class="kpi-card">
+                        <span class="kpi-value">{{ (metrics.accuracy * 100)|round(1) }}%</span>
+                        <span class="kpi-label">ACCURACY</span>
+                    </div>
+                    <div class="kpi-card">
+                        <span class="kpi-value">{{ metrics.f1|round(3) }}</span>
+                        <span class="kpi-label">WEIGHTED F1</span>
                     </div>
+                    <div class="kpi-card">
+                        <span class="kpi-value">{{ metrics.macro_f1|round(3) }}</span>
+                        <span class="kpi-label">MACRO F1</span>
+                    </div>
+                </div>
 
-                    <p class="label-mini" style="margin-top: 2rem;">Class-Wise Decomposition</p>
-                    <div class="table-wrapper" style="max-height: 400px;">
-                        <table>
+                <!-- Class-Wise Table (Compact) -->
+                <div class="compact-table-section">
+                    <p class="section-label">CLASS-WISE METRICS</p>
+                    <div class="compact-table-wrapper">
+                        <table class="compact-table">
                             <thead>
                                 <tr>
-                                    <th>Grade</th>
-                                    <th>Prec.</th>
-                                    <th>Recall</th>
+                                    <th>GRADE</th>
+                                    <th>PREC</th>
+                                    <th>RECALL</th>
                                     <th>F1</th>
-                                    <th>Sup.</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 class="grade-col">{{ item.label }}</td>
                                     <td>{{ item.precision }}</td>
                                     <td>{{ item.recall }}</td>
                                     <td>{{ item.f1 }}</td>
-                                    <td style="opacity: 0.5;">{{ item.support }}</td>
+                                    <td class="sup-col">{{ item.support }}</td>
                                 </tr>
                                 {% endfor %}
                             </tbody>
                         </table>
                     </div>
-                </section>
+                </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>
+            <!-- Right Column: Confusion Matrix -->
+            <div class="dashboard-sidebar">
+                <p class="section-label">CONFUSION MATRIX</p>
+                <div class="cm-compact">
+                    <table class="cm-compact-table">
+                        <thead>
+                            <tr>
+                                <th class="cm-corner">A\P</th>
+                                {% for label in metrics.confusion_matrix.labels %}
+                                <th>{{ label }}</th>
                                 {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for row_idx in range(metrics.confusion_matrix.matrix|length) %}
+                            <tr>
+                                <td class="cm-row-label">{{ 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-cell {% if row_idx == col_idx %}cm-diag{% endif %} {% if val == 0 %}cm-zero{% endif %}">
+                                    {{ val }}
+                                </td>
+                                {% endfor %}
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
 
-                    <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>
+                <!-- Summary Cards -->
+                <div class="summary-mini">
+                    <div class="summary-mini-card">
+                        <span class="summary-mini-label">MACRO F1</span>
+                        <span class="summary-mini-value">{{ metrics.macro_f1|round(3) }}</span>
+                    </div>
+                    <div class="summary-mini-card">
+                        <span class="summary-mini-label">ACCURACY</span>
+                        <span class="summary-mini-value">{{ (metrics.accuracy * 100)|round(1) }}%</span>
                     </div>
-                </section>
+                </div>
             </div>
         </div>
         {% endif %}
 
-        <section class="upload-card" style="margin-top: 1rem; padding: 1.5rem; border-radius: 8px;">
-            <p class="label-mini">Inference Manifest</p>
-            <div class="table-wrapper">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Stone Identifier</th>
-                            {% for feature in model_features %}
-                            <th>{{ feature }}</th>
-                            {% endfor %}
-                            <th>AI Result</th>
-                            {% for col in out_of_box_cols %}
-                            <th>{{ col }}</th>
-                            {% endfor %}
-                            <th>Preview</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for row in report_data %}
-                        <tr>
-                            <td style="font-size: 14px; font-weight: 900; color: white;">{{ row.L_Code }}</td>
-                            {% for feature in model_features %}
-                            <td style="opacity: 0.7;">{{ row[feature] }}</td>
-                            {% endfor %}
-                            <td style="color: var(--secondary-color); font-size: 14px; font-weight: 900;">{{
-                                row.Predicted_FGrdCol }}</td>
-                            {% for col in out_of_box_cols %}
-                            <td>
-                                {% if row[col] and row[col]|string != 'nan' %}
-                                <span class="badge-oob">{{ row[col] }}</span>
-                                {% else %}
-                                <span style="opacity: 0.2;">-</span>
-                                {% endif %}
-                            </td>
+        <!-- Inference Manifest (Expanded by default for immediate access) -->
+        <section class="manifest-section">
+            <div class="manifest-header" onclick="toggleManifest()">
+                <p class="section-label" style="margin: 0;">INFERENCE MANIFEST</p>
+                <span class="toggle-icon" id="manifest-toggle">▼</span>
+            </div>
+            <div class="manifest-content" id="manifest-content" style="display: block;">
+                <div class="table-wrapper" style="max-height: 350px; margin-top: 0.5rem;">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>STONE ID</th>
+                                {% for feature in model_features %}
+                                <th>{{ feature }}</th>
+                                {% endfor %}
+                                <th>AI RESULT</th>
+                                {% for col in out_of_box_cols %}
+                                <th>{{ col }}</th>
+                                {% endfor %}
+                                <th>IMG</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for row in report_data %}
+                            <tr>
+                                <td class="stone-id-col">{{ row.L_Code }}</td>
+                                {% for feature in model_features %}
+                                <td style="opacity: 0.7; font-size: 11px;">{{ row[feature] }}</td>
+                                {% endfor %}
+                                <td class="result-col">{{ row.Predicted_FGrdCol }}</td>
+                                {% for col in out_of_box_cols %}
+                                <td style="font-size: 10px;">
+                                    {% if row[col] and row[col]|string != 'nan' %}
+                                    <span class="badge-oob">{{ row[col] }}</span>
+                                    {% else %}
+                                    <span style="opacity: 0.2;">-</span>
+                                    {% endif %}
+                                </td>
+                                {% endfor %}
+                                <td>
+                                    {% if row.Image_Path != 'N/A' %}
+                                    <img src="/image/{{ row.Image_Path }}" class="img-thumb"
+                                        onclick="openModal(this.src)" alt="Diamond">
+                                    {% else %}
+                                    <span style="font-size: 8px; opacity: 0.3;">N/A</span>
+                                    {% endif %}
+                                </td>
+                            </tr>
                             {% endfor %}
-                            <td>
-                                {% if row.Image_Path != 'N/A' %}
-                                <img src="/image/{{ row.Image_Path }}" class="img-thumb" onclick="openModal(this.src)"
-                                    alt="Diamond Preview">
-                                {% else %}
-                                <span style="font-size: 10px; opacity: 0.3;">NO IMAGE</span>
-                                {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </section>
 
-        <footer style="margin-top: 4rem; padding-bottom: 2rem;">
+        <footer style="margin-top: 1rem; padding-bottom: 1rem; text-align: center;">
             <a href="/"
-                style="font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: white; opacity: 0.5; text-decoration: none;">←
-                New Batch</a>
+                style="font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: white; opacity: 0.5; text-decoration: none;">←
+                NEW BATCH</a>
         </footer>
     </div>
 
@@ -194,6 +200,18 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        function toggleManifest() {
+            const content = document.getElementById('manifest-content');
+            const toggle = document.getElementById('manifest-toggle');
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+                toggle.textContent = '▼';
+            } else {
+                content.style.display = 'none';
+                toggle.textContent = '▶';
+            }
+        }
+
         function openModal(src) {
             const modal = document.getElementById('image-modal');
             const modalImg = document.getElementById('modal-img');
@@ -206,12 +224,11 @@
             modal.classList.remove('active');
         }
 
-        // Close modal on background click
         document.getElementById('image-modal').onclick = function (e) {
             if (e.target === this) closeModal();
         };
 
-        // Shader from index.html repeated for consistency
+        // Background shader
         const vertexShader = `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
         const fragmentShader = `
           uniform float uTime;