fix: visualize readme content for private repo with HF token

Author: louis-jan

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

@@ -27,6 +27,7 @@ import {
 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
@@ -42,6 +43,7 @@ export const Route = createFileRoute('/hub/$modelId')({
 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 })
@@ -60,12 +62,15 @@ function HubModelDetail() {
   }, [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,13 @@ function HubModelDetail() {
   useEffect(() => {
     if (modelData?.readme) {
       setIsLoadingReadme(true)
-      fetch(modelData.readme)
+      fetch(modelData.readme, {
+        headers: huggingfaceToken
+          ? {
+              Authorization: `Bearer ${huggingfaceToken}`,
+            }
+          : {},
+      })
         .then((response) => response.text())
         .then((content) => {
           setReadmeContent(content)
@@ -162,7 +173,7 @@ function HubModelDetail() {
           setIsLoadingReadme(false)
         })
     }
-  }, [modelData?.readme])
+  }, [modelData?.readme, huggingfaceToken])
 
   if (!modelData) {
     return (