File size: 4,152 Bytes
f3b30b4 1b3b6e1 1150456 6ebf2fd 1b3b6e1 046ca57 63dbafb f3b30b4 852dc0d f7c4172 bd85b1e 5fe09e3 f3b30b4 4a70176 bd85b1e 63dbafb 96812c9 6ebf2fd 673d22a 4d810fa 63dbafb 117cfaa 6ebf2fd 4d810fa 96812c9 6ebf2fd 63dbafb 59a1fe9 5fe09e3 91cc60b 08476ef 852dc0d 91cc60b 852dc0d 4a70176 852dc0d 4a70176 5541427 4a70176 f3b30b4 852dc0d 4a70176 852dc0d f3b30b4 852dc0d 22f8eb7 046ca57 63dbafb 6ebf2fd 59a1fe9 852dc0d 4a70176 bd85b1e 852dc0d f7c4172 4a70176 25e8265 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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
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 TextToSpeech from './components/pipelines/TextToSpeech'
import Sidebar from './components/Sidebar'
import ModelReadme from './components/ModelReadme'
import { PipelineLayout } from './components/PipelineLayout'
import Footer from './Footer'
import ModelCode from './components/ModelCode'
function App() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false)
const [isCodeModalOpen, setIsCodeModalOpen] = useState(false)
const {
pipeline,
setModels,
setModelInfo,
modelInfo,
setIsFetching,
setErrorText,
setStatus
} = useModel()
useEffect(() => {
setModelInfo(null)
setModels([])
setIsFetching(true)
setStatus('initiate')
setErrorText('')
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,
setStatus,
setErrorText,
pipeline
])
return (
<div className="relative min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-indigo-100">
<Header />
<PipelineLayout>
<div className=" flex h-[calc(100vh-6.6rem)]">
{/* 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 />}
{pipeline === 'text-to-speech' && <TextToSpeech />}
</div>
</div>
</main>
{/* Sidebar */}
<Sidebar
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}
setIsModalOpen={setIsModalOpen}
setIsCodeModalOpen={setIsCodeModalOpen}
/>
<ModelCode
isCodeModalOpen={isCodeModalOpen}
setIsCodeModalOpen={setIsCodeModalOpen}
/>
</div>
</PipelineLayout>
<Footer />
{modelInfo?.readme && (
<ModelReadme
readme={modelInfo.readme}
modelName={modelInfo.baseId ? modelInfo.baseId : modelInfo.name}
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
/>
)}
</div>
)
}
export default App
|