Various Tweaks (#20713)

* Adjust for commutes

* Tweaks

* Don't show no models view in grid

* Add text-md to inputs

* Adjust train title for mobile

* Cleanup prompt more

* Use i18n functions for tooltip

* Fix model complexity causing crash

* Cleanup

web/src/components/classification/wizard/Step1NameAndDefine.tsx

@@ -207,7 +207,7 @@ export default function Step1NameAndDefine({
                 </FormLabel>
                 <FormControl>
                   <Input
-                    className="h-8"
+                    className="text-md h-8"
                     placeholder={t("wizard.step1.namePlaceholder")}
                     {...field}
                   />
@@ -448,7 +448,7 @@ export default function Step1NameAndDefine({
                       <FormControl>
                         <div className="flex items-center gap-2">
                           <Input
-                            className="h-8"
+                            className="text-md h-8"
                             placeholder={t("wizard.step1.classPlaceholder")}
                             {...field}
                           />

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -16,7 +16,6 @@ import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import useContextMenu from "@/hooks/use-contextmenu";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { cn } from "@/lib/utils";
 import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
@@ -24,6 +23,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { useTranslation } from "react-i18next";
 import { FaExclamationTriangle } from "react-icons/fa";
 import { MdOutlinePersonSearch } from "react-icons/md";
+import { getTranslatedLabel } from "@/utils/i18n";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -270,20 +270,22 @@ export default function PreviewThumbnailPlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="smart-capitalize">
-              {[
-                ...new Set([
-                  ...(review.data.objects || []),
-                  ...(review.data.sub_labels || []),
-                  ...(review.data.audio || []),
-                ]),
-              ]
-                .filter(
-                  (item) => item !== undefined && !item.includes("-verified"),
-                )
-                .map((text) => capitalizeFirstLetter(text))
-                .sort()
-                .join(", ")
-                .replaceAll("-verified", "")}
+              {review.data.metadata
+                ? review.data.metadata.title
+                : [
+                    ...new Set([
+                      ...(review.data.objects || []),
+                      ...(review.data.sub_labels || []),
+                      ...(review.data.audio || []),
+                    ]),
+                  ]
+                    .filter(
+                      (item) =>
+                        item !== undefined && !item.includes("-verified"),
+                    )
+                    .map((text) => getTranslatedLabel(text))
+                    .sort()
+                    .join(", ")}
             </TooltipContent>
           </Tooltip>
           {!!(

web/src/views/classification/ModelSelectionView.tsx

@@ -130,22 +130,22 @@ export default function ModelSelectionView({
           </Button>
         </div>
       </div>
-      <div className="grid auto-rows-max grid-cols-2 gap-2 overflow-y-auto p-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10">
-        {selectedClassificationConfigs.length === 0 ? (
-          <NoModelsView
-            onCreateModel={() => setNewModel(true)}
-            modelType={pageToggle}
-          />
-        ) : (
-          selectedClassificationConfigs.map((config) => (
+      {selectedClassificationConfigs.length === 0 ? (
+        <NoModelsView
+          onCreateModel={() => setNewModel(true)}
+          modelType={pageToggle}
+        />
+      ) : (
+        <div className="grid auto-rows-max grid-cols-2 gap-2 overflow-y-auto p-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10">
+          {selectedClassificationConfigs.map((config) => (
             <ModelCard
               key={config.name}
               config={config}
               onClick={() => onClick(config)}
             />
-          ))
-        )}
-      </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

web/src/views/classification/ModelTrainingView.tsx

@@ -44,7 +44,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobileOnly } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { toast } from "sonner";
@@ -436,8 +436,24 @@ function LibrarySelector({
   onRename,
 }: LibrarySelectorProps) {
   const { t } = useTranslation(["views/classificationModel"]);
+
+  // data
+
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
   const [renameClass, setRenameFace] = useState<string | null>(null);
+  const pageTitle = useMemo(() => {
+    if (pageToggle != "train") {
+      return pageToggle;
+    }
+
+    if (isMobileOnly) {
+      return t("train.titleShort");
+    }
+
+    return t("train.title");
+  }, [pageToggle, t]);
+
+  // interaction
 
   const handleDeleteFace = useCallback(
     (name: string) => {
@@ -507,7 +523,7 @@ function LibrarySelector({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
-            {pageToggle == "train" ? t("train.title") : pageToggle}
+            {pageTitle}
             <span className="ml-2 text-primary-variant">
               (
               {(pageToggle &&