File size: 7,493 Bytes
1150456 5fe09e3 1150456 96812c9 1150456 948b11c 5fe09e3 08476ef 96812c9 1150456 96812c9 1150456 96812c9 1150456 96812c9 1150456 96812c9 1150456 96812c9 1150456 96812c9 1150456 96812c9 1150456 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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
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, DatabaseIcon } from 'lucide-react'
import { getModelSize } from './lib/huggingface'
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="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 rounded-lg border border-blue-200 space-y-2">
{/* Model Name Row */}
<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-100"
title={modelInfo.name}
>
{modelInfo.name.split('/').pop()}
</span>
</div>
{/* Stats Row */}
<div className="flex items-center justify-self-end 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>
)}
{modelInfo.parameters > 0 && (
<div className="flex items-center space-x-1">
<DatabaseIcon className="w-3 h-3 text-purple-500" />
<span>
{`~${getModelSize(modelInfo.parameters, 'INT8').toFixed(
1
)}MB`}
</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
|