Improve object classification (#18908)

* Ui improvements

* Improve image cropping and model saving

* Improve naming

* Add logs for training

* Improve model labeling

* Don't set sub label for none object classification

* Cleanup

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -82,7 +82,7 @@ export default function ClassificationSelectionDialog({
   );
 
   // control
-  const [newFace, setNewFace] = useState(false);
+  const [newClass, setNewClass] = useState(false);
 
   // components
   const Selector = isDesktop ? DropdownMenu : Drawer;
@@ -98,10 +98,10 @@ export default function ClassificationSelectionDialog({
 
   return (
     <div className={className ?? ""}>
-      {newFace && (
+      {newClass && (
         <TextEntryDialog
           open={true}
-          setOpen={setNewFace}
+          setOpen={setNewClass}
           title={t("createCategory.new")}
           onSave={(newCat) => onCategorizeImage(newCat)}
         />
@@ -130,7 +130,7 @@ export default function ClassificationSelectionDialog({
             >
               <SelectorItem
                 className="flex cursor-pointer gap-2 smart-capitalize"
-                onClick={() => setNewFace(true)}
+                onClick={() => setNewClass(true)}
               >
                 <LuPlus />
                 {t("createCategory.new")}
@@ -142,7 +142,7 @@ export default function ClassificationSelectionDialog({
                   onClick={() => onCategorizeImage(category)}
                 >
                   <MdCategory />
-                  {category}
+                  {category.replaceAll("_", " ")}
                 </SelectorItem>
               ))}
             </div>

web/src/views/classification/ModelTrainingView.tsx

@@ -375,7 +375,7 @@ function LibrarySelector({
 }: LibrarySelectorProps) {
   const { t } = useTranslation(["views/classificationModel"]);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
-  const [renameFace, setRenameFace] = useState<string | null>(null);
+  const [renameClass, setRenameFace] = useState<string | null>(null);
 
   const handleDeleteFace = useCallback(
     (name: string) => {
@@ -390,9 +390,9 @@ function LibrarySelector({
 
   const handleSetOpen = useCallback(
     (open: boolean) => {
-      setRenameFace(open ? renameFace : null);
+      setRenameFace(open ? renameClass : null);
     },
-    [renameFace],
+    [renameClass],
   );
 
   return (
@@ -428,15 +428,15 @@ function LibrarySelector({
       </Dialog>
 
       <TextEntryDialog
-        open={!!renameFace}
+        open={!!renameClass}
         setOpen={handleSetOpen}
         title={t("renameCategory.title")}
-        description={t("renameCategory.desc", { name: renameFace })}
+        description={t("renameCategory.desc", { name: renameClass })}
         onSave={(newName) => {
-          onRename(renameFace!, newName);
+          onRename(renameClass!, newName);
           setRenameFace(null);
         }}
-        defaultValue={renameFace || ""}
+        defaultValue={renameClass || ""}
         regexPattern={/^[\p{L}\p{N}\s'_-]{1,50}$/u}
         regexErrorMessage={t("description.invalidName")}
       />
@@ -484,10 +484,10 @@ function LibrarySelector({
               className="group flex items-center justify-between"
             >
               <div
-                className="flex-grow cursor-pointer"
+                className="flex-grow cursor-pointer capitalize"
                 onClick={() => setPageToggle(id)}
               >
-                {id}
+                {id.replaceAll("_", " ")}
                 <span className="ml-2 text-muted-foreground">
                   ({dataset?.[id].length})
                 </span>
@@ -681,7 +681,9 @@ function TrainGrid({
           <div className="rounded-b-lg bg-card p-3">
             <div className="flex w-full flex-row items-center justify-between gap-2">
               <div className="flex flex-col items-start text-xs text-primary-variant">
-                <div className="smart-capitalize">{data.label}</div>
+                <div className="smart-capitalize">
+                  {data.label.replaceAll("_", " ")}
+                </div>
                 <div>{data.score}%</div>
               </div>
               <div className="flex flex-row items-start justify-end gap-5 md:gap-4">