create a zone selector for clothes

components/clothes-selector.js

@@ -0,0 +1,158 @@
+class ClothesSelector extends HTMLElement {
+  constructor() {
+    super();
+    this.selectionPoints = [];
+    this.selectionMode = false;
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        .selector-container {
+          position: relative;
+          display: inline-block;
+        }
+        canvas {
+          position: absolute;
+          top: 0;
+          left: 0;
+          pointer-events: none;
+        }
+        img {
+          display: block;
+          max-width: 100%;
+          cursor: crosshair;
+        }
+        .tools {
+          margin-top: 1rem;
+          display: flex;
+          gap: 0.5rem;
+        }
+        button {
+          padding: 0.5rem 1rem;
+          border-radius: 0.25rem;
+          cursor: pointer;
+          border: none;
+          background: #6366f1;
+          color: white;
+          font-weight: 500;
+        }
+        button:hover {
+          opacity: 0.9;
+        }
+        button.clear {
+          background: #ef4444;
+        }
+        button.download {
+          background: #10b981;
+        }
+      </style>
+      <div class="selector-container">
+        <img id="previewImage" src="#" alt="Clothing Preview">
+        <canvas id="selectionCanvas"></canvas>
+      </div>
+      <div class="tools">
+        <button id="selectBtn">Select Area</button>
+        <button id="clearBtn" class="clear">Clear</button>
+        <button id="downloadBtn" class="download">Download</button>
+      </div>
+    `;
+  }
+
+  setupEventListeners() {
+    const img = this.shadowRoot.getElementById('previewImage');
+    const canvas = this.shadowRoot.getElementById('selectionCanvas');
+    const ctx = canvas.getContext('2d');
+    const selectBtn = this.shadowRoot.getElementById('selectBtn');
+    const clearBtn = this.shadowRoot.getElementById('clearBtn');
+    const downloadBtn = this.shadowRoot.getElementById('downloadBtn');
+
+    selectBtn.addEventListener('click', () => {
+      this.selectionMode = true;
+      this.selectionPoints = [];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      img.style.cursor = 'crosshair';
+    });
+
+    clearBtn.addEventListener('click', () => {
+      this.selectionPoints = [];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      img.style.cursor = 'default';
+      this.selectionMode = false;
+    });
+
+    downloadBtn.addEventListener('click', () => {
+      if (this.selectionPoints.length > 0) {
+        const tempCanvas = document.createElement('canvas');
+        const tempCtx = tempCanvas.getContext('2d');
+        tempCanvas.width = img.naturalWidth;
+        tempCanvas.height = img.naturalHeight;
+        
+        tempCtx.drawImage(img, 0, 0);
+        tempCtx.globalCompositeOperation = 'destination-in';
+        tempCtx.fillStyle = 'black';
+        tempCtx.beginPath();
+        tempCtx.moveTo(this.selectionPoints[0].x, this.selectionPoints[0].y);
+        for (let i = 1; i < this.selectionPoints.length; i++) {
+          tempCtx.lineTo(this.selectionPoints[i].x, this.selectionPoints[i].y);
+        }
+        tempCtx.closePath();
+        tempCtx.fill();
+        
+        const link = document.createElement('a');
+        link.download = 'selected-clothing.png';
+        link.href = tempCanvas.toDataURL('image/png');
+        link.click();
+      }
+    });
+
+    img.addEventListener('click', (e) => {
+      if (!this.selectionMode) return;
+      
+      const rect = img.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      
+      this.selectionPoints.push({x, y});
+      
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.strokeStyle = '#3B82F6';
+      ctx.lineWidth = 2;
+      ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';
+      
+      if (this.selectionPoints.length > 0) {
+        ctx.beginPath();
+        ctx.moveTo(this.selectionPoints[0].x, this.selectionPoints[0].y);
+        
+        for (let i = 1; i < this.selectionPoints.length; i++) {
+          ctx.lineTo(this.selectionPoints[i].x, this.selectionPoints[i].y);
+        }
+        
+        if (this.selectionPoints.length > 2) {
+          ctx.closePath();
+          ctx.fill();
+        }
+        
+        ctx.stroke();
+      }
+    });
+
+    img.addEventListener('load', () => {
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+    });
+  }
+
+  setImage(src) {
+    const img = this.shadowRoot.getElementById('previewImage');
+    img.src = src;
+  }
+}
+
+customElements.define('clothes-selector', ClothesSelector);

index.html

@@ -90,11 +90,11 @@
 </main>
 
     <custom-footer></custom-footer>
-
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/clothes-selector.js"></script>
     <script src="script.js"></script>
-    <script>
+<script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>