File size: 2,896 Bytes
4d810fa 1150456 6ebf2fd 59a1fe9 6ebf2fd 97cab0c 2f35054 5fe09e3 4d810fa 96812c9 6ebf2fd 673d22a 4d810fa 6ebf2fd 4d810fa 96812c9 6ebf2fd 4d810fa 59a1fe9 5fe09e3 08476ef ad5cef3 08476ef ad5cef3 1150456 ad5cef3 4d810fa ad5cef3 6ebf2fd ad5cef3 4d810fa 6ebf2fd 59a1fe9 08476ef 97cab0c 08476ef 9283c8b 08476ef 9283c8b 2f35054 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 82 83 84 85 86 87 88 |
import { useEffect } 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'
import TextGeneration from './components/TextGeneration'
function App() {
const { pipeline, setPipeline, 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="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 />}
{pipeline === 'text-generation' && <TextGeneration />}
</div>
</main>
</div>
)
}
export default App
|