Initial deploy

.agents/AGENTS.md

@@ -0,0 +1,37 @@
+# Instrucciones del Proyecto: 23DFactory
+
+Este archivo ayuda a que los agentes de IA comprendan el contexto del proyecto y el flujo de trabajo actual de inmediato al iniciar el espacio de trabajo.
+
+## 📋 Contexto General
+* **Nombre:** 23DFactory
+* **Propósito:** Herramienta web local para transformar imágenes 2D a modelos 3D usando modelos de IA (principalmente Hugging Face Spaces como TRELLIS).
+
+## 🛠️ Arquitectura y Configuración
+* **Frontend:** Desarrollado en HTML/CSS/JS nativos (`index.html`, `styles.css`, `app.js`).
+* **Backend:** Servidor en Python (`server.py`) que cumple doble función:
+  1. Servir los archivos estáticos en el puerto configurado (ej. `8000`).
+  2. Actuar como proxy HTTP para evitar bloqueos de CORS y resolver problemas de DNS.
+* **Endpoints del Proxy backend:**
+  * `POST /api/generate-2d`: Envía la petición de imagen 2D a la API de inferencia de Hugging Face usando el dominio corto y compatible `api-inference.hf.co` (útil si el dominio largo está bloqueado por el DNS).
+  * `POST /api/generate-3d`: Se conecta al Space privado de Hugging Face (por defecto `LogicalTrue/TRELLIS.2`) usando `gradio_client` para la generación del modelo 3D.
+* **Archivos clave:**
+  * `server.py`: Servidor HTTP y proxy.
+  * `app.js`: Lógica del cliente. Cuenta con soporte automático para resolver las peticiones de forma absoluta a `http://localhost:8000` en caso de que el usuario abra el archivo localmente como `file://`.
+  * `.env`: Define `HF_TOKEN`, `HF_SPACE` y `PORT`.
+
+## 🚀 Cómo Iniciar el Proyecto (En PC Personal)
+1. Abrir la terminal en la raíz del proyecto.
+2. Ejecutar el servidor Python:
+   ```bash
+   python server.py
+   ```
+3. Abrir la aplicación en el navegador accediendo a: **http://localhost:8000**
+4. (Opcional) Si se abre directamente el archivo `index.html` (protocolo `file://`), la aplicación redirigirá las peticiones de API de forma absoluta al puerto `8000` local.
+
+## 🎨 Flujo de Trabajo en Blender (Siguiente Paso)
+El usuario cuenta con **Blender** instalado y realiza el siguiente tratamiento a los modelos `.glb` generados:
+1. Importación del `.glb` generado (ubicado en `generated_models/`).
+2. Limpieza básica en Edit Mode (`Merge by Distance` para eliminar vértices duplicados y `Clean Up` para borrar geometría suelta).
+3. Reducción de polígonos usando el modificador `Decimate`.
+4. Re-topología (Voxel/QuadriFlow Remesh) para conseguir bucles de animación limpios.
+5. Esculpido y suavizado de ruido en Sculpt Mode con el pincel `Smooth`.

.agents/skills/gradio_space_integration/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: gradio_space_integration
+description: Guía de integración y depuración para conectar con Hugging Face Spaces y ZeroGPU mediante gradio_client de Python, evitando errores de validación de esquemas (Pydantic), CORS de navegador y fallos de limpieza de sesión.
+---
+
+# Integración con Hugging Face Spaces vía Gradio Client
+
+Este skill provee guías de implementación para conectar de forma robusta con Hugging Face Spaces, especialmente aquellos que utilizan ZeroGPU.
+
+## 1. Conexión y Autenticación en Python
+* El constructor de `Client` en el SDK de Python utiliza el parámetro `token` (mientras que en JS es `hf_token`).
+* Los Spaces privados o basados en ZeroGPU requieren autenticación para asignación de cuota de GPU.
+  ```python
+  from gradio_client import Client
+  client = Client("LogicalTrue/TRELLIS.2", token=HF_TOKEN)
+  ```
+
+## 2. Inicialización de Sesiones (Evitar FileNotFoundError en end_session)
+* Muchos Spaces oficiales (como Trellis.2) ejecutan un hook de limpieza al cerrar el socket (`shutil.rmtree`). Si la sesión no se inicializa, las carpetas no existen y el servidor remoto crashea devolviendo un error 500.
+* **Solución**: Ejecutar `/start_session` inmediatamente tras conectar:
+  ```python
+  client.predict(api_name="/start_session")
+  ```
+
+## 3. Validación de Esquemas (Evitar ValidationError de Pydantic)
+* Los componentes de tipo `Image` en los Spaces modernos (Gradio 4+) validan las entradas usando Pydantic. Enviar un string con la ruta local (`/tmp/image.png`) causará una falla de tipo de datos.
+* **Solución**: Importar y envolver todas las rutas de archivos con `handle_file`:
+  ```python
+  from gradio_client import handle_file
+
+  # Enviar al preprocesador
+  preprocess_result = client.predict(handle_file(local_path), api_name="/preprocess_image")
+
+  # Enviar al modelo principal (los resultados devueltos son strings, hay que envolverlos de nuevo)
+  job = client.submit(handle_file(preprocess_result), seed, ..., api_name="/image_to_3d")
+  ```
+
+## 4. Arquitectura de Proxy Local para Evitar CORS
+* Los navegadores bloquean peticiones HTTP o WebSockets directos a Hugging Face debido a políticas de origen cruzado (CORS).
+* **Solución**: Utilizar un servidor backend local (en Python) que procese las llamadas usando `gradio_client`, guarde los resultados `.glb` en un directorio estático local (p. ej., `generated_models/`) y devuelva rutas relativas que el navegador pueda consumir directamente.

.gitignore

@@ -0,0 +1,5 @@
+scratch/ 
+generated_models/ 
+generated_images/ 
+.env 
+__pycache__/ 

Dockerfile

@@ -0,0 +1,41 @@
+# Usar una imagen base de Python con soporte para Debian/Ubuntu
+FROM python:3.10-slim
+
+# Instalar dependencias necesarias para Blender y X11 (para que corra en modo background sin pantalla)
+RUN apt-get update && apt-get install -y \
+    curl \
+    libxrender1 \
+    libxi6 \
+    libgconf-2-4 \
+    libxxf86vm1 \
+    libfontconfig1 \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    xz-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+# Descargar e Instalar Blender (versión recomendada 3.6 LTS o superior)
+RUN curl -L "https://download.blender.org/release/Blender3.6/blender-3.6.13-linux-x64.tar.xz" -o blender.tar.xz \
+    && tar -xf blender.tar.xz -C /opt \
+    && mv /opt/blender-3.6.13-linux-x64 /opt/blender \
+    && ln -s /opt/blender/blender /usr/local/bin/blender \
+    && rm blender.tar.xz
+
+# Crear directorio de trabajo
+WORKDIR /app
+
+# Copiar dependencias de Python e instalarlas
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copiar el código del proyecto al contenedor
+COPY . .
+
+# Crear carpetas temporales y de almacenamiento con permisos correctos
+RUN mkdir -p generated_images generated_models && chmod -R 777 /app
+
+# Indicar que usaremos el puerto de Hugging Face
+EXPOSE 7860
+
+# Comando para arrancar el servidor
+CMD ["python", "server.py"]

app.js

@@ -0,0 +1,927 @@
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@latest/dist/index.js";
+
+// DOM Elements
+const openSettingsBtn = document.getElementById('openSettingsBtn');
+const closeSettingsBtn = document.getElementById('closeSettingsBtn');
+const settingsModal = document.getElementById('settingsModal');
+const saveSettingsBtn = document.getElementById('saveSettingsBtn');
+const hfTokenInput = document.getElementById('hfTokenInput');
+
+const tabBtns = document.querySelectorAll('.tab-btn');
+const tabContents = document.querySelectorAll('.tab-content');
+
+const dropzone = document.getElementById('dropzone');
+const fileInput = document.getElementById('fileInput');
+const previewContainer = document.getElementById('previewContainer');
+const imagePreview = document.getElementById('imagePreview');
+const removePreviewBtn = document.getElementById('removePreviewBtn');
+
+// Source selector elements
+const sourceUploadBtn = document.getElementById('sourceUploadBtn');
+const sourceLibraryBtn = document.getElementById('sourceLibraryBtn');
+const uploadSourceContainer = document.getElementById('uploadSourceContainer');
+const librarySourceContainer = document.getElementById('librarySourceContainer');
+const libraryThumbnailGrid = document.getElementById('libraryThumbnailGrid');
+
+const promptInput = document.getElementById('promptInput');
+const negativePromptInput = document.getElementById('negativePromptInput');
+const generatorModelSelect = document.getElementById('generatorModelSelect');
+const generate2dBtn = document.getElementById('generate2dBtn');
+
+const generate3dBtn = document.getElementById('generate3dBtn');
+const statusOverlay = document.getElementById('statusOverlay');
+const loaderPercentage = document.getElementById('loaderPercentage');
+const statusTitle = document.getElementById('statusTitle');
+const statusDesc = document.getElementById('statusDesc');
+
+const viewerDisplay = document.getElementById('viewerDisplay');
+const emptyState = document.getElementById('emptyState');
+const viewerOverlay = document.getElementById('viewerOverlay');
+const toggleAutoRotateBtn = document.getElementById('toggleAutoRotate');
+const resetCameraBtn = document.getElementById('resetCameraBtn');
+const downloadGlbBtn = document.getElementById('downloadGlbBtn');
+const downloadFbxBtn = document.getElementById('downloadFbxBtn');
+const rigModelBtn = document.getElementById('rigModelBtn');
+
+// Trellis Parameters
+const trellisVersionSelect = document.getElementById('trellisVersionSelect');
+const resolutionSelect = document.getElementById('resolutionSelect');
+const seedInput = document.getElementById('seedInput');
+const randomSeedCheck = document.getElementById('randomSeedCheck');
+const decimateInput = document.getElementById('decimateInput');
+const decimateVal = document.getElementById('decimateVal');
+const textureSizeSelect = document.getElementById('textureSizeSelect');
+const ssGuidanceInput = document.getElementById('ssGuidanceInput');
+const ssGuidanceVal = document.getElementById('ssGuidanceVal');
+const ssStepsInput = document.getElementById('ssStepsInput');
+const ssStepsVal = document.getElementById('ssStepsVal');
+const slatGuidanceInput = document.getElementById('slatGuidanceInput');
+const slatGuidanceVal = document.getElementById('slatGuidanceVal');
+const slatStepsInput = document.getElementById('slatStepsInput');
+const slatStepsVal = document.getElementById('slatStepsVal');
+const autoOptimizeCheck = document.getElementById('autoOptimizeCheck');
+const quadFacesContainer = document.getElementById('quadFacesContainer');
+const quadFacesInput = document.getElementById('quadFacesInput');
+const quadFacesVal = document.getElementById('quadFacesVal');
+const remeshMethodSelect = document.getElementById('remeshMethodSelect');
+const rigMethodSelect = document.getElementById('rigMethodSelect');
+
+// App State
+let active2dImageBlob = null;
+let active2dImageURL = null;
+let currentGltfUrl = null;
+let activeModelRelativeUrl = null;
+let hfToken = localStorage.getItem('hf_token') || '';
+
+const apiBase = window.location.protocol === 'file:' ? 'http://localhost:8000' : '';
+
+// Load Settings on Boot
+if (hfToken) {
+    hfTokenInput.value = hfToken;
+}
+
+// Slider live value update helper
+function setupSliderValueUpdate(slider, labelEl) {
+    slider.addEventListener('input', (e) => {
+        labelEl.textContent = e.target.value;
+    });
+}
+setupSliderValueUpdate(decimateInput, decimateVal);
+setupSliderValueUpdate(ssGuidanceInput, ssGuidanceVal);
+setupSliderValueUpdate(ssStepsInput, ssStepsVal);
+setupSliderValueUpdate(slatGuidanceInput, slatGuidanceVal);
+setupSliderValueUpdate(slatStepsInput, slatStepsVal);
+if (quadFacesInput && quadFacesVal) {
+    setupSliderValueUpdate(quadFacesInput, quadFacesVal);
+}
+
+// Toggle visibility of the Blender quad faces slider based on checkbox state
+if (autoOptimizeCheck && quadFacesContainer) {
+    autoOptimizeCheck.addEventListener('change', () => {
+        quadFacesContainer.style.display = autoOptimizeCheck.checked ? 'block' : 'none';
+    });
+}
+
+// Settings Modal Handlers
+openSettingsBtn.addEventListener('click', () => {
+    settingsModal.classList.add('active');
+});
+
+closeSettingsBtn.addEventListener('click', () => {
+    settingsModal.classList.remove('active');
+});
+
+saveSettingsBtn.addEventListener('click', () => {
+    hfToken = hfTokenInput.value.trim();
+    localStorage.setItem('hf_token', hfToken);
+    settingsModal.classList.remove('active');
+    
+    // Feedback animation
+    const span = saveSettingsBtn.querySelector('span');
+    const originalText = span.textContent;
+    span.textContent = '¡Guardado!';
+    setTimeout(() => {
+        span.textContent = originalText;
+    }, 1500);
+});
+
+// Tab Switching
+tabBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const targetTab = btn.getAttribute('data-tab');
+        
+        tabBtns.forEach(b => b.classList.remove('active'));
+        tabContents.forEach(c => c.classList.remove('active'));
+        
+        btn.classList.add('active');
+        document.getElementById(targetTab).classList.add('active');
+
+        // Toggle visibility of the Main 3D Build Button at the bottom
+        if (targetTab === 'upload-tab') {
+            generate3dBtn.style.display = 'flex';
+        } else {
+            generate3dBtn.style.display = 'none';
+        }
+    });
+});
+
+// Image Source Selection Toggles
+if (sourceUploadBtn && sourceLibraryBtn) {
+    sourceUploadBtn.addEventListener('click', () => {
+        sourceUploadBtn.classList.add('active');
+        sourceLibraryBtn.classList.remove('active');
+        uploadSourceContainer.style.display = 'block';
+        librarySourceContainer.style.display = 'none';
+        dropzone.style.display = active2dImageBlob ? 'none' : 'flex';
+    });
+
+    sourceLibraryBtn.addEventListener('click', () => {
+        sourceUploadBtn.classList.remove('active');
+        sourceLibraryBtn.classList.add('active');
+        uploadSourceContainer.style.display = 'none';
+        librarySourceContainer.style.display = 'block';
+        refreshLibraryThumbnails();
+    });
+}
+
+let cachedGalleryItems = [];
+
+async function refreshLibraryThumbnails() {
+    try {
+        const response = await fetch(`${apiBase}/api/gallery`);
+        if (!response.ok) throw new Error('Error al cargar la galería.');
+        const data = await response.json();
+        cachedGalleryItems = data.items || [];
+        renderLibraryThumbnails(cachedGalleryItems);
+    } catch (e) {
+        console.error('Error loading library thumbnails:', e);
+    }
+}
+
+function renderLibraryThumbnails(items) {
+    if (!libraryThumbnailGrid) return;
+    
+    // Filter only 2D images
+    const images = items.filter(item => item.type === 'image');
+    
+    if (images.length === 0) {
+        libraryThumbnailGrid.innerHTML = `
+            <div class="library-thumb-empty">
+                No hay imágenes 2D en la biblioteca. Genera una primero en "Generar 2D AI".
+            </div>
+        `;
+        return;
+    }
+    
+    libraryThumbnailGrid.innerHTML = '';
+    images.forEach(img => {
+        const thumb = document.createElement('div');
+        thumb.className = 'library-thumb-item';
+        thumb.title = img.name;
+        thumb.dataset.filename = img.name;
+        thumb.dataset.url = img.url;
+        
+        // Determine if this is the active preview
+        const isCurrentActive = active2dImageBlob && active2dImageBlob.name === img.name;
+        if (isCurrentActive) {
+            thumb.classList.add('active');
+        }
+        
+        thumb.innerHTML = `<img src="${apiBase}${img.url}" alt="${img.name}">`;
+        
+        thumb.addEventListener('click', async () => {
+            document.querySelectorAll('.library-thumb-item').forEach(el => el.classList.remove('active'));
+            thumb.classList.add('active');
+            
+            try {
+                const res = await fetch(`${apiBase}${img.url}`);
+                const blob = await res.blob();
+                const file = new File([blob], img.name, { type: blob.type });
+                handleImageFile(file);
+            } catch (error) {
+                console.error('Error setting library image:', error);
+            }
+        });
+        
+        libraryThumbnailGrid.appendChild(thumb);
+    });
+}
+
+// 2D Image Upload Handlers
+function handleImageFile(file) {
+    if (!file || !file.type.startsWith('image/')) return;
+    
+    active2dImageBlob = file;
+    
+    if (active2dImageURL) {
+        URL.revokeObjectURL(active2dImageURL);
+    }
+    
+    active2dImageURL = URL.createObjectURL(file);
+    imagePreview.src = active2dImageURL;
+    
+    dropzone.style.display = 'none';
+    previewContainer.style.display = 'block';
+    generate3dBtn.disabled = false;
+}
+
+dropzone.addEventListener('click', () => fileInput.click());
+
+fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+        handleImageFile(e.target.files[0]);
+    }
+});
+
+// Drag and Drop
+dropzone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropzone.classList.add('dragover');
+});
+
+dropzone.addEventListener('dragleave', () => {
+    dropzone.classList.remove('dragover');
+});
+
+dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropzone.classList.remove('dragover');
+    if (e.dataTransfer.files.length > 0) {
+        handleImageFile(e.dataTransfer.files[0]);
+    }
+});
+
+removePreviewBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    active2dImageBlob = null;
+    if (active2dImageURL) {
+        URL.revokeObjectURL(active2dImageURL);
+        active2dImageURL = null;
+    }
+    imagePreview.src = '';
+    previewContainer.style.display = 'none';
+    dropzone.style.display = 'flex';
+    fileInput.value = '';
+    generate3dBtn.disabled = true;
+});
+
+// 2D Image Generation
+generate2dBtn.addEventListener('click', async () => {
+    const prompt = promptInput.value.trim();
+    if (!prompt) {
+        alert('Por favor introduce un prompt para la imagen.');
+        return;
+    }
+
+    generate2dBtn.disabled = true;
+    const originalText = generate2dBtn.querySelector('span').textContent;
+    generate2dBtn.querySelector('span').textContent = 'Generando 2D...';
+    
+    const selectedModel = generatorModelSelect.value;
+    
+    // Create or get inline feedback element
+    let feedbackEl = document.getElementById('generate2dFeedback');
+    if (!feedbackEl) {
+        feedbackEl = document.createElement('div');
+        feedbackEl.id = 'generate2dFeedback';
+        feedbackEl.style.fontSize = '0.75rem';
+        feedbackEl.style.marginTop = '0.75rem';
+        feedbackEl.style.padding = '0.6rem';
+        feedbackEl.style.borderRadius = '6px';
+        feedbackEl.style.background = 'rgba(255, 255, 255, 0.04)';
+        feedbackEl.style.border = '1px solid var(--border)';
+        feedbackEl.style.color = 'var(--text-muted)';
+        feedbackEl.style.lineHeight = '1.4';
+        generate2dBtn.parentNode.appendChild(feedbackEl);
+    }
+    
+    feedbackEl.style.display = 'block';
+    feedbackEl.style.background = 'rgba(255, 255, 255, 0.04)';
+    feedbackEl.style.borderColor = 'var(--border)';
+    feedbackEl.style.color = 'var(--text-muted)';
+    feedbackEl.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <div class="spinner-small" style="width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--primary-light); border-radius: 50%; animation: spin 1s linear infinite;"></div>
+            <span>Generando imagen. Esto puede tardar 1-2 minutos si el modelo de Hugging Face está inactivo...</span>
+        </div>
+    `;
+    
+    try {
+        const response = await fetch(`${apiBase}/api/generate-2d`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                prompt: prompt,
+                model: selectedModel,
+                negative_prompt: negativePromptInput.value,
+                token: hfToken
+            })
+        });
+
+        if (!response.ok) {
+            const errJson = await response.json().catch(() => ({}));
+            throw new Error(errJson.error || 'Error en la respuesta del servidor de generación de imágenes.');
+        }
+
+        const resJson = await response.json();
+        const base64Data = resJson.image;
+        const modelUsed = resJson.model_used || selectedModel;
+        
+        // Fetch the base64 data URL to convert it to a Blob
+        const res = await fetch(base64Data);
+        const imageBlob = await res.blob();
+        const generatedFile = new File([imageBlob], "generated.png", { type: "image/png" });
+        
+        // Load the generated image into the uploader tab
+        handleImageFile(generatedFile);
+        
+        feedbackEl.style.background = 'rgba(76, 175, 80, 0.1)';
+        feedbackEl.style.borderColor = 'rgba(76, 175, 80, 0.3)';
+        feedbackEl.style.color = '#81c784';
+        feedbackEl.innerHTML = `¡Éxito usando: <strong>${modelUsed.split('/').pop()}</strong>!`;
+        
+        // Switch back to upload tab to show preview
+        document.querySelector('[data-tab="upload-tab"]').click();
+        
+        // Refresh gallery list to show the new image
+        refreshGallery();
+        
+        // Hide feedback after 5 seconds
+        setTimeout(() => {
+            feedbackEl.style.display = 'none';
+        }, 5000);
+        
+    } catch (error) {
+        console.error(error);
+        feedbackEl.style.background = 'rgba(244, 67, 54, 0.1)';
+        feedbackEl.style.borderColor = 'rgba(244, 67, 54, 0.3)';
+        feedbackEl.style.color = '#e57373';
+        feedbackEl.innerHTML = `Error: ${error.message}`;
+        alert(`Error al generar imagen 2D: ${error.message}. Asegúrate de tener configurado tu HF Token si el modelo requiere autenticación.`);
+    } finally {
+        generate2dBtn.disabled = false;
+        generate2dBtn.querySelector('span').textContent = originalText;
+    }
+});
+
+// 3D Generation (Trellis)
+generate3dBtn.addEventListener('click', async () => {
+    if (!active2dImageBlob) return;
+
+    const version = trellisVersionSelect.value;
+
+    // Show Loading state
+    statusOverlay.classList.add('active');
+    updateLoader(10, 'Preparando imagen...', 'Convirtiendo la imagen 2D para enviar al servidor.');
+
+    // Convert image blob to base64
+    const reader = new FileReader();
+    reader.readAsDataURL(active2dImageBlob);
+    reader.onloadend = async () => {
+        const base64Image = reader.result;
+
+        updateLoader(25, 'Conectando con el servidor...', 'Enviando datos al motor Trellis a través de tu servidor local. Esto evita problemas de CORS.');
+
+        try {
+            let seedValNum = parseInt(seedInput.value) || 0;
+            if (randomSeedCheck.checked) {
+                seedValNum = Math.floor(Math.random() * 2147483647);
+                seedInput.value = seedValNum; // display the seed used
+            }
+            
+            const resolution = resolutionSelect.value;
+            const decimate = parseInt(decimateInput.value) || 300000;
+            const textureSize = parseInt(textureSizeSelect.value) || 2048;
+            const ssGuidanceNum = parseFloat(ssGuidanceInput.value);
+            const ssStepsNum = parseInt(ssStepsInput.value);
+            const slatGuidanceNum = parseFloat(slatGuidanceInput.value);
+            const slatStepsNum = parseInt(slatStepsInput.value);
+            const autoOptimize = autoOptimizeCheck ? autoOptimizeCheck.checked : false;
+            const quadTargetFaces = quadFacesInput ? parseInt(quadFacesInput.value) : 8000;
+            const remeshMethod = remeshMethodSelect ? remeshMethodSelect.value : 'tris_to_quads';
+ 
+            const response = await fetch(`${apiBase}/api/generate-3d`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    version: version,
+                    image: base64Image,
+                    token: hfToken,
+                    seed: seedValNum,
+                    resolution: resolution,
+                    decimation_target: decimate,
+                    texture_size: textureSize,
+                    ss_guidance: ssGuidanceNum,
+                    ss_steps: ssStepsNum,
+                    slat_guidance: slatGuidanceNum,
+                    slat_steps: slatStepsNum,
+                    auto_optimize: autoOptimize,
+                    quad_target_faces: quadTargetFaces,
+                    remeshMethod: remeshMethod
+                })
+            });
+
+            if (!response.ok) {
+                const errData = await response.json().catch(() => ({ error: 'Error de red o timeout del servidor.' }));
+                throw new Error(errData.error || 'Error interno en el servidor local.');
+            }
+
+            updateLoader(90, 'Procesando modelo...', 'Cargando malla tridimensional en el visualizador.');
+            const data = await response.json();
+
+            if (data.gltfUrl && data.glbUrl) {
+                // Save model info to sessionStorage and refresh via reload to ensure visual sync and bypass cache
+                sessionStorage.setItem('pendingModelToLoad', JSON.stringify({
+                    gltfUrl: data.gltfUrl,
+                    downloadUrl: data.glbUrl,
+                    fbxUrl: data.fbxUrl
+                }));
+                window.location.reload();
+            } else {
+                throw new Error('La respuesta del servidor no contiene las URLs de modelo esperadas.');
+            }
+
+        } catch (error) {
+            console.error(error);
+            alert(`Error al generar modelo 3D: ${error.message}`);
+            statusOverlay.classList.remove('active');
+        }
+    };
+});
+
+function updateLoader(percent, title, desc) {
+    loaderPercentage.textContent = `${percent}%`;
+    statusTitle.textContent = title;
+    statusDesc.textContent = desc;
+}
+
+// 3D Model Render and Viewer Interactions
+function load3DModel(gltfUrl, downloadUrl, fbxUrl) {
+    // Resolve URLs using apiBase for file:// compatibility
+    const absoluteGltfUrl = gltfUrl.startsWith('http') ? gltfUrl : `${apiBase}${gltfUrl}`;
+    const absoluteDownloadUrl = downloadUrl ? (downloadUrl.startsWith('http') ? downloadUrl : `${apiBase}${downloadUrl}`) : absoluteGltfUrl;
+
+    currentGltfUrl = absoluteDownloadUrl; // Store the high-quality GLB download url
+    activeModelRelativeUrl = gltfUrl; // Store relative path for rigging
+    
+    // Configure or hide FBX button based on fbxUrl availability
+    if (fbxUrl) {
+        const absoluteFbxUrl = fbxUrl.startsWith('http') ? fbxUrl : `${apiBase}${fbxUrl}`;
+        downloadFbxBtn.style.display = 'inline-flex';
+        downloadFbxBtn.onclick = () => {
+            const link = document.createElement('a');
+            link.href = absoluteFbxUrl;
+            link.download = absoluteFbxUrl.split('/').pop();
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        };
+    } else {
+        downloadFbxBtn.style.display = 'none';
+        downloadFbxBtn.onclick = null;
+    }
+    
+    // Show Rigging button for active model
+    if (gltfUrl) {
+        rigModelBtn.style.display = 'inline-flex';
+    } else {
+        rigModelBtn.style.display = 'none';
+    }
+    
+    // Clear previous viewer or empty state
+    viewerDisplay.innerHTML = '';
+    
+    // Create new model-viewer element
+    const modelViewer = document.createElement('model-viewer');
+    modelViewer.id = 'activeModelViewer';
+    modelViewer.src = `${absoluteGltfUrl}?t=${Date.now()}`;
+    modelViewer.setAttribute('alt', 'Modelo 3D generado por Trellis');
+    modelViewer.setAttribute('camera-controls', '');
+    modelViewer.setAttribute('auto-rotate', '');
+    modelViewer.setAttribute('shadow-intensity', '1.8');
+    modelViewer.setAttribute('shadow-softness', '0.5');
+    modelViewer.setAttribute('environment-image', 'neutral');
+    modelViewer.setAttribute('exposure', '1.15');
+    modelViewer.setAttribute('tone-mapping', 'commerce');
+    modelViewer.setAttribute('interaction-prompt', 'none');
+    modelViewer.style.width = '100%';
+    modelViewer.style.height = '100%';
+    
+    viewerDisplay.appendChild(modelViewer);
+    
+    // Enable toolbar overlay
+    viewerOverlay.classList.add('active');
+    toggleAutoRotateBtn.classList.add('active'); // auto-rotate is enabled by default
+    
+    // Hide status loading overlay
+    statusOverlay.classList.remove('active');
+}
+
+// Toolbar actions
+toggleAutoRotateBtn.addEventListener('click', () => {
+    const viewer = document.getElementById('activeModelViewer');
+    if (!viewer) return;
+    
+    if (viewer.hasAttribute('auto-rotate')) {
+        viewer.removeAttribute('auto-rotate');
+        toggleAutoRotateBtn.classList.remove('active');
+    } else {
+        viewer.setAttribute('auto-rotate', '');
+        toggleAutoRotateBtn.classList.add('active');
+    }
+});
+
+resetCameraBtn.addEventListener('click', () => {
+    const viewer = document.getElementById('activeModelViewer');
+    if (!viewer) return;
+    
+    // Reset camera orbit to default
+    viewer.cameraOrbit = 'unset unset unset';
+    viewer.cameraTarget = 'unset unset unset';
+    viewer.fieldOfView = 'unset';
+    
+    // Temporary flash class on button for visual feedback
+    resetCameraBtn.style.color = 'var(--primary-light)';
+    setTimeout(() => {
+        resetCameraBtn.style.color = '';
+    }, 300);
+});
+
+downloadGlbBtn.addEventListener('click', () => {
+    if (!currentGltfUrl) return;
+    
+    // Trigger download
+    const link = document.createElement('a');
+    link.href = currentGltfUrl;
+    link.download = '23dfactory_model.glb';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+});
+
+// Rigging action from main viewer
+rigModelBtn.addEventListener('click', async () => {
+    if (!activeModelRelativeUrl) return;
+    
+    statusOverlay.classList.add('active');
+    
+    const rigMethod = rigMethodSelect ? rigMethodSelect.value : 'ai';
+    if (rigMethod === 'ai') {
+        updateLoader(40, 'Rigging por IA (Nube)...', 'Conectando con la IA de Hugging Face para calcular los pesos y el esqueleto...');
+    } else if (rigMethod === 'local_biped') {
+        updateLoader(40, 'Rigging local humanoide...', 'Blender está construyendo el esqueleto humanoide y calculando los pesos de influencia...');
+    } else if (rigMethod === 'local_quadruped') {
+        updateLoader(40, 'Rigging local cuadrúpedo...', 'Blender está construyendo el esqueleto de 4 patas y calculando los pesos de influencia...');
+    }
+    
+    try {
+        const response = await fetch(`${apiBase}/api/rig-3d`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                modelUrl: activeModelRelativeUrl,
+                rigMethod: rigMethod,
+                token: hfToken
+            })
+        });
+        
+        if (!response.ok) {
+            const errData = await response.json().catch(() => ({ error: 'Error al riggear.' }));
+            throw new Error(errData.error || 'Error interno del servidor.');
+        }
+        
+        const data = await response.json();
+        if (data.riggedFbxUrl) {
+            const absoluteRiggedFbxUrl = data.riggedFbxUrl.startsWith('http') ? data.riggedFbxUrl : `${apiBase}${data.riggedFbxUrl}`;
+            
+            // Download rigged FBX
+            const link = document.createElement('a');
+            link.href = absoluteRiggedFbxUrl;
+            link.download = absoluteRiggedFbxUrl.split('/').pop();
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            alert('¡Esqueleto generado con éxito! El archivo FBX riggeado se ha descargado.');
+        } else {
+            throw new Error('No se devolvió la URL del FBX riggeado.');
+        }
+    } catch (error) {
+        console.error(error);
+        alert(`Error al riggear el modelo: ${error.message}`);
+    } finally {
+        statusOverlay.classList.remove('active');
+    }
+});
+
+// Gallery / Library Management
+const galleryList = document.getElementById('galleryList');
+const galleryTabBtn = document.getElementById('galleryTabBtn');
+
+async function refreshGallery() {
+    try {
+        const response = await fetch(`${apiBase}/api/gallery`);
+        if (!response.ok) throw new Error('Error al cargar la galería.');
+        
+        const data = await response.json();
+        cachedGalleryItems = data.items || [];
+        renderGallery(cachedGalleryItems);
+    } catch (error) {
+        console.error('Error refreshing gallery:', error);
+    }
+}
+
+let currentFilter = 'all';
+
+function renderGallery(items) {
+    if (!galleryList) return;
+    
+    if (items.length === 0) {
+        galleryList.innerHTML = `
+            <div class="gallery-empty-state">
+                <i data-lucide="inbox" style="opacity: 0.5; margin-bottom: 0.5rem; display: block; margin: 0 auto; text-align: center;"></i>
+                <p style="font-size: 0.8rem; color: var(--text-dark); text-align: center;">Biblioteca vacía</p>
+            </div>
+        `;
+        lucide.createIcons();
+        return;
+    }
+
+    // Filter items based on active filter state
+    const filteredItems = items.filter(item => {
+        if (currentFilter === 'all') return true;
+        return item.type === currentFilter;
+    });
+
+    if (filteredItems.length === 0) {
+        galleryList.innerHTML = `
+            <div class="gallery-empty-state">
+                <i data-lucide="inbox" style="opacity: 0.5; margin-bottom: 0.5rem; display: block; margin: 0 auto; text-align: center;"></i>
+                <p style="font-size: 0.8rem; color: var(--text-dark); text-align: center;">No hay elementos que coincidan con el filtro</p>
+            </div>
+        `;
+        lucide.createIcons();
+        return;
+    }
+    
+    galleryList.innerHTML = '';
+    
+    filteredItems.forEach((item, index) => {
+        const itemEl = document.createElement('div');
+        itemEl.className = 'gallery-item';
+        itemEl.style.animationDelay = `${index * 0.03}s`;
+        
+        const isImage = item.type === 'image';
+        const formattedTime = new Date(item.mtime * 1000).toLocaleString('es-ES', {
+            day: '2-digit',
+            month: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        
+        const thumbnailHtml = isImage 
+            ? `<img src="${apiBase}${item.url}" alt="${item.name}">` 
+            : `<i data-lucide="box" style="width: 24px; height: 24px;"></i>`;
+            
+        const actionButtonHtml = isImage
+            ? `<button class="gallery-btn load-img-btn" title="Cargar como origen 2D">
+                 <i data-lucide="arrow-left-right" style="width: 14px; height: 14px;"></i>
+               </button>`
+            : `<button class="gallery-btn load-model-btn" title="Visualizar modelo 3D">
+                 <i data-lucide="eye" style="width: 14px; height: 14px;"></i>
+               </button>`;
+               
+        itemEl.innerHTML = `
+            <div class="gallery-thumbnail">${thumbnailHtml}</div>
+            <div class="gallery-info">
+                <span class="gallery-name" title="${item.name}">${item.name}</span>
+                <span class="gallery-meta">
+                    <i data-lucide="calendar" style="width: 10px; height: 10px;"></i>
+                    <span>${formattedTime}</span>
+                </span>
+            </div>
+            <div class="gallery-actions">
+                ${actionButtonHtml}
+                ${!isImage ? `
+                <button class="gallery-btn optimize-item-btn" title="Optimizar malla con Blender">
+                    <i data-lucide="sparkles" style="width: 14px; height: 14px;"></i>
+                </button>
+                <button class="gallery-btn rig-item-btn" title="Generar Rigging humanoide" style="background: rgba(233, 30, 99, 0.15); color: #e91e63; border-color: rgba(233, 30, 99, 0.3);">
+                    <i data-lucide="accessibility" style="width: 14px; height: 14px;"></i>
+                </button>
+                <a href="${apiBase}${item.url}" download="${item.name}" class="gallery-btn" title="Descargar archivo GLB" style="text-decoration: none;">
+                    <i data-lucide="download" style="width: 14px; height: 14px;"></i>
+                </a>
+                ${item.fbxUrl ? `
+                <a href="${apiBase}${item.fbxUrl}" download="${item.name.replace('.glb', '.fbx')}" class="gallery-btn" title="Descargar archivo FBX (Quads y Texturas)" style="text-decoration: none; background: rgba(0, 150, 136, 0.15); color: #009688; border-color: rgba(0, 150, 136, 0.3);">
+                    <i data-lucide="file-code" style="width: 14px; height: 14px;"></i>
+                </a>` : ''}
+                ` : ''}
+                <button class="gallery-btn delete-btn" title="Eliminar del disco">
+                    <i data-lucide="trash-2" style="width: 14px; height: 14px;"></i>
+                </button>
+            </div>
+        `;
+        
+        // Event listeners for actions
+        if (isImage) {
+            itemEl.querySelector('.load-img-btn').addEventListener('click', async () => {
+                try {
+                    const fileUrl = `${apiBase}${item.url}`;
+                    const res = await fetch(fileUrl);
+                    const blob = await res.blob();
+                    const file = new File([blob], item.name, { type: blob.type });
+                    handleImageFile(file);
+                    
+                    // Activate library source selector and switch tab
+                    if (sourceLibraryBtn) sourceLibraryBtn.click();
+                    document.querySelector('[data-tab="upload-tab"]').click();
+                } catch (e) {
+                    alert('Error al cargar la imagen de la galería: ' + e.message);
+                }
+            });
+        } else {
+            itemEl.querySelector('.load-model-btn').addEventListener('click', () => {
+                load3DModel(`${apiBase}${item.url}`, `${apiBase}${item.url}`, item.fbxUrl);
+            });
+
+            itemEl.querySelector('.optimize-item-btn').addEventListener('click', async () => {
+                statusOverlay.classList.add('active');
+                
+                const quadTargetFaces = quadFacesInput ? parseInt(quadFacesInput.value) : 8000;
+                const remeshMethod = remeshMethodSelect ? remeshMethodSelect.value : 'tris_to_quads';
+
+                if (remeshMethod === 'cleanup') {
+                    updateLoader(50, 'Limpieza rápida de malla...', 'Blender está fusionando vértices duplicados y eliminando componentes flotantes aislados...');
+                } else {
+                    updateLoader(50, 'Optimización local...', 'Blender está limpiando la malla, remallando a quads y proyectando texturas...');
+                }
+
+                try {
+                    const response = await fetch(`${apiBase}/api/optimize-3d`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            modelUrl: item.url,
+                            quad_target_faces: quadTargetFaces,
+                            remeshMethod: remeshMethod
+                        })
+                    });
+
+                    if (!response.ok) {
+                        const errData = await response.json().catch(() => ({ error: 'Error al optimizar.' }));
+                        throw new Error(errData.error || 'Error interno del servidor.');
+                    }
+
+                    const data = await response.json();
+                    if (data.gltfUrl && data.glbUrl) {
+                        // Save model info to sessionStorage and refresh via reload to ensure visual sync and bypass cache
+                        sessionStorage.setItem('pendingModelToLoad', JSON.stringify({
+                            gltfUrl: data.gltfUrl,
+                            downloadUrl: data.glbUrl,
+                            fbxUrl: data.fbxUrl
+                        }));
+                        window.location.reload();
+                    } else {
+                        throw new Error('No se devolvió la URL del modelo optimizado.');
+                    }
+                } catch (error) {
+                    console.error(error);
+                    alert(`Error de optimización local: ${error.message}`);
+                } finally {
+                    statusOverlay.classList.remove('active');
+                }
+            });
+
+            itemEl.querySelector('.rig-item-btn').addEventListener('click', async () => {
+                statusOverlay.classList.add('active');
+                
+                const rigMethod = rigMethodSelect ? rigMethodSelect.value : 'ai';
+                if (rigMethod === 'ai') {
+                    updateLoader(40, 'Rigging por IA (Nube)...', 'Conectando con la IA de Hugging Face para calcular los pesos y el esqueleto...');
+                } else if (rigMethod === 'local_biped') {
+                    updateLoader(40, 'Rigging local humanoide...', 'Blender está construyendo el esqueleto humanoide y calculando los pesos de influencia...');
+                } else if (rigMethod === 'local_quadruped') {
+                    updateLoader(40, 'Rigging local cuadrúpedo...', 'Blender está construyendo el esqueleto de 4 patas y calculando los pesos de influencia...');
+                }
+                
+                try {
+                    const response = await fetch(`${apiBase}/api/rig-3d`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ 
+                            modelUrl: item.url,
+                            rigMethod: rigMethod,
+                            token: hfToken
+                        })
+                    });
+                    
+                    if (!response.ok) {
+                        const errData = await response.json().catch(() => ({ error: 'Error al riggear.' }));
+                        throw new Error(errData.error || 'Error interno del servidor.');
+                    }
+                    
+                    const data = await response.json();
+                    if (data.riggedFbxUrl) {
+                        // Download rigged FBX
+                        const link = document.createElement('a');
+                        link.href = `${apiBase}${data.riggedFbxUrl}`;
+                        link.download = data.riggedFbxUrl.split('/').pop();
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        
+                        alert('¡Esqueleto generado con éxito! El archivo FBX riggeado se ha descargado.');
+                    } else {
+                        throw new Error('No se devolvió la URL del FBX riggeado.');
+                    }
+                } catch (error) {
+                    console.error(error);
+                    alert(`Error de rigging local: ${error.message}`);
+                } finally {
+                    statusOverlay.classList.remove('active');
+                }
+            });
+        }
+        
+        itemEl.querySelector('.delete-btn').addEventListener('click', async () => {
+            if (confirm(`¿Estás seguro de que quieres eliminar ${item.name} de forma permanente del disco?`)) {
+                try {
+                    const response = await fetch(`${apiBase}/api/delete-gallery`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ name: item.name, type: item.type })
+                    });
+                    
+                    if (!response.ok) throw new Error('Error al eliminar el archivo.');
+                    refreshGallery();
+                } catch (e) {
+                    alert('Error al eliminar item: ' + e.message);
+                }
+            }
+        });
+        
+        galleryList.appendChild(itemEl);
+    });
+    
+    lucide.createIcons();
+}
+
+// Bind gallery filter toggles
+const filterBtns = document.querySelectorAll('.filter-group .toggle-btn');
+filterBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        filterBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentFilter = btn.getAttribute('data-filter');
+        renderGallery(cachedGalleryItems);
+    });
+});
+
+// Bind navigation click to refresh gallery
+if (galleryTabBtn) {
+    galleryTabBtn.addEventListener('click', refreshGallery);
+}
+
+// Initial gallery refresh
+refreshGallery();
+
+// Check if there is a pending model to load after page reload (F5)
+const pendingModel = sessionStorage.getItem('pendingModelToLoad');
+if (pendingModel) {
+    try {
+        const { gltfUrl, downloadUrl, fbxUrl } = JSON.parse(pendingModel);
+        sessionStorage.removeItem('pendingModelToLoad');
+        load3DModel(gltfUrl, downloadUrl, fbxUrl);
+    } catch (e) {
+        console.error('Error loading pending model after reload:', e);
+    }
+}

clean_mesh_blender.py

@@ -0,0 +1,351 @@
+import sys
+import os
+
+try:
+    import bpy
+except ImportError:
+    print("[Error] This script must be run inside Blender's python environment.")
+    sys.exit(1)
+
+def delete_isolated_components(obj, threshold_vertices=100):
+    # Store original name
+    orig_name = obj.name
+    
+    # Deselect all, select obj, make active
+    bpy.ops.object.select_all(action='DESELECT')
+    obj.select_set(True)
+    bpy.context.view_layer.objects.active = obj
+    
+    # Enter Edit Mode to separate
+    bpy.ops.object.mode_set(mode='EDIT')
+    bpy.ops.mesh.select_all(action='SELECT')
+    
+    # Separate loose parts
+    bpy.ops.mesh.separate(type='LOOSE')
+    
+    # Go back to Object Mode to process parts
+    bpy.ops.object.mode_set(mode='OBJECT')
+    
+    # The separated parts will be named like orig_name.001, orig_name.002, etc.
+    # Collect all mesh objects that are part of this separation
+    separated_objs = [o for o in bpy.context.scene.objects if o.type == 'MESH' and (o.name == orig_name or o.name.startswith(orig_name + "."))]
+    
+    if len(separated_objs) <= 1:
+        print("[Blender] Mesh is already a single component.")
+        return obj
+        
+    print(f"[Blender] Separated into {len(separated_objs)} loose components.")
+    
+    max_verts = max(len(o.data.vertices) for o in separated_objs)
+    
+    keep_objs = []
+    delete_objs = []
+    
+    for o in separated_objs:
+        num_verts = len(o.data.vertices)
+        # Keep if it has at least threshold_vertices, or is at least 5% of the largest component size
+        if num_verts >= threshold_vertices or num_verts >= (max_verts * 0.05):
+            keep_objs.append(o)
+        else:
+            delete_objs.append(o)
+            
+    if not keep_objs:
+        largest = max(separated_objs, key=lambda o: len(o.data.vertices))
+        keep_objs = [largest]
+        delete_objs = [o for o in separated_objs if o != largest]
+        
+    if delete_objs:
+        print(f"[Blender] Deleting {len(delete_objs)} isolated noise components with vertex count < {threshold_vertices}.")
+        bpy.ops.object.select_all(action='DESELECT')
+        for o in delete_objs:
+            o.select_set(True)
+        bpy.ops.object.delete()
+        
+    # Re-join remaining ones
+    bpy.ops.object.select_all(action='DESELECT')
+    for o in keep_objs:
+        o.select_set(True)
+    bpy.context.view_layer.objects.active = keep_objs[0]
+    bpy.ops.object.join()
+    
+    joined_obj = bpy.context.active_object
+    joined_obj.name = orig_name
+    return joined_obj
+
+def run_blender_cleanup(input_path, output_path, target_faces=8000, remesh_method="tris_to_quads"):
+    print(f"[Blender] Loading model: {input_path} (target_faces={target_faces}, remesh_method={remesh_method})")
+    
+    # 1. Reset scene to factory default empty scene
+    bpy.ops.wm.read_factory_settings(use_empty=True)
+    
+    # 2. Import GLTF/GLB
+    bpy.ops.import_scene.gltf(filepath=input_path)
+    
+    # 3. Locate the imported mesh
+    mesh_objs = [obj for obj in bpy.context.scene.objects if obj.type == 'MESH']
+    if not mesh_objs:
+        print("[Error] No mesh found in imported GLTF.")
+        sys.exit(1)
+        
+    dirty_obj = mesh_objs[0]
+    dirty_obj.name = "DirtyMesh"
+    print(f"[Blender] Found source mesh: {dirty_obj.name} with {len(dirty_obj.data.polygons)} polygons")
+    
+    # DIAGNOSTIC: Print material and texture details of DirtyMesh
+    print("[Blender] --- DirtyMesh Material Diagnostics ---")
+    for i, mat in enumerate(dirty_obj.data.materials):
+        if not mat:
+            print(f"  Material {i}: None")
+            continue
+        print(f"  Material {i}: {mat.name} (use_nodes={mat.use_nodes})")
+        if mat.use_nodes:
+            for node in mat.node_tree.nodes:
+                print(f"    Node: {node.name} (type={node.type})")
+                if node.type == 'TEX_IMAGE':
+                    img = node.image
+                    if img:
+                        print(f"      Image: {img.name}, size={img.size[:]}, filepath='{img.filepath}', has_data={img.has_data}")
+                    else:
+                        print("      Image: None")
+            for link in mat.node_tree.links:
+                print(f"    Link: {link.from_node.name} ({link.from_socket.name}) -> {link.to_node.name} ({link.to_socket.name})")
+    print("[Blender] ---------------------------------------")
+    
+    # Fast non-destructive cleanup option
+    if remesh_method == "cleanup":
+        print("[Blender] Running fast cleanup (merging duplicates and removing isolated parts)...")
+        # 1. Clean up mesh (remove doubles & loose)
+        bpy.ops.object.select_all(action='DESELECT')
+        dirty_obj.select_set(True)
+        bpy.context.view_layer.objects.active = dirty_obj
+        bpy.ops.object.mode_set(mode='EDIT')
+        bpy.ops.mesh.select_all(action='SELECT')
+        bpy.ops.mesh.remove_doubles(threshold=0.001)
+        bpy.ops.mesh.delete_loose()
+        bpy.ops.mesh.normals_make_consistent(inside=False)
+        bpy.ops.object.mode_set(mode='OBJECT')
+        
+        # 2. Delete isolated components
+        dirty_obj = delete_isolated_components(dirty_obj, threshold_vertices=100)
+        
+        # 3. Export directly (retaining original materials/textures)
+        bpy.ops.object.select_all(action='DESELECT')
+        dirty_obj.select_set(True)
+        bpy.context.view_layer.objects.active = dirty_obj
+        
+        print(f"[Blender] Exporting cleaned model to: {output_path}")
+        bpy.ops.export_scene.gltf(
+            filepath=output_path,
+            export_format='GLB',
+            use_selection=True
+        )
+        
+        # Also export FBX
+        fbx_path = output_path.replace(".glb", ".fbx")
+        print(f"[Blender] Exporting cleaned model as FBX: {fbx_path}")
+        try:
+            bpy.ops.export_scene.fbx(
+                filepath=fbx_path,
+                use_selection=True,
+                path_mode='COPY',
+                embed_textures=True
+            )
+            print("[Blender] ✓ FBX export completed successfully.")
+        except Exception as fe:
+            print(f"[Blender] Error: FBX export failed: {fe}")
+            
+        print("[Blender] Fast cleanup completed successfully.")
+        return
+
+    # 4. Duplicate the mesh to create the clean version
+    bpy.ops.object.select_all(action='DESELECT')
+    dirty_obj.select_set(True)
+    bpy.context.view_layer.objects.active = dirty_obj
+    
+    bpy.ops.object.duplicate(linked=False)
+    clean_obj = bpy.context.active_object
+    clean_obj.name = "CleanMesh"
+    
+    # 5. Clean up initial mesh (remove doubles)
+    bpy.context.view_layer.objects.active = clean_obj
+    bpy.ops.object.mode_set(mode='EDIT')
+    bpy.ops.mesh.select_all(action='SELECT')
+    # Merge close vertices (Merge by distance)
+    bpy.ops.mesh.remove_doubles(threshold=0.001)
+    bpy.ops.mesh.delete_loose()
+    # Recalculate normals outwards
+    bpy.ops.mesh.normals_make_consistent(inside=False)
+    bpy.ops.object.mode_set(mode='OBJECT')
+    
+    # Delete isolated components before remeshing/decimating
+    clean_obj = delete_isolated_components(clean_obj, threshold_vertices=100)
+    
+    # 6. Apply Decimate Modifier or QuadriFlow Remesh
+    if remesh_method == "quadriflow":
+        print(f"[Blender] Running QuadriFlow Remesh to target {target_faces} faces...")
+        try:
+            bpy.context.view_layer.objects.active = clean_obj
+            bpy.ops.object.quadriflow_remesh(
+                use_preserve_sharp=True,
+                use_preserve_boundary=True,
+                target_faces=target_faces
+            )
+            print(f"[Blender] ✓ QuadriFlow Remesh completed. New polygon count: {len(clean_obj.data.polygons)}")
+        except Exception as qfe:
+            print(f"[Blender] Error: QuadriFlow Remesh failed: {qfe}. Falling back to decimation.")
+            remesh_method = "tris_to_quads"
+            
+    if remesh_method == "tris_to_quads":
+        poly_count_before = len(clean_obj.data.polygons)
+        if poly_count_before > target_faces:
+            ratio = target_faces / poly_count_before
+            print(f"[Blender] Decimating mesh from {poly_count_before} to {target_faces} polygons (ratio={ratio:.4f})...")
+            try:
+                dec_mod = clean_obj.modifiers.new(name="AutoDecimate", type='DECIMATE')
+                dec_mod.ratio = ratio
+                dec_mod.use_symmetry = True
+                dec_mod.symmetry_axis = 'X'
+                bpy.ops.object.modifier_apply(modifier="AutoDecimate")
+                print(f"[Blender] ✓ Decimation completed. New polygon count: {len(clean_obj.data.polygons)}")
+            except Exception as de:
+                print(f"[Blender] Warning: Decimation failed: {de}")
+        else:
+            print(f"[Blender] Mesh already has fewer polygons ({poly_count_before}) than target ({target_faces}). Skipping decimation.")
+
+        # 7. Convert triangles to quads with high angle threshold (1.57 rad / 90 degrees)
+        # This converts almost 100% of flat areas to quads while keeping the mesh completely watertight and sharp
+        print("[Blender] Converting triangles to quads with high threshold...")
+        try:
+            bpy.ops.object.mode_set(mode='EDIT')
+            bpy.ops.mesh.select_all(action='SELECT')
+            bpy.ops.mesh.tris_convert_to_quads(face_threshold=1.570796, shape_threshold=1.570796)
+            bpy.ops.object.mode_set(mode='OBJECT')
+            print("[Blender] ✓ Conversion to quads completed.")
+        except Exception as tq:
+            print(f"[Blender] Warning: Triangles to quads conversion failed: {tq}")
+            if clean_obj.mode != 'OBJECT':
+                bpy.ops.object.mode_set(mode='OBJECT')
+            
+    # 8. Unwrap UVs on CleanMesh
+    print("[Blender] Unwrapping UV coordinates...")
+    bpy.ops.object.mode_set(mode='EDIT')
+    bpy.ops.mesh.select_all(action='SELECT')
+    bpy.ops.uv.smart_project(island_margin=0.002)
+    bpy.ops.object.mode_set(mode='OBJECT')
+    
+    # 9. Setup Baking Material & Target Image Node
+    print("[Blender] Setting up material for texture projection...")
+    clean_mat = bpy.data.materials.new(name="CleanMaterial")
+    clean_mat.use_nodes = True
+    clean_obj.data.materials.clear()
+    clean_obj.data.materials.append(clean_mat)
+    
+    bake_image = bpy.data.images.new(name="BakedTexture", width=2048, height=2048)
+    
+    nodes = clean_mat.node_tree.nodes
+    texture_node = nodes.new(type='ShaderNodeTexImage')
+    texture_node.image = bake_image
+    texture_node.select = True
+    nodes.active = texture_node 
+    
+    # 10. Configure Cycles and Bake from Selected (DirtyMesh) to Active (CleanMesh)
+    print("[Blender] Configuring Cycles baking engine...")
+    bpy.context.scene.render.engine = 'CYCLES'
+    bpy.context.scene.cycles.device = 'CPU'
+    
+    print("[Blender] Bypassing shader nodes for unlit EMIT baking...")
+    for mat in dirty_obj.data.materials:
+        if mat and mat.use_nodes:
+            output_node = next((n for n in mat.node_tree.nodes if n.type == 'OUTPUT_MATERIAL'), None)
+            bsdf_node = next((n for n in mat.node_tree.nodes if n.type == 'BSDF_PRINCIPLED'), None)
+            if output_node and bsdf_node:
+                base_color_input = bsdf_node.inputs['Base Color']
+                if base_color_input.is_linked:
+                    from_node = base_color_input.links[0].from_node
+                    from_socket = base_color_input.links[0].from_socket
+                    mat.node_tree.links.new(from_socket, output_node.inputs['Surface'])
+                    print(f"  [Bypass] Linked {from_node.name} directly to Material Output Surface on {mat.name}")
+    
+    bpy.context.scene.cycles.bake_type = 'EMIT'
+    bpy.context.scene.render.bake.use_selected_to_active = True
+    bpy.context.scene.render.bake.margin = 16
+    bpy.context.scene.render.bake.margin_type = 'EXTEND'
+    bpy.context.scene.render.bake.cage_extrusion = 0.02
+    bpy.context.scene.render.bake.max_ray_distance = 0.05
+    
+    # Select DirtyMesh and CleanMesh, making CleanMesh active
+    bpy.ops.object.select_all(action='DESELECT')
+    dirty_obj.select_set(True)
+    clean_obj.select_set(True)
+    bpy.context.view_layer.objects.active = clean_obj
+    
+    print("[Blender] Projecting (baking) texture map using EMIT. Please wait...")
+    try:
+        bpy.ops.object.bake(type='EMIT')
+        print("[Blender] ✓ Texture projection completed successfully.")
+        
+        bake_image.pack()
+        
+        # Link texture node outputs to material shader inputs
+        bsdf_node = next(n for n in nodes if n.type == 'BSDF_PRINCIPLED')
+        clean_mat.node_tree.links.new(texture_node.outputs['Color'], bsdf_node.inputs['Base Color'])
+    except Exception as be:
+        print(f"[Blender] Error: Texture baking failed: {be}")
+
+    # 10. Delete the original dirty mesh before export
+    bpy.ops.object.select_all(action='DESELECT')
+    dirty_obj.select_set(True)
+    bpy.ops.object.delete()
+    
+    # 11. Export CleanMesh as GLB (preserving original textures and materials)
+    bpy.ops.object.select_all(action='DESELECT')
+    clean_obj.select_set(True)
+    bpy.context.view_layer.objects.active = clean_obj
+    
+    print(f"[Blender] Exporting clean model to: {output_path}")
+    bpy.ops.export_scene.gltf(
+        filepath=output_path,
+        export_format='GLB',
+        use_selection=True
+    )
+    
+    # 12. Also export as FBX
+    fbx_path = output_path.replace(".glb", ".fbx")
+    print(f"[Blender] Exporting clean model as FBX: {fbx_path}")
+    try:
+        bpy.ops.export_scene.fbx(
+            filepath=fbx_path,
+            use_selection=True,
+            path_mode='COPY',
+            embed_textures=True
+        )
+        print("[Blender] ✓ FBX export completed successfully.")
+    except Exception as fe:
+        print(f"[Blender] Error: FBX export failed: {fe}")
+            
+    print("[Blender] Process completed successfully.")
+
+if __name__ == "__main__":
+    # Extract arguments passed after '--'
+    try:
+        args_idx = sys.argv.index("--")
+        args = sys.argv[args_idx + 1:]
+    except ValueError:
+        args = []
+        
+    if len(args) < 2:
+        print("[Error] Usage: blender --background --python clean_mesh_blender.py -- <input_glb> <output_glb> [target_faces] [remesh_method]")
+        sys.exit(1)
+        
+    target_faces = 60000
+    if len(args) >= 3:
+        try:
+            target_faces = int(args[2])
+        except ValueError:
+            pass
+            
+    remesh_method = "tris_to_quads"
+    if len(args) >= 4:
+        remesh_method = args[3]
+            
+    run_blender_cleanup(args[0], args[1], target_faces, remesh_method)

index.html

@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>23DFactory - Transform 2D Images to 3D Models</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">
+    
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    
+    <!-- Import Model Viewer for 3D Rendering -->
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
+    
+    <!-- Custom Style -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="logo-container">
+                <h1 class="logo-text">23D<span>Factory</span></h1>
+            </div>
+            <div class="header-actions">
+                <button class="btn btn-secondary" id="openSettingsBtn" title="Configuración de API">
+                    <i data-lucide="settings"></i>
+                    <span>Configuración</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Workspace -->
+        <main class="main-workspace">
+            <!-- Sidebar (Controls) -->
+            <aside class="sidebar">
+                <div class="sidebar-scroll">
+                <!-- Image Source Selection Tab -->
+                <nav class="tab-nav">
+                    <button class="tab-btn active" data-tab="upload-tab">
+                        <i data-lucide="box"></i>
+                        <span>Generar 3D AI</span>
+                    </button>
+                    <button class="tab-btn" data-tab="generate-tab">
+                        <i data-lucide="sparkles"></i>
+                        <span>Generar 2D AI</span>
+                    </button>
+                    <button class="tab-btn" data-tab="gallery-tab" id="galleryTabBtn">
+                        <i data-lucide="library"></i>
+                        <span>Biblioteca</span>
+                    </button>
+                </nav>
+
+                <!-- Tab content: Upload / Select Image for 3D generation -->
+                <div class="tab-content active" id="upload-tab">
+                    <div class="control-card">
+                        <div class="card-title">
+                            <i data-lucide="image"></i>
+                            <span>Imagen 2D de Origen</span>
+                        </div>
+
+                        <!-- Source Selector -->
+                        <div class="toggle-group" style="margin-bottom: 1.25rem;">
+                            <button type="button" class="toggle-btn active" id="sourceUploadBtn">Subir Archivo</button>
+                            <button type="button" class="toggle-btn" id="sourceLibraryBtn">Usar Biblioteca</button>
+                        </div>
+                        
+                        <!-- Upload Option -->
+                        <div id="uploadSourceContainer">
+                            <div class="dropzone" id="dropzone">
+                                <i data-lucide="image-up" class="dropzone-icon"></i>
+                                <p>Arrastra tu imagen aquí o haz clic para buscar</p>
+                                <span style="font-size: 0.75rem; color: var(--text-dark);">Soporta PNG, JPG, WEBP (Fondo transparente preferible)</span>
+                                <input type="file" id="fileInput" accept="image/*">
+                            </div>
+                        </div>
+
+                        <!-- Library Selection Option -->
+                        <div id="librarySourceContainer" style="display: none;">
+                            <div class="library-thumbnail-grid" id="libraryThumbnailGrid">
+                                <!-- Populated dynamically with 2D images -->
+                            </div>
+                        </div>
+
+                        <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>
+                        </div>
+                    </div>
+
+                    <!-- Trellis 3D Parameters Card -->
+                    <div class="control-card">
+                        <div class="card-title">
+                            <i data-lucide="sliders"></i>
+                            <span>Ajustes Trellis 3D</span>
+                        </div>
+
+                        <div class="input-group">
+                            <label class="input-label" for="trellisVersionSelect">Versión de Trellis</label>
+                            <select id="trellisVersionSelect" class="custom-select">
+                                <option value="v2">Trellis v2 (Microsoft - Recomendado)</option>
+                                <option value="v1">Trellis v1 (Comunidad)</option>
+                            </select>
+                        </div>
+
+                        <div class="input-group" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.75rem;">
+                            <input type="checkbox" id="autoOptimizeCheck" style="width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-light);">
+                            <label for="autoOptimizeCheck" class="input-label" style="margin-bottom: 0; cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--text-light);">
+                                Optimizar malla a Quads (Blender local)
+                            </label>
+                        </div>
+
+                        <!-- Target Faces for Blender Remesh -->
+                        <div id="quadFacesContainer" class="slider-container" style="display: none; margin-bottom: 1.25rem;">
+                            <div class="slider-header" style="margin-bottom: 0.5rem;">
+                                <span>Caras objetivo (Quads Blender)</span>
+                                <span id="quadFacesVal">60000</span>
+                            </div>
+                            <input type="range" id="quadFacesInput" class="range-slider" min="2000" max="200000" step="1000" value="60000" style="margin-bottom: 0.75rem;">
+                            
+                            <div class="input-group" style="margin-bottom: 0;">
+                                <label class="input-label" for="remeshMethodSelect" style="font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.25rem;">Método de Quads</label>
+                                <select id="remeshMethodSelect" class="custom-select" style="padding: 0.35rem 0.5rem; font-size: 0.8rem; height: auto;">
+                                    <option value="cleanup">Sólo Limpieza (Eliminar ruido y flotantes)</option>
+                                    <option value="tris_to_quads" selected>Conversión Rápida (Tris to Quads)</option>
+                                    <option value="quadriflow">Retopología Completa (QuadriFlow)</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <!-- Resolution -->
+                        <div class="input-group">
+                            <label class="input-label" for="resolutionSelect">Resolución</label>
+                            <select id="resolutionSelect" class="custom-select">
+                                <option value="512">512 (Rápido)</option>
+                                <option value="1024" selected>1024 (Recomendado)</option>
+                                <option value="1536">1536 (Alta Calidad)</option>
+                            </select>
+                        </div>
+
+                        <!-- Seed -->
+                        <div class="input-group">
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
+                                <label class="input-label" for="seedInput" style="margin-bottom: 0;">Semilla (Seed)</label>
+                                <div style="display: flex; align-items: center; gap: 0.25rem;">
+                                    <input type="checkbox" id="randomSeedCheck" checked style="width: 14px; height: 14px; cursor: pointer;">
+                                    <label for="randomSeedCheck" style="font-size: 0.75rem; color: var(--text-muted); cursor: pointer; user-select: none;">Aleatoria</label>
+                                </div>
+                            </div>
+                            <input type="number" id="seedInput" class="text-input" value="0" min="0" max="2147483647">
+                        </div>
+
+                        <!-- Decimation Target -->
+                        <div class="slider-container">
+                            <div class="slider-header">
+                                <span>Decimation Target (Malla original)</span>
+                                <span id="decimateVal">300000</span>
+                            </div>
+                            <input type="range" id="decimateInput" class="range-slider" min="100000" max="500000" step="50000" value="300000">
+                        </div>
+
+                        <!-- Texture Size -->
+                        <div class="input-group">
+                            <label class="input-label" for="textureSizeSelect">Tamaño de Textura</label>
+                            <select id="textureSizeSelect" class="custom-select">
+                                <option value="1024">1024x1024</option>
+                                <option value="2048" selected>2048x2048</option>
+                                <option value="4096">4096x4096</option>
+                            </select>
+                        </div>
+
+                        <!-- SS Guidance Strength -->
+                        <div class="slider-container">
+                            <div class="slider-header">
+                                <span>SS Fuerza de Guía (SS Guidance)</span>
+                                <span id="ssGuidanceVal">7.5</span>
+                            </div>
+                            <input type="range" id="ssGuidanceInput" class="range-slider" min="1.0" max="15.0" step="0.5" value="7.5">
+                        </div>
+
+                        <!-- SS Sampling Steps -->
+                        <div class="slider-container">
+                            <div class="slider-header">
+                                <span>SS Pasos de Muestreo</span>
+                                <span id="ssStepsVal">12</span>
+                            </div>
+                            <input type="range" id="ssStepsInput" class="range-slider" min="4" max="25" step="1" value="12">
+                        </div>
+
+                        <!-- SLAT Guidance Strength -->
+                        <div class="slider-container">
+                            <div class="slider-header">
+                                <span>SLAT Fuerza de Guía</span>
+                                <span id="slatGuidanceVal">7.5</span>
+                            </div>
+                            <input type="range" id="slatGuidanceInput" class="range-slider" min="1.0" max="10.0" step="0.5" value="7.5">
+                        </div>
+
+                        <!-- SLAT Steps -->
+                        <div class="slider-container">
+                            <div class="slider-header">
+                                <span>SLAT Pasos de Muestreo</span>
+                                <span id="slatStepsVal">12</span>
+                            </div>
+                            <input type="range" id="slatStepsInput" class="range-slider" min="4" max="25" step="1" value="12">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Tab content: Generate 2D AI -->
+                <div class="tab-content" id="generate-tab">
+                    <div class="control-card">
+                        <div class="card-title">
+                            <i data-lucide="message-square"></i>
+                            <span>Generador de Imágenes 2D</span>
+                        </div>
+                        <div class="input-group">
+                            <label class="input-label" for="promptInput">Prompt de Imagen</label>
+                            <textarea id="promptInput" class="text-input" rows="3" placeholder="Ej. Un juguete robot cyberpunk detallado, fondo blanco, modelo 3D, estilo Pixar..."></textarea>
+                        </div>
+                        
+                        <div class="input-group">
+                            <label class="input-label" for="negativePromptInput">Prompt Negativo</label>
+                            <input type="text" id="negativePromptInput" class="text-input" placeholder="Ej. blurry, low quality, detailed background" value="blurry, detailed background, shadows, realistic environment">
+                        </div>
+
+                        <div class="input-group">
+                            <label class="input-label" for="generatorModelSelect">Modelo de IA</label>
+                            <select id="generatorModelSelect" class="custom-select">
+                                <option value="black-forest-labs/FLUX.1-schnell">FLUX.1 Schnell (Ultra Rápido)</option>
+                                <option value="stabilityai/stable-diffusion-3-medium">Stable Diffusion 3 Medium</option>
+                                <option value="black-forest-labs/FLUX.1-dev">FLUX.1 Dev (Alta Calidad)</option>
+                            </select>
+                        </div>
+
+                        <button class="btn btn-accent" id="generate2dBtn">
+                            <i data-lucide="wand-2"></i>
+                            <span>Crear Imagen 2D</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Tab content: Gallery / Library -->
+                <div class="tab-content" id="gallery-tab">
+                    <div class="control-card">
+                        <div class="card-title">
+                            <i data-lucide="library"></i>
+                            <span>Galería de Creaciones</span>
+                        </div>
+                        <p style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.75rem;">
+                            Modelos 3D (.glb) e imágenes 2D generadas y almacenadas localmente.
+                        </p>
+                        
+                        <div class="input-group" style="margin-top: 0.5rem; margin-bottom: 1.25rem; background: rgba(255, 255, 255, 0.03); padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border);">
+                            <label for="rigMethodSelect" class="input-label" style="margin-bottom: 0.35rem; cursor: pointer; user-select: none; font-size: 0.82rem; color: var(--text-light); display: flex; align-items: center; gap: 0.35rem;">
+                                <i data-lucide="sparkles" style="width: 13.5px; height: 13.5px; color: #e91e63;"></i>
+                                Método de Rigging
+                            </label>
+                            <select id="rigMethodSelect" class="custom-select" style="font-size: 0.8rem; padding: 0.3rem 0.5rem; height: auto; margin-top: 0.25rem; background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-light); border-radius: 4px; width: 100%; cursor: pointer;">
+                                <option value="ai" selected>Rigging por IA (Cualquier forma - HF)</option>
+                                <option value="local_biped">Blender Local - Humanoide</option>
+                                <option value="local_quadruped">Blender Local - Cuadrúpedo (4 patas)</option>
+                            </select>
+                        </div>
+                        
+                        <!-- Gallery Filter Selector -->
+                        <div class="toggle-group filter-group" style="margin-bottom: 1.25rem;">
+                            <button type="button" class="toggle-btn active" data-filter="all">Todos</button>
+                            <button type="button" class="toggle-btn" data-filter="image">Imágenes 2D</button>
+                            <button type="button" class="toggle-btn" data-filter="model">Modelos 3D</button>
+                        </div>
+
+                        <div class="gallery-list" id="galleryList">
+                            <!-- Items will be dynamically loaded here -->
+                            <div class="gallery-empty-state">
+                                <i data-lucide="inbox" style="opacity: 0.5; margin-bottom: 0.5rem; display: block; margin: 0 auto; text-align: center;"></i>
+                                <p style="font-size: 0.8rem; color: var(--text-dark); text-align: center;">Biblioteca vacía</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                </div> <!-- End sidebar-scroll -->
+
+                <div class="sidebar-actions">
+                    <!-- Main Build Trigger -->
+                    <button class="btn btn-accent" id="generate3dBtn" style="width: 100%;" disabled>
+                        <i data-lucide="box"></i>
+                        <span>Construir Malla 3D</span>
+                    </button>
+
+                    <!-- Footer -->
+                    <footer class="sidebar-footer">
+                        <span>23DFactory v1.0.0</span>
+                        <a href="https://huggingface.co/spaces/microsoft/TRELLIS.2" target="_blank" rel="noopener">Motor Trellis</a>
+                    </footer>
+                </div>
+            </aside>
+
+            <!-- Viewer Container -->
+            <section class="viewer-container">
+                <!-- Loading Overlay -->
+                <div class="status-overlay" id="statusOverlay">
+                    <div class="cyber-loader">
+                        <div class="loader-ring"></div>
+                        <div class="loader-ring"></div>
+                        <div class="loader-ring"></div>
+                        <div class="loader-text-pct" id="loaderPercentage">--</div>
+                    </div>
+                    <div class="status-info">
+                        <h4 class="status-title" id="statusTitle">Inicializando...</h4>
+                        <p class="status-desc" id="statusDesc">Por favor, espera unos instantes mientras el motor procesa.</p>
+                    </div>
+                </div>
+
+                <!-- Interactive 3D Viewer Display -->
+                <div class="viewer-display" id="viewerDisplay">
+                    <!-- Empty State -->
+                    <div class="empty-state" id="emptyState">
+                        <div class="empty-state-icon">
+                            <i data-lucide="box"></i>
+                        </div>
+                        <h3>Visualizador 3D</h3>
+                        <p>Carga o genera una imagen 2D en el panel izquierdo y haz clic en "Construir Malla 3D" para ver el resultado tridimensional aquí.</p>
+                    </div>
+                    
+                    <!-- Dynamic Model Viewer (will be injected here or toggled) -->
+                </div>
+
+                <!-- Visualizer Floating Overlay Toolbar -->
+                <div class="viewer-overlay" id="viewerOverlay">
+                    <button class="overlay-btn" id="toggleAutoRotate" title="Auto-Rotar">
+                        <i data-lucide="rotate-cw"></i>
+                    </button>
+                    <button class="overlay-btn" id="resetCameraBtn" title="Restablecer Vista">
+                        <i data-lucide="focus"></i>
+                    </button>
+                    <div style="width: 1px; background: var(--border); margin: 0.25rem 0;"></div>
+                    <button class="btn btn-accent" id="downloadGlbBtn" style="padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem;" title="Descargar modelo .GLB">
+                        <i data-lucide="download"></i>
+                        <span>Descargar GLB</span>
+                    </button>
+                    <button class="btn" id="downloadFbxBtn" style="padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; background: rgba(0, 150, 136, 0.15); color: #009688; border: 1px solid rgba(0, 150, 136, 0.3); display: none; align-items: center; gap: 0.5rem;" title="Descargar modelo .FBX (Quads)">
+                        <i data-lucide="download"></i>
+                        <span>Descargar FBX (Quads)</span>
+                    </button>
+                    <button class="btn" id="rigModelBtn" style="padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; background: rgba(233, 30, 99, 0.15); color: #e91e63; border: 1px solid rgba(233, 30, 99, 0.3); display: none; align-items: center; gap: 0.5rem;" title="Generar Rigging humanoide automático">
+                        <i data-lucide="accessibility"></i>
+                        <span>Generar Rigging</span>
+                    </button>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- API settings Modal -->
+    <div class="modal-overlay" id="settingsModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">Configuración de API</h3>
+                <button class="close-modal" id="closeSettingsBtn">&times;</button>
+            </div>
+            
+            <p style="font-size: 0.85rem; color: var(--text-muted);">
+                Para utilizar las APIs de Hugging Face de forma ilimitada o más veloz, ingresa tu HF Token. De lo contrario, se utilizará la cuota de uso público por defecto.
+            </p>
+
+            <div class="input-group">
+                <label class="input-label" for="hfTokenInput">Hugging Face API Token</label>
+                <input type="password" id="hfTokenInput" class="text-input" placeholder="hf_...">
+                <span style="font-size: 0.7rem; color: var(--text-dark);">
+                    Puedes crear un token en <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: var(--primary-light);">huggingface.co/settings/tokens</a>
+                </span>
+            </div>
+
+            <button class="btn" id="saveSettingsBtn">
+                <i data-lucide="save"></i>
+                <span>Guardar Configuración</span>
+            </button>
+        </div>
+    </div>
+
+    <script type="module" src="app.js?v=9"></script>
+    <script>
+        // Initialize Lucide icons on page load
+        lucide.createIcons();
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1 @@
+gradio_client

rig_mesh_blender.py

@@ -0,0 +1,296 @@
+import sys
+import os
+
+try:
+    import bpy
+    import mathutils
+except ImportError:
+    print("[Error] This script must be run inside Blender's python environment.")
+    sys.exit(1)
+
+def run_blender_rigging(input_path, output_path):
+    print(f"[Blender Rigging] Loading model: {input_path}")
+    
+    # 1. Reset scene
+    bpy.ops.wm.read_factory_settings(use_empty=True)
+    
+    # 2. Import GLB
+    bpy.ops.import_scene.gltf(filepath=input_path)
+    
+    # 3. Find all mesh objects and join them into a single character mesh
+    mesh_objs = [obj for obj in bpy.context.scene.objects if obj.type == 'MESH']
+    if not mesh_objs:
+        print("[Error] No mesh found in imported GLTF.")
+        sys.exit(1)
+        
+    print(f"[Blender Rigging] Found {len(mesh_objs)} meshes. Joining them...")
+    bpy.ops.object.select_all(action='DESELECT')
+    for obj in mesh_objs:
+        obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_objs[0]
+    bpy.ops.object.join()
+    
+    mesh_obj = bpy.context.active_object
+    mesh_obj.name = "CharacterMesh"
+    print(f"[Blender Rigging] Joined mesh: {mesh_obj.name}")
+    
+    # Ensure transforms are applied so bounding box calculations are correct
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_obj
+    bpy.ops.object.transform_apply(location=True, rotation=True, scale=True)
+    
+    # 4. Calculate bounding box
+    bbox = [mesh_obj.matrix_world @ mathutils.Vector(corner) for corner in mesh_obj.bound_box]
+    min_x = min([v.x for v in bbox])
+    max_x = max([v.x for v in bbox])
+    min_y = min([v.y for v in bbox])
+    max_y = max([v.y for v in bbox])
+    min_z = min([v.z for v in bbox])
+    max_z = max([v.z for v in bbox])
+    
+    width = max_x - min_x
+    depth = max_y - min_y
+    height = max_z - min_z
+    center_x = (min_x + max_x) / 2.0
+    center_y = (min_y + max_y) / 2.0
+    
+    print(f"[Blender Rigging] Mesh Bounds: Height={height:.4f}, Width={width:.4f}, Depth={depth:.4f}")
+    print(f"[Blender Rigging] Mesh Center: X={center_x:.4f}, Y={center_y:.4f}, Min Z={min_z:.4f}")
+    
+    # 5. Define relative humanoid bone joints
+    # Let's map joints relative to the bounding box
+    # z positions
+    z_hips = min_z + height * 0.53
+    z_spine = min_z + height * 0.63
+    z_chest = min_z + height * 0.75
+    z_neck = min_z + height * 0.83
+    z_head = min_z + height * 0.95
+    
+    # Arm z positions
+    z_shoulder = min_z + height * 0.77
+    z_elbow = min_z + height * 0.75
+    z_wrist = min_z + height * 0.73
+    z_hand = min_z + height * 0.71
+    
+    # Leg z positions
+    z_hip_joint = min_z + height * 0.49
+    z_knee = min_z + height * 0.27
+    z_ankle = min_z + height * 0.07
+    z_foot_tip = min_z + height * 0.01
+    
+    # X offsets (width-based) relative to center_x
+    x_offset_leg = width * 0.14
+    x_offset_shoulder = width * 0.12
+    x_offset_elbow = width * 0.32
+    x_offset_wrist = width * 0.47
+    x_offset_hand = width * 0.54
+    
+    # Left side X coordinates (negative X direction in standard front view)
+    x_leg_l = center_x - x_offset_leg
+    x_shoulder_l = center_x - x_offset_shoulder
+    x_elbow_l = center_x - x_offset_elbow
+    x_wrist_l = center_x - x_offset_wrist
+    x_hand_l = center_x - x_offset_hand
+
+    # Right side X coordinates (positive X direction in standard front view)
+    x_leg_r = center_x + x_offset_leg
+    x_shoulder_r = center_x + x_offset_shoulder
+    x_elbow_r = center_x + x_offset_elbow
+    x_wrist_r = center_x + x_offset_wrist
+    x_hand_r = center_x + x_offset_hand
+    
+    # Y offsets (depth-based)
+    y_center = center_y
+    y_foot_tip = center_y - depth * 0.25 # foot goes forward (negative Y in Blender)
+    
+    # Joint positions dictionaries
+    joints = {
+        "Hips": ((center_x, y_center, z_hips), (center_x, y_center, z_spine)),
+        "Spine": ((center_x, y_center, z_spine), (center_x, y_center, z_chest)),
+        "Chest": ((center_x, y_center, z_chest), (center_x, y_center, z_neck)),
+        "Neck": ((center_x, y_center, z_neck), (center_x, y_center, z_head)),
+        
+        # Left Arm
+        "LeftShoulder": ((center_x, y_center, z_shoulder), (x_shoulder_l, y_center, z_shoulder)),
+        "LeftArm": ((x_shoulder_l, y_center, z_shoulder), (x_elbow_l, y_center, z_elbow)),
+        "LeftForeArm": ((x_elbow_l, y_center, z_elbow), (x_wrist_l, y_center, z_wrist)),
+        "LeftHand": ((x_wrist_l, y_center, z_wrist), (x_hand_l, y_center, z_hand)),
+        
+        # Right Arm
+        "RightShoulder": ((center_x, y_center, z_shoulder), (x_shoulder_r, y_center, z_shoulder)),
+        "RightArm": ((x_shoulder_r, y_center, z_shoulder), (x_elbow_r, y_center, z_elbow)),
+        "RightForeArm": ((x_elbow_r, y_center, z_elbow), (x_wrist_r, y_center, z_wrist)),
+        "RightHand": ((x_wrist_r, y_center, z_wrist), (x_hand_r, y_center, z_hand)),
+        
+        # Left Leg
+        "LeftUpLeg": ((x_leg_l, y_center, z_hip_joint), (x_leg_l, y_center, z_knee)),
+        "LeftLeg": ((x_leg_l, y_center, z_knee), (x_leg_l, y_center, z_ankle)),
+        "LeftFoot": ((x_leg_l, y_center, z_ankle), (x_leg_l, y_foot_tip, z_foot_tip)),
+        
+        # Right Leg
+        "RightUpLeg": ((x_leg_r, y_center, z_hip_joint), (x_leg_r, y_center, z_knee)),
+        "RightLeg": ((x_leg_r, y_center, z_knee), (x_leg_r, y_center, z_ankle)),
+        "RightFoot": ((x_leg_r, y_center, z_ankle), (x_leg_r, y_foot_tip, z_foot_tip))
+    }
+    
+    # 6. Create Armature
+    print("[Blender Rigging] Creating Armature...")
+    arm_data = bpy.data.armatures.new(name="HumanoidArmature")
+    rig_obj = bpy.data.objects.new(name="HumanoidRig", object_data=arm_data)
+    bpy.context.scene.collection.objects.link(rig_obj)
+    
+    bpy.context.view_layer.objects.active = rig_obj
+    bpy.ops.object.mode_set(mode='EDIT')
+    
+    # Build bones
+    edit_bones = arm_data.edit_bones
+    bone_objects = {}
+    for name, (head, tail) in joints.items():
+        bone = edit_bones.new(name)
+        bone.head = head
+        bone.tail = tail
+        bone_objects[name] = bone
+        
+    # Setup hierarchy
+    bone_objects["Spine"].parent = bone_objects["Hips"]
+    bone_objects["Chest"].parent = bone_objects["Spine"]
+    bone_objects["Neck"].parent = bone_objects["Chest"]
+    
+    # Left Arm hierarchy
+    bone_objects["LeftShoulder"].parent = bone_objects["Chest"]
+    bone_objects["LeftArm"].parent = bone_objects["LeftShoulder"]
+    bone_objects["LeftForeArm"].parent = bone_objects["LeftArm"]
+    bone_objects["LeftHand"].parent = bone_objects["LeftForeArm"]
+    
+    # Right Arm hierarchy
+    bone_objects["RightShoulder"].parent = bone_objects["Chest"]
+    bone_objects["RightArm"].parent = bone_objects["RightShoulder"]
+    bone_objects["RightForeArm"].parent = bone_objects["RightArm"]
+    bone_objects["RightHand"].parent = bone_objects["RightForeArm"]
+    
+    # Left Leg hierarchy
+    bone_objects["LeftUpLeg"].parent = bone_objects["Hips"]
+    bone_objects["LeftLeg"].parent = bone_objects["LeftUpLeg"]
+    bone_objects["LeftFoot"].parent = bone_objects["LeftLeg"]
+    
+    # Right Leg hierarchy
+    bone_objects["RightUpLeg"].parent = bone_objects["Hips"]
+    bone_objects["RightLeg"].parent = bone_objects["RightUpLeg"]
+    bone_objects["RightFoot"].parent = bone_objects["RightLeg"]
+    
+    bpy.ops.object.mode_set(mode='OBJECT')
+    
+    # 7. Parent mesh to Armature using a Voxel Proxy for 100% reliable weighting
+    print("[Blender Rigging] Creating watertight Voxel Proxy mesh for auto-weighting calculation...")
+    
+    # Create a duplicate of the mesh to act as proxy
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_obj
+    bpy.ops.object.duplicate(linked=False)
+    proxy_obj = bpy.context.active_object
+    proxy_obj.name = "VoxelProxyMesh"
+    
+    # Apply Voxel Remesh on the proxy to make it a single manifold shell
+    bbox_size = max(proxy_obj.dimensions)
+    voxel_size = max(0.003, bbox_size / 150.0)
+    print(f"[Blender Rigging] Remeshing proxy with voxel size: {voxel_size:.4f}")
+    
+    try:
+        proxy_obj.data.remesh_voxel_size = voxel_size
+        bpy.ops.object.voxel_remesh()
+        print("[Blender Rigging] ✓ Voxel Remesh completed on proxy.")
+    except Exception as re_err:
+        print(f"[Blender Rigging] Voxel Remesh failed on proxy: {re_err}")
+        
+    # Parent the proxy mesh to the armature with automatic weights
+    bpy.ops.object.select_all(action='DESELECT')
+    proxy_obj.select_set(True)
+    rig_obj.select_set(True)
+    bpy.context.view_layer.objects.active = rig_obj
+    
+    proxy_rig_success = False
+    try:
+        bpy.ops.object.parent_set(type='ARMATURE_AUTO')
+        print("[Blender Rigging] ✓ Parented Voxel Proxy with automatic weights successfully!")
+        proxy_rig_success = True
+    except Exception as parent_err:
+        print(f"[Blender Rigging] Error: Auto weighting failed even on proxy: {parent_err}")
+        
+    if proxy_rig_success:
+        # Transfer the weights from the proxy mesh to the original mesh_obj
+        print("[Blender Rigging] Transferring skin weights from Voxel Proxy to original detailed mesh...")
+        
+        # Parent to Armature with empty groups (creates all vertex groups named after bones)
+        # Armature MUST be the active object for this parenting to work and create vertex groups
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        rig_obj.select_set(True)
+        bpy.context.view_layer.objects.active = rig_obj
+        bpy.ops.object.parent_set(type='ARMATURE_NAME')
+        
+        # Now make mesh_obj the active object to configure and apply the modifier
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        bpy.context.view_layer.objects.active = mesh_obj
+        
+        # Create Data Transfer modifier on original mesh
+        dt_mod = mesh_obj.modifiers.new(name="WeightTransfer", type='DATA_TRANSFER')
+        dt_mod.object = proxy_obj
+        dt_mod.use_vert_data = True
+        dt_mod.data_types_verts = {'VGROUP_WEIGHTS'}
+        dt_mod.vert_mapping = 'POLYINTERP_NEAREST'
+        
+        # Generate data layout (ensures vertex groups are populated)
+        bpy.ops.object.datalayout_transfer(modifier="WeightTransfer")
+        
+        # Apply the Data Transfer modifier to bake the weights into the mesh_obj's vertex groups
+        bpy.ops.object.modifier_apply(modifier="WeightTransfer")
+        print("[Blender Rigging] ✓ Weights transferred successfully.")
+        
+        # Delete the proxy object
+        bpy.ops.object.select_all(action='DESELECT')
+        proxy_obj.select_set(True)
+        bpy.ops.object.delete()
+        print("[Blender Rigging] Deleted temporary Voxel Proxy.")
+    else:
+        # Fallback to direct parenting with empty weights if proxy rigging failed
+        print("[Blender Rigging] Falling back to default empty weights parenting on original mesh...")
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        rig_obj.select_set(True)
+        bpy.context.view_layer.objects.active = rig_obj
+        bpy.ops.object.parent_set(type='ARMATURE')
+            
+    # 8. Export rigged model to FBX
+    print(f"[Blender Rigging] Exporting rigged model to FBX: {output_path}")
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    rig_obj.select_set(True)
+    
+    try:
+        bpy.ops.export_scene.fbx(
+            filepath=output_path,
+            use_selection=True,
+            path_mode='COPY',
+            embed_textures=True,
+            add_leaf_bones=False
+        )
+        print("[Blender Rigging] ✓ Rigged FBX exported successfully.")
+    except Exception as fbx_err:
+        print(f"[Blender Rigging] Error: FBX export failed: {fbx_err}")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    try:
+        args_idx = sys.argv.index("--")
+        args = sys.argv[args_idx + 1:]
+    except ValueError:
+        args = []
+        
+    if len(args) < 2:
+        print("[Error] Usage: blender --background --python rig_mesh_blender.py -- <input_glb> <output_fbx>")
+        sys.exit(1)
+        
+    run_blender_rigging(args[0], args[1])

rig_quadruped_blender.py

@@ -0,0 +1,260 @@
+import sys
+import os
+
+try:
+    import bpy
+    import mathutils
+except ImportError:
+    print("[Error] This script must be run inside Blender's python environment.")
+    sys.exit(1)
+
+def run_blender_rigging(input_path, output_path):
+    print(f"[Blender Rigging] Loading model: {input_path}")
+    
+    # 1. Reset scene
+    bpy.ops.wm.read_factory_settings(use_empty=True)
+    
+    # 2. Import GLB
+    bpy.ops.import_scene.gltf(filepath=input_path)
+    
+    # 3. Find all mesh objects and join them into a single character mesh
+    mesh_objs = [obj for obj in bpy.context.scene.objects if obj.type == 'MESH']
+    if not mesh_objs:
+        print("[Error] No mesh found in imported GLTF.")
+        sys.exit(1)
+        
+    print(f"[Blender Rigging] Found {len(mesh_objs)} meshes. Joining them...")
+    bpy.ops.object.select_all(action='DESELECT')
+    for obj in mesh_objs:
+        obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_objs[0]
+    bpy.ops.object.join()
+    
+    mesh_obj = bpy.context.active_object
+    mesh_obj.name = "CharacterMesh"
+    print(f"[Blender Rigging] Joined mesh: {mesh_obj.name}")
+    
+    # Ensure transforms are applied so bounding box calculations are correct
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_obj
+    bpy.ops.object.transform_apply(location=True, rotation=True, scale=True)
+    
+    # 4. Calculate bounding box
+    bbox = [mesh_obj.matrix_world @ mathutils.Vector(corner) for corner in mesh_obj.bound_box]
+    min_x = min([v.x for v in bbox])
+    max_x = max([v.x for v in bbox])
+    min_y = min([v.y for v in bbox])
+    max_y = max([v.y for v in bbox])
+    min_z = min([v.z for v in bbox])
+    max_z = max([v.z for v in bbox])
+    
+    width = max_x - min_x
+    depth = max_y - min_y
+    height = max_z - min_z
+    center_x = (min_x + max_x) / 2.0
+    center_y = (min_y + max_y) / 2.0
+    
+    print(f"[Blender Rigging] Mesh Bounds: Height={height:.4f}, Width={width:.4f}, Depth={depth:.4f}")
+    print(f"[Blender Rigging] Mesh Center: X={center_x:.4f}, Y={center_y:.4f}, Min Z={min_z:.4f}")
+    
+    # 5. Define relative quadruped bone joints
+    # positive Y in Blender goes back, negative Y goes front
+    z_spine = min_z + height * 0.65
+    z_head = min_z + height * 0.85
+    z_neck = min_z + height * 0.75
+    z_rear_hip = min_z + height * 0.60
+    z_rear_knee = min_z + height * 0.35
+    z_rear_ankle = min_z + height * 0.12
+    z_rear_foot = min_z + height * 0.02
+    
+    z_front_shoulder = min_z + height * 0.62
+    z_front_elbow = min_z + height * 0.35
+    z_front_wrist = min_z + height * 0.12
+    z_front_foot = min_z + height * 0.02
+    
+    y_rear = center_y + depth * 0.28
+    y_front = center_y - depth * 0.25
+    y_head = center_y - depth * 0.42
+    y_neck = center_y - depth * 0.30
+    y_tail_base = center_y + depth * 0.32
+    y_tail_tip = center_y + depth * 0.55
+    
+    x_offset_rear = width * 0.22
+    x_offset_front = width * 0.22
+    
+    x_rear_l = center_x - x_offset_rear
+    x_rear_r = center_x + x_offset_rear
+    x_front_l = center_x - x_offset_front
+    x_front_r = center_x + x_offset_front
+    
+    joints = {
+        # Spine & Head
+        "Pelvis": ((center_x, y_rear, z_spine), (center_x, center_y, z_spine)),
+        "Spine": ((center_x, center_y, z_spine), (center_x, y_front, z_spine)),
+        "Neck": ((center_x, y_front, z_spine), (center_x, y_neck, z_neck)),
+        "Head": ((center_x, y_neck, z_neck), (center_x, y_head, z_head)),
+        "Tail": ((center_x, y_tail_base, z_spine), (center_x, y_tail_tip, z_spine - height * 0.1)),
+        
+        # Left Rear Leg
+        "LeftUpLegRear": ((x_rear_l, y_rear, z_rear_hip), (x_rear_l, y_rear, z_rear_knee)),
+        "LeftLegRear": ((x_rear_l, y_rear, z_rear_knee), (x_rear_l, y_rear, z_rear_ankle)),
+        "LeftFootRear": ((x_rear_l, y_rear, z_rear_ankle), (x_rear_l, y_rear - depth * 0.05, z_rear_foot)),
+        
+        # Right Rear Leg
+        "RightUpLegRear": ((x_rear_r, y_rear, z_rear_hip), (x_rear_r, y_rear, z_rear_knee)),
+        "RightLegRear": ((x_rear_r, y_rear, z_rear_knee), (x_rear_r, y_rear, z_rear_ankle)),
+        "RightFootRear": ((x_rear_r, y_rear, z_rear_ankle), (x_rear_r, y_rear - depth * 0.05, z_rear_foot)),
+        
+        # Left Front Leg
+        "LeftUpLegFront": ((x_front_l, y_front, z_front_shoulder), (x_front_l, y_front, z_front_elbow)),
+        "LeftLegFront": ((x_front_l, y_front, z_front_elbow), (x_front_l, y_front, z_front_wrist)),
+        "LeftFootFront": ((x_front_l, y_front, z_front_wrist), (x_front_l, y_front - depth * 0.05, z_front_foot)),
+        
+        # Right Front Leg
+        "RightUpLegFront": ((x_front_r, y_front, z_front_shoulder), (x_front_r, y_front, z_front_elbow)),
+        "RightLegFront": ((x_front_r, y_front, z_front_elbow), (x_front_r, y_front, z_front_wrist)),
+        "RightFootFront": ((x_front_r, y_front, z_front_wrist), (x_front_r, y_front - depth * 0.05, z_front_foot))
+    }
+    
+    # 6. Create Armature
+    print("[Blender Rigging] Creating Armature...")
+    arm_data = bpy.data.armatures.new(name="QuadrupedArmature")
+    rig_obj = bpy.data.objects.new(name="QuadrupedRig", object_data=arm_data)
+    bpy.context.scene.collection.objects.link(rig_obj)
+    
+    bpy.context.view_layer.objects.active = rig_obj
+    bpy.ops.object.mode_set(mode='EDIT')
+    
+    edit_bones = arm_data.edit_bones
+    bone_objects = {}
+    for name, (head, tail) in joints.items():
+        bone = edit_bones.new(name)
+        bone.head = head
+        bone.tail = tail
+        bone_objects[name] = bone
+        
+    # Setup hierarchy
+    bone_objects["Spine"].parent = bone_objects["Pelvis"]
+    bone_objects["Neck"].parent = bone_objects["Spine"]
+    bone_objects["Head"].parent = bone_objects["Neck"]
+    bone_objects["Tail"].parent = bone_objects["Pelvis"]
+    
+    # Rear legs hierarchy
+    bone_objects["LeftUpLegRear"].parent = bone_objects["Pelvis"]
+    bone_objects["LeftLegRear"].parent = bone_objects["LeftUpLegRear"]
+    bone_objects["LeftFootRear"].parent = bone_objects["LeftLegRear"]
+    
+    bone_objects["RightUpLegRear"].parent = bone_objects["Pelvis"]
+    bone_objects["RightLegRear"].parent = bone_objects["RightUpLegRear"]
+    bone_objects["RightFootRear"].parent = bone_objects["RightLegRear"]
+    
+    # Front legs hierarchy
+    bone_objects["LeftUpLegFront"].parent = bone_objects["Spine"]
+    bone_objects["LeftLegFront"].parent = bone_objects["LeftUpLegFront"]
+    bone_objects["LeftFootFront"].parent = bone_objects["LeftLegFront"]
+    
+    bone_objects["RightUpLegFront"].parent = bone_objects["Spine"]
+    bone_objects["RightLegFront"].parent = bone_objects["RightUpLegFront"]
+    bone_objects["RightFootFront"].parent = bone_objects["RightLegFront"]
+    
+    bpy.ops.object.mode_set(mode='OBJECT')
+    
+    # 7. Parent mesh to Armature using a Voxel Proxy for 100% reliable weighting
+    print("[Blender Rigging] Creating watertight Voxel Proxy mesh for auto-weighting calculation...")
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    bpy.context.view_layer.objects.active = mesh_obj
+    bpy.ops.object.duplicate(linked=False)
+    proxy_obj = bpy.context.active_object
+    proxy_obj.name = "VoxelProxyMesh"
+    
+    bbox_size = max(proxy_obj.dimensions)
+    voxel_size = max(0.003, bbox_size / 150.0)
+    print(f"[Blender Rigging] Remeshing proxy with voxel size: {voxel_size:.4f}")
+    
+    try:
+        proxy_obj.data.remesh_voxel_size = voxel_size
+        bpy.ops.object.voxel_remesh()
+        print("[Blender Rigging] ✓ Voxel Remesh completed on proxy.")
+    except Exception as re_err:
+        print(f"[Blender Rigging] Voxel Remesh failed on proxy: {re_err}")
+        
+    bpy.ops.object.select_all(action='DESELECT')
+    proxy_obj.select_set(True)
+    rig_obj.select_set(True)
+    bpy.context.view_layer.objects.active = rig_obj
+    
+    proxy_rig_success = False
+    try:
+        bpy.ops.object.parent_set(type='ARMATURE_AUTO')
+        print("[Blender Rigging] ✓ Parented Voxel Proxy with automatic weights successfully!")
+        proxy_rig_success = True
+    except Exception as parent_err:
+        print(f"[Blender Rigging] Error: Auto weighting failed even on proxy: {parent_err}")
+        
+    if proxy_rig_success:
+        print("[Blender Rigging] Transferring skin weights from Voxel Proxy to original detailed mesh...")
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        rig_obj.select_set(True)
+        bpy.context.view_layer.objects.active = rig_obj
+        bpy.ops.object.parent_set(type='ARMATURE_NAME')
+        
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        bpy.context.view_layer.objects.active = mesh_obj
+        
+        dt_mod = mesh_obj.modifiers.new(name="WeightTransfer", type='DATA_TRANSFER')
+        dt_mod.object = proxy_obj
+        dt_mod.use_vert_data = True
+        dt_mod.data_types_verts = {'VGROUP_WEIGHTS'}
+        dt_mod.vert_mapping = 'POLYINTERP_NEAREST'
+        
+        bpy.ops.object.datalayout_transfer(modifier="WeightTransfer")
+        bpy.ops.object.modifier_apply(modifier="WeightTransfer")
+        print("[Blender Rigging] ✓ Weights transferred successfully.")
+        
+        bpy.ops.object.select_all(action='DESELECT')
+        proxy_obj.select_set(True)
+        bpy.ops.object.delete()
+        print("[Blender Rigging] Deleted temporary Voxel Proxy.")
+    else:
+        print("[Blender Rigging] Falling back to default empty weights parenting on original mesh...")
+        bpy.ops.object.select_all(action='DESELECT')
+        mesh_obj.select_set(True)
+        rig_obj.select_set(True)
+        bpy.context.view_layer.objects.active = rig_obj
+        bpy.ops.object.parent_set(type='ARMATURE')
+            
+    # 8. Export rigged model to FBX
+    print(f"[Blender Rigging] Exporting rigged model to FBX: {output_path}")
+    bpy.ops.object.select_all(action='DESELECT')
+    mesh_obj.select_set(True)
+    rig_obj.select_set(True)
+    
+    try:
+        bpy.ops.export_scene.fbx(
+            filepath=output_path,
+            use_selection=True,
+            path_mode='COPY',
+            embed_textures=True,
+            add_leaf_bones=False
+        )
+        print("[Blender Rigging] ✓ Rigged FBX exported successfully.")
+    except Exception as fbx_err:
+        print(f"[Blender Rigging] Error: FBX export failed: {fbx_err}")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    try:
+        args_idx = sys.argv.index("--")
+        args = sys.argv[args_idx + 1:]
+    except ValueError:
+        args = []
+        
+    if len(args) < 2:
+        print("[Error] Usage: blender --background --python rig_quadruped_blender.py -- <input_glb> <output_fbx>")
+        sys.exit(1)
+        
+    run_blender_rigging(args[0], args[1])

server.py

@@ -0,0 +1,676 @@
+import os
+import sys
+import json
+import base64
+import tempfile
+import shutil
+import time
+from http.server import SimpleHTTPRequestHandler, HTTPServer
+from gradio_client import Client, handle_file
+
+if hasattr(sys.stdout, "reconfigure"):
+    sys.stdout.reconfigure(encoding="utf-8")
+
+# Simple environment loader to avoid external dependencies
+def load_dotenv():
+    env_path = '.env'
+    if os.path.exists(env_path):
+        print("[Backend] Loading configuration from .env...")
+        with open(env_path, 'r', encoding='utf-8') as f:
+            for line in f:
+                line = line.strip()
+                if line and not line.startswith('#') and '=' in line:
+                    key, val = line.split('=', 1)
+                    os.environ[key.strip()] = val.strip()
+
+# Initialize configuration
+load_dotenv()
+HF_TOKEN = os.environ.get('HF_TOKEN', '')
+HF_SPACE = os.environ.get('HF_SPACE', 'LogicalTrue/TRELLIS.2')
+PORT = int(os.environ.get('PORT', '8000'))
+
+if not HF_TOKEN or HF_TOKEN == 'PON_TU_TOKEN_AQUI':
+    print("\n[⚠️ WARNING] HF_TOKEN is not configured or has default placeholder value in .env file.")
+    print("Please open the '.env' file and insert your Hugging Face Token (hf_...) to access your private Space.\n")
+
+class F23DHTTPRequestHandler(SimpleHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
+        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
+        self.send_header('Pragma', 'no-cache')
+        self.send_header('Expires', '0')
+        super().end_headers()
+
+    def do_OPTIONS(self):
+        self.send_response(200, "OK")
+        self.end_headers()
+
+    def do_GET(self):
+        if self.path == '/api/gallery':
+            self.handle_get_gallery()
+        else:
+            super().do_GET()
+
+    def do_POST(self):
+        if self.path == '/api/generate-3d':
+            self.handle_generate_3d()
+        elif self.path == '/api/optimize-3d':
+            self.handle_optimize_3d()
+        elif self.path == '/api/rig-3d':
+            self.handle_rig_3d()
+        elif self.path == '/api/generate-2d':
+            self.handle_generate_2d()
+        elif self.path == '/api/delete-gallery':
+            self.handle_delete_gallery()
+        else:
+            self.send_error(404, "Endpoint not found")
+
+    def handle_generate_3d(self):
+        try:
+            load_dotenv() # Reload env dynamically to pick up any changes (like BLENDER_PATH) without restarting
+            content_length = int(self.headers['Content-Length'])
+            post_data = self.rfile.read(content_length)
+            params = json.loads(post_data.decode('utf-8'))
+
+            version = params.get('version', 'v2')
+            image_data_b64 = params.get('image') # Base64 encoded image
+            hf_token = params.get('token', '')
+            seed = float(params.get('seed', 0))
+            resolution = params.get('resolution', '1024')
+            decimation_target = int(params.get('decimation_target', 300000))
+            texture_size = int(params.get('texture_size', 2048))
+            ss_guidance = float(params.get('ss_guidance', 7.5))
+            ss_steps = int(params.get('ss_steps', 12))
+            slat_guidance = float(params.get('slat_guidance', 3.0))
+            slat_steps = int(params.get('slat_steps', 12))
+            auto_optimize = params.get('auto_optimize', False)
+            quad_target_faces = int(params.get('quad_target_faces', 60000))
+            remesh_method = params.get('remeshMethod', 'tris_to_quads')
+
+            if not image_data_b64:
+                self.send_error_response(400, "No image data provided")
+                return
+
+            # Extract base64 binary
+            if ',' in image_data_b64:
+                image_data_b64 = image_data_b64.split(',')[1]
+            image_bytes = base64.b64decode(image_data_b64)
+
+            # Save to temporary file
+            with tempfile.NamedTemporaryFile(delete=False, suffix='.png') as temp_img:
+                temp_img.write(image_bytes)
+                temp_img_path = temp_img.name
+
+            # Setup Connection options using request token (takes precedence) or environment token fallback
+            connect_options = {}
+            current_token = os.environ.get('HF_TOKEN', '')
+            token_to_use = hf_token if hf_token else (current_token if (current_token and current_token != 'PON_TU_TOKEN_AQUI') else '')
+            if token_to_use:
+                print(f"[Backend] Authenticating with HF Token (ends with ...{token_to_use[-6:] if len(token_to_use) > 6 else ''})")
+                connect_options['token'] = token_to_use
+            else:
+                print("[Backend] WARNING: No HF Token provided. Connecting anonymously (shared IP quota).")
+
+            client = None
+            try:
+                # We use the user's private Space as configured in .env
+                target_space = os.environ.get('HF_SPACE', 'LogicalTrue/TRELLIS.2')
+                print(f"[Backend] Connecting to Private Hugging Face Space: '{target_space}'")
+                
+                client = Client(target_space, **connect_options)
+                
+                # Initialize remote session (mandatory for TRELLIS to create session directories)
+                try:
+                    print("[Backend] Initializing remote session...")
+                    client.predict(api_name="/start_session")
+                    print("[Backend] Remote session initialized successfully.")
+                except Exception as se:
+                    print(f"[Backend] Remote session initialization warning: {se}")
+                
+                # Defensive Preprocessing
+                preprocessed_img_path = temp_img_path
+                try:
+                    print("[Backend] Step 0: Preprocessing image...")
+                    preprocess_result = client.predict(handle_file(temp_img_path), api_name="/preprocess_image")
+                    path_val = preprocess_result.get('path') if isinstance(preprocess_result, dict) else preprocess_result
+                    if path_val:
+                        preprocessed_img_path = path_val
+                        print(f"[Backend] Preprocess successful: {preprocessed_img_path}")
+                except Exception as pe:
+                    print(f"[Backend] Preprocessing failed: {pe}. Using raw image path instead.")
+    
+                print("[Backend] Step 1: Converting image to 3D representation...")
+                job = client.submit(
+                    handle_file(preprocessed_img_path), # wrapped in handle_file for schema validation
+                    seed,
+                    resolution,         # resolution
+                    ss_guidance,
+                    0.7,                # ss_guidance_rescale
+                    ss_steps,
+                    5.0,                # ss_rescale_t
+                    slat_guidance,      # shape_slat_guidance_strength
+                    0.5,                # shape_slat_guidance_rescale
+                    slat_steps,         # shape_slat_sampling_steps
+                    3.0,                # shape_slat_rescale_t
+                    1.0,                # tex_slat_guidance_strength
+                    0.0,                # tex_slat_guidance_rescale
+                    12,                 # tex_slat_sampling_steps
+                    3.0,                # tex_slat_rescale_t
+                    api_name="/image_to_3d"
+                )
+                job.result() # Wait for step 1 to complete in background task
+                
+                print("[Backend] Step 2: Extracting PBR textures and GLB file...")
+                extract_job = client.submit(
+                    decimation_target,  # decimation_target
+                    texture_size,       # texture_size
+                    api_name="/extract_glb"
+                )
+                extract_result = extract_job.result()
+                
+                # Check data structure in result object
+                if hasattr(extract_result, 'data') and extract_result.data and len(extract_result.data) >= 2:
+                    gltf_file = extract_result.data[0]
+                    glb_file = extract_result.data[1]
+                elif isinstance(extract_result, (list, tuple)) and len(extract_result) >= 2:
+                    gltf_file = extract_result[0]
+                    glb_file = extract_result[1]
+                else:
+                    print(f"[Backend] Extract result: {extract_result}")
+                    raise Exception("Private Space extract_glb did not return files in expected format")
+                
+                # Define local output target for serving files statically
+                output_dir = os.path.join(os.path.dirname(__file__), "generated_models")
+                os.makedirs(output_dir, exist_ok=True)
+    
+                # Extract local paths
+                gltf_local_path = gltf_file.get('path') if isinstance(gltf_file, dict) else (gltf_file if isinstance(gltf_file, str) else None)
+                glb_local_path = glb_file.get('path') if isinstance(glb_file, dict) else (glb_file if isinstance(glb_file, str) else None)
+                
+                # Copy GLB to static directory to make it accessible to browser
+                import time
+                filename = f"model_{int(time.time())}.glb"
+                dest_path = os.path.join(output_dir, filename)
+    
+                if glb_local_path and os.path.exists(glb_local_path):
+                    shutil.copy(glb_local_path, dest_path)
+                    print(f"[Backend] Saved generated model to: {dest_path}")
+                    
+                    # Automated background Blender quad-remeshing post-processing
+                    if auto_optimize:
+                        blender_path = os.environ.get('BLENDER_PATH', '')
+                        if not blender_path or not os.path.exists(blender_path):
+                            blender_path = shutil.which("blender") or ""
+                        if blender_path and os.path.exists(blender_path):
+                            print(f"[Backend] Auto-optimizing mesh in background with Blender...")
+                            import subprocess
+                            temp_dest_path = dest_path.replace(".glb", "_dirty.glb")
+                            try:
+                                os.rename(dest_path, temp_dest_path)
+                                script_path = os.path.join(os.path.dirname(__file__), "clean_mesh_blender.py")
+                                cmd = [blender_path, "--background", "--python", script_path, "--", temp_dest_path, dest_path, str(quad_target_faces), remesh_method]
+                                print(f"[Backend] Executing: {' '.join(cmd)}")
+                                result = subprocess.run(cmd, capture_output=True, text=True)
+                                
+                                if result.returncode == 0 and os.path.exists(dest_path):
+                                    print(f"[Backend] ✓ Mesh optimized and remeshed to quads successfully!")
+                                    print(f"[Backend] Blender Output:\n{result.stdout}")
+                                    # Keep the raw mesh on disk so the user can re-run optimization locally
+                                    # if os.path.exists(temp_dest_path):
+                                    #     os.remove(temp_dest_path)
+                                else:
+                                    print(f"[Backend] ✗ Blender mesh optimization failed (exit code {result.returncode})")
+                                    print(f"[Backend] Blender Output:\n{result.stdout}\n{result.stderr}")
+                                    if os.path.exists(temp_dest_path):
+                                        if os.path.exists(dest_path):
+                                            os.remove(dest_path)
+                                        os.rename(temp_dest_path, dest_path)
+                            except Exception as ex:
+                                print(f"[Backend] ✗ Error running Blender post-processing: {ex}")
+                                if os.path.exists(temp_dest_path):
+                                    if os.path.exists(dest_path):
+                                        os.remove(dest_path)
+                                    os.rename(temp_dest_path, dest_path)
+                        else:
+                            print("[Backend] BLENDER_PATH is not configured or executable not found. Skipping quad-remesh optimization.")
+                    else:
+                        print("[Backend] Auto-optimization not requested by client. Skipping quad-remesh.")
+
+                    gltf_url = f"/generated_models/{filename}"
+                    glb_url = f"/generated_models/{filename}"
+                    fbx_filename = filename.replace(".glb", ".fbx")
+                    fbx_url = f"/generated_models/{fbx_filename}" if os.path.exists(os.path.join(output_dir, fbx_filename)) else None
+                else:
+                    gltf_url = gltf_file.get('url') if isinstance(gltf_file, dict) else gltf_local_path
+                    glb_url = glb_file.get('url') if isinstance(glb_file, dict) else glb_local_path
+                    fbx_url = None
+    
+                response_data = {
+                    "gltfUrl": gltf_url,
+                    "glbUrl": glb_url,
+                    "fbxUrl": fbx_url
+                }
+    
+                # Clean up temp file
+                try:
+                    os.unlink(temp_img_path)
+                except:
+                    pass
+    
+                # Respond with success
+                self.send_response(200)
+                self.send_header('Content-Type', 'application/json')
+                self.end_headers()
+                self.wfile.write(json.dumps(response_data).encode('utf-8'))
+            finally:
+                if client:
+                    try:
+                        client.close()
+                        print("[Backend] Private Space 3D Gradio client closed.")
+                    except Exception as ce:
+                        print(f"[Backend] Warning: could not close 3D gradio client: {ce}")
+
+        except Exception as e:
+            print(f"[Backend] Error during 3D generation: {e}")
+            self.send_error_response(500, str(e))
+
+    def handle_optimize_3d(self):
+        try:
+            load_dotenv()
+            content_length = int(self.headers['Content-Length'])
+            post_data = self.rfile.read(content_length)
+            params = json.loads(post_data.decode('utf-8'))
+
+            model_url = params.get('modelUrl', '') # e.g. "/generated_models/model_1782268665.glb"
+            quad_target_faces = int(params.get('quad_target_faces', 60000))
+            remesh_method = params.get('remeshMethod', 'tris_to_quads')
+            if not model_url:
+                self.send_error_response(400, "No modelUrl provided")
+                return
+
+            filename = os.path.basename(model_url)
+            output_dir = os.path.join(os.path.dirname(__file__), "generated_models")
+            dest_path = os.path.join(output_dir, filename)
+
+            if not os.path.exists(dest_path):
+                self.send_error_response(404, f"Model file {filename} not found")
+                return
+
+            # Output to a new file to keep the source mesh intact and bypass browser caching
+            clean_filename = filename.replace(".glb", "_clean.glb")
+            if "_clean" in filename:
+                clean_filename = filename
+            
+            clean_dest_path = os.path.join(output_dir, clean_filename)
+
+            blender_path = os.environ.get('BLENDER_PATH', '')
+            if not blender_path or not os.path.exists(blender_path):
+                blender_path = shutil.which("blender") or ""
+            if blender_path and os.path.exists(blender_path):
+                print(f"[Backend] Local optimization requested. Running Blender...")
+                import subprocess
+                script_path = os.path.join(os.path.dirname(__file__), "clean_mesh_blender.py")
+                cmd = [blender_path, "--background", "--python", script_path, "--", dest_path, clean_dest_path, str(quad_target_faces), remesh_method]
+                print(f"[Backend] Executing: {' '.join(cmd)}")
+                result = subprocess.run(cmd, capture_output=True, text=True)
+                
+                print(f"[Backend] Blender Output:\n{result.stdout}")
+                if result.stderr:
+                    print(f"[Backend] Blender Errors:\n{result.stderr}")
+
+                fbx_filename = clean_filename.replace(".glb", ".fbx")
+                fbx_url = f"/generated_models/{fbx_filename}" if os.path.exists(os.path.join(output_dir, fbx_filename)) else None
+
+                if result.returncode == 0 and os.path.exists(clean_dest_path):
+                    response_data = {
+                        "success": True,
+                        "glbUrl": f"/generated_models/{clean_filename}",
+                        "gltfUrl": f"/generated_models/{clean_filename}",
+                        "fbxUrl": fbx_url
+                    }
+                else:
+                    raise Exception(f"Blender failed with exit status {result.returncode}")
+            else:
+                raise Exception("BLENDER_PATH is not configured or executable not found locally.")
+
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/json')
+            self.end_headers()
+            self.wfile.write(json.dumps(response_data).encode('utf-8'))
+
+        except Exception as e:
+            print(f"[Backend] Error during 3D optimization: {e}")
+            self.send_error_response(500, str(e))
+
+    def handle_rig_3d(self):
+        try:
+            load_dotenv()
+            content_length = int(self.headers['Content-Length'])
+            post_data = self.rfile.read(content_length)
+            params = json.loads(post_data.decode('utf-8'))
+
+            model_url = params.get('modelUrl', '') # e.g. "/generated_models/model_1782268665.glb"
+            rig_method = params.get('rigMethod', 'ai')
+            hf_token = params.get('token', '')
+
+            if not model_url:
+                self.send_error_response(400, "No modelUrl provided")
+                return
+
+            filename = os.path.basename(model_url)
+            output_dir = os.path.join(os.path.dirname(__file__), "generated_models")
+            dest_path = os.path.join(output_dir, filename)
+
+            if not os.path.exists(dest_path):
+                self.send_error_response(404, f"Model file {filename} not found")
+                return
+
+            # Rigging target paths
+            base_name, _ = os.path.splitext(filename)
+            rigged_fbx_filename = f"{base_name}_rigged.fbx"
+            rigged_fbx_path = os.path.join(output_dir, rigged_fbx_filename)
+
+            if rig_method == 'ai':
+                rigged_glb_filename = f"{base_name}_rigged.glb"
+                rigged_glb_path = os.path.join(output_dir, rigged_glb_filename)
+                
+                print(f"[Backend] AI Rigging requested via Hugging Face...")
+                # Get the correct token
+                current_token = os.environ.get('HF_TOKEN', '')
+                # Clean token from spaces/quotes
+                hf_token_clean = str(hf_token).strip() if hf_token else ''
+                if hf_token_clean in ('null', 'undefined'):
+                    hf_token_clean = ''
+                
+                token_to_use = hf_token_clean if hf_token_clean else (current_token if (current_token and current_token != 'PON_TU_TOKEN_AQUI') else '')
+                token_to_use = token_to_use.strip()
+                
+                print(f"[Backend] Client token length: {len(hf_token_clean)}, Env token length: {len(current_token)}, Token to use length: {len(token_to_use)}")
+                
+                connect_options = {}
+                if token_to_use:
+                    connect_options['token'] = token_to_use
+                
+                # UniRig API call
+                from gradio_client import Client, handle_file
+                
+                print(f"[Backend] Connecting to 'LogicalTrue/Unirig'...")
+                client = Client("LogicalTrue/Unirig", **connect_options)
+                
+                print(f"[Backend] Submitting {filename} to UniRig...")
+                res_path = client.predict(
+                    handle_file(dest_path),  # archivo_3d
+                    12345,                  # seed
+                    api_name="/rig_mesh"
+                )
+                
+                if res_path and os.path.exists(res_path):
+                    shutil.copy(res_path, rigged_glb_path)
+                    print(f"[Backend] ✓ AI Rigging completed successfully. Saved to: {rigged_glb_path}")
+                    response_data = {
+                        "success": True,
+                        "riggedFbxUrl": f"/generated_models/{rigged_glb_filename}"
+                    }
+                else:
+                    raise Exception("AI Rigging failed: could not retrieve the generated rigged GLB model from Hugging Face Space.")
+            else:
+                # Local procedural rigging using Blender
+                blender_path = os.environ.get('BLENDER_PATH', '')
+                if not blender_path or not os.path.exists(blender_path):
+                    blender_path = shutil.which("blender") or ""
+                if blender_path and os.path.exists(blender_path):
+                    script_name = "rig_quadruped_blender.py" if rig_method == "local_quadruped" else "rig_mesh_blender.py"
+                    print(f"[Backend] Local procedural rigging ({rig_method}) requested. Running Blender with {script_name}...")
+                    import subprocess
+                    script_path = os.path.join(os.path.dirname(__file__), script_name)
+                    cmd = [blender_path, "--background", "--python", script_path, "--", dest_path, rigged_fbx_path]
+                    print(f"[Backend] Executing: {' '.join(cmd)}")
+                    result = subprocess.run(cmd, capture_output=True, text=True)
+                    
+                    print(f"[Backend] Blender Output:\n{result.stdout}")
+                    if result.stderr:
+                        print(f"[Backend] Blender Errors:\n{result.stderr}")
+
+                    if result.returncode == 0 and os.path.exists(rigged_fbx_path):
+                        response_data = {
+                            "success": True,
+                            "riggedFbxUrl": f"/generated_models/{rigged_fbx_filename}"
+                        }
+                    else:
+                        raise Exception(f"Blender rigging failed with exit status {result.returncode}")
+                else:
+                    raise Exception("BLENDER_PATH is not configured or executable not found locally.")
+
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/json')
+            self.end_headers()
+            self.wfile.write(json.dumps(response_data).encode('utf-8'))
+
+        except Exception as e:
+            print(f"[Backend] Error during rigging: {e}")
+            self.send_error_response(500, str(e))
+
+    def handle_generate_2d(self):
+        try:
+            content_length = int(self.headers['Content-Length'])
+            post_data = self.rfile.read(content_length)
+            params = json.loads(post_data.decode('utf-8'))
+
+            prompt = params.get('prompt', '')
+            requested_model = params.get('model', 'black-forest-labs/FLUX.1-schnell')
+            hf_token = params.get('token', '')
+
+            if not prompt:
+                self.send_error_response(400, "No prompt provided")
+                return
+
+            # Determine token to use (prioritize hf_token from client)
+            token_to_use = hf_token if hf_token else (HF_TOKEN if (HF_TOKEN and HF_TOKEN != 'PON_TU_TOKEN_AQUI') else '')
+
+            from gradio_client import Client as GradioClient
+            import shutil
+
+            # We use public Gradio Spaces running FLUX on hf.space (unblocked by local SNI firewalls)
+            spaces_to_try = [
+                "black-forest-labs/FLUX.1-schnell",
+                "multimodalart/FLUX.1-schnell"
+            ]
+
+            connect_options = {}
+            if token_to_use:
+                print(f"[Backend 2D] Authenticating with HF Token (ends with ...{token_to_use[-6:] if len(token_to_use) > 6 else ''})")
+                connect_options['token'] = token_to_use
+            else:
+                print("[Backend 2D] WARNING: No HF Token provided. Connecting anonymously.")
+
+            success = False
+            response_data = None
+            last_error = None
+
+            for space_name in spaces_to_try:
+                print(f"[Backend] Attempting 2D generation via Gradio Space: {space_name}")
+                client = None
+                try:
+                    client = GradioClient(space_name, **connect_options)
+                    
+                    # Call FLUX Space inference (standard FLUX Schnell API parameters)
+                    result = client.predict(
+                        prompt=prompt,
+                        seed=0,
+                        randomize_seed=True,
+                        width=1024,
+                        height=1024,
+                        num_inference_steps=4,  # FLUX.1-schnell works with 4 steps
+                        api_name="/infer"
+                    )
+
+                    # Extract local file path from prediction result
+                    if isinstance(result, (list, tuple)) and len(result) > 0:
+                        img_local_path = result[0]
+                    elif isinstance(result, dict) and 'path' in result:
+                        img_local_path = result['path']
+                    else:
+                        img_local_path = result
+
+                    if img_local_path and os.path.exists(img_local_path):
+                        with open(img_local_path, "rb") as img_file:
+                            img_bytes = img_file.read()
+                        
+                        # Save generated 2D image to local disk
+                        images_dir = os.path.join(os.path.dirname(__file__), "generated_images")
+                        os.makedirs(images_dir, exist_ok=True)
+                        img_filename = f"image_{int(time.time())}.png"
+                        img_dest_path = os.path.join(images_dir, img_filename)
+                        with open(img_dest_path, "wb") as f:
+                            f.write(img_bytes)
+                        print(f"[Backend] Saved generated image to: {img_dest_path}")
+
+                        img_b64 = base64.b64encode(img_bytes).decode('utf-8')
+                        response_data = {
+                            "image": f"data:image/png;base64,{img_b64}",
+                            "imageUrl": f"/generated_images/{img_filename}",
+                            "model_used": space_name
+                        }
+                        success = True
+                        break
+                    else:
+                        raise Exception(f"File path returned by Space does not exist: {img_local_path}")
+                except Exception as ex:
+                    print(f"[Backend] Failed generating via Space {space_name}: {ex}")
+                    last_error = str(ex)
+                finally:
+                    if client:
+                        try:
+                            client.close()
+                            print(f"[Backend] Gradio client for {space_name} closed.")
+                        except:
+                            pass
+
+            if success and response_data:
+                self.send_response(200)
+                self.send_header('Content-Type', 'application/json')
+                self.end_headers()
+                self.wfile.write(json.dumps(response_data).encode('utf-8'))
+            else:
+                self.send_error_response(500, f"All FLUX Spaces failed. Last error: {last_error}")
+
+        except Exception as e:
+            print(f"[Backend] Error during 2D generation: {e}")
+            self.send_error_response(500, str(e))
+
+    def handle_get_gallery(self):
+        try:
+            images_dir = os.path.join(os.path.dirname(__file__), "generated_images")
+            models_dir = os.path.join(os.path.dirname(__file__), "generated_models")
+            
+            os.makedirs(images_dir, exist_ok=True)
+            os.makedirs(models_dir, exist_ok=True)
+            
+            items = []
+            
+            # Read 2D images
+            for f in os.listdir(images_dir):
+                if f.endswith(('.png', '.jpg', '.jpeg', '.webp')):
+                    path = os.path.join(images_dir, f)
+                    mtime = os.path.getmtime(path)
+                    items.append({
+                        "name": f,
+                        "type": "image",
+                        "url": f"/generated_images/{f}",
+                        "mtime": mtime
+                    })
+                    
+            # Read 3D models
+            for f in os.listdir(models_dir):
+                if f.endswith('.glb') and not f.endswith('_dirty.glb') and not f.endswith('_rigged.glb'):
+                    path = os.path.join(models_dir, f)
+                    mtime = os.path.getmtime(path)
+                    fbx_filename = f.replace('.glb', '.fbx')
+                    has_fbx = os.path.exists(os.path.join(models_dir, fbx_filename))
+                    items.append({
+                        "name": f,
+                        "type": "model",
+                        "url": f"/generated_models/{f}",
+                        "fbxUrl": f"/generated_models/{fbx_filename}" if has_fbx else None,
+                        "mtime": mtime
+                    })
+            
+            # Sort items by creation time (newest first)
+            items.sort(key=lambda x: x["mtime"], reverse=True)
+            
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/json')
+            self.end_headers()
+            self.wfile.write(json.dumps({"items": items}).encode('utf-8'))
+        except Exception as e:
+            print(f"[Backend] Error getting gallery: {e}")
+            self.send_error_response(500, str(e))
+
+    def handle_delete_gallery(self):
+        try:
+            content_length = int(self.headers['Content-Length'])
+            post_data = self.rfile.read(content_length)
+            params = json.loads(post_data.decode('utf-8'))
+            
+            filename = params.get('name', '')
+            item_type = params.get('type', '')
+            
+            if not filename or not item_type:
+                self.send_error_response(400, "Missing name or type")
+                return
+                
+            if item_type == "image":
+                target_dir = os.path.join(os.path.dirname(__file__), "generated_images")
+            elif item_type == "model":
+                target_dir = os.path.join(os.path.dirname(__file__), "generated_models")
+            else:
+                self.send_error_response(400, "Invalid type")
+                return
+                
+            # Security check: avoid directory traversal
+            clean_name = os.path.basename(filename)
+            file_path = os.path.join(target_dir, clean_name)
+            
+            if os.path.exists(file_path):
+                os.remove(file_path)
+                print(f"[Backend] Deleted file: {file_path}")
+                
+                # If it was a 3D model, clean up associated files (.obj, .mtl, .fbx, _dirty.glb, _texture.png)
+                if item_type == "model" and clean_name.endswith(".glb"):
+                    prefix = clean_name.replace(".glb", "")
+                    for ext in [".obj", ".mtl", ".fbx", "_dirty.glb", "_texture.png", "_rigged.fbx", "_rigged.glb"]:
+                        assoc_file = os.path.join(target_dir, prefix + ext)
+                        if os.path.exists(assoc_file):
+                            os.remove(assoc_file)
+                            print(f"[Backend] Deleted associated file: {assoc_file}")
+                            
+                self.send_response(200)
+                self.send_header('Content-Type', 'application/json')
+                self.end_headers()
+                self.wfile.write(json.dumps({"success": True}).encode('utf-8'))
+            else:
+                self.send_error_response(404, "File not found")
+        except Exception as e:
+            print(f"[Backend] Error deleting gallery item: {e}")
+            self.send_error_response(500, str(e))
+
+    def send_error_response(self, code, message):
+        self.send_response(code)
+        self.send_header('Content-Type', 'application/json')
+        self.end_headers()
+        self.wfile.write(json.dumps({"error": message}).encode('utf-8'))
+
+def run_server():
+    server_address = ('', PORT)
+    httpd = HTTPServer(server_address, F23DHTTPRequestHandler)
+    print(f"[Backend] 23DFactory server running at http://localhost:{PORT}")
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        print("\n[Backend] Server shutting down.")
+        httpd.server_close()
+
+if __name__ == '__main__':
+    run_server()

styles.css

@@ -0,0 +1,976 @@
+/* 23DFactory Global Design System */
+:root {
+    --bg-main: #060608;
+    --bg-panel: rgba(13, 13, 18, 0.7);
+    --bg-panel-hover: rgba(20, 20, 30, 0.85);
+    --bg-card: rgba(22, 22, 33, 0.4);
+    
+    --primary: #9d4edd;
+    --primary-glow: rgba(157, 78, 221, 0.5);
+    --primary-light: #c77dff;
+    
+    --accent: #00f5ff;
+    --accent-glow: rgba(0, 245, 255, 0.35);
+    
+    --text-main: #f3f4f6;
+    --text-muted: #9ca3af;
+    --text-dark: #4b5563;
+    
+    --border: rgba(255, 255, 255, 0.06);
+    --border-glow: rgba(157, 78, 221, 0.2);
+    
+    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    
+    --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
+    --transition-fast: all 0.15s ease;
+}
+
+/* Base Styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-main);
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(157, 78, 221, 0.15) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(0, 245, 255, 0.1) 0px, transparent 50%),
+        radial-gradient(at 50% 50%, rgba(6, 6, 8, 1) 0px, rgba(13, 13, 18, 0.9) 100%);
+    background-attachment: fixed;
+    color: var(--text-main);
+    font-family: var(--font-body);
+    min-height: 100vh;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4 {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+/* App Layout */
+.app-container {
+    display: grid;
+    grid-template-rows: 70px 1fr;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Header */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+    background: rgba(6, 6, 8, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    z-index: 100;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.logo-icon {
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-family: var(--font-heading);
+    font-size: 1.2rem;
+    box-shadow: 0 0 15px var(--primary-glow);
+}
+
+.logo-text {
+    font-size: 1.4rem;
+    background: linear-gradient(to right, #ffffff, #c77dff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.logo-text span {
+    font-weight: 300;
+    color: var(--accent);
+    -webkit-text-fill-color: var(--accent);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+/* Main Area */
+.main-workspace {
+    display: grid;
+    grid-template-columns: 420px 1fr;
+    height: calc(100vh - 70px);
+    overflow: hidden;
+}
+
+.sidebar {
+    background: var(--bg-panel);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+}
+
+.sidebar-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.sidebar-actions {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border);
+    background: rgba(10, 10, 15, 0.85);
+    backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    z-index: 5;
+}
+
+/* Content Area - Viewer */
+.viewer-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 30, 0.4) 0%, rgba(6, 6, 8, 1) 100%);
+    overflow: hidden;
+}
+
+/* Sidebar Sections & Tabs */
+.tab-nav {
+    display: flex;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    padding: 0.25rem;
+    border: 1px solid var(--border);
+}
+
+.tab-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 0.6rem;
+    color: var(--text-muted);
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.tab-btn.active {
+    background: var(--primary);
+    color: var(--text-main);
+    box-shadow: 0 4px 12px var(--primary-glow);
+}
+
+.tab-content {
+    display: none;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.tab-content.active {
+    display: flex;
+    animation: fadeIn 0.4s ease;
+}
+
+/* Card layout */
+.control-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    transition: var(--transition-smooth);
+}
+
+.control-card:hover {
+    border-color: var(--border-glow);
+    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.05);
+}
+
+.card-title {
+    font-size: 1rem;
+    color: var(--text-main);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.5rem;
+}
+
+/* Inputs & Buttons */
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.text-input {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    color: var(--text-main);
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    transition: var(--transition-fast);
+    outline: none;
+    resize: none;
+}
+
+.text-input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 8px var(--primary-glow);
+}
+
+/* Drag and Drop Zone */
+.dropzone {
+    border: 2px dashed var(--border);
+    border-radius: 12px;
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    background: rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.dropzone:hover, .dropzone.dragover {
+    border-color: var(--primary);
+    background: rgba(157, 78, 221, 0.05);
+    box-shadow: 0 0 15px rgba(157, 78, 221, 0.1);
+}
+
+.dropzone-icon {
+    font-size: 2rem;
+    color: var(--primary-light);
+    transition: var(--transition-smooth);
+}
+
+.dropzone:hover .dropzone-icon {
+    transform: translateY(-4px);
+    color: var(--accent);
+}
+
+.dropzone p {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.dropzone input[type="file"] {
+    display: none;
+}
+
+/* Image Preview in Drag and Drop */
+.preview-container {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid var(--border);
+    background: #0f0f14;
+    display: none;
+}
+
+.preview-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.remove-preview {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 0.8rem;
+    transition: var(--transition-fast);
+}
+
+.remove-preview:hover {
+    background: #ef4444;
+}
+
+/* Buttons */
+.btn {
+    background: linear-gradient(135deg, var(--primary), #7b2cbf);
+    color: var(--text-main);
+    border: none;
+    border-radius: 8px;
+    padding: 0.8rem 1.5rem;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.3);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(157, 78, 221, 0.45);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    background: var(--text-dark);
+    color: var(--text-muted);
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border);
+    box-shadow: none;
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--text-muted);
+    box-shadow: none;
+}
+
+.btn-accent {
+    background: linear-gradient(135deg, var(--accent), #00b4d8);
+    color: #060608;
+    font-weight: 700;
+    box-shadow: 0 4px 15px rgba(0, 245, 255, 0.25);
+}
+
+.btn-accent:hover {
+    box-shadow: 0 6px 20px rgba(0, 245, 255, 0.4);
+}
+
+/* Sliders */
+.slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.slider-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.range-slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    outline: none;
+}
+
+.range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--primary-light);
+    cursor: pointer;
+    transition: var(--transition-fast);
+    box-shadow: 0 0 8px var(--primary-glow);
+}
+
+.range-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    background: var(--accent);
+}
+
+/* Select element styling */
+.custom-select {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 0.75rem;
+    color: var(--text-main);
+    outline: none;
+    font-family: var(--font-body);
+}
+
+.custom-select option {
+    background: #121217;
+    color: var(--text-main);
+}
+
+/* 3D Visualizer Area */
+.viewer-display {
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+model-viewer {
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    --poster-color: transparent;
+}
+
+/* Visualizer overlay controls */
+.viewer-overlay {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(13, 13, 18, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--border);
+    border-radius: 30px;
+    padding: 0.5rem 1rem;
+    display: flex;
+    gap: 0.75rem;
+    z-index: 10;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transform: translate(-50%, 20px);
+    transition: var(--transition-smooth);
+    pointer-events: none;
+}
+
+.viewer-overlay.active {
+    opacity: 1;
+    transform: translate(-50%, 0);
+    pointer-events: auto;
+}
+
+.overlay-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 50%;
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition-fast);
+}
+
+.overlay-btn:hover {
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.overlay-btn.active {
+    color: var(--accent);
+    background: rgba(0, 245, 255, 0.1);
+}
+
+/* Empty State / Prompt info */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    text-align: center;
+    max-width: 400px;
+    z-index: 2;
+    animation: float 4s ease-in-out infinite;
+}
+
+.empty-state-icon {
+    font-size: 4rem;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    opacity: 0.8;
+}
+
+.empty-state h3 {
+    font-size: 1.5rem;
+    color: var(--text-main);
+}
+
+.empty-state p {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* Generation Status overlay */
+.status-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(6, 6, 8, 0.85);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    z-index: 20;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.status-overlay.active {
+    display: flex;
+    opacity: 1;
+}
+
+/* Cybernetic Loading Spinner */
+.cyber-loader {
+    position: relative;
+    width: 120px;
+    height: 120px;
+}
+
+.loader-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: var(--primary);
+    animation: spin 2s linear infinite;
+}
+
+.loader-ring:nth-child(2) {
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    border-top-color: transparent;
+    border-bottom-color: var(--accent);
+    animation: spin-reverse 1.5s linear infinite;
+}
+
+.loader-ring:nth-child(3) {
+    width: 60%;
+    height: 60%;
+    top: 20%;
+    left: 20%;
+    border-top-color: var(--primary-light);
+    border-bottom-color: transparent;
+    animation: spin 1s linear infinite;
+}
+
+.loader-text-pct {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-heading);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-main);
+}
+
+.status-info {
+    text-align: center;
+    max-width: 350px;
+}
+
+.status-title {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-main);
+}
+
+.status-desc {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* Modal styling */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.modal-overlay.active {
+    display: flex;
+    opacity: 1;
+}
+
+.modal-content {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    width: 90%;
+    max-width: 480px;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
+    transform: scale(0.95);
+    transition: transform 0.3s ease;
+}
+
+.modal-overlay.active .modal-content {
+    transform: scale(1);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.75rem;
+}
+
+.modal-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.close-modal {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 1.2rem;
+}
+
+/* Footer info */
+.sidebar-footer {
+    margin-top: auto;
+    font-size: 0.75rem;
+    color: var(--text-dark);
+    display: flex;
+    justify-content: space-between;
+    border-top: 1px solid var(--border);
+    padding-top: 1rem;
+}
+
+.sidebar-footer a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: var(--transition-fast);
+}
+
+.sidebar-footer a:hover {
+    color: var(--accent);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-reverse {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(-360deg); }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+/* Gallery / Library Styling */
+.gallery-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-height: 450px;
+    overflow-y: auto;
+    padding-right: 0.25rem;
+}
+
+.gallery-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.gallery-list::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
+}
+
+.gallery-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    transition: var(--transition-fast);
+    animation: itemFadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+}
+
+@keyframes itemFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.gallery-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--border-glow);
+    transform: translateX(2px);
+}
+
+.gallery-thumbnail {
+    width: 46px;
+    height: 46px;
+    border-radius: 6px;
+    background: #0f0f14;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.gallery-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.gallery-thumbnail i {
+    color: var(--primary-light);
+}
+
+.gallery-info {
+    flex: 1;
+    min-width: 0; /* allows text truncation */
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+
+.gallery-name {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-main);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.gallery-meta {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.gallery-actions {
+    display: flex;
+    gap: 0.35rem;
+}
+
+.gallery-btn {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.gallery-btn:hover {
+    color: var(--bg-main);
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.gallery-btn.delete-btn:hover {
+    color: #ffffff;
+    background: #ef4444;
+    border-color: #ef4444;
+}
+
+.gallery-empty-state {
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--text-dark);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Source Selector and Thumbnail Grid Styles */
+.toggle-group {
+    display: flex;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 0.25rem;
+    gap: 0.25rem;
+}
+
+.toggle-btn {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.toggle-btn:hover {
+    color: var(--text-main);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.toggle-btn.active {
+    background: var(--primary);
+    color: #ffffff;
+    box-shadow: 0 2px 8px var(--primary-glow);
+}
+
+.library-thumbnail-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+    gap: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0.25rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.library-thumb-item {
+    aspect-ratio: 1;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: var(--transition-fast);
+    background: var(--bg-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.library-thumb-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.library-thumb-item:hover {
+    border-color: var(--primary-light);
+}
+
+.library-thumb-item.active {
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.library-thumb-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 1.5rem 0.5rem;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}