Merge pull request #6316 from menloresearch/fix/handle-checking-model-gated

fix: handle checking model gated

web-app/src/containers/ModelInfoHoverCard.tsx

@@ -79,6 +79,15 @@ export const ModelInfoHoverCard = ({
           </span>
         </div>
       )
+    } else if (status === 'GREY') {
+      return (
+        <div className="flex items-start gap-2">
+          <div className="size-2 shrink-0 bg-neutral-500 rounded-full mt-1"></div>
+          <span className="text-neutral-500 font-medium">
+            Unable to determine model compatibility with your current device
+          </span>
+        </div>
+      )
     } else {
       return (
         <div className="flex items-start gap-2">
@@ -121,9 +130,7 @@ export const ModelInfoHoverCard = ({
               <>
                 <div>
                   <span className="text-main-view-fg/50 block">
-                    {isDefaultVariant
-                      ? 'Maybe Default Quantization'
-                      : 'Quantization'}
+                    {isDefaultVariant ? 'Default Quantization' : 'Quantization'}
                   </span>
                   <span className="text-main-view-fg font-medium mt-1 inline-block">
                     {variant?.model_id.split('-').pop()?.toUpperCase() || 'N/A'}

web-app/src/containers/ModelSupportStatus.tsx

@@ -24,7 +24,7 @@ export const ModelSupportStatus = ({
   className,
 }: ModelSupportStatusProps) => {
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null
+    'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | null | 'GREY'
   >(null)
 
   // Helper function to check model support with proper path resolution
@@ -32,7 +32,7 @@ export const ModelSupportStatus = ({
     async (
       id: string,
       ctxSize: number
-    ): Promise<'RED' | 'YELLOW' | 'GREEN' | null> => {
+    ): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY' | null> => {
       try {
         const janDataFolder = await getJanDataFolderPath()
 

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

@@ -64,7 +64,7 @@ function HubModelDetail() {
 
   // State for model support status
   const [modelSupportStatus, setModelSupportStatus] = useState<
-    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING'>
+    Record<string, 'RED' | 'YELLOW' | 'GREEN' | 'LOADING' | 'GREY'>
   >({})
 
   useEffect(() => {

web-app/src/services/__tests__/models.test.ts

@@ -924,7 +924,7 @@ describe('models service', () => {
       expect(result).toBe('YELLOW') // Should use fallback
     })
 
-    it('should return RED when there is an error', async () => {
+    it('should return GREY when there is an error', async () => {
       const mockEngineWithError = {
         ...mockEngine,
         isModelSupported: vi.fn().mockRejectedValue(new Error('Test error')),
@@ -934,7 +934,7 @@ describe('models service', () => {
 
       const result = await isModelSupported('/path/to/model.gguf')
 
-      expect(result).toBe('RED')
+      expect(result).toBe('GREY')
     })
   })
 })

web-app/src/services/models.ts

@@ -592,7 +592,7 @@ export const checkMmprojExists = async (modelId: string): Promise<boolean> => {
 export const isModelSupported = async (
   modelPath: string,
   ctxSize?: number
-): Promise<'RED' | 'YELLOW' | 'GREEN'> => {
+): Promise<'RED' | 'YELLOW' | 'GREEN' | 'GREY'> => {
   try {
     const engine = getEngine('llamacpp') as AIEngine & {
       isModelSupported?: (
@@ -608,6 +608,6 @@ export const isModelSupported = async (
     return 'YELLOW' // Conservative fallback
   } catch (error) {
     console.error(`Error checking model support for ${modelPath}:`, error)
-    return 'RED' // Error state, assume not supported
+    return 'GREY' // Error state, assume not supported
   }
 }