Update index.html

index.html

@@ -54,7 +54,7 @@
         .notification { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(150%) scale(0.9); opacity: 0; }
         .notification.show { transform: translateY(0) scale(1); opacity: 1; }
         .control-section { transition: opacity 0.3s ease; }
-        .sliders-container, .accordion-content, #concave-hull-options { 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; }
+        .sliders-container, .accordion-content, #concave-hull-options, #background-ratio-container { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s, padding-top 0.4s, margin-top 0.4s, padding-bottom 0.4s; overflow: hidden; }
         /* Enhanced Range Sliders */
         input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #44403c; border-radius: 5px; outline: none; transition: background 0.3s; padding: 0; margin: 0; }
         input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #e7e5e4; border-radius: 50%; cursor: pointer; border: 4px solid #3b82f6; transition: all 0.2s ease-in-out; margin-top: -7px; }
@@ -175,7 +175,6 @@
                                             </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 
@@ -188,7 +187,6 @@
                                             <input type="range" id="concave-hull-concavity" min="1" max="10" value="2">
                                         </div>
                                     </div>
-                                    <!-- END: IMPROVEMENT -->
                                 </div>
                              </div>
                         </div>
@@ -219,7 +217,6 @@
                                     <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>
@@ -227,7 +224,6 @@
                                          <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>
@@ -237,6 +233,34 @@
                             </div>
                         </div>
 
+                        <!-- START: IMPLEMENTATION of Negative Samples -->
+                        <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
+                            <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Sample Augmentation</h4>
+                            <div class="space-y-3">
+                                <div class="flex items-center justify-between">
+                                    <label for="include-background-toggle" class="font-medium text-stone-300 select-none cursor-pointer flex items-center gap-2">Include Background Samples
+                                        <span class="tooltip-trigger">
+                                            <i data-feather="help-circle" class="w-4 h-4 text-stone-400"></i>
+                                            <span class="tooltip-content">Generate some images with no objects (negative samples). This helps reduce false positives in detection models.</span>
+                                        </span>
+                                    </label>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" id="include-background-toggle" class="sr-only peer" checked>
+                                        <div class="w-11 h-6 bg-stone-700 rounded-full peer-checked:bg-blue-600 toggle-bg"></div>
+                                    </label>
+                                </div>
+                                <div id="background-ratio-container" class="sliders-container pl-1 space-y-3">
+                                    <div>
+                                        <label for="background-ratio-slider" class="text-sm flex justify-between">Ratio of Backgrounds
+                                            <span id="background-ratio-value">15%</span>
+                                        </label>
+                                        <input type="range" id="background-ratio-slider" min="0" max="50" value="20">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END: IMPLEMENTATION -->
+
                         <!-- Scene Composition & Randomization -->
                         <div class="bg-stone-900/50 rounded-lg p-4 border border-white/10">
                             <h4 class="text-lg font-semibold text-stone-300 mb-4 border-b border-white/10 pb-2">Scene & Randomization</h4>
@@ -747,8 +771,9 @@
                 const slider = document.getElementById(sliderId);
                 const display = document.getElementById(displayId);
                 if (slider && display) {
-                    display.textContent = slider.value + unit;
-                    slider.addEventListener('input', () => { display.textContent = slider.value + unit; });
+                    const update = () => { display.textContent = slider.value + unit; };
+                    update();
+                    slider.addEventListener('input', update);
                 }
             };
             setupSlider('position-variance', 'position-variance-value', '%');
@@ -757,8 +782,9 @@
             setupSlider('horizontal-variance', 'horizontal-variance-value', '°');
             setupSlider('vertical-variance', 'vertical-variance-value', '°');
             setupSlider('concave-hull-concavity', 'concave-hull-concavity-value', '');
+            setupSlider('background-ratio-slider', 'background-ratio-value', '%'); // New slider
 
-            // --- START: IMPROVEMENT - Fix slider handle z-index issue on interaction ---
+            // Setup listeners for split ratio sliders
             const trainSlider = document.getElementById('split-train-ratio');
             const valSlider = document.getElementById('split-val-ratio');
             
@@ -774,7 +800,6 @@
             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() {
@@ -821,7 +846,6 @@
                 duration: 0.4 
             });
 
-            // --- START: IMPROVEMENT - Show/hide concavity slider ---
             const showConcaveOptions = showSegGroup && segMethod === 'concave';
             gsap.to(concaveOptions, {
                 maxHeight: showConcaveOptions ? 100 : 0,
@@ -829,7 +853,16 @@
                 paddingTop: showConcaveOptions ? '0.75rem' : 0,
                 duration: 0.4
             });
-            // --- END: IMPROVEMENT ---
+
+            // START: IMPLEMENTATION - Show/hide background ratio slider
+            const includeBackgrounds = document.getElementById('include-background-toggle').checked;
+            gsap.to("#background-ratio-container", {
+                maxHeight: includeBackgrounds ? 100 : 0,
+                opacity: includeBackgrounds ? 1 : 0,
+                paddingTop: includeBackgrounds ? '0.5rem' : 0,
+                duration: 0.4
+            });
+            // END: IMPLEMENTATION
 
             // Dataset Splits UI
             updateSplitRatios();
@@ -904,9 +937,13 @@
                 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
+                    concavity: parseFloat(document.getElementById('concave-hull-concavity').value),
                     samples: parseInt(document.getElementById('dataset-samples').value),
                     name: document.getElementById('dataset-name').value.trim(),
+                    // START: IMPLEMENTATION - Read new options
+                    includeBackgrounds: document.getElementById('include-background-toggle').checked,
+                    backgroundRatio: parseInt(document.getElementById('background-ratio-slider').value) / 100,
+                    // END: IMPLEMENTATION
                     useCurrentModel: document.querySelector('input[name="model-source"]:checked').value === 'current',
                     randomizeModel: document.getElementById('randomize-model-toggle').checked,
                     posVar: parseInt(document.getElementById('position-variance').value) / 100,
@@ -1036,9 +1073,20 @@
             
             if (!currentModelAsset || !selectedObject) return null;
             
-            usedClasses.add(currentModelAsset.name);
+            // START: IMPLEMENTATION - Unified negative sample logic
+            // This replaces the old classification-only logic.
+            if (options.includeBackgrounds && Math.random() < options.backgroundRatio) {
+                selectedObject.visible = false;
+            } else {
+                selectedObject.visible = true;
+            }
 
-            selectedObject.visible = !(options.task === 'classification' && Math.random() < 0.2);
+            // If the object is visible, add its class to the list for the YAML file.
+            if (selectedObject.visible) {
+                 usedClasses.add(currentModelAsset.name);
+            }
+            // END: IMPLEMENTATION
+            
             if (!selectedObject.visible) return null;
 
             if (options.randomizeModel) {