Update UI layout and improve interface responsiveness

src/App.tsx

@@ -13,6 +13,7 @@ import { PipelineLayout } from './components/PipelineLayout'
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
   const { pipeline, setModels, setModelInfo, modelInfo, setIsFetching } =
     useModel()
 
@@ -34,38 +35,28 @@ function App() {
   }, [setModels, setModelInfo, setIsFetching, pipeline])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Header />
       <PipelineLayout>
-        <div className="flex h-[calc(100vh-4rem)]">
+        <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">
+            <div className="h-full px-4 sm:px-6 lg:px-8 py-2 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}
-                    />
-                  )}
-                </div>
+              <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>
               {/* Pipeline Component */}
               <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
+                <p className="text-xs text-gray-400 pl-4 pt-2 mb-[-20px]">
+                  {modelInfo?.name}
+                </p>
                 {pipeline === 'zero-shot-classification' && (
                   <ZeroShotClassification />
                 )}
@@ -79,9 +70,18 @@ function App() {
           <Sidebar
             isOpen={isSidebarOpen}
             onClose={() => setIsSidebarOpen(false)}
+            setIsModalOpen={setIsModalOpen}
           />
         </div>
       </PipelineLayout>
+      {modelInfo?.readme && (
+        <ModelReadme
+          readme={modelInfo.readme}
+          modelName={modelInfo.name}
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+        />
+      )}
     </div>
   )
 }

src/Header.tsx

@@ -23,7 +23,7 @@ function Header() {
         </div>
       </div>
     </header>
-  );
+  )
 }
 
-export default Header;
+export default Header

src/components/ModelReadme.tsx

@@ -1,17 +1,20 @@
-import { ExternalLink, FileText } from 'lucide-react'
-import { useState } from 'react'
+import { ExternalLink } from 'lucide-react'
 import Modal from './Modal'
 import MarkdownRenderer from './MarkdownRenderer'
 
 interface ModelReadmeProps {
   readme: string
-  pipeline: string
   modelName: string
+  isModalOpen: boolean
+  setIsModalOpen: (isOpen: boolean) => void
 }
 
-const ModelReadme = ({ readme, pipeline, modelName }: ModelReadmeProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
+const ModelReadme = ({
+  readme,
+  modelName,
+  isModalOpen,
+  setIsModalOpen
+}: ModelReadmeProps) => {
   const title = (
     <div className="flex items-center space-x-2">
       <a
@@ -30,14 +33,6 @@ const ModelReadme = ({ readme, pipeline, modelName }: ModelReadmeProps) => {
 
   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)}

src/components/PipelineSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import {
   Listbox,
   ListboxOption,
@@ -6,43 +6,41 @@ import {
   ListboxOptions,
   Transition
 } from '@headlessui/react'
-import { ChevronDown, Check } from 'lucide-react';
+import { ChevronDown, Check } from 'lucide-react'
 
 export const supportedPipelines = [
-  'text-classification',
-  'zero-shot-classification',
   'text-generation',
-  'summarization',
   'feature-extraction',
-  'sentiment-analysis',
+  'zero-shot-classification',
   'image-classification',
-  'question-answering',
+  'text-classification',
+  'summarization',
   'translation'
-];
+]
 
 interface PipelineSelectorProps {
-  pipeline: string;
-  setPipeline: (pipeline: string) => void;
+  pipeline: string
+  setPipeline: (pipeline: string) => void
 }
 
 const PipelineSelector: React.FC<PipelineSelectorProps> = ({
   pipeline,
   setPipeline
 }) => {
-  const selectedPipeline = pipeline;
+  const selectedPipeline = pipeline
 
   const formatPipelineName = (pipelineId: string) => {
     return pipelineId
       .split('-')
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
-  };
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
 
   return (
     <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 sm:text-sm border border-gray-300">
+          <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>
@@ -53,7 +51,7 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
               />
             </span>
           </ListboxButton>
-          
+
           <Transition
             enter="transition duration-100 ease-out"
             enterFrom="transform scale-95 opacity-0"
@@ -62,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-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <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}
@@ -96,7 +94,7 @@ const PipelineSelector: React.FC<PipelineSelectorProps> = ({
         </div>
       </Listbox>
     </div>
-  );
-};
+  )
+}
 
-export default PipelineSelector;
+export default PipelineSelector

src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { X } from 'lucide-react'
+import { FileText, X } from 'lucide-react'
 import PipelineSelector from './PipelineSelector'
 import ModelSelector from './ModelSelector'
 import ModelInfo from './ModelInfo'
@@ -10,9 +10,10 @@ import ZeroShotClassificationConfig from './pipelines/ZeroShotClassificationConf
 interface SidebarProps {
   isOpen: boolean
   onClose: () => void
+  setIsModalOpen: (isOpen: boolean) => void
 }
 
-const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
+const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
   const { pipeline, setPipeline } = useModel()
 
   return (
@@ -51,7 +52,7 @@ const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
           <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">
+              <h3 className="text-md xl:text-lg font-semibold text-gray-900 w-2/5 mt-2">
                 Choose a Pipeline
               </h3>
               <div className="w-3/5">
@@ -71,8 +72,18 @@ const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
             </div>
 
             {/* Model Info */}
-            <div className="flex items-center justify-center">
+            <div className="flex flex-col items-center justify-center">
               <ModelInfo />
+              {/* Model README Button */}
+              <div className="mt-4 w-42">
+                <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>
+              </div>
             </div>
 
             <hr className="border-gray-200" />

src/components/pipelines/FeatureExtraction.tsx

@@ -224,7 +224,7 @@ function FeatureExtraction() {
   const busy = status !== 'ready' || isExtracting
 
   return (
-    <div className="flex flex-col h-[70vh] max-h-[100vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Feature Extraction (Embeddings)</h1>
         <div className="flex gap-2">

src/components/pipelines/TextClassification.tsx

@@ -80,7 +80,7 @@ function TextClassification() {
   }
 
   return (
-    <div className="flex flex-col h-[60vh] max-h-[100vh] w-full p-4">
+    <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>

src/components/pipelines/TextGeneration.tsx

@@ -153,10 +153,10 @@ function TextGeneration() {
   const hasChatTemplate = modelInfo?.hasChatTemplate
 
   return (
-    <div className="flex flex-col h-[70vh] max-h-[100vh] w-full p-4">
+    <div className="flex flex-col min-h-[70vh] h-full max-h-[92vh] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">
-          {hasChatTemplate ? 'Chat with AI' : 'Text Generation'}
+          Text Generation {hasChatTemplate ? '(Chat)' : ''}
         </h1>
         <div className="flex gap-2">
           <button

src/components/pipelines/ZeroShotClassification.tsx

@@ -81,7 +81,7 @@ function ZeroShotClassification() {
   const busy: boolean = status !== 'ready'
 
   return (
-    <div className="flex flex-col h-full max-h-[100vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Zero-Shot Classification</h1>
       </div>

src/contexts/ModelContext.tsx

@@ -36,7 +36,7 @@ export function ModelProvider({ children }: { children: React.ReactNode }) {
   const [models, setModels] = useState<ModelInfoResponse[]>(
     [] as ModelInfoResponse[]
   )
-  const [pipeline, setPipeline] = useState<string>('text-classification')
+  const [pipeline, setPipeline] = useState<string>('feature-extraction') //text-generation
   const [selectedQuantization, setSelectedQuantization] =
     useState<QuantizationType>('int8')
   const [activeWorker, setActiveWorker] = useState<Worker | null>(null)

tsconfig.json

@@ -1,12 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext",
-      "WebWorker"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -22,4 +17,4 @@
     "jsx": "react-jsx"
   },
   "include": ["src", "public/workers"]
-}
+}