diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Syntho-Animator Suite: Production Data Factory</title>
+    <title>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 
@@ -40,24 +40,37 @@
         .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 { width: 48px; height: 48px; border: 4px solid #44403c; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
-        .notification-spinner { width: 20px; height: 20px; border: 2px solid #e7e5e4; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
+        .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; }
-        input:checked + .toggle-bg:after { transform: translateX(100%); }
+        /* 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 { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding-top 0.4s, margin-top 0.4s; overflow: hidden; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #3b82f6; border-radius: 50%; cursor: pointer; margin-top: -6px; transition: background-color 0.2s; }
-        input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #3b82f6; border-radius: 50%; cursor: pointer; }
-        input[type="range"]:hover::-webkit-slider-thumb { background: #2563eb; }
+        .sliders-container, .accordion-content, #concave-hull-options { 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: 10; width: 220px; font-size: 0.8rem; line-height: 1.4; transition: opacity 0.2s; pointer-events: none; }
+        .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; }
     </style>
 </head>
 <body class="select-none overflow-hidden">
@@ -73,120 +86,238 @@
     
     <!-- MODALS -->
     <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-2xl mx-auto flex flex-col max-h-[90vh]">
-            <header class="p-6 pb-4 flex-shrink-0">
-                <h3 class="text-2xl font-bold text-center">Generate Synthetic Dataset</h3>
+        <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 pb-6 space-y-6 flex-grow">
-                
-                <!-- SECTION 1: CORE SETTINGS -->
-                <div class="space-y-4">
-                    <h4 class="text-lg font-semibold text-stone-300 border-b border-white/10 pb-2">1. Core Settings</h4>
-                    <div>
-                        <label for="dataset-task" class="block text-sm font-medium text-stone-300 mb-1">Task Type</label>
-                        <select id="dataset-task" class="w-full bg-stone-800/70 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none">
-                            <option value="detection">Object Detection (YOLO)</option>
-                            <option value="segmentation">Instance Segmentation (YOLO)</option>
-                            <option value="classification">Image Classification</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label for="dataset-samples" class="block text-sm font-medium text-stone-300 mb-1">Number of Samples</label>
-                        <input type="number" id="dataset-samples" value="100" min="1" max="10000" class="w-full bg-stone-800/70 p-2 rounded-md border-2 border-stone-600 focus:border-blue-500 outline-none">
-                    </div>
-                    <div>
-                        <label for="dataset-name" class="block text-sm font-medium text-stone-300 mb-1">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">
-                    </div>
-                </div>
+            <div class="overflow-y-auto px-6 py-5 flex-grow">
+                <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
 
-                <!-- SECTION 2: SCENE COMPOSITION -->
-                <div class="space-y-4">
-                    <h4 class="text-lg font-semibold text-stone-300 border-b border-white/10 pb-2">2. Scene Composition</h4>
-                    
-                    <!-- MODEL CONFIGURATION -->
-                    <div class="bg-stone-900/50 p-4 rounded-lg space-y-3">
-                        <label class="font-medium text-stone-200 block">3D Model Source</label>
-                        <div class="flex flex-col sm:flex-row gap-2 sm:gap-4">
-                            <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" 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" checked class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Randomize from Library</label>
+                    <!-- 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>
+                            <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">
+                                </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">
+                                </div>
+                            </div>
                         </div>
-                        <div id="model-source-current-info" class="text-sm text-blue-400 pl-2 hidden"></div>
-                    </div>
-
-                    <!-- PANORAMA CONFIGURATION -->
-                    <div class="bg-stone-900/50 p-4 rounded-lg space-y-3">
-                        <label class="font-medium text-stone-200 block">Background Source</label>
-                         <div class="flex flex-col sm:flex-row gap-2 sm:gap-4">
-                            <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" 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" checked class="h-4 w-4 rounded-full text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600"> Randomize from Library</label>
+                        
+                        <!-- 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">
+                                <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">
+                                                <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>
+                                                </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">
+                                                <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>
+                                                </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>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="segmentation-method-group" class="space-y-2 pt-2">
+                                    <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">
+                                                <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">
+                                                <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">
+                                                <h5 class="font-semibold text-sm">Render Mask</h5>
+                                                <p class="text-xs text-stone-400 mt-1">Slowest</p>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <!-- START: IMPROVEMENT - Added Concavity slider -->
+                                    <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 
+                                                <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>
+                                            </label>
+                                            <input type="range" id="concave-hull-concavity" min="1" max="10" value="2">
+                                        </div>
+                                    </div>
+                                    <!-- END: IMPROVEMENT -->
+                                </div>
+                             </div>
                         </div>
-                        <div id="pano-source-current-info" class="text-sm text-blue-400 pl-2 hidden"></div>
                     </div>
-                </div>
 
-                <!-- SECTION 3: RANDOMIZATION CONTROLS -->
-                <div class="space-y-4">
-                     <h4 class="text-lg font-semibold text-stone-300 border-b border-white/10 pb-2">3. Randomization Controls</h4>
-
-                    <!-- Model Transformation Controls -->
-                    <div class="control-section space-y-3 bg-stone-900/50 p-4 rounded-lg">
-                        <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">Randomize 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. Otherwise, it's fully random.</span></span>
-                            </label>
-                            <input type="checkbox" id="randomize-model-toggle" checked class="h-5 w-5 rounded text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600 cursor-pointer">
-                        </div>
-                        <div id="model-sliders" class="sliders-container pl-4 border-l-2 border-stone-700 space-y-3">
-                            <div>
-                                <label for="position-variance" class="text-sm flex justify-between">Position Variance <span id="position-variance-value">90%</span></label>
-                                <input type="range" id="position-variance" min="0" max="100" value="90" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer">
+                    <!-- 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>
+                            <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>
+                                    <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>
+                                    </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">
+                                        <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>
+                                    </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>
+                                    <div class="grid grid-cols-3 gap-2 text-center text-sm">
+                                        <div>Train</div><div>Val</div><div>Test</div>
+                                    </div>
+                                    <!-- START: IMPROVEMENT - z-index is now controlled via JS for better interaction -->
+                                    <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>
+                                    <!-- END: IMPROVEMENT -->
+                                    <div class="grid grid-cols-3 gap-2 text-center text-xs text-stone-400">
+                                        <div id="split-train-display">70%</div>
+                                        <div id="split-val-display">20%</div>
+                                        <div id="split-test-display">10%</div>
+                                    </div>
+                                </div>
                             </div>
-                            <div>
-                                <label for="rotation-variance" class="text-sm flex justify-between">Rotation Variance <span id="rotation-variance-value">100%</span></label>
-                                <input type="range" id="rotation-variance" min="0" max="100" value="100" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer">
-                            </div>
-                            <div>
-                                <label for="scale-variance" class="text-sm flex justify-between">Scale Variance <span id="scale-variance-value">10%</span></label>
-                                <input type="range" id="scale-variance" min="0" max="100" value="10" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer">
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Camera Angle Controls -->
-                    <div id="camera-randomization-section" class="control-section space-y-3 bg-stone-900/50 p-4 rounded-lg 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">Randomize 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. This option is only available when 'Use Current Panorama' is selected.</span></span>
-                            </label>
-                            <input type="checkbox" id="randomize-camera-toggle" class="h-5 w-5 rounded text-blue-500 bg-stone-700 border-stone-500 focus:ring-blue-600 cursor-pointer">
                         </div>
-                        <div id="camera-sliders" class="sliders-container pl-4 border-l-2 border-stone-700 space-y-3">
-                            <div>
-                                <label for="horizontal-variance" class="text-sm flex justify-between">Horizontal Variance <span id="horizontal-variance-value">20°</span></label>
-                                <input type="range" id="horizontal-variance" min="0" max="180" value="20" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer">
-                            </div>
-                            <div>
-                            <label for="vertical-variance" class="text-sm flex justify-between">Vertical Variance <span id="vertical-variance-value">0°</span></label>
-                                <input type="range" id="vertical-variance" min="0" max="90" value="0" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer">
+
+                        <!-- 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>
+                            <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>
+                                        </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>
+                                        <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="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>
+                                             <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>
+                                    </div>
+                                    <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>
+                                             <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>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
+                </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-4 py-2 rounded-md font-semibold hover:bg-stone-700 transition-colors">Cancel</button>
-                <button id="start-dataset" 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">Generate</button>
+                <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>
             </div>
         </div>
     </div>
     <div id="progress-container" class="modal-overlay fixed inset-0 z-40 hidden items-center justify-center p-4">
         <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 id="progress-label" class="mb-2 text-sm text-stone-300">Processing...</div>
+            <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>
             <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>
@@ -202,7 +333,10 @@
              <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">Load</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>
         </div>
     </div>
@@ -217,7 +351,7 @@
             <i data-feather="sun" class="w-5 h-5 text-stone-400"></i>
             <label class="relative inline-flex items-center cursor-pointer">
                 <input type="checkbox" id="day-night-toggle" class="sr-only peer">
-                <div class="w-11 h-6 bg-stone-700 rounded-full peer 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>
             <i data-feather="moon" class="w-5 h-5 text-stone-400"></i>
         </div>
@@ -252,7 +386,8 @@
 
     <script type="importmap">{ "imports": {
         "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-        "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+        "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
+        "concaveman": "https://cdn.skypack.dev/concaveman"
     } }</script>
 
     <script type="module">
@@ -263,6 +398,7 @@
         import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
         import JSZip from "https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm";
         import gsap from "https://cdn.jsdelivr.net/npm/gsap@3.12.5/+esm";
+        import concaveman from 'concaveman';
 
         // --- CONFIG & STATE ---
         const ASSET_BASE_URL = 'https://huggingface.co/spaces/aaurelions/drones/resolve/main';
@@ -276,6 +412,9 @@
         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');
@@ -311,11 +450,14 @@
             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();
             
-            // Initial asset loading sequence
             try {
                 await loadAsset(panoramaAssets[0], 'panorama');
                 await loadAsset(modelAssets[0], 'model');
@@ -328,14 +470,16 @@
             }
         }
         
-        /**
-         * Generic asset loading execution wrapper.
-         * @param {object} assetData - The asset data object {name, url, ...}.
-         * @param {'model'|'panorama'} assetType - The type of the asset.
-         */
-        async function loadAsset(assetData, assetType) {
+        async function loadAsset(assetData, assetType, button = null) {
             const isInitialLoad = !loaderOverlay.classList.contains('hidden');
-            if (!isInitialLoad) {
+            let spinner, textSpan;
+            if(button){
+                spinner = button.querySelector('.btn-spinner');
+                textSpan = button.querySelector('.btn-text');
+                spinner.classList.remove('hidden');
+                textSpan.classList.add('hidden');
+                button.disabled = true;
+            } else if (!isInitialLoad) {
                 loaderText.textContent = `Loading ${assetType}...`;
                 loaderOverlay.classList.remove('hidden');
                 gsap.to(loaderOverlay, { opacity: 1, duration: 0.3 });
@@ -362,48 +506,55 @@
                         }, undefined, reject);
                     });
                 } else { // model
-                    await new Promise((resolve, reject) => {
-                        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;
-                            if (activeControlMode) transformControls.attach(selectedObject);
-                            setActiveCard('model-selector', assetData.name);
-                            return resolve();
-                        }
-                        
-                        const loader = new GLTFLoader();
-                        loader.load(assetData.url, (gltf) => {
-                            modelAssets.forEach(m => { if(m.mesh) m.mesh.visible = false; });
-                            const model = gltf.scene;
-                            model.name = assetData.name;
-                            const box = new THREE.Box3().setFromObject(model);
-                            const size = box.getSize(new THREE.Vector3());
-                            const center = box.getCenter(new THREE.Vector3());
-                            model.position.sub(center);
-                            const maxDim = Math.max(size.x, size.y, size.z);
-                            model.scale.setScalar(4.0 / maxDim);
-                            scene.add(model);
-                            
-                            const assetToUpdate = modelAssets.find(m => m.name === assetData.name);
-                            if (assetToUpdate) assetToUpdate.mesh = model;
-                            else modelAssets.push({ ...assetData, mesh: model });
-                            
-                            selectedObject = model;
-                            if (activeControlMode) transformControls.attach(selectedObject);
-                            setActiveCard('model-selector', assetData.name);
-                            resolve();
-                        }, undefined, reject);
-                    });
+                    if (selectedObject) transformControls.detach();
+                    
+                    const existingAsset = modelAssets.find(m => m.name === assetData.name && m.mesh);
+                    if (existingAsset) {
+                         modelAssets.forEach(m => { if(m.mesh) m.mesh.visible = false; });
+                         existingAsset.mesh.visible = true;
+                         selectedObject = existingAsset.mesh;
+                    } else {
+                        await new Promise((resolve, reject) => {
+                            const loader = new GLTFLoader();
+                            loader.load(assetData.url, (gltf) => {
+                                modelAssets.forEach(m => { if(m.mesh) m.mesh.visible = false; });
+                                const model = gltf.scene;
+                                model.name = assetData.name;
+                                const box = new THREE.Box3().setFromObject(model);
+                                const size = box.getSize(new THREE.Vector3());
+                                const center = box.getCenter(new THREE.Vector3());
+                                model.position.sub(center);
+                                const maxDim = Math.max(size.x, size.y, size.z);
+                                model.scale.setScalar(4.0 / maxDim);
+                                scene.add(model);
+                                
+                                const assetToUpdate = modelAssets.find(m => m.name === assetData.name);
+                                if (assetToUpdate) {
+                                    assetToUpdate.mesh = model;
+                                    // Store original materials for render mask method
+                                    assetToUpdate.originalMaterials = new Map();
+                                    model.traverse(node => {
+                                        if(node.isMesh) assetToUpdate.originalMaterials.set(node, node.material);
+                                    });
+                                }
+                                
+                                selectedObject = model;
+                                resolve();
+                            }, undefined, reject);
+                        });
+                    }
+                    if (activeControlMode) transformControls.attach(selectedObject);
+                    setActiveCard('model-selector', assetData.name);
                 }
             } catch (error) {
                 showNotification({ text: `Failed to load ${assetType}: ${assetData.name}`, type: 'error', duration: 4000 });
                 console.error(`Failed to load ${assetType}:`, error);
             } finally {
-                if (!isInitialLoad) {
+                if(button){
+                    spinner.classList.add('hidden');
+                    textSpan.classList.remove('hidden');
+                    button.disabled = false;
+                } else if (!isInitialLoad) {
                     gsap.to(loaderOverlay, { opacity: 0, duration: 0.5, onComplete: () => loaderOverlay.classList.add('hidden') });
                     canvas.classList.remove('loading');
                 }
@@ -504,7 +655,7 @@
                 const key = e.key.toLowerCase();
                 if (key === 'w' || key === 'e' || key === 'r') { e.preventDefault(); setControlMode(key === 'w' ? 'translate' : key === 'e' ? 'rotate' : 'scale'); }
                 if (key === 'g') { e.preventDefault(); document.getElementById('generate-dataset-btn').click(); }
-                if (key === 'escape') { document.querySelectorAll('.side-panel.is-open').forEach(p => p.classList.remove('is-open')); }
+                if (key === 'escape') { document.querySelectorAll('.side-panel.is-open, .modal-overlay.flex').forEach(p => p.classList.add('hidden')); }
             });
 
             setupUploadModal();
@@ -517,7 +668,9 @@
             const fileInput = document.getElementById('upload-file-input');
             const urlInput = document.getElementById('upload-url-input');
             const dropZone = document.getElementById('upload-drop-zone');
+            const loadBtn = document.getElementById('upload-load-btn');
             let currentType, currentHandler;
+
             const openModal = (type, titleText, accept, placeholder, handler) => {
                 currentType = type;
                 title.textContent = titleText;
@@ -527,18 +680,23 @@
                 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', handleNewAsset));
-            document.getElementById('add-panorama-btn').addEventListener('click', () => openModal('panorama', 'Upload New Panorama', 'image/*,.hdr', 'Enter image URL', handleNewAsset));
+            
+            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'));
-            document.getElementById('upload-load-btn').addEventListener('click', () => { const url = urlInput.value.trim(); if(url) currentHandler(currentType, url); });
+            
+            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]) });
+            fileInput.addEventListener('change', e => { if (e.target.files.length) currentHandler(currentType, e.target.files[0], loadBtn) });
             dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
             dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
-            dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); if (e.dataTransfer.files.length) currentHandler(currentType, e.dataTransfer.files[0]); });
+            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) {
+        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);
@@ -546,302 +704,387 @@
             
             const newAssetData = { name, url, mesh: null };
             if (type === 'model') {
-                newAssetData.thumb = 'placeholder'; // Placeholder, will be replaced by icon
+                 if (modelAssets.some(m => m.name === name)) {
+                    showNotification({text: `Model "${name}" already exists.`, type: 'error'});
+                    return;
+                }
+                newAssetData.thumb = 'placeholder';
                 modelAssets.push(newAssetData);
                 createAssetCard('model', newAssetData);
-                await loadAsset(newAssetData, 'model');
+                await loadAsset(newAssetData, 'model', button);
             } else {
-                newAssetData.thumb = url; // For panoramas, the URL itself is the thumb
+                 if (panoramaAssets.some(p => p.name === name)) {
+                    showNotification({text: `Panorama "${name}" already exists.`, type: 'error'});
+                    return;
+                }
+                newAssetData.thumb = url; 
                 panoramaAssets.push(newAssetData);
                 createAssetCard('panorama', newAssetData);
-                await loadAsset(newAssetData, 'panorama');
+                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(); 
+
+            document.getElementById('generate-dataset-btn').addEventListener('click', () => {
+                modal.classList.remove('hidden');
+                modal.classList.add('flex');
+                feather.replace(); // Redraw icons like tooltips
                 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);
-                if(slider && display) slider.addEventListener('input', () => { display.textContent = slider.value + unit; });
+                if (slider && display) {
+                    display.textContent = slider.value + unit;
+                    slider.addEventListener('input', () => { display.textContent = slider.value + unit; });
+                }
             };
             setupSlider('position-variance', 'position-variance-value', '%');
             setupSlider('rotation-variance', 'rotation-variance-value', '%');
             setupSlider('scale-variance', 'scale-variance-value', '%');
             setupSlider('horizontal-variance', 'horizontal-variance-value', '°');
             setupSlider('vertical-variance', 'vertical-variance-value', '°');
+            setupSlider('concave-hull-concavity', 'concave-hull-concavity-value', '');
+
+            // --- START: IMPROVEMENT - Fix slider handle z-index issue on interaction ---
+            const trainSlider = document.getElementById('split-train-ratio');
+            const valSlider = document.getElementById('split-val-ratio');
+            
+            const bringToFront = (el, topZ, bottomZ) => {
+                el.style.zIndex = topZ;
+                (el === trainSlider ? valSlider : trainSlider).style.zIndex = bottomZ;
+            }
+            
+            trainSlider.addEventListener('input', () => { if (parseInt(trainSlider.value) >= parseInt(valSlider.value)) valSlider.value = parseInt(trainSlider.value); updateSplitRatios(); });
+            valSlider.addEventListener('input', () => { if (parseInt(valSlider.value) <= parseInt(trainSlider.value)) trainSlider.value = parseInt(valSlider.value); updateSplitRatios(); });
+            
+            trainSlider.addEventListener('mousedown', () => bringToFront(trainSlider, 25, 20));
+            trainSlider.addEventListener('touchstart', () => bringToFront(trainSlider, 25, 20));
+            valSlider.addEventListener('mousedown', () => bringToFront(valSlider, 25, 20));
+            valSlider.addEventListener('touchstart', () => bringToFront(valSlider, 25, 20));
+            // --- END: IMPROVEMENT ---
         }
 
         function updateDatasetModalUI() {
             // Model Source UI
-            const useCurrentModel = document.querySelector('input[name="model-source"]:checked').value === 'current';
+            const useCurrentModel = document.querySelector('input[name="model-source"]:checked')?.value === 'current';
             const modelInfo = document.getElementById('model-source-current-info');
-            if (useCurrentModel) {
-                modelInfo.textContent = `Using: ${selectedObject ? selectedObject.name : 'None'}`;
-                modelInfo.classList.remove('hidden');
-            } else {
-                modelInfo.classList.add('hidden');
-            }
+            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 useCurrentPano = document.querySelector('input[name="pano-source"]:checked')?.value === 'current';
             const panoInfo = document.getElementById('pano-source-current-info');
-            if (useCurrentPano) {
-                panoInfo.textContent = `Using: ${activePanorama ? activePanorama.name : 'None'}`;
-                panoInfo.classList.remove('hidden');
-            } else {
-                panoInfo.classList.add('hidden');
-            }
+            panoInfo.textContent = `Using: ${activePanorama ? activePanorama.name : 'None'}`;
+            panoInfo.classList.toggle('hidden', !useCurrentPano);
 
             // Model Randomization Sliders
-            const randomizeModel = document.getElementById('randomize-model-toggle').checked;
-            const modelSliders = document.getElementById('model-sliders');
-            gsap.to(modelSliders, { 
-                maxHeight: randomizeModel ? 200 : 0, 
-                opacity: randomizeModel ? 1 : 0,
-                paddingTop: randomizeModel ? '0.75rem' : 0, 
-                marginTop: randomizeModel ? '0.75rem' : 0,
-                duration: 0.4, 
-                ease: 'power2.inOut' 
-            });
-
+            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;
-            cameraToggle.closest('label').style.cursor = useCurrentPano ? 'pointer' : 'not-allowed';
-
-            if (!useCurrentPano) cameraToggle.checked = false;
+            if (!useCurrentPano) { cameraToggle.checked = false; }
+            const cameraToggleLabel = cameraToggle.closest('label.flex.items-center.gap-2');
+            if(cameraToggleLabel) cameraToggleLabel.style.cursor = useCurrentPano ? 'pointer' : 'not-allowed';
 
             const randomizeCamera = useCurrentPano && cameraToggle.checked;
-            const cameraSliders = document.getElementById('camera-sliders');
-            gsap.to(cameraSliders, { 
-                maxHeight: randomizeCamera ? 150 : 0, 
-                opacity: randomizeCamera ? 1 : 0,
-                paddingTop: randomizeCamera ? '0.75rem' : 0, 
-                marginTop: randomizeCamera ? '0.75rem' : 0,
-                duration: 0.4, 
-                ease: 'power2.inOut' 
+            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, 
+                opacity: showSegGroup ? 1 : 0,
+                paddingTop: showSegGroup ? '0.5rem' : 0,
+                marginTop: showSegGroup ? '1rem' : 0,
+                duration: 0.4 
+            });
+
+            // --- START: IMPROVEMENT - Show/hide concavity slider ---
+            const showConcaveOptions = showSegGroup && segMethod === 'concave';
+            gsap.to(concaveOptions, {
+                maxHeight: showConcaveOptions ? 100 : 0,
+                opacity: showConcaveOptions ? 1 : 0,
+                paddingTop: showConcaveOptions ? '0.75rem' : 0,
+                duration: 0.4
             });
+            // --- END: IMPROVEMENT ---
+
+            // Dataset Splits UI
+            updateSplitRatios();
+        }
+
+        function updateSplitRatios() {
+            const valToggle = document.getElementById('include-val-set');
+            const testToggle = document.getElementById('include-test-set');
+            const trainSlider = document.getElementById('split-train-ratio');
+            const valSlider = document.getElementById('split-val-ratio');
+            
+            valSlider.disabled = !valToggle.checked;
+            testToggle.disabled = !valToggle.checked; // Test set requires a val set
+            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;
+            }
+
+            const valPct = valToggle.checked ? valEndPct - trainPct : 0;
+            const testPct = testToggle.checked ? 100 - valEndPct : 0;
+            const trainDisplayPct = 100 - valPct - testPct;
+
+            document.getElementById('split-train-display').textContent = `${trainDisplayPct}%`;
+            document.getElementById('split-val-display').textContent = `${valPct}%`;
+            document.getElementById('split-test-display').textContent = `${testPct}%`;
+
+            document.getElementById('split-val-display').style.visibility = valToggle.checked ? 'visible' : 'hidden';
+            document.getElementById('split-test-display').style.visibility = testToggle.checked ? 'visible' : 'hidden';
+            
+            const total = trainDisplayPct + valPct + testPct;
+            document.getElementById('split-ratio-sum').textContent = total;
+
+            document.getElementById('split-bg-train').style.width = `${trainDisplayPct}%`;
+            const valBg = document.getElementById('split-bg-val');
+            valBg.style.left = `${trainDisplayPct}%`;
+            valBg.style.width = `${valPct}%`;
+            valBg.style.display = valToggle.checked ? 'block' : 'none';
+
+            const testBg = document.getElementById('split-bg-test');
+            testBg.style.left = `${trainDisplayPct + valPct}%`;
+            testBg.style.width = `${testPct}%`;
+            testBg.style.display = testToggle.checked ? 'block' : 'none';
         }
         
         async function handleDatasetGeneration() {
-            const modal = document.getElementById('dataset-modal');
-            const options = {
-                task: document.getElementById('dataset-task').value,
-                samples: parseInt(document.getElementById('dataset-samples').value),
-                name: document.getElementById('dataset-name').value.trim(),
-                useCurrentModel: document.querySelector('input[name="model-source"]:checked').value === 'current',
-                randomizeModel: document.getElementById('randomize-model-toggle').checked,
-                posVar: parseInt(document.getElementById('position-variance').value) / 100,
-                rotVar: parseInt(document.getElementById('rotation-variance').value) / 100,
-                scaleVar: parseInt(document.getElementById('scale-variance').value) / 100,
-                useCurrentPanorama: document.querySelector('input[name="pano-source"]:checked').value === 'current',
-                randomizeCamera: document.getElementById('randomize-camera-toggle').checked,
-                hVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('horizontal-variance').value)),
-                vVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('vertical-variance').value)),
-                initial: {
-                    model: {
-                        position: selectedObject ? selectedObject.position.clone() : new THREE.Vector3(),
-                        rotation: selectedObject ? selectedObject.rotation.clone() : new THREE.Euler(),
-                        scale: selectedObject ? selectedObject.scale.x : 1
-                    },
-                    camera: { position: camera.position.clone() }
+            const startBtn = document.getElementById('start-dataset');
+            const cancelBtn = document.getElementById('cancel-dataset');
+            const btnText = startBtn.querySelector('.btn-text');
+            const btnSpinner = startBtn.querySelector('.btn-spinner');
+
+            btnText.classList.add('hidden');
+            btnSpinner.classList.remove('hidden');
+            startBtn.disabled = true;
+            cancelBtn.disabled = true;
+
+            try {
+                const trainSlider = document.getElementById('split-train-ratio');
+                const valSlider = document.getElementById('split-val-ratio');
+
+                const options = {
+                    task: document.querySelector('input[name="dataset-task"]:checked').value,
+                    segmentationMethod: document.querySelector('input[name="segmentation-method"]:checked').value,
+                    concavity: parseFloat(document.getElementById('concave-hull-concavity').value), // New option
+                    samples: parseInt(document.getElementById('dataset-samples').value),
+                    name: document.getElementById('dataset-name').value.trim(),
+                    useCurrentModel: document.querySelector('input[name="model-source"]:checked').value === 'current',
+                    randomizeModel: document.getElementById('randomize-model-toggle').checked,
+                    posVar: parseInt(document.getElementById('position-variance').value) / 100,
+                    rotVar: parseInt(document.getElementById('rotation-variance').value) / 100,
+                    scaleVar: parseInt(document.getElementById('scale-variance').value) / 100,
+                    useCurrentPanorama: document.querySelector('input[name="pano-source"]:checked').value === 'current',
+                    randomizeCamera: document.getElementById('randomize-camera-toggle').checked,
+                    hVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('horizontal-variance').value)),
+                    vVar: THREE.MathUtils.degToRad(parseInt(document.getElementById('vertical-variance').value)),
+                    includeVal: document.getElementById('include-val-set').checked,
+                    includeTest: document.getElementById('include-test-set').checked,
+                    trainSplit: parseInt(trainSlider.value),
+                    valSplit: parseInt(valSlider.value),
+                    initial: {
+                        model: {
+                            position: selectedObject ? selectedObject.position.clone() : new THREE.Vector3(),
+                            rotation: selectedObject ? selectedObject.rotation.clone() : new THREE.Euler(),
+                            scale: selectedObject ? selectedObject.scale.x : 1
+                        },
+                        camera: { position: camera.position.clone() }
+                    }
+                };
+
+                if (!options.name) { showNotification({ text: "Dataset name cannot be empty.", type: "error" }); return; }
+                if ((options.task === 'detection' || options.task === 'segmentation') && !options.includeVal) {
+                    showNotification({ text: "Validation set is required for YOLO formats.", type: "error" });
+                    document.getElementById('include-val-set').checked = true;
+                    updateDatasetModalUI();
+                    return;
                 }
-            };
-            if (!options.name) { showNotification({ text: "Dataset name cannot be empty.", type: "error" }); return; }
-            modal.classList.add('hidden');
-            const progressContainer = document.getElementById('progress-container');
-            progressContainer.classList.remove('hidden'); progressContainer.classList.add('flex');
-            
-            const zip = new JSZip();
-            const originalModelAsset = selectedObject ? modelAssets.find(m => m.name === selectedObject.name) : null;
-            const originalPanoramaAsset = activePanorama;
-
-            const transformWasVisible = transformControls.visible;
-            if (transformWasVisible) transformControls.visible = false;
-
-            for (let i = 0; i < options.samples; i++) {
-                updateProgress(i + 1, options.samples, `Generating sample ${i + 1} of ${options.samples}`);
-                await randomizeSceneForGeneration(options);
-                renderer.render(scene, camera);
-                const imageName = `sample_${String(i).padStart(5, '0')}.jpg`;
-                const labelName = imageName.replace('.jpg', '.txt');
-                const { imageBlob, labelData } = await generateSampleData(options.task);
+
+                document.getElementById('dataset-modal').classList.add('hidden');
+                const progressContainer = document.getElementById('progress-container');
+                progressContainer.classList.remove('hidden'); progressContainer.classList.add('flex');
                 
-                if (imageBlob && selectedObject) {
-                    const classFolder = selectedObject.visible ? selectedObject.name.replace(/\.[^/.]+$/, "") : 'background_only';
-                    if (options.task === 'classification') {
-                        zip.folder(options.name).folder('train').folder(classFolder).file(imageName, imageBlob);
-                    } else {
-                        zip.folder(options.name).folder('images').folder('train').file(imageName, imageBlob);
-                        if (labelData) { zip.folder(options.name).folder('labels').folder('train').file(labelName, labelData); }
+                const zip = new JSZip();
+                const rootFolderName = options.name;
+                const usedClasses = new Set();
+                
+                const originalModelAsset = selectedObject ? modelAssets.find(m => m.name === selectedObject.name) : null;
+                const originalPanoramaAsset = activePanorama;
+                const transformWasVisible = transformControls.visible;
+                if (transformWasVisible) transformControls.visible = false;
+
+                for (let i = 0; i < options.samples; i++) {
+                    updateProgress(i + 1, options.samples);
+                    const currentModelAsset = await randomizeSceneForGeneration(options, usedClasses);
+                    
+                    renderer.render(scene, camera);
+                    const imageName = `sample_${String(i).padStart(5, '0')}.jpg`;
+                    const labelName = imageName.replace('.jpg', '.txt');
+                    
+                    const modelClassName = currentModelAsset ? currentModelAsset.name.replace(/\.[^/.]+$/, "") : 'background_only';
+                    const classIndex = currentModelAsset ? modelAssets.findIndex(m => m.name === currentModelAsset.name) : -1;
+                    
+                    const { imageBlob, labelData } = await generateSampleData(options, classIndex);
+                    
+                    if (imageBlob) {
+                        const randomVal = Math.random() * 100;
+                        let splitFolder = 'train';
+                        
+                        // 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;
+
+                        if (options.includeTest && randomVal > (trainPct + valPct)) {
+                            splitFolder = 'test';
+                        } else if (options.includeVal && randomVal > trainPct) {
+                            splitFolder = 'val';
+                        }
+
+                        if (options.task === 'classification') {
+                            const classFolder = currentModelAsset && selectedObject.visible ? modelClassName : 'background_only';
+                            zip.folder(rootFolderName).folder(splitFolder).folder(classFolder).file(imageName, imageBlob);
+                        } else {
+                            zip.folder(rootFolderName).folder('images').folder(splitFolder).file(imageName, imageBlob);
+                            if (labelData) { zip.folder(rootFolderName).folder('labels').folder(splitFolder).file(labelName, labelData); }
+                        }
                     }
+                    if(i % 10 === 0) await new Promise(resolve => setTimeout(resolve, 1));
                 }
-                await new Promise(resolve => setTimeout(resolve, 5));
-            }
 
-            if (transformWasVisible) transformControls.visible = true;
-            
-            updateProgress(options.samples, options.samples, "Compressing ZIP file...");
-            const content = await zip.generateAsync({ type: "blob" });
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(content);
-            link.download = `${options.name}.zip`;
-            link.click();
-            URL.revokeObjectURL(link.href);
-            progressContainer.classList.add('hidden');
-            showNotification({ text: 'Dataset generation complete!', type: 'success' });
-            
-            // Restore original scene
-            if (originalPanoramaAsset) await loadAsset(originalPanoramaAsset, 'panorama');
-            if (originalModelAsset) await loadAsset(originalModelAsset, 'model');
+                if (options.task !== 'classification') {
+                    const classNames = Array.from(usedClasses).sort().map((name, index) => `  ${index}: ${name.replace(/\.[^/.]+$/, "")}`).join('\n');
+                    let yamlContent = `path: ${rootFolderName}\ntrain: images/train\nval: images/val\n`;
+                    if(options.includeTest) yamlContent += `test: images/test\n`;
+                    yamlContent += `\nnames:\n${classNames}`;
+                    zip.folder(rootFolderName).file(`${options.name}.yaml`, yamlContent);
+                }
+
+                if (transformWasVisible) transformControls.visible = true;
+                
+                updateProgress(options.samples, options.samples, "Compressing ZIP...");
+                const content = await zip.generateAsync({ type: "blob" });
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(content);
+                link.download = `${rootFolderName}.zip`;
+                link.click();
+                URL.revokeObjectURL(link.href);
+                progressContainer.classList.add('hidden');
+                showNotification({ text: 'Dataset generation complete!', type: 'success' });
+                
+                await loadAsset(originalPanoramaAsset || panoramaAssets[0], 'panorama');
+                await loadAsset(originalModelAsset || modelAssets[0], 'model');
+
+            } finally {
+                btnText.classList.remove('hidden');
+                btnSpinner.classList.add('hidden');
+                startBtn.disabled = false;
+                cancelBtn.disabled = false;
+            }
         }
 
-        async function randomizeSceneForGeneration(options) {
-            // Select and load assets
+        async function randomizeSceneForGeneration(options, usedClasses) {
+            let currentModelAsset;
             if (!options.useCurrentPanorama) {
                 const randomPano = panoramaAssets[Math.floor(Math.random() * panoramaAssets.length)];
                 await loadAsset(randomPano, 'panorama');
             }
             if (!options.useCurrentModel) {
-                const randomModel = modelAssets[Math.floor(Math.random() * modelAssets.length)];
-                await loadAsset(randomModel, 'model');
+                currentModelAsset = modelAssets[Math.floor(Math.random() * modelAssets.length)];
+                await loadAsset(currentModelAsset, 'model');
+            } else {
+                currentModelAsset = modelAssets.find(m => m.name === selectedObject.name);
             }
             
-            if (!selectedObject) return;
+            if (!currentModelAsset || !selectedObject) return null;
+            
+            usedClasses.add(currentModelAsset.name);
 
-            // Handle classification case with background-only images
-            selectedObject.visible = !(options.task === 'classification' && Math.random() < 0.2); // 20% chance of background only
-            if (!selectedObject.visible) return;
+            selectedObject.visible = !(options.task === 'classification' && Math.random() < 0.2);
+            if (!selectedObject.visible) return null;
 
-            // Randomize Model
             if (options.randomizeModel) {
-                if(options.useCurrentModel) { // Relative randomization
+                if(options.useCurrentModel) { // Relative
                     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 offsetQuaternion = new THREE.Quaternion().setFromEuler(rotOffset);
-                    baseQuaternion.multiply(offsetQuaternion);
+                    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);
 
-                    const scaleFactor = 1 + (Math.random() - 0.5) * 2 * options.scaleVar;
-                    selectedObject.scale.setScalar(baseScale * scaleFactor);
-                } else { // Absolute randomization
-                    selectedObject.position.set((Math.random() - 0.5) * 10 * options.posVar, Math.random() * 5 * options.posVar, (Math.random() - 0.5) * 10 * options.posVar);
-                    selectedObject.rotation.set(Math.random() * Math.PI * 2 * options.rotVar, Math.random() * Math.PI * 2 * options.rotVar, Math.random() * Math.PI * 2 * options.rotVar);
-                    const baseScale = selectedObject.scale.x; // Use its default scale as a base
-                    const scaleFactor = 0.5 + Math.random() * 1.5 * (1 + options.scaleVar);
-                    selectedObject.scale.setScalar(baseScale * scaleFactor);
+                    selectedObject.scale.setScalar(baseScale * (1 + (Math.random() - 0.5) * 2 * options.scaleVar));
+                } else { // Absolute
+                    selectedObject.position.set((Math.random() - 0.5) * 10, Math.random() * 5, (Math.random() - 0.5) * 10);
+                    selectedObject.rotation.set(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2);
+                    const box = new THREE.Box3().setFromObject(selectedObject);
+                    const size = box.getSize(new THREE.Vector3());
+                    const maxDim = Math.max(size.x, size.y, size.z);
+                    const baseScale = maxDim > 0 ? 4.0 / maxDim : 1.0;
+                    selectedObject.scale.setScalar(baseScale * (0.5 + Math.random()));
                 }
             }
 
-            // Randomize Camera
-            if (options.useCurrentPanorama && options.randomizeCamera) { // Relative randomization
-                const baseCamPos = options.initial.camera.position;
-                const spherical = new THREE.Spherical().setFromCartesianCoords(baseCamPos.x, baseCamPos.y, baseCamPos.z);
+            if (options.useCurrentPanorama && options.randomizeCamera) { // Relative camera
+                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 randomization
+            } else if (!options.useCurrentPanorama) { // Absolute camera
                 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);
-        }
-        
-        async function generateSampleData(task) {
-            let imageBlob = null, labelData = null;
-            if (task === 'segmentation') {
-                const { colorBlob, segLabel } = await getSegmentationLabelAndImage();
-                imageBlob = colorBlob; labelData = segLabel;
-            } else {
-                imageBlob = await getCanvasBlob();
-                if (task === 'detection') { labelData = getDetectionLabel(); }
-            }
-            return { imageBlob, labelData };
-        }
-
-        function getDetectionLabel() {
-            if (!selectedObject || !selectedObject.visible) return null;
-            const box3 = new THREE.Box3().setFromObject(selectedObject);
-            if (box3.isEmpty()) return null;
-            const corners = [ new THREE.Vector3(box3.min.x, box3.min.y, box3.min.z), new THREE.Vector3(box3.min.x, box3.min.y, box3.max.z), new THREE.Vector3(box3.min.x, box3.max.y, box3.min.z), new THREE.Vector3(box3.min.x, box3.max.y, box3.max.z), new THREE.Vector3(box3.max.x, box3.min.y, box3.min.z), new THREE.Vector3(box3.max.x, box3.min.y, box3.max.z), new THREE.Vector3(box3.max.x, box3.max.y, box3.min.z), new THREE.Vector3(box3.max.x, box3.max.y, box3.max.z) ];
-            let minX = 1, maxX = -1, minY = 1, maxY = -1;
-            let visibleCorners = 0;
-            corners.forEach(corner => { 
-                corner.project(camera); 
-                if (corner.z < 1) { // Check if the corner is in front of the camera's near plane
-                    minX = Math.min(minX, corner.x); maxX = Math.max(maxX, corner.x); 
-                    minY = Math.min(minY, corner.y); maxY = Math.max(maxY, corner.y); 
-                    visibleCorners++;
-                }
-            });
-            if (visibleCorners === 0 || maxX < -1 || minX > 1 || maxY < -1 || minY > 1) return null;
-            minX = Math.max(-1, minX); maxX = Math.min(1, maxX); minY = Math.max(-1, minY); maxY = Math.min(1, maxY);
-            const normCenterX = ((minX + maxX) / 2 + 1) / 2; const normCenterY = (-(minY + maxY) / 2 + 1) / 2;
-            const normWidth = (maxX - minX) / 2; const normHeight = (maxY - minY) / 2;
-            if (normWidth < 0.01 || normHeight < 0.01) return null; // Filter out tiny boxes
-            return `0 ${normCenterX.toFixed(6)} ${normCenterY.toFixed(6)} ${normWidth.toFixed(6)} ${normHeight.toFixed(6)}`;
-        }
-
-        async function getSegmentationLabelAndImage() {
-            if (!selectedObject || !selectedObject.visible) {
-                 const colorBlob = await getCanvasBlob();
-                 return { colorBlob, segLabel: null };
-            }
-            const originalBackground = scene.background;
-            renderer.render(scene, camera);
-            const colorBlob = await getCanvasBlob();
-            const maskMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
-            const originalMaterials = new Map();
-            selectedObject.traverse(node => { if (node.isMesh) { originalMaterials.set(node, node.material); node.material = maskMaterial; } });
-            scene.background = new THREE.Color(0x000000);
-            renderer.render(scene, camera);
-            const maskCanvas = document.createElement('canvas');
-            maskCanvas.width = renderer.domElement.width; maskCanvas.height = renderer.domElement.height;
-            const maskCtx = maskCanvas.getContext('2d');
-            maskCtx.drawImage(renderer.domElement, 0, 0);
-            const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
-            scene.background = originalBackground;
-            selectedObject.traverse(node => { if (node.isMesh && originalMaterials.has(node)) { node.material = originalMaterials.get(node); } });
-            const contours = findContours(imageData);
-            if (contours.length === 0) return { colorBlob, segLabel: null };
-            contours.sort((a, b) => b.length - a.length);
-            const simplificationRate = Math.max(1, Math.floor(contours[0].length / 100)); // Simplify based on point count
-            const simplifiedContour = contours[0].filter((_, i) => i % simplificationRate === 0);
-            if (simplifiedContour.length < 3) return { colorBlob, segLabel: null };
-            const yoloPoints = simplifiedContour.map(p => `${(p.x/maskCanvas.width).toFixed(6)} ${(p.y/maskCanvas.height).toFixed(6)}`).join(' ');
-            return { colorBlob, segLabel: `0 ${yoloPoints}` };
+            return currentModelAsset;
         }
         
         // --- UTILS ---
-        function findTopLevelGroup(object) { let current = object; while (current.parent && current.parent !== scene) { current = current.parent; } return current; }
-        function findContours(imageData) { const { data, width, height } = imageData; const points = []; const step = 4; for (let y = 0; y < height; y+=step) { for (let x = 0; x < width; x+=step) { const i = (y * width + x) * 4; if (data[i] > 128) { const isEdge = x <= step || x >= width - step || y <= step || y >= height - step || data[i - (step*4)] === 0 || data[i + (step*4)] === 0 || data[i - width * (step*4)] === 0 || data[i + width * (step*4)] === 0; if (isEdge) points.push({ x, y }); } } } return points.length > 0 ? [points] : []; }
-        function getCanvasBlob() { return new Promise(resolve => renderer.domElement.toBlob(resolve, 'image/jpeg')); }
-        function updateProgress(current, total, text) { document.getElementById('progress-bar').style.width = `${total > 0 ? (current / total) * 100 : 0}%`; document.getElementById('progress-label').textContent = text; }
+        function findTopLevelGroup(object) { let current = object; while (current.parent && current.parent !== scene && current.parent !== maskScene) { current = current.parent; } return current; }
+        function getCanvasBlob() { return new Promise(resolve => renderer.domElement.toBlob(resolve, 'image/jpeg', 0.9)); }
+        function updateProgress(current, total, text = 'Processing...') { 
+            document.getElementById('progress-bar').style.width = `${total > 0 ? (current / total) * 100 : 0}%`; 
+            document.getElementById('progress-label').textContent = text;
+            document.getElementById('progress-count').textContent = `(${current}/${total})`;
+        }
         function setActiveCard(containerId, name) { document.querySelectorAll(`#${containerId} .asset-card`).forEach(c => c.classList.toggle('active', c.dataset.name === name)); }
 
         function showNotification({ text, type = 'success', duration = 3000, id = null }) {
@@ -873,6 +1116,196 @@
         }
         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 {
+                    const points = getProjected2dVertices();
+                    if (points && points.length > 3) {
+                        if (options.task === 'detection') {
+                            const hull = computeConvexHull(points);
+                            if(hull.length > 0) labelData = getDetectionLabel(hull, classIndex);
+                        } else if(options.task === 'segmentation') {
+                            if(options.segmentationMethod === 'concave') {
+                                labelData = generateConcaveHullData(points, classIndex, options.concavity);
+                            } else { // 'convex'
+                                const hull = computeConvexHull(points);
+                                if(hull.length > 0) labelData = getSegmentationLabel(hull, classIndex);
+                            }
+                        }
+                    }
+                }
+            }
+            renderer.render(scene, camera);
+            const imageBlob = await getCanvasBlob();
+            return { imageBlob, labelData };
+        }
+        
+        function getDetectionLabel(hull, classIndex) {
+            let minX = 1, maxX = -1, minY = 1, maxY = -1;
+            for (const p of hull) {
+                minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x);
+                minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y);
+            }
+            if (maxX <= minX || maxY <= minY) return null;
+            const normCenterX = (((minX + maxX) / 2) + 1) / 2;
+            const normCenterY = (-((minY + maxY) / 2) + 1) / 2;
+            const normWidth = (maxX - minX) / 2;
+            const normHeight = (maxY - minY) / 2;
+            if (normWidth < 0.001 || normHeight < 0.001) return null;
+            return `${classIndex} ${normCenterX.toFixed(6)} ${normCenterY.toFixed(6)} ${normWidth.toFixed(6)} ${normHeight.toFixed(6)}`;
+        }
+        
+        function getSegmentationLabel(points, classIndex) {
+            if (points.length < 3) return null;
+            const yoloPoints = points.map(p => `${((p.x + 1) / 2).toFixed(6)} ${((-p.y + 1) / 2).toFixed(6)}`).join(' ');
+            return `${classIndex} ${yoloPoints}`;
+        }
+
+        function generateConcaveHullData(points, classIndex, concavity) {
+            const screenPoints = points.map(p => [p.x, p.y]);
+            const hull = concaveman(screenPoints, concavity);
+            if (hull.length < 3) return getSegmentationLabel(computeConvexHull(points), classIndex); // Fallback
+            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; });
+            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); });
+
+            // 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);
+            const mainContour = contours[0];
+
+            // Simplify and format
+            const simplifiedContour = rdp(mainContour, 1.5); // RDP simplification
+            if (simplifiedContour.length < 3) return null;
+
+            const yoloPoints = simplifiedContour.map(p => `${(p.x / width).toFixed(6)} ${((height - p.y) / height).toFixed(6)}`).join(' ');
+            return `${classIndex} ${yoloPoints}`;
+        }
+
+        function computeConvexHull(points) {
+            if (points.length <= 3) return points;
+            points.sort((a, b) => a.x === b.x ? a.y - b.y : a.x - b.x);
+            const cross_product = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+            const lower = [];
+            for (const p of points) {
+                while (lower.length >= 2 && cross_product(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop();
+                lower.push(p);
+            }
+            const upper = [];
+            for (let i = points.length - 1; i >= 0; i--) {
+                const p = points[i];
+                while (upper.length >= 2 && cross_product(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop();
+                upper.push(p);
+            }
+            upper.pop(); lower.pop();
+            return lower.concat(upper);
+        }
+
+        function getProjected2dVertices() {
+            if (!selectedObject || !selectedObject.visible) return null;
+            const projectedVertices = [];
+            selectedObject.updateMatrixWorld(true);
+            selectedObject.traverse(node => {
+                if (node.isMesh) {
+                    const geometry = node.geometry;
+                    const positionAttribute = geometry.attributes.position;
+                    if (!positionAttribute) return;
+                    const vertex = new THREE.Vector3();
+                    for (let i = 0; i < positionAttribute.count; i++) {
+                        vertex.fromBufferAttribute(positionAttribute, i);
+                        vertex.applyMatrix4(node.matrixWorld);
+                        vertex.project(camera);
+                        if (vertex.z < 1) projectedVertices.push({ x: vertex.x, y: vertex.y });
+                    }
+                }
+            });
+            return projectedVertices.length > 0 ? projectedVertices : null;
+        }
+        
+        /** Ramer-Douglas-Peucker algorithm for polygon simplification. */
+        function rdp(points, epsilon) {
+            if (points.length < 3) return points;
+            let dmax = 0; let index = 0;
+            const end = points.length - 1;
+            for (let i = 1; i < end; i++) {
+                const d = perpendicularDistance(points[i], points[0], points[end]);
+                if (d > dmax) { index = i; dmax = d; }
+            }
+            if (dmax > epsilon) {
+                const recResults1 = rdp(points.slice(0, index + 1), epsilon);
+                const recResults2 = rdp(points.slice(index, end + 1), epsilon);
+                return recResults1.slice(0, recResults1.length - 1).concat(recResults2);
+            } else { return [points[0], points[end]]; }
+        }
+        function perpendicularDistance(point, lineStart, lineEnd) {
+            let dx = lineEnd.x - lineStart.x; let dy = lineEnd.y - lineStart.y;
+            if (dx === 0 && dy === 0) return Math.sqrt(Math.pow(point.x - lineStart.x, 2) + Math.pow(point.y - lineStart.y, 2));
+            const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
+            const projectionX = lineStart.x + t * dx; const projectionY = lineStart.y + t * dy;
+            return Math.sqrt(Math.pow(point.x - projectionX, 2) + Math.pow(point.y - projectionY, 2));
+        }
+        
+        /** 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
+            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
+                        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 [dx, dy] = directions[nextDir];
+                                const nx = cx + dx, ny = cy + dy;
+                                if (isWhite(nx, ny)) {
+                                    cx = nx; cy = ny; dir = nextDir;
+                                    foundNext = true;
+                                    break;
+                                }
+                            }
+                            if (!foundNext || (cx === x && cy === y)) break; // Back to start
+                        }
+                        if (path.length > 10) contours.push(path);
+                    }
+                }
+            }
+            return contours;
+        }
+
         init();
     </script>
 </body>
