File size: 3,793 Bytes
ad5cef3 1150456 6ebf2fd 59a1fe9 6ebf2fd 5fe09e3 ad5cef3 96812c9 6ebf2fd 96812c9 6ebf2fd 59a1fe9 5fe09e3 08476ef ad5cef3 08476ef ad5cef3 1150456 ad5cef3 6ebf2fd ad5cef3 6ebf2fd 59a1fe9 08476ef 9283c8b 08476ef 9283c8b 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
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'
function App() {
const { pipeline, setPipeline, setModels } = 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>
{/* Pipeline Description */}
<div className="mt-4 p-4 bg-gray-50 rounded-lg">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<svg
className="w-5 h-5 text-blue-500 mt-0.5"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
</div>
<div>
<h3 className="text-sm font-medium text-gray-900">
{pipeline === 'zero-shot-classification'
? 'Zero-Shot Classification'
: 'Text-Classification'}
</h3>
<p className="text-sm text-gray-600 mt-1">
{pipeline === 'zero-shot-classification'
? 'Classify text into custom categories without training data. Perfect for organizing content, routing messages, or analyzing feedback.'
: 'Classify text into predefined categories. Ideal for sentiment analysis, spam detection, or topic categorization.'}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm border overflow-hidden">
{pipeline === 'zero-shot-classification' && (
<ZeroShotClassification />
)}
{pipeline === 'text-classification' && <TextClassification />}
</div>
</main>
<Footer />
</div>
)
}
export default App
|