Spaces:
Runtime error
Runtime error
File size: 3,230 Bytes
0ce9643 | 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 | import { useCompareStore } from '../../store/useCompareStore';
import { useCrossModelStore } from '../../store/useCrossModelStore';
import { useLocaleStore } from '../../store/useLocaleStore';
import type { TranslationKey } from '../../i18n/translations';
export function DiffPanel() {
const compareDiff = useCompareStore((s) => s.diffData);
const crossModelDiff = useCrossModelStore((s) => s.diffData);
const isCrossModel = useCrossModelStore((s) => s.isCrossModelMode);
const t = useLocaleStore((s) => s.t);
const diffData = isCrossModel ? crossModelDiff : compareDiff;
if (!diffData) return null;
const { layerDiffs, maxAbsDelta } = diffData;
return (
<div className="p-3" style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-primary)' }}>
<div className="mb-2 tracking-wide">
{t('compare.diff' as TranslationKey)}
</div>
<div className="max-h-64 overflow-y-auto">
{layerDiffs.map((d) => {
const pct = maxAbsDelta > 0 ? d.delta / maxAbsDelta : 0;
const isPositive = d.delta >= 0;
const barWidth = Math.abs(pct) * 50;
const label = d.layer_id.length > 12 ? d.layer_id.replace('blocks.', 'B') : d.layer_id;
return (
<div key={d.layer_id} className="flex items-center gap-1 mb-1">
<span
className="text-right shrink-0"
style={{ width: 50, color: 'var(--text-secondary)', fontSize: 'var(--font-size-xs)' }}
>
{label}
</span>
<div
className="flex-1 relative"
style={{ height: 7, background: 'rgba(255,255,255,0.03)' }}
>
<div
style={{
position: 'absolute',
left: '50%',
top: 0,
bottom: 0,
width: 1,
background: 'rgba(255,255,255,0.1)',
}}
/>
<div
className="absolute h-full rounded-sm transition-all duration-300"
style={{
left: isPositive ? '50%' : `${50 - barWidth}%`,
width: `${barWidth}%`,
background: isPositive ? 'var(--accent-active)' : '#ff6464',
opacity: 0.8,
}}
/>
</div>
<span
className="text-right shrink-0"
style={{
width: 42,
color: isPositive ? 'var(--accent-active)' : '#ff6464',
fontSize: 'var(--font-size-xs)',
}}
>
{isPositive ? '+' : ''}{d.delta.toFixed(3)}
</span>
</div>
);
})}
</div>
<div
className="flex justify-between mt-2"
style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' }}
>
<span style={{ color: '#ff6464' }}>A {t('compare.stronger' as TranslationKey)}</span>
<span style={{ color: 'var(--accent-active)' }}>B {t('compare.stronger' as TranslationKey)}</span>
</div>
</div>
);
}
|