File size: 2,545 Bytes
ad5cef3 1150456 6ebf2fd 59a1fe9 6ebf2fd 97cab0c 5fe09e3 97cab0c 96812c9 6ebf2fd 96812c9 6ebf2fd 59a1fe9 5fe09e3 08476ef ad5cef3 08476ef ad5cef3 1150456 ad5cef3 6ebf2fd ad5cef3 6ebf2fd 59a1fe9 08476ef 97cab0c 08476ef 9283c8b 08476ef 9283c8b 08476ef 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 |
import { useEffect } from 'react'
import PipelineSelector from './components/PipelineSelector'
import ZeroShotClassification from './components/ZeroShotClassification'
import TextClassification from './components/TextClassification'
import Header from './Header'
import Footer from './Footer'
import { useModel } from './contexts/ModelContext'
import { getModelsByPipeline } from './lib/huggingface'
import ModelSelector from './components/ModelSelector'
import ModelInfo from './components/ModelInfo'
import ModelReadme from './components/ModelReadme'
function App() {
const { pipeline, setPipeline, setModels, modelInfo } = useModel()
useEffect(() => {
const fetchModels = async () => {
const fetchedModels = await getModelsByPipeline(pipeline)
setModels(fetchedModels)
}
fetchModels()
}, [setModels, pipeline])
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
<Header />
<main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="mb-8">
<div className="bg-white rounded-lg border p-6">
<div className="flex items-start justify-between max-w-6xl mx-auto">
<div className="space-y-2 flex-1">
<div className="space-y-2">
<span className="text-lg font-semibold text-gray-900 block">
Choose a Pipeline
</span>
<PipelineSelector
pipeline={pipeline}
setPipeline={setPipeline}
/>
</div>
<div className="space-y-2">
<span className="text-lg font-semibold text-gray-900 block">
Select Model
</span>
<ModelSelector />
</div>
</div>
<div className="ml-6">
<ModelInfo />
</div>
</div>
{modelInfo?.readme && (
<ModelReadme
readme={modelInfo.readme}
modelName={modelInfo.name}
pipeline={pipeline}
/>
)}
</div>
</div>
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
{pipeline === 'zero-shot-classification' && (
<ZeroShotClassification />
)}
{pipeline === 'text-classification' && <TextClassification />}
</div>
</main>
</div>
)
}
export default App
|