File size: 4,877 Bytes
9283c8b fb852fe 5fe09e3 9283c8b fb852fe 948b11c 5fe09e3 08476ef fb852fe 08476ef 9283c8b fb852fe 08476ef 9283c8b 08476ef 9283c8b 08476ef 9283c8b 08476ef 5fe09e3 |
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 |
import { 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';
function App() {
const [pipeline, setPipeline] = useState('zero-shot-classification');
const { progress, status, model } = useModel();
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">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Choose a Pipeline
</h2>
<PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
{/* 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'}
{model && (
<span className="ml-2 text-xs text-gray-500 font-normal">
({model})
</span>
)}
</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;
|