Upload 3 files

core.js

@@ -0,0 +1,1002 @@
+import concaveman from 'concaveman';
+import gsap from "gsap";
+import JSZip from "jszip";
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { TransformControls } from 'three/addons/controls/TransformControls.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+
+const ASSET_BASE_URL = 'https://huggingface.co/spaces/aaurelions/drones/resolve/main';
+const defaultPanoramas = Array.from({ length: 10 }, (_, i) => ({ name: `bg${i + 1}.jpg`, url: `${ASSET_BASE_URL}/jpg/bg${i + 1}.jpg`, thumb: `${ASSET_BASE_URL}/jpg/thumbnails/bg${i + 1}.jpg` }));
+const defaultModels = ['gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb'].map(n => ({ name: n, url: `${ASSET_BASE_URL}/glb/${n}`, thumb: `${ASSET_BASE_URL}/glb/thumbnails/${n.replace('.glb', '.png')}` }));
+
+let panoramaAssets = [...defaultPanoramas];
+let modelAssets = [...defaultModels];
+
+let scene, camera, renderer, orbitControls, transformControls, pmremGenerator, panoramaSphere;
+let selectedObject = null;
+let activeControlMode = null;
+let activePanorama = null;
+
+let maskScene, maskMaterial;
+
+const loaderOverlay = document.getElementById('loader-overlay');
+const loaderText = document.getElementById('loader-text');
+const canvas = document.getElementById('main-canvas');
+
+async function init() {
+    loaderText.textContent = 'Setting up 3D scene...';
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 2000);
+    camera.position.set(0, 1.5, 8);
+
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.0;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+    pmremGenerator = new THREE.PMREMGenerator(renderer);
+    pmremGenerator.compileEquirectangularShader();
+
+    const panoGeometry = new THREE.SphereGeometry(1000, 60, 40);
+    panoGeometry.scale(-1, 1, 1);
+    const panoMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+    panoramaSphere = new THREE.Mesh(panoGeometry, panoMaterial);
+    scene.add(panoramaSphere);
+
+    orbitControls = new OrbitControls(camera, renderer.domElement);
+    orbitControls.enableDamping = true;
+    orbitControls.target.set(0, 1, 0);
+
+    transformControls = new TransformControls(camera, renderer.domElement);
+    transformControls.enabled = false;
+    scene.add(transformControls);
+
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    dirLight.position.set(8, 15, 10);
+    scene.add(ambientLight, dirLight);
+
+    maskScene = new THREE.Scene();
+    maskMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+
+    setupUI();
+    setupEventListeners();
+    animate();
+
+    try {
+        await loadAsset(panoramaAssets[6], 'panorama');
+        await loadAsset(modelAssets[1], 'model');
+        setControlMode('translate');
+    } catch (error) {
+        showNotification({ text: `Initialization failed: ${error.message}`, type: 'error' });
+        console.error("Initialization failed:", error);
+    } finally {
+        gsap.to(loaderOverlay, { opacity: 0, duration: 0.5, onComplete: () => loaderOverlay.classList.add('hidden') });
+    }
+}
+
+async function loadAsset(assetData, assetType, button = null) {
+    const isInitialLoad = !loaderOverlay.classList.contains('hidden');
+    let spinner, textSpan;
+    if (button) {
+        spinner = button.querySelector('.btn-spinner');
+        textSpan = button.querySelector('.btn-text');
+        spinner.classList.remove('hidden');
+        textSpan.classList.add('hidden');
+        button.disabled = true;
+    } else if (!isInitialLoad) {
+        loaderText.textContent = `Loading ${assetType}...`;
+        loaderOverlay.classList.remove('hidden');
+        gsap.to(loaderOverlay, { opacity: 1, duration: 0.3 });
+        canvas.classList.add('loading');
+    } else {
+        loaderText.textContent = `Loading ${assetType}: ${assetData.name}`;
+    }
+
+    try {
+        if (assetType === 'panorama') {
+            await new Promise((resolve, reject) => {
+                const isHDR = assetData.url.endsWith('.hdr');
+                const loader = isHDR ? new RGBELoader() : new THREE.TextureLoader();
+                loader.load(assetData.url, (texture) => {
+                    texture.mapping = THREE.EquirectangularReflectionMapping;
+                    if (!isHDR) texture.colorSpace = THREE.SRGBColorSpace;
+
+                    if (panoramaSphere) {
+                        panoramaSphere.material.map = texture;
+                        panoramaSphere.material.needsUpdate = true;
+                    }
+
+                    scene.environment = pmremGenerator.fromEquirectangular(texture).texture;
+
+                    scene.background = texture;
+                    scene.environment = pmremGenerator.fromEquirectangular(texture).texture;
+                    pmremGenerator.dispose();
+                    texture.dispose();
+                    activePanorama = assetData;
+                    setActiveCard('panorama-gallery', assetData.name);
+                    resolve();
+                }, undefined, reject);
+            });
+        } else {
+            if (selectedObject) transformControls.detach();
+
+            const existingAsset = modelAssets.find(m => m.name === assetData.name && m.mesh);
+            if (existingAsset) {
+                modelAssets.forEach(m => { if (m.mesh) m.mesh.visible = false; });
+                existingAsset.mesh.visible = true;
+                selectedObject = existingAsset.mesh;
+            } else {
+                await new Promise((resolve, reject) => {
+                    const loader = new GLTFLoader();
+                    loader.load(assetData.url, (gltf) => {
+                        modelAssets.forEach(m => { if (m.mesh) m.mesh.visible = false; });
+                        const model = gltf.scene;
+                        model.name = assetData.name;
+                        const box = new THREE.Box3().setFromObject(model);
+                        const size = box.getSize(new THREE.Vector3());
+                        const center = box.getCenter(new THREE.Vector3());
+                        model.position.sub(center);
+                        const maxDim = Math.max(size.x, size.y, size.z);
+                        model.scale.setScalar(4.0 / maxDim);
+                        scene.add(model);
+
+                        const assetToUpdate = modelAssets.find(m => m.name === assetData.name);
+                        if (assetToUpdate) {
+                            assetToUpdate.mesh = model;
+
+                            assetToUpdate.originalMaterials = new Map();
+                            model.traverse(node => {
+                                if (node.isMesh) assetToUpdate.originalMaterials.set(node, node.material);
+                            });
+                        }
+
+                        selectedObject = model;
+                        resolve();
+                    }, undefined, reject);
+                });
+            }
+            if (activeControlMode) transformControls.attach(selectedObject);
+            setActiveCard('model-selector', assetData.name);
+        }
+    } catch (error) {
+        showNotification({ text: `Failed to load ${assetType}: ${assetData.name}`, type: 'error', duration: 4000 });
+        console.error(`Failed to load ${assetType}:`, error);
+    } finally {
+        if (button) {
+            spinner.classList.add('hidden');
+            textSpan.classList.remove('hidden');
+            button.disabled = false;
+        } else if (!isInitialLoad) {
+            gsap.to(loaderOverlay, { opacity: 0, duration: 0.5, onComplete: () => loaderOverlay.classList.add('hidden') });
+            canvas.classList.remove('loading');
+        }
+    }
+}
+
+function createAssetCard(type, assetData) {
+    const container = document.createElement('div');
+    container.className = 'asset-card flex flex-col rounded-lg cursor-pointer overflow-hidden bg-stone-900/50';
+    container.dataset.name = assetData.name;
+    const thumbWrapper = document.createElement('div');
+    thumbWrapper.className = 'w-full h-28 flex items-center justify-center';
+    const thumb = document.createElement('img');
+    thumb.className = 'max-w-full max-h-full object-contain';
+
+    container.onclick = () => loadAsset(assetData, type);
+
+    if (type === 'model') {
+        thumbWrapper.classList.add('p-2');
+        thumb.src = assetData.thumb;
+        const nameWrapper = document.createElement('div');
+        nameWrapper.textContent = assetData.name.replace(/\.[^/.]+$/, "").substring(0, 15);
+        nameWrapper.className = 'text-white text-xs font-semibold text-center block truncate p-2 bg-black/20 mt-auto';
+        thumbWrapper.appendChild(thumb);
+        container.append(thumbWrapper, nameWrapper);
+    } else {
+        thumb.className = 'w-full h-full object-cover';
+        thumb.src = assetData.thumb;
+        thumbWrapper.appendChild(thumb);
+        container.appendChild(thumbWrapper);
+    }
+
+    thumb.onerror = () => {
+        thumbWrapper.innerHTML = `<i data-feather="package" class="w-12 h-12 text-stone-500"></i>`;
+        feather.replace();
+        thumbWrapper.parentElement.classList.add('bg-stone-800');
+    }
+    document.getElementById(type === 'model' ? 'model-selector' : 'panorama-gallery').appendChild(container);
+}
+
+function setupUI() {
+    feather.replace();
+    modelAssets.forEach(m => createAssetCard('model', m));
+    panoramaAssets.forEach(p => createAssetCard('panorama', p));
+}
+
+function setControlMode(mode) {
+    if (mode === activeControlMode) {
+        activeControlMode = null;
+        transformControls.detach();
+        transformControls.enabled = false;
+    } else {
+        activeControlMode = mode;
+        transformControls.setMode(activeControlMode);
+        transformControls.enabled = true;
+        if (selectedObject) transformControls.attach(selectedObject);
+    }
+    document.querySelectorAll('.control-btn').forEach(b => b.classList.toggle('bg-blue-600', b.dataset.mode === activeControlMode));
+}
+
+function setupEventListeners() {
+    ['model', 'panorama'].forEach(type => {
+        document.getElementById(`${type}-panel-trigger`).addEventListener('click', e => { e.stopPropagation(); document.getElementById(`${type}-panel`).classList.add('is-open'); });
+        document.getElementById(`close-${type}-panel`).addEventListener('click', () => document.getElementById(`${type}-panel`).classList.remove('is-open'));
+    });
+
+    document.getElementById('day-night-toggle').addEventListener('change', (e) => {
+        const isNight = e.target.checked;
+        const tintColor = isNight ? 0x202040 : 0xffffff;
+
+        if (panoramaSphere) {
+            gsap.to(panoramaSphere.material.color, {
+                r: (tintColor >> 16 & 255) / 255,
+                g: (tintColor >> 8 & 255) / 255,
+                b: (tintColor & 255) / 255,
+                duration: 0.5
+            });
+        }
+
+        gsap.to(renderer, { toneMappingExposure: isNight ? 0.3 : 1.0, duration: 0.5 });
+        gsap.to(scene.children.find(c => c.isDirectionalLight), { intensity: isNight ? 0.2 : 1.0, duration: 0.5 });
+    });
+
+    document.querySelectorAll('.control-btn').forEach(btn => btn.addEventListener('click', () => setControlMode(btn.dataset.mode)));
+    transformControls.addEventListener('dragging-changed', e => { orbitControls.enabled = !e.value; });
+
+    canvas.addEventListener('click', (e) => {
+        if (transformControls.dragging) return;
+        const rect = renderer.domElement.getBoundingClientRect();
+        const mouse = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(mouse, camera);
+        const visibleMeshObjects = modelAssets.map(m => m.mesh).filter(m => m && m.visible);
+        if (visibleMeshObjects.length === 0) return;
+        const intersects = raycaster.intersectObjects(visibleMeshObjects, true);
+
+        if (intersects.length > 0) {
+            const object = findTopLevelGroup(intersects[0].object);
+            if (object && object.isGroup && object !== selectedObject) {
+                const modelData = modelAssets.find(m => m.name === object.name);
+                if (modelData) loadAsset(modelData, 'model');
+            }
+        }
+    });
+
+    window.addEventListener('keydown', (e) => {
+        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'SELECT') return;
+        const key = e.key.toLowerCase();
+        if (key === 'w' || key === 'e' || key === 'r') { e.preventDefault(); setControlMode(key === 'w' ? 'translate' : key === 'e' ? 'rotate' : 'scale'); }
+        if (key === 'g') { e.preventDefault(); document.getElementById('generate-dataset-btn').click(); }
+        if (key === 'escape') { document.querySelectorAll('.side-panel.is-open, .modal-overlay.flex').forEach(p => p.classList.add('hidden')); }
+    });
+
+    setupUploadModal();
+    setupDatasetModal();
+}
+
+function setupUploadModal() {
+    const modal = document.getElementById('upload-modal');
+    const title = document.getElementById('upload-title');
+    const fileInput = document.getElementById('upload-file-input');
+    const urlInput = document.getElementById('upload-url-input');
+    const dropZone = document.getElementById('upload-drop-zone');
+    const loadBtn = document.getElementById('upload-load-btn');
+    let currentType, currentHandler;
+
+    const openModal = (type, titleText, accept, placeholder, handler) => {
+        currentType = type;
+        title.textContent = titleText;
+        fileInput.value = ''; urlInput.value = '';
+        fileInput.accept = accept;
+        urlInput.placeholder = placeholder;
+        currentHandler = handler;
+        modal.classList.remove('hidden'); modal.classList.add('flex');
+    };
+
+    document.getElementById('add-model-btn').addEventListener('click', () => openModal('model', 'Upload New Model', '.glb,.gltf', 'Enter .glb URL', (type, data) => handleNewAsset(type, data, loadBtn)));
+    document.getElementById('add-panorama-btn').addEventListener('click', () => openModal('panorama', 'Upload New Panorama', 'image/*,.hdr', 'Enter image URL', (type, data) => handleNewAsset(type, data, loadBtn)));
+    document.getElementById('upload-cancel-btn').addEventListener('click', () => modal.classList.add('hidden'));
+
+    loadBtn.addEventListener('click', () => {
+        const url = urlInput.value.trim();
+        if (url) currentHandler(currentType, url, loadBtn);
+    });
+    dropZone.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', e => { if (e.target.files.length) currentHandler(currentType, e.target.files[0], loadBtn) });
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length) currentHandler(currentType, e.dataTransfer.files[0], loadBtn); });
+}
+
+async function handleNewAsset(type, fileOrUrl, button) {
+    document.getElementById('upload-modal').classList.add('hidden');
+    const isUrl = typeof fileOrUrl === 'string';
+    const url = isUrl ? fileOrUrl : URL.createObjectURL(fileOrUrl);
+    const name = (isUrl ? new URL(url).pathname.split('/').pop() : fileOrUrl.name).substring(0, 25);
+
+    const newAssetData = { name, url, mesh: null };
+    if (type === 'model') {
+        if (modelAssets.some(m => m.name === name)) {
+            showNotification({ text: `Model "${name}" already exists.`, type: 'error' });
+            return;
+        }
+        newAssetData.thumb = 'placeholder';
+        modelAssets.push(newAssetData);
+        createAssetCard('model', newAssetData);
+        await loadAsset(newAssetData, 'model', button);
+    } else {
+        if (panoramaAssets.some(p => p.name === name)) {
+            showNotification({ text: `Panorama "${name}" already exists.`, type: 'error' });
+            return;
+        }
+        newAssetData.thumb = url;
+        panoramaAssets.push(newAssetData);
+        createAssetCard('panorama', newAssetData);
+        await loadAsset(newAssetData, 'panorama', button);
+    }
+}
+
+function setupDatasetModal() {
+    const modal = document.getElementById('dataset-modal');
+
+    document.getElementById('generate-dataset-btn').addEventListener('click', () => {
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+        feather.replace();
+        updateDatasetModalUI();
+    });
+
+    document.getElementById('cancel-dataset').addEventListener('click', () => modal.classList.add('hidden'));
+    document.getElementById('start-dataset').addEventListener('click', handleDatasetGeneration);
+
+    document.querySelectorAll('#dataset-modal input[type="radio"], #dataset-modal input[type="checkbox"]').forEach(input => {
+        input.addEventListener('change', updateDatasetModalUI);
+    });
+
+    const setupSlider = (sliderId, displayId, unit) => {
+        const slider = document.getElementById(sliderId);
+        const display = document.getElementById(displayId);
+        if (slider && display) {
+            const update = () => { display.textContent = slider.value + unit; };
+            update();
+            slider.addEventListener('input', update);
+        }
+    };
+    setupSlider('position-variance', 'position-variance-value', '%');
+    setupSlider('rotation-variance', 'rotation-variance-value', '%');
+    setupSlider('scale-variance', 'scale-variance-value', '%');
+    setupSlider('horizontal-variance', 'horizontal-variance-value', '°');
+    setupSlider('vertical-variance', 'vertical-variance-value', '°');
+    setupSlider('concave-hull-concavity', 'concave-hull-concavity-value', '');
+    setupSlider('background-ratio-slider', 'background-ratio-value', '%');
+    setupSlider('mask-simplification-slider', 'mask-simplification-value', '');
+
+    const trainSlider = document.getElementById('split-train-ratio');
+    const valSlider = document.getElementById('split-val-ratio');
+
+    const bringToFront = (el, topZ, bottomZ) => {
+        el.style.zIndex = topZ;
+        (el === trainSlider ? valSlider : trainSlider).style.zIndex = bottomZ;
+    }
+
+    trainSlider.addEventListener('input', () => { if (parseInt(trainSlider.value) >= parseInt(valSlider.value)) valSlider.value = parseInt(trainSlider.value); updateSplitRatios(); });
+    valSlider.addEventListener('input', () => { if (parseInt(valSlider.value) <= parseInt(trainSlider.value)) trainSlider.value = parseInt(valSlider.value); updateSplitRatios(); });
+
+    trainSlider.addEventListener('mousedown', () => bringToFront(trainSlider, 25, 20));
+    trainSlider.addEventListener('touchstart', () => bringToFront(trainSlider, 25, 20));
+    valSlider.addEventListener('mousedown', () => bringToFront(valSlider, 25, 20));
+    valSlider.addEventListener('touchstart', () => bringToFront(valSlider, 25, 20));
+}
+
+function updateDatasetModalUI() {
+
+    const useCurrentModel = document.querySelector('input[name="model-source"]:checked')?.value === 'current';
+    const modelInfo = document.getElementById('model-source-current-info');
+    modelInfo.textContent = `Using: ${selectedObject ? selectedObject.name : 'None'}`;
+    modelInfo.classList.toggle('hidden', !useCurrentModel);
+
+    const useCurrentPano = document.querySelector('input[name="pano-source"]:checked')?.value === 'current';
+    const panoInfo = document.getElementById('pano-source-current-info');
+    panoInfo.textContent = `Using: ${activePanorama ? activePanorama.name : 'None'}`;
+    panoInfo.classList.toggle('hidden', !useCurrentPano);
+
+    const randomizeModel = document.getElementById('randomize-model-toggle')?.checked;
+    gsap.to("#model-sliders", { maxHeight: randomizeModel ? 200 : 0, opacity: randomizeModel ? 1 : 0, paddingTop: randomizeModel ? '0.75rem' : 0, duration: 0.4 });
+
+    const cameraSection = document.getElementById('camera-randomization-section');
+    const cameraToggle = document.getElementById('randomize-camera-toggle');
+    cameraSection.style.opacity = useCurrentPano ? '1' : '0.5';
+    cameraToggle.disabled = !useCurrentPano;
+    if (!useCurrentPano) { cameraToggle.checked = false; }
+    const cameraToggleLabel = cameraToggle.closest('label.flex.items-center.gap-2');
+    if (cameraToggleLabel) cameraToggleLabel.style.cursor = useCurrentPano ? 'pointer' : 'not-allowed';
+
+    const randomizeCamera = useCurrentPano && cameraToggle.checked;
+    gsap.to("#camera-sliders", { maxHeight: randomizeCamera ? 150 : 0, opacity: randomizeCamera ? 1 : 0, paddingTop: randomizeCamera ? '0.75rem' : 0, duration: 0.4 });
+
+    const task = document.querySelector('input[name="dataset-task"]:checked').value;
+    const segGroup = document.getElementById('segmentation-method-group');
+    const segMethod = document.querySelector('input[name="segmentation-method"]:checked').value;
+    const concaveOptions = document.getElementById('concave-hull-options');
+    const renderMaskOptions = document.getElementById('render-mask-options');
+
+    const showSegGroup = task === 'segmentation';
+    gsap.to(segGroup, {
+        maxHeight: showSegGroup ? 300 : 0,
+        opacity: showSegGroup ? 1 : 0,
+        paddingTop: showSegGroup ? '0.5rem' : 0,
+        marginTop: showSegGroup ? '1rem' : 0,
+        duration: 0.4
+    });
+
+    const showConcaveOptions = showSegGroup && segMethod === 'concave';
+    gsap.to(concaveOptions, {
+        maxHeight: showConcaveOptions ? 100 : 0,
+        opacity: showConcaveOptions ? 1 : 0,
+        paddingTop: showConcaveOptions ? '0.75rem' : 0,
+        duration: 0.4
+    });
+
+    const includeBackgrounds = document.getElementById('include-background-toggle').checked;
+    gsap.to("#background-ratio-container", {
+        maxHeight: includeBackgrounds ? 100 : 0,
+        opacity: includeBackgrounds ? 1 : 0,
+        paddingTop: includeBackgrounds ? '0.5rem' : 0,
+        duration: 0.4
+    });
+
+    const showRenderMaskOptions = showSegGroup && segMethod === 'render';
+    gsap.to(renderMaskOptions, {
+        maxHeight: showRenderMaskOptions ? 100 : 0,
+        opacity: showRenderMaskOptions ? 1 : 0,
+        paddingTop: showRenderMaskOptions ? '0.75rem' : 0,
+        duration: 0.4
+    });
+
+    updateSplitRatios();
+}
+
+function updateSplitRatios() {
+    const valToggle = document.getElementById('include-val-set');
+    const testToggle = document.getElementById('include-test-set');
+    const trainSlider = document.getElementById('split-train-ratio');
+    const valSlider = document.getElementById('split-val-ratio');
+
+    valSlider.disabled = !valToggle.checked;
+    testToggle.disabled = !valToggle.checked;
+    if (!valToggle.checked) testToggle.checked = false;
+
+    valSlider.style.visibility = testToggle.checked ? 'visible' : 'hidden';
+
+    valSlider.parentElement.style.opacity = valToggle.checked ? '1' : '0.4';
+
+    const trainPctRaw = parseInt(trainSlider.value);
+    let valEndPctRaw = valToggle.checked ? parseInt(valSlider.value) : trainPctRaw;
+
+    const trainPct = Math.max(0, Math.min(100, trainPctRaw));
+    let valEndPct = valToggle.checked ? Math.max(trainPct, Math.min(100, valEndPctRaw)) : trainPct;
+
+    if (!testToggle.checked) {
+        valEndPct = 100;
+    }
+
+    const valPct = valToggle.checked ? valEndPct - trainPct : 0;
+    const testPct = testToggle.checked ? 100 - valEndPct : 0;
+    const trainDisplayPct = 100 - valPct - testPct;
+
+    document.getElementById('split-train-display').textContent = `${trainDisplayPct}%`;
+    document.getElementById('split-val-display').textContent = `${valPct}%`;
+    document.getElementById('split-test-display').textContent = `${testPct}%`;
+
+    document.getElementById('split-val-display').style.visibility = valToggle.checked ? 'visible' : 'hidden';
+    document.getElementById('split-test-display').style.visibility = testToggle.checked ? 'visible' : 'hidden';
+
+    const total = trainDisplayPct + valPct + testPct;
+    document.getElementById('split-ratio-sum').textContent = total;
+
+    document.getElementById('split-bg-train').style.width = `${trainDisplayPct}%`;
+    const valBg = document.getElementById('split-bg-val');
+    valBg.style.left = `${trainDisplayPct}%`;
+    valBg.style.width = `${valPct}%`;
+    valBg.style.display = valToggle.checked ? 'block' : 'none';
+
+    const testBg = document.getElementById('split-bg-test');
+    testBg.style.left = `${trainDisplayPct + valPct}%`;
+    testBg.style.width = `${testPct}%`;
+    testBg.style.display = testToggle.checked ? 'block' : 'none';
+}
+
+async function handleDatasetGeneration() {
+    const startBtn = document.getElementById('start-dataset');
+    const cancelBtn = document.getElementById('cancel-dataset');
+    const btnText = startBtn.querySelector('.btn-text');
+    const btnSpinner = startBtn.querySelector('.btn-spinner');
+
+    btnText.classList.add('hidden');
+    btnSpinner.classList.remove('hidden');
+    startBtn.disabled = true;
+    cancelBtn.disabled = true;
+
+    try {
+        const trainSlider = document.getElementById('split-train-ratio');
+        const valSlider = document.getElementById('split-val-ratio');
+
+        const options = {
+            task: document.querySelector('input[name="dataset-task"]:checked').value,
+            segmentationMethod: document.querySelector('input[name="segmentation-method"]:checked').value,
+            concavity: parseFloat(document.getElementById('concave-hull-concavity').value),
+            rdpEpsilon: parseFloat(document.getElementById('mask-simplification-slider').value),
+            samples: parseInt(document.getElementById('dataset-samples').value),
+            name: document.getElementById('dataset-name').value.trim(),
+
+            includeBackgrounds: document.getElementById('include-background-toggle').checked,
+            backgroundRatio: parseInt(document.getElementById('background-ratio-slider').value) / 100,
+
+            useCurrentModel: document.querySelector('input[name="model-source"]:checked').value === 'current',
+            randomizeModel: document.getElementById('randomize-model-toggle').checked,
+            posVar: parseInt(document.getElementById('position-variance').value) / 100,
+            rotVar: parseInt(document.getElementById('rotation-variance').value) / 100,
+            scaleVar: parseInt(document.getElementById('scale-variance').value) / 100,
+            useCurrentPanorama: document.querySelector('input[name="pano-source"]:checked').value === 'current',
+            randomizeCamera: document.getElementById('randomize-camera-toggle').checked,
+            hVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('horizontal-variance').value)),
+            vVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('vertical-variance').value)),
+            includeVal: document.getElementById('include-val-set').checked,
+            includeTest: document.getElementById('include-test-set').checked,
+            trainSplit: parseInt(trainSlider.value),
+            valSplit: parseInt(valSlider.value),
+            initial: {
+                model: {
+                    position: selectedObject ? selectedObject.position.clone() : new THREE.Vector3(),
+                    rotation: selectedObject ? selectedObject.rotation.clone() : new THREE.Euler(),
+                    scale: selectedObject ? selectedObject.scale.x : 1
+                },
+                camera: { position: camera.position.clone() }
+            }
+        };
+
+        if (!options.name) { showNotification({ text: "Dataset name cannot be empty.", type: "error" }); return; }
+        if ((options.task === 'detection' || options.task === 'segmentation') && !options.includeVal) {
+            showNotification({ text: "Validation set is required for YOLO formats.", type: "error" });
+            document.getElementById('include-val-set').checked = true;
+            updateDatasetModalUI();
+            return;
+        }
+
+        document.getElementById('dataset-modal').classList.add('hidden');
+        const progressContainer = document.getElementById('progress-container');
+        progressContainer.classList.remove('hidden'); progressContainer.classList.add('flex');
+
+        const zip = new JSZip();
+        const rootFolderName = options.name;
+        const usedClasses = new Set();
+
+        const originalModelAsset = selectedObject ? modelAssets.find(m => m.name === selectedObject.name) : null;
+        const originalPanoramaAsset = activePanorama;
+        const transformWasVisible = transformControls.visible;
+        if (transformWasVisible) transformControls.visible = false;
+
+        for (let i = 0; i < options.samples; i++) {
+            updateProgress(i + 1, options.samples);
+            const currentModelAsset = await randomizeSceneForGeneration(options, usedClasses);
+
+            renderer.render(scene, camera);
+            const imageName = `sample_${String(i).padStart(5, '0')}.jpg`;
+            const labelName = imageName.replace('.jpg', '.txt');
+
+            const modelClassName = currentModelAsset ? currentModelAsset.name.replace(/\.[^/.]+$/, "") : 'background_only';
+            const classIndex = currentModelAsset ? modelAssets.findIndex(m => m.name === currentModelAsset.name) : -1;
+
+            const { imageBlob, labelData } = await generateSampleData(options, classIndex);
+
+            if (imageBlob) {
+                const randomVal = Math.random() * 100;
+                let splitFolder = 'train';
+
+                const valPct = options.includeVal ? options.valSplit - options.trainSplit : 0;
+                const testPct = options.includeTest ? 100 - options.valSplit : 0;
+                const trainPct = 100 - valPct - testPct;
+
+                if (options.includeTest && randomVal > (trainPct + valPct)) {
+                    splitFolder = 'test';
+                } else if (options.includeVal && randomVal > trainPct) {
+                    splitFolder = 'val';
+                }
+
+                if (options.task === 'classification') {
+                    const classFolder = currentModelAsset && selectedObject.visible ? modelClassName : 'background_only';
+                    zip.folder(rootFolderName).folder(splitFolder).folder(classFolder).file(imageName, imageBlob);
+                } else {
+                    zip.folder(rootFolderName).folder('images').folder(splitFolder).file(imageName, imageBlob);
+                    if (labelData) { zip.folder(rootFolderName).folder('labels').folder(splitFolder).file(labelName, labelData); }
+                }
+            }
+            if (i % 10 === 0) await new Promise(resolve => setTimeout(resolve, 1));
+        }
+
+        if (options.task !== 'classification') {
+            const classNames = Array.from(usedClasses).sort().map((name, index) => `  ${index}: ${name.replace(/\.[^/.]+$/, "")}`).join('\n');
+            let yamlContent = `path: ${rootFolderName}\ntrain: images/train\nval: images/val\n`;
+            if (options.includeTest) yamlContent += `test: images/test\n`;
+            yamlContent += `\nnames:\n${classNames}`;
+            zip.folder(rootFolderName).file(`${options.name}.yaml`, yamlContent);
+        }
+
+        if (transformWasVisible) transformControls.visible = true;
+
+        updateProgress(options.samples, options.samples, "Compressing ZIP...");
+        const content = await zip.generateAsync({ type: "blob" });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(content);
+        link.download = `${rootFolderName}.zip`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+        progressContainer.classList.add('hidden');
+        showNotification({ text: 'Dataset generation complete!', type: 'success' });
+
+        await loadAsset(originalPanoramaAsset || panoramaAssets[0], 'panorama');
+        await loadAsset(originalModelAsset || modelAssets[0], 'model');
+
+    } finally {
+        btnText.classList.remove('hidden');
+        btnSpinner.classList.add('hidden');
+        startBtn.disabled = false;
+        cancelBtn.disabled = false;
+    }
+}
+
+async function randomizeSceneForGeneration(options, usedClasses) {
+    let currentModelAsset;
+    if (!options.useCurrentPanorama) {
+        const randomPano = panoramaAssets[Math.floor(Math.random() * panoramaAssets.length)];
+        await loadAsset(randomPano, 'panorama');
+    }
+    if (!options.useCurrentModel) {
+        currentModelAsset = modelAssets[Math.floor(Math.random() * modelAssets.length)];
+        await loadAsset(currentModelAsset, 'model');
+    } else {
+        currentModelAsset = modelAssets.find(m => m.name === selectedObject.name);
+    }
+
+    if (!currentModelAsset || !selectedObject) return null;
+
+    if (options.includeBackgrounds && Math.random() < options.backgroundRatio) {
+        selectedObject.visible = false;
+    } else {
+        selectedObject.visible = true;
+    }
+
+    if (selectedObject.visible) {
+        usedClasses.add(currentModelAsset.name);
+    }
+
+    if (!selectedObject.visible) return null;
+
+    if (options.randomizeModel) {
+        if (options.useCurrentModel) {
+            const { position: basePos, rotation: baseRot, scale: baseScale } = options.initial.model;
+            selectedObject.position.copy(basePos).add(new THREE.Vector3().randomDirection().multiplyScalar(Math.random() * 5));
+
+            const baseQuaternion = new THREE.Quaternion().setFromEuler(baseRot);
+            const rotOffset = new THREE.Euler((Math.random() - 0.5) * 2 * Math.PI * options.rotVar, (Math.random() - 0.5) * 2 * Math.PI * options.rotVar, (Math.random() - 0.5) * 2 * Math.PI * options.rotVar);
+            baseQuaternion.multiply(new THREE.Quaternion().setFromEuler(rotOffset));
+            selectedObject.quaternion.copy(baseQuaternion);
+
+            selectedObject.scale.setScalar(baseScale * (1 + (Math.random() - 0.5) * 2 * options.scaleVar));
+        } else {
+            selectedObject.position.set((Math.random() - 0.5) * 10, Math.random() * 5, (Math.random() - 0.5) * 10);
+            selectedObject.rotation.set(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2);
+            const box = new THREE.Box3().setFromObject(selectedObject);
+            const size = box.getSize(new THREE.Vector3());
+            const maxDim = Math.max(size.x, size.y, size.z);
+            const baseScale = maxDim > 0 ? 4.0 / maxDim : 1.0;
+            selectedObject.scale.setScalar(baseScale * (0.5 + Math.random()));
+        }
+    }
+
+    if (options.useCurrentPanorama && options.randomizeCamera) {
+        const spherical = new THREE.Spherical().setFromCartesianCoords(options.initial.camera.position.x, options.initial.camera.position.y, options.initial.camera.position.z);
+        spherical.theta += (Math.random() - 0.5) * 2 * options.hVar;
+        spherical.phi += (Math.random() - 0.5) * 2 * options.vVar;
+        spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi));
+        camera.position.setFromSpherical(spherical);
+    } else if (!options.useCurrentPanorama) {
+        camera.position.set((Math.random() - 0.5) * 20, Math.random() * 8 + 1, (Math.random() - 0.5) * 15 + 5);
+    }
+
+    // --- START: FIX FOR MODEL CENTERING ---
+    const lookAtTarget = selectedObject.position.clone();
+
+    // If Position Variance is > 0, apply a 2D-like offset to the camera's target point.
+    if (options.randomizeModel && options.posVar > 0) {
+        const toObject = new THREE.Vector3().subVectors(selectedObject.position, camera.position);
+        const distance = toObject.length();
+
+        // Get camera's local right and up vectors to define the offset plane
+        const right = new THREE.Vector3().crossVectors(camera.up, toObject).normalize();
+        const up = new THREE.Vector3().crossVectors(toObject, right).normalize();
+
+        // Calculate the dimensions of the visible area (frustum) at the object's distance
+        const fovInRadians = THREE.MathUtils.degToRad(camera.fov);
+        const frustumHeight = 2.0 * distance * Math.tan(fovInRadians / 2.0);
+        const frustumWidth = frustumHeight * camera.aspect;
+
+        // Convert the user's percentage (e.g., 90% -> 0.9) to a max shift ratio (e.g., 0.45)
+        const maxShiftRatio = options.posVar / 2.0;
+
+        // Calculate random offsets in world units
+        const offsetX = (Math.random() - 0.5) * 2 * (frustumWidth * maxShiftRatio);
+        const offsetY = (Math.random() - 0.5) * 2 * (frustumHeight * maxShiftRatio);
+
+        // Apply the calculated offsets to the target point
+        lookAtTarget.addScaledVector(right, offsetX);
+        lookAtTarget.addScaledVector(up, offsetY);
+    }
+
+    // Point the camera at the final target (which may be offset)
+    camera.lookAt(lookAtTarget);
+    // --- END: FIX FOR MODEL CENTERING ---
+    
+    selectedObject.updateMatrixWorld(true);
+    return currentModelAsset;
+}
+
+function findTopLevelGroup(object) { let current = object; while (current.parent && current.parent !== scene && current.parent !== maskScene) { current = current.parent; } return current; }
+function getCanvasBlob() { return new Promise(resolve => renderer.domElement.toBlob(resolve, 'image/jpeg', 0.9)); }
+function updateProgress(current, total, text = 'Processing...') {
+    document.getElementById('progress-bar').style.width = `${total > 0 ? (current / total) * 100 : 0}%`;
+    document.getElementById('progress-label').textContent = text;
+    document.getElementById('progress-count').textContent = `(${current}/${total})`;
+}
+function setActiveCard(containerId, name) { document.querySelectorAll(`#${containerId} .asset-card`).forEach(c => c.classList.toggle('active', c.dataset.name === name)); }
+
+function showNotification({ text, type = 'success', duration = 3000, id = null }) {
+    const container = document.getElementById('notification-container');
+    if (id) { const existing = document.getElementById(id); if (existing) { existing.querySelector('span').textContent = text; return; } }
+    const el = document.createElement('div');
+    el.id = id || `notif-${Date.now()}`;
+    el.className = `notification glass-ui p-3 px-4 rounded-lg flex items-center gap-3`;
+    const colors = { success: 'bg-green-500/50', error: 'bg-red-500/50', info: 'bg-blue-500/50', loading: 'bg-stone-500/50' };
+    const icons = { success: 'check-circle', error: 'alert-triangle', info: 'info', loading: null };
+    el.classList.add(colors[type]);
+    let iconHtml = type === 'loading' ? `<div class="notification-spinner"></div>` : `<i data-feather="${icons[type]}" class="w-5 h-5"></i>`;
+    el.innerHTML = `${iconHtml}<span>${text}</span>`;
+    container.appendChild(el);
+    if (icons[type]) feather.replace();
+    setTimeout(() => el.classList.add('show'), 10);
+    if (type !== 'loading') { setTimeout(() => hideNotification(el.id), duration); }
+}
+
+function hideNotification(id) {
+    const el = document.getElementById(id);
+    if (el) { el.classList.remove('show'); setTimeout(() => el.remove(), 500); }
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    orbitControls.update();
+    renderer.render(scene, camera);
+}
+window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
+
+async function generateSampleData(options, classIndex = 0) {
+    let labelData = null;
+    if (selectedObject && selectedObject.visible && classIndex !== -1 && options.task !== 'classification') {
+        if (options.task === 'segmentation' && options.segmentationMethod === 'render') {
+            labelData = await generateRenderMaskData(classIndex, options);
+        } else {
+            const points = getProjected2dVertices();
+            if (points && points.length > 3) {
+                if (options.task === 'detection') {
+                    const hull = computeConvexHull(points);
+                    if (hull.length > 0) labelData = getDetectionLabel(hull, classIndex);
+                } else if (options.task === 'segmentation') {
+                    if (options.segmentationMethod === 'concave') {
+                        labelData = generateConcaveHullData(points, classIndex, options.concavity);
+                    } else {
+                        const hull = computeConvexHull(points);
+                        if (hull.length > 0) labelData = getSegmentationLabel(hull, classIndex);
+                    }
+                }
+            }
+        }
+    }
+    renderer.render(scene, camera);
+    const imageBlob = await getCanvasBlob();
+    return { imageBlob, labelData };
+}
+
+function getDetectionLabel(hull, classIndex) {
+    let minX = 1, maxX = -1, minY = 1, maxY = -1;
+    for (const p of hull) {
+        minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x);
+        minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y);
+    }
+    if (maxX <= minX || maxY <= minY) return null;
+    const normCenterX = (((minX + maxX) / 2) + 1) / 2;
+    const normCenterY = (-((minY + maxY) / 2) + 1) / 2;
+    const normWidth = (maxX - minX) / 2;
+    const normHeight = (maxY - minY) / 2;
+    if (normWidth < 0.001 || normHeight < 0.001) return null;
+    return `${classIndex} ${normCenterX.toFixed(6)} ${normCenterY.toFixed(6)} ${normWidth.toFixed(6)} ${normHeight.toFixed(6)}`;
+}
+
+function getSegmentationLabel(points, classIndex) {
+    if (points.length < 3) return null;
+    const yoloPoints = points.map(p => `${((p.x + 1) / 2).toFixed(6)} ${((-p.y + 1) / 2).toFixed(6)}`).join(' ');
+    return `${classIndex} ${yoloPoints}`;
+}
+
+function generateConcaveHullData(points, classIndex, concavity) {
+    const screenPoints = points.map(p => [p.x, p.y]);
+    const hull = concaveman(screenPoints, concavity);
+    if (hull.length < 3) return getSegmentationLabel(computeConvexHull(points), classIndex);
+    const mappedHull = hull.map(p => ({ x: p[0], y: p[1] }));
+    return getSegmentationLabel(mappedHull, classIndex);
+}
+
+async function generateRenderMaskData(classIndex, options) {
+    const assetInfo = modelAssets.find(m => m.name === selectedObject.name);
+    if (!assetInfo || !assetInfo.originalMaterials) return null;
+
+    const originalBackground = scene.background;
+
+    panoramaSphere.visible = false;
+
+    scene.background = new THREE.Color(0x000000);
+    selectedObject.traverse(node => { if (node.isMesh) node.material = maskMaterial; });
+    renderer.render(scene, camera);
+
+    const { width, height } = renderer.domElement;
+    const context = renderer.getContext();
+    const pixelData = new Uint8Array(width * height * 4);
+    context.readPixels(0, 0, width, height, context.RGBA, context.UNSIGNED_BYTE, pixelData);
+
+    scene.background = originalBackground;
+    selectedObject.traverse(node => { if (node.isMesh) node.material = assetInfo.originalMaterials.get(node); });
+
+    panoramaSphere.visible = true;
+
+    const contours = findContours(pixelData, width, height);
+    if (contours.length === 0) return null;
+
+    contours.sort((a, b) => b.length - a.length);
+    const mainContour = contours[0];
+
+    const simplifiedContour = rdp(mainContour, options.rdpEpsilon);
+    if (simplifiedContour.length < 3) return null;
+
+    const yoloPoints = simplifiedContour.map(p => `${(p.x / width).toFixed(6)} ${((height - p.y) / height).toFixed(6)}`).join(' ');
+    return `${classIndex} ${yoloPoints}`;
+}
+
+function computeConvexHull(points) {
+    if (points.length <= 3) return points;
+    points.sort((a, b) => a.x === b.x ? a.y - b.y : a.x - b.x);
+    const cross_product = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+    const lower = [];
+    for (const p of points) {
+        while (lower.length >= 2 && cross_product(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop();
+        lower.push(p);
+    }
+    const upper = [];
+    for (let i = points.length - 1; i >= 0; i--) {
+        const p = points[i];
+        while (upper.length >= 2 && cross_product(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop();
+        upper.push(p);
+    }
+    upper.pop(); lower.pop();
+    return lower.concat(upper);
+}
+
+function getProjected2dVertices() {
+    if (!selectedObject || !selectedObject.visible) return null;
+    const projectedVertices = [];
+    selectedObject.updateMatrixWorld(true);
+    selectedObject.traverse(node => {
+        if (node.isMesh) {
+            const geometry = node.geometry;
+            const positionAttribute = geometry.attributes.position;
+            if (!positionAttribute) return;
+            const vertex = new THREE.Vector3();
+            for (let i = 0; i < positionAttribute.count; i++) {
+                vertex.fromBufferAttribute(positionAttribute, i);
+                vertex.applyMatrix4(node.matrixWorld);
+                vertex.project(camera);
+                if (vertex.z < 1) projectedVertices.push({ x: vertex.x, y: vertex.y });
+            }
+        }
+    });
+    return projectedVertices.length > 0 ? projectedVertices : null;
+}
+
+function rdp(points, epsilon) {
+    if (points.length < 3) return points;
+    let dmax = 0; let index = 0;
+    const end = points.length - 1;
+    for (let i = 1; i < end; i++) {
+        const d = perpendicularDistance(points[i], points[0], points[end]);
+        if (d > dmax) { index = i; dmax = d; }
+    }
+    if (dmax > epsilon) {
+        const recResults1 = rdp(points.slice(0, index + 1), epsilon);
+        const recResults2 = rdp(points.slice(index, end + 1), epsilon);
+        return recResults1.slice(0, recResults1.length - 1).concat(recResults2);
+    } else { return [points[0], points[end]]; }
+}
+function perpendicularDistance(point, lineStart, lineEnd) {
+    let dx = lineEnd.x - lineStart.x; let dy = lineEnd.y - lineStart.y;
+    if (dx === 0 && dy === 0) return Math.sqrt(Math.pow(point.x - lineStart.x, 2) + Math.pow(point.y - lineStart.y, 2));
+    const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
+    const projectionX = lineStart.x + t * dx; const projectionY = lineStart.y + t * dy;
+    return Math.sqrt(Math.pow(point.x - projectionX, 2) + Math.pow(point.y - projectionY, 2));
+}
+
+function findContours(data, width, height) {
+    const visited = new Uint8Array(width * height);
+    const contours = [];
+    const isWhite = (x, y) => {
+        if (x < 0 || x >= width || y < 0 || y >= height) return false;
+        return data[(y * width + x) * 4] > 128;
+    };
+    const directions = [[0, -1], [1, 0], [0, 1], [-1, 0]]; // N, E, S, W
+
+    // Corrected loops to scan the entire image from (0,0).
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            // The condition `!isWhite(x, y - 1)` finds the top edge of a shape.
+            if (isWhite(x, y) && !isWhite(x, y - 1) && !visited[y * width + x]) {
+                const path = [];
+                let cx = x, cy = y;
+                // Start by looking East (1) from the initial point.
+                let dir = 1; 
+                
+                while (true) {
+                    path.push({ x: cx, y: cy });
+                    visited[cy * width + cx] = 1;
+                    
+                    let foundNext = false;
+                    // Check directions starting from the one to the left of the current direction.
+                    for (let i = 0; i < 4; i++) {
+                        const nextDir = (dir + 3 + i) % 4; // Turn left, then straight, then right
+                        const [dx, dy] = directions[nextDir];
+                        const nx = cx + dx, ny = cy + dy;
+
+                        if (isWhite(nx, ny)) {
+                            cx = nx;
+                            cy = ny;
+                            dir = nextDir;
+                            foundNext = true;
+                            break;
+                        }
+                    }
+                    if (!foundNext || (cx === x && cy === y)) {
+                        // Break if we're stuck or returned to the start
+                        break;
+                    }
+                }
+                if (path.length > 10) { // Keep a minimum length to avoid noise
+                    contours.push(path);
+                }
+            }
+        }
+    }
+    return contours;
+}
+
+init();

index.html

@@ -4,288 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Syntho-Animator Suite: Production Data Factory</title>
+    <title>YOLOSet: Data Factory</title>
 
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <style>
-        @import url('https://rsms.me/inter/inter.css');
-
-        html {
-            font-family: 'Inter', sans-serif;
-        }
-
-        body {
-            background-color: #0c0a09;
-            color: #e7e5e4;
-        }
-
-        .glass-ui {
-            background-color: rgba(28, 25, 23, 0.7);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .modal-overlay {
-            background-color: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-        }
-
-        .hidden {
-            display: none !important;
-        }
-
-        .side-panel {
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .side-panel.left {
-            transform: translateX(-100%);
-        }
-
-        .side-panel.right {
-            transform: translateX(100%);
-        }
-
-        .side-panel.is-open {
-            transform: translateX(0);
-        }
-
-        .panel-trigger {
-            transition: background-color 0.2s ease;
-        }
-
-        .panel-trigger:hover {
-            background-color: rgba(59, 130, 246, 0.5);
-        }
-
-        .asset-card {
-            transition: all 0.2s ease-in-out;
-            border: 2px solid transparent;
-        }
-
-        .asset-card:hover {
-            transform: scale(1.03);
-            background-color: rgba(59, 130, 246, 0.1);
-        }
-
-        .asset-card.active {
-            background-color: rgba(59, 130, 246, 0.2);
-            border-color: #3b82f6;
-        }
-
-        .panel-content::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .panel-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .panel-content::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-        }
-
-        .drop-zone {
-            border: 2px dashed #44403c;
-            transition: background-color 0.2s, border-color 0.2s;
-        }
-
-        .drop-zone.drag-over {
-            background-color: rgba(59, 130, 246, 0.15);
-            border-color: #3b82f6;
-        }
-
-        .loader-spinner,
-        .btn-spinner {
-            width: 48px;
-            height: 48px;
-            border: 4px solid #44403c;
-            border-top-color: #3b82f6;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        .notification-spinner,
-        .btn-spinner {
-            width: 20px;
-            height: 20px;
-            border: 2px solid #e7e5e4;
-            border-top-color: transparent;
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        .toggle-bg:after {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            background: white;
-            border-radius: 9999px;
-            height: 1.25rem;
-            width: 1.25rem;
-            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        input:checked+.toggle-bg {
-            background-color: #3b82f6;
-        }
-
-        input:checked+.toggle-bg:after {
-            transform: translateX(1.25rem);
-        }
-
-        input:disabled+.toggle-bg {
-            background-color: #44403c;
-            cursor: not-allowed;
-        }
-
-        input:disabled+.toggle-bg:after {
-            background-color: #57534e;
-        }
-
-        #main-canvas {
-            transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        #main-canvas.loading {
-            filter: blur(8px) brightness(0.6);
-        }
-
-        .notification {
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            transform: translateY(150%) scale(0.9);
-            opacity: 0;
-        }
-
-        .notification.show {
-            transform: translateY(0) scale(1);
-            opacity: 1;
-        }
-
-        .control-section {
-            transition: opacity 0.3s ease;
-        }
-
-        .sliders-container,
-        .accordion-content,
-        #concave-hull-options,
-        #background-ratio-container {
-            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding-top 0.4s, margin-top 0.4s, padding-bottom 0.4s;
-            overflow: hidden;
-        }
-
-        input[type="range"] {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 100%;
-            height: 6px;
-            background: #44403c;
-            border-radius: 5px;
-            outline: none;
-            transition: background 0.3s;
-            padding: 0;
-            margin: 0;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            background: #e7e5e4;
-            border-radius: 50%;
-            cursor: pointer;
-            border: 4px solid #3b82f6;
-            transition: all 0.2s ease-in-out;
-            margin-top: -7px;
-        }
-
-        input[type="range"]:hover::-webkit-slider-thumb {
-            background: #fff;
-            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
-        }
-
-        input[type="range"]::-moz-range-thumb {
-            width: 14px;
-            height: 14px;
-            background: #e7e5e4;
-            border-radius: 50%;
-            cursor: pointer;
-            border: 4px solid #3b82f6;
-        }
-
-        .tooltip-trigger {
-            position: relative;
-            cursor: help;
-        }
-
-        .tooltip-trigger .tooltip-content {
-            visibility: hidden;
-            opacity: 0;
-            position: absolute;
-            bottom: 125%;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: #1c1917;
-            color: #e7e5e4;
-            text-align: center;
-            padding: 8px 12px;
-            border-radius: 6px;
-            z-index: 50;
-            width: 240px;
-            font-size: 0.8rem;
-            line-height: 1.4;
-            transition: opacity 0.2s;
-            pointer-events: none;
-        }
-
-        .tooltip-trigger:hover .tooltip-content {
-            visibility: visible;
-            opacity: 1;
-        }
-
-        .method-radio-label,
-        .task-radio-label {
-            border: 2px solid #57534e;
-            transition: all 0.2s ease;
-        }
-
-        .method-radio-label:hover,
-        .task-radio-label:hover {
-            border-color: #a8a29e;
-        }
-
-        input[type="radio"]:checked+.method-radio-label,
-        input[type="radio"]:checked+.task-radio-label {
-            border-color: #3b82f6;
-            background-color: rgba(59, 130, 246, 0.2);
-        }
-
-        input[type=range].split-slider {
-            position: absolute;
-            background: transparent;
-            pointer-events: none;
-        }
-
-        input[type=range].split-slider::-webkit-slider-thumb {
-            pointer-events: auto;
-        }
-
-        input[type=range].split-slider::-moz-range-thumb {
-            pointer-events: auto;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body class="select-none overflow-hidden">
@@ -326,7 +49,7 @@
                                     <label for="dataset-samples"
                                         class="block text-sm font-medium text-stone-300 mb-2">Total Number of
                                         Samples</label>
-                                    <input type="number" id="dataset-samples" value="1000" min="10" max="10000"
+                                    <input type="number" id="dataset-samples" value="100" min="10" max="100000"
                                         class="w-full bg-stone-800/70 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none transition">
                                 </div>
                             </div>
@@ -341,7 +64,7 @@
                                     <div class="space-y-2">
                                         <div>
                                             <input type="radio" name="dataset-task" value="detection"
-                                                id="task-detection" class="sr-only" checked>
+                                                id="task-detection" class="sr-only">
                                             <label for="task-detection"
                                                 class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
                                                 <i data-feather="box" class="w-5 h-5 text-blue-400"></i>
@@ -355,7 +78,7 @@
                                         </div>
                                         <div>
                                             <input type="radio" name="dataset-task" value="segmentation"
-                                                id="task-segmentation" class="sr-only">
+                                                id="task-segmentation" class="sr-only" checked>
                                             <label for="task-segmentation"
                                                 class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
                                                 <i data-feather="pen-tool" class="w-5 h-5 text-blue-400"></i>
@@ -388,7 +111,7 @@
                                     <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                         <div>
                                             <input type="radio" name="segmentation-method" value="convex"
-                                                id="method-convex" class="sr-only" checked>
+                                                id="method-convex" class="sr-only">
                                             <label for="method-convex"
                                                 class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
                                                 <h5 class="font-semibold text-sm">Convex Hull</h5>
@@ -406,7 +129,7 @@
                                         </div>
                                         <div>
                                             <input type="radio" name="segmentation-method" value="render"
-                                                id="method-render" class="sr-only">
+                                                id="method-render" class="sr-only" checked>
                                             <label for="method-render"
                                                 class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
                                                 <h5 class="font-semibold text-sm">Render Mask</h5>
@@ -429,6 +152,23 @@
                                             <input type="range" id="concave-hull-concavity" min="1" max="10" value="2">
                                         </div>
                                     </div>
+                                    <div id="render-mask-options" style="max-height: 0; opacity: 0; overflow: hidden;">
+                                        <div class="pt-3 space-y-2">
+                                            <label for="mask-simplification-slider"
+                                                class="text-sm font-medium text-stone-300 flex justify-between">Mask
+                                                Simplification
+                                                <span id="mask-simplification-value">0.1</span>
+                                                <span class="tooltip-trigger">
+                                                    <i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i>
+                                                    <span class="tooltip-content">Controls mask accuracy. Lower values
+                                                        create more detailed masks (more vertices). Higher values create
+                                                        simpler masks (fewer vertices).</span>
+                                                </span>
+                                            </label>
+                                            <input type="range" id="mask-simplification-slider" min="0.1" max="3"
+                                                step="0.1" value="0.1">
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -456,7 +196,7 @@
                                         class="font-medium text-stone-300 select-none cursor-pointer">Include Test
                                         Set</label>
                                     <label class="relative inline-flex items-center cursor-pointer">
-                                        <input type="checkbox" id="include-test-set" class="sr-only peer">
+                                        <input type="checkbox" id="include-test-set" class="sr-only peer" checked>
                                         <div
                                             class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg">
                                         </div>
@@ -614,8 +354,8 @@
                                                         current panorama.</span></span>
                                             </label>
                                             <label class="relative inline-flex items-center cursor-pointer">
-                                                <input type="checkbox" id="randomize-camera-toggle"
-                                                    class="sr-only peer">
+                                                <input type="checkbox" id="randomize-camera-toggle" class="sr-only peer"
+                                                    checked>
                                                 <div
                                                     class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg">
                                                 </div>
@@ -625,13 +365,13 @@
                                             style="max-height: 0; opacity: 0; overflow: hidden;">
                                             <div><label for="horizontal-variance"
                                                     class="text-sm flex justify-between">Horizontal Var. <span
-                                                        id="horizontal-variance-value">20°</span></label><input
-                                                    type="range" id="horizontal-variance" min="0" max="180" value="20">
+                                                        id="horizontal-variance-value">180°</span></label><input
+                                                    type="range" id="horizontal-variance" min="0" max="180" value="180">
                                             </div>
                                             <div><label for="vertical-variance"
                                                     class="text-sm flex justify-between">Vertical Var. <span
-                                                        id="vertical-variance-value">0°</span></label><input
-                                                    type="range" id="vertical-variance" min="0" max="90" value="0">
+                                                        id="vertical-variance-value">20°</span></label><input
+                                                    type="range" id="vertical-variance" min="0" max="90" value="20">
                                             </div>
                                         </div>
                                     </div>
@@ -752,948 +492,19 @@
             class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
     </aside>
 
-    <script type="importmap">{ "imports": {
-        "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-        "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
-        "concaveman": "https://cdn.skypack.dev/concaveman"
-    } }</script>
-
-    <script type="module">
-        import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-        import { TransformControls } from 'three/addons/controls/TransformControls.js';
-        import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
-        import JSZip from "https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm";
-        import gsap from "https://cdn.jsdelivr.net/npm/gsap@3.12.5/+esm";
-        import concaveman from 'concaveman';
-
-        const ASSET_BASE_URL = 'https://huggingface.co/spaces/aaurelions/drones/resolve/main';
-        const defaultPanoramas = Array.from({ length: 10 }, (_, i) => ({ name: `bg${i + 1}.jpg`, url: `${ASSET_BASE_URL}/jpg/bg${i + 1}.jpg`, thumb: `${ASSET_BASE_URL}/jpg/thumbnails/bg${i + 1}.jpg` }));
-        const defaultModels = ['gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb'].map(n => ({ name: n, url: `${ASSET_BASE_URL}/glb/${n}`, thumb: `${ASSET_BASE_URL}/glb/thumbnails/${n.replace('.glb', '.png')}` }));
-
-        let panoramaAssets = [...defaultPanoramas];
-        let modelAssets = [...defaultModels];
-
-        let scene, camera, renderer, orbitControls, transformControls, pmremGenerator, panoramaSphere;
-        let selectedObject = null;
-        let activeControlMode = null;
-        let activePanorama = null;
-
-        let maskScene, maskMaterial;
-
-        const loaderOverlay = document.getElementById('loader-overlay');
-        const loaderText = document.getElementById('loader-text');
-        const canvas = document.getElementById('main-canvas');
-
-        async function init() {
-            loaderText.textContent = 'Setting up 3D scene...';
-            scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 2000);
-            camera.position.set(0, 1.5, 8);
-
-            renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
-            renderer.setPixelRatio(window.devicePixelRatio);
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.toneMapping = THREE.ACESFilmicToneMapping;
-            renderer.toneMappingExposure = 1.0;
-            renderer.outputColorSpace = THREE.SRGBColorSpace;
-
-            pmremGenerator = new THREE.PMREMGenerator(renderer);
-            pmremGenerator.compileEquirectangularShader();
-
-            const panoGeometry = new THREE.SphereGeometry(1000, 60, 40);
-            panoGeometry.scale(-1, 1, 1);
-            const panoMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
-            panoramaSphere = new THREE.Mesh(panoGeometry, panoMaterial);
-            scene.add(panoramaSphere);
-
-            orbitControls = new OrbitControls(camera, renderer.domElement);
-            orbitControls.enableDamping = true;
-            orbitControls.target.set(0, 1, 0);
-
-            transformControls = new TransformControls(camera, renderer.domElement);
-            transformControls.enabled = false;
-            scene.add(transformControls);
-
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            dirLight.position.set(8, 15, 10);
-            scene.add(ambientLight, dirLight);
-
-            maskScene = new THREE.Scene();
-            maskMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
-
-            setupUI();
-            setupEventListeners();
-            animate();
-
-            try {
-                await loadAsset(panoramaAssets[6], 'panorama');
-                await loadAsset(modelAssets[1], 'model');
-                setControlMode('translate');
-            } catch (error) {
-                showNotification({ text: `Initialization failed: ${error.message}`, type: 'error' });
-                console.error("Initialization failed:", error);
-            } finally {
-                gsap.to(loaderOverlay, { opacity: 0, duration: 0.5, onComplete: () => loaderOverlay.classList.add('hidden') });
-            }
-        }
-
-        async function loadAsset(assetData, assetType, button = null) {
-            const isInitialLoad = !loaderOverlay.classList.contains('hidden');
-            let spinner, textSpan;
-            if (button) {
-                spinner = button.querySelector('.btn-spinner');
-                textSpan = button.querySelector('.btn-text');
-                spinner.classList.remove('hidden');
-                textSpan.classList.add('hidden');
-                button.disabled = true;
-            } else if (!isInitialLoad) {
-                loaderText.textContent = `Loading ${assetType}...`;
-                loaderOverlay.classList.remove('hidden');
-                gsap.to(loaderOverlay, { opacity: 1, duration: 0.3 });
-                canvas.classList.add('loading');
-            } else {
-                loaderText.textContent = `Loading ${assetType}: ${assetData.name}`;
-            }
-
-            try {
-                if (assetType === 'panorama') {
-                    await new Promise((resolve, reject) => {
-                        const isHDR = assetData.url.endsWith('.hdr');
-                        const loader = isHDR ? new RGBELoader() : new THREE.TextureLoader();
-                        loader.load(assetData.url, (texture) => {
-                            texture.mapping = THREE.EquirectangularReflectionMapping;
-                            if (!isHDR) texture.colorSpace = THREE.SRGBColorSpace;
-
-                            if (panoramaSphere) {
-                                panoramaSphere.material.map = texture;
-                                panoramaSphere.material.needsUpdate = true;
-                            }
-
-                            scene.environment = pmremGenerator.fromEquirectangular(texture).texture;
-
-                            scene.background = texture;
-                            scene.environment = pmremGenerator.fromEquirectangular(texture).texture;
-                            pmremGenerator.dispose();
-                            texture.dispose();
-                            activePanorama = assetData;
-                            setActiveCard('panorama-gallery', assetData.name);
-                            resolve();
-                        }, undefined, reject);
-                    });
-                } else {
-                    if (selectedObject) transformControls.detach();
-
-                    const existingAsset = modelAssets.find(m => m.name === assetData.name && m.mesh);
-                    if (existingAsset) {
-                        modelAssets.forEach(m => { if (m.mesh) m.mesh.visible = false; });
-                        existingAsset.mesh.visible = true;
-                        selectedObject = existingAsset.mesh;
-                    } else {
-                        await new Promise((resolve, reject) => {
-                            const loader = new GLTFLoader();
-                            loader.load(assetData.url, (gltf) => {
-                                modelAssets.forEach(m => { if (m.mesh) m.mesh.visible = false; });
-                                const model = gltf.scene;
-                                model.name = assetData.name;
-                                const box = new THREE.Box3().setFromObject(model);
-                                const size = box.getSize(new THREE.Vector3());
-                                const center = box.getCenter(new THREE.Vector3());
-                                model.position.sub(center);
-                                const maxDim = Math.max(size.x, size.y, size.z);
-                                model.scale.setScalar(4.0 / maxDim);
-                                scene.add(model);
-
-                                const assetToUpdate = modelAssets.find(m => m.name === assetData.name);
-                                if (assetToUpdate) {
-                                    assetToUpdate.mesh = model;
-
-                                    assetToUpdate.originalMaterials = new Map();
-                                    model.traverse(node => {
-                                        if (node.isMesh) assetToUpdate.originalMaterials.set(node, node.material);
-                                    });
-                                }
-
-                                selectedObject = model;
-                                resolve();
-                            }, undefined, reject);
-                        });
-                    }
-                    if (activeControlMode) transformControls.attach(selectedObject);
-                    setActiveCard('model-selector', assetData.name);
-                }
-            } catch (error) {
-                showNotification({ text: `Failed to load ${assetType}: ${assetData.name}`, type: 'error', duration: 4000 });
-                console.error(`Failed to load ${assetType}:`, error);
-            } finally {
-                if (button) {
-                    spinner.classList.add('hidden');
-                    textSpan.classList.remove('hidden');
-                    button.disabled = false;
-                } else if (!isInitialLoad) {
-                    gsap.to(loaderOverlay, { opacity: 0, duration: 0.5, onComplete: () => loaderOverlay.classList.add('hidden') });
-                    canvas.classList.remove('loading');
-                }
-            }
-        }
-
-        function createAssetCard(type, assetData) {
-            const container = document.createElement('div');
-            container.className = 'asset-card flex flex-col rounded-lg cursor-pointer overflow-hidden bg-stone-900/50';
-            container.dataset.name = assetData.name;
-            const thumbWrapper = document.createElement('div');
-            thumbWrapper.className = 'w-full h-28 flex items-center justify-center';
-            const thumb = document.createElement('img');
-            thumb.className = 'max-w-full max-h-full object-contain';
-
-            container.onclick = () => loadAsset(assetData, type);
-
-            if (type === 'model') {
-                thumbWrapper.classList.add('p-2');
-                thumb.src = assetData.thumb;
-                const nameWrapper = document.createElement('div');
-                nameWrapper.textContent = assetData.name.replace(/\.[^/.]+$/, "").substring(0, 15);
-                nameWrapper.className = 'text-white text-xs font-semibold text-center block truncate p-2 bg-black/20 mt-auto';
-                thumbWrapper.appendChild(thumb);
-                container.append(thumbWrapper, nameWrapper);
-            } else {
-                thumb.className = 'w-full h-full object-cover';
-                thumb.src = assetData.thumb;
-                thumbWrapper.appendChild(thumb);
-                container.appendChild(thumbWrapper);
-            }
-
-            thumb.onerror = () => {
-                thumbWrapper.innerHTML = `<i data-feather="package" class="w-12 h-12 text-stone-500"></i>`;
-                feather.replace();
-                thumbWrapper.parentElement.classList.add('bg-stone-800');
-            }
-            document.getElementById(type === 'model' ? 'model-selector' : 'panorama-gallery').appendChild(container);
-        }
-
-        function setupUI() {
-            feather.replace();
-            modelAssets.forEach(m => createAssetCard('model', m));
-            panoramaAssets.forEach(p => createAssetCard('panorama', p));
-        }
-
-        function setControlMode(mode) {
-            if (mode === activeControlMode) {
-                activeControlMode = null;
-                transformControls.detach();
-                transformControls.enabled = false;
-            } else {
-                activeControlMode = mode;
-                transformControls.setMode(activeControlMode);
-                transformControls.enabled = true;
-                if (selectedObject) transformControls.attach(selectedObject);
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
+                "concaveman": "https://cdn.skypack.dev/concaveman",
+                "gsap": "https://cdn.jsdelivr.net/npm/gsap@3.12.5/+esm",
+                "jszip": "https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm"
             }
-            document.querySelectorAll('.control-btn').forEach(b => b.classList.toggle('bg-blue-600', b.dataset.mode === activeControlMode));
         }
-
-        function setupEventListeners() {
-            ['model', 'panorama'].forEach(type => {
-                document.getElementById(`${type}-panel-trigger`).addEventListener('click', e => { e.stopPropagation(); document.getElementById(`${type}-panel`).classList.add('is-open'); });
-                document.getElementById(`close-${type}-panel`).addEventListener('click', () => document.getElementById(`${type}-panel`).classList.remove('is-open'));
-            });
-
-            document.getElementById('day-night-toggle').addEventListener('change', (e) => {
-                const isNight = e.target.checked;
-                const tintColor = isNight ? 0x202040 : 0xffffff;
-
-                if (panoramaSphere) {
-                    gsap.to(panoramaSphere.material.color, {
-                        r: (tintColor >> 16 & 255) / 255,
-                        g: (tintColor >> 8 & 255) / 255,
-                        b: (tintColor & 255) / 255,
-                        duration: 0.5
-                    });
-                }
-
-                gsap.to(renderer, { toneMappingExposure: isNight ? 0.3 : 1.0, duration: 0.5 });
-                gsap.to(scene.children.find(c => c.isDirectionalLight), { intensity: isNight ? 0.2 : 1.0, duration: 0.5 });
-            });
-
-            document.querySelectorAll('.control-btn').forEach(btn => btn.addEventListener('click', () => setControlMode(btn.dataset.mode)));
-            transformControls.addEventListener('dragging-changed', e => { orbitControls.enabled = !e.value; });
-
-            canvas.addEventListener('click', (e) => {
-                if (transformControls.dragging) return;
-                const rect = renderer.domElement.getBoundingClientRect();
-                const mouse = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
-                const raycaster = new THREE.Raycaster();
-                raycaster.setFromCamera(mouse, camera);
-                const visibleMeshObjects = modelAssets.map(m => m.mesh).filter(m => m && m.visible);
-                if (visibleMeshObjects.length === 0) return;
-                const intersects = raycaster.intersectObjects(visibleMeshObjects, true);
-
-                if (intersects.length > 0) {
-                    const object = findTopLevelGroup(intersects[0].object);
-                    if (object && object.isGroup && object !== selectedObject) {
-                        const modelData = modelAssets.find(m => m.name === object.name);
-                        if (modelData) loadAsset(modelData, 'model');
-                    }
-                }
-            });
-
-            window.addEventListener('keydown', (e) => {
-                if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'SELECT') return;
-                const key = e.key.toLowerCase();
-                if (key === 'w' || key === 'e' || key === 'r') { e.preventDefault(); setControlMode(key === 'w' ? 'translate' : key === 'e' ? 'rotate' : 'scale'); }
-                if (key === 'g') { e.preventDefault(); document.getElementById('generate-dataset-btn').click(); }
-                if (key === 'escape') { document.querySelectorAll('.side-panel.is-open, .modal-overlay.flex').forEach(p => p.classList.add('hidden')); }
-            });
-
-            setupUploadModal();
-            setupDatasetModal();
-        }
-
-        function setupUploadModal() {
-            const modal = document.getElementById('upload-modal');
-            const title = document.getElementById('upload-title');
-            const fileInput = document.getElementById('upload-file-input');
-            const urlInput = document.getElementById('upload-url-input');
-            const dropZone = document.getElementById('upload-drop-zone');
-            const loadBtn = document.getElementById('upload-load-btn');
-            let currentType, currentHandler;
-
-            const openModal = (type, titleText, accept, placeholder, handler) => {
-                currentType = type;
-                title.textContent = titleText;
-                fileInput.value = ''; urlInput.value = '';
-                fileInput.accept = accept;
-                urlInput.placeholder = placeholder;
-                currentHandler = handler;
-                modal.classList.remove('hidden'); modal.classList.add('flex');
-            };
-
-            document.getElementById('add-model-btn').addEventListener('click', () => openModal('model', 'Upload New Model', '.glb,.gltf', 'Enter .glb URL', (type, data) => handleNewAsset(type, data, loadBtn)));
-            document.getElementById('add-panorama-btn').addEventListener('click', () => openModal('panorama', 'Upload New Panorama', 'image/*,.hdr', 'Enter image URL', (type, data) => handleNewAsset(type, data, loadBtn)));
-            document.getElementById('upload-cancel-btn').addEventListener('click', () => modal.classList.add('hidden'));
-
-            loadBtn.addEventListener('click', () => {
-                const url = urlInput.value.trim();
-                if (url) currentHandler(currentType, url, loadBtn);
-            });
-            dropZone.addEventListener('click', () => fileInput.click());
-            fileInput.addEventListener('change', e => { if (e.target.files.length) currentHandler(currentType, e.target.files[0], loadBtn) });
-            dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
-            dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
-            dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length) currentHandler(currentType, e.dataTransfer.files[0], loadBtn); });
-        }
-
-        async function handleNewAsset(type, fileOrUrl, button) {
-            document.getElementById('upload-modal').classList.add('hidden');
-            const isUrl = typeof fileOrUrl === 'string';
-            const url = isUrl ? fileOrUrl : URL.createObjectURL(fileOrUrl);
-            const name = (isUrl ? new URL(url).pathname.split('/').pop() : fileOrUrl.name).substring(0, 25);
-
-            const newAssetData = { name, url, mesh: null };
-            if (type === 'model') {
-                if (modelAssets.some(m => m.name === name)) {
-                    showNotification({ text: `Model "${name}" already exists.`, type: 'error' });
-                    return;
-                }
-                newAssetData.thumb = 'placeholder';
-                modelAssets.push(newAssetData);
-                createAssetCard('model', newAssetData);
-                await loadAsset(newAssetData, 'model', button);
-            } else {
-                if (panoramaAssets.some(p => p.name === name)) {
-                    showNotification({ text: `Panorama "${name}" already exists.`, type: 'error' });
-                    return;
-                }
-                newAssetData.thumb = url;
-                panoramaAssets.push(newAssetData);
-                createAssetCard('panorama', newAssetData);
-                await loadAsset(newAssetData, 'panorama', button);
-            }
-        }
-
-        function setupDatasetModal() {
-            const modal = document.getElementById('dataset-modal');
-
-            document.getElementById('generate-dataset-btn').addEventListener('click', () => {
-                modal.classList.remove('hidden');
-                modal.classList.add('flex');
-                feather.replace();
-                updateDatasetModalUI();
-            });
-
-            document.getElementById('cancel-dataset').addEventListener('click', () => modal.classList.add('hidden'));
-            document.getElementById('start-dataset').addEventListener('click', handleDatasetGeneration);
-
-            document.querySelectorAll('#dataset-modal input[type="radio"], #dataset-modal input[type="checkbox"]').forEach(input => {
-                input.addEventListener('change', updateDatasetModalUI);
-            });
-
-            const setupSlider = (sliderId, displayId, unit) => {
-                const slider = document.getElementById(sliderId);
-                const display = document.getElementById(displayId);
-                if (slider && display) {
-                    const update = () => { display.textContent = slider.value + unit; };
-                    update();
-                    slider.addEventListener('input', update);
-                }
-            };
-            setupSlider('position-variance', 'position-variance-value', '%');
-            setupSlider('rotation-variance', 'rotation-variance-value', '%');
-            setupSlider('scale-variance', 'scale-variance-value', '%');
-            setupSlider('horizontal-variance', 'horizontal-variance-value', '°');
-            setupSlider('vertical-variance', 'vertical-variance-value', '°');
-            setupSlider('concave-hull-concavity', 'concave-hull-concavity-value', '');
-            setupSlider('background-ratio-slider', 'background-ratio-value', '%');
-
-            const trainSlider = document.getElementById('split-train-ratio');
-            const valSlider = document.getElementById('split-val-ratio');
-
-            const bringToFront = (el, topZ, bottomZ) => {
-                el.style.zIndex = topZ;
-                (el === trainSlider ? valSlider : trainSlider).style.zIndex = bottomZ;
-            }
-
-            trainSlider.addEventListener('input', () => { if (parseInt(trainSlider.value) >= parseInt(valSlider.value)) valSlider.value = parseInt(trainSlider.value); updateSplitRatios(); });
-            valSlider.addEventListener('input', () => { if (parseInt(valSlider.value) <= parseInt(trainSlider.value)) trainSlider.value = parseInt(valSlider.value); updateSplitRatios(); });
-
-            trainSlider.addEventListener('mousedown', () => bringToFront(trainSlider, 25, 20));
-            trainSlider.addEventListener('touchstart', () => bringToFront(trainSlider, 25, 20));
-            valSlider.addEventListener('mousedown', () => bringToFront(valSlider, 25, 20));
-            valSlider.addEventListener('touchstart', () => bringToFront(valSlider, 25, 20));
-        }
-
-        function updateDatasetModalUI() {
-
-            const useCurrentModel = document.querySelector('input[name="model-source"]:checked')?.value === 'current';
-            const modelInfo = document.getElementById('model-source-current-info');
-            modelInfo.textContent = `Using: ${selectedObject ? selectedObject.name : 'None'}`;
-            modelInfo.classList.toggle('hidden', !useCurrentModel);
-
-            const useCurrentPano = document.querySelector('input[name="pano-source"]:checked')?.value === 'current';
-            const panoInfo = document.getElementById('pano-source-current-info');
-            panoInfo.textContent = `Using: ${activePanorama ? activePanorama.name : 'None'}`;
-            panoInfo.classList.toggle('hidden', !useCurrentPano);
-
-            const randomizeModel = document.getElementById('randomize-model-toggle')?.checked;
-            gsap.to("#model-sliders", { maxHeight: randomizeModel ? 200 : 0, opacity: randomizeModel ? 1 : 0, paddingTop: randomizeModel ? '0.75rem' : 0, duration: 0.4 });
-
-            const cameraSection = document.getElementById('camera-randomization-section');
-            const cameraToggle = document.getElementById('randomize-camera-toggle');
-            cameraSection.style.opacity = useCurrentPano ? '1' : '0.5';
-            cameraToggle.disabled = !useCurrentPano;
-            if (!useCurrentPano) { cameraToggle.checked = false; }
-            const cameraToggleLabel = cameraToggle.closest('label.flex.items-center.gap-2');
-            if (cameraToggleLabel) cameraToggleLabel.style.cursor = useCurrentPano ? 'pointer' : 'not-allowed';
-
-            const randomizeCamera = useCurrentPano && cameraToggle.checked;
-            gsap.to("#camera-sliders", { maxHeight: randomizeCamera ? 150 : 0, opacity: randomizeCamera ? 1 : 0, paddingTop: randomizeCamera ? '0.75rem' : 0, duration: 0.4 });
-
-            const task = document.querySelector('input[name="dataset-task"]:checked').value;
-            const segGroup = document.getElementById('segmentation-method-group');
-            const segMethod = document.querySelector('input[name="segmentation-method"]:checked').value;
-            const concaveOptions = document.getElementById('concave-hull-options');
-
-            const showSegGroup = task === 'segmentation';
-            gsap.to(segGroup, {
-                maxHeight: showSegGroup ? 300 : 0,
-                opacity: showSegGroup ? 1 : 0,
-                paddingTop: showSegGroup ? '0.5rem' : 0,
-                marginTop: showSegGroup ? '1rem' : 0,
-                duration: 0.4
-            });
-
-            const showConcaveOptions = showSegGroup && segMethod === 'concave';
-            gsap.to(concaveOptions, {
-                maxHeight: showConcaveOptions ? 100 : 0,
-                opacity: showConcaveOptions ? 1 : 0,
-                paddingTop: showConcaveOptions ? '0.75rem' : 0,
-                duration: 0.4
-            });
-
-            const includeBackgrounds = document.getElementById('include-background-toggle').checked;
-            gsap.to("#background-ratio-container", {
-                maxHeight: includeBackgrounds ? 100 : 0,
-                opacity: includeBackgrounds ? 1 : 0,
-                paddingTop: includeBackgrounds ? '0.5rem' : 0,
-                duration: 0.4
-            });
-
-            updateSplitRatios();
-        }
-
-        function updateSplitRatios() {
-            const valToggle = document.getElementById('include-val-set');
-            const testToggle = document.getElementById('include-test-set');
-            const trainSlider = document.getElementById('split-train-ratio');
-            const valSlider = document.getElementById('split-val-ratio');
-
-            valSlider.disabled = !valToggle.checked;
-            testToggle.disabled = !valToggle.checked;
-            if (!valToggle.checked) testToggle.checked = false;
-
-            valSlider.style.visibility = testToggle.checked ? 'visible' : 'hidden';
-
-            valSlider.parentElement.style.opacity = valToggle.checked ? '1' : '0.4';
-
-            const trainPctRaw = parseInt(trainSlider.value);
-            let valEndPctRaw = valToggle.checked ? parseInt(valSlider.value) : trainPctRaw;
-
-            const trainPct = Math.max(0, Math.min(100, trainPctRaw));
-            let valEndPct = valToggle.checked ? Math.max(trainPct, Math.min(100, valEndPctRaw)) : trainPct;
-
-            if (!testToggle.checked) {
-                valEndPct = 100;
-            }
-
-            const valPct = valToggle.checked ? valEndPct - trainPct : 0;
-            const testPct = testToggle.checked ? 100 - valEndPct : 0;
-            const trainDisplayPct = 100 - valPct - testPct;
-
-            document.getElementById('split-train-display').textContent = `${trainDisplayPct}%`;
-            document.getElementById('split-val-display').textContent = `${valPct}%`;
-            document.getElementById('split-test-display').textContent = `${testPct}%`;
-
-            document.getElementById('split-val-display').style.visibility = valToggle.checked ? 'visible' : 'hidden';
-            document.getElementById('split-test-display').style.visibility = testToggle.checked ? 'visible' : 'hidden';
-
-            const total = trainDisplayPct + valPct + testPct;
-            document.getElementById('split-ratio-sum').textContent = total;
-
-            document.getElementById('split-bg-train').style.width = `${trainDisplayPct}%`;
-            const valBg = document.getElementById('split-bg-val');
-            valBg.style.left = `${trainDisplayPct}%`;
-            valBg.style.width = `${valPct}%`;
-            valBg.style.display = valToggle.checked ? 'block' : 'none';
-
-            const testBg = document.getElementById('split-bg-test');
-            testBg.style.left = `${trainDisplayPct + valPct}%`;
-            testBg.style.width = `${testPct}%`;
-            testBg.style.display = testToggle.checked ? 'block' : 'none';
-        }
-
-        async function handleDatasetGeneration() {
-            const startBtn = document.getElementById('start-dataset');
-            const cancelBtn = document.getElementById('cancel-dataset');
-            const btnText = startBtn.querySelector('.btn-text');
-            const btnSpinner = startBtn.querySelector('.btn-spinner');
-
-            btnText.classList.add('hidden');
-            btnSpinner.classList.remove('hidden');
-            startBtn.disabled = true;
-            cancelBtn.disabled = true;
-
-            try {
-                const trainSlider = document.getElementById('split-train-ratio');
-                const valSlider = document.getElementById('split-val-ratio');
-
-                const options = {
-                    task: document.querySelector('input[name="dataset-task"]:checked').value,
-                    segmentationMethod: document.querySelector('input[name="segmentation-method"]:checked').value,
-                    concavity: parseFloat(document.getElementById('concave-hull-concavity').value),
-                    samples: parseInt(document.getElementById('dataset-samples').value),
-                    name: document.getElementById('dataset-name').value.trim(),
-
-                    includeBackgrounds: document.getElementById('include-background-toggle').checked,
-                    backgroundRatio: parseInt(document.getElementById('background-ratio-slider').value) / 100,
-
-                    useCurrentModel: document.querySelector('input[name="model-source"]:checked').value === 'current',
-                    randomizeModel: document.getElementById('randomize-model-toggle').checked,
-                    posVar: parseInt(document.getElementById('position-variance').value) / 100,
-                    rotVar: parseInt(document.getElementById('rotation-variance').value) / 100,
-                    scaleVar: parseInt(document.getElementById('scale-variance').value) / 100,
-                    useCurrentPanorama: document.querySelector('input[name="pano-source"]:checked').value === 'current',
-                    randomizeCamera: document.getElementById('randomize-camera-toggle').checked,
-                    hVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('horizontal-variance').value)),
-                    vVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('vertical-variance').value)),
-                    includeVal: document.getElementById('include-val-set').checked,
-                    includeTest: document.getElementById('include-test-set').checked,
-                    trainSplit: parseInt(trainSlider.value),
-                    valSplit: parseInt(valSlider.value),
-                    initial: {
-                        model: {
-                            position: selectedObject ? selectedObject.position.clone() : new THREE.Vector3(),
-                            rotation: selectedObject ? selectedObject.rotation.clone() : new THREE.Euler(),
-                            scale: selectedObject ? selectedObject.scale.x : 1
-                        },
-                        camera: { position: camera.position.clone() }
-                    }
-                };
-
-                if (!options.name) { showNotification({ text: "Dataset name cannot be empty.", type: "error" }); return; }
-                if ((options.task === 'detection' || options.task === 'segmentation') && !options.includeVal) {
-                    showNotification({ text: "Validation set is required for YOLO formats.", type: "error" });
-                    document.getElementById('include-val-set').checked = true;
-                    updateDatasetModalUI();
-                    return;
-                }
-
-                document.getElementById('dataset-modal').classList.add('hidden');
-                const progressContainer = document.getElementById('progress-container');
-                progressContainer.classList.remove('hidden'); progressContainer.classList.add('flex');
-
-                const zip = new JSZip();
-                const rootFolderName = options.name;
-                const usedClasses = new Set();
-
-                const originalModelAsset = selectedObject ? modelAssets.find(m => m.name === selectedObject.name) : null;
-                const originalPanoramaAsset = activePanorama;
-                const transformWasVisible = transformControls.visible;
-                if (transformWasVisible) transformControls.visible = false;
-
-                for (let i = 0; i < options.samples; i++) {
-                    updateProgress(i + 1, options.samples);
-                    const currentModelAsset = await randomizeSceneForGeneration(options, usedClasses);
-
-                    renderer.render(scene, camera);
-                    const imageName = `sample_${String(i).padStart(5, '0')}.jpg`;
-                    const labelName = imageName.replace('.jpg', '.txt');
-
-                    const modelClassName = currentModelAsset ? currentModelAsset.name.replace(/\.[^/.]+$/, "") : 'background_only';
-                    const classIndex = currentModelAsset ? modelAssets.findIndex(m => m.name === currentModelAsset.name) : -1;
-
-                    const { imageBlob, labelData } = await generateSampleData(options, classIndex);
-
-                    if (imageBlob) {
-                        const randomVal = Math.random() * 100;
-                        let splitFolder = 'train';
-
-                        const valPct = options.includeVal ? options.valSplit - options.trainSplit : 0;
-                        const testPct = options.includeTest ? 100 - options.valSplit : 0;
-                        const trainPct = 100 - valPct - testPct;
-
-                        if (options.includeTest && randomVal > (trainPct + valPct)) {
-                            splitFolder = 'test';
-                        } else if (options.includeVal && randomVal > trainPct) {
-                            splitFolder = 'val';
-                        }
-
-                        if (options.task === 'classification') {
-                            const classFolder = currentModelAsset && selectedObject.visible ? modelClassName : 'background_only';
-                            zip.folder(rootFolderName).folder(splitFolder).folder(classFolder).file(imageName, imageBlob);
-                        } else {
-                            zip.folder(rootFolderName).folder('images').folder(splitFolder).file(imageName, imageBlob);
-                            if (labelData) { zip.folder(rootFolderName).folder('labels').folder(splitFolder).file(labelName, labelData); }
-                        }
-                    }
-                    if (i % 10 === 0) await new Promise(resolve => setTimeout(resolve, 1));
-                }
-
-                if (options.task !== 'classification') {
-                    const classNames = Array.from(usedClasses).sort().map((name, index) => `  ${index}: ${name.replace(/\.[^/.]+$/, "")}`).join('\n');
-                    let yamlContent = `path: ${rootFolderName}\ntrain: images/train\nval: images/val\n`;
-                    if (options.includeTest) yamlContent += `test: images/test\n`;
-                    yamlContent += `\nnames:\n${classNames}`;
-                    zip.folder(rootFolderName).file(`${options.name}.yaml`, yamlContent);
-                }
-
-                if (transformWasVisible) transformControls.visible = true;
-
-                updateProgress(options.samples, options.samples, "Compressing ZIP...");
-                const content = await zip.generateAsync({ type: "blob" });
-                const link = document.createElement('a');
-                link.href = URL.createObjectURL(content);
-                link.download = `${rootFolderName}.zip`;
-                link.click();
-                URL.revokeObjectURL(link.href);
-                progressContainer.classList.add('hidden');
-                showNotification({ text: 'Dataset generation complete!', type: 'success' });
-
-                await loadAsset(originalPanoramaAsset || panoramaAssets[0], 'panorama');
-                await loadAsset(originalModelAsset || modelAssets[0], 'model');
-
-            } finally {
-                btnText.classList.remove('hidden');
-                btnSpinner.classList.add('hidden');
-                startBtn.disabled = false;
-                cancelBtn.disabled = false;
-            }
-        }
-
-        async function randomizeSceneForGeneration(options, usedClasses) {
-            let currentModelAsset;
-            if (!options.useCurrentPanorama) {
-                const randomPano = panoramaAssets[Math.floor(Math.random() * panoramaAssets.length)];
-                await loadAsset(randomPano, 'panorama');
-            }
-            if (!options.useCurrentModel) {
-                currentModelAsset = modelAssets[Math.floor(Math.random() * modelAssets.length)];
-                await loadAsset(currentModelAsset, 'model');
-            } else {
-                currentModelAsset = modelAssets.find(m => m.name === selectedObject.name);
-            }
-
-            if (!currentModelAsset || !selectedObject) return null;
-
-            if (options.includeBackgrounds && Math.random() < options.backgroundRatio) {
-                selectedObject.visible = false;
-            } else {
-                selectedObject.visible = true;
-            }
-
-            if (selectedObject.visible) {
-                usedClasses.add(currentModelAsset.name);
-            }
-
-            if (!selectedObject.visible) return null;
-
-            if (options.randomizeModel) {
-                if (options.useCurrentModel) {
-                    const { position: basePos, rotation: baseRot, scale: baseScale } = options.initial.model;
-                    selectedObject.position.copy(basePos).add(new THREE.Vector3().randomDirection().multiplyScalar(Math.random() * options.posVar * 5));
-
-                    const baseQuaternion = new THREE.Quaternion().setFromEuler(baseRot);
-                    const rotOffset = new THREE.Euler((Math.random() - 0.5) * 2 * Math.PI * options.rotVar, (Math.random() - 0.5) * 2 * Math.PI * options.rotVar, (Math.random() - 0.5) * 2 * Math.PI * options.rotVar);
-                    baseQuaternion.multiply(new THREE.Quaternion().setFromEuler(rotOffset));
-                    selectedObject.quaternion.copy(baseQuaternion);
-
-                    selectedObject.scale.setScalar(baseScale * (1 + (Math.random() - 0.5) * 2 * options.scaleVar));
-                } else {
-                    selectedObject.position.set((Math.random() - 0.5) * 10, Math.random() * 5, (Math.random() - 0.5) * 10);
-                    selectedObject.rotation.set(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2);
-                    const box = new THREE.Box3().setFromObject(selectedObject);
-                    const size = box.getSize(new THREE.Vector3());
-                    const maxDim = Math.max(size.x, size.y, size.z);
-                    const baseScale = maxDim > 0 ? 4.0 / maxDim : 1.0;
-                    selectedObject.scale.setScalar(baseScale * (0.5 + Math.random()));
-                }
-            }
-
-            if (options.useCurrentPanorama && options.randomizeCamera) {
-                const spherical = new THREE.Spherical().setFromCartesianCoords(options.initial.camera.position.x, options.initial.camera.position.y, options.initial.camera.position.z);
-                spherical.theta += (Math.random() - 0.5) * 2 * options.hVar;
-                spherical.phi += (Math.random() - 0.5) * 2 * options.vVar;
-                spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi));
-                camera.position.setFromSpherical(spherical);
-            } else if (!options.useCurrentPanorama) {
-                camera.position.set((Math.random() - 0.5) * 20, Math.random() * 8 + 1, (Math.random() - 0.5) * 15 + 5);
-            }
-            camera.lookAt(selectedObject.position);
-            selectedObject.updateMatrixWorld(true);
-            return currentModelAsset;
-        }
-
-        function findTopLevelGroup(object) { let current = object; while (current.parent && current.parent !== scene && current.parent !== maskScene) { current = current.parent; } return current; }
-        function getCanvasBlob() { return new Promise(resolve => renderer.domElement.toBlob(resolve, 'image/jpeg', 0.9)); }
-        function updateProgress(current, total, text = 'Processing...') {
-            document.getElementById('progress-bar').style.width = `${total > 0 ? (current / total) * 100 : 0}%`;
-            document.getElementById('progress-label').textContent = text;
-            document.getElementById('progress-count').textContent = `(${current}/${total})`;
-        }
-        function setActiveCard(containerId, name) { document.querySelectorAll(`#${containerId} .asset-card`).forEach(c => c.classList.toggle('active', c.dataset.name === name)); }
-
-        function showNotification({ text, type = 'success', duration = 3000, id = null }) {
-            const container = document.getElementById('notification-container');
-            if (id) { const existing = document.getElementById(id); if (existing) { existing.querySelector('span').textContent = text; return; } }
-            const el = document.createElement('div');
-            el.id = id || `notif-${Date.now()}`;
-            el.className = `notification glass-ui p-3 px-4 rounded-lg flex items-center gap-3`;
-            const colors = { success: 'bg-green-500/50', error: 'bg-red-500/50', info: 'bg-blue-500/50', loading: 'bg-stone-500/50' };
-            const icons = { success: 'check-circle', error: 'alert-triangle', info: 'info', loading: null };
-            el.classList.add(colors[type]);
-            let iconHtml = type === 'loading' ? `<div class="notification-spinner"></div>` : `<i data-feather="${icons[type]}" class="w-5 h-5"></i>`;
-            el.innerHTML = `${iconHtml}<span>${text}</span>`;
-            container.appendChild(el);
-            if (icons[type]) feather.replace();
-            setTimeout(() => el.classList.add('show'), 10);
-            if (type !== 'loading') { setTimeout(() => hideNotification(el.id), duration); }
-        }
-
-        function hideNotification(id) {
-            const el = document.getElementById(id);
-            if (el) { el.classList.remove('show'); setTimeout(() => el.remove(), 500); }
-        }
-
-        function animate() {
-            requestAnimationFrame(animate);
-            orbitControls.update();
-            renderer.render(scene, camera);
-        }
-        window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
-
-        async function generateSampleData(options, classIndex = 0) {
-            let labelData = null;
-            if (selectedObject && selectedObject.visible && classIndex !== -1 && options.task !== 'classification') {
-                if (options.task === 'segmentation' && options.segmentationMethod === 'render') {
-                    labelData = await generateRenderMaskData(classIndex);
-                } else {
-                    const points = getProjected2dVertices();
-                    if (points && points.length > 3) {
-                        if (options.task === 'detection') {
-                            const hull = computeConvexHull(points);
-                            if (hull.length > 0) labelData = getDetectionLabel(hull, classIndex);
-                        } else if (options.task === 'segmentation') {
-                            if (options.segmentationMethod === 'concave') {
-                                labelData = generateConcaveHullData(points, classIndex, options.concavity);
-                            } else {
-                                const hull = computeConvexHull(points);
-                                if (hull.length > 0) labelData = getSegmentationLabel(hull, classIndex);
-                            }
-                        }
-                    }
-                }
-            }
-            renderer.render(scene, camera);
-            const imageBlob = await getCanvasBlob();
-            return { imageBlob, labelData };
-        }
-
-        function getDetectionLabel(hull, classIndex) {
-            let minX = 1, maxX = -1, minY = 1, maxY = -1;
-            for (const p of hull) {
-                minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x);
-                minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y);
-            }
-            if (maxX <= minX || maxY <= minY) return null;
-            const normCenterX = (((minX + maxX) / 2) + 1) / 2;
-            const normCenterY = (-((minY + maxY) / 2) + 1) / 2;
-            const normWidth = (maxX - minX) / 2;
-            const normHeight = (maxY - minY) / 2;
-            if (normWidth < 0.001 || normHeight < 0.001) return null;
-            return `${classIndex} ${normCenterX.toFixed(6)} ${normCenterY.toFixed(6)} ${normWidth.toFixed(6)} ${normHeight.toFixed(6)}`;
-        }
-
-        function getSegmentationLabel(points, classIndex) {
-            if (points.length < 3) return null;
-            const yoloPoints = points.map(p => `${((p.x + 1) / 2).toFixed(6)} ${((-p.y + 1) / 2).toFixed(6)}`).join(' ');
-            return `${classIndex} ${yoloPoints}`;
-        }
-
-        function generateConcaveHullData(points, classIndex, concavity) {
-            const screenPoints = points.map(p => [p.x, p.y]);
-            const hull = concaveman(screenPoints, concavity);
-            if (hull.length < 3) return getSegmentationLabel(computeConvexHull(points), classIndex);
-            const mappedHull = hull.map(p => ({ x: p[0], y: p[1] }));
-            return getSegmentationLabel(mappedHull, classIndex);
-        }
-
-        async function generateRenderMaskData(classIndex) {
-            const assetInfo = modelAssets.find(m => m.name === selectedObject.name);
-            if (!assetInfo || !assetInfo.originalMaterials) return null;
-
-            const originalBackground = scene.background;
-            scene.background = new THREE.Color(0x000000);
-            selectedObject.traverse(node => { if (node.isMesh) node.material = maskMaterial; });
-            renderer.render(scene, camera);
-
-            const { width, height } = renderer.domElement;
-            const context = renderer.getContext();
-            const pixelData = new Uint8Array(width * height * 4);
-            context.readPixels(0, 0, width, height, context.RGBA, context.UNSIGNED_BYTE, pixelData);
-
-            scene.background = originalBackground;
-            selectedObject.traverse(node => { if (node.isMesh) node.material = assetInfo.originalMaterials.get(node); });
-
-            const contours = findContours(pixelData, width, height);
-            if (contours.length === 0) return null;
-
-            contours.sort((a, b) => b.length - a.length);
-            const mainContour = contours[0];
-
-            const simplifiedContour = rdp(mainContour, 1.5);
-            if (simplifiedContour.length < 3) return null;
-
-            const yoloPoints = simplifiedContour.map(p => `${(p.x / width).toFixed(6)} ${((height - p.y) / height).toFixed(6)}`).join(' ');
-            return `${classIndex} ${yoloPoints}`;
-        }
-
-        function computeConvexHull(points) {
-            if (points.length <= 3) return points;
-            points.sort((a, b) => a.x === b.x ? a.y - b.y : a.x - b.x);
-            const cross_product = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
-            const lower = [];
-            for (const p of points) {
-                while (lower.length >= 2 && cross_product(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop();
-                lower.push(p);
-            }
-            const upper = [];
-            for (let i = points.length - 1; i >= 0; i--) {
-                const p = points[i];
-                while (upper.length >= 2 && cross_product(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop();
-                upper.push(p);
-            }
-            upper.pop(); lower.pop();
-            return lower.concat(upper);
-        }
-
-        function getProjected2dVertices() {
-            if (!selectedObject || !selectedObject.visible) return null;
-            const projectedVertices = [];
-            selectedObject.updateMatrixWorld(true);
-            selectedObject.traverse(node => {
-                if (node.isMesh) {
-                    const geometry = node.geometry;
-                    const positionAttribute = geometry.attributes.position;
-                    if (!positionAttribute) return;
-                    const vertex = new THREE.Vector3();
-                    for (let i = 0; i < positionAttribute.count; i++) {
-                        vertex.fromBufferAttribute(positionAttribute, i);
-                        vertex.applyMatrix4(node.matrixWorld);
-                        vertex.project(camera);
-                        if (vertex.z < 1) projectedVertices.push({ x: vertex.x, y: vertex.y });
-                    }
-                }
-            });
-            return projectedVertices.length > 0 ? projectedVertices : null;
-        }
-
-        function rdp(points, epsilon) {
-            if (points.length < 3) return points;
-            let dmax = 0; let index = 0;
-            const end = points.length - 1;
-            for (let i = 1; i < end; i++) {
-                const d = perpendicularDistance(points[i], points[0], points[end]);
-                if (d > dmax) { index = i; dmax = d; }
-            }
-            if (dmax > epsilon) {
-                const recResults1 = rdp(points.slice(0, index + 1), epsilon);
-                const recResults2 = rdp(points.slice(index, end + 1), epsilon);
-                return recResults1.slice(0, recResults1.length - 1).concat(recResults2);
-            } else { return [points[0], points[end]]; }
-        }
-        function perpendicularDistance(point, lineStart, lineEnd) {
-            let dx = lineEnd.x - lineStart.x; let dy = lineEnd.y - lineStart.y;
-            if (dx === 0 && dy === 0) return Math.sqrt(Math.pow(point.x - lineStart.x, 2) + Math.pow(point.y - lineStart.y, 2));
-            const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
-            const projectionX = lineStart.x + t * dx; const projectionY = lineStart.y + t * dy;
-            return Math.sqrt(Math.pow(point.x - projectionX, 2) + Math.pow(point.y - projectionY, 2));
-        }
-
-        function findContours(data, width, height) {
-            const visited = new Uint8Array(width * height);
-            const contours = [];
-            const isWhite = (x, y) => data[(y * width + x) * 4] > 128;
-            const directions = [[0, -1], [1, 0], [0, 1], [-1, 0]];
-            for (let y = 1; y < height - 1; y++) {
-                for (let x = 1; x < width - 1; x++) {
-                    if (isWhite(x, y) && !isWhite(x, y - 1) && !visited[y * width + x]) {
-                        const path = [];
-                        let cx = x, cy = y, dir = 1;
-                        while (true) {
-                            path.push({ x: cx, y: cy });
-                            visited[cy * width + cx] = 1;
-                            let foundNext = false;
-                            for (let i = 0; i < 4; i++) {
-                                const nextDir = (dir + 3 + i) % 4;
-                                const [dx, dy] = directions[nextDir];
-                                const nx = cx + dx, ny = cy + dy;
-                                if (isWhite(nx, ny)) {
-                                    cx = nx; cy = ny; dir = nextDir;
-                                    foundNext = true;
-                                    break;
-                                }
-                            }
-                            if (!foundNext || (cx === x && cy === y)) break;
-                        }
-                        if (path.length > 10) contours.push(path);
-                    }
-                }
-            }
-            return contours;
-        }
-
-        init();
     </script>
+
+    <script type="module" src="core.js"></script>
 </body>
 
 </html>

style.css

@@ -1,28 +1,277 @@
+@import url('https://rsms.me/inter/inter.css');
+
+html {
+	font-family: 'Inter', sans-serif;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	background-color: #0c0a09;
+	color: #e7e5e4;
+}
+
+.glass-ui {
+	background-color: rgba(28, 25, 23, 0.7);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-overlay {
+	background-color: rgba(0, 0, 0, 0.6);
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+}
+
+.hidden {
+	display: none !important;
+}
+
+.side-panel {
+	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.side-panel.left {
+	transform: translateX(-100%);
+}
+
+.side-panel.right {
+	transform: translateX(100%);
+}
+
+.side-panel.is-open {
+	transform: translateX(0);
+}
+
+.panel-trigger {
+	transition: background-color 0.2s ease;
+}
+
+.panel-trigger:hover {
+	background-color: rgba(59, 130, 246, 0.5);
+}
+
+.asset-card {
+	transition: all 0.2s ease-in-out;
+	border: 2px solid transparent;
+}
+
+.asset-card:hover {
+	transform: scale(1.03);
+	background-color: rgba(59, 130, 246, 0.1);
+}
+
+.asset-card.active {
+	background-color: rgba(59, 130, 246, 0.2);
+	border-color: #3b82f6;
+}
+
+.panel-content::-webkit-scrollbar {
+	width: 6px;
+}
+
+.panel-content::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.panel-content::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: 10px;
+}
+
+.drop-zone {
+	border: 2px dashed #44403c;
+	transition: background-color 0.2s, border-color 0.2s;
+}
+
+.drop-zone.drag-over {
+	background-color: rgba(59, 130, 246, 0.15);
+	border-color: #3b82f6;
+}
+
+.loader-spinner,
+.btn-spinner {
+	width: 48px;
+	height: 48px;
+	border: 4px solid #44403c;
+	border-top-color: #3b82f6;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+.notification-spinner,
+.btn-spinner {
+	width: 20px;
+	height: 20px;
+	border: 2px solid #e7e5e4;
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: spin 0.8s linear infinite;
 }
 
-h1 {
-	font-size: 16px;
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.toggle-bg:after {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	background: white;
+	border-radius: 9999px;
+	height: 1.25rem;
+	width: 1.25rem;
+	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+input:checked+.toggle-bg {
+	background-color: #3b82f6;
+}
+
+input:checked+.toggle-bg:after {
+	transform: translateX(1.25rem);
+}
+
+input:disabled+.toggle-bg {
+	background-color: #44403c;
+	cursor: not-allowed;
+}
+
+input:disabled+.toggle-bg:after {
+	background-color: #57534e;
+}
+
+#main-canvas {
+	transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#main-canvas.loading {
+	filter: blur(8px) brightness(0.6);
+}
+
+.notification {
+	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	transform: translateY(150%) scale(0.9);
+	opacity: 0;
+}
+
+.notification.show {
+	transform: translateY(0) scale(1);
+	opacity: 1;
+}
+
+.control-section {
+	transition: opacity 0.3s ease;
+}
+
+.sliders-container,
+.accordion-content,
+#concave-hull-options,
+#render-mask-options,
+#background-ratio-container {
+	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding-top 0.4s, margin-top 0.4s, padding-bottom 0.4s;
+	overflow: hidden;
+}
+
+input[type="range"] {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 100%;
+	height: 6px;
+	background: #44403c;
+	border-radius: 10px;
+	outline: none;
+	transition: background 0.3s;
+	padding: 10px 4px;
+	margin: 0;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 20px;
+	height: 20px;
+	background: #e7e5e4;
+	border-radius: 50%;
+	cursor: pointer;
+	border: 4px solid #3b82f6;
+	transition: all 0.2s ease-in-out;
 	margin-top: 0;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+input[type="range"]:hover::-webkit-slider-thumb {
+	background: #fff;
+	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
+}
+
+input[type="range"]::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	background: #e7e5e4;
+	border-radius: 50%;
+	cursor: pointer;
+	border: 4px solid #3b82f6;
+}
+
+.tooltip-trigger {
+	position: relative;
+	cursor: help;
+}
+
+.tooltip-trigger .tooltip-content {
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	bottom: 125%;
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: #1c1917;
+	color: #e7e5e4;
+	text-align: center;
+	padding: 8px 12px;
+	border-radius: 6px;
+	z-index: 50;
+	width: 240px;
+	font-size: 0.8rem;
+	line-height: 1.4;
+	transition: opacity 0.2s;
+	pointer-events: none;
+}
+
+.tooltip-trigger:hover .tooltip-content {
+	visibility: visible;
+	opacity: 1;
+}
+
+.method-radio-label,
+.task-radio-label {
+	border: 2px solid #57534e;
+	transition: all 0.2s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.method-radio-label:hover,
+.task-radio-label:hover {
+	border-color: #a8a29e;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+input[type="radio"]:checked+.method-radio-label,
+input[type="radio"]:checked+.task-radio-label {
+	border-color: #3b82f6;
+	background-color: rgba(59, 130, 246, 0.2);
 }
+
+input[type=range].split-slider {
+	position: absolute;
+	background: transparent;
+	pointer-events: none;
+}
+
+input[type=range].split-slider::-webkit-slider-thumb {
+	pointer-events: auto;
+}
+
+input[type=range].split-slider::-moz-range-thumb {
+	pointer-events: auto;
+}