Update try_page.html

try_page.html

@@ -300,10 +300,10 @@
         const detectionCanvas = document.getElementById('detectionCanvas');
         const ctx = detectionCanvas.getContext('2d');
         const debugOutput = document.getElementById('debugOutput');
-
+    
         // Enable debug mode (set to false in production)
         const DEBUG = true;
-
+    
         // API endpoint URL
         const API_URL = '/api/predict';
         
@@ -313,73 +313,73 @@
         let processingWidth = 0;
         let processingHeight = 0;
         let responseData = null;
-
+    
         // Tab switching functionality
         tabButtons.forEach(button => {
             button.addEventListener('click', () => {
                 const tabName = button.getAttribute('data-tab');
-
+    
                 // Update button states
                 tabButtons.forEach(btn => btn.classList.remove('active'));
                 button.classList.add('active');
-
+    
                 // Update tab content visibility
                 tabContents.forEach(content => content.classList.remove('active'));
                 document.getElementById(tabName + 'Tab').classList.add('active');
-
+    
                 // If switching to visual tab and we have data, ensure visualization is rendered
                 if (tabName === 'visual' && responseData && originalImage) {
                     visualizeResults(originalImage, responseData);
                 }
             });
         });
-
+    
         // Handle file input change
         fileInput.addEventListener('change', (event) => {
             const file = event.target.files[0];
-
+    
             // Clear previous selections
             imageFile = null;
             imagePreview.style.display = 'none';
             sendButton.disabled = true;
             originalImage = null;
             responseData = null;
-
+    
             // Validate file
             if (!file) return;
-
+    
             if (file.size > 2 * 1024 * 1024) {
                 showMessage('File size exceeds 2MB limit.', 'error');
                 return;
             }
-
+    
             if (!['image/png', 'image/jpeg'].includes(file.type)) {
                 showMessage('Only PNG and JPEG formats are supported.', 'error');
                 return;
             }
-
+    
             // Store file for upload
             imageFile = file;
-
+    
             // Show image preview
             const reader = new FileReader();
             reader.onload = (e) => {
                 const image = new Image();
                 image.src = e.target.result;
-
+    
                 image.onload = () => {
                     // Store original image for visualization
                     originalImage = image;
-
+    
                     // Set preview
                     imagePreview.src = e.target.result;
                     imagePreview.style.display = 'block';
-
+    
                     // Update image info
                     imageSizeInfo.textContent = `Original size: ${image.width}x${image.height} pixels`;
-
-                    // Calculate processing dimensions (for visualization)
-                    calculateProcessingDimensions(image.width, image.height);
+    
+                    // Resize image for processing
+                    resizeImage(image, file.type);
                     
                     // Enable send button
                     sendButton.disabled = false;
@@ -388,12 +388,16 @@
             };
             reader.readAsDataURL(file);
         });
-
-        // Calculate dimensions for processing visualization
-        function calculateProcessingDimensions(width, height) {
+    
+        // Resize image function
+        function resizeImage(image, fileType) {
+            const canvas = document.createElement('canvas');
             const maxWidth = 640;
             const maxHeight = 320;
-
+    
+            let width = image.width;
+            let height = image.height;
+    
             // Calculate dimensions
             if (width > height) {
                 if (width > maxWidth) {
@@ -406,56 +410,65 @@
                     height = maxHeight;
                 }
             }
-
+    
             // Store processing dimensions for visualization
             processingWidth = width;
             processingHeight = height;
-        }
-
+    
+            // Set canvas dimensions and draw image
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(image, 0, 0, width, height);
+    
+            // For API calls, we don't need to convert to binary
+            // but we keep this method to ensure dimensions are correctly calculated
+        }
+    
         // Handle send button click
         sendButton.addEventListener('click', async () => {
             if (!imageFile) {
                 showMessage('No image selected.', 'error');
                 return;
             }
-
+    
             // Clear previous response
             responseOutput.textContent = "// Processing...";
             clearCanvas();
             responseData = null;
             debugOutput.style.display = 'none';
-
+    
             // Show loading state
             loading.style.display = 'block';
             message.style.display = 'none';
-
+    
             // Reset processing time
             processingTimeInfo.textContent = '';
-
+    
             // Record start time
             startTime = performance.now();
-
+    
             // Create form data for HTTP request
             const formData = new FormData();
             formData.append('file', imageFile);
-
+    
             try {
                 // Send HTTP request
                 const response = await fetch(API_URL, {
                     method: 'POST',
                     body: formData
                 });
-
+    
                 // Handle response
                 if (!response.ok) {
                     const errorText = await response.text();
                     throw new Error(`HTTP error ${response.status}: ${errorText}`);
                 }
-
+    
                 // Parse JSON response
                 const data = await response.json();
                 responseData = data;
-
+    
                 // Calculate processing time
                 const endTime = performance.now();
                 const timeTaken = endTime - startTime;
@@ -463,12 +476,12 @@
                 // Format and display raw response
                 responseOutput.textContent = JSON.stringify(data, null, 2);
                 processingTimeInfo.textContent = `Processing time: ${timeTaken.toFixed(2)} ms`;
-
+    
                 // Visualize the results
                 if (originalImage) {
                     visualizeResults(originalImage, data);
                 }
-
+    
                 // Show success message
                 showMessage('Image processed successfully!', 'success');
             } catch (error) {
@@ -484,52 +497,42 @@
                 loading.style.display = 'none';
             }
         });
-
+    
         // Visualize detection results
-          // Visualize detection results
         function visualizeResults(image, data) {
             try {
                 // Set canvas dimensions
                 detectionCanvas.width = processingWidth;
                 detectionCanvas.height = processingHeight;
 
-                // Draw the original image
+                // Draw the resized original image
                 ctx.drawImage(image, 0, 0, processingWidth, processingHeight);
 
                 // Set styles for bounding boxes
                 ctx.lineWidth = 3;
                 ctx.font = 'bold 14px Arial';
 
-                // Find detections (checking all common formats)
+                // Find detections from various possible keys
                 let detections = [];
-                let detectionSource = '';
-
                 if (data.detections && Array.isArray(data.detections)) {
                     detections = data.detections;
-                    detectionSource = 'detections';
                 } else if (data.predictions && Array.isArray(data.predictions)) {
                     detections = data.predictions;
-                    detectionSource = 'predictions';
                 } else if (data.objects && Array.isArray(data.objects)) {
                     detections = data.objects;
-                    detectionSource = 'objects';
                 } else if (data.results && Array.isArray(data.results)) {
                     detections = data.results;
-                    detectionSource = 'results';
                 } else {
                     // Try to look one level deeper if no detections found
                     for (const key in data) {
                         if (typeof data[key] === 'object' && data[key] !== null) {
                             if (Array.isArray(data[key])) {
                                 detections = data[key];
-                                detectionSource = key;
                                 break;
                             } else {
-                                // Look one more level down
                                 for (const subKey in data[key]) {
                                     if (Array.isArray(data[key][subKey])) {
                                         detections = data[key][subKey];
-                                        detectionSource = `${key}.${subKey}`;
                                         break;
                                     }
                                 }
@@ -538,19 +541,21 @@
                     }
                 }
 
+                // Scaling factors based on original image vs resized processing dimensions
+                const scaleX = processingWidth / image.width;
+                const scaleY = processingHeight / image.height;
+
                 // Process each detection
                 detections.forEach((detection, index) => {
-                    // Try to extract bounding box information
                     let bbox = null;
                     let label = null;
                     let confidence = null;
                     let distance = null;
 
-                    // Extract label/class
+                    // Extract label
                     if (detection.class !== undefined) {
                         label = detection.class;
                     } else {
-                        // Fallback to other common property names
                         for (const key of ['label', 'name', 'category', 'className']) {
                             if (detection[key] !== undefined) {
                                 label = detection[key];
@@ -558,11 +563,9 @@
                             }
                         }
                     }
-
-                    // Default label if none found
                     if (!label) label = `Object ${index + 1}`;
 
-                    // Extract confidence score if available
+                    // Extract confidence score
                     for (const key of ['confidence', 'score', 'probability', 'conf']) {
                         if (detection[key] !== undefined) {
                             confidence = detection[key];
@@ -570,11 +573,10 @@
                         }
                     }
 
-                    // Extract distance - specifically look for distance_estimated first
+                    // Extract distance (using 'distance_estimated' first)
                     if (detection.distance_estimated !== undefined) {
                         distance = detection.distance_estimated;
                     } else {
-                        // Fallback to other common distance properties
                         for (const key of ['distance', 'depth', 'z', 'dist', 'range']) {
                             if (detection[key] !== undefined) {
                                 distance = detection[key];
@@ -583,7 +585,7 @@
                         }
                     }
 
-                    // Look for bounding box in features
+                    // Attempt to get bounding box coordinates
                     if (detection.features &&
                         detection.features.xmin !== undefined &&
                         detection.features.ymin !== undefined &&
@@ -597,11 +599,9 @@
                             ymax: detection.features.ymax
                         };
                     } else {
-                        // Recursively search for bbox-like properties
-                        function findBBox(obj, path = '') {
+                        // Recursive search for bbox-like properties
+                        function findBBox(obj) {
                             if (!obj || typeof obj !== 'object') return null;
-
-                            // Check if this object looks like a bbox
                             if ((obj.x !== undefined && obj.y !== undefined &&
                                 (obj.width !== undefined || obj.w !== undefined ||
                                 obj.height !== undefined || obj.h !== undefined)) ||
@@ -609,142 +609,145 @@
                                 obj.xmax !== undefined && obj.ymax !== undefined)) {
                                 return obj;
                             }
-
-                            // Check if it's an array of 4 numbers (potential bbox)
                             if (Array.isArray(obj) && obj.length === 4 &&
                                 obj.every(item => typeof item === 'number')) {
                                 return obj;
                             }
-
-                            // Check common bbox property names
                             for (const key of ['bbox', 'box', 'bounding_box', 'boundingBox']) {
                                 if (obj[key] !== undefined) {
                                     return obj[key];
                                 }
                             }
-
-                            // Search nested properties
                             for (const key in obj) {
-                                const result = findBBox(obj[key], path ? `${path}.${key}` : key);
+                                const result = findBBox(obj[key]);
                                 if (result) return result;
                             }
-
                             return null;
                         }
-
-                        // Find bbox using recursive search as fallback
                         bbox = findBBox(detection);
                     }
 
-                    // If we found a bounding box, draw it
+                    // If bounding box found, process and draw it
                     if (bbox) {
-                        // Parse different bbox formats
                         let x, y, width, height;
-
                         if (Array.isArray(bbox)) {
-                            // Try to determine array format
                             if (bbox.length === 4) {
-                                if (bbox[0] >= 0 && bbox[1] >= 0 && bbox[2] <= 1 && bbox[3] <= 1) {
-                                    // Likely normalized [x1, y1, x2, y2]
+                                // Check if values are normalized (all between 0 and 1)
+                                const isNormalized = bbox.every(val => val >= 0 && val <= 1);
+                                if (isNormalized) {
                                     x = bbox[0] * processingWidth;
                                     y = bbox[1] * processingHeight;
                                     width = (bbox[2] - bbox[0]) * processingWidth;
                                     height = (bbox[3] - bbox[1]) * processingHeight;
                                 } else if (bbox[2] > bbox[0] && bbox[3] > bbox[1]) {
-                                    // Likely [x1, y1, x2, y2]
-                                    x = bbox[0];
-                                    y = bbox[1];
-                                    width = bbox[2] - bbox[0];
-                                    height = bbox[3] - bbox[1];
+                                    // Absolute coordinates
+                                    x = bbox[0] * scaleX;
+                                    y = bbox[1] * scaleY;
+                                    width = (bbox[2] - bbox[0]) * scaleX;
+                                    height = (bbox[3] - bbox[1]) * scaleY;
                                 } else {
-                                    // Assume [x, y, width, height]
-                                    x = bbox[0];
-                                    y = bbox[1];
-                                    width = bbox[2];
-                                    height = bbox[3];
+                                    // Format assumed to be [x, y, width, height]
+                                    x = bbox[0] * scaleX;
+                                    y = bbox[1] * scaleY;
+                                    width = bbox[2] * scaleX;
+                                    height = bbox[3] * scaleY;
                                 }
                             }
                         } else {
-                            // Object format with named properties
+                            // Object format handling
                             if (bbox.x !== undefined && bbox.y !== undefined) {
+                                // x,y,width,height format
                                 x = bbox.x;
                                 y = bbox.y;
                                 width = bbox.width || bbox.w || 0;
                                 height = bbox.height || bbox.h || 0;
+                                // Check if normalized
+                                if (x <= 1 && y <= 1 && width <= 1 && height <= 1) {
+                                    x *= processingWidth;
+                                    y *= processingHeight;
+                                    width *= processingWidth;
+                                    height *= processingHeight;
+                                } else {
+                                    // Assume coordinates are based on the original image
+                                    x *= scaleX;
+                                    y *= scaleY;
+                                    width *= scaleX;
+                                    height *= scaleY;
+                                }
                             } else if (bbox.xmin !== undefined && bbox.ymin !== undefined) {
                                 x = bbox.xmin;
                                 y = bbox.ymin;
                                 width = (bbox.xmax || 0) - bbox.xmin;
                                 height = (bbox.ymax || 0) - bbox.ymin;
+                                if (x <= 1 && y <= 1 && bbox.xmax <= 1 && bbox.ymax <= 1) {
+                                    x *= processingWidth;
+                                    y *= processingHeight;
+                                    width *= processingWidth;
+                                    height *= processingHeight;
+                                } else {
+                                    x *= scaleX;
+                                    y *= scaleY;
+                                    width *= scaleX;
+                                    height *= scaleY;
+                                }
                             }
                         }
 
-                        // Validate coordinates
-                        if (x === undefined || y === undefined || width === undefined || height === undefined) {
-                            return;
-                        }
-
-                        // Check if we need to scale normalized coordinates (0-1)
-                        if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && width >= 0 && width <= 1 && height >= 0 && height <= 1) {
-                            x = x * processingWidth;
-                            y = y * processingHeight;
-                            width = width * processingWidth;
-                            height = height * processingHeight;
-                        }
-
-                        // Generate a color based on the class name
-                        const hue = stringToHue(label);
-                        ctx.strokeStyle = `hsl(${hue}, 100%, 40%)`;
-                        ctx.fillStyle = `hsla(${hue}, 100%, 40%, 0.3)`;
-
-                        // Draw bounding box
-                        ctx.beginPath();
-                        ctx.rect(x, y, width, height);
-                        ctx.stroke();
-                        ctx.fill();
-
-                        // Format confidence value
-                        let confidenceText = "";
-                        if (confidence !== null && confidence !== undefined) {
-                            // Convert to percentage if it's a probability (0-1)
-                            if (confidence <= 1) {
-                                confidence = (confidence * 100).toFixed(0);
-                            } else {
-                                confidence = confidence.toFixed(0);
+                        // Draw the bounding box if coordinates are valid
+                        if (x !== undefined && y !== undefined &&
+                            width !== undefined && height !== undefined &&
+                            width > 0 && height > 0) {
+                            
+                            // Generate a color based on the label
+                            const hue = stringToHue(label);
+                            ctx.strokeStyle = `hsl(${hue}, 100%, 40%)`;
+                            ctx.fillStyle = `hsla(${hue}, 100%, 40%, 0.3)`;
+
+                            // Draw the bounding box rectangle
+                            ctx.beginPath();
+                            ctx.rect(x, y, width, height);
+                            ctx.stroke();
+                            ctx.fill();
+
+                            // Format and display confidence value if available
+                            let confidenceText = "";
+                            if (confidence !== null && confidence !== undefined) {
+                                if (confidence <= 1) {
+                                    confidenceText = ` ${(confidence * 100).toFixed(0)}%`;
+                                } else {
+                                    confidenceText = ` ${confidence.toFixed(0)}%`;
+                                }
                             }
-                            confidenceText = ` ${confidence}%`;
-                        }
 
-                        // Format distance value
-                        let distanceText = "";
-                        if (distance !== null && distance !== undefined) {
-                            distanceText = ` : ${distance.toFixed(2)} m`;
-                        }
-
-                        // Create label text
-                        const labelText = `${label}${confidenceText}${distanceText}`;
+                            // Format distance if available
+                            let distanceText = "";
+                            if (distance !== null && distance !== undefined) {
+                                distanceText = ` : ${distance.toFixed(2)} m`;
+                            }
 
-                        // Measure text width
-                        const textWidth = ctx.measureText(labelText).width + 10;
+                            // Prepare the label text
+                            const labelText = `${label}${confidenceText}${distanceText}`;
+                            const textWidth = ctx.measureText(labelText).width + 10;
 
-                        // Draw label background
-                        ctx.fillStyle = `hsl(${hue}, 100%, 40%)`;
-                        ctx.fillRect(x, y - 20, textWidth, 20);
+                            // Draw label background
+                            ctx.fillStyle = `hsl(${hue}, 100%, 40%)`;
+                            ctx.fillRect(x, y - 20, textWidth, 20);
 
-                        // Draw label text
-                        ctx.fillStyle = "white";
-                        ctx.fillText(labelText, x + 5, y - 5);
+                            // Draw label text
+                            ctx.fillStyle = "white";
+                            ctx.fillText(labelText, x + 5, y - 5);
+                        }
                     }
                 });
-
             } catch (error) {
                 console.error('Error visualizing results:', error);
+                // Optional: Display debug information if needed
                 debugOutput.style.display = 'block';
-                debugOutput.textContent += `VISUALIZATION ERROR: ${error.message}\n`;
-                debugOutput.textContent += `Error stack: ${error.stack}\n`;
+                debugOutput.textContent += `VISUALIZATION ERROR: ${error.message}\n${error.stack}\n`;
             }
         }
 
+    
         // Generate consistent hue for string
         function stringToHue(str) {
             let hash = 0;
@@ -753,21 +756,21 @@
             }
             return hash % 360;
         }
-
+    
         // Clear canvas
         function clearCanvas() {
             if (detectionCanvas.getContext) {
                 ctx.clearRect(0, 0, detectionCanvas.width, detectionCanvas.height);
             }
         }
-
+    
         // Show message function
         function showMessage(text, type) {
             message.textContent = text;
             message.className = '';
             message.classList.add(type);
             message.style.display = 'block';
-
+    
             if (type === 'info') {
                 setTimeout(() => {
                     message.style.display = 'none';