Update index.html

index.html

@@ -78,6 +78,17 @@
         <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex flex-col items-center">
             <h2 class="font-semibold text-lg border-b pb-4 w-full mb-4">Result</h2>
             
+            <!-- Dimension Info & Warning -->
+            <div id="imageInfo" class="hidden w-full flex-col items-center mb-4 text-sm bg-gray-50 p-3 rounded-lg border border-gray-200">
+                <div class="flex space-x-6 text-gray-600">
+                    <p>Background: <span id="bgDims" class="font-mono font-medium">N/A</span></p>
+                    <p>Stencil: <span id="stencilDims" class="font-mono font-medium">N/A</span></p>
+                </div>
+                <p id="dimWarning" class="hidden mt-2 text-red-600 font-bold bg-red-50 px-3 py-1 rounded border border-red-200">
+                    ⚠️ Warning: Image dimensions do not match. The stencil will be stretched.
+                </p>
+            </div>
+            
             <div id="canvasContainer" class="checkerboard rounded shadow-inner overflow-hidden max-w-full">
                 <canvas id="mainCanvas" class="max-w-full h-auto"></canvas>
             </div>
@@ -117,6 +128,12 @@
         const downloadBtn = document.getElementById('downloadBtn');
         const placeholder = document.getElementById('placeholder');
         const canvasContainer = document.getElementById('canvasContainer');
+        
+        // New DOM Elements for Dimensions
+        const imageInfo = document.getElementById('imageInfo');
+        const bgDims = document.getElementById('bgDims');
+        const stencilDims = document.getElementById('stencilDims');
+        const dimWarning = document.getElementById('dimWarning');
 
         // Event Listeners
         baseInput.addEventListener('change', (e) => handleImageUpload(e, 'baseImage'));
@@ -222,6 +239,24 @@
 
         // Main Render Loop
         function render() {
+            // Update Dimension Text & Validation
+            if (state.baseImage || state.stencilImage) {
+                imageInfo.classList.remove('hidden');
+                imageInfo.classList.add('flex');
+                
+                if (state.baseImage) bgDims.textContent = `${state.baseImage.width}x${state.baseImage.height}px`;
+                if (state.stencilImage) stencilDims.textContent = `${state.stencilImage.width}x${state.stencilImage.height}px`;
+
+                // Check for mismatch
+                if (state.baseImage && state.stencilImage) {
+                    if (state.baseImage.width !== state.stencilImage.width || state.baseImage.height !== state.stencilImage.height) {
+                        dimWarning.classList.remove('hidden');
+                    } else {
+                        dimWarning.classList.add('hidden');
+                    }
+                }
+            }
+
             if (!state.baseImage) return;
 
             // Hide placeholder, show canvas/button
@@ -238,8 +273,6 @@
 
             if (state.stencilImage) {
                 // 2. Process Stencil (Remove Background)
-                // We pass the base image dimensions to ensure the stencil fits/stretches 
-                // exactly over the base image
                 const processedStencil = processStencil(
                     state.stencilImage, 
                     canvas.width,