fix: normalize model id from source preparation

web-app/src/hooks/useModelSources.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand'
 import { localStorageKey } from '@/constants/localStorage'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { fetchModelCatalog, CatalogModel } from '@/services/models'
+import { sanitizeModelId } from '@/lib/utils'
 
 // Zustand store for model sources
 type ModelSourcesState = {
@@ -20,7 +21,15 @@ export const useModelSources = create<ModelSourcesState>()(
       fetchSources: async () => {
         set({ loading: true, error: null })
         try {
-          const newSources = await fetchModelCatalog()
+          const newSources = await fetchModelCatalog().then((catalogs) =>
+            catalogs.map((catalog) => ({
+              ...catalog,
+              quants: catalog.quants.map((quant) => ({
+                ...quant,
+                model_id: sanitizeModelId(quant.model_id),
+              })),
+            }))
+          )
 
           set({
             sources: newSources.length ? newSources : get().sources,

web-app/src/lib/utils.ts

@@ -157,5 +157,5 @@ export function formatDuration(startTime: number, endTime?: number): string {
 }
 
 export function sanitizeModelId(modelId: string): string {
-  return modelId.replace(/[^a-zA-Z0-9/_\-.]/g, '')
+  return modelId.replace(/[^a-zA-Z0-9/_\-.]/g, '').replace(".", "_")
 }

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

@@ -3,7 +3,7 @@ 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, sanitizeModelId } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import {
   useState,
   useMemo,
@@ -291,8 +291,8 @@ function Hub() {
 
       const handleDownload = () => {
         // Immediately set local downloading state
-        addLocalDownloadingModel(sanitizeModelId(modelId))
+        addLocalDownloadingModel(modelId)
-        pullModel(sanitizeModelId(modelId), modelUrl)
+        pullModel(modelId, modelUrl)
       }
 
       return (
@@ -764,14 +764,10 @@ function Hub() {
                                                 title={t('hub:downloadModel')}
                                                 onClick={() => {
                                                   addLocalDownloadingModel(
-                                                    sanitizeModelId(
+                                                    variant.model_id
-                                                      variant.model_id
-                                                    )
                                                   )
                                                   pullModel(
-                                                    sanitizeModelId(
+                                                    variant.model_id,
-                                                      variant.model_id
-                                                    ),
                                                     variant.path
                                                   )
                                                 }}

web-app/src/services/models.ts

@@ -1,3 +1,4 @@
+import { sanitizeModelId } from '@/lib/utils'
 import {
   AIEngine,
   EngineManager,
@@ -5,7 +6,6 @@ import {
   SettingComponentProps,
 } from '@janhq/core'
 import { Model as CoreModel } from '@janhq/core'
-import { sanitizeModelId } from '@/lib/utils'
 // Types for model catalog
 export interface ModelQuant {
   model_id: string
@@ -163,10 +163,10 @@ export const convertHfRepoToCatalogModel = (
     }
 
     // Generate model_id from filename (remove .gguf extension, case-insensitive)
-    const modelId = sanitizeModelId(file.rfilename.replace(/\.gguf$/i, ''))
+    const modelId = file.rfilename.replace(/\.gguf$/i, '')
 
     return {
-      model_id: modelId,
+      model_id: sanitizeModelId(modelId),
       path: `https://huggingface.co/${repo.modelId}/resolve/main/${file.rfilename}`,
       file_size: formatFileSize(file.size),
     }