File size: 3,561 Bytes
f3b30b4 1b3b6e1 1150456 6ebf2fd 1b3b6e1 046ca57 f3b30b4 852dc0d f7c4172 5fe09e3 f3b30b4 4a70176 f3b30b4 96812c9 6ebf2fd 673d22a 4d810fa 117cfaa 6ebf2fd 4d810fa 96812c9 6ebf2fd 4d810fa 59a1fe9 5fe09e3 4a70176 08476ef 852dc0d f7c4172 852dc0d 4a70176 852dc0d 4a70176 5541427 4a70176 f3b30b4 852dc0d 4a70176 852dc0d f3b30b4 852dc0d 22f8eb7 046ca57 6ebf2fd 59a1fe9 852dc0d 4a70176 852dc0d f7c4172 4a70176 5fe09e3 1150456 5fe09e3 1150456 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { useEffect, useState } from 'react'
import { Settings } from 'lucide-react'
import ZeroShotClassification from './components/pipelines/ZeroShotClassification'
import TextClassification from './components/pipelines/TextClassification'
import Header from './Header'
import { useModel } from './contexts/ModelContext'
import { getModelsByPipeline } from './lib/huggingface'
import TextGeneration from './components/pipelines/TextGeneration'
import FeatureExtraction from './components/pipelines/FeatureExtraction'
import ImageClassification from './components/pipelines/ImageClassification'
import Sidebar from './components/Sidebar'
import ModelReadme from './components/ModelReadme'
import { PipelineLayout } from './components/PipelineLayout'
import Footer from './Footer'
function App() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false)
const { pipeline, setModels, setModelInfo, modelInfo, setIsFetching } =
useModel()
useEffect(() => {
setModelInfo(null)
setModels([])
setIsFetching(true)
const fetchModels = async () => {
try {
const fetchedModels = await getModelsByPipeline(pipeline)
setModels(fetchedModels)
} catch (error) {
console.error('Error fetching models:', error)
setIsFetching(false)
}
}
fetchModels()
}, [setModels, setModelInfo, setIsFetching, pipeline])
return (
<div className="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
<Header />
<PipelineLayout>
<div className=" flex h-[calc(100vh-8rem)]">
{/* 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-2 lg:pr-4 max-w-none">
{/* Mobile menu 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>
</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 />
)}
{pipeline === 'text-classification' && <TextClassification />}
{pipeline === 'text-generation' && <TextGeneration />}
{pipeline === 'feature-extraction' && <FeatureExtraction />}
{pipeline === 'image-classification' && <ImageClassification />}
</div>
</div>
</main>
{/* Sidebar */}
<Sidebar
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}
setIsModalOpen={setIsModalOpen}
/>
</div>
</PipelineLayout>
<Footer />
{modelInfo?.readme && (
<ModelReadme
readme={modelInfo.readme}
modelName={modelInfo.name}
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
/>
)}
</div>
)
}
export default App
|