fix: models hub should show latest data only

web-app/src/hooks/__tests__/useModelSources.test.ts

@@ -33,7 +33,7 @@ describe('useModelSources', () => {
     // Get the mocked function
     const { fetchModelCatalog } = await import('@/services/models')
     mockFetchModelCatalog = fetchModelCatalog as any
-    
+
     // Reset store state to defaults
     useModelSources.setState({
       sources: [],
@@ -98,7 +98,7 @@ describe('useModelSources', () => {
       expect(result.current.sources).toEqual([])
     })
 
-    it('should merge new sources with existing ones', async () => {
+    it('should not merge new sources with existing ones', async () => {
       const existingSources: CatalogModel[] = [
         {
           model_name: 'existing-model',
@@ -132,7 +132,7 @@ describe('useModelSources', () => {
         await result.current.fetchSources()
       })
 
-      expect(result.current.sources).toEqual([...newSources, ...existingSources])
+      expect(result.current.sources).toEqual(newSources)
     })
 
     it('should not duplicate models with same model_name', async () => {
@@ -175,15 +175,7 @@ describe('useModelSources', () => {
         await result.current.fetchSources()
       })
 
-      expect(result.current.sources).toEqual([
-        ...newSources,
-        {
-          model_name: 'unique-model',
-          provider: 'provider',
-          description: 'Unique model',
-          version: '1.0.0',
-        },
-      ])
+      expect(result.current.sources).toEqual(newSources)
     })
 
     it('should handle empty sources response', async () => {
@@ -236,7 +228,7 @@ describe('useModelSources', () => {
   describe('addSource', () => {
     it('should add a new source to the store', () => {
       const { result } = renderHook(() => useModelSources())
-      
+
       const testModel: CatalogModel = {
         model_name: 'test-model',
         description: 'Test model description',
@@ -263,7 +255,7 @@ describe('useModelSources', () => {
 
     it('should replace existing source with same model_name', () => {
       const { result } = renderHook(() => useModelSources())
-      
+
       const originalModel: CatalogModel = {
         model_name: 'duplicate-model',
         description: 'Original description',
@@ -306,7 +298,7 @@ describe('useModelSources', () => {
 
     it('should handle multiple different sources', () => {
       const { result } = renderHook(() => useModelSources())
-      
+
       const model1: CatalogModel = {
         model_name: 'model-1',
         description: 'First model',
@@ -342,7 +334,7 @@ describe('useModelSources', () => {
 
     it('should handle CatalogModel with complete quants data', () => {
       const { result } = renderHook(() => useModelSources())
-      
+
       const modelWithQuants: CatalogModel = {
         model_name: 'model-with-quants',
         description: 'Model with quantizations',
@@ -475,7 +467,7 @@ describe('useModelSources', () => {
         await result.current.fetchSources()
       })
 
-      expect(result.current.sources).toEqual([...sources2, ...sources1])
+      expect(result.current.sources).toEqual(sources2)
     })
 
     it('should handle fetch after error', async () => {
@@ -510,4 +502,4 @@ describe('useModelSources', () => {
       expect(result.current.sources).toEqual(mockSources)
     })
   })
-})
+})

web-app/src/hooks/useModelSources.ts

@@ -31,15 +31,9 @@ export const useModelSources = create<ModelSourcesState>()(
         set({ loading: true, error: null })
         try {
           const newSources = await fetchModelCatalog()
-          const currentSources = get().sources
 
           set({
-            sources: [
-              ...newSources,
-              ...currentSources.filter(
-                (e) => !newSources.some((s) => s.model_name === e.model_name)
-              ),
-            ],
+            sources: newSources.length ? newSources : get().sources,
             loading: false,
           })
         } catch (error) {

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

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useModelSources } from '@/hooks/useModelSources'
 import { cn, fuzzySearch } from '@/lib/utils'
 import {
   useState,
   useMemo,
   useEffect,
@@ -12,32 +12,32 @@
   useCallback,
   useRef,
 } from 'react'
 import { Button } from '@/components/ui/button'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { Card, CardItem } from '@/containers/Card'
 import { RenderMarkdown } from '@/containers/RenderMarkdown'
 import { extractModelName, extractDescription } from '@/lib/models'
 import { IconDownload, IconFileCode, IconSearch } from '@tabler/icons-react'
 import { Switch } from '@/components/ui/switch'
 import Joyride, { CallBackProps, STATUS } from 'react-joyride'
 import { CustomTooltipJoyRide } from '@/containers/CustomeTooltipJoyRide'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import {
   CatalogModel,
   pullModel,
   fetchHuggingFaceRepo,
   HuggingFaceRepo,
 } from '@/services/models'
 import { useDownloadStore } from '@/hooks/useDownloadStore'
 import { Progress } from '@/components/ui/progress'
 import HeaderPage from '@/containers/HeaderPage'
 import { Loader } from 'lucide-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 
 type ModelProps = {
   model: CatalogModel
@@ -45,49 +45,49 @@
 type SearchParams = {
   repo: string
 }
 const defaultModelQuantizations = ['iq4_xs', 'q4_k_m']
 
 export const Route = createFileRoute(route.hub.index as any)({
   component: Hub,
   validateSearch: (search: Record<string, unknown>): SearchParams => ({
     repo: search.repo as SearchParams['repo'],
   }),
 })
 
 function Hub() {
   const parentRef = useRef(null)
 
   const { t } = useTranslation()
   const sortOptions = [
     { value: 'newest', name: t('hub:sortNewest') },
     { value: 'most-downloaded', name: t('hub:sortMostDownloaded') },
   ]
   const { sources, addSource, fetchSources, loading } = useModelSources()
   const search = useSearch({ from: route.hub.index as any })
   const [searchValue, setSearchValue] = useState('')
   const [sortSelected, setSortSelected] = useState('newest')
   const [expandedModels, setExpandedModels] = useState<Record<string, boolean>>(
     {}
   )
   const [isSearching, setIsSearching] = useState(false)
   const [showOnlyDownloaded, setShowOnlyDownloaded] = useState(false)
   const [huggingFaceRepo, setHuggingFaceRepo] = useState<CatalogModel | null>(
     null
   )
   const [joyrideReady, setJoyrideReady] = useState(false)
   const [currentStepIndex, setCurrentStepIndex] = useState(0)
   const addModelSourceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
   )
   const downloadButtonRef = useRef<HTMLButtonElement>(null)
   const hasTriggeredDownload = useRef(false)
 
   const { getProviderByName } = useModelProvider()
   const llamaProvider = getProviderByName('llamacpp')
 
   // Convert HuggingFace repository to CatalogModel format
   const convertHfRepoToCatalogModel = useCallback(
     (repo: HuggingFaceRepo): CatalogModel => {
       // Extract GGUF files from the repository siblings
       const ggufFiles =
         repo.siblings?.filter((file) =>
@@ -145,8 +145,12 @@
           const repoInfo = await fetchHuggingFaceRepo(search.repo)
           if (repoInfo) {
             const catalogModel = convertHfRepoToCatalogModel(repoInfo)
-            setHuggingFaceRepo(catalogModel)
-            addSource(catalogModel)
+            if (
+              !sources.some((s) => s.model_name === catalogModel.model_name)
+            ) {
+              setHuggingFaceRepo(catalogModel)
+              addSource(catalogModel)
+            }
           }
 
           await fetchSources()
@@ -157,7 +161,7 @@
         }
       }, 500)
     }
-  }, [convertHfRepoToCatalogModel, fetchSources, addSource, search])
+  }, [convertHfRepoToCatalogModel, fetchSources, addSource, search, sources])
 
   // Sorting functionality
   const sortedModels = useMemo(() => {
@@ -247,8 +251,12 @@
           const repoInfo = await fetchHuggingFaceRepo(e.target.value)
           if (repoInfo) {
             const catalogModel = convertHfRepoToCatalogModel(repoInfo)
-            setHuggingFaceRepo(catalogModel)
-            addSource(catalogModel)
+            if (
+              !sources.some((s) => s.model_name === catalogModel.model_name)
+            ) {
+              setHuggingFaceRepo(catalogModel)
+              addSource(catalogModel)
+            }
           }
 
           // Original addSource logic (if needed)