diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,151 +1,384 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Syntho-Animator Suite: Production Data Factory V4</title>
-    <!-- 
-      PRODUCTION DEPLOYMENT ADVISORY:
-      This project uses the Tailwind CSS CDN and ES Module imports from CDNs for ease of use 
-      and demonstration purposes. This is ideal for development and quick testing.
-
-      For a production environment, it is STRONGLY RECOMMENDED to set up a build process:
-      1. Install Tailwind CSS via npm/yarn and generate a static, purged CSS file. This will
-         significantly reduce the CSS file size and improve load performance.
-      2. Bundle JavaScript modules using a tool like Vite, Webpack, or Rollup. This optimizes
-         dependencies and reduces the number of network requests.
-      
-      See Tailwind's official guide for setup: https://tailwindcss.com/docs/installation
-    -->
+    <title>Syntho-Animator Suite: Production 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); } }
-        /* Enhanced Toggle Switch */
-        .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; }
-        /* Enhanced Range Sliders */
-        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; }
-        /* Custom radio buttons for segmentation and task type */
-        .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); }
-        /* Make range slider thumbs touchable and ensure they are always on top */
-        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; }
+
+        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>
 </head>
+
 <body class="select-none overflow-hidden">
 
     <canvas id="main-canvas" class="absolute top-0 left-0 w-full h-full outline-none z-0"></canvas>
-    
-    <!-- OVERLAYS -->
-    <div id="loader-overlay" class="absolute inset-0 bg-stone-950 flex flex-col items-center justify-center z-50 transition-opacity duration-500">
+
+    <div id="loader-overlay"
+        class="absolute inset-0 bg-stone-950 flex flex-col items-center justify-center z-50 transition-opacity duration-500">
         <div class="loader-spinner"></div>
         <p id="loader-text" class="mt-4 text-xl tracking-wider text-stone-300">Initializing...</p>
     </div>
-    <div id="notification-container" class="fixed bottom-5 left-1/2 -translate-x-1/2 z-[60] flex flex-col items-center gap-2 w-[90vw] max-w-md"></div>
-    
-    <!-- MODALS -->
+    <div id="notification-container"
+        class="fixed bottom-5 left-1/2 -translate-x-1/2 z-[60] flex flex-col items-center gap-2 w-[90vw] max-w-md">
+    </div>
+
     <div id="dataset-modal" class="modal-overlay fixed inset-0 z-40 hidden items-center justify-center p-4">
         <div class="glass-ui rounded-lg w-full max-w-5xl mx-auto flex flex-col max-h-[90vh]">
             <header class="p-5 pb-4 flex-shrink-0 border-b border-white/10">
                 <h3 class="text-2xl font-bold text-center tracking-wide">Generate Synthetic Dataset</h3>
             </header>
-            
+
             <div class="overflow-y-auto px-6 py-5 flex-grow">
                 <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
 
-                    <!-- LEFT COLUMN -->
                     <div class="lg:col-span-2 flex flex-col gap-6">
-                        <!-- Core Settings -->
+
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
-                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Core Settings</h4>
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Core
+                                Settings</h4>
                             <div class="space-y-4">
                                 <div>
-                                    <label for="dataset-name" class="block text-sm font-medium text-stone-300 mb-2">Dataset Name</label>
-                                    <input type="text" id="dataset-name" value="my_synthetic_dataset" class="w-full bg-stone-800/70 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none transition">
+                                    <label for="dataset-name"
+                                        class="block text-sm font-medium text-stone-300 mb-2">Dataset Name</label>
+                                    <input type="text" id="dataset-name" value="my_synthetic_dataset"
+                                        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>
-                                    <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" class="w-full bg-stone-800/70 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none transition">
+                                    <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"
+                                        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>
                         </div>
-                        
-                        <!-- Annotation Settings -->
+
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
-                             <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Annotation</h4>
-                             <div class="space-y-4">
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">
+                                Annotation</h4>
+                            <div class="space-y-4">
                                 <div>
                                     <label class="block text-sm font-medium text-stone-300 mb-3">Task Type</label>
                                     <div class="space-y-2">
                                         <div>
-                                            <input type="radio" name="dataset-task" value="detection" id="task-detection" class="sr-only" checked>
-                                            <label for="task-detection" class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
+                                            <input type="radio" name="dataset-task" value="detection"
+                                                id="task-detection" class="sr-only" checked>
+                                            <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>
                                                 <div>
-                                                    <h5 class="font-semibold text-sm leading-tight">Object Detection</h5>
-                                                    <p class="text-xs text-stone-400 mt-0.5">Generates bounding boxes (YOLO).</p>
+                                                    <h5 class="font-semibold text-sm leading-tight">Object Detection
+                                                    </h5>
+                                                    <p class="text-xs text-stone-400 mt-0.5">Generates bounding boxes
+                                                        (YOLO).</p>
                                                 </div>
                                             </label>
                                         </div>
                                         <div>
-                                            <input type="radio" name="dataset-task" value="segmentation" id="task-segmentation" class="sr-only">
-                                            <label for="task-segmentation" class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
+                                            <input type="radio" name="dataset-task" value="segmentation"
+                                                id="task-segmentation" class="sr-only">
+                                            <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>
                                                 <div>
-                                                    <h5 class="font-semibold text-sm leading-tight">Instance Segmentation</h5>
-                                                    <p class="text-xs text-stone-400 mt-0.5">Generates polygon masks (YOLO).</p>
+                                                    <h5 class="font-semibold text-sm leading-tight">Instance
+                                                        Segmentation</h5>
+                                                    <p class="text-xs text-stone-400 mt-0.5">Generates polygon masks
+                                                        (YOLO).</p>
                                                 </div>
                                             </label>
                                         </div>
-                                         <div>
-                                            <input type="radio" name="dataset-task" value="classification" id="task-classification" class="sr-only">
-                                            <label for="task-classification" class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
-                                                 <i data-feather="tag" class="w-5 h-5 text-blue-400"></i>
-                                                 <div>
-                                                    <h5 class="font-semibold text-sm leading-tight">Image Classification</h5>
-                                                    <p class="text-xs text-stone-400 mt-0.5">Organizes images into class folders.</p>
-                                                 </div>
+                                        <div>
+                                            <input type="radio" name="dataset-task" value="classification"
+                                                id="task-classification" class="sr-only">
+                                            <label for="task-classification"
+                                                class="task-radio-label p-3 rounded-lg block cursor-pointer text-left flex items-center gap-3">
+                                                <i data-feather="tag" class="w-5 h-5 text-blue-400"></i>
+                                                <div>
+                                                    <h5 class="font-semibold text-sm leading-tight">Image Classification
+                                                    </h5>
+                                                    <p class="text-xs text-stone-400 mt-0.5">Organizes images into class
+                                                        folders.</p>
+                                                </div>
                                             </label>
                                         </div>
                                     </div>
@@ -154,22 +387,28 @@
                                     <label class="block text-sm font-medium text-stone-300">Segmentation Method</label>
                                     <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>
-                                            <label for="method-convex" class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
+                                            <input type="radio" name="segmentation-method" value="convex"
+                                                id="method-convex" class="sr-only" checked>
+                                            <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>
                                                 <p class="text-xs text-stone-400 mt-1">Fastest</p>
                                             </label>
                                         </div>
                                         <div>
-                                            <input type="radio" name="segmentation-method" value="concave" id="method-concave" class="sr-only">
-                                            <label for="method-concave" class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
+                                            <input type="radio" name="segmentation-method" value="concave"
+                                                id="method-concave" class="sr-only">
+                                            <label for="method-concave"
+                                                class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
                                                 <h5 class="font-semibold text-sm">Concave Hull</h5>
                                                 <p class="text-xs text-stone-400 mt-1">Accurate</p>
                                             </label>
                                         </div>
                                         <div>
-                                            <input type="radio" name="segmentation-method" value="render" id="method-render" class="sr-only">
-                                            <label for="method-render" class="method-radio-label p-3 rounded-lg block cursor-pointer text-center">
+                                            <input type="radio" name="segmentation-method" value="render"
+                                                id="method-render" class="sr-only">
+                                            <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>
                                                 <p class="text-xs text-stone-400 mt-1">Slowest</p>
                                             </label>
@@ -177,52 +416,68 @@
                                     </div>
                                     <div id="concave-hull-options" style="max-height: 0; opacity: 0; overflow: hidden;">
                                         <div class="pt-3 space-y-2">
-                                            <label for="concave-hull-concavity" class="text-sm font-medium text-stone-300 flex justify-between">Concavity 
+                                            <label for="concave-hull-concavity"
+                                                class="text-sm font-medium text-stone-300 flex justify-between">Concavity
                                                 <span id="concave-hull-concavity-value">2</span>
                                                 <span class="tooltip-trigger">
                                                     <i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i>
-                                                    <span class="tooltip-content">Lower values create more detailed shapes but can be slower. Higher values are faster and simpler.</span>
+                                                    <span class="tooltip-content">Lower values create more detailed
+                                                        shapes but can be slower. Higher values are faster and
+                                                        simpler.</span>
                                                 </span>
                                             </label>
                                             <input type="range" id="concave-hull-concavity" min="1" max="10" value="2">
                                         </div>
                                     </div>
                                 </div>
-                             </div>
+                            </div>
                         </div>
                     </div>
 
-                    <!-- RIGHT COLUMN -->
                     <div class="lg:col-span-3 flex flex-col gap-6">
-                         <!-- Dataset Splits -->
+
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
-                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Dataset Splits</h4>
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Dataset
+                                Splits</h4>
                             <div class="grid grid-cols-2 gap-x-6 gap-y-4">
-                               <div class="flex items-center justify-between">
-                                    <label for="include-val-set" class="font-medium text-stone-300 select-none cursor-pointer">Include Validation Set</label>
+                                <div class="flex items-center justify-between">
+                                    <label for="include-val-set"
+                                        class="font-medium text-stone-300 select-none cursor-pointer">Include Validation
+                                        Set</label>
                                     <label class="relative inline-flex items-center cursor-pointer">
                                         <input type="checkbox" id="include-val-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>
+                                        <div
+                                            class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg">
+                                        </div>
                                     </label>
                                 </div>
-                                 <div class="flex items-center justify-between">
-                                    <label for="include-test-set" class="font-medium text-stone-300 select-none cursor-pointer">Include Test Set</label>
-                                     <label class="relative inline-flex items-center cursor-pointer">
+                                <div class="flex items-center justify-between">
+                                    <label for="include-test-set"
+                                        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">
-                                        <div class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg"></div>
+                                        <div
+                                            class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg">
+                                        </div>
                                     </label>
                                 </div>
                                 <div class="col-span-2 space-y-3 pt-2">
-                                    <label class="block text-sm font-medium text-stone-300">Split Ratios (<span id="split-ratio-sum">100</span>%)</label>
+                                    <label class="block text-sm font-medium text-stone-300">Split Ratios (<span
+                                            id="split-ratio-sum">100</span>%)</label>
                                     <div class="grid grid-cols-3 gap-2 text-center text-sm">
-                                        <div>Train</div><div>Val</div><div>Test</div>
+                                        <div>Train</div>
+                                        <div>Val</div>
+                                        <div>Test</div>
                                     </div>
                                     <div class="relative h-2 flex items-center my-2">
-                                         <div id="split-bg-train" class="absolute h-2 rounded-l-lg bg-blue-600"></div>
-                                         <div id="split-bg-val" class="absolute h-2 bg-green-500"></div>
-                                         <div id="split-bg-test" class="absolute h-2 rounded-r-lg bg-yellow-500"></div>
-                                         <input type="range" id="split-train-ratio" min="0" max="100" value="70" class="split-slider w-full cursor-pointer" style="z-index: 10;">
-                                         <input type="range" id="split-val-ratio" min="0" max="100" value="90" class="split-slider w-full cursor-pointer" style="z-index: 20;">
+                                        <div id="split-bg-train" class="absolute h-2 rounded-l-lg bg-blue-600"></div>
+                                        <div id="split-bg-val" class="absolute h-2 bg-green-500"></div>
+                                        <div id="split-bg-test" class="absolute h-2 rounded-r-lg bg-yellow-500"></div>
+                                        <input type="range" id="split-train-ratio" min="0" max="100" value="70"
+                                            class="split-slider w-full cursor-pointer" style="z-index: 10;">
+                                        <input type="range" id="split-val-ratio" min="0" max="100" value="90"
+                                            class="split-slider w-full cursor-pointer" style="z-index: 20;">
                                     </div>
                                     <div class="grid grid-cols-3 gap-2 text-center text-xs text-stone-400">
                                         <div id="split-train-display">70%</div>
@@ -233,25 +488,32 @@
                             </div>
                         </div>
 
-                        <!-- START: IMPLEMENTATION of Negative Samples -->
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
-                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Sample Augmentation</h4>
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Sample
+                                Augmentation</h4>
                             <div class="space-y-3">
                                 <div class="flex items-center justify-between">
-                                    <label for="include-background-toggle" class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Include Background Samples
+                                    <label for="include-background-toggle"
+                                        class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Include
+                                        Background Samples
                                         <span class="tooltip-trigger">
                                             <i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i>
-                                            <span class="tooltip-content">Generate some images with no objects (negative samples). This helps reduce false positives in detection models.</span>
+                                            <span class="tooltip-content">Generate some images with no objects (negative
+                                                samples). This helps reduce false positives in detection models.</span>
                                         </span>
                                     </label>
                                     <label class="relative inline-flex items-center cursor-pointer">
-                                        <input type="checkbox" id="include-background-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>
+                                        <input type="checkbox" id="include-background-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>
                                     </label>
                                 </div>
                                 <div id="background-ratio-container" class="sliders-container pl-1 space-y-3">
                                     <div>
-                                        <label for="background-ratio-slider" class="text-sm flex justify-between">Ratio of Backgrounds
+                                        <label for="background-ratio-slider" class="text-sm flex justify-between">Ratio
+                                            of Backgrounds
                                             <span id="background-ratio-value">15%</span>
                                         </label>
                                         <input type="range" id="background-ratio-slider" min="0" max="50" value="20">
@@ -259,62 +521,118 @@
                                 </div>
                             </div>
                         </div>
-                        <!-- END: IMPLEMENTATION -->
 
-                        <!-- Scene Composition & Randomization -->
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
-                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Scene & Randomization</h4>
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Scene &
+                                Randomization</h4>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-                                <!-- Scene -->
+
                                 <div class="space-y-4">
                                     <div>
                                         <label class="font-medium text-stone-200 block mb-2">3D Model Source</label>
                                         <div class="flex flex-col gap-2">
-                                            <label class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input type="radio" name="model-source" value="current" checked class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Use Current Model</label>
-                                            <label class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input type="radio" name="model-source" value="random" class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Randomize Library</label>
+                                            <label
+                                                class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input
+                                                    type="radio" name="model-source" value="current" checked
+                                                    class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600">
+                                                Use Current Model</label>
+                                            <label
+                                                class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input
+                                                    type="radio" name="model-source" value="random"
+                                                    class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600">
+                                                Randomize Library</label>
                                         </div>
-                                        <div id="model-source-current-info" class="text-sm text-blue-400 pl-2 hidden mt-2"></div>
+                                        <div id="model-source-current-info"
+                                            class="text-sm text-blue-400 pl-2 hidden mt-2"></div>
                                     </div>
                                     <div>
                                         <label class="font-medium text-stone-200 block mb-2">Background Source</label>
-                                         <div class="flex flex-col gap-2">
-                                            <label class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input type="radio" name="pano-source" value="current" checked class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Use Current Panorama</label>
-                                            <label class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input type="radio" name="pano-source" value="random" class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Randomize Library</label>
+                                        <div class="flex flex-col gap-2">
+                                            <label
+                                                class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input
+                                                    type="radio" name="pano-source" value="current" checked
+                                                    class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600">
+                                                Use Current Panorama</label>
+                                            <label
+                                                class="flex items-center gap-2 p-2 rounded-md bg-stone-800/50 hover:bg-stone-700/50 cursor-pointer flex-1"><input
+                                                    type="radio" name="pano-source" value="random"
+                                                    class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600">
+                                                Randomize Library</label>
                                         </div>
-                                        <div id="pano-source-current-info" class="text-sm text-blue-400 pl-2 hidden mt-2"></div>
+                                        <div id="pano-source-current-info"
+                                            class="text-sm text-blue-400 pl-2 hidden mt-2"></div>
                                     </div>
                                 </div>
-                                <!-- Randomization -->
+
                                 <div class="space-y-4">
-                                     <div class="control-section space-y-3">
+                                    <div class="control-section space-y-3">
                                         <div class="flex items-center justify-between">
-                                            <label for="randomize-model-toggle" class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Model Transform
-                                                <span class="tooltip-trigger"><i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i><span class="tooltip-content">Applies random position, rotation, and scale. If 'Use Current Model' is selected, randomization is relative to its current state.</span></span>
+                                            <label for="randomize-model-toggle"
+                                                class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Model
+                                                Transform
+                                                <span class="tooltip-trigger"><i data-feather="help-circle"
+                                                        class="w-4 h-4 text-stone-400"></i><span
+                                                        class="tooltip-content">Applies random position, rotation, and
+                                                        scale. If 'Use Current Model' is selected, randomization is
+                                                        relative to its current state.</span></span>
                                             </label>
-                                             <label class="relative inline-flex items-center cursor-pointer">
-                                                <input type="checkbox" id="randomize-model-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>
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" id="randomize-model-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>
                                             </label>
                                         </div>
-                                        <div id="model-sliders" class="sliders-container pl-1 space-y-3" style="max-height: 0; opacity: 0; overflow: hidden;">
-                                            <div><label for="position-variance" class="text-sm flex justify-between">Position Var. <span id="position-variance-value">90%</span></label><input type="range" id="position-variance" min="0" max="100" value="90"></div>
-                                            <div><label for="rotation-variance" class="text-sm flex justify-between">Rotation Var. <span id="rotation-variance-value">100%</span></label><input type="range" id="rotation-variance" min="0" max="100" value="100"></div>
-                                            <div><label for="scale-variance" class="text-sm flex justify-between">Scale Var. <span id="scale-variance-value">10%</span></label><input type="range" id="scale-variance" min="0" max="100" value="10"></div>
+                                        <div id="model-sliders" class="sliders-container pl-1 space-y-3"
+                                            style="max-height: 0; opacity: 0; overflow: hidden;">
+                                            <div><label for="position-variance"
+                                                    class="text-sm flex justify-between">Position Var. <span
+                                                        id="position-variance-value">90%</span></label><input
+                                                    type="range" id="position-variance" min="0" max="100" value="90">
+                                            </div>
+                                            <div><label for="rotation-variance"
+                                                    class="text-sm flex justify-between">Rotation Var. <span
+                                                        id="rotation-variance-value">100%</span></label><input
+                                                    type="range" id="rotation-variance" min="0" max="100" value="100">
+                                            </div>
+                                            <div><label for="scale-variance" class="text-sm flex justify-between">Scale
+                                                    Var. <span id="scale-variance-value">10%</span></label><input
+                                                    type="range" id="scale-variance" min="0" max="100" value="10"></div>
                                         </div>
                                     </div>
-                                    <div id="camera-randomization-section" class="control-section space-y-3 transition-opacity duration-300">
+                                    <div id="camera-randomization-section"
+                                        class="control-section space-y-3 transition-opacity duration-300">
                                         <div class="flex items-center justify-between">
-                                             <label for="randomize-camera-toggle" class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Camera Viewpoint
-                                                <span class="tooltip-trigger"><i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i><span class="tooltip-content">Generate images from viewpoints similar to the current camera angle. Only available when using the current panorama.</span></span>
+                                            <label for="randomize-camera-toggle"
+                                                class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Camera
+                                                Viewpoint
+                                                <span class="tooltip-trigger"><i data-feather="help-circle"
+                                                        class="w-4 h-4 text-stone-400"></i><span
+                                                        class="tooltip-content">Generate images from viewpoints similar
+                                                        to the current camera angle. Only available when using the
+                                                        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">
-                                                <div class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg"></div>
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" id="randomize-camera-toggle"
+                                                    class="sr-only peer">
+                                                <div
+                                                    class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg">
+                                                </div>
                                             </label>
                                         </div>
-                                        <div id="camera-sliders" class="sliders-container pl-1 space-y-3" 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"></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"></div>
+                                        <div id="camera-sliders" class="sliders-container pl-1 space-y-3"
+                                            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">
+                                            </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">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -325,10 +643,11 @@
                 </div>
             </div>
 
-            <!-- FOOTER -->
             <div class="flex-shrink-0 flex justify-end gap-3 p-4 border-t border-white/10 bg-stone-900/30">
-                <button id="cancel-dataset" class="bg-stone-600 px-5 py-2.5 rounded-md font-semibold hover:bg-stone-700 transition-colors disabled:opacity-50">Cancel</button>
-                <button id="start-dataset" class="bg-blue-600 px-5 py-2.5 rounded-md font-semibold hover:bg-blue-700 min-w-[120px] flex justify-center items-center transition-colors disabled:bg-blue-800 disabled:cursor-not-allowed">
+                <button id="cancel-dataset"
+                    class="bg-stone-600 px-5 py-2.5 rounded-md font-semibold hover:bg-stone-700 transition-colors disabled:opacity-50">Cancel</button>
+                <button id="start-dataset"
+                    class="bg-blue-600 px-5 py-2.5 rounded-md font-semibold hover:bg-blue-700 min-w-[120px] flex justify-center items-center transition-colors disabled:bg-blue-800 disabled:cursor-not-allowed">
                     <span class="btn-text">Generate</span>
                     <div class="btn-spinner hidden"></div>
                 </button>
@@ -339,37 +658,49 @@
         <div class="glass-ui w-full max-w-sm p-6 rounded-lg">
             <h3 id="progress-title" class="text-lg font-bold mb-4">Generating Dataset</h3>
             <div class="flex justify-between items-baseline mb-2">
-                 <div id="progress-label" class="text-sm text-stone-300">Processing...</div>
-                 <div id="progress-count" class="text-xs text-stone-400"></div>
+                <div id="progress-label" class="text-sm text-stone-300">Processing...</div>
+                <div id="progress-count" class="text-xs text-stone-400"></div>
+            </div>
+            <div class="w-full bg-stone-700 rounded-full h-2.5">
+                <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full transition-all" style="width: 0%"></div>
             </div>
-            <div class="w-full bg-stone-700 rounded-full h-2.5"><div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full transition-all" style="width: 0%"></div></div>
         </div>
     </div>
     <div id="upload-modal" class="modal-overlay fixed inset-0 z-40 hidden items-center justify-center p-4">
         <div class="glass-ui p-6 rounded-lg w-full max-w-md mx-auto flex flex-col gap-4">
-             <h3 id="upload-title" class="text-2xl font-bold text-center">Upload New Asset</h3>
-             <div id="upload-drop-zone" class="drop-zone p-6 rounded-lg text-center cursor-pointer">
-                 <p class="text-stone-300 pointer-events-none">Drag & Drop File</p>
-                 <p class="text-stone-400 text-sm pointer-events-none">or click to browse</p>
-                 <input type="file" id="upload-file-input" class="hidden">
-             </div>
-             <div class="flex items-center text-stone-400"><hr class="flex-grow border-white/10"><span class="mx-2 text-sm">OR</span><hr class="flex-grow border-white/10"></div>
-             <input type="text" id="upload-url-input" class="w-full bg-stone-900/50 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none" placeholder="Enter Asset URL">
-             <div class="flex justify-end gap-3 mt-2">
-                 <button id="upload-cancel-btn" class="bg-stone-600 px-4 py-2 rounded-md font-semibold hover:bg-stone-700 transition-colors">Cancel</button>
-                 <button id="upload-load-btn" class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px] flex justify-center items-center transition-colors disabled:bg-blue-800">
+            <h3 id="upload-title" class="text-2xl font-bold text-center">Upload New Asset</h3>
+            <div id="upload-drop-zone" class="drop-zone p-6 rounded-lg text-center cursor-pointer">
+                <p class="text-stone-300 pointer-events-none">Drag & Drop File</p>
+                <p class="text-stone-400 text-sm pointer-events-none">or click to browse</p>
+                <input type="file" id="upload-file-input" class="hidden">
+            </div>
+            <div class="flex items-center text-stone-400">
+                <hr class="flex-grow border-white/10"><span class="mx-2 text-sm">OR</span>
+                <hr class="flex-grow border-white/10">
+            </div>
+            <input type="text" id="upload-url-input"
+                class="w-full bg-stone-900/50 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none"
+                placeholder="Enter Asset URL">
+            <div class="flex justify-end gap-3 mt-2">
+                <button id="upload-cancel-btn"
+                    class="bg-stone-600 px-4 py-2 rounded-md font-semibold hover:bg-stone-700 transition-colors">Cancel</button>
+                <button id="upload-load-btn"
+                    class="bg-blue-600 px-4 py-2 rounded-md font-semibold hover:bg-blue-700 min-w-[80px] flex justify-center items-center transition-colors disabled:bg-blue-800">
                     <span class="btn-text">Load</span>
                     <div class="btn-spinner hidden"></div>
-                 </button>
-             </div>
+                </button>
+            </div>
         </div>
     </div>
 
-    <!-- MAIN UI -->
-    <div id="controls-bar" class="glass-ui fixed top-4 left-1/2 -translate-x-1/2 z-20 p-2 rounded-lg flex items-center gap-2">
-        <button id="translate-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="translate" title="Translate (W)"><i data-feather="move"></i></button>
-        <button id="rotate-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="rotate" title="Rotate (E)"><i data-feather="rotate-cw"></i></button>
-        <button id="scale-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="scale" title="Scale (R)"><i data-feather="maximize"></i></button>
+    <div id="controls-bar"
+        class="glass-ui fixed top-4 left-1/2 -translate-x-1/2 z-20 p-2 rounded-lg flex items-center gap-2">
+        <button id="translate-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="translate"
+            title="Translate (W)"><i data-feather="move"></i></button>
+        <button id="rotate-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="rotate"
+            title="Rotate (E)"><i data-feather="rotate-cw"></i></button>
+        <button id="scale-btn" class="control-btn p-2 rounded hover:bg-white/10" data-mode="scale" title="Scale (R)"><i
+                data-feather="maximize"></i></button>
         <div class="w-px h-6 bg-white/10 mx-1"></div>
         <div class="flex items-center gap-2 px-2" title="Toggle Day/Night">
             <i data-feather="sun" class="w-5 h-5 text-stone-400"></i>
@@ -380,32 +711,45 @@
             <i data-feather="moon" class="w-5 h-5 text-stone-400"></i>
         </div>
         <div class="w-px h-6 bg-white/10 mx-1"></div>
-        <button id="generate-dataset-btn" class="p-2 rounded hover:bg-blue-600/50" title="Generate Dataset (G)"><i data-feather="database"></i></button>
+        <button id="generate-dataset-btn" class="p-2 rounded hover:bg-blue-600/50" title="Generate Dataset (G)"><i
+                data-feather="database"></i></button>
     </div>
 
-    <button id="model-panel-trigger" class="panel-trigger glass-ui absolute top-1/2 -translate-y-1/2 left-0 z-20 rounded-r-lg p-3"><i data-feather="box"></i></button>
-    <button id="panorama-panel-trigger" class="panel-trigger glass-ui absolute top-1/2 -translate-y-1/2 right-0 z-20 rounded-l-lg p-3"><i data-feather="image"></i></button>
-    
-    <aside id="model-panel" class="side-panel left glass-ui fixed top-0 left-0 h-full w-[80vw] sm:w-80 z-30 flex flex-col">
+    <button id="model-panel-trigger"
+        class="panel-trigger glass-ui absolute top-1/2 -translate-y-1/2 left-0 z-20 rounded-r-lg p-3"><i
+            data-feather="box"></i></button>
+    <button id="panorama-panel-trigger"
+        class="panel-trigger glass-ui absolute top-1/2 -translate-y-1/2 right-0 z-20 rounded-l-lg p-3"><i
+            data-feather="image"></i></button>
+
+    <aside id="model-panel"
+        class="side-panel left glass-ui fixed top-0 left-0 h-full w-[80vw] sm:w-80 z-30 flex flex-col">
         <header class="flex-shrink-0 flex justify-between items-center p-4 border-b border-white/10">
             <h2 class="text-xl font-bold">Models</h2>
             <div>
-                <button id="add-model-btn" class="p-2 rounded-full hover:bg-blue-600/50" title="Add new model"><i data-feather="plus"></i></button>
-                <button id="close-model-panel" class="p-2 rounded-full hover:bg-stone-700"><i data-feather="x"></i></button>
+                <button id="add-model-btn" class="p-2 rounded-full hover:bg-blue-600/50" title="Add new model"><i
+                        data-feather="plus"></i></button>
+                <button id="close-model-panel" class="p-2 rounded-full hover:bg-stone-700"><i
+                        data-feather="x"></i></button>
             </div>
         </header>
-        <div id="model-selector" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+        <div id="model-selector"
+            class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
     </aside>
 
-    <aside id="panorama-panel" class="side-panel right glass-ui fixed top-0 right-0 h-full w-[80vw] sm:w-80 z-30 flex flex-col">
+    <aside id="panorama-panel"
+        class="side-panel right glass-ui fixed top-0 right-0 h-full w-[80vw] sm:w-80 z-30 flex flex-col">
         <header class="flex-shrink-0 flex justify-between items-center p-4 border-b border-white/10">
             <h2 class="text-xl font-bold">Panoramas</h2>
-             <div>
-                <button id="add-panorama-btn" class="p-2 rounded-full hover:bg-blue-600/50" title="Add new panorama"><i data-feather="plus"></i></button>
-                <button id="close-panorama-panel" class="p-2 rounded-full hover:bg-stone-700"><i data-feather="x"></i></button>
+            <div>
+                <button id="add-panorama-btn" class="p-2 rounded-full hover:bg-blue-600/50" title="Add new panorama"><i
+                        data-feather="plus"></i></button>
+                <button id="close-panorama-panel" class="p-2 rounded-full hover:bg-stone-700"><i
+                        data-feather="x"></i></button>
             </div>
         </header>
-        <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+        <div id="panorama-gallery"
+            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": {
@@ -424,27 +768,24 @@
         import gsap from "https://cdn.jsdelivr.net/npm/gsap@3.12.5/+esm";
         import concaveman from 'concaveman';
 
-        // --- CONFIG & STATE ---
         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')}` }));
-        
+        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;
+
+        let scene, camera, renderer, orbitControls, transformControls, pmremGenerator, panoramaSphere;
         let selectedObject = null;
         let activeControlMode = null;
         let activePanorama = null;
 
-        // For render-based masking
         let maskScene, maskMaterial;
-        
+
         const loaderOverlay = document.getElementById('loader-overlay');
         const loaderText = document.getElementById('loader-text');
         const canvas = document.getElementById('main-canvas');
 
-        // --- INITIALIZATION ---
         async function init() {
             loaderText.textContent = 'Setting up 3D scene...';
             scene = new THREE.Scene();
@@ -457,10 +798,16 @@
             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);
@@ -474,17 +821,16 @@
             dirLight.position.set(8, 15, 10);
             scene.add(ambientLight, dirLight);
 
-            // Setup for render masking
             maskScene = new THREE.Scene();
             maskMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
 
             setupUI();
             setupEventListeners();
             animate();
-            
+
             try {
-                await loadAsset(panoramaAssets[0], 'panorama');
-                await loadAsset(modelAssets[0], 'model');
+                await loadAsset(panoramaAssets[6], 'panorama');
+                await loadAsset(modelAssets[1], 'model');
                 setControlMode('translate');
             } catch (error) {
                 showNotification({ text: `Initialization failed: ${error.message}`, type: 'error' });
@@ -493,11 +839,11 @@
                 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){
+            if (button) {
                 spinner = button.querySelector('.btn-spinner');
                 textSpan = button.querySelector('.btn-text');
                 spinner.classList.remove('hidden');
@@ -509,7 +855,7 @@
                 gsap.to(loaderOverlay, { opacity: 1, duration: 0.3 });
                 canvas.classList.add('loading');
             } else {
-                 loaderText.textContent = `Loading ${assetType}: ${assetData.name}`;
+                loaderText.textContent = `Loading ${assetType}: ${assetData.name}`;
             }
 
             try {
@@ -520,6 +866,14 @@
                         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();
@@ -529,19 +883,19 @@
                             resolve();
                         }, undefined, reject);
                     });
-                } else { // model
+                } 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;
+                        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; });
+                                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);
@@ -551,17 +905,17 @@
                                 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;
-                                    // Store original materials for render mask method
+
                                     assetToUpdate.originalMaterials = new Map();
                                     model.traverse(node => {
-                                        if(node.isMesh) assetToUpdate.originalMaterials.set(node, node.material);
+                                        if (node.isMesh) assetToUpdate.originalMaterials.set(node, node.material);
                                     });
                                 }
-                                
+
                                 selectedObject = model;
                                 resolve();
                             }, undefined, reject);
@@ -574,7 +928,7 @@
                 showNotification({ text: `Failed to load ${assetType}: ${assetData.name}`, type: 'error', duration: 4000 });
                 console.error(`Failed to load ${assetType}:`, error);
             } finally {
-                if(button){
+                if (button) {
                     spinner.classList.add('hidden');
                     textSpan.classList.remove('hidden');
                     button.disabled = false;
@@ -593,7 +947,7 @@
             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') {
@@ -604,22 +958,21 @@
                 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 { // Panorama
+            } 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'); 
+                thumbWrapper.parentElement.classList.add('bg-stone-800');
             }
             document.getElementById(type === 'model' ? 'model-selector' : 'panorama-gallery').appendChild(container);
         }
 
-        // --- UI & EVENT LISTENERS ---
         function setupUI() {
             feather.replace();
             modelAssets.forEach(m => createAssetCard('model', m));
@@ -648,6 +1001,17 @@
 
             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 });
             });
@@ -675,7 +1039,7 @@
             });
 
             window.addEventListener('keydown', (e) => {
-                if(document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'SELECT') return;
+                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(); }
@@ -704,14 +1068,14 @@
                 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);
+
+            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) });
@@ -719,17 +1083,17 @@
             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 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'});
+                if (modelAssets.some(m => m.name === name)) {
+                    showNotification({ text: `Model "${name}" already exists.`, type: 'error' });
                     return;
                 }
                 newAssetData.thumb = 'placeholder';
@@ -737,36 +1101,34 @@
                 createAssetCard('model', newAssetData);
                 await loadAsset(newAssetData, 'model', button);
             } else {
-                 if (panoramaAssets.some(p => p.name === name)) {
-                    showNotification({text: `Panorama "${name}" already exists.`, type: 'error'});
+                if (panoramaAssets.some(p => p.name === name)) {
+                    showNotification({ text: `Panorama "${name}" already exists.`, type: 'error' });
                     return;
                 }
-                newAssetData.thumb = url; 
+                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(); // Redraw icons like tooltips
+                feather.replace();
                 updateDatasetModalUI();
             });
 
             document.getElementById('cancel-dataset').addEventListener('click', () => modal.classList.add('hidden'));
             document.getElementById('start-dataset').addEventListener('click', handleDatasetGeneration);
 
-            // Add event listeners to all controls to update the UI dynamically
             document.querySelectorAll('#dataset-modal input[type="radio"], #dataset-modal input[type="checkbox"]').forEach(input => {
                 input.addEventListener('change', updateDatasetModalUI);
             });
 
-            // Setup listeners for all range sliders
             const setupSlider = (sliderId, displayId, unit) => {
                 const slider = document.getElementById(sliderId);
                 const display = document.getElementById(displayId);
@@ -782,20 +1144,19 @@
             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', '%'); // New slider
+            setupSlider('background-ratio-slider', 'background-ratio-value', '%');
 
-            // Setup listeners for split ratio sliders
             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));
@@ -803,47 +1164,43 @@
         }
 
         function updateDatasetModalUI() {
-            // Model Source UI
+
             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);
 
-            // Panorama Source UI
             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);
 
-            // Model Randomization Sliders
             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 });
-            
-            // Camera Randomization Controls
+
             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';
+            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 });
 
-            // Annotation Task UI
             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, 
+            gsap.to(segGroup, {
+                maxHeight: showSegGroup ? 300 : 0,
                 opacity: showSegGroup ? 1 : 0,
                 paddingTop: showSegGroup ? '0.5rem' : 0,
                 marginTop: showSegGroup ? '1rem' : 0,
-                duration: 0.4 
+                duration: 0.4
             });
 
             const showConcaveOptions = showSegGroup && segMethod === 'concave';
@@ -854,7 +1211,6 @@
                 duration: 0.4
             });
 
-            // START: IMPLEMENTATION - Show/hide background ratio slider
             const includeBackgrounds = document.getElementById('include-background-toggle').checked;
             gsap.to("#background-ratio-container", {
                 maxHeight: includeBackgrounds ? 100 : 0,
@@ -862,9 +1218,7 @@
                 paddingTop: includeBackgrounds ? '0.5rem' : 0,
                 duration: 0.4
             });
-            // END: IMPLEMENTATION
 
-            // Dataset Splits UI
             updateSplitRatios();
         }
 
@@ -873,22 +1227,21 @@
             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; // Test set requires a val set
+            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;
 
-            // Constrain values
             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;
             }
@@ -903,7 +1256,7 @@
 
             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;
 
@@ -918,7 +1271,7 @@
             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');
@@ -940,10 +1293,10 @@
                     concavity: parseFloat(document.getElementById('concave-hull-concavity').value),
                     samples: parseInt(document.getElementById('dataset-samples').value),
                     name: document.getElementById('dataset-name').value.trim(),
-                    // START: IMPLEMENTATION - Read new options
+
                     includeBackgrounds: document.getElementById('include-background-toggle').checked,
                     backgroundRatio: parseInt(document.getElementById('background-ratio-slider').value) / 100,
-                    // END: IMPLEMENTATION
+
                     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,
@@ -978,11 +1331,11 @@
                 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;
@@ -991,21 +1344,20 @@
                 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';
-                        
-                        // Recalculate split percentages for this sample
+
                         const valPct = options.includeVal ? options.valSplit - options.trainSplit : 0;
                         const testPct = options.includeTest ? 100 - options.valSplit : 0;
                         const trainPct = 100 - valPct - testPct;
@@ -1024,19 +1376,19 @@
                             if (labelData) { zip.folder(rootFolderName).folder('labels').folder(splitFolder).file(labelName, labelData); }
                         }
                     }
-                    if(i % 10 === 0) await new Promise(resolve => setTimeout(resolve, 1));
+                    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`;
+                    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');
@@ -1046,7 +1398,7 @@
                 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');
 
@@ -1070,37 +1422,33 @@
             } else {
                 currentModelAsset = modelAssets.find(m => m.name === selectedObject.name);
             }
-            
+
             if (!currentModelAsset || !selectedObject) return null;
-            
-            // START: IMPLEMENTATION - Unified negative sample logic
-            // This replaces the old classification-only logic.
+
             if (options.includeBackgrounds && Math.random() < options.backgroundRatio) {
                 selectedObject.visible = false;
             } else {
                 selectedObject.visible = true;
             }
 
-            // If the object is visible, add its class to the list for the YAML file.
             if (selectedObject.visible) {
-                 usedClasses.add(currentModelAsset.name);
+                usedClasses.add(currentModelAsset.name);
             }
-            // END: IMPLEMENTATION
-            
+
             if (!selectedObject.visible) return null;
 
             if (options.randomizeModel) {
-                if(options.useCurrentModel) { // Relative
+                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 );
+                    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 { // Absolute
+                } 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);
@@ -1111,25 +1459,24 @@
                 }
             }
 
-            if (options.useCurrentPanorama && options.randomizeCamera) { // Relative camera
+            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) { // Absolute camera
+            } 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;
         }
-        
-        // --- UTILS ---
+
         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}%`; 
+        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})`;
         }
@@ -1164,24 +1511,23 @@
         }
         window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
 
-        // --- DATA GENERATION (from 3types.html) ---
         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 {
+                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') {
+                            if (hull.length > 0) labelData = getDetectionLabel(hull, classIndex);
+                        } else if (options.task === 'segmentation') {
+                            if (options.segmentationMethod === 'concave') {
                                 labelData = generateConcaveHullData(points, classIndex, options.concavity);
-                            } else { // 'convex'
+                            } else {
                                 const hull = computeConvexHull(points);
-                                if(hull.length > 0) labelData = getSegmentationLabel(hull, classIndex);
+                                if (hull.length > 0) labelData = getSegmentationLabel(hull, classIndex);
                             }
                         }
                     }
@@ -1191,7 +1537,7 @@
             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) {
@@ -1206,7 +1552,7 @@
             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(' ');
@@ -1216,41 +1562,35 @@
         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); // Fallback
-            const mappedHull = hull.map(p => ({x: p[0], y: p[1]}));
+            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;
-            
-            // Render mask
+
             const originalBackground = scene.background;
             scene.background = new THREE.Color(0x000000);
-            selectedObject.traverse(node => { if(node.isMesh) node.material = maskMaterial; });
+            selectedObject.traverse(node => { if (node.isMesh) node.material = maskMaterial; });
             renderer.render(scene, camera);
-            
-            // Get pixel data
+
             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);
 
-            // Restore scene
             scene.background = originalBackground;
-            selectedObject.traverse(node => { if(node.isMesh) node.material = assetInfo.originalMaterials.get(node); });
+            selectedObject.traverse(node => { if (node.isMesh) node.material = assetInfo.originalMaterials.get(node); });
 
-            // Process mask
             const contours = findContours(pixelData, width, height);
             if (contours.length === 0) return null;
-            
-            // Find largest contour
-            contours.sort((a,b) => b.length - a.length);
+
+            contours.sort((a, b) => b.length - a.length);
             const mainContour = contours[0];
 
-            // Simplify and format
-            const simplifiedContour = rdp(mainContour, 1.5); // RDP simplification
+            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(' ');
@@ -1296,8 +1636,7 @@
             });
             return projectedVertices.length > 0 ? projectedVertices : null;
         }
-        
-        /** Ramer-Douglas-Peucker algorithm for polygon simplification. */
+
         function rdp(points, epsilon) {
             if (points.length < 3) return points;
             let dmax = 0; let index = 0;
@@ -1319,24 +1658,23 @@
             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));
         }
-        
-        /** Marching Squares contour finding algorithm. */
+
         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] ]; // N, E, S, W
+            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; // Start by looking East
+                        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; // look left, then straight, etc.
+                                const nextDir = (dir + 3 + i) % 4;
                                 const [dx, dy] = directions[nextDir];
                                 const nx = cx + dx, ny = cy + dy;
                                 if (isWhite(nx, ny)) {
@@ -1345,7 +1683,7 @@
                                     break;
                                 }
                             }
-                            if (!foundNext || (cx === x && cy === y)) break; // Back to start
+                            if (!foundNext || (cx === x && cy === y)) break;
                         }
                         if (path.length > 10) contours.push(path);
                     }
@@ -1357,4 +1695,5 @@
         init();
     </script>
 </body>
+
 </html>
\ No newline at end of file
