enhance UI

README.md

@@ -1,5 +1,5 @@
 ---
-title: Transformers Js Playground
+title: Transformers.js Playground
 emoji: 🐠
 colorFrom: indigo
 colorTo: red

public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.tsx

@@ -11,13 +11,20 @@ import ModelReadme from './components/ModelReadme'
 import TextGeneration from './components/TextGeneration'
 
 function App() {
-  const { pipeline, setPipeline, setModels, setModelInfo, modelInfo, setIsFetching} = useModel()
+  const {
+    pipeline,
+    setPipeline,
+    setModels,
+    setModelInfo,
+    modelInfo,
+    setIsFetching
+  } = useModel()
 
   useEffect(() => {
     setModelInfo(null)
     setModels([])
     setIsFetching(true)
-    
+
     const fetchModels = async () => {
       try {
         const fetchedModels = await getModelsByPipeline(pipeline)
@@ -37,8 +44,8 @@ function App() {
       <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-start justify-between max-w-6xl mx-auto">
-              <div className="space-y-2 flex-1">
+            <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

src/components/MarkdownRenderer.tsx

@@ -1,7 +1,7 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 interface MarkdownRendererProps {
   content: string
@@ -15,13 +15,7 @@ const MarkdownRenderer = ({ content }: MarkdownRendererProps) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
-      disallowedElements={[
-        'script',
-        'style',
-        'iframe',
-        'object',
-        'embed',
-      ]}
+      disallowedElements={['script', 'style', 'iframe', 'object', 'embed']}
       unwrapDisallowed={true}
       components={{
         code: ({ className, children, ...props }: any) => {
@@ -29,23 +23,26 @@ const MarkdownRenderer = ({ content }: MarkdownRendererProps) => {
           const isInline = !match
           return !isInline ? (
             <SyntaxHighlighter
-              style={tomorrow}
+              style={oneLight}
               language={match[1]}
               PreTag="div"
-              className="rounded-md my-4"
+              className="rounded-md my-4 border border-r-2"
               {...props}
             >
               {String(children).replace(/\n$/, '')}
             </SyntaxHighlighter>
           ) : (
-            <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono" {...props}>
+            <code
+              className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono"
+              {...props}
+            >
               {children}
             </code>
           )
         },
         a: ({ children, href }) => (
-          <a 
-            href={href} 
+          <a
+            href={href}
             className="text-blue-600 hover:text-blue-800 underline"
             target="_blank"
             rel="noopener noreferrer"

src/components/ModelInfo.tsx

@@ -11,6 +11,7 @@ import {
 import { getModelSize } from '../lib/huggingface'
 import { useModel } from '../contexts/ModelContext'
 import ModelLoader from './ModelLoader'
+import Tooltip from './Tooltip'
 
 const ModelInfo = () => {
   const formatNumber = (num: number) => {
@@ -24,12 +25,7 @@ const ModelInfo = () => {
     return num.toString()
   }
 
-  const {
-    models,
-    modelInfo,
-    selectedQuantization,
-    isFetching
-  } = useModel()
+  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]">
@@ -70,7 +66,6 @@ const ModelInfo = () => {
     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 */}
@@ -103,7 +98,7 @@ const ModelInfo = () => {
       </div>
 
       {/* Base Model Link */}
-      {modelInfo.baseId && (
+      {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">
           <a
             href={`https://huggingface.co/${modelInfo.baseId}`}
@@ -112,8 +107,8 @@ const ModelInfo = () => {
             className=" hover:underline"
             title={`Base model: ${modelInfo.baseId}`}
           >
-            <ExternalLink className="w-3 h-3 inline-block mr-1" />
-            ({modelInfo.baseId})
+            <ExternalLink className="w-3 h-3 inline-block mr-1" />(
+            {modelInfo.baseId})
           </a>
         </div>
       )}
@@ -121,41 +116,47 @@ const ModelInfo = () => {
       {/* 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">
+          <div className="flex items-center space-x-1 cursor-default">
             <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">
+          <div className="flex items-center space-x-1 cursor-default">
             <Download className="w-3 h-3 text-green-500" />
             <span>{formatNumber(modelInfo.downloads)}</span>
           </div>
         )}
 
-        <div className="flex items-center space-x-1">
-          <Cpu className="w-3 h-3 text-purple-500" />
-          {modelInfo.parameters ? (
-            <span>{formatNumber(modelInfo.parameters)}</span>
-          ) : (
-            <span>?</span>
-          )}
-        </div>
+        <Tooltip content="Model parameters according to Hugging Face API">
+          <div className="flex items-center space-x-1 cursor-default">
+            <Cpu className="w-3 h-3 text-purple-500" />
+            {modelInfo.parameters ? (
+              <span>{formatNumber(modelInfo.parameters)}</span>
+            ) : (
+              <span>?</span>
+            )}
+          </div>
+        </Tooltip>
 
-        <div className="flex items-center space-x-1">
-          <DatabaseIcon className="w-3 h-3 text-purple-500" />
-          {modelInfo.parameters ? (
-            <span>
-              {`~${getModelSize(
-                modelInfo.parameters,
-                selectedQuantization
-              ).toFixed(1)}MB`}
-            </span>
-          ) : (
-            <span>?</span>
-          )}
-        </div>
+        <Tooltip
+          content={`Estimated size with ${selectedQuantization} quantization`}
+        >
+          <div className="flex items-center space-x-1 cursor-default">
+            <DatabaseIcon className="w-3 h-3 text-purple-500" />
+            {modelInfo.parameters ? (
+              <span>
+                {`~${getModelSize(
+                  modelInfo.parameters,
+                  selectedQuantization
+                ).toFixed(1)}MB`}
+              </span>
+            ) : (
+              <span>?</span>
+            )}
+          </div>
+        </Tooltip>
       </div>
 
       <ModelLoader />

src/components/ModelSelector.tsx

@@ -108,7 +108,9 @@ function ModelSelector() {
           supportedQuantizations: modelInfoResponse.supportedQuantizations,
           baseId: modelInfoResponse.baseId,
           readme: modelInfoResponse.readme,
-          hasChatTemplate: Boolean(modelInfoResponse.config?.tokenizer_config?.chat_template)
+          hasChatTemplate: Boolean(
+            modelInfoResponse.config?.tokenizer_config?.chat_template
+          )
         }
         setModelInfo(modelInfo)
         setIsCustomModel(isCustom)
@@ -314,7 +316,7 @@ function ModelSelector() {
             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">
+            <ListboxOptions className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-96 overflow-hidden focus:outline-none">
               {/* Custom Model Input */}
               {showCustomInput ? (
                 <div className="px-3 py-3 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
@@ -362,8 +364,8 @@ function ModelSelector() {
                 </div>
               ) : (
                 <>
-                  {/* Load Custom Model Button */}
-                  <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
+                  <div className="sticky top-0 z-10 bg-gray-50 border-b border-gray-200 p-3 space-y-3">
+                    {/* Load Custom Model Button */}
                     <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"
@@ -371,10 +373,8 @@ function ModelSelector() {
                       <Plus className="w-4 h-4" />
                       <span>Load Custom Model</span>
                     </button>
-                  </div>
 
-                  {/* Sort Controls */}
-                  <div className="px-3 py-2 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
+                    {/* Sort Controls */}
                     <div className="flex items-center space-x-2 text-xs">
                       <span className="text-gray-600 font-medium">
                         Sort by:
@@ -455,16 +455,15 @@ function ModelSelector() {
                         }
                       >
                         {({ selected }) => (
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center flex-1 mr-2">
-                              <span className="text-sm font-medium truncate">
+                          <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>
-                              {selected && (
-                                <Check className="w-4 h-4 text-blue-600 ml-2 flex-shrink-0" />
-                              )}
                             </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">

src/components/Tooltip.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface TooltipProps {
+  children: React.ReactNode
+  content: string | React.ReactNode
+  className?: string
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ children, content, className }) => {
+  return (
+    <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}`}
+      >
+        {content}
+      </div>
+    </div>
+  )
+}
+
+export default Tooltip

src/components/ZeroShotClassification.tsx

@@ -1,9 +1,5 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
-import {
-  Section,
-  WorkerMessage,
-  ZeroShotWorkerInput,
-} from '../types'
+import { useState, useEffect, useCallback } from 'react'
+import { Section, WorkerMessage, ZeroShotWorkerInput } from '../types'
 import { useModel } from '../contexts/ModelContext'
 
 const PLACEHOLDER_REVIEWS: string[] = [
@@ -48,7 +44,13 @@ function ZeroShotClassification() {
     PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] }))
   )
 
-  const { activeWorker, status, modelInfo, hasBeenLoaded, selectedQuantization } = useModel()
+  const {
+    activeWorker,
+    status,
+    modelInfo,
+    hasBeenLoaded,
+    selectedQuantization
+  } = useModel()
 
   const classify = useCallback(() => {
     if (!modelInfo || !activeWorker) {
@@ -157,7 +159,8 @@ function ZeroShotClassification() {
           disabled={busy}
           onClick={classify}
         >
-          {hasBeenLoaded ? !busy
+          {hasBeenLoaded
+            ? !busy
               ? 'Categorize'
               : 'Processing...'
             : 'Load model first'}

src/lib/huggingface.ts

@@ -1,5 +1,9 @@
 import { supportedPipelines } from '../components/PipelineSelector'
-import { allQuantizationTypes, ModelInfoResponse, QuantizationType } from '../types'
+import {
+  allQuantizationTypes,
+  ModelInfoResponse,
+  QuantizationType
+} from '../types'
 
 const getModelInfo = async (
   modelName: string,
@@ -16,7 +20,7 @@ const getModelInfo = async (
   const response = await fetch(
     `https://huggingface.co/api/models/${modelName}`,
     {
-      method: 'GET',
+      method: 'GET'
       // headers: {
       //   Authorization: `Bearer ${token}`
       // }
@@ -102,7 +106,7 @@ const getModelInfo = async (
     const baseModelResponse = await fetch(
       `https://huggingface.co/api/models/${baseModel}`,
       {
-        method: 'GET',
+        method: 'GET'
         // headers: {
         //   Authorization: `Bearer ${token}`
         // }
@@ -152,7 +156,7 @@ const getModelsByPipeline = async (
   const response1 = await fetch(
     `https://huggingface.co/api/models?filter=${pipelineTag}&filter=onnx&sort=downloads&limit=50`,
     {
-      method: 'GET',
+      method: 'GET'
       // headers: {
       //   Authorization: `Bearer ${token}`
       // }
@@ -169,7 +173,7 @@ const getModelsByPipeline = async (
   const response2 = await fetch(
     `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx&sort=downloads&limit=50`,
     {
-      method: 'GET',
+      method: 'GET'
       // headers: {
       //   Authorization: `Bearer ${token}`
       // }
@@ -219,7 +223,7 @@ const getModelsByPipelineCustom = async (
   const response = await fetch(
     `https://huggingface.co/api/models?filter=${pipelineTag}&search=${searchString}&sort=downloads&limit=50`,
     {
-      method: 'GET',
+      method: 'GET'
       // headers: {
       //   Authorization: `Bearer ${token}`
       // }