Merge pull request #3189 from bghira/fix/3188-lightbox-step-gallery

Fix validation lightbox checkpoint switching

Author: bghira

simpletuner/static/js/training_metrics_component.js

@@ -761,7 +761,6 @@
                     : images.length - 1;
                 const next = images[clamped];
                 this.trainingMediaLightbox.path = next.item.path;
-                this.selectedTrainingMediaStep = next.item.step;
             },
 
             setTrainingLightboxStepOffset(offset) {
@@ -771,7 +770,6 @@
                 const next = images[currentIndex + offset];
                 if (next) {
                     this.trainingMediaLightbox.path = next.item.path;
-                    this.selectedTrainingMediaStep = next.item.step;
                 }
             },
 

tests/js/training_metrics_component.test.js

@@ -227,6 +227,7 @@ describe('training metrics component', () => {
                 { type: 'image', label: 'portrait', step: 20, index: 0, path: 'step-20-a.webp', url: '/c.webp' },
             ],
         };
+        state.selectedTrainingMediaStep = 10;
         state.openTrainingMediaLightbox(state.trainingRunData.media[0]);
 
         state.setTrainingLightboxImageOffset(1);
@@ -235,10 +236,11 @@ describe('training metrics component', () => {
         state.setTrainingLightboxImageOffset(-1);
         state.setTrainingLightboxStepOffset(1);
         expect(state.currentTrainingLightboxImage().item.path).toBe('step-20-a.webp');
-        expect(state.selectedTrainingMediaStep).toBe(20);
+        expect(state.selectedTrainingMediaStep).toBe(10);
 
         state.setTrainingLightboxStepIndex(0);
         expect(state.currentTrainingLightboxImage().item.path).toBe('step-10-a.webp');
+        expect(state.selectedTrainingMediaStep).toBe(10);
         expect(state.trainingLightboxStepLabel()).toBe('Step 10');
     });
 

tests/test_webui_e2e.py

@@ -960,6 +960,17 @@ def scenario(driver, _browser):
                 lightbox_step_slider,
             )
             WebDriverWait(driver, 5).until(lambda _driver: "step 10" in lightbox.text)
+            background_media_state = driver.execute_script(
+                """
+                const stepSlider = document.querySelector("input[aria-label='Validation checkpoint step']");
+                return {
+                    imageCount: document.querySelectorAll(".training-media-grid figure img").length,
+                    stepSliderValue: stepSlider ? stepSlider.value : null,
+                };
+                """
+            )
+            self.assertEqual(background_media_state["imageCount"], 10, background_media_state)
+            self.assertEqual(background_media_state["stepSliderValue"], "1", background_media_state)
             lightbox.find_element(By.CSS_SELECTOR, ".training-media-lightbox-toolbar button[title='Close image']").click()
             WebDriverWait(driver, 5).until(EC.invisibility_of_element_located((By.CSS_SELECTOR, ".training-media-lightbox")))