From 5841d1f573464c1b422283174695091e667a7590 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 22 Oct 2025 15:47:50 -0600
Subject: [PATCH] Update no models screen

---
 .../locales/en/views/classificationModel.json |  5 ++++
 .../classification/ModelSelectionView.tsx     | 23 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/public/locales/en/views/classificationModel.json b/web/public/locales/en/views/classificationModel.json
index f956a5e0e..e5275b8c8 100644
--- a/web/public/locales/en/views/classificationModel.json
+++ b/web/public/locales/en/views/classificationModel.json
@@ -50,6 +50,11 @@
   },
   "categorizeImageAs": "Classify Image As:",
   "categorizeImage": "Classify Image",
+  "noModels": {
+    "title": "No Classification Models",
+    "description": "Create a custom model to classify objects or monitor state changes in your cameras.",
+    "buttonText": "Create Classification Model"
+  },
   "wizard": {
     "title": "Create New Classification",
     "steps": {
diff --git a/web/src/views/classification/ModelSelectionView.tsx b/web/src/views/classification/ModelSelectionView.tsx
index 6641416b3..07a1db455 100644
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -14,7 +14,9 @@ import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { FaFolderPlus } from "react-icons/fa";
+import { MdModelTraining } from "react-icons/md";
 import useSWR from "swr";
+import Heading from "@/components/ui/heading";
 
 const allModelTypes = ["objects", "states"] as const;
 type ModelType = (typeof allModelTypes)[number];
@@ -65,7 +67,7 @@ export default function ModelSelectionView({
   }
 
   if (classificationConfigs.length == 0) {
-    return <div>You need to setup a custom model configuration.</div>;
+    return <NoModelsView onCreateModel={() => setNewModel(true)} />;
   }
 
   return (
@@ -129,6 +131,25 @@ export default function ModelSelectionView({
   );
 }
 
+function NoModelsView({ onCreateModel }: { onCreateModel: () => void }) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  return (
+    <div className="flex size-full items-center justify-center">
+      <div className="flex flex-col items-center gap-2">
+        <MdModelTraining className="size-8" />
+        <Heading as="h4">{t("noModels.title")}</Heading>
+        <div className="mb-3 text-center text-secondary-foreground">
+          {t("noModels.description")}
+        </div>
+        <Button size="sm" variant="select" onClick={onCreateModel}>
+          {t("noModels.buttonText")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 type ModelCardProps = {
   config: CustomClassificationModelConfig;
   onClick: () => void;