Improve modal animations and UI interactions

src/App.tsx

@@ -88,7 +88,7 @@ function App() {
       {modelInfo?.readme && (
         <ModelReadme
           readme={modelInfo.readme}
-          modelName={modelInfo.name}
+          modelName={modelInfo.baseId ? modelInfo.baseId : modelInfo.name}
           isModalOpen={isModalOpen}
           setIsModalOpen={setIsModalOpen}
         />

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 text-sm"
+              className="rounded-md my-4 border  text-sm"
               {...props}
             >
               {String(children).replace(/\n$/, '')}

src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { X } from 'lucide-react'
 
 interface ModalProps {
@@ -26,6 +26,11 @@ const Modal: React.FC<ModalProps> = ({
   children,
   maxWidth = '4xl'
 }) => {
+  // State to control if the modal is in the DOM
+  const [isRendered, setIsRendered] = useState(isOpen)
+  // State to control the animation classes
+  const [isAnimating, setIsAnimating] = useState(false)
+
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -34,17 +39,24 @@ const Modal: React.FC<ModalProps> = ({
     }
 
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape)
+      setIsRendered(true)
       document.body.style.overflow = 'hidden'
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape)
-      document.body.style.overflow = 'unset'
+      document.addEventListener('keydown', handleEscape)
+      const animationTimeout = setTimeout(() => setIsAnimating(true), 20)
+      return () => clearTimeout(animationTimeout)
+    } else {
+      setIsAnimating(false)
+      const unmountTimeout = setTimeout(() => {
+        setIsRendered(false)
+        document.body.style.overflow = 'unset'
+        document.removeEventListener('keydown', handleEscape)
+      }, 300)
+      return () => clearTimeout(unmountTimeout)
     }
   }, [isOpen, onClose])
 
-  if (!isOpen) return null
+  // Unmount the component completely when not rendered
+  if (!isRendered) return null
 
   const maxWidthClasses = {
     sm: 'max-w-sm',
@@ -63,22 +75,30 @@ const Modal: React.FC<ModalProps> = ({
     <div className="fixed inset-0 z-50 overflow-y-auto">
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black opacity-50 transition-opacity"
+        className={`fixed inset-0 bg-black transition-opacity duration-300 ease-in-out ${
+          isAnimating ? 'opacity-50' : 'opacity-0'
+        }`}
         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]}`}
+          className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all duration-300 ease-in-out sm:my-8 sm:w-full ${
+            maxWidthClasses[maxWidth]
+          } ${
+            isAnimating
+              ? 'opacity-100 translate-y-0 sm:scale-100'
+              : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+          }`}
           onClick={(e) => e.stopPropagation()}
         >
           {/* Header */}
-          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
             <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-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              className="rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 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" />
@@ -86,7 +106,7 @@ const Modal: React.FC<ModalProps> = ({
           </div>
 
           {/* Content */}
-          <div className="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
+          <div className="max-h-[calc(100vh-200px)] overflow-y-auto px-6 py-4">
             {children}
           </div>
         </div>

src/components/ModelCode.tsx

@@ -3,7 +3,7 @@ import Modal from './Modal'
 import MarkdownRenderer from './MarkdownRenderer'
 import { useModel } from '@/contexts/ModelContext'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 interface ModelCodeProps {
   isCodeModalOpen: boolean
@@ -12,7 +12,23 @@ interface ModelCodeProps {
 
 const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
   const [isCopied, setIsCopied] = useState(false)
+  const [showAlert, setShowAlert] = useState(false)
+  const [animateAlert, setAnimateAlert] = useState(false)
+
   const { modelInfo, pipeline, selectedQuantization } = useModel()
+
+  useEffect(() => {
+    if (isCopied) {
+      setShowAlert(true)
+      const enterTimeout = setTimeout(() => setAnimateAlert(true), 20)
+      return () => clearTimeout(enterTimeout)
+    } else {
+      setAnimateAlert(false)
+      const exitTimeout = setTimeout(() => setShowAlert(false), 300) // Match duration-300
+      return () => clearTimeout(exitTimeout)
+    }
+  }, [isCopied])
+
   if (!modelInfo) return null
 
   const title = (
@@ -24,7 +40,6 @@ const ModelCode = ({ isCodeModalOpen, setIsCodeModalOpen }: ModelCodeProps) => {
         rel="noopener noreferrer"
       >
         <ExternalLink className="w-3 h-3 inline-block mr-1" />
-
         {modelInfo.name}
       </a>
     </div>
@@ -107,7 +122,6 @@ print(result)
     setIsCopied(true)
     setTimeout(() => setIsCopied(false), 2000)
   }
-
   const pipelineName = pipeline
     .split('-')
     .map((word, index) => word.charAt(0).toUpperCase() + word.slice(1))
@@ -121,6 +135,7 @@ print(result)
         title={title}
         maxWidth="5xl"
       >
+        {/* ... (all your modal content JSX is unchanged) */}
         <div className="text-sm max-w-none px-4">
           <div className="flex flex-row">
             <img src="/javascript-logo.svg" className="w-6 h-6 mr-1 rounded" />
@@ -133,7 +148,7 @@ print(result)
               target="_blank"
               rel="noopener noreferrer"
             >
-              Read about {pipeline} Pipeline Documentation for Javascript
+              Read about {pipeline} in Transformers.js documentation
             </a>
           </div>
           <div className="relative">
@@ -159,7 +174,7 @@ print(result)
               target="_blank"
               rel="noopener noreferrer"
             >
-              Read about {pipeline} Pipeline Documentation for Python
+              Read about {pipeline} in Transformers documentation
             </a>
             <div className="relative">
               <div className="absolute right-0 top-0 mt-2 mr-2">
@@ -176,8 +191,14 @@ print(result)
             </div>
           </div>
         </div>
-        {isCopied && (
-          <div className="absolute top-2 left-1/2 transform -translate-x-1/2">
+        {showAlert && (
+          <div
+            className={`absolute top-4 left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out ${
+              animateAlert
+                ? 'opacity-100 translate-y-0'
+                : 'opacity-0 -translate-y-4'
+            }`}
+          >
             <Alert>
               <CopyCheck className="w-4 h-4 opacity-60" />
               <AlertDescription>Copied!</AlertDescription>

src/components/ModelLoader.tsx

@@ -75,13 +75,13 @@ const ModelLoader = () => {
           output.file.startsWith('onnx')
         ) {
           setProgress(output.progress)
-          setShowAlert(true)
-          setAlertMessage(
-            <div className="flex items-center">
-              <Loader2 className="animate-spin h-4 w-4 mr-2" />
-              Loading Model
-            </div>
-          )
+          // setShowAlert(true)
+          // setAlertMessage(
+          //   <div className="flex items-center">
+          //     <Loader2 className="animate-spin h-4 w-4 mr-2" />
+          //     Loading Model
+          //   </div>
+          // )
         }
       } else if (status === 'error') {
         setStatus('error')

src/components/ModelReadme.tsx

@@ -27,7 +27,7 @@ const ModelReadme = ({
 
         {modelName}
       </a>
-      <span className=" text-gray-500">README.md</span>
+      <span className=" text-gray-300">README.md</span>
     </div>
   )
 

src/components/ModelSelector.tsx

@@ -114,7 +114,6 @@ function ModelSelector() {
           ),
           widgetData: modelInfoResponse.widgetData
         }
-        console.log(modelInfo)
         setModelInfo(modelInfo)
         setIsCustomModel(isCustom)
         setIsFetching(false)
@@ -127,12 +126,17 @@ function ModelSelector() {
     [setModelInfo, pipeline, setIsFetching]
   )
 
-  // Reset custom model state when pipeline changes
   useEffect(() => {
+    // Reset custom model state when pipeline changes
+
     setIsCustomModel(false)
     setShowCustomInput(false)
     setCustomModelName('')
     setCustomModelError('')
+
+    if (pipeline !== 'feature-extraction') {
+      setSortBy('downloads')
+    }
   }, [pipeline])
 
   // Update modelInfo to first model when models are loaded and no custom model is selected

src/components/PipelineSelector.tsx

@@ -11,8 +11,8 @@ export const supportedPipelines = [
   'feature-extraction',
   'image-classification',
   'text-generation',
-  'zero-shot-classification',
-  'text-classification'
+  'text-classification',
+  'zero-shot-classification'
   // 'summarization',
   // 'translation'
 ]

src/lib/huggingface.ts

@@ -132,7 +132,7 @@ const getModelsByPipeline = async (
 ): Promise<ModelInfoResponse[]> => {
   // Second search with search=onnx
   const response1 = await fetch(
-    `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx-community&sort=createdAt&limit=10`,
+    `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx-community&sort=createdAt&limit=15`,
     {
       method: 'GET'
     }
@@ -175,10 +175,10 @@ const getModelsByPipeline = async (
           !model.id.includes('ms-marco') &&
           !model.id.includes('MiniLM')
       )
-      .slice(0, 20)
+      .slice(0, 30)
   }
 
-  return uniqueModels.slice(0, 20)
+  return uniqueModels.slice(0, 30)
 }
 
 const getModelsByPipelineCustom = async (