Update index.html

index.html

@@ -275,7 +275,8 @@
             }
 
             // --- Image Processing ---
-            function processImage(source, sourceWidth, sourceHeight) {
+            function processImageCenterCrop(source, sourceWidth, sourceHeight) {
+                // Center crop to square for live camera
                 const size = Math.min(sourceWidth, sourceHeight);
                 const sx = (sourceWidth - size) / 2;
                 const sy = (sourceHeight - size) / 2;
@@ -290,6 +291,30 @@
                 );
             }
 
+            function processImageResizePad(source, sourceWidth, sourceHeight) {
+                // Resize longest dimension to 256 and zero-pad for uploads
+                const scale = FINAL_SIZE / Math.max(sourceWidth, sourceHeight);
+                const scaledWidth = sourceWidth * scale;
+                const scaledHeight = sourceHeight * scale;
+                
+                // Calculate padding to center the image
+                const offsetX = (FINAL_SIZE - scaledWidth) / 2;
+                const offsetY = (FINAL_SIZE - scaledHeight) / 2;
+
+                // Clear canvas (black background = zero padding)
+                processingCtx.fillStyle = 'black';
+                processingCtx.fillRect(0, 0, FINAL_SIZE, FINAL_SIZE);
+                
+                // Draw scaled image centered with padding
+                processingCtx.drawImage(
+                    source,
+                    0, 0,
+                    sourceWidth, sourceHeight,
+                    offsetX, offsetY,
+                    scaledWidth, scaledHeight
+                );
+            }
+
             // --- API Call ---
             async function callPredictAPI() {
                 try {
@@ -429,7 +454,8 @@
                     return;
                 }
                 
-                processImage(video, video.videoWidth, video.videoHeight);
+                // Use center crop for live camera
+                processImageCenterCrop(video, video.videoWidth, video.videoHeight);
                 processCaptureOrUpload();
             });
 
@@ -441,7 +467,8 @@
                 reader.onload = (e) => {
                     const img = new Image();
                     img.onload = () => {
-                        processImage(img, img.width, img.height);
+                        // Use resize+pad for uploads
+                        processImageResizePad(img, img.width, img.height);
                         processCaptureOrUpload();
                     };
                     img.onerror = () => {