Spaces:
Build error
Build error
File size: 3,865 Bytes
49e53ae |
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 |
'use client'
import { Settings, Gauge, Zap, Clock } from 'lucide-react'
interface Config {
threshold: number
batchSize: number
speed: number
}
interface ControlPanelProps {
config: Config
setConfig: (config: Config) => void
}
export default function ControlPanel({ config, setConfig }: ControlPanelProps) {
return (
<div className="glass rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<Settings className="w-5 h-5 text-primary-500" />
Configuration
</h3>
<div className="space-y-6">
{/* Threshold slider */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-sm text-dark-300 flex items-center gap-2">
<Gauge className="w-4 h-4" />
Fraud Threshold
</label>
<span className="text-sm font-mono text-primary-500">{config.threshold.toFixed(2)}</span>
</div>
<input
type="range"
min="0"
max="1"
step="0.05"
value={config.threshold}
onChange={(e) => setConfig({ ...config, threshold: parseFloat(e.target.value) })}
className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
/>
<div className="flex justify-between text-xs text-dark-500 mt-1">
<span>Sensitive (0.0)</span>
<span>Conservative (1.0)</span>
</div>
</div>
{/* Batch size slider */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-sm text-dark-300 flex items-center gap-2">
<Zap className="w-4 h-4" />
Batch Size
</label>
<span className="text-sm font-mono text-primary-500">{config.batchSize}</span>
</div>
<input
type="range"
min="1"
max="50"
step="1"
value={config.batchSize}
onChange={(e) => setConfig({ ...config, batchSize: parseInt(e.target.value) })}
className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
/>
<div className="flex justify-between text-xs text-dark-500 mt-1">
<span>Detailed (1)</span>
<span>Fast (50)</span>
</div>
</div>
{/* Speed slider */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-sm text-dark-300 flex items-center gap-2">
<Clock className="w-4 h-4" />
Processing Speed
</label>
<span className="text-sm font-mono text-primary-500">{config.speed.toFixed(1)}s</span>
</div>
<input
type="range"
min="0.1"
max="3"
step="0.1"
value={config.speed}
onChange={(e) => setConfig({ ...config, speed: parseFloat(e.target.value) })}
className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
/>
<div className="flex justify-between text-xs text-dark-500 mt-1">
<span>Fast (0.1s)</span>
<span>Slow (3.0s)</span>
</div>
</div>
</div>
{/* Config summary */}
<div className="mt-6 pt-4 border-t border-dark-700">
<p className="text-xs text-dark-400">
💡 Lower threshold = More fraud alerts (higher recall)<br/>
💡 Higher threshold = Fewer false positives (higher precision)
</p>
</div>
</div>
)
}
|