fix: HF token is not used while searching repositories

web-app/src/routes/hub/index.tsx

@@ -39,6 +39,7 @@ import HeaderPage from '@/containers/HeaderPage'
 import { Loader } from 'lucide-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import Fuse from 'fuse.js'
+import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 
 type ModelProps = {
   model: CatalogModel
@@ -57,6 +58,7 @@ export const Route = createFileRoute(route.hub.index as any)({
 
 function Hub() {
   const parentRef = useRef(null)
+  const { huggingfaceToken } = useGeneralSetting()
 
   const { t } = useTranslation()
   const sortOptions = [
@@ -185,7 +187,7 @@ function Hub() {
       addModelSourceTimeoutRef.current = setTimeout(async () => {
         try {
           // Fetch HuggingFace repository information
-          const repoInfo = await fetchHuggingFaceRepo(e.target.value)
+          const repoInfo = await fetchHuggingFaceRepo(e.target.value, huggingfaceToken)
           if (repoInfo) {
             const catalogModel = convertHfRepoToCatalogModel(repoInfo)
             if (

web-app/src/services/models.ts

@@ -99,7 +99,8 @@ export const fetchModelCatalog = async (): Promise<ModelCatalog> => {
  * @returns A promise that resolves to the repository information.
  */
 export const fetchHuggingFaceRepo = async (
-  repoId: string
+  repoId: string,
+  hfToken?: string
 ): Promise<HuggingFaceRepo | null> => {
   try {
     // Clean the repo ID to handle various input formats
@@ -114,7 +115,14 @@ export const fetchHuggingFaceRepo = async (
     }
 
     const response = await fetch(
-      `https://huggingface.co/api/models/${cleanRepoId}?blobs=true`
+      `https://huggingface.co/api/models/${cleanRepoId}?blobs=true`,
+      {
+        headers: hfToken
+          ? {
+              Authorization: `Bearer ${hfToken}`,
+            }
+          : {},
+      }
     )
 
     if (!response.ok) {