Spaces:

Vokturz
/

transformers-js-playground

Running

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Transformers.js Playground</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json CHANGED Viewed

@@ -1,11 +1,13 @@
 {
   "name": "transformers-js-playground",
   "version": "0.1.0",
   "private": true,
   "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",
@@ -14,25 +16,27 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.8",
     "@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",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
-    "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -55,6 +59,8 @@
   "devDependencies": {
     "@types/lodash": "^4.17.20",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "tailwindcss": "3"
   }
 }

 {
+  "type": "module",
   "name": "transformers-js-playground",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@headlessui/react": "^2.2.4",
+    "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "build": "^0.1.4",
     "dotenv": "^17.0.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.525.0",
     "path-browserify": "^1.0.1",
+    "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
     "typescript": "^4.9.5",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
   "devDependencies": {
     "@types/lodash": "^4.17.20",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.7.0",
+    "tailwindcss": "^4.1.11",
+    "vite": "^7.0.6"
   }
 }

pnpm-lock.yaml CHANGED Viewed

The diff for this file is too large to render. See raw diff

postcss.config.mjs ADDED Viewed

	@@ -0,0 +1,5 @@

+export default {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+}

public/index.html DELETED Viewed

@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <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="" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Transformers.js Playground</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

src/App.css DELETED Viewed

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-.App-link {
-  color: #61dafb;
-}
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx CHANGED Viewed

@@ -48,7 +48,7 @@ function App() {
               <div className="absolute right-0 top-16 lg:hidden mb-4">
                 <button
                   onClick={() => setIsSidebarOpen(true)}
-                  className="items-center px-2 py-2 bg-white border border-gray-300 rounded-l-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50"
                 >
                   <Settings className="w-5 h-5" />
                 </button>

               <div className="absolute right-0 top-16 lg:hidden mb-4">
                 <button
                   onClick={() => setIsSidebarOpen(true)}
+                  className="flex items-center px-2 py-2 bg-white border border-gray-300 rounded-l-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50"
                 >
                   <Settings className="w-5 h-5" />
                 </button>

src/Header.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 function Header() {
   return (
-    <header className="bg-white shadow-sm border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-center h-16">
           <div className="flex items-center space-x-3">

 function Header() {
   return (
+    <header className="bg-white shadow-xs border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-center h-16">
           <div className="flex items-center space-x-3">

src/components/CodeExporter.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ const CodeExporter: React.FC<CodeExporterProps> = ({ code }) => {
   return (
     <div className="flex flex-col">
       <h2 className="text-lg font-medium">Code</h2>
-      <pre className="bg-gray-100 p-2 rounded">{code}</pre>
     </div>
   );
 };

   return (
     <div className="flex flex-col">
       <h2 className="text-lg font-medium">Code</h2>
+      <pre className="bg-gray-100 p-2 rounded-sm">{code}</pre>
     </div>
   );
 };

src/components/MarkdownRenderer.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ const MarkdownRenderer = ({ content }: MarkdownRendererProps) => {
             </SyntaxHighlighter>
           ) : (
             <code
-              className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono"
               {...props}
             >
               {children}

             </SyntaxHighlighter>
           ) : (
             <code
+              className="bg-gray-100 px-1 py-0.5 rounded-sm text-sm font-mono"
               {...props}
             >
               {children}

src/components/Modal.tsx CHANGED Viewed

@@ -78,7 +78,7 @@ const Modal: React.FC<ModalProps> = ({
             <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" />

             <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"
             >
               <span className="sr-only">Close</span>
               <X className="h-5 w-5" />

src/components/ModelInfo.tsx CHANGED Viewed

@@ -28,37 +28,37 @@ const ModelInfo = () => {
   const { models, modelInfo, selectedQuantization, isFetching } = useModel()
   const ModelInfoSkeleton = () => (
-    <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 flex-1"></div>
         <div className="w-4 h-4 bg-gray-300 rounded-full"></div>
       </div>
       <div className="flex items-center space-x-2 ml-6">
-        <div className="h-3 bg-gray-200 rounded w-32"></div>
       </div>
       <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>
         </div>
         <div className="flex items-center space-x-1">
           <Download className="w-3 h-3 text-green-300" />
-          <div className="h-3 bg-gray-200 rounded w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
           <Cpu className="w-3 h-3 text-purple-300" />
-          <div className="h-3 bg-gray-200 rounded w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
           <DatabaseIcon className="w-3 h-3 text-purple-300" />
-          <div className="h-3 bg-gray-200 rounded w-12"></div>
         </div>
       </div>
       <hr className="border-gray-200" />
-      <div className="h-8 bg-gray-200 rounded w-full"></div>
     </div>
   )
@@ -67,12 +67,12 @@ const ModelInfo = () => {
   }
   return (
-    <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 justify-center items-center space-x-2">
         {/* Compatibility Status */}
         {typeof modelInfo.isCompatible === 'boolean' && (
-          <div className="flex-shrink-0 ">
             {modelInfo.isCompatible ? (
               <CheckCircle className="w-4 h-4 text-green-500" />
             ) : (

   const { models, modelInfo, selectedQuantization, isFetching } = useModel()
   const ModelInfoSkeleton = () => (
+    <div className="bg-linear-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-sm flex-1"></div>
         <div className="w-4 h-4 bg-gray-300 rounded-full"></div>
       </div>
       <div className="flex items-center space-x-2 ml-6">
+        <div className="h-3 bg-gray-200 rounded-sm w-32"></div>
       </div>
       <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-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
           <Download className="w-3 h-3 text-green-300" />
+          <div className="h-3 bg-gray-200 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
           <Cpu className="w-3 h-3 text-purple-300" />
+          <div className="h-3 bg-gray-200 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
           <DatabaseIcon className="w-3 h-3 text-purple-300" />
+          <div className="h-3 bg-gray-200 rounded-sm w-12"></div>
         </div>
       </div>
       <hr className="border-gray-200" />
+      <div className="h-8 bg-gray-200 rounded-sm w-full"></div>
     </div>
   )
   }
   return (
+    <div className="relative bg-linear-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 justify-center items-center space-x-2">
         {/* Compatibility Status */}
         {typeof modelInfo.isCompatible === 'boolean' && (
+          <div className="shrink-0 ">
             {modelInfo.isCompatible ? (
               <CheckCircle className="w-4 h-4 text-green-500" />
             ) : (

src/components/ModelLoader.tsx CHANGED Viewed

@@ -127,7 +127,7 @@ const ModelLoader = () => {
                   onChange={(e) =>
                     setSelectedQuantization(e.target.value as QuantizationType)
                   }
-                  className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 pr-8 text-xs text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 >
                   {modelInfo.supportedQuantizations.map((quant) => (
                     <option key={quant} value={quant}>
@@ -148,7 +148,7 @@ const ModelLoader = () => {
         {selectedQuantization && (
           <div className="flex justify-center">
             <button
-              className="w-32 py-2 px-4 bg-green-500 hover:bg-green-600 rounded text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm inline-flex items-center text-center justify-center space-x-2"
               disabled={hasBeenLoaded || status === 'loading'}
               onClick={loadModel}
             >

                   onChange={(e) =>
                     setSelectedQuantization(e.target.value as QuantizationType)
                   }
+                  className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 pr-8 text-xs text-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 >
                   {modelInfo.supportedQuantizations.map((quant) => (
                     <option key={quant} value={quant}>
         {selectedQuantization && (
           <div className="flex justify-center">
             <button
+              className="w-32 py-2 px-4 bg-green-500 hover:bg-green-600 rounded-sm text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm inline-flex items-center text-center justify-center space-x-2"
               disabled={hasBeenLoaded || status === 'loading'}
               onClick={loadModel}
             >

src/components/ModelSelector.tsx CHANGED Viewed

@@ -252,21 +252,21 @@ function ModelSelector() {
       <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>
@@ -280,7 +280,7 @@ function ModelSelector() {
         onChange={(model) => handleModelSelect(model.id)}
       >
         <div className="relative">
-          <ListboxButton className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white text-left flex items-center justify-between">
             <div className="flex items-center justify-between w-full">
               <div className="flex flex-col flex-1 min-w-0">
                 <Tooltip content={modelInfo?.id || 'Select a model'}>
@@ -308,7 +308,7 @@ function ModelSelector() {
                       )}
                     </div>
                   )}
-                <ChevronDown className="w-4 h-4 ui-open:rotate-180 transition-transform flex-shrink-0" />
               </div>
             </div>
           </ListboxButton>
@@ -321,7 +321,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-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">
@@ -333,13 +333,13 @@ function ModelSelector() {
                         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" />
@@ -373,7 +373,7 @@ function ModelSelector() {
                     {/* 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"
                     >
                       <Plus className="w-4 h-4" />
                       <span>Load Custom Model</span>
@@ -469,7 +469,7 @@ function ModelSelector() {
                                   </span>
                                 </Tooltip>
                                 {selected && (
-                                  <Check className="w-4 h-4 text-blue-600 ml-2 flex-shrink-0" />
                                 )}
                               </div>
                               {/* Stats Display */}

       <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-sm 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-sm 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-sm w-8"></div>
               </div>
             </div>
+            <div className="w-4 h-4 bg-gray-200 rounded-sm"></div>
           </div>
         </div>
       </div>
         onChange={(model) => handleModelSelect(model.id)}
       >
         <div className="relative">
+          <ListboxButton className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden 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">
                 <Tooltip content={modelInfo?.id || 'Select a model'}>
                       )}
                     </div>
                   )}
+                <ChevronDown className="w-4 h-4 ui-open:rotate-180 transition-transform shrink-0" />
               </div>
             </div>
           </ListboxButton>
             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-96 overflow-hidden focus:outline-hidden">
               {/* Custom Model Input */}
               {showCustomInput ? (
                 <div className="px-3 py-3 border-b border-gray-200 bg-gray-50 sticky top-0 z-10">
                         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-sm focus:outline-hidden 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-sm 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" />
                     {/* 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-sm transition-colors"
                     >
                       <Plus className="w-4 h-4" />
                       <span>Load Custom Model</span>
                                   </span>
                                 </Tooltip>
                                 {selected && (
+                                  <Check className="w-4 h-4 text-blue-600 ml-2 shrink-0" />
                                 )}
                               </div>
                               {/* Stats Display */}

src/components/PipelineSelector.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
     <div className="relative">
       <Listbox value={selectedPipeline} onChange={setPipeline}>
         <div className="relative">
-          <ListboxButton className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-sm xl:text-base border border-gray-300">
             <span className="block truncate font-medium">
               {formatPipelineName(selectedPipeline)}
             </span>
@@ -60,7 +60,7 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
-            <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm xl:text-base ring-1 ring-black ring-opacity-5 focus:outline-none">
               {supportedPipelines.map((p) => (
                 <ListboxOption
                   key={p}

     <div className="relative">
       <Listbox value={selectedPipeline} onChange={setPipeline}>
         <div className="relative">
+          <ListboxButton className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left focus:outline-hidden focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-sm xl:text-base border border-gray-300">
             <span className="block truncate font-medium">
               {formatPipelineName(selectedPipeline)}
             </span>
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
+            <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm xl:text-base ring-1 ring-black ring-opacity-5 focus:outline-hidden">
               {supportedPipelines.map((p) => (
                 <ListboxOption
                   key={p}

src/components/Sidebar.tsx CHANGED Viewed

@@ -81,7 +81,7 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
                   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>
               </div>

                   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 shrink-0" />
                   <span className="truncate">View README.md</span>
                 </button>
               </div>

src/components/Tooltip.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ const Tooltip: React.FC<TooltipProps> = ({ children, content, className }) => {
     <div className="relative group flex items-center">
       {children}
       <div
-        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>

     <div className="relative group flex items-center">
       {children}
       <div
+        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-xs opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 z-20 pointer-events-none ${className}`}
       >
         {content}
       </div>

src/components/pipelines/FeatureExtraction.tsx CHANGED Viewed

@@ -273,7 +273,7 @@ function FeatureExtraction() {
                 onChange={(e) => setNewExampleText(e.target.value)}
                 onKeyPress={handleKeyPress}
                 placeholder="Enter text to get embeddings... (Press Enter to add)"
-                className="flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                 rows={2}
                 disabled={!hasBeenLoaded || isExtracting}
               />

                 onChange={(e) => setNewExampleText(e.target.value)}
                 onKeyPress={handleKeyPress}
                 placeholder="Enter text to get embeddings... (Press Enter to add)"
+                className="flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                 rows={2}
                 disabled={!hasBeenLoaded || isExtracting}
               />

src/components/pipelines/FeatureExtractionConfig.tsx CHANGED Viewed

@@ -23,7 +23,7 @@ const FeatureExtractionConfig = () => {
                 pooling: e.target.value as 'mean' | 'cls' | 'max'
               }))
             }
-            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
           >
             <option value="mean">Mean Pooling</option>
             <option value="cls">CLS Token</option>
@@ -45,7 +45,7 @@ const FeatureExtractionConfig = () => {
                   normalize: e.target.checked
                 }))
               }
-              className="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
             />
             <span className="text-sm font-medium text-gray-700">
               Normalize Embeddings

                 pooling: e.target.value as 'mean' | 'cls' | 'max'
               }))
             }
+            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
           >
             <option value="mean">Mean Pooling</option>
             <option value="cls">CLS Token</option>
                   normalize: e.target.checked
                 }))
               }
+              className="rounded border-gray-300 text-blue-600 shadow-xs focus:border-blue-300 focus:ring-3 focus:ring-blue-200 focus:ring-opacity-50"
             />
             <span className="text-sm font-medium text-gray-700">
               Normalize Embeddings

src/components/pipelines/ImageClassification.tsx CHANGED Viewed

@@ -305,7 +305,7 @@ function ImageClassification() {
                     >
                       <div className="flex gap-3">
                         {showPreviews && (
-                          <div className="flex-shrink-0">
                             <img
                               src={example.url}
                               alt={example.name}

                     >
                       <div className="flex gap-3">
                         {showPreviews && (
+                          <div className="shrink-0">
                             <img
                               src={example.url}
                               alt={example.name}

src/components/pipelines/TextClassification.tsx CHANGED Viewed

@@ -81,28 +81,28 @@ function TextClassification() {
   return (
     <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
-      <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 ({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]"
               value={text}
               onChange={(e) => setText(e.target.value)}
               placeholder="Enter text to classify (one per line)..."
             />
-            <div className="flex gap-2 mt-4 flex-shrink-0">
               <button
-                className="flex-1 py-2 px-4 bg-blue-500 hover:bg-blue-600 rounded text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 disabled={busy}
                 onClick={classify}
               >
@@ -113,7 +113,7 @@ function TextClassification() {
                   : 'Load model first'}
               </button>
               <button
-                className="py-2 px-4 bg-gray-500 hover:bg-gray-600 rounded text-white font-medium transition-colors"
                 onClick={handleClear}
               >
                 Clear Results
@@ -124,11 +124,11 @@ function TextClassification() {
         {/* Results 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">
             Classification Results ({results.length}):
           </label>
-          <div className="border border-gray-300 rounded p-3 flex-1 overflow-y-auto min-h-[200px]">
             {results.length === 0 ? (
               <div className="text-gray-500 text-center py-8">
                 No results yet. Click "Classify Text" to analyze your input.
@@ -136,7 +136,7 @@ function TextClassification() {
             ) : (
               <div className="space-y-3">
                 {results.map((result, index) => (
-                  <div key={index} className="p-3 rounded border-2">
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
                         {result.labels[0]}

   return (
     <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
+      <h1 className="text-2xl font-bold mb-4 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 shrink-0">
             Input Text ({numberExamples} examples):
           </label>
           <div className="flex flex-col flex-1 min-h-0">
             <textarea
+              className="border border-gray-300 rounded-sm p-3 flex-1 resize-none min-h-[200px]"
               value={text}
               onChange={(e) => setText(e.target.value)}
               placeholder="Enter text to classify (one per line)..."
             />
+            <div className="flex gap-2 mt-4 shrink-0">
               <button
+                className="flex-1 py-2 px-4 bg-blue-500 hover:bg-blue-600 rounded-sm text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 disabled={busy}
                 onClick={classify}
               >
                   : 'Load model first'}
               </button>
               <button
+                className="py-2 px-4 bg-gray-500 hover:bg-gray-600 rounded-sm text-white font-medium transition-colors"
                 onClick={handleClear}
               >
                 Clear Results
         {/* Results Section */}
         <div className="flex flex-col w-full lg:w-1/2 min-h-0">
+          <label className="text-lg font-medium mb-2 shrink-0">
             Classification Results ({results.length}):
           </label>
+          <div className="border border-gray-300 rounded-sm p-3 flex-1 overflow-y-auto min-h-[200px]">
             {results.length === 0 ? (
               <div className="text-gray-500 text-center py-8">
                 No results yet. Click "Classify Text" to analyze your input.
             ) : (
               <div className="space-y-3">
                 {results.map((result, index) => (
+                  <div key={index} className="p-3 rounded-sm border-2">
                     <div className="flex justify-between items-start mb-2">
                       <span className="font-semibold text-sm">
                         {result.labels[0]}

src/components/pipelines/TextGeneration.tsx CHANGED Viewed

@@ -227,7 +227,7 @@ function TextGeneration() {
               onChange={(e) => setCurrentMessage(e.target.value)}
               onKeyPress={handleKeyPress}
               placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)"
-              className="flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
               rows={2}
               disabled={!hasBeenLoaded || isGenerating}
             />
@@ -255,7 +255,7 @@ function TextGeneration() {
               onChange={(e) => setPrompt(e.target.value)}
               onKeyPress={handleKeyPress}
               placeholder="Enter your text prompt here... (Press Enter to generate, Shift+Enter for new line)"
-              className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
               rows={4}
               disabled={!hasBeenLoaded || isGenerating}
             />
@@ -286,7 +286,7 @@ function TextGeneration() {
               </label>
             </div>
             {generatedText ? (
-              <div className="whitespace-pre-wrap text-gray-800 bg-gray-50 p-3 rounded border">
                 {generatedText}
               </div>
             ) : (

               onChange={(e) => setCurrentMessage(e.target.value)}
               onKeyPress={handleKeyPress}
               placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)"
+              className="flex-1 p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
               rows={2}
               disabled={!hasBeenLoaded || isGenerating}
             />
               onChange={(e) => setPrompt(e.target.value)}
               onKeyPress={handleKeyPress}
               placeholder="Enter your text prompt here... (Press Enter to generate, Shift+Enter for new line)"
+              className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
               rows={4}
               disabled={!hasBeenLoaded || isGenerating}
             />
               </label>
             </div>
             {generatedText ? (
+              <div className="whitespace-pre-wrap text-gray-800 bg-gray-50 p-3 rounded-sm border">
                 {generatedText}
               </div>
             ) : (

src/components/pipelines/TextGenerationConfig.tsx CHANGED Viewed

@@ -135,7 +135,7 @@ function TextGenerationConfig() {
             <textarea
               value={messages.find((m) => m.role === 'system')?.content || ''}
               onChange={(e) => updateSystemMessage(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
               rows={4}
               placeholder="e.g., You are a helpful assistant."
             />

             <textarea
               value={messages.find((m) => m.role === 'system')?.content || ''}
               onChange={(e) => updateSystemMessage(e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
               rows={4}
               placeholder="e.g., You are a helpful assistant."
             />

src/components/pipelines/ZeroShotClassification.tsx CHANGED Viewed

@@ -95,7 +95,7 @@ function ZeroShotClassification() {
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Enter text items to classify, one per line..."
-          className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           rows={12}
           disabled={!hasBeenLoaded || busy}
         />
@@ -147,7 +147,7 @@ function ZeroShotClassification() {
                 {section.items.map((item, itemIndex) => (
                   <div
                     key={itemIndex}
-                    className="p-2 bg-blue-50 border border-blue-200 rounded text-sm"
                   >
                     {item}
                   </div>

           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Enter text items to classify, one per line..."
+          className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           rows={12}
           disabled={!hasBeenLoaded || busy}
         />
                 {section.items.map((item, itemIndex) => (
                   <div
                     key={itemIndex}
+                    className="p-2 bg-blue-50 border border-blue-200 rounded-sm text-sm"
                   >
                     {item}
                   </div>

src/components/pipelines/ZeroShotClassificationConfig.tsx CHANGED Viewed

@@ -57,9 +57,9 @@ const ZeroShotClassificationConfig = () => {
                   value={section.title}
                   onChange={(e) => updateSectionTitle(index, e.target.value)}
                   disabled={section.title === 'Other'}
-                  className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                 />
-                <span className="text-xs text-gray-500 min-w-[2rem]">
                   ({section.items.length})
                 </span>
               </div>
@@ -69,7 +69,7 @@ const ZeroShotClassificationConfig = () => {
           <div className="flex gap-2 mt-3">
             <button
               onClick={addCategory}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded transition-colors"
               title="Add Category"
             >
               <Plus className="w-3 h-3" />
@@ -78,7 +78,7 @@ const ZeroShotClassificationConfig = () => {
             <button
               onClick={removeCategory}
               disabled={sections.length <= 1}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-red-500 hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded transition-colors"
               title="Remove Category"
             >
               <Minus className="w-3 h-3" />
@@ -86,7 +86,7 @@ const ZeroShotClassificationConfig = () => {
             </button>
             <button
               onClick={clearResults}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded transition-colors"
               title="Clear Results"
             >
               <Trash2 className="w-3 h-3" />

                   value={section.title}
                   onChange={(e) => updateSectionTitle(index, e.target.value)}
                   disabled={section.title === 'Other'}
+                  className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-sm focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                 />
+                <span className="text-xs text-gray-500 min-w-8">
                   ({section.items.length})
                 </span>
               </div>
           <div className="flex gap-2 mt-3">
             <button
               onClick={addCategory}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded-sm transition-colors"
               title="Add Category"
             >
               <Plus className="w-3 h-3" />
             <button
               onClick={removeCategory}
               disabled={sections.length <= 1}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-red-500 hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-sm transition-colors"
               title="Remove Category"
             >
               <Minus className="w-3 h-3" />
             </button>
             <button
               onClick={clearResults}
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded-sm transition-colors"
               title="Clear Results"
             >
               <Trash2 className="w-3 h-3" />

src/index.css CHANGED Viewed

@@ -1,6 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 body {
   margin: 0;

+@import 'tailwindcss';
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 body {
   margin: 0;

src/lib/workerManager.ts CHANGED Viewed

@@ -6,19 +6,19 @@ export const getWorker = (pipeline: string) => {
     switch (pipeline) {
       case 'text-classification':
-        workerUrl = `${process.env.PUBLIC_URL}/workers/text-classification.js`
         break
       case 'zero-shot-classification':
-        workerUrl = `${process.env.PUBLIC_URL}/workers/zero-shot-classification.js`
         break
       case 'text-generation':
-        workerUrl = `${process.env.PUBLIC_URL}/workers/text-generation.js`
         break
       case 'feature-extraction':
-        workerUrl = `${process.env.PUBLIC_URL}/workers/feature-extraction.js`
         break
       case 'image-classification':
-        workerUrl = `${process.env.PUBLIC_URL}/workers/image-classification.js`
         break
       default:
         return null

     switch (pipeline) {
       case 'text-classification':
+        workerUrl = `/workers/text-classification.js`
         break
       case 'zero-shot-classification':
+        workerUrl = `/workers/zero-shot-classification.js`
         break
       case 'text-generation':
+        workerUrl = `/workers/text-generation.js`
         break
       case 'feature-extraction':
+        workerUrl = `/workers/feature-extraction.js`
         break
       case 'image-classification':
+        workerUrl = `/workers/image-classification.js`
         break
       default:
         return null

tailwind.config.js DELETED Viewed

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {}
-  }
-  // plugins: [require('@tailwindcss/typography')]
-}

tsconfig.json CHANGED Viewed

@@ -1,20 +1,21 @@
 {
   "compilerOptions": {
-    "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
-    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
   },
-  "include": ["src", "public/workers"]
 }

 {
   "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"]
   },
+  "include": ["src"]
 }

vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

vite.config.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react(), tailwindcss()]
+})