Update index.html

index.html

@@ -280,17 +280,28 @@
                 
                 <!-- Performance Stats -->
                 <div class="bg-gray-800/30 rounded-xl p-3 text-xs space-y-1 border border-gray-700/50">
-                    <!-- <div class="flex justify-between">
-                        <span class="text-gray-500">Similarity Score:</span>
-                        <span id="similarityScore" class="font-mono text-emerald-400"></span>
-                    </div> -->
+                    <div class="flex justify-between items-center mb-2 pb-2 border-b border-gray-700/50">
+                        <span class="text-gray-400 font-semibold">Performance Breakdown</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-500">Client Processing:</span>
+                        <span id="clientProcessingTime" class="font-mono text-cyan-400"></span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-500">Server Prediction: 🚀</span>
+                        <span id="predictionTime" class="font-mono text-emerald-400 font-bold"></span>
+                    </div>
                     <div class="flex justify-between">
-                        <span class="text-gray-500">Prediction Time:</span>
-                        <span id="predictionTime" class="font-mono text-blue-400"></span>
+                        <span class="text-gray-500">Scryfall API:</span>
+                        <span id="scryfallTime" class="font-mono text-orange-400"></span>
                     </div>
                     <div class="flex justify-between">
-                        <span class="text-gray-500">Total Time:</span>
-                        <span id="totalTime" class="font-mono text-violet-400"></span>
+                        <span class="text-gray-500">Remainder (network, UI, etc.):</span>
+                        <span id="remainderTime" class="font-mono text-gray-400"></span>
+                    </div>
+                    <div class="flex justify-between pt-2 border-t border-gray-700/50">
+                        <span class="text-gray-400 font-semibold">Total Time:</span>
+                        <span id="totalTime" class="font-mono text-violet-400 font-semibold"></span>
                     </div>
                 </div>
             </div>
@@ -311,6 +322,7 @@
     <!-- Hidden canvas for processing -->
     <canvas id="processingCanvas" class="hidden" width="224" height="224"></canvas>
     <canvas id="processedCanvas" class="hidden" width="224" height="224"></canvas>
+
     
     <script>
         document.addEventListener('DOMContentLoaded', () => {
@@ -350,15 +362,48 @@
             let currentStream = null;
             let startTime = null;
             const FINAL_SIZE = 224;
+            let viewHistory = ['landing']; // Track navigation history
+            
+            // Timing variables
+            let timings = {
+                clientProcessing: 0,
+                serverPrediction: 0,
+                scryfallApi: 0,
+                remainder: 0,
+                total: 0
+            };
 
             // --- View Navigation ---
             
-            function showView(viewId) {
+            function showView(viewId, addToHistory = true) {
                 // Hide all views
                 Object.values(views).forEach(view => view.classList.add('hidden'));
                 // Show the target view
                 if (views[viewId]) {
                     views[viewId].classList.remove('hidden');
+                    // Add to history if specified
+                    if (addToHistory) {
+                        viewHistory.push(viewId);
+                    }
+                }
+            }
+
+            function goBack() {
+                // Remove current view from history
+                if (viewHistory.length > 1) {
+                    viewHistory.pop();
+                    // Get previous view
+                    const previousView = viewHistory[viewHistory.length - 1];
+                    showView(previousView, false); // Don't add to history when going back
+                    
+                    // Restart camera if going back to live scan
+                    if (previousView === 'liveScan' && !currentStream) {
+                        startCamera();
+                    }
+                } else {
+                    // Fallback to landing if history is empty
+                    viewHistory = ['landing'];
+                    showView('landing', false);
                 }
             }
 
@@ -422,6 +467,8 @@
             // --- Image Processing ---
 
             function processImage(source, sourceWidth, sourceHeight) {
+                // Timing will be completed in callPredictAPI after blob conversion
+                
                 // 1. Find the smallest dimension to create a square crop
                 const size = Math.min(sourceWidth, sourceHeight);
                 
@@ -469,11 +516,16 @@
 
             async function callPredictAPI() {
                 try {
-                    // Convert canvas to blob
+                    const clientStart = performance.now();
+                    
+                    // Convert canvas to blob (includes preprocessing time from processImage)
                     const blob = await new Promise(resolve => {
                         processedCanvas.toBlob(resolve, 'image/png');
                     });
                     
+                    const clientEnd = performance.now();
+                    timings.clientProcessing = Math.round(clientEnd - clientStart);
+                    
                     // Create form data
                     const formData = new FormData();
                     formData.append('file', blob, 'image.png');
@@ -490,6 +542,10 @@
                     }
                     
                     const result = await response.json();
+                    
+                    // Server prediction time comes from the API response
+                    timings.serverPrediction = result.prediction_time;
+                    
                     return result;
                     
                 } catch (error) {
@@ -501,11 +557,18 @@
 
             async function fetchCardDetails(cardId) {
                 try {
+                    const scryfallStart = performance.now();
+                    
                     const response = await fetch(`https://api.scryfall.com/cards/${cardId}`);
                     if (!response.ok) {
                         throw new Error('Failed to fetch card details');
                     }
-                    return await response.json();
+                    const data = await response.json();
+                    
+                    const scryfallEnd = performance.now();
+                    timings.scryfallApi = Math.round(scryfallEnd - scryfallStart);
+                    
+                    return data;
                 } catch (error) {
                     console.error('Scryfall API Error:', error);
                     showMessage('Error fetching card details from Scryfall');
@@ -531,8 +594,6 @@
                 
                 // Call the prediction API
                 const apiResult = await callPredictAPI();
-                const endTime = Date.now();
-                const totalTime = endTime - startTime;
                 
                 if (!apiResult) {
                     showMessage('Failed to identify card');
@@ -642,10 +703,27 @@
                     `;
                 }
                 
+                // Calculate total time and remainder
+                const endTime = performance.now();
+                timings.total = Math.round(endTime - startTime);
+                
+                // Calculate remainder (everything not explicitly tracked)
+                timings.remainder = timings.total - timings.clientProcessing - timings.serverPrediction - timings.scryfallApi;
+                
                 // Performance stats
-                //document.getElementById('similarityScore').textContent = apiResult.similarity.toFixed(4);
-                document.getElementById('predictionTime').textContent = `${apiResult.prediction_time}ms`;
-                document.getElementById('totalTime').textContent = `${totalTime}ms`;
+                document.getElementById('clientProcessingTime').textContent = `${timings.clientProcessing}ms`;
+                document.getElementById('predictionTime').textContent = `${timings.serverPrediction}ms`;
+                document.getElementById('scryfallTime').textContent = `${timings.scryfallApi}ms`;
+                document.getElementById('remainderTime').textContent = `${timings.remainder}ms`;
+                document.getElementById('totalTime').textContent = `${timings.total}ms`;
+                
+                // Log timing breakdown for debugging
+                console.log('Performance Breakdown:');
+                console.log(`  Client Processing (crop+resize+blob): ${timings.clientProcessing}ms`);
+                console.log(`  🚀 Server Prediction: ${timings.serverPrediction}ms`);
+                console.log(`  Scryfall API: ${timings.scryfallApi}ms`);
+                console.log(`  Remainder (network, UI, etc.): ${timings.remainder}ms`);
+                console.log(`  Total: ${timings.total}ms`);
             }
             
             // --- Event Listeners ---
@@ -661,9 +739,15 @@
 
             backButtons.forEach(button => {
                 button.addEventListener('click', () => {
-                    stopCamera();
-                    fileInput.value = null; // Clear file input
-                    showView('landing');
+                    // Stop camera if currently active
+                    if (currentStream) {
+                        stopCamera();
+                    }
+                    // Clear file input if in upload view
+                    if (!views.upload.classList.contains('hidden')) {
+                        fileInput.value = null;
+                    }
+                    goBack();
                 });
             });
 
@@ -673,7 +757,7 @@
                     return;
                 }
                 
-                startTime = Date.now();
+                startTime = performance.now();
                 
                 // Process the current video frame
                 processImage(video, video.videoWidth, video.videoHeight);
@@ -691,7 +775,7 @@
                     return;
                 }
 
-                startTime = Date.now();
+                startTime = performance.now();
 
                 const reader = new FileReader();
                 reader.onload = (e) => {