diff --git a/web/src/components/classification/wizard/Step3ChooseExamples.tsx b/web/src/components/classification/wizard/Step3ChooseExamples.tsx index e3dd04afc..c6693d029 100644 --- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx +++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx @@ -11,7 +11,24 @@ import { baseUrl } from "@/api/baseUrl"; import { isMobile } from "react-device-detect"; import { cn } from "@/lib/utils"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { TooltipPortal } from "@radix-ui/react-tooltip"; import { IoIosWarning } from "react-icons/io"; +import { LuRefreshCw } from "react-icons/lu"; export type Step3FormData = { examplesGenerated: boolean; @@ -47,6 +64,7 @@ export default function Step3ChooseExamples({ const [selectedImages, setSelectedImages] = useState>(new Set()); const [cacheKey, setCacheKey] = useState(Date.now()); const [loadedImages, setLoadedImages] = useState>(new Set()); + const [showRefreshConfirm, setShowRefreshConfirm] = useState(false); const handleImageLoad = useCallback((imageName: string) => { setLoadedImages((prev) => new Set(prev).add(imageName)); @@ -484,8 +502,52 @@ export default function Step3ChooseExamples({ } }, [currentClassIndex, allClasses, imageClassifications, onBack]); + const doRefresh = useCallback(() => { + setCurrentClassIndex(0); + setSelectedImages(new Set()); + setImageClassifications({}); + setLoadedImages(new Set()); + setShowRefreshConfirm(false); + generateExamples(); + }, [generateExamples]); + + const handleRefresh = useCallback(() => { + if (Object.keys(imageClassifications).length > 0) { + setShowRefreshConfirm(true); + } else { + doRefresh(); + } + }, [imageClassifications, doRefresh]); + return (
+ + + + + {t("wizard.step3.refreshConfirm.title")} + + + {t("wizard.step3.refreshConfirm.description")} + + + + + {t("button.cancel", { ns: "common" })} + + + {t("button.continue", { ns: "common" })} + + + + + {isTraining ? (
@@ -514,15 +576,43 @@ export default function Step3ChooseExamples({
) : hasGenerated ? ( -
+
+ + + + + + + {t("wizard.step3.refreshExamples")} + + + {showMissingStatesWarning && ( {t("wizard.step3.missingStatesWarning.title")} - + {t("wizard.step3.missingStatesWarning.description")} + )}