Spaces:
Sleeping
Sleeping
File size: 3,107 Bytes
0efb0d1 42ab226 0efb0d1 | 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 | 'use client'
interface TokenCalculationCardProps {
params: number | null
tokensEstMin: number | null
tokensEstMax: number | null
tokensEstMid: number | null
isMoe: boolean | null
}
export default function TokenCalculationCard({
params,
tokensEstMin,
tokensEstMax,
tokensEstMid,
isMoe,
}: TokenCalculationCardProps) {
if (!params || !tokensEstMid) {
return null
}
const paramsAbs = params * 1e9 // Convert billions to absolute
const ratioMin = isMoe ? 3 : 5
const ratioMax = isMoe ? 15 : 30
return (
<div className="card mt-6">
<h3 className="text-lg font-semibold mb-4">Token Estimate Calculation</h3>
<div className="space-y-4 text-sm">
<div>
<strong className="text-text">Method:</strong> Parameter Ratio Rule
</div>
<div>
<strong className="text-text">Parameters:</strong> {params.toFixed(1)}B ({paramsAbs.toLocaleString()})
</div>
<div>
<strong className="text-text">Ratio Range:</strong> {ratioMin}x - {ratioMax}x parameters per token
{isMoe && (
<div className="text-xs text-text-muted mt-1 ml-4">
MoE (Mixture of Experts) models typically use fewer tokens per parameter due to sparse activation.
</div>
)}
{!isMoe && (
<div className="text-xs text-text-muted mt-1 ml-4">
Standard transformer models typically use 5-30x parameters per token based on published data.
</div>
)}
</div>
<div className="pt-3 border-t border-border-subtle">
<strong className="text-text">Step-by-Step Calculation:</strong>
<div className="mt-2 space-y-2 font-mono text-xs bg-[rgba(139,111,71,0.05)] p-3 rounded-none">
<div>
<span className="text-text-muted">Min estimate:</span> {paramsAbs.toLocaleString()} params × {ratioMin} = {tokensEstMin ? (tokensEstMin / 1e9).toFixed(1) : '—'}B tokens
</div>
<div>
<span className="text-text-muted">Max estimate:</span> {paramsAbs.toLocaleString()} params × {ratioMax} = {tokensEstMax ? (tokensEstMax / 1e9).toFixed(1) : '—'}B tokens
</div>
<div className="pt-2 border-t border-border-subtle">
<span className="text-text-muted">Midpoint:</span> ({tokensEstMin ? (tokensEstMin / 1e9).toFixed(1) : '—'} + {tokensEstMax ? (tokensEstMax / 1e9).toFixed(1) : '—'}) ÷ 2 = <strong className="text-text">{tokensEstMid ? (tokensEstMid / 1e9).toFixed(1) : '—'}B tokens</strong>
</div>
</div>
</div>
<div className="pt-3 border-t border-border-subtle text-xs text-text-muted">
<strong className="text-text">Note:</strong> These estimates are based on parameter-to-token ratios observed in published models (e.g., GPT-3, Chinchilla scaling laws).
Actual training data may vary significantly based on data quality, curriculum learning, and other factors.
</div>
</div>
</div>
)
}
|