Refactor model selection and info display

- Introduced ModelInfo component to encapsulate model details and stats.
- Updated App component to utilize ModelInfo and streamline model fetching logic.
- Enhanced ModelSelector with sorting functionality and improved UI using Headless UI Listbox.
- Implemented PipelineSelector with a similar UI enhancement.
- Removed redundant model info fetching from ZeroShotClassification.
- Updated ModelContext to manage selected quantization state.
- Enhanced getModelInfo function to include compatibility checks and supported quantizations.
- Updated types to reflect new model info structure and quantization types.

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^2.2.4",
     "@huggingface/transformers": "^3.6.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.4
+        version: 2.2.4([email protected]([email protected]))([email protected])
       '@huggingface/transformers':
         specifier: ^3.6.1
         version: 3.6.1
@@ -917,6 +920,34 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@headlessui/[email protected]':
+    resolution: {integrity: sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   '@huggingface/[email protected]':
     resolution: {integrity: sha512-3WXbMFaPkk03LRCM0z0sylmn8ddDm4ubjU7X+Hg4M2GOuMklwoGAFXp9V2keq7vltoB/c7McE5aHUVVddAewsw==}
     engines: {node: '>=18'}
@@ -1233,6 +1264,43 @@ packages:
   '@protobufjs/[email protected]':
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
+  '@react-aria/[email protected]':
+    resolution: {integrity: sha512-JpFtXmWQ0Oca7FcvkqgjSyo6xEP7v3oQOLUId6o0xTvm4AD5W0mU2r3lYrbhsJ+XxdUUX4AVR5473sZZ85kU4A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/[email protected]':
+    resolution: {integrity: sha512-J1bhlrNtjPS/fe5uJQ+0c7/jiXniwa4RQlP+Emjfc/iuqpW2RhbF9ou5vROcLzWIyaW8tVMZ468J68rAs/aZ5A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/[email protected]':
+    resolution: {integrity: sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/[email protected]':
+    resolution: {integrity: sha512-yXMFVJ73rbQ/yYE/49n5Uidjw7kh192WNN9PNQGV0Xoc7EJUlSOxqhnpHmYTyO0EotJ8fdM1fMH8durHjUSI8g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/[email protected]':
+    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
+
+  '@react-stately/[email protected]':
+    resolution: {integrity: sha512-cWvjGAocvy4abO9zbr6PW6taHgF24Mwy/LbQ4TC4Aq3tKdKDntxyD+sh7AkSRfJRT2ccMVaHVv2+FfHThd3PKQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/[email protected]':
+    resolution: {integrity: sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@rollup/[email protected]':
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -1335,6 +1403,18 @@ packages:
     resolution: {integrity: sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==}
     engines: {node: '>=10'}
 
+  '@swc/[email protected]':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
   '@testing-library/[email protected]':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2076,6 +2156,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -5377,6 +5461,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   [email protected]:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -5619,6 +5706,11 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   [email protected]:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -6951,6 +7043,41 @@ snapshots:
 
   '@eslint/[email protected]': {}
 
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/core': 1.7.2
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@floating-ui/dom': 1.7.2
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+
+  '@floating-ui/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.4([email protected]([email protected]))([email protected])
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+      tabbable: 6.2.0
+
+  '@floating-ui/[email protected]': {}
+
+  '@headlessui/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@floating-ui/react': 0.26.28([email protected]([email protected]))([email protected])
+      '@react-aria/focus': 3.20.5([email protected]([email protected]))([email protected])
+      '@react-aria/interactions': 3.25.3([email protected]([email protected]))([email protected])
+      '@tanstack/react-virtual': 3.13.12([email protected]([email protected]))([email protected])
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+      use-sync-external-store: 1.5.0([email protected])
+
   '@huggingface/[email protected]': {}
 
   '@huggingface/[email protected]':
@@ -7331,6 +7458,55 @@ snapshots:
 
   '@protobufjs/[email protected]': {}
 
+  '@react-aria/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@react-aria/interactions': 3.25.3([email protected]([email protected]))([email protected])
+      '@react-aria/utils': 3.29.1([email protected]([email protected]))([email protected])
+      '@react-types/shared': 3.30.0([email protected])
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+
+  '@react-aria/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@react-aria/ssr': 3.9.9([email protected])
+      '@react-aria/utils': 3.29.1([email protected]([email protected]))([email protected])
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.30.0([email protected])
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+
+  '@react-aria/[email protected]([email protected])':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+
+  '@react-aria/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@react-aria/ssr': 3.9.9([email protected])
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.7([email protected])
+      '@react-types/shared': 3.30.0([email protected])
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+
+  '@react-stately/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@react-stately/[email protected]([email protected])':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.0
+
+  '@react-types/[email protected]([email protected])':
+    dependencies:
+      react: 19.1.0
+
   '@rollup/[email protected](@babel/[email protected])(@types/[email protected])([email protected])':
     dependencies:
       '@babel/core': 7.28.0
@@ -7453,6 +7629,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/[email protected]':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tanstack/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 19.1.0
+      react-dom: 19.1.0([email protected])
+
+  '@tanstack/[email protected]': {}
+
   '@testing-library/[email protected]':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -8376,6 +8564,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -12287,6 +12477,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -12539,6 +12731,10 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
+  [email protected]([email protected]):
+    dependencies:
+      react: 19.1.0
+
   [email protected]: {}
 
   [email protected]:

src/App.tsx

@@ -5,31 +5,22 @@ import TextClassification from './components/TextClassification'
 import Header from './Header'
 import Footer from './Footer'
 import { useModel } from './contexts/ModelContext'
-import { Bot, Heart, Download, Cpu, DatabaseIcon } from 'lucide-react'
-import { getModelsByPipeline, getModelSize } from './lib/huggingface'
+import { getModelsByPipeline } from './lib/huggingface'
 import ModelSelector from './components/ModelSelector'
+import ModelInfo from './components/ModelInfo'
 
 function App() {
-  const { pipeline, setPipeline, progress, status, modelInfo, setModels } = useModel()
+  const { pipeline, setPipeline, progress, status, modelInfo, setModels } =
+    useModel()
 
-  const formatNumber = (num: number) => {
-    if (num >= 1000000000) {
-      return (num / 1000000000).toFixed(1) + 'B'
-    } else if (num >= 1000000) {
-      return (num / 1000000).toFixed(1) + 'M'
-    } else if (num >= 1000) {
-      return (num / 1000).toFixed(1) + 'K'
+  useEffect(() => {
+    const fetchModels = async () => {
+      const fetchedModels = await getModelsByPipeline(pipeline)
+      setModels(fetchedModels)
+      console.log(fetchedModels)
     }
-    return num.toString()
-  }
-
-    useEffect(() => {
-      const fetchModels = async () => {
-        const fetchedModels = await getModelsByPipeline(pipeline);
-        setModels(fetchedModels);
-      };
-      fetchModels();
-    }, [setModels, pipeline]);
+    fetchModels()
+  }, [setModels, pipeline])
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
@@ -40,66 +31,27 @@ function App() {
         <div className="mb-8">
           <div className="bg-white rounded-lg shadow-sm border p-6">
             <div className="flex items-center justify-between mb-4">
-              {/* Model Info Display */}
-              {modelInfo.name && (
-                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 rounded-lg border border-blue-200 space-y-2">
-                  {/* Model Name Row */}
-                  <div className="flex items-center space-x-2">
-                    <Bot className="w-4 h-4 text-blue-600" />
-                    <span
-                      className="text-sm font-medium text-gray-700 truncate max-w-100"
-                      title={modelInfo.name}
-                    >
-                      {modelInfo.name.split('/').pop()}
-                    </span>
-                  </div>
-
-                  {/* Stats Row */}
-                  <div className="flex items-center justify-self-end space-x-4 text-xs text-gray-600">
-                    {modelInfo.likes > 0 && (
-                      <div className="flex items-center space-x-1">
-                        <Heart className="w-3 h-3 text-red-500" />
-                        <span>{formatNumber(modelInfo.likes)}</span>
-                      </div>
-                    )}
-
-                    {modelInfo.downloads > 0 && (
-                      <div className="flex items-center space-x-1">
-                        <Download className="w-3 h-3 text-green-500" />
-                        <span>{formatNumber(modelInfo.downloads)}</span>
-                      </div>
-                    )}
-
-                    {modelInfo.parameters > 0 && (
-                      <div className="flex items-center space-x-1">
-                        <Cpu className="w-3 h-3 text-purple-500" />
-                        <span>{formatNumber(modelInfo.parameters)}</span>
-                      </div>
-                    )}
-
-                    {modelInfo.parameters > 0 && (
-                      <div className="flex items-center space-x-1">
-                        <DatabaseIcon className="w-3 h-3 text-purple-500" />
-                        <span>
-                          {`~${getModelSize(
-                            modelInfo.parameters,
-                            'INT8'
-                          ).toFixed(1)}MB`}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
+              <ModelInfo />
             </div>
 
-            <div className="flex flex-row items-center space-x-4">
-              <span className="text-lg font-semibold text-gray-900">
-                Choose a Pipeline
-              </span>
-              <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-start">
+              <div className="space-y-2">
+                <span className="text-lg font-semibold text-gray-900 block">
+                  Choose a Pipeline
+                </span>
+                <PipelineSelector
+                  pipeline={pipeline}
+                  setPipeline={setPipeline}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <span className="text-lg font-semibold text-gray-900 block">
+                  Select Model
+                </span>
+                <ModelSelector />
+              </div>
             </div>
-            <ModelSelector />
 
             {/* Model Loading Progress */}
             {status === 'progress' && (

src/components/ModelInfo.tsx

@@ -0,0 +1,164 @@
+import { Bot, Heart, Download, Cpu, DatabaseIcon, CheckCircle, XCircle, ExternalLink, ChevronDown } from 'lucide-react'
+import { getModelSize } from '../lib/huggingface'
+import { useModel } from '../contexts/ModelContext'
+import { useEffect } from 'react'
+import { QuantizationType } from '../types'
+
+const ModelInfo = () => {
+  const formatNumber = (num: number) => {
+    if (num >= 1000000000) {
+      return (num / 1000000000).toFixed(1) + 'B'
+    } else if (num >= 1000000) {
+      return (num / 1000000).toFixed(1) + 'M'
+    } else if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'K'
+    }
+    return num.toString()
+  }
+
+  const { modelInfo, selectedQuantization, setSelectedQuantization } = useModel()
+
+  // Set default quantization when model changes
+  useEffect(() => {
+    if (modelInfo.isCompatible && modelInfo.supportedQuantizations.length > 0) {
+      const quantizations = modelInfo.supportedQuantizations
+      let defaultQuant: QuantizationType = 'fp32'
+      
+      if (quantizations.includes('int8')) {
+        defaultQuant = 'int8'
+      } else if (quantizations.includes('q8')) {
+        defaultQuant = 'q8'
+      } else if (quantizations.includes('q4')) {
+        defaultQuant = 'q4'
+      }
+      
+      setSelectedQuantization(defaultQuant)
+    }
+  }, [modelInfo.supportedQuantizations, modelInfo.isCompatible, setSelectedQuantization])
+
+  if (!modelInfo.name) {
+    return null
+  }
+
+  return (
+<div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 rounded-lg border border-blue-200 space-y-3">
+      {/* Model Name Row */}
+      <div className="flex items-center space-x-2">
+        <Bot className="w-4 h-4 text-blue-600" />
+        <a
+          href={`https://huggingface.co/${modelInfo.name}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm font-medium text-gray-700 truncate max-w-100 hover:underline"
+          title={modelInfo.name}
+        >
+          <ExternalLink className="w-3 h-3 inline-block mr-1" />
+          {modelInfo.name}
+        </a>
+        {/* Compatibility Status */}
+        {typeof modelInfo.isCompatible === 'boolean' && (
+          <div className="flex items-center space-x-1">
+            {modelInfo.isCompatible ? (
+              <>
+                <CheckCircle className="w-4 h-4 text-green-500" />
+              </>
+            ) : (
+              <>
+                <XCircle className="w-4 h-4 text-red-500" />
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      
+      {/* Base Model Link */}
+      {modelInfo.baseId && (
+        <div className="flex items-center space-x-2 ml-6">
+          <a
+            href={`https://huggingface.co/${modelInfo.baseId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-gray-600 truncate max-w-100 hover:underline"
+            title={`Base model: ${modelInfo.baseId}`}
+          >
+            <ExternalLink className="w-3 h-3 inline-block mr-1" />
+            {modelInfo.baseId}
+          </a>
+        </div>
+      )}
+
+
+      {/* Stats Row */}
+      <div className="flex items-center justify-self-end space-x-4 text-xs text-gray-600">
+        {modelInfo.likes > 0 && (
+          <div className="flex items-center space-x-1">
+            <Heart className="w-3 h-3 text-red-500" />
+            <span>{formatNumber(modelInfo.likes)}</span>
+          </div>
+        )}
+
+        {modelInfo.downloads > 0 && (
+          <div className="flex items-center space-x-1">
+            <Download className="w-3 h-3 text-green-500" />
+            <span>{formatNumber(modelInfo.downloads)}</span>
+          </div>
+        )}
+
+        {modelInfo.parameters > 0 && (
+          <div className="flex items-center space-x-1">
+            <Cpu className="w-3 h-3 text-purple-500" />
+            <span>{formatNumber(modelInfo.parameters)}</span>
+          </div>
+        )}
+
+        {modelInfo.parameters > 0 && (
+          <div className="flex items-center space-x-1">
+            <DatabaseIcon className="w-3 h-3 text-purple-500" />
+            <span>
+              {`~${getModelSize(modelInfo.parameters, selectedQuantization).toFixed(1)}MB`}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Separator */}
+      {modelInfo.isCompatible && modelInfo.supportedQuantizations.length > 0 && (
+        <hr className="border-gray-200" />
+      )}
+      
+      {/* Quantization Dropdown */}
+      {modelInfo.isCompatible && modelInfo.supportedQuantizations.length > 0 && (
+        <div className="flex items-center space-x-2">
+          <span className="text-xs text-gray-600 font-medium">Quantization:</span>
+          <div className="relative">
+            <select
+              value={selectedQuantization || ''}
+              onChange={(e) => setSelectedQuantization(e.target.value as QuantizationType)}
+              className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 pr-8 text-xs text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+              <option value="">Select quantization</option>
+              {modelInfo.supportedQuantizations.map((quant) => (
+                <option key={quant} value={quant}>
+                  {quant}
+                </option>
+              ))}
+            </select>
+            <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400 pointer-events-none" />
+          </div>
+        </div>
+      )}
+
+      {/* Incompatibility Message */}
+      {modelInfo.isCompatible === false && modelInfo.incompatibilityReason && (
+        <div className="bg-red-50 border border-red-200 rounded-md px-3 py-2">
+          <p className="text-sm text-red-700">
+            <span className="font-medium">Incompatible:</span>{' '}
+            {modelInfo.incompatibilityReason}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ModelInfo

src/components/ModelSelector.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
 import { useModel } from '../contexts/ModelContext'
 import { getModelInfo } from '../lib/huggingface'
-import { Heart, Download, ChevronDown } from 'lucide-react'
+import { Heart, Download, ChevronDown, Check, ArrowUpDown } from 'lucide-react'
+
+type SortOption = 'likes' | 'downloads' | 'createdAt' | 'name'
 
 const ModelSelector: React.FC = () => {
-  const { models, setModelInfo, modelInfo } = useModel()
-  const [isOpen, setIsOpen] = useState(false)
-  const [modelStats, setModelStats] = useState<
-    Record<string, { likes: number; downloads: number; createdAt: string }>
-  >({})
+  const { models, setModelInfo, modelInfo, pipeline } = useModel()
+  const [sortBy, setSortBy] = useState<SortOption>('likes')
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
 
   const formatNumber = (num: number) => {
     if (num >= 1000000000) {
@@ -21,39 +22,49 @@ const ModelSelector: React.FC = () => {
     return num.toString()
   }
 
-  // Separate function to fetch only stats without updating selected model
-  const fetchModelStats = async (modelId: string) => {
-    try {
-      const modelInfoResponse = await getModelInfo(modelId)
+  // Sort models based on current sort criteria
+  const sortedModels = React.useMemo(() => {
+    return [...models].sort((a, b) => {
+      let comparison = 0
 
-      setModelStats((prev) => ({
-        ...prev,
-        [modelId]: {
-          likes: modelInfoResponse.likes || 0,
-          downloads: modelInfoResponse.downloads || 0,
-          createdAt: modelInfoResponse.createdAt || ''
-        }
-      }))
-    } catch (error) {
-      console.error('Error fetching model stats:', error)
-    }
-  }
+      switch (sortBy) {
+        case 'downloads':
+          comparison = (a.downloads || 0) - (b.downloads || 0)
+          break
+        case 'createdAt':
+          const dateA = new Date(a.createdAt || '').getTime()
+          const dateB = new Date(b.createdAt || '').getTime()
+          comparison = dateA - dateB
+          break
+        case 'name':
+          comparison = a.id.localeCompare(b.id)
+          break
+        case 'likes':
+        default:
+          comparison = (a.likes || 0) - (b.likes || 0)
+          break
+      }
 
-  // Function to fetch full model info and set as selected
-  const fetchModelAndSetInfo = async (modelId: string) => {
+      return sortOrder === 'desc' ? -comparison : comparison
+    })
+  }, [models, sortBy, sortOrder])
+
+  // Function to fetch detailed model info and set as selected
+  const fetchAndSetModelInfo = async (modelId: string) => {
     try {
       const modelInfoResponse = await getModelInfo(modelId)
+      
       let parameters = 0
       if (modelInfoResponse.safetensors) {
         const safetensors = modelInfoResponse.safetensors
         parameters =
+          safetensors.parameters.BF16 ||
           safetensors.parameters.F16 ||
           safetensors.parameters.F32 ||
           safetensors.parameters.total ||
           0
       }
 
-      // Transform ModelInfoResponse to ModelInfo
       const modelInfo = {
         id: modelId,
         name: modelInfoResponse.id || modelId,
@@ -61,20 +72,14 @@ const ModelSelector: React.FC = () => {
         parameters,
         likes: modelInfoResponse.likes || 0,
         downloads: modelInfoResponse.downloads || 0,
-        createdAt: modelInfoResponse.createdAt || ''
+        createdAt: modelInfoResponse.createdAt || '',
+        isCompatible: modelInfoResponse.isCompatible,
+        incompatibilityReason: modelInfoResponse.incompatibilityReason,
+        supportedQuantizations: modelInfoResponse.supportedQuantizations,
+        baseId: modelInfoResponse.baseId
       }
 
-      // Also update stats
-      setModelStats((prev) => ({
-        ...prev,
-        [modelId]: {
-          likes: modelInfoResponse.likes || 0,
-          downloads: modelInfoResponse.downloads || 0,
-          createdAt: modelInfoResponse.createdAt || ''
-        }
-      }))
-
-      console.log(modelInfoResponse)
+      console.log('Fetched model info:', modelInfoResponse)
 
       setModelInfo(modelInfo)
     } catch (error) {
@@ -82,97 +87,175 @@ const ModelSelector: React.FC = () => {
     }
   }
 
-  // Fetch stats for all models when component mounts (without setting as selected)
+  // Update modelInfo to first model when pipeline changes
   useEffect(() => {
-    models.forEach((model) => {
-      if (!modelStats[model.id]) {
-        fetchModelStats(model.id)
-      }
-    })
-  }, [models])
-
-  // Only fetch full info when a model is actually selected
-  useEffect(() => {
-    if (!modelInfo.id) return
-    // Only fetch if we don't already have the full info
-    if (!modelStats[modelInfo.id]) {
-      fetchModelAndSetInfo(modelInfo.id)
+    if (models.length > 0) {
+      const firstModel = models[0]
+      fetchAndSetModelInfo(firstModel.id)
     }
-  }, [modelInfo.id])
+  }, [pipeline, models])
 
   const handleModelSelect = (modelId: string) => {
-    fetchModelAndSetInfo(modelId)
-    setIsOpen(false)
+    fetchAndSetModelInfo(modelId)
+  }
+
+  const handleSortChange = (newSortBy: SortOption) => {
+    if (sortBy === newSortBy) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(newSortBy)
+      setSortOrder('desc')
+    }
   }
 
+  const selectedModel = models.find(model => model.id === modelInfo.id) || models[0]
+
   return (
     <div className="relative">
-      {/* Custom Dropdown Button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white text-left flex items-center justify-between"
-      >
-        <span className="truncate">{modelInfo.id || 'Select a model'}</span>
-        <ChevronDown
-          className={`w-4 h-4 transition-transform ${
-            isOpen ? 'rotate-180' : ''
-          }`}
-        />
-      </button>
-
-      {/* Custom Dropdown Options */}
-      {isOpen && (
-        <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
-          {models.map((model) => (
-            <div
-              key={model.id}
-              onClick={() => handleModelSelect(model.id)}
-              className="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
-            >
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium truncate flex-1 mr-2">
-                  {model.id}
-                </span>
-
-                {/* Stats Display */}
-                {modelStats[model.id] &&
-                  (modelStats[model.id].likes > 0 ||
-                    modelStats[model.id].downloads > 0) && (
-                    <div className="flex items-center space-x-3 text-xs text-gray-500 flex-shrink-0">
-                      {modelStats[model.id].likes > 0 && (
-                        <div className="flex items-center space-x-1">
-                          <Heart className="w-3 h-3 text-red-500" />
-                          <span>
-                            {formatNumber(modelStats[model.id].likes)}
-                          </span>
-                        </div>
-                      )}
+      <Listbox value={selectedModel} onChange={(model) => handleModelSelect(model.id)}>
+        <div className="relative">
+          <ListboxButton className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white text-left flex items-center justify-between">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex flex-col flex-1 min-w-0">
+                <span className="truncate font-medium">{modelInfo.id || 'Select a model'}</span>
+              </div>
+              
+              <div className="flex items-center space-x-3">
+                {selectedModel && (selectedModel.likes > 0 || selectedModel.downloads > 0) && (
+                  <div className="flex items-center space-x-3 text-xs text-gray-500">
+                    {selectedModel.likes > 0 && (
+                      <div className="flex items-center space-x-1">
+                        <Heart className="w-3 h-3 text-red-500" />
+                        <span>{formatNumber(selectedModel.likes)}</span>
+                      </div>
+                    )}
+                    {selectedModel.downloads > 0 && (
+                      <div className="flex items-center space-x-1">
+                        <Download className="w-3 h-3 text-green-500" />
+                        <span>{formatNumber(selectedModel.downloads)}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <ChevronDown className="w-4 h-4 ui-open:rotate-180 transition-transform flex-shrink-0" />
+              </div>
+            </div>
+          </ListboxButton>
 
-                      {modelStats[model.id].downloads > 0 && (
-                        <div className="flex items-center space-x-1">
-                          <Download className="w-3 h-3 text-green-500" />
-                          <span>
-                            {formatNumber(modelStats[model.id].downloads)}
-                          </span>
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <ListboxOptions className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden focus:outline-none">
+              {/* Sort Controls - Always Visible */}
+              <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
+                <div className="flex items-center space-x-2 text-xs">
+                  <span className="text-gray-600 font-medium">Sort by:</span>
+                  <button
+                    onClick={() => handleSortChange('name')}
+                    className={`px-2 py-1 rounded flex items-center space-x-1 ${
+                      sortBy === 'name' ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'
+                    }`}
+                  >
+                    <span>Name</span>
+                    {sortBy === 'name' && <ArrowUpDown className="w-3 h-3" />}
+                  </button>
+                  <button
+                    onClick={() => handleSortChange('likes')}
+                    className={`px-2 py-1 rounded flex items-center space-x-1 ${
+                      sortBy === 'likes' ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'
+                    }`}
+                  >
+                    <Heart className="w-3 h-3" />
+                    <span>Likes</span>
+                    {sortBy === 'likes' && <ArrowUpDown className="w-3 h-3" />}
+                  </button>
+                  <button
+                    onClick={() => handleSortChange('downloads')}
+                    className={`px-2 py-1 rounded flex items-center space-x-1 ${
+                      sortBy === 'downloads' ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'
+                    }`}
+                  >
+                    <Download className="w-3 h-3" />
+                    <span>Downloads</span>
+                    {sortBy === 'downloads' && <ArrowUpDown className="w-3 h-3" />}
+                  </button>
+                  <button
+                    onClick={() => handleSortChange('createdAt')}
+                    className={`px-2 py-1 rounded flex items-center space-x-1 ${
+                      sortBy === 'createdAt' ? 'bg-blue-100 text-blue-700' : 'text-gray-600 hover:bg-gray-100'
+                    }`}
+                  >
+                    <span>Date</span>
+                    {sortBy === 'createdAt' && <ArrowUpDown className="w-3 h-3" />}
+                  </button>
+                </div>
+              </div>
+
+              {/* Model Options - Scrollable */}
+              <div className="overflow-auto max-h-48">
+                {sortedModels.map((model) => {
+                  const hasStats = model.likes > 0 || model.downloads > 0
+                  
+                  return (
+                    <ListboxOption
+                      key={model.id}
+                      value={model}
+                      className={({ active, selected }) =>
+                        `px-3 py-2 cursor-pointer border-b border-gray-100 last:border-b-0 ${
+                          active ? 'bg-gray-50' : ''
+                        } ${selected ? 'bg-blue-50' : ''}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center flex-1 mr-2">
+                            <span className="text-sm font-medium truncate">
+                              {model.id}
+                            </span>
+                            {selected && (
+                              <Check className="w-4 h-4 text-blue-600 ml-2 flex-shrink-0" />
+                            )}
+                          </div>
+
+                          {/* Stats Display */}
+                          {hasStats && (
+                            <div className="flex items-center space-x-3 text-xs text-gray-500 flex-shrink-0">
+                              {model.likes > 0 && (
+                                <div className="flex items-center space-x-1">
+                                  <Heart className="w-3 h-3 text-red-500" />
+                                  <span>{formatNumber(model.likes)}</span>
+                                </div>
+                              )}
+
+                              {model.downloads > 0 && (
+                                <div className="flex items-center space-x-1">
+                                  <Download className="w-3 h-3 text-green-500" />
+                                  <span>{formatNumber(model.downloads)}</span>
+                                </div>
+                              )}
+                              
+                              {model.createdAt && (
+                                <span className="text-xs text-gray-400">
+                                  {model.createdAt.split('T')[0]}
+                                </span>
+                              )}
+                            </div>
+                          )}
                         </div>
                       )}
-                      {modelStats[model.id].createdAt !== '' && (
-                        <span className="text-xs text-gray-400">
-                          {modelStats[model.id].createdAt.split('T')[0]}
-                        </span>
-                      )}
-                    </div>
-                  )}
+                    </ListboxOption>
+                  )
+                })}
               </div>
-            </div>
-          ))}
+            </ListboxOptions>
+          </Transition>
         </div>
-      )}
-
-      {/* Click outside to close */}
-      {isOpen && (
-        <div className="fixed inset-0 z-0" onClick={() => setIsOpen(false)} />
-      )}
+      </Listbox>
     </div>
   )
 }

src/components/PipelineSelector.tsx

@@ -1,4 +1,12 @@
 import React from 'react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxButton,
+  ListboxOptions,
+  Transition
+} from '@headlessui/react'
+import { ChevronDown, Check } from 'lucide-react';
 
 const pipelines = [
   'zero-shot-classification',
@@ -21,14 +29,73 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
   pipeline,
   setPipeline
 }) => {
+  const selectedPipeline = pipeline;
+
+  const formatPipelineName = (pipelineId: string) => {
+    return pipelineId
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
   return (
-    <select value={pipeline} onChange={(e) => setPipeline(e.target.value)}>
-      {pipelines.map((p) => (
-        <option key={p} value={p}>
-          {p}
-        </option>
-      ))}
-    </select>
+    <div className="relative">
+      <Listbox value={selectedPipeline} onChange={setPipeline}>
+        <div className="relative">
+          <ListboxButton className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm border border-gray-300">
+            <span className="block truncate font-medium">
+              {formatPipelineName(selectedPipeline)}
+            </span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronDown
+                className="h-5 w-5 text-gray-400 ui-open:rotate-180 transition-transform"
+                aria-hidden="true"
+              />
+            </span>
+          </ListboxButton>
+          
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {pipelines.map((p) => (
+                <ListboxOption
+                  key={p}
+                  className={({ active }) =>
+                    `relative cursor-default select-none py-2 px-4 ${
+                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                    }`
+                  }
+                  value={p}
+                >
+                  {({ selected }) => (
+                    <div className="flex items-center justify-between">
+                      <span
+                        className={`block truncate ${
+                          selected ? 'font-medium' : 'font-normal'
+                        }`}
+                      >
+                        {formatPipelineName(p)}
+                      </span>
+                      {selected && (
+                        <span className="flex items-center text-amber-600">
+                          <Check className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
   );
 };
 

src/components/ZeroShotClassification.tsx

@@ -52,37 +52,6 @@ function ZeroShotClassification() {
   )
 
   const { setProgress, status, setStatus, modelInfo, setModelInfo } = useModel()
-  useEffect(() => {
-    const modelName = 'lxyuan/distilbert-base-multilingual-cased-sentiments-student'
-    const fetchModelInfo = async () => {
-      try {
-        const modelInfoResponse = await getModelInfo(modelName)
-        console.log(modelInfoResponse)
-        let parameters = 0
-        if (modelInfoResponse.safetensors) {
-          const safetensors = modelInfoResponse.safetensors
-          parameters =
-            safetensors.parameters.F16 ||
-            safetensors.parameters.F32 ||
-            safetensors.parameters.total ||
-            0
-        }
-        setModelInfo({
-          id: modelInfoResponse.id,
-          name: modelName,
-          architecture: modelInfoResponse.config?.architectures[0] ?? '',
-          parameters,
-          likes: modelInfoResponse.likes,
-          downloads: modelInfoResponse.downloads,
-          createdAt: modelInfoResponse.createdAt,
-        })
-      } catch (error) {
-        console.error('Error fetching model info:', error)
-      }
-    }
-
-    fetchModelInfo()
-  }, [setModelInfo])
 
   // Create a reference to the worker object.
   const worker = useRef<Worker | null>(null)

src/contexts/ModelContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import { ModelInfo, ModelInfoResponse } from '../types'
+import { ModelInfo, ModelInfoResponse, QuantizationType } from '../types'
 
 interface ModelContextType {
   progress: number
@@ -12,6 +12,8 @@ interface ModelContextType {
   setPipeline: (pipeline: string) => void
   models: ModelInfoResponse[]
   setModels: (models: ModelInfoResponse[]) => void
+  selectedQuantization: QuantizationType
+  setSelectedQuantization: (quantization: QuantizationType) => void
 }
 
 const ModelContext = createContext<ModelContextType | undefined>(undefined)
@@ -22,6 +24,7 @@ export function ModelProvider({ children }: { children: React.ReactNode }) {
   const [modelInfo, setModelInfo] = useState<ModelInfo>({} as ModelInfo)
   const [models, setModels] = useState<ModelInfoResponse[]>([] as ModelInfoResponse[])
   const [pipeline, setPipeline] = useState<string>('zero-shot-classification')
+  const [selectedQuantization, setSelectedQuantization] = useState<QuantizationType>('int8')
 
   // set progress to 0 when model is changed
   useEffect(() => {
@@ -41,6 +44,8 @@ export function ModelProvider({ children }: { children: React.ReactNode }) {
         setModels,
         pipeline,
         setPipeline,
+        selectedQuantization,
+        setSelectedQuantization,
       }}
     >
       {children}

src/lib/huggingface.ts

@@ -1,5 +1,4 @@
-import { Mode } from "fs"
-import { ModelInfoResponse } from "../types"
+import { ModelInfoResponse, QuantizationType } from "../types"
 
 const getModelInfo = async (modelName: string): Promise<ModelInfoResponse> => {
   const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
@@ -23,7 +22,70 @@ const getModelInfo = async (modelName: string): Promise<ModelInfoResponse> => {
   if (!response.ok) {
     throw new Error(`Failed to fetch model info: ${response.statusText}`)
   }
-  return response.json()
+  
+  const modelData: ModelInfoResponse = await response.json()
+  
+  const requiredFiles = [
+    'config.json',
+    'tokenizer.json',
+    'tokenizer_config.json',
+  ]
+  
+  const siblingFiles = modelData.siblings?.map(s => s.rfilename) || []
+  const isCompatible =
+    requiredFiles.every((file) => siblingFiles.includes(file)) &&
+    siblingFiles.some((file) => file.endsWith('.onnx') && file.startsWith('onnx/'))
+  const incompatibilityReason = isCompatible
+    ? ''
+    : `Missing required files: ${requiredFiles
+        .filter(file => !siblingFiles.includes(file))
+        .join(', ')}`
+  const supportedQuantizations = siblingFiles
+      .filter((file) => file.endsWith('.onnx') && file.includes('_'))
+      .map((file) => file.split('/')[1].split('_')[1].split('.')[0])
+      .filter((q) => q !== 'quantized')
+  const uniqueSupportedQuantizations = Array.from(new Set(supportedQuantizations))
+  uniqueSupportedQuantizations.sort((a, b) => {
+    const getNumericValue = (str: string) => {
+      const match = str.match(/(\d+)/)
+      return match ? parseInt(match[1]) : Infinity
+    }
+    return getNumericValue(a) - getNumericValue(b)
+  })
+
+  // If there's a base model, fetch its info and merge with compatibility data
+  const baseModel = modelData.cardData?.base_model ?? modelData.modelId 
+  if (baseModel && !modelData.safetensors) {
+    const baseModelResponse = await fetch(
+      `https://huggingface.co/api/models/${baseModel}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      }
+    )
+
+    if (baseModelResponse.ok) {
+      const baseModelData: ModelInfoResponse = await baseModelResponse.json()
+      
+      return {
+        ...baseModelData,
+        id: modelData.id,
+        baseId: baseModel,
+        isCompatible,
+        incompatibilityReason,
+        supportedQuantizations: uniqueSupportedQuantizations as QuantizationType[]
+      }
+    }
+  }
+  
+  return {
+    ...modelData,
+    isCompatible,
+    incompatibilityReason,
+    supportedQuantizations: uniqueSupportedQuantizations as QuantizationType[]
+  }
 }
 
 const getModelsByPipeline = async (
@@ -57,8 +119,6 @@ const getModelsByPipeline = async (
   return models.slice(0, 10)
 }
 
-// Define the possible quantization types for clarity and type safety
-type QuantizationType = 'FP32' | 'FP16' | 'INT8' | 'Q4'
 function getModelSize(
   parameters: number,
   quantization: QuantizationType
@@ -66,20 +126,23 @@ function getModelSize(
   let bytesPerParameter: number
 
   switch (quantization) {
-    case 'FP32':
+    case 'fp32':
       // 32-bit floating point uses 4 bytes
       bytesPerParameter = 4
       break
-    case 'FP16':
+    case 'fp16':
       bytesPerParameter = 2
       break
-    case 'INT8':
+    case 'int8':
+    case 'bnb8':
+    case 'uint8':
+    case 'q8':
       bytesPerParameter = 1
       break
-    case 'Q4':
+    case 'bnb4':
+    case 'q4': 
       bytesPerParameter = 0.5
-      const theoreticalSize = (parameters * bytesPerParameter) / (1024 * 1024)
-      return theoreticalSize
+    break
   }
 
   // There are 1,024 * 1,024 bytes in a megabyte
@@ -91,4 +154,3 @@ function getModelSize(
 
 
 export { getModelInfo, getModelSize, getModelsByPipeline }
-

src/types.ts

@@ -27,6 +27,14 @@ export interface TextClassificationWorkerInput {
 
 export type AppStatus = 'idle' | 'loading' | 'processing'
 
+type q8 = 'q8' | 'int8' | 'bnb8' | 'uint8'
+type q4 = 'q4' | 'bnb4'
+type fp16 = 'fp16'
+type fp32 = 'fp32'
+
+export type QuantizationType = q8 | q4 | fp16 | fp32
+
+
 export interface ModelInfo {
   id: string
   name: string
@@ -35,6 +43,10 @@ export interface ModelInfo {
   likes: number
   downloads: number
   createdAt: string
+  isCompatible?: boolean
+  incompatibilityReason?: string
+  supportedQuantizations: QuantizationType[]
+  baseId?: string
 }
 
 
@@ -48,6 +60,10 @@ export interface ModelInfoResponse {
   lastModified: string
   pipeline_tag: string
   tags: string[]
+  cardData?: {
+    base_model: string
+  }
+  baseId?: string
   transformersInfo: {
     pipeline_tag: string
     auto_model: string
@@ -55,11 +71,19 @@ export interface ModelInfoResponse {
   }
   safetensors?: {
     parameters: {
+      BF16?: number
       F16?: number
       F32?: number
       total?: number
     }
   }
+  siblings?: {
+    rfilename: string
+  }[]
+  modelId?: string
+  isCompatible: boolean
+  incompatibilityReason?: string
+  supportedQuantizations: QuantizationType[]
   likes: number
   downloads: number
 }