File size: 5,672 Bytes
59a1fe9 1150456 6ebf2fd 59a1fe9 6ebf2fd 5fe09e3 6ebf2fd 96812c9 6ebf2fd 96812c9 6ebf2fd 59a1fe9 5fe09e3 08476ef 96812c9 6ebf2fd 96812c9 1150456 6ebf2fd 59a1fe9 08476ef fb852fe 1150456 fb852fe 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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
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 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, progress, status, modelInfo, setModels } =
useModel()
useEffect(() => {
const fetchModels = async () => {
const fetchedModels = await getModelsByPipeline(pipeline)
setModels(fetchedModels)
console.log(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-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Pipeline Selection */}
<div className="mb-8">
<div className="bg-white rounded-lg shadow-sm border p-6">
<div className="flex items-center justify-between mb-4">
<ModelInfo />
</div>
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-start">
<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>
{/* Model Loading Progress */}
{status === 'progress' && (
<div className="mt-4 p-4 bg-blue-50 rounded-lg">
<div className="flex items-center space-x-3">
<div className="flex-shrink-0">
<svg
className="animate-spin h-5 w-5 text-blue-500"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
<div className="flex-1">
<p className="text-sm font-medium text-blue-900">
Loading Model...
</p>
<div className="mt-2 bg-blue-200 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${progress.toFixed(2)}%` }}
></div>
</div>
<p className="text-xs text-blue-700 mt-1">
{progress.toFixed(2)}%
</p>
</div>
</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>
{/* Pipeline Component */}
<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
|