start of streaming

web/index.html

@@ -13,62 +13,23 @@
         <div class="controls">
             <button onclick="currentMode === 'terrain' ? refreshTerrain() : refreshImage()" id="refreshBtn">Refresh Image</button>
             <button onclick="toggleAutoRefresh()" id="autoRefreshBtn">Start Auto-Refresh (5s)</button>
+            <button onclick="toggleStream()" id="streamBtn">Start Stream</button>
             <button onclick="switchMode()" id="switchModeBtn" style="display: none;">Switch Mode</button>
             <button onclick="showStats()" id="statsBtn">Show Performance Stats</button>
-            <button onclick="clearStats()" id="clearStatsBtn">Clear Stats</button>
-            <button onclick="toggleParameters()" id="paramsBtn">Show Parameters</button>
         </div>
         
-        <!-- Parameter Control Panel -->
-        <div id="parameterPanel" class="parameter-panel" style="display: none;">
-            <h3>Terrain Parameters</h3>
-            <div class="param-grid">
-                <div class="param-group">
-                    <label for="scale">Scale:</label>
-                    <input type="range" id="scale" min="0.1" max="20" step="0.1" value="4.0">
-                    <span id="scaleValue">4.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="octaves">Octaves:</label>
-                    <input type="range" id="octaves" min="1" max="8" step="1" value="4">
-                    <span id="octavesValue">4</span>
-                </div>
-                <div class="param-group">
-                    <label for="persistence">Persistence:</label>
-                    <input type="range" id="persistence" min="0" max="1" step="0.05" value="0.5">
-                    <span id="persistenceValue">0.5</span>
-                </div>
-                <div class="param-group">
-                    <label for="lacunarity">Lacunarity:</label>
-                    <input type="range" id="lacunarity" min="1" max="4" step="0.1" value="2.0">
-                    <span id="lacunarityValue">2.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="elevation">Elevation Multiplier:</label>
-                    <input type="range" id="elevation" min="0.1" max="3" step="0.1" value="1.0">
-                    <span id="elevationValue">1.0</span>
-                </div>
-                <div class="param-group">
-                    <label for="waterLevel">Water Level:</label>
-                    <input type="range" id="waterLevel" min="0" max="1" step="0.05" value="0.3">
-                    <span id="waterLevelValue">0.3</span>
-                </div>
-                <div class="param-group">
-                    <label for="seed">Seed:</label>
-                    <input type="number" id="seed" value="42" min="0" max="999999">
-                    <button onclick="randomizeSeed()">Random</button>
-                </div>
-            </div>
-            <div class="param-actions">
-                <button onclick="applyParameters()">Apply Parameters</button>
-                <button onclick="resetParameters()">Reset to Default</button>
+        <div class="stream-container">
+            <canvas id="streamCanvas" width="512" height="512"></canvas>
+            <div id="streamInfo" class="stream-info">
+                <span id="fpsCounter">0 FPS</span>
+                <span id="frameCounter">Frame: 0</span>
             </div>
         </div>
         
         <div class="image-container">
             <img id="displayImage" src="./output/display.jxl" alt="Dynamic Image">
         </div>
-        
+
         <div id="statsPanel" class="stats-panel" style="display: none;">
             <div class="stats-header">
                 <h3>Performance Statistics</h3>
@@ -82,6 +43,7 @@
         <div id="status" class="status"></div>
     </div>
 
+    <script src="stream.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
+</html>

web/stream.js

@@ -0,0 +1,152 @@
+let streamInterval = null;
+let isStreaming = false;
+let frameCount = 0;
+let lastFrameTime = 0;
+let currentFPS = 0;
+
+const canvas = document.getElementById('streamCanvas');
+const ctx = canvas.getContext('2d');
+const fpsCounter = document.getElementById('fpsCounter');
+const frameCounter = document.getElementById('frameCounter');
+
+function toggleStream() {
+    const button = document.getElementById('streamBtn');
+    
+    if (isStreaming) {
+        stopStream();
+        button.textContent = 'Start Stream';
+        button.classList.remove('danger');
+        updateStatus('Stream stopped');
+    } else {
+        startStream();
+        button.textContent = 'Stop Stream';
+        button.classList.add('danger');
+        updateStatus('Stream started');
+    }
+}
+
+function startStream() {
+    isStreaming = true;
+    frameCount = 0;
+    lastFrameTime = performance.now();
+    
+    // Start the stream loop
+    streamInterval = setInterval(fetchFrame, 1000 / 30); // Start with 30 FPS
+}
+
+function stopStream() {
+    isStreaming = false;
+    if (streamInterval) {
+        clearInterval(streamInterval);
+        streamInterval = null;
+    }
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#333';
+    ctx.font = '20px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('Stream Stopped', canvas.width / 2, canvas.height / 2);
+}
+
+async function fetchFrame() {
+    if (!isStreaming) return;
+    
+    try {
+        const response = await fetch('/api/live-stream');
+        const data = await response.json();
+        
+        if (data.frame_available) {
+            // In a real implementation, you'd decode the frame data and draw it
+            // For now, we'll simulate by generating a pattern based on time
+            drawSimulatedFrame();
+            updateFrameCounter();
+        }
+    } catch (error) {
+        console.error('Error fetching frame:', error);
+        updateStatus('Error fetching frame', 'error');
+    }
+}
+
+function updateFrameCounter() {
+    frameCount++;
+    const now = performance.now();
+    const elapsed = now - lastFrameTime;
+    
+    if (elapsed >= 1000) {
+        currentFPS = Math.round((frameCount * 1000) / elapsed);
+        fpsCounter.textContent = `${currentFPS} FPS`;
+        frameCounter.textContent = `Frame: ${frameCount}`;
+        frameCount = 0;
+        lastFrameTime = now;
+    }
+}
+
+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);
+}
+
+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 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;
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+    // Setup sliders
+    setupSlider('fps', 'fpsValue', 30);
+    setupSlider('quality', 'qualityValue', 85);
+    
+    // Show stopped state
+    stopStream();
+});

web/style.css

@@ -169,4 +169,39 @@ button.danger:hover {
         grid-template-columns: 1fr;
     }
     
-}
+}
+
+.stream-container {
+    position: relative;
+    margin: 20px 0;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    display: inline-block;
+}
+
+#streamCanvas {
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    background: #000;
+}
+
+.stream-info {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stream-info span {
+    color: #fff;
+    font-family: monospace;
+}
+
+/* DO NOT ADD STATS CSS*/