From 1bdf7913603d2a39273313fea7a41d1ebe81868b Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Sun, 3 Mar 2024 20:39:38 +0700
Subject: [PATCH] fix: import from HuggingFace with random string is causing
 app crash (#2214)

---
 web/hooks/useGetHFRepoData.ts                                 | 4 +++-
 .../ExploreModels/HuggingFaceRepoDataLoadedModal/index.tsx    | 2 +-
 .../ExploreModels/HuggingFaceSearchErrorModal/index.tsx       | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/hooks/useGetHFRepoData.ts b/web/hooks/useGetHFRepoData.ts
index 45f979fbde..d14458854a 100644
--- a/web/hooks/useGetHFRepoData.ts
+++ b/web/hooks/useGetHFRepoData.ts
@@ -20,7 +20,9 @@ export const useGetHFRepoData = () => {
       const data = await res.json()
       setRepoData(data)
     } catch (err) {
-      setFetchError(err as Error)
+      setFetchError(
+        Error("The repo does not exist or you don't have access to it.")
+      )
     }
     setLoading(false)
   }
diff --git a/web/screens/ExploreModels/HuggingFaceRepoDataLoadedModal/index.tsx b/web/screens/ExploreModels/HuggingFaceRepoDataLoadedModal/index.tsx
index c4e9131bc0..32284ede52 100644
--- a/web/screens/ExploreModels/HuggingFaceRepoDataLoadedModal/index.tsx
+++ b/web/screens/ExploreModels/HuggingFaceRepoDataLoadedModal/index.tsx
@@ -53,7 +53,7 @@ export const HuggingFaceRepoDataLoadedModal = () => {
             ? '❌ This model is not supported!'
             : '✅ This model is supported!'}
         </p>
-        {repoData.tags.includes('gguf') ? (
+        {repoData.tags?.includes('gguf') ? (
           <p>...But you can import it manually!</p>
         ) : null}
       </div>
diff --git a/web/screens/ExploreModels/HuggingFaceSearchErrorModal/index.tsx b/web/screens/ExploreModels/HuggingFaceSearchErrorModal/index.tsx
index 31c7d48d45..4cb58332bc 100644
--- a/web/screens/ExploreModels/HuggingFaceSearchErrorModal/index.tsx
+++ b/web/screens/ExploreModels/HuggingFaceSearchErrorModal/index.tsx
@@ -18,7 +18,7 @@ export const HuggingFaceSearchErrorModal = () => {
         <p className="text-2xl font-bold">Error!</p>
         <p className="text-gray-500">Fetch error</p>
       </div>
-      <p>{fetchError.message}</p>
+      <p className="text-center">{fetchError.message}</p>
       <Button
         onClick={getRepoData}
         className="w-full"