Add interactive Cropper.js modal for cropping and framing subjects before 3D model generation

frontend/app.js

@@ -356,6 +356,104 @@ removePreviewBtn.addEventListener('click', (e) => {
     generate3dBtn.disabled = true;
 });
 
+// Cropper.js Integration for PC Mode
+let pcCropper = null;
+
+const btnOpenCropPC = document.getElementById('btnOpenCropPC');
+const cropModalOverlay = document.getElementById('cropModalOverlay');
+const cropImageTarget = document.getElementById('cropImageTarget');
+const btnCancelCrop = document.getElementById('btnCancelCrop');
+const btnApplyCrop = document.getElementById('btnApplyCrop');
+const btnCropAspectFree = document.getElementById('btnCropAspectFree');
+const btnCropAspectSquare = document.getElementById('btnCropAspectSquare');
+const btnCropReset = document.getElementById('btnCropReset');
+
+function initCropperPC(imageUrl) {
+    if (!cropModalOverlay || !cropImageTarget) return;
+    
+    cropImageTarget.src = imageUrl;
+    cropModalOverlay.style.display = 'flex';
+
+    if (pcCropper) {
+        pcCropper.destroy();
+        pcCropper = null;
+    }
+
+    setTimeout(() => {
+        pcCropper = new Cropper(cropImageTarget, {
+            aspectRatio: 1,
+            viewMode: 1,
+            autoCropArea: 0.85,
+            responsive: true,
+            background: false
+        });
+    }, 150);
+}
+
+if (btnOpenCropPC) {
+    btnOpenCropPC.addEventListener('click', () => {
+        if (active2dImageURL) {
+            initCropperPC(active2dImageURL);
+        }
+    });
+}
+
+if (btnCancelCrop) {
+    btnCancelCrop.addEventListener('click', () => {
+        if (cropModalOverlay) cropModalOverlay.style.display = 'none';
+        if (pcCropper) {
+            pcCropper.destroy();
+            pcCropper = null;
+        }
+    });
+}
+
+if (btnCropAspectFree) {
+    btnCropAspectFree.addEventListener('click', () => {
+        if (pcCropper) pcCropper.setAspectRatio(NaN);
+    });
+}
+
+if (btnCropAspectSquare) {
+    btnCropAspectSquare.addEventListener('click', () => {
+        if (pcCropper) pcCropper.setAspectRatio(1);
+    });
+}
+
+if (btnCropReset) {
+    btnCropReset.addEventListener('click', () => {
+        if (pcCropper) pcCropper.reset();
+    });
+}
+
+if (btnApplyCrop) {
+    btnApplyCrop.addEventListener('click', () => {
+        if (!pcCropper) return;
+
+        const croppedCanvas = pcCropper.getCroppedCanvas({
+            width: 1024,
+            height: 1024,
+            imageSmoothingEnabled: true,
+            imageSmoothingQuality: 'high'
+        });
+
+        if (croppedCanvas) {
+            croppedCanvas.toBlob((blob) => {
+                if (blob) {
+                    const croppedFile = new File([blob], 'cropped_image.png', { type: 'image/png' });
+                    handleImageFile(croppedFile);
+                    showCustomToast('Imagen recortada con éxito.');
+                }
+                if (cropModalOverlay) cropModalOverlay.style.display = 'none';
+                if (pcCropper) {
+                    pcCropper.destroy();
+                    pcCropper = null;
+                }
+            }, 'image/png');
+        }
+    });
+}
+
 // 2D Image Generation
 generate2dBtn.addEventListener('click', async () => {
     const prompt = promptInput.value.trim();

frontend/index.html

@@ -29,6 +29,10 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/GLTFExporter.js"></script>
     
+    <!-- Cropper.js for Interactive Image Cropping -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
+
     <!-- Custom Style -->
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -115,6 +119,10 @@
                         <div class="preview-container" id="previewContainer" style="margin-top: 1rem;">
                             <img src="" alt="Preview" class="preview-img" id="imagePreview">
                             <button class="remove-preview" id="removePreviewBtn" title="Quitar imagen">&times;</button>
+                            <button type="button" id="btnOpenCropPC" style="margin-top: 8px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.82rem; padding: 8px 12px; background: rgba(124, 58, 237, 0.15); border: 1px solid rgba(124, 58, 237, 0.4); color: #a78bfa; border-radius: 8px; cursor: pointer; font-weight: 600;">
+                                <i data-lucide="crop" style="width: 14px; height: 14px;"></i>
+                                <span>Enmarcar / Recortar Sujeto</span>
+                            </button>
                         </div>
                     </div>
 
@@ -713,6 +721,36 @@
         </div>
     </div>
 
+    <!-- Interactive Crop Modal Overlay -->
+    <div id="cropModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: space-between; padding: 16px; box-sizing: border-box;">
+        <!-- Modal Header -->
+        <div style="width: 100%; max-width: 650px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1);">
+            <div style="font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 8px;">
+                <i data-lucide="crop" style="width: 18px; height: 18px; color: #a78bfa;"></i>
+                <span>Enmarcar / Recortar Sujeto</span>
+            </div>
+            <button id="btnCancelCrop" style="background: rgba(255,255,255,0.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1rem; display: flex; align-items: center; justify-content: center;">✕</button>
+        </div>
+
+        <!-- Crop Canvas Viewport Container -->
+        <div style="width: 100%; max-width: 650px; height: calc(100vh - 180px); max-height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; margin: 12px 0; background: #000; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
+            <img id="cropImageTarget" src="" style="max-width: 100%; max-height: 100%;">
+        </div>
+
+        <!-- Modal Controls Footer -->
+        <div style="width: 100%; max-width: 650px; display: flex; flex-direction: column; gap: 10px;">
+            <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
+                <button type="button" id="btnCropAspectFree" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">Libre</button>
+                <button type="button" id="btnCropAspectSquare" style="background: rgba(124,58,237,0.3); border: 1px solid #7c3aed; color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">1:1 Cuadrado (Recomendado)</button>
+                <button type="button" id="btnCropReset" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">Reiniciar</button>
+            </div>
+            <button type="button" id="btnApplyCrop" style="width: 100%; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 12px rgba(16,185,129,0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+                <i data-lucide="check" style="width: 18px; height: 18px;"></i>
+                <span>Confirmar Recorte</span>
+            </button>
+        </div>
+    </div>
+
     <script type="module" src="app.js?v=118"></script>
     <script>
         // Initialize Lucide icons on page load

frontend/viewer.html

@@ -6,6 +6,10 @@
     <title>23DFactory - Visualizador Móvil</title>
     <!-- Import Google's model-viewer component -->
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
+
+    <!-- Cropper.js for Interactive Image Cropping -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
     <style>
         body, html {
             margin: 0;
@@ -361,6 +365,9 @@
                 <div id="imagePreviewContainer" style="display: none; position: relative;">
                     <img id="imagePreviewMobile" style="max-width: 100%; max-height: 250px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); margin: 0 auto; display: block;">
                     <button id="btnRemoveImageMobile" style="position: absolute; top: 8px; right: 8px; background: rgba(239,68,68,0.9); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">✕</button>
+                    <button type="button" id="btnOpenCropMobile" style="margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.85rem; padding: 10px; background: rgba(124, 58, 237, 0.2); border: 1px solid rgba(124, 58, 237, 0.5); color: #a78bfa; border-radius: 8px; cursor: pointer; font-weight: 600;">
+                        ✂️ Enmarcar / Recortar Sujeto
+                    </button>
                 </div>
             </div>
 
@@ -455,6 +462,34 @@
         </div>
     </div>
 
+    <!-- Interactive Crop Modal Overlay -->
+    <div id="cropModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: space-between; padding: 16px; box-sizing: border-box;">
+        <!-- Modal Header -->
+        <div style="width: 100%; max-width: 600px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1);">
+            <div style="font-weight: 700; font-size: 1rem; color: #fff; display: flex; align-items: center; gap: 8px;">
+                ✂️ Enmarcar / Recortar Sujeto
+            </div>
+            <button id="btnCancelCrop" style="background: rgba(255,255,255,0.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1rem; display: flex; align-items: center; justify-content: center;">✕</button>
+        </div>
+
+        <!-- Crop Canvas Viewport Container -->
+        <div style="width: 100%; max-width: 600px; height: calc(100vh - 180px); max-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; margin: 12px 0; background: #000; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
+            <img id="cropImageTarget" src="" style="max-width: 100%; max-height: 100%;">
+        </div>
+
+        <!-- Modal Controls Footer -->
+        <div style="width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 10px;">
+            <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;">
+                <button type="button" id="btnCropAspectFree" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">Libre</button>
+                <button type="button" id="btnCropAspectSquare" style="background: rgba(124,58,237,0.3); border: 1px solid #7c3aed; color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">1:1 Cuadrado (Recomendado)</button>
+                <button type="button" id="btnCropReset" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.78rem; cursor: pointer; font-weight: 600;">Reiniciar</button>
+            </div>
+            <button type="button" id="btnApplyCrop" style="width: 100%; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 12px rgba(16,185,129,0.3); display: flex; align-items: center; justify-content: center; gap: 6px;">
+                ✔ Confirmar Recorte
+            </button>
+        </div>
+    </div>
+
     <script>
         const urlParams = new URLSearchParams(window.location.search);
         const modelUrl = urlParams.get('model');
@@ -1075,6 +1110,100 @@
             });
         }
 
+        // Cropper.js Integration for Mobile View
+        let mobileCropper = null;
+
+        const btnOpenCropMobile = document.getElementById('btnOpenCropMobile');
+        const cropModalOverlay = document.getElementById('cropModalOverlay');
+        const cropImageTarget = document.getElementById('cropImageTarget');
+        const btnCancelCrop = document.getElementById('btnCancelCrop');
+        const btnApplyCrop = document.getElementById('btnApplyCrop');
+        const btnCropAspectFree = document.getElementById('btnCropAspectFree');
+        const btnCropAspectSquare = document.getElementById('btnCropAspectSquare');
+        const btnCropReset = document.getElementById('btnCropReset');
+
+        function initCropperMobile(imageUrl) {
+            if (!cropModalOverlay || !cropImageTarget) return;
+
+            cropImageTarget.src = imageUrl;
+            cropModalOverlay.style.display = 'flex';
+
+            if (mobileCropper) {
+                mobileCropper.destroy();
+                mobileCropper = null;
+            }
+
+            setTimeout(() => {
+                mobileCropper = new Cropper(cropImageTarget, {
+                    aspectRatio: 1,
+                    viewMode: 1,
+                    autoCropArea: 0.85,
+                    responsive: true,
+                    background: false
+                });
+            }, 150);
+        }
+
+        if (btnOpenCropMobile) {
+            btnOpenCropMobile.addEventListener('click', () => {
+                if (base64Image) {
+                    initCropperMobile(base64Image);
+                }
+            });
+        }
+
+        if (btnCancelCrop) {
+            btnCancelCrop.addEventListener('click', () => {
+                if (cropModalOverlay) cropModalOverlay.style.display = 'none';
+                if (mobileCropper) {
+                    mobileCropper.destroy();
+                    mobileCropper = null;
+                }
+            });
+        }
+
+        if (btnCropAspectFree) {
+            btnCropAspectFree.addEventListener('click', () => {
+                if (mobileCropper) mobileCropper.setAspectRatio(NaN);
+            });
+        }
+
+        if (btnCropAspectSquare) {
+            btnCropAspectSquare.addEventListener('click', () => {
+                if (mobileCropper) mobileCropper.setAspectRatio(1);
+            });
+        }
+
+        if (btnCropReset) {
+            btnCropReset.addEventListener('click', () => {
+                if (mobileCropper) mobileCropper.reset();
+            });
+        }
+
+        if (btnApplyCrop) {
+            btnApplyCrop.addEventListener('click', () => {
+                if (!mobileCropper) return;
+
+                const croppedCanvas = mobileCropper.getCroppedCanvas({
+                    width: 1024,
+                    height: 1024,
+                    imageSmoothingEnabled: true,
+                    imageSmoothingQuality: 'high'
+                });
+
+                if (croppedCanvas) {
+                    base64Image = croppedCanvas.toDataURL('image/png');
+                    if (imagePreviewMobile) imagePreviewMobile.src = base64Image;
+
+                    if (cropModalOverlay) cropModalOverlay.style.display = 'none';
+                    if (mobileCropper) {
+                        mobileCropper.destroy();
+                        mobileCropper = null;
+                    }
+                }
+            });
+        }
+
         // 2D AI Generation
         if (btnGen2DMobile) {
             btnGen2DMobile.addEventListener('click', async () => {