much better.

web/index.html

@@ -11,12 +11,26 @@
         <div class="controls">
             <button onclick="refreshImage()">Refresh Image</button>
             <button onclick="toggleAutoRefresh()" id="autoRefreshBtn">Start Auto-Refresh (30s)</button>
+            <button onclick="showStats()" id="statsBtn">Show Performance Stats</button>
+            <button onclick="clearStats()" id="clearStatsBtn">Clear Stats</button>
         </div>
         
         <div class="image-container">
-            <img id="gradientImage" src="gradient.jxl" alt="Dynamic Gradient">
+            <img id="gradientImage" src="/output/gradient.jxl" alt="Dynamic Gradient">
         </div>
         
+        <div id="statsPanel" class="stats-panel" style="display: none;">
+            <div class="stats-header">
+                <h3>Performance Statistics</h3>
+                <button onclick="hideStats()" class="close-btn">&times;</button>
+            </div>
+            <div id="statsContent" class="stats-content">
+                <!-- Stats will be loaded here -->
+            </div>
+        </div>
+        
+        <div id="status" class="status"></div>
+    </div>
 
     <script src="script.js"></script>
 </body>

web/script.js

@@ -18,7 +18,6 @@ function refreshImage() {
     };
 }
 
-
 function toggleAutoRefresh() {
     const button = document.getElementById('autoRefreshBtn');
     
@@ -36,6 +35,77 @@ function toggleAutoRefresh() {
     }
 }
 
+function showStats() {
+    fetch('/api/timing-stats')
+        .then(response => response.json())
+        .then(data => {
+            displayStats(data);
+            document.getElementById('statsPanel').style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Error fetching stats:', error);
+            updateStatus('Error loading stats', 'error');
+        });
+}
+
+function hideStats() {
+    document.getElementById('statsPanel').style.display = 'none';
+}
+
+function clearStats() {
+    fetch('/api/clear-stats', { method: 'POST' })
+        .then(response => response.json())
+        .then(data => {
+            updateStatus('Statistics cleared');
+            hideStats();
+        })
+        .catch(error => {
+            console.error('Error clearing stats:', error);
+            updateStatus('Error clearing stats', 'error');
+        });
+}
+
+function displayStats(stats) {
+    const statsContent = document.getElementById('statsContent');
+    
+    if (stats.length === 0) {
+        statsContent.innerHTML = '<p>No timing data available.</p>';
+        return;
+    }
+    
+    let html = '<table class="stats-table">';
+    html += '<tr><th>Function</th><th>Calls</th><th>Total (s)</th><th>Avg (s)</th><th>Min (s)</th><th>Max (s)</th><th>Median (s)</th><th>P90 (s)</th><th>P95 (s)</th><th>P99 (s)</th></tr>';
+    
+    stats.forEach(stat => {
+        html += `<tr>
+            <td>${stat.function}</td>
+            <td>${stat.call_count}</td>
+            <td>${parseFloat(stat.total_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.avg_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.min_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.max_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.median_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p90_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p95_time).toFixed(6)}</td>
+            <td>${parseFloat(stat.p99_time).toFixed(6)}</td>
+        </tr>`;
+    });
+    
+    html += '</table>';
+    statsContent.innerHTML = html;
+}
+
+function updateStatus(message, type = 'info') {
+    const statusEl = document.getElementById('status');
+    statusEl.textContent = message;
+    statusEl.className = `status ${type}`;
+    
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        statusEl.textContent = '';
+        statusEl.className = 'status';
+    }, 5000);
+}
 
 // Auto-refresh when page loads
 document.addEventListener('DOMContentLoaded', function() {