| 'use client' |
|
|
| import { useState, useCallback, useEffect } from 'react' |
| import { useAppStore, useImageStore, useUIStore } from '@/store' |
| import { KernelSelector } from '@/components/kernel/KernelSelector' |
| import { PlaybackControls } from '@/components/controls/PlaybackControls' |
| import { OverlayControls, PaddingControls, KernelInfoPanel } from '@/components/controls/OverlayControls' |
| import { ConvolutionCanvas } from '@/components/canvas/ConvolutionCanvas' |
| import { StaticConvolutionView } from '@/components/canvas/StaticConvolutionView' |
| import { SplitView } from '@/components/canvas/SplitView' |
| import { ImageCanvas } from '@/components/canvas/ImageCanvas' |
| import { Button, Card, CardContent, Badge } from '@/components/ui' |
| import { useImageLoader, useDragAndDrop } from '@/hooks/useImageLoader' |
| import { useConvolution } from '@/hooks/useConvolution' |
| import { cn, formatNumber } from '@/utils/helpers' |
| import { |
| Upload, |
| Image as ImageIcon, |
| Download, |
| RotateCcw, |
| HelpCircle, |
| Settings, |
| ChevronLeft, |
| ChevronRight, |
| Keyboard, |
| } from 'lucide-react' |
|
|
| export default function Home() { |
| const { |
| originalImageData, |
| processedImageData, |
| selectedKernel, |
| convolution, |
| settings, |
| isLoading, |
| error, |
| showHelp, |
| showSettings, |
| setOriginalImage, |
| setError, |
| toggleHelp, |
| toggleSettings, |
| resetConvolution, |
| } = useAppStore() |
|
|
| const { runConvolution, pause, resume, stop, step, reset, isRunning, isPaused, canRun, toggleStepMode } = useConvolution() |
| const { fileInputRef, openFileDialog, handleFileSelect } = useImageLoader() |
| const { handleDragOver, handleDragLeave, handleDrop, isDragging } = useDragAndDrop((image, imageData) => { |
| setOriginalImage(image, imageData) |
| resetConvolution() |
| }) |
|
|
| const [showComparison, setShowComparison] = useState(false) |
| const [sidebarWidth, setSidebarWidth] = useState(320) |
| const [inspectedPosition, setInspectedPosition] = useState<{ x: number; y: number } | null>(null) |
| const [showShortcuts, setShowShortcuts] = useState(false) |
|
|
| const handleInspectClick = useCallback((x: number, y: number) => { |
| setInspectedPosition({ x, y }) |
| }, []) |
|
|
| |
| useEffect(() => { |
| const handleKeyDown = (e: KeyboardEvent) => { |
| |
| if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { |
| return |
| } |
|
|
| switch (e.code) { |
| case 'Space': |
| e.preventDefault() |
| if (isRunning) pause() |
| else if (canRun) runConvolution() |
| else if (isPaused) resume() |
| break |
| case 'ArrowRight': |
| e.preventDefault() |
| step() |
| break |
| case 'ArrowLeft': |
| e.preventDefault() |
| |
| break |
| case 'Equal': |
| case 'NumpadAdd': |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault() |
| const newZoom = Math.min(20, settings.zoomLevel * 1.2) |
| useAppStore.getState().setZoomLevel(newZoom) |
| } |
| break |
| case 'Minus': |
| case 'NumpadSubtract': |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault() |
| const newZoom = Math.max(0.1, settings.zoomLevel / 1.2) |
| useAppStore.getState().setZoomLevel(newZoom) |
| } |
| break |
| case 'Digit0': |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault() |
| useAppStore.getState().setZoomLevel(1) |
| useAppStore.getState().setPanOffset({ x: 0, y: 0 }) |
| } |
| break |
| case 'KeyR': |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault() |
| reset() |
| resetConvolution() |
| } |
| break |
| case 'KeyS': |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault() |
| toggleStepMode(!settings.stepMode) |
| } |
| break |
| case 'Slash': |
| if (e.shiftKey) { |
| e.preventDefault() |
| setShowShortcuts(!showShortcuts) |
| } |
| break |
| } |
| } |
|
|
| window.addEventListener('keydown', handleKeyDown) |
| return () => window.removeEventListener('keydown', handleKeyDown) |
| }, [isRunning, isPaused, canRun, settings.zoomLevel, settings.stepMode, runConvolution, pause, resume, step, reset, resetConvolution, toggleStepMode]) |
|
|
| const handleImageLoad = useCallback((data: { image: HTMLImageElement; imageData: ImageData }) => { |
| setOriginalImage(data.image, data.imageData) |
| resetConvolution() |
| }, [setOriginalImage, resetConvolution]) |
|
|
| const handleDownload = useCallback(() => { |
| if (!processedImageData) return |
| const canvas = document.createElement('canvas') |
| canvas.width = processedImageData.width |
| canvas.height = processedImageData.height |
| const ctx = canvas.getContext('2d') |
| if (!ctx) return |
| ctx.putImageData(processedImageData, 0, 0) |
| const link = document.createElement('a') |
| link.download = 'convolved-image.png' |
| link.href = canvas.toDataURL('image/png') |
| link.click() |
| }, [processedImageData]) |
|
|
| const handleReset = useCallback(() => { |
| reset() |
| resetConvolution() |
| }, [reset, resetConvolution]) |
|
|
| if (isLoading) { |
| return ( |
| <div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50"> |
| <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent" /> |
| </div> |
| ) |
| } |
|
|
| return ( |
| <div |
| className="h-screen w-screen flex flex-col bg-gray-50 dark:bg-gray-900 overflow-hidden" |
| onDragOver={handleDragOver} |
| onDragLeave={handleDragLeave} |
| onDrop={handleDrop} |
| > |
| {/* Header */} |
| <header className="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-b dark:border-gray-700 z-10"> |
| <div className="flex items-center gap-4"> |
| <h1 className="text-xl font-bold text-gray-900 dark:text-white"> |
| Kernel Convolution Visualizer |
| </h1> |
| <Badge variant="outline" className="text-xs"> |
| Educational Tool |
| </Badge> |
| </div> |
| |
| <div className="flex items-center gap-2"> |
| <Button variant="ghost" size="icon" onClick={toggleHelp} className="relative"> |
| <HelpCircle className="h-5 w-5" /> |
| </Button> |
| <Button variant="ghost" size="icon" onClick={toggleSettings}> |
| <Settings className="h-5 w-5" /> |
| </Button> |
| </div> |
| </header> |
| |
| {/* Main Content */} |
| <main className="flex-1 flex overflow-hidden"> |
| {/* Left Sidebar - Controls */} |
| <aside |
| className={cn( |
| 'flex flex-col bg-white dark:bg-gray-800 border-r dark:border-gray-700 overflow-y-auto transition-all duration-200', |
| 'min-w-[280px] max-w-[400px]' |
| )} |
| style={{ width: sidebarWidth }} |
| > |
| {/* Image Upload */} |
| <Card className="m-3"> |
| <CardContent className="p-4"> |
| <div |
| className={cn( |
| 'relative border-2 dashed rounded-lg p-6 text-center transition-colors', |
| 'cursor-pointer', |
| isDragging |
| ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' |
| : 'border-gray-300 dark:border-gray-600 hover:border-blue-400' |
| )} |
| onClick={openFileDialog} |
| > |
| <input |
| ref={fileInputRef} |
| type="file" |
| accept="image/*" |
| className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" |
| onChange={(e) => handleFileSelect(e, handleImageLoad)} |
| /> |
| <ImageIcon className="h-12 w-12 mx-auto text-gray-400 mb-3" /> |
| <p className="text-gray-600 dark:text-gray-400"> |
| {originalImageData ? 'Click to change image' : 'Drag & drop or click to upload'} |
| </p> |
| <p className="text-sm text-gray-400 mt-1">PNG, JPG, WebP, BMP</p> |
| </div> |
| |
| {originalImageData && ( |
| <div className="mt-3 flex items-center justify-between text-sm"> |
| <span className="text-gray-600 dark:text-gray-400"> |
| {originalImageData.width} × {originalImageData.height} |
| </span> |
| <div className="flex gap-2"> |
| <Button variant="outline" size="sm" onClick={handleDownload}> |
| <Download className="h-4 w-4" /> |
| Save |
| </Button> |
| <Button variant="outline" size="sm" onClick={handleReset}> |
| <RotateCcw className="h-4 w-4" /> |
| Reset |
| </Button> |
| </div> |
| </div> |
| )} |
| </CardContent> |
| </Card> |
| |
| {/* Kernel Selector */} |
| <div className="flex-1 m-3 min-h-0"> |
| <KernelSelector /> |
| </div> |
| |
| {/* Playback Controls */} |
| <div className="m-3"> |
| <PlaybackControls /> |
| </div> |
| </aside> |
| |
| {/* Resizer */} |
| <div |
| className="w-1 cursor-col-resize bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 active:bg-blue-600 flex items-center justify-center" |
| onMouseDown={(e) => { |
| const startX = e.clientX |
| const startWidth = sidebarWidth |
| const onMouseMove = (e: MouseEvent) => { |
| setSidebarWidth(Math.max(280, Math.min(400, startWidth + (e.clientX - startX)))) |
| } |
| const onMouseUp = () => { |
| document.removeEventListener('mousemove', onMouseMove) |
| document.removeEventListener('mouseup', onMouseUp) |
| } |
| document.addEventListener('mousemove', onMouseMove) |
| document.addEventListener('mouseup', onMouseUp) |
| }} |
| > |
| <div className="w-px h-8 bg-gray-300 dark:bg-gray-600 rounded" /> |
| </div> |
| |
| {/* Center - Visualization */} |
| <section className="flex-1 flex flex-col overflow-hidden p-4 min-w-0"> |
| {originalImageData ? ( |
| <> |
| {/* Convolution Visualization */} |
| <div className="flex-1 min-h-0 relative"> |
| <ConvolutionCanvas |
| width={originalImageData.width} |
| height={originalImageData.height} |
| className="w-full h-full" |
| onInspectClick={handleInspectClick} |
| /> |
| </div> |
| |
| {/* Comparison View Toggle */} |
| <div className="flex items-center justify-center gap-4 mt-4"> |
| <Button |
| variant={showComparison ? 'primary' : 'outline'} |
| onClick={() => setShowComparison(!showComparison)} |
| > |
| {showComparison ? <ChevronLeft className="h-4 w-4 mr-2" /> : <ChevronRight className="h-4 w-4 mr-2" />} |
| {showComparison ? 'Hide Comparison' : 'Show Comparison'} |
| </Button> |
| |
| {selectedKernel && ( |
| <Badge variant="secondary"> |
| {selectedKernel.name} ({selectedKernel.size}×{selectedKernel.size}) |
| </Badge> |
| )} |
| |
| {convolution.status !== 'idle' && ( |
| <Badge variant={convolution.status === 'completed' ? 'success' : 'default'}> |
| {convolution.status} |
| </Badge> |
| )} |
| </div> |
| </> |
| ) : ( |
| <div className="flex-1 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg"> |
| <div className="text-center text-gray-500"> |
| <ImageIcon className="h-16 w-16 mx-auto mb-4 opacity-50" /> |
| <p className="text-lg">Upload an image to begin</p> |
| <p className="text-sm mt-2">Drag & drop or click the upload area</p> |
| </div> |
| </div> |
| )} |
| |
| {/* Comparison View */} |
| {showComparison && processedImageData && ( |
| <div className="mt-4 h-96 flex-1"> |
| <SplitView |
| width={originalImageData?.width || 800} |
| height={originalImageData?.height || 600} |
| className="w-full h-full" |
| /> |
| </div> |
| )} |
| </section> |
| |
| {/* Right Sidebar - Info Panels */} |
| <aside className="w-80 flex flex-col bg-white dark:bg-gray-800 border-l dark:border-gray-700 overflow-y-auto"> |
| <div className="p-4 space-y-4"> |
| {inspectedPosition ? ( |
| <StaticConvolutionView |
| inspectedPosition={inspectedPosition} |
| onClearInspection={() => setInspectedPosition(null)} |
| /> |
| ) : ( |
| <> |
| <KernelInfoPanel /> |
| <OverlayControls /> |
| <PaddingControls /> |
| </> |
| )} |
| </div> |
| </aside> |
| </main> |
|
|
| {} |
| {error && ( |
| <div className="fixed bottom-4 right-4 z-50 animate-slide-in"> |
| <div className="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 max-w-md"> |
| <span className="flex-1 text-sm">{error}</span> |
| <Button variant="ghost" size="sm" onClick={() => setError(null)}> |
| Dismiss |
| </Button> |
| </div> |
| </div> |
| )} |
|
|
| {} |
| {showHelp && ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> |
| <div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"> |
| <div className="p-6"> |
| <h2 className="text-xl font-bold mb-4">How to Use</h2> |
| <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400"> |
| <div> |
| <h3 className="font-medium mb-2">1. Upload an Image</h3> |
| <p>Drag & drop or click the upload area in the left sidebar.</p> |
| </div> |
| <div> |
| <h3 className="font-medium mb-2">2. Select a Kernel</h3> |
| <p>Choose from predefined kernels (Blur, Sharpen, Edge Detection, etc.) or create your own custom kernel.</p> |
| </div> |
| <div> |
| <h3 className="font-medium mb-2">3. Watch the Convolution</h3> |
| <p>Press Play to see the kernel move across the image pixel by pixel. The visualization shows:</p> |
| <ul className="list-disc list-inside mt-1 space-y-1"> |
| <li>Current image patch under the kernel</li> |
| <li>Element-wise multiplication of kernel and pixel values</li> |
| <li>Summation that produces the output pixel</li> |
| </ul> |
| </div> |
| <div> |
| <h3 className="font-medium mb-2">4. Control Playback</h3> |
| <ul className="list-disc list-inside mt-1 space-y-1"> |
| <li>Play/Pause/Step through the animation</li> |
| <li>Adjust animation speed</li> |
| <li>Zoom and pan for pixel-level inspection</li> |
| </ul> |
| </div> |
| <div> |
| <h3 className="font-medium mb-2">5. Compare Results</h3> |
| <p>Click “Show Comparison” to see side-by-side or split view of original vs processed image.</p> |
| </div> |
| <div> |
| <h3 className="font-medium mb-2">6. Experiment</h3> |
| <ul className="list-disc list-inside mt-1 space-y-1"> |
| <li>Try different padding strategies (Zero, Reflect, Replicate, Wrap)</li> |
| <li>Toggle overlays to see different visualization aspects</li> |
| <li>Create custom kernels with the editor</li> |
| <li>Download the processed image</li> |
| </ul> |
| </div> |
| </div> |
| <div className="mt-6 flex justify-end"> |
| <Button onClick={toggleHelp}>Got it</Button> |
| </div> |
| </div> |
| </div> |
| </div> |
| )} |
|
|
| {} |
| {showSettings && ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> |
| <div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mx-4"> |
| <div className="p-6"> |
| <h2 className="text-xl font-bold mb-4">Settings</h2> |
| <div className="space-y-4"> |
| <label className="flex items-center gap-3 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={settings.showOverlay.kernelBoundary} |
| onChange={() => useAppStore.getState().toggleOverlay('kernelBoundary')} |
| className="rounded border-gray-300" |
| /> |
| <span>Show Kernel Boundary</span> |
| </label> |
| <label className="flex items-center gap-3 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={settings.showOverlay.pixelValues} |
| onChange={() => useAppStore.getState().toggleOverlay('pixelValues')} |
| className="rounded border-gray-300" |
| /> |
| <span>Show Pixel Values</span> |
| </label> |
| <label className="flex items-center gap-3 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={settings.showOverlay.multiplications} |
| onChange={() => useAppStore.getState().toggleOverlay('multiplications')} |
| className="rounded border-gray-300" |
| /> |
| <span>Show Multiplications</span> |
| </label> |
| <label className="flex items-center gap-3 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={settings.showOverlay.summation} |
| onChange={() => useAppStore.getState().toggleOverlay('summation')} |
| className="rounded border-gray-300" |
| /> |
| <span>Show Summation</span> |
| </label> |
| </div> |
| <div className="mt-6 flex justify-end"> |
| <Button onClick={toggleSettings}>Close</Button> |
| </div> |
| </div> |
| </div> |
| </div> |
| )} |
|
|
| {} |
| {showShortcuts && ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"> |
| <div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mx-4 max-h-[80vh] overflow-y-auto"> |
| <div className="p-6"> |
| <div className="flex items-center justify-between mb-4"> |
| <h2 className="text-xl font-bold flex items-center gap-2"> |
| <Keyboard className="h-5 w-5" /> |
| Keyboard Shortcuts |
| </h2> |
| <Button variant="ghost" size="icon" onClick={() => setShowShortcuts(false)}> |
| <ChevronLeft className="h-5 w-5" /> |
| </Button> |
| </div> |
| <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400"> |
| <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded"> |
| <h3 className="font-medium mb-2">Playback</h3> |
| <dl className="grid grid-cols-2 gap-2 text-xs"> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Space</dt> |
| <dd>Play / Pause / Resume</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">→</dt> |
| <dd>Step Forward</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">←</dt> |
| <dd>Step Backward (future)</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+S</dt> |
| <dd>Toggle Step Mode</dd> |
| </dl> |
| </div> |
| <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded"> |
| <h3 className="font-medium mb-2">Zoom & Pan</h3> |
| <dl className="grid grid-cols-2 gap-2 text-xs"> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl++ / =</dt> |
| <dd>Zoom In</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+-</dt> |
| <dd>Zoom Out</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+0</dt> |
| <dd>Reset Zoom & Pan</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Mouse Wheel</dt> |
| <dd>Zoom at Cursor</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Drag</dt> |
| <dd>Pan Image</dd> |
| </dl> |
| </div> |
| <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded"> |
| <h3 className="font-medium mb-2">General</h3> |
| <dl className="grid grid-cols-2 gap-2 text-xs"> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+R</dt> |
| <dd>Reset All</dd> |
| <dt className="font-mono text-blue-600 dark:text-blue-400">Shift+/</dt> |
| <dd>Show This Help</dd> |
| </dl> |
| </div> |
| <div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded"> |
| <p className="text-xs text-blue-800 dark:text-blue-300"> |
| <strong>Tip:</strong> Shortcuts don't work when typing in input fields. Click canvas to focus. |
| </p> |
| </div> |
| </div> |
| <div className="mt-6 flex justify-end"> |
| <Button onClick={() => setShowShortcuts(false)}>Got it</Button> |
| </div> |
| </div> |
| </div> |
| </div> |
| )} |
| </div> |
| ) |
| } |
