update layout adding a Modal and Sidebar

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@headlessui/react": "^2.2.4",
         "@huggingface/transformers": "^3.6.1",
+        "@tailwindcss/typography": "^0.5.16",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
@@ -4167,6 +4168,34 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
@@ -12572,12 +12601,24 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "license": "MIT"
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@headlessui/react": "^2.2.4",
     "@huggingface/transformers": "^3.6.1",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

src/App.tsx

@@ -1,24 +1,18 @@
-import { useEffect } from 'react'
-import PipelineSelector from './components/PipelineSelector'
+import { useEffect, useState } from 'react'
+import { Settings } from 'lucide-react'
 import ZeroShotClassification from './components/ZeroShotClassification'
 import TextClassification from './components/TextClassification'
 import Header from './Header'
 import { useModel } from './contexts/ModelContext'
 import { getModelsByPipeline } from './lib/huggingface'
-import ModelSelector from './components/ModelSelector'
-import ModelInfo from './components/ModelInfo'
-import ModelReadme from './components/ModelReadme'
 import TextGeneration from './components/TextGeneration'
+import Sidebar from './components/Sidebar'
+import ModelReadme from './components/ModelReadme'
 
 function App() {
-  const {
-    pipeline,
-    setPipeline,
-    setModels,
-    setModelInfo,
-    modelInfo,
-    setIsFetching
-  } = useModel()
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const { pipeline, setModels, setModelInfo, modelInfo, setIsFetching } =
+    useModel()
 
   useEffect(() => {
     setModelInfo(null)
@@ -41,52 +35,49 @@ function App() {
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Header />
 
-      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-8">
-          <div className="bg-white rounded-lg border p-6">
-            <div className="flex items-center lg:items-start justify-between mx-auto flex-col lg:flex-row">
-              <div className="space-y-2 w-10/12 lg:w-7/12">
-                <div className="space-y-2">
-                  <span className="text-lg font-semibold text-gray-900 block">
-                    Choose a Pipeline
-                  </span>
-                  <PipelineSelector
+      <div className="flex h-[calc(100vh-4rem)]">
+        {/* Header is h-16 = 4rem */}
+        {/* Main Content */}
+        <main className="flex-1 overflow-auto">
+          <div className="h-full px-4 sm:px-6 lg:px-8 py-8 lg:pr-4 max-w-none">
+            {/* Mobile menu button */}
+            <div className="flex flex-row space-x-4">
+              <div className="lg:hidden mb-4">
+                <button
+                  onClick={() => setIsSidebarOpen(true)}
+                  className="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                  <Settings className="w-4 h-4 mr-2" />
+                  Configuration
+                </button>
+              </div>
+              {/* Model README Button */}
+              <div className="mb-4">
+                {modelInfo?.readme && (
+                  <ModelReadme
+                    readme={modelInfo.readme}
+                    modelName={modelInfo.name}
                     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>
-
-              <div className="ml-6">
-                <ModelInfo />
+                )}
               </div>
             </div>
-
-            {modelInfo?.readme && (
-              <ModelReadme
-                readme={modelInfo.readme}
-                modelName={modelInfo.name}
-                pipeline={pipeline}
-              />
-            )}
+            {/* Pipeline Component */}
+            <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+              {pipeline === 'zero-shot-classification' && (
+                <ZeroShotClassification />
+              )}
+              {pipeline === 'text-classification' && <TextClassification />}
+              {pipeline === 'text-generation' && <TextGeneration />}
+            </div>
           </div>
-        </div>
-
-        <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
-          {pipeline === 'zero-shot-classification' && (
-            <ZeroShotClassification />
-          )}
-          {pipeline === 'text-classification' && <TextClassification />}
-          {pipeline === 'text-generation' && <TextGeneration />}
-        </div>
-      </main>
+        </main>
+        {/* Sidebar */}
+        <Sidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
+        />
+      </div>
     </div>
   )
 }

src/components/MarkdownRenderer.tsx

@@ -26,7 +26,7 @@ const MarkdownRenderer = ({ content }: MarkdownRendererProps) => {
               style={oneLight}
               language={match[1]}
               PreTag="div"
-              className="rounded-md my-4 border border-r-2"
+              className="rounded-md my-4 border border-r-2 text-sm"
               {...props}
             >
               {String(children).replace(/\n$/, '')}

src/components/Modal.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react'
+import { X } from 'lucide-react'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: React.ReactNode
+  children: React.ReactNode
+  maxWidth?:
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  maxWidth = '4xl'
+}) => {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl',
+    '5xl': 'max-w-5xl',
+    '6xl': 'max-w-6xl',
+    '7xl': 'max-w-7xl'
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+        <div
+          className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${maxWidthClasses[maxWidth]}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+            <button
+              onClick={onClose}
+              className="rounded-md p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            >
+              <span className="sr-only">Close</span>
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Modal

src/components/ModelInfo.tsx

@@ -28,10 +28,10 @@ const ModelInfo = () => {
   const { models, modelInfo, selectedQuantization, isFetching } = useModel()
 
   const ModelInfoSkeleton = () => (
-    <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-4 h-full min-h-[160px] animate-pulse w-[400px]">
+    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-3 rounded-lg border border-blue-200 space-y-3 animate-pulse w-4/5">
       <div className="flex items-center space-x-2">
         <Bot className="w-4 h-4 text-blue-300" />
-        <div className="h-4 bg-gray-300 rounded w-48"></div>
+        <div className="h-4 bg-gray-300 rounded flex-1"></div>
         <div className="w-4 h-4 bg-gray-300 rounded-full"></div>
       </div>
 
@@ -39,7 +39,7 @@ const ModelInfo = () => {
         <div className="h-3 bg-gray-200 rounded w-32"></div>
       </div>
 
-      <div className="flex items-center justify-self-end space-x-4">
+      <div className="grid grid-cols-2 gap-2 text-xs">
         <div className="flex items-center space-x-1">
           <Heart className="w-3 h-3 text-red-300" />
           <div className="h-3 bg-gray-200 rounded w-8"></div>
@@ -67,63 +67,57 @@ const ModelInfo = () => {
   }
 
   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]">
+    <div className="relative bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-3 rounded-lg border border-blue-200 space-y-3  h-full w-4/5">
       {/* 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-80 hover:underline"
-          title={modelInfo.name}
-        >
-          <ExternalLink className="w-3 h-3 inline-block mr-1" />
-          {modelInfo.name}
-        </a>
+      <div className="flex justify-center items-center space-x-2">
         {/* Compatibility Status */}
         {typeof modelInfo.isCompatible === 'boolean' && (
-          <div className="flex items-center space-x-1">
+          <div className="flex-shrink-0 ">
             {modelInfo.isCompatible ? (
-              <>
-                <CheckCircle className="w-4 h-4 text-green-500" />
-              </>
+              <CheckCircle className="w-4 h-4 text-green-500" />
             ) : (
-              <>
-                <XCircle className="w-4 h-4 text-red-500" />
-              </>
+              <XCircle className="w-4 h-4 text-red-500" />
             )}
           </div>
         )}
-      </div>
-
-      {/* Base Model Link */}
-      {modelInfo.baseId && modelInfo.baseId !== modelInfo.id && (
-        <div className="flex items-center space-x-2 ml-6 text-xs text-gray-600 truncate max-w-100">
+        <div className="flex-1 min-w-0">
           <a
-            href={`https://huggingface.co/${modelInfo.baseId}`}
+            href={`https://huggingface.co/${modelInfo.name}`}
             target="_blank"
             rel="noopener noreferrer"
-            className=" hover:underline"
-            title={`Base model: ${modelInfo.baseId}`}
+            className="text-sm font-medium text-gray-700 hover:underline block truncate"
+            title={modelInfo.name}
           >
-            <ExternalLink className="w-3 h-3 inline-block mr-1" />(
-            {modelInfo.baseId})
+            <ExternalLink className="w-3 h-3 inline-block mr-1" />
+            {modelInfo.name}
           </a>
+          {/* Base Model Link */}
+          {modelInfo.baseId && modelInfo.baseId !== modelInfo.id && (
+            <a
+              href={`https://huggingface.co/${modelInfo.baseId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-gray-500 hover:underline block truncate mt-1"
+              title={`Base model: ${modelInfo.baseId}`}
+            >
+              <ExternalLink className="w-3 h-3 inline-block mr-1" />(
+              {modelInfo.baseId})
+            </a>
+          )}
         </div>
-      )}
+      </div>
 
-      {/* Stats Row */}
-      <div className="flex items-center justify-self-end space-x-4 text-xs text-gray-600">
+      {/* Stats Grid */}
+      <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
         {modelInfo.likes > 0 && (
-          <div className="flex items-center space-x-1 cursor-default">
+          <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 cursor-default">
+          <div className="flex items-center space-x-1">
             <Download className="w-3 h-3 text-green-500" />
             <span>{formatNumber(modelInfo.downloads)}</span>
           </div>
@@ -163,8 +157,8 @@ 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 whitespace-break-spaces">
+        <div className="bg-red-50 border border-red-200 rounded-md px-2 py-2">
+          <p className="text-xs text-red-700 whitespace-break-spaces">
             {modelInfo.incompatibilityReason}
           </p>
         </div>

src/components/ModelLoader.tsx

@@ -46,8 +46,6 @@ const ModelLoader = () => {
     setHasBeenLoaded(false)
   }, [modelInfo, setSelectedQuantization, setHasBeenLoaded])
 
-
-
   useEffect(() => {
     if (!modelInfo) return
 
@@ -61,7 +59,6 @@ const ModelLoader = () => {
       setActiveWorker(newWorker)
     }
 
-
     const onMessageReceived = (e: MessageEvent<WorkerMessage>) => {
       const { status, output } = e.data
       if (status === 'ready') {
@@ -81,7 +78,7 @@ const ModelLoader = () => {
         setStatus('output')
         const result = e.data.output!
         setResults((prev: any[]) => [...prev, result])
-        
+
         // console.log(result)
       } else if (status === 'error') {
         setStatus('error')
@@ -130,9 +127,7 @@ const ModelLoader = () => {
         <div className="flex items-center space-x-2">
           {modelInfo.supportedQuantizations.length > 1 ? (
             <>
-              <span className="text-xs text-gray-600 font-medium">
-                Quantization:
-              </span>
+              <span className="text-xs text-gray-600 font-medium">Quant:</span>
 
               <div className="relative">
                 <select

src/components/ModelReadme.tsx

@@ -1,5 +1,6 @@
-import { FileText, ChevronDown } from 'lucide-react'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
+import { ExternalLink, FileText } from 'lucide-react'
+import { useState } from 'react'
+import Modal from './Modal'
 import MarkdownRenderer from './MarkdownRenderer'
 
 interface ModelReadmeProps {
@@ -8,31 +9,47 @@ interface ModelReadmeProps {
   modelName: string
 }
 
-const ModelReadme = ({ readme, pipeline, modelName}: ModelReadmeProps) => {
+const ModelReadme = ({ readme, pipeline, modelName }: ModelReadmeProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
 
-  return (
-    <div className="mt-2">
-      <Disclosure>
-        <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>
+  const title = (
+    <div className="flex items-center space-x-2">
+      <a
+        className="truncate hover:underline"
+        href={`https://huggingface.co/${modelName}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <ExternalLink className="w-3 h-3 inline-block mr-1" />
+
+        {modelName}
+      </a>
+      <span className=" text-gray-500">README.md</span>
     </div>
   )
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="flex items-center w-full px-3 py-2 text-sm text-gray-600 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+      >
+        <FileText className="w-4 h-4 mr-2 flex-shrink-0" />
+        <span className="truncate">View README.md</span>
+      </button>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title={title}
+        maxWidth="5xl"
+      >
+        <div className="text-sm max-w-none px-4">
+          <MarkdownRenderer content={readme} />
+        </div>
+      </Modal>
+    </>
+  )
 }
 
 export default ModelReadme

src/components/ModelSelector.tsx

@@ -19,6 +19,7 @@ import {
   Search,
   X
 } from 'lucide-react'
+import Tooltip from './Tooltip'
 
 type SortOption = 'likes' | 'downloads' | 'createdAt' | 'name'
 
@@ -110,7 +111,8 @@ function ModelSelector() {
           readme: modelInfoResponse.readme,
           hasChatTemplate: Boolean(
             modelInfoResponse.config?.tokenizer_config?.chat_template
-          )
+          ),
+          widgetData: modelInfoResponse.widgetData
         }
         setModelInfo(modelInfo)
         setIsCustomModel(isCustom)
@@ -280,9 +282,11 @@ function ModelSelector() {
           <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>
+                <Tooltip content={modelInfo?.id || 'Select a model'}>
+                  <span className="truncate font-medium block">
+                    {modelInfo?.id || 'Select a model'}
+                  </span>
+                </Tooltip>
               </div>
 
               <div className="flex items-center space-x-3">
@@ -449,45 +453,49 @@ function ModelSelector() {
                         key={model.id}
                         value={model}
                         className={({ active, selected }) =>
-                          `px-3 py-2 cursor-pointer border-b border-gray-100 last:border-b-0 ${
+                          `px-3 py-3 cursor-pointer border-b border-gray-100 last:border-b-0 ${
                             active ? 'bg-gray-50' : ''
                           } ${selected ? 'bg-blue-50' : ''}`
                         }
                       >
                         {({ selected }) => (
-                          <div className="relative flex items-center justify-between">
-                            <div className="flex items-center flex-1 w-5/12">
-                              <span className="text-sm font-medium truncate w-11/12 ">
-                                {model.id}
-                              </span>
-                            </div>
-                            {selected && (
-                              <Check className="mr-2 w-4 h-4 text-blue-600 ml-2 flex-shrink-0" />
-                            )}
-                            {/* 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]}
+                          <div className="relative flex items-start py-1">
+                            <div className="flex-1 min-w-0 pr-3">
+                              <div className="flex items-center justify-between">
+                                <Tooltip content={model.id}>
+                                  <span className="text-sm font-medium truncate block max-w-full">
+                                    {model.id}
                                   </span>
+                                </Tooltip>
+                                {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 mt-1">
+                                  {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>
                           </div>
                         )}
                       </ListboxOption>

src/components/Sidebar.tsx

@@ -0,0 +1,83 @@
+import { X } from 'lucide-react'
+import PipelineSelector from './PipelineSelector'
+import ModelSelector from './ModelSelector'
+import ModelInfo from './ModelInfo'
+import { useModel } from '../contexts/ModelContext'
+
+interface SidebarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
+  const { pipeline, setPipeline } = useModel()
+
+  return (
+    <>
+      {/* Overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`
+        fixed top-0 right-0 h-full w-full sm:w-[600px] lg:w-1/5 2xl:w-2/5 min-w-[400px] max-w-[500px] bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out
+        ${isOpen ? 'translate-x-0' : 'translate-x-full'}
+        lg:translate-x-0 lg:static lg:shadow-none lg:border-l lg:border-gray-200
+      `}
+      >
+        <div className="flex flex-col h-full">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-gray-200 lg:hidden">
+            <h2 className="text-lg font-semibold text-gray-900">
+              Configuration
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-6">
+            {/* Pipeline Selection */}
+            <div className="space-y-3 flex flex-row items-center space-x-4 text-center">
+              <h3 className="text-lg font-semibold text-gray-900 w-2/5 mt-2">
+                Choose a Pipeline
+              </h3>
+              <div className="w-3/5">
+                <PipelineSelector
+                  pipeline={pipeline}
+                  setPipeline={setPipeline}
+                />
+              </div>
+            </div>
+
+            {/* Model Selection */}
+            <div className="space-y-3">
+              <h3 className="text-lg font-semibold text-gray-900">
+                Select Model
+              </h3>
+              <ModelSelector />
+            </div>
+
+            {/* Model Info */}
+            <div className="flex items-center justify-center">
+              <ModelInfo />
+            </div>
+
+            <hr className="border-gray-200" />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Sidebar

src/components/TextClassification.tsx

@@ -1,7 +1,5 @@
-import { useState, useCallback } from 'react'
-import {
-  TextClassificationWorkerInput,
-} from '../types'
+import { useState, useCallback, useEffect } from 'react'
+import { TextClassificationWorkerInput } from '../types'
 import { useModel } from '../contexts/ModelContext'
 
 const PLACEHOLDER_TEXTS: string[] = [
@@ -19,7 +17,29 @@ const PLACEHOLDER_TEXTS: string[] = [
 
 function TextClassification() {
   const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join('\n'))
-  const { activeWorker, status, modelInfo, results, setResults, hasBeenLoaded, selectedQuantization} = useModel()
+  const [numberExamples, setNumberExamples] = useState(PLACEHOLDER_TEXTS.length)
+  const {
+    activeWorker,
+    status,
+    modelInfo,
+    results,
+    setResults,
+    hasBeenLoaded,
+    selectedQuantization
+  } = useModel()
+
+  useEffect(() => {
+    if (modelInfo?.widgetData) {
+      const examples = modelInfo.widgetData.map((e: any) => e.text)
+      if (examples.length > 0) {
+        setText(examples.join('\n'))
+      }
+    }
+  }, [modelInfo])
+
+  useEffect(() => {
+    setNumberExamples(text.split('\n').length)
+  }, [text])
 
   const classify = useCallback(() => {
     if (!modelInfo || !activeWorker) {
@@ -44,13 +64,17 @@ function TextClassification() {
 
   return (
     <div className="flex flex-col h-[60vh] max-h-[100vh] w-full p-4">
-      <h1 className="text-2xl font-bold mb-4 flex-shrink-0">Text Classification</h1>
+      <h1 className="text-2xl font-bold mb-4 flex-shrink-0">
+        Text Classification
+      </h1>
 
       <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
         {/* Input Section */}
         <div className="flex flex-col w-full lg:w-1/2 min-h-0">
-          <label className="text-lg font-medium mb-2 flex-shrink-0">Input Text:</label>
-          
+          <label className="text-lg font-medium mb-2 flex-shrink-0">
+            Input Text ({numberExamples} examples):
+          </label>
+
           <div className="flex flex-col flex-1 min-h-0">
             <textarea
               className="border border-gray-300 rounded p-3 flex-1 resize-none min-h-[200px]"
@@ -65,7 +89,8 @@ function TextClassification() {
                 disabled={busy}
                 onClick={classify}
               >
-                {hasBeenLoaded ? !busy
+                {hasBeenLoaded
+                  ? !busy
                     ? 'Classify Text'
                     : 'Processing...'
                   : 'Load model first'}

src/components/Tooltip.tsx

@@ -11,7 +11,7 @@ const Tooltip: React.FC<TooltipProps> = ({ children, content, className }) => {
     <div className="relative group flex items-center">
       {children}
       <div
-        className={`absolute bottom-full mb-2 w-max max-w-xs px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 z-10 ${className}`}
+        className={`absolute left-0 top-full mt-2 w-max max-w-sm px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 z-20 pointer-events-none ${className}`}
       >
         {content}
       </div>

src/types.ts

@@ -72,7 +72,7 @@ type q8 = (typeof q8Types)[number]
 type q4 = (typeof q4Types)[number]
 type fp16 = (typeof fp16Types)[number]
 type fp32 = (typeof fp32Types)[number]
- 
+
 export type QuantizationType = q8 | q4 | fp16 | fp32
 export const allQuantizationTypes = [
   ...q8Types,
@@ -95,6 +95,7 @@ export interface ModelInfo {
   baseId?: string
   readme?: string
   hasChatTemplate: boolean
+  widgetData?: any
 }
 
 export interface ModelInfoResponse {
@@ -130,6 +131,7 @@ export interface ModelInfoResponse {
   siblings?: {
     rfilename: string
   }[]
+  widgetData?: any
   modelId?: string
   isCompatible: boolean
   incompatibilityReason?: string

tailwind.config.js

@@ -3,6 +3,6 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {}
-  },
-  plugins: []
-};
+  }
+  // plugins: [require('@tailwindcss/typography')]
+}