Spaces:
Sleeping
Sleeping
File size: 4,103 Bytes
af980d7 | 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 | import { motion } from 'framer-motion';
import { Loader2, FileImage, FileVideo, Cpu, Activity, BarChart3, Eye, CheckCircle2 } from 'lucide-react';
import styles from './AnalysisProgress.module.css';
const STAGE_ICONS = {
upload: FileImage,
preprocess: Cpu,
inference: Activity,
gradcam: Eye,
fft: BarChart3,
temporal: FileVideo,
verdict: CheckCircle2,
};
const SKELETONS = Array.from({ length: 3 });
export default function AnalysisProgress({ phase, currentStage, progress, file }) {
const isVideo = file?.type?.startsWith('video/');
const StageIcon = currentStage ? (STAGE_ICONS[currentStage.id] || Cpu) : Cpu;
return (
<div className={styles.container}>
<motion.div
className={styles.card}
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
{/* Header */}
<div className={styles.header}>
<div className={styles.headerLeft}>
<div className={styles.spinnerWrap}>
<Loader2 size={18} className={styles.spinner} />
</div>
<div>
<p className={styles.headerTitle}>Forensic Analysis in Progress</p>
<p className={styles.headerSub}>{file?.name}</p>
</div>
</div>
<div className={styles.progressBadge}>
<span className="font-mono">{progress}%</span>
</div>
</div>
{/* Progress bar */}
<div className={styles.progressTrack}>
<motion.div
className={styles.progressBar}
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
transition={{ ease: 'easeOut', duration: 0.4 }}
/>
</div>
{/* Current stage */}
{currentStage && (
<motion.div
className={styles.stage}
key={currentStage.id}
initial={{ opacity: 0, x: -8 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.2 }}
>
<div className={styles.stageIcon}>
<StageIcon size={14} />
</div>
<span>{currentStage.label}</span>
</motion.div>
)}
{/* Skeleton preview */}
<div className={styles.skeletonGrid}>
{/* Media skeleton */}
<div className={styles.skeletonMediaWrap}>
<div className={styles.skeletonMedia}>
<div className={styles.shimmer} />
</div>
<div className={styles.skeletonLines}>
<div className={`${styles.skeletonLine} ${styles.skeletonLineLong}`}><div className={styles.shimmer} /></div>
<div className={`${styles.skeletonLine} ${styles.skeletonLineMed}`}><div className={styles.shimmer} /></div>
<div className={`${styles.skeletonLine} ${styles.skeletonLineShort}`}><div className={styles.shimmer} /></div>
</div>
</div>
{/* Verdict skeleton */}
<div className={styles.skeletonVerdictWrap}>
<div className={styles.skeletonScoreCircle}><div className={styles.shimmer} /></div>
{SKELETONS.map((_, i) => (
<div key={i} className={styles.skeletonBlock}><div className={styles.shimmer} /></div>
))}
</div>
</div>
{/* Models running */}
<div className={styles.modelsRunning}>
<p className={styles.modelsLabel}>Models running</p>
<div className={styles.modelsList}>
{['EfficientNet-B4', 'Xception', 'ViT Forensic', ...(isVideo ? ['Temporal CNN'] : [])].map((m, i) => (
<div key={m} className={styles.modelItem}>
<motion.div
className={styles.modelDot}
animate={{ opacity: [0.3, 1, 0.3] }}
transition={{ duration: 1.4, repeat: Infinity, delay: i * 0.3 }}
/>
<span className="font-mono">{m}</span>
</div>
))}
</div>
</div>
</motion.div>
</div>
);
}
|