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 (
{/* Header is h-16 = 4rem */} {/* Main Content */}
{/* Mobile menu button */}
{/* Pipeline Component */}

{modelInfo?.name}

{pipeline === 'zero-shot-classification' && ( )} {pipeline === 'text-classification' && } {pipeline === 'text-generation' && } {pipeline === 'feature-extraction' && } {pipeline === 'image-classification' && }
{/* Sidebar */} setIsSidebarOpen(false)} setIsModalOpen={setIsModalOpen} />
) } export default App