File size: 2,731 Bytes
322c234 1150456 6ebf2fd 59a1fe9 6ebf2fd 97cab0c 5fe09e3 673d22a 322c234 96812c9 6ebf2fd 673d22a 6ebf2fd 322c234 6ebf2fd 322c234 96812c9 6ebf2fd 322c234 59a1fe9 5fe09e3 08476ef ad5cef3 08476ef ad5cef3 1150456 ad5cef3 322c234 ad5cef3 6ebf2fd ad5cef3 322c234 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 79 80 81 |
import { useEffect, useState } from 'react'
import PipelineSelector from './components/PipelineSelector'
import ZeroShotClassification from './components/ZeroShotClassification'
import TextClassification from './components/TextClassification'
import Header from './Header'
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, setModelInfo, modelInfo } = useModel()
const [isFetching, setIsFetching] = useState(false)
useEffect(() => {
setModelInfo(null)
const fetchModels = async () => {
setIsFetching(true)
const fetchedModels = await getModelsByPipeline(pipeline)
setModels(fetchedModels)
setIsFetching(false)
}
fetchModels()
}, [setModels, setModelInfo, 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 isFetching={isFetching} />
</div>
</div>
<div className="ml-6">
<ModelInfo isFetching={isFetching} />
</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
|