File size: 6,884 Bytes
9283c8b fb852fe 96812c9 5fe09e3 9283c8b 96812c9 948b11c 5fe09e3 08476ef 96812c9 08476ef fb852fe 08476ef 9283c8b 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 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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
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';
import { Bot, Heart, Download, Cpu } from 'lucide-react';
function App() {
const [pipeline, setPipeline] = useState('zero-shot-classification');
const { progress, status, modelInfo } = useModel();
const formatNumber = (num: number) => {
if (num >= 1000000000) {
return (num / 1000000000).toFixed(1) + 'B'
} else if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
} else if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K'
}
return num.toString();
};
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">
<h2 className="text-lg font-semibold text-gray-900">
Choose a Pipeline
</h2>
{/* Model Info Display */}
{modelInfo.name && (
<div className="flex items-center space-x-4 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-lg border border-blue-200">
<div className="flex items-center space-x-2">
<Bot className="w-4 h-4 text-blue-600" />
<span className="text-sm font-medium text-gray-700 truncate max-w-80" title={modelInfo.name}>
{modelInfo.name.split('/').pop()}
</span>
</div>
<div className="flex items-center space-x-4 text-xs text-gray-600">
{modelInfo.likes > 0 && (
<div className="flex items-center space-x-1">
<Heart className="w-3 h-3 text-red-500" />
<span>{formatNumber(modelInfo.likes)}</span>
</div>
)}
{modelInfo.downloads > 0 && (
<div className="flex items-center space-x-1">
<Download className="w-3 h-3 text-green-500" />
<span>{formatNumber(modelInfo.downloads)}</span>
</div>
)}
{modelInfo.parameters > 0 && (
<div className="flex items-center space-x-1">
<Cpu className="w-3 h-3 text-purple-500" />
<span>{formatNumber(modelInfo.parameters)}</span>
</div>
)}
</div>
</div>
)}
</div>
<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'}
</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;
|