create a tool to smart select clothes on uploaded image

index.html

@@ -63,19 +63,30 @@
                 <i data-feather="moon" class="mr-2"></i>
                 Toggle Theme
             </button>
-
-            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-md mx-auto">
-                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Upload Image</h2>
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-3xl mx-auto">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Smart Clothing Selector</h2>
                 <input type="file" id="imageUpload" accept="image/*" class="hidden">
                 <label for="imageUpload" class="cursor-pointer px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-lg inline-flex items-center">
                     <i data-feather="upload" class="mr-2"></i>
-                    Choose Image
+                    Upload Image
                 </label>
-                <div id="imagePreview" class="mt-4 hidden">
+                <div id="imagePreview" class="mt-4 hidden relative">
                     <img id="previewImage" class="max-w-full h-auto rounded-lg" src="#" alt="Preview">
+                    <canvas id="selectionCanvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
+                </div>
+                <div id="toolsPanel" class="mt-4 hidden space-x-2">
+                    <button id="selectClothes" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg">
+                        <i data-feather="box" class="mr-2"></i>Select Clothes
+                    </button>
+                    <button id="clearSelection" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg">
+                        <i data-feather="x" class="mr-2"></i>Clear
+                    </button>
+                    <button id="downloadSelection" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg">
+                        <i data-feather="download" class="mr-2"></i>Download
+                    </button>
                 </div>
             </div>
-        </div>
+</div>
 </main>
 
     <custom-footer></custom-footer>

script.js

@@ -40,11 +40,20 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
     });
-
-    // Image upload and preview functionality
+    // Image upload and clothing selection functionality
     const imageUpload = document.getElementById('imageUpload');
     const imagePreview = document.getElementById('imagePreview');
     const previewImage = document.getElementById('previewImage');
+    const toolsPanel = document.getElementById('toolsPanel');
+    const selectClothesBtn = document.getElementById('selectClothes');
+    const clearSelectionBtn = document.getElementById('clearSelection');
+    const downloadSelectionBtn = document.getElementById('downloadSelection');
+    const selectionCanvas = document.getElementById('selectionCanvas');
+    const ctx = selectionCanvas.getContext('2d');
+
+    let imageLoaded = false;
+    let selectionMode = false;
+    let selectionPoints = [];
 
     imageUpload.addEventListener('change', function(e) {
         const file = e.target.files[0];
@@ -52,11 +61,99 @@ document.addEventListener('DOMContentLoaded', () => {
             const reader = new FileReader();
             
             reader.onload = function(event) {
+                previewImage.onload = function() {
+                    // Set canvas dimensions to match image
+                    selectionCanvas.width = previewImage.width;
+                    selectionCanvas.height = previewImage.height;
+                    imageLoaded = true;
+                    toolsPanel.classList.remove('hidden');
+                };
                 previewImage.src = event.target.result;
                 imagePreview.classList.remove('hidden');
+                selectionPoints = [];
+                ctx.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height);
             }
             
             reader.readAsDataURL(file);
         }
     });
+
+    // Initialize clothing selection
+    selectClothesBtn.addEventListener('click', function() {
+        selectionMode = true;
+        selectionPoints = [];
+        ctx.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height);
+        previewImage.style.cursor = 'crosshair';
+    });
+
+    // Clear selection
+    clearSelectionBtn.addEventListener('click', function() {
+        selectionPoints = [];
+        ctx.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height);
+        previewImage.style.cursor = 'default';
+        selectionMode = false;
+    });
+
+    // Download selection
+    downloadSelectionBtn.addEventListener('click', function() {
+        if (selectionPoints.length > 0) {
+            const tempCanvas = document.createElement('canvas');
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCanvas.width = previewImage.width;
+            tempCanvas.height = previewImage.height;
+            
+            // Draw the selected area
+            tempCtx.drawImage(previewImage, 0, 0);
+            
+            // Create mask for selection
+            tempCtx.globalCompositeOperation = 'destination-in';
+            tempCtx.fillStyle = 'black';
+            tempCtx.beginPath();
+            tempCtx.moveTo(selectionPoints[0].x, selectionPoints[0].y);
+            for (let i = 1; i < selectionPoints.length; i++) {
+                tempCtx.lineTo(selectionPoints[i].x, selectionPoints[i].y);
+            }
+            tempCtx.closePath();
+            tempCtx.fill();
+            
+            // Create download link
+            const link = document.createElement('a');
+            link.download = 'selected-clothing.png';
+            link.href = tempCanvas.toDataURL('image/png');
+            link.click();
+        }
+    });
+
+    // Handle selection drawing
+    imagePreview.addEventListener('click', function(e) {
+        if (!selectionMode || !imageLoaded) return;
+        
+        const rect = previewImage.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        selectionPoints.push({x, y});
+        
+        // Draw selection
+        ctx.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height);
+        ctx.strokeStyle = '#3B82F6';
+        ctx.lineWidth = 2;
+        ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';
+        
+        if (selectionPoints.length > 0) {
+            ctx.beginPath();
+            ctx.moveTo(selectionPoints[0].x, selectionPoints[0].y);
+            
+            for (let i = 1; i < selectionPoints.length; i++) {
+                ctx.lineTo(selectionPoints[i].x, selectionPoints[i].y);
+            }
+            
+            if (selectionPoints.length > 2) {
+                ctx.closePath();
+                ctx.fill();
+            }
+            
+            ctx.stroke();
+        }
+    });
 });