administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-01-22 20:18:30 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add cache key and activity indicator for loading classification wizard images

Browse Source
This commit is contained in:
Josh Hawkins 2025-12-19 08:39:35 -06:00
parent 0f6bd605e3
commit 73eceaf242
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/classification/wizard/Step3ChooseExamples.tsx
View File

@ -45,6 +45,12 @@ export default function Step3ChooseExamples({
const [isProcessing, setIsProcessing] = useState(false);
const [currentClassIndex, setCurrentClassIndex] = useState(0);
const [selectedImages, setSelectedImages] = useState<Set<string>>(new Set());
const [cacheKey, setCacheKey] = useState<number>(Date.now());
const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
const handleImageLoad = useCallback((imageName: string) => {
setLoadedImages((prev) => new Set(prev).add(imageName));
}, []);
const { data: trainImages, mutate: refreshTrainImages } = useSWR<string[]>(
hasGenerated ? `classification/${step1Data.modelName}/train` : null,
@ -332,6 +338,8 @@ export default function Step3ChooseExamples({
setHasGenerated(true);
toast.success(t("wizard.step3.generateSuccess"));
// Update cache key to force image reload
setCacheKey(Date.now());
await refreshTrainImages();
} catch (error) {
const axiosError = error as {
@ -565,10 +573,16 @@ export default function Step3ChooseExamples({
)}
onClick={() => toggleImageSelection(imageName)}
>
{!loadedImages.has(imageName) && (
<div className="flex h-full items-center justify-center">
<ActivityIndicator className="size-6" />
</div>
)}
<img
src={`${baseUrl}clips/${step1Data.modelName}/train/${imageName}`}
src={`${baseUrl}clips/${step1Data.modelName}/train/${imageName}?t=${cacheKey}`}
alt={`Example ${index + 1}`}
className="h-full w-full object-cover"
onLoad={() => handleImageLoad(imageName)}
/>
</div>
);