fix: visualize readme content for private repo with HF token

web-app/src/routes/hub/$modelId.tsx

@@ -1,71 +1,76 @@
 import HeaderPage from '@/containers/HeaderPage'
 import {
   createFileRoute,
   useParams,
   useNavigate,
   useSearch,
 } from '@tanstack/react-router'
 import {
   IconArrowLeft,
   IconDownload,
   IconClock,
   IconFileCode,
 } from '@tabler/icons-react'
 import { route } from '@/constants/routes'
 import { useModelSources } from '@/hooks/useModelSources'
 import { extractModelName, extractDescription } from '@/lib/models'
 import { RenderMarkdown } from '@/containers/RenderMarkdown'
 import { useEffect, useMemo, useCallback, useState } from 'react'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { useDownloadStore } from '@/hooks/useDownloadStore'
 import {
   CatalogModel,
   convertHfRepoToCatalogModel,
   fetchHuggingFaceRepo,
   pullModel,
 } from '@/services/models'
 import { Progress } from '@/components/ui/progress'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
+import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 
 type SearchParams = {
   repo: string
 }
 
 export const Route = createFileRoute('/hub/$modelId')({
   component: HubModelDetail,
   validateSearch: (search: Record<string, unknown>): SearchParams => ({
     repo: search.repo as SearchParams['repo'],
   }),
 })
 
 function HubModelDetail() {
   const { modelId } = useParams({ from: Route.id })
   const navigate = useNavigate()
+  const { huggingfaceToken } = useGeneralSetting()
   const { sources, fetchSources } = useModelSources()
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const search = useSearch({ from: Route.id as any })
   const { getProviderByName } = useModelProvider()
   const llamaProvider = getProviderByName('llamacpp')
   const { downloads, localDownloadingModels, addLocalDownloadingModel } =
     useDownloadStore()
   const [repoData, setRepoData] = useState<CatalogModel | undefined>()
 
   // State for README content
   const [readmeContent, setReadmeContent] = useState<string>('')
   const [isLoadingReadme, setIsLoadingReadme] = useState(false)
 
   useEffect(() => {
     fetchSources()
   }, [fetchSources])
 
   const fetchRepo = useCallback(async () => {
-    const repoInfo = await fetchHuggingFaceRepo(search.repo || modelId)
+    const repoInfo = await fetchHuggingFaceRepo(
+      search.repo || modelId,
+      huggingfaceToken
+    )
     if (repoInfo) {
       const repoDetail = convertHfRepoToCatalogModel(repoInfo)
       setRepoData(repoDetail)
     }
-  }, [modelId, search])
+  }, [modelId, search, huggingfaceToken])
 
   useEffect(() => {
     fetchRepo()
@@ -151,7 +156,20 @@
   useEffect(() => {
     if (modelData?.readme) {
       setIsLoadingReadme(true)
+      // Try fetching without headers first
+      // There is a weird issue where this HF link will return error when access public repo with auth header
       fetch(modelData.readme)
+        .then((response) => {
+          if (!response.ok && huggingfaceToken && modelData?.readme) {
+            // Retry with Authorization header if first fetch failed
+            return fetch(modelData.readme, {
+              headers: {
+                Authorization: `Bearer ${huggingfaceToken}`,
+              },
+            })
+          }
+          return response
+        })
         .then((response) => response.text())
         .then((content) => {
           setReadmeContent(content)
@@ -162,7 +180,7 @@
           setIsLoadingReadme(false)
         })
     }
-  }, [modelData?.readme])
+  }, [modelData?.readme, huggingfaceToken])
 
   if (!modelData) {
     return (