Improve toasts and model state

This commit is contained in:
Nicolas Mowen 2025-06-05 07:59:22 -06:00
parent afa8889de7
commit 04fdd254f9
2 changed files with 42 additions and 4 deletions

View File

@ -9,12 +9,15 @@
"success": { "success": {
"deletedCategory": "Deleted Class", "deletedCategory": "Deleted Class",
"deletedImage": "Deleted Images", "deletedImage": "Deleted Images",
"categorizedImage": "Successfully Classified Image" "categorizedImage": "Successfully Classified Image",
"trainedModel": "Successfully trained model.",
"trainingModel": "Successfully started model training."
}, },
"error": { "error": {
"deleteImageFailed": "Failed to delete: {{errorMessage}}", "deleteImageFailed": "Failed to delete: {{errorMessage}}",
"deleteCategoryFailed": "Failed to delete class: {{errorMessage}}", "deleteCategoryFailed": "Failed to delete class: {{errorMessage}}",
"categorizeFailed": "Failed to categorize image: {{errorMessage}}" "categorizeFailed": "Failed to categorize image: {{errorMessage}}",
"trainingFailed": "Failed to start model training: {{errorMessage}}"
} }
}, },
"deleteCategory": { "deleteCategory": {

View File

@ -59,6 +59,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
// model state // model state
const [wasTraining, setWasTraining] = useState(false);
const { payload: lastModelState } = useModelState(model.name, true); const { payload: lastModelState } = useModelState(model.name, true);
const modelState = useMemo<ModelState>(() => { const modelState = useMemo<ModelState>(() => {
if (!lastModelState || lastModelState == "downloaded") { if (!lastModelState || lastModelState == "downloaded") {
@ -68,6 +69,21 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
return lastModelState; return lastModelState;
}, [lastModelState]); }, [lastModelState]);
useEffect(() => {
if (!wasTraining) {
return;
}
if (modelState == "complete") {
toast.success(t("toast.success.trainedModel"), {
position: "top-center",
});
setWasTraining(false);
}
// only refresh when modelState changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [modelState]);
// dataset // dataset
const { data: trainImages, mutate: refreshTrain } = useSWR<string[]>( const { data: trainImages, mutate: refreshTrain } = useSWR<string[]>(
@ -115,8 +131,27 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
// actions // actions
const trainModel = useCallback(() => { const trainModel = useCallback(() => {
axios.post(`classification/${model.name}/train`); axios
}, [model]); .post(`classification/${model.name}/train`)
.then((resp) => {
if (resp.status == 200) {
setWasTraining(true);
toast.success(t("toast.success.trainingModel"), {
position: "top-center",
});
}
})
.catch((error) => {
const errorMessage =
error.response?.data?.message ||
error.response?.data?.detail ||
"Unknown error";
toast.error(t("toast.error.trainingFailed", { errorMessage }), {
position: "top-center",
});
});
}, [model, t]);
const [deleteDialogOpen, setDeleteDialogOpen] = useState<string[] | null>( const [deleteDialogOpen, setDeleteDialogOpen] = useState<string[] | null>(
null, null,