Add lodash and its types, enhance model loading with custom model support, and improve pipeline handling

package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^19.1.6",
     "build": "^0.1.4",
     "dotenv": "^17.0.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.525.0",
     "path-browserify": "^1.0.1",
     "react": "^19.1.0",
@@ -51,6 +52,7 @@
     ]
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.20",
     "@types/react-syntax-highlighter": "^15.5.13",
     "tailwindcss": "3"
   }

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       dotenv:
         specifier: ^17.0.1
         version: 17.0.1
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lucide-react:
         specifier: ^0.525.0
         version: 0.525.0(react@19.1.0)
@@ -75,6 +78,9 @@ importers:
         specifier: ^2.1.4
         version: 2.1.4
     devDependencies:
+      '@types/lodash':
+        specifier: ^4.17.20
+        version: 4.17.20
       '@types/react-syntax-highlighter':
         specifier: ^15.5.13
         version: 15.5.13
@@ -1557,6 +1563,9 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -8192,6 +8201,8 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/lodash@4.17.20': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import PipelineSelector from './components/PipelineSelector'
 import ZeroShotClassification from './components/ZeroShotClassification'
 import TextClassification from './components/TextClassification'
@@ -11,15 +11,18 @@ import ModelReadme from './components/ModelReadme'
 
 function App() {
   const { pipeline, setPipeline, setModels, setModelInfo, modelInfo } = useModel()
+  const [isFetching, setIsFetching] = useState(false)
 
   useEffect(() => {
     setModelInfo(null)
     const fetchModels = async () => {
+      setIsFetching(true)
       const fetchedModels = await getModelsByPipeline(pipeline)
       setModels(fetchedModels)
+      setIsFetching(false)
     }
     fetchModels()
-  }, [setModels, pipeline])
+  }, [setModels, setModelInfo, pipeline])
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
@@ -44,12 +47,12 @@ function App() {
                   <span className="text-lg font-semibold text-gray-900 block">
                     Select Model
                   </span>
-                  <ModelSelector />
+                  <ModelSelector isFetching={isFetching} />
                 </div>
               </div>
 
               <div className="ml-6">
-                <ModelInfo />
+                <ModelInfo isFetching={isFetching} />
               </div>
             </div>
 

src/components/ModelInfo.tsx

@@ -12,7 +12,7 @@ import { getModelSize } from '../lib/huggingface'
 import { useModel } from '../contexts/ModelContext'
 import ModelLoader from './ModelLoader'
 
-const ModelInfo = () => {
+const ModelInfo = ({ isFetching }: { isFetching: boolean }) => {
   const formatNumber = (num: number) => {
     if (num >= 1000000000) {
       return (num / 1000000000).toFixed(1) + 'B'
@@ -64,10 +64,11 @@ const ModelInfo = () => {
     </div>
   )
 
-  if (!modelInfo) {
+  if (!modelInfo || isFetching) {
     return <ModelInfoSkeleton />
   }
 
+
   return (
     <div className="mt-5 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 rounded-lg border border-blue-200 space-y-3 h-full min-h-[150px]">
       {/* Model Name Row */}
@@ -77,7 +78,7 @@ const ModelInfo = () => {
           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"
+          className="text-sm font-medium text-gray-700 truncate max-w-80 hover:underline"
           title={modelInfo.name}
         >
           <ExternalLink className="w-3 h-3 inline-block mr-1" />
@@ -160,8 +161,7 @@ const ModelInfo = () => {
       {/* 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>{' '}
+          <p className="text-sm text-red-700 whitespace-break-spaces">
             {modelInfo.incompatibilityReason}
           </p>
         </div>

src/components/ModelReadme.tsx

@@ -13,31 +13,23 @@ const ModelReadme = ({ readme, pipeline, modelName}: ModelReadmeProps) => {
   return (
     <div className="mt-2">
       <Disclosure>
-        {({ open }) => (
-          <>
-            <DisclosureButton className="flex justify-between items-center w-full px-4 py-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
-              <div className="flex items-center text-sm text-gray-600">
-                <FileText className="w-4 h-4 mr-2" />
-                README.md
-              </div>
-              <div className="flex items-center space-x-2">
-                <div className="text-xs text-gray-400">
-                  <i>{pipeline}</i> • {modelName}
-                </div>
-                <ChevronDown
-                  className={`w-4 h-4 text-gray-400 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                />
-              </div>
-            </DisclosureButton>
-            <DisclosurePanel className="px-4 py-5 bg-gray-50 rounded-b-lg border-l border-r border-b border-gray-200 max-h-[600px] overflow-y-auto">
-              <div className="text-sm text-gray-800">
-                <MarkdownRenderer content={readme} />
-              </div>
-            </DisclosurePanel>
-          </>
-        )}
+        <DisclosureButton className="flex justify-between items-center w-full px-4 py-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
+          <div className="flex items-center text-sm text-gray-600">
+            <FileText className="w-4 h-4 mr-2" />
+            README.md
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="text-xs text-gray-400">
+              <i>{pipeline}</i> • {modelName}
+            </div>
+            <ChevronDown className="w-4 h-4 text-gray-400 transition-transform ui-open:rotate-180" />
+          </div>
+        </DisclosureButton>
+        <DisclosurePanel className="px-4 py-5 bg-gray-50 rounded-b-lg border-l border-r border-b border-gray-200 max-h-[600px] overflow-y-auto">
+          <div className="text-sm text-gray-800">
+            <MarkdownRenderer content={readme} />
+          </div>
+        </DisclosurePanel>
       </Disclosure>
     </div>
   )

src/components/ModelSelector.tsx

@@ -8,14 +8,29 @@ import {
 } from '@headlessui/react'
 import { useModel } from '../contexts/ModelContext'
 import { getModelInfo } from '../lib/huggingface'
-import { Heart, Download, ChevronDown, Check, ArrowDown, ArrowUp } from 'lucide-react'
+import {
+  Heart,
+  Download,
+  ChevronDown,
+  Check,
+  ArrowDown,
+  ArrowUp,
+  Plus,
+  Search,
+  X
+} from 'lucide-react'
 
 type SortOption = 'likes' | 'downloads' | 'createdAt' | 'name'
 
-const ModelSelector: React.FC = () => {
+function ModelSelector({ isFetching }: { isFetching: boolean }) {
   const { models, setModelInfo, modelInfo, pipeline } = useModel()
   const [sortBy, setSortBy] = useState<SortOption>('downloads')
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
+  const [showCustomInput, setShowCustomInput] = useState(false)
+  const [customModelName, setCustomModelName] = useState('')
+  const [isLoadingCustomModel, setIsLoadingCustomModel] = useState(false)
+  const [customModelError, setCustomModelError] = useState('')
+  const [isCustomModel, setIsCustomModel] = useState(false)
 
   const formatNumber = (num: number) => {
     if (num >= 1000000000) {
@@ -57,9 +72,9 @@ const ModelSelector: React.FC = () => {
 
   // Function to fetch detailed model info and set as selected
   const fetchAndSetModelInfo = useCallback(
-    async (modelId: string) => {
+    async (modelId: string, isCustom: boolean = false) => {
       try {
-        const modelInfoResponse = await getModelInfo(modelId)
+        const modelInfoResponse = await getModelInfo(modelId, pipeline)
 
         let parameters = 0
         if (modelInfoResponse.safetensors) {
@@ -87,26 +102,28 @@ const ModelSelector: React.FC = () => {
           baseId: modelInfoResponse.baseId,
           readme: modelInfoResponse.readme
         }
-
-
         setModelInfo(modelInfo)
+        setIsCustomModel(isCustom)
       } catch (error) {
         console.error('Error fetching model info:', error)
+        throw error
       }
     },
-    [setModelInfo]
+    [setModelInfo, pipeline]
   )
 
   // Update modelInfo to first model when pipeline changes
   useEffect(() => {
-    if (models.length > 0) {
+    if (isFetching) return
+
+    if (models.length > 0 && !isCustomModel) {
       const firstModel = models[0]
-      fetchAndSetModelInfo(firstModel.id)
+      fetchAndSetModelInfo(firstModel.id, false)
     }
-  }, [pipeline, models, fetchAndSetModelInfo])
+  }, [pipeline, models, fetchAndSetModelInfo, isCustomModel, isFetching])
 
   const handleModelSelect = (modelId: string) => {
-    fetchAndSetModelInfo(modelId)
+    fetchAndSetModelInfo(modelId, false)
   }
 
   const handleSortChange = (newSortBy: SortOption) => {
@@ -118,6 +135,46 @@ const ModelSelector: React.FC = () => {
     }
   }
 
+  const handleCustomModelLoad = async () => {
+    if (!customModelName.trim()) {
+      setCustomModelError('Please enter a model name')
+      return
+    }
+
+    setIsLoadingCustomModel(true)
+    setCustomModelError('')
+
+    try {
+      await fetchAndSetModelInfo(customModelName.trim(), true)
+      setShowCustomInput(false)
+      setCustomModelName('')
+    } catch (error) {
+      setCustomModelError(
+        'Failed to load model. Please check the model name and try again.'
+      )
+    } finally {
+      setIsLoadingCustomModel(false)
+    }
+  }
+
+  const handleRemoveCustomModel = () => {
+    setIsCustomModel(false)
+    // Load the first model from the list
+    if (models.length > 0) {
+      fetchAndSetModelInfo(models[0].id, false)
+    }
+  }
+
+  const handleCustomInputKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleCustomModelLoad()
+    } else if (e.key === 'Escape') {
+      setShowCustomInput(false)
+      setCustomModelName('')
+      setCustomModelError('')
+    }
+  }
+
   const selectedModel =
     models.find((model) => model.id === modelInfo?.id) || models[0]
 
@@ -129,6 +186,72 @@ const ModelSelector: React.FC = () => {
     )
   }
 
+  if (isCustomModel) {
+    return (
+      <div className="relative">
+        <div className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white flex items-center justify-between">
+          <div className="flex flex-col flex-1 min-w-0">
+            <span className="truncate font-medium">
+              {modelInfo?.id || 'Custom model'}
+            </span>
+          </div>
+
+          <div className="flex items-center space-x-3">
+            {modelInfo && (modelInfo.likes > 0 || modelInfo.downloads > 0) && (
+              <div className="flex items-center space-x-3 text-xs text-gray-500">
+                {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>
+                )}
+              </div>
+            )}
+            <button
+              onClick={handleRemoveCustomModel}
+              className="p-1 text-gray-400 hover:text-red-500 transition-colors"
+              title="Remove custom model"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (isFetching) {
+    return (
+      <div className="relative">
+        <div className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white flex items-center justify-between animate-pulse h-10">
+          <div className="flex flex-col flex-1 min-w-0 space-y-2">
+            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+          </div>
+
+          <div className="flex items-center space-x-3">
+            <div className="flex items-center space-x-3">
+              <div className="flex items-center space-x-1">
+                <Heart className="w-3 h-3 text-red-500" />
+                <div className="h-3 bg-gray-200 rounded w-8"></div>
+              </div>
+              <div className="flex items-center space-x-1">
+                <Download className="w-3 h-3 text-green-500" />
+                <div className="h-3 bg-gray-200 rounded w-8"></div>
+              </div>
+            </div>
+            <div className="w-4 h-4 bg-gray-200 rounded"></div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="relative">
       <Listbox
@@ -176,119 +299,187 @@ const ModelSelector: React.FC = () => {
             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' && <SortIcon sortOrder={sortOrder} />}
-                  </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' && <SortIcon sortOrder={sortOrder} />}
-                  </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' && (
-                      <SortIcon sortOrder={sortOrder} />
-                    )}
-                  </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' && (
-                      <SortIcon sortOrder={sortOrder} />
+              {/* Custom Model Input */}
+              {showCustomInput ? (
+                <div className="px-3 py-3 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
+                  <div className="space-y-2">
+                    <div className="flex items-center space-x-2">
+                      <input
+                        type="text"
+                        value={customModelName}
+                        onChange={(e) => setCustomModelName(e.target.value)}
+                        onKeyDown={handleCustomInputKeyPress}
+                        placeholder="Enter model name (e.g., Qwen/Qwen3-0.6B)"
+                        className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        autoFocus
+                      />
+                      <button
+                        onClick={handleCustomModelLoad}
+                        disabled={isLoadingCustomModel}
+                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
+                      >
+                        {isLoadingCustomModel ? (
+                          <div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin" />
+                        ) : (
+                          <Search className="w-3 h-3" />
+                        )}
+                        <span>Load</span>
+                      </button>
+                      <button
+                        onClick={() => {
+                          setShowCustomInput(false)
+                          setCustomModelName('')
+                          setCustomModelError('')
+                        }}
+                        className="px-2 py-1 text-sm text-gray-600 hover:text-gray-800"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                    {customModelError && (
+                      <p className="text-xs text-red-600">{customModelError}</p>
                     )}
-                  </button>
+                    <p className="text-xs text-gray-500">
+                      Press Enter to load or Escape to cancel
+                    </p>
+                  </div>
                 </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' : ''}`
-                      }
+              ) : (
+                <>
+                  {/* Load Custom Model Button */}
+                  <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
+                    <button
+                      onClick={() => setShowCustomInput(true)}
+                      className="w-full flex items-center justify-center space-x-2 px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded transition-colors"
                     >
-                      {({ 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>
+                      <Plus className="w-4 h-4" />
+                      <span>Load Custom Model</span>
+                    </button>
+                  </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>
-                              )}
+                  {/* Sort Controls */}
+                  <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' && (
+                          <SortIcon sortOrder={sortOrder} />
+                        )}
+                      </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' && (
+                          <SortIcon sortOrder={sortOrder} />
+                        )}
+                      </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' && (
+                          <SortIcon sortOrder={sortOrder} />
+                        )}
+                      </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' && (
+                          <SortIcon sortOrder={sortOrder} />
+                        )}
+                      </button>
+                    </div>
+                  </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 Options - Scrollable */}
+              {!showCustomInput && (
+                <div className="overflow-auto max-h-48">
+                  {sortedModels.map((model) => {
+                    const hasStats = model.likes > 0 || model.downloads > 0
 
-                              {model.createdAt && (
-                                <span className="text-xs text-gray-400">
-                                  {model.createdAt.split('T')[0]}
-                                </span>
+                    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>
-                          )}
-                        </div>
-                      )}
-                    </ListboxOption>
-                  )
-                })}
-              </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>
+                        )}
+                      </ListboxOption>
+                    )
+                  })}
+                </div>
+              )}
             </ListboxOptions>
           </Transition>
         </div>

src/components/PipelineSelector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@headlessui/react'
 import { ChevronDown, Check } from 'lucide-react';
 
-const pipelines = [
+export const supportedPipelines = [
   'text-classification',
   'zero-shot-classification',
   'text-generation',
@@ -63,7 +63,7 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
             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 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-              {pipelines.map((p) => (
+              {supportedPipelines.map((p) => (
                 <ListboxOption
                   key={p}
                   className={({ active }) =>

src/lib/huggingface.ts

@@ -1,6 +1,7 @@
+import { supportedPipelines } from "../components/PipelineSelector"
 import { ModelInfoResponse, QuantizationType } from "../types"
 
-const getModelInfo = async (modelName: string): Promise<ModelInfoResponse> => {
+const getModelInfo = async (modelName: string, pipeline: string): Promise<ModelInfoResponse> => {
   const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
 
   if (!token) {
@@ -32,14 +33,21 @@ const getModelInfo = async (modelName: string): Promise<ModelInfoResponse> => {
   ]
   
   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 missingFiles = requiredFiles.filter(file => !siblingFiles.includes(file))
+  const hasOnnxFolder = siblingFiles.some((file) => file.endsWith('.onnx') && file.startsWith('onnx/'))
+
+  const isCompatible = missingFiles.length === 0 && hasOnnxFolder && modelData.tags.includes(pipeline)
+
+  
+  let incompatibilityReason = ''
+  if (!modelData.tags.includes(pipeline)) {
+    const expectedPipelines = modelData.tags.filter(tag => supportedPipelines.includes(tag)).join(', ')
+    incompatibilityReason = expectedPipelines ? `- Model can be used with ${expectedPipelines} pipelines only\n` : `- Pipeline ${pipeline} not supported by the model\n` 
+  } if (missingFiles.length > 0) {
+    incompatibilityReason += `- Missing required files: ${missingFiles.join(', ')}\n`
+  } else if (!hasOnnxFolder)  {
+    incompatibilityReason += '- Folder onnx/ is missing\n'
+  }
   const supportedQuantizations = siblingFiles
       .filter((file) => file.endsWith('.onnx') && file.includes('_'))
       .map((file) => file.split('/')[1].split('_')[1].split('.')[0])
@@ -106,7 +114,7 @@ const getModelInfo = async (modelName: string): Promise<ModelInfoResponse> => {
 }
 
 const getModelsByPipeline = async (
-  pipeline_tag: string
+  pipelineTag: string
 ): Promise<ModelInfoResponse[]> => {
   const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
 
@@ -116,8 +124,71 @@ const getModelsByPipeline = async (
     )
   }
 
+  // First search with filter=onnx
+  const response1 = await fetch(
+    `https://huggingface.co/api/models?filter=${pipelineTag}&filter=onnx&sort=downloads&limit=50`,
+    {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    }
+  )
+  if (!response1.ok) {
+    throw new Error(`Failed to fetch models for pipeline: ${response1.statusText}`)
+  }
+  const models1 = await response1.json()
+
+  // Second search with search=onnx
+  const response2 = await fetch(
+    `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx&sort=downloads&limit=50`,
+    {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    }
+  )
+  if (!response2.ok) {
+    throw new Error(`Failed to fetch models for pipeline: ${response2.statusText}`)
+  }
+  const models2 = await response2.json()
+
+  // Combine and deduplicate models based on id
+  const combinedModels = [...models1, ...models2].filter((m: ModelInfoResponse) => m.createdAt > '2022/02/03')
+  const uniqueModels = combinedModels.filter((model, index, self) => 
+    index === self.findIndex(m => m.id === model.id)
+  )
+
+  if (pipelineTag === 'text-classification') {
+    return uniqueModels
+      .filter(
+        (model: ModelInfoResponse) =>
+          !model.tags.includes('reranker') &&
+          !model.id.includes('reranker') &&
+          !model.id.includes('ms-marco') &&
+          !model.id.includes('MiniLM')
+      )
+      .slice(0, 20)
+  }
+  
+  return uniqueModels.slice(0, 20)
+}
+
+
+const getModelsByPipelineCustom = async (
+  searchString: string,
+  pipelineTag: string
+): Promise<ModelInfoResponse[]> => {
+  const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
+
+  if (!token) {
+    throw new Error(
+      'Hugging Face token not found. Please set REACT_APP_HUGGINGFACE_TOKEN in your .env file'
+    )
+  }
   const response = await fetch(
-    `https://huggingface.co/api/models?filter=${pipeline_tag}&filter=transformers.js&sort=downloads`,
+    `https://huggingface.co/api/models?filter=${pipelineTag}&search=${searchString}&sort=downloads&limit=50`,
     {
       method: 'GET',
       headers: {
@@ -126,12 +197,14 @@ const getModelsByPipeline = async (
     }
   )
 
-  if (!response.ok) {
+    if (!response.ok) {
     throw new Error(`Failed to fetch models for pipeline: ${response.statusText}`)
   }
   const models = await response.json()
-  if (pipeline_tag === 'text-classification') {
-    return models
+
+  const uniqueModels = models.filter((m: ModelInfoResponse) => m.createdAt > '2022/02/03')
+  if (pipelineTag === 'text-classification') {
+    return uniqueModels
       .filter(
         (model: ModelInfoResponse) =>
           !model.tags.includes('reranker') &&
@@ -139,10 +212,10 @@ const getModelsByPipeline = async (
           !model.id.includes('ms-marco') &&
           !model.id.includes('MiniLM')
       )
-      .slice(0, 10)
+      .slice(0, 20)
   }
   
-  return models.slice(0, 10)
+  return uniqueModels.slice(0, 20)
 }
 
 function getModelSize(
@@ -178,4 +251,4 @@ function getModelSize(
 }
 
 
-export { getModelInfo, getModelSize, getModelsByPipeline }
+export { getModelInfo, getModelSize, getModelsByPipeline, getModelsByPipelineCustom }