| 'use client' |
|
|
| import { useRef, useEffect } from 'react' |
| import { useAppStore } from '@/store' |
| import { PADDING_MODES } from '@/lib/kernels' |
| import { Select, Card, CardContent } from '@/components/ui' |
| import { cn } from '@/utils/helpers' |
| import { Settings, Layers, Grid, ZoomIn, ZoomOut } from 'lucide-react' |
|
|
| export function OverlayControls() { |
| const { settings, updateSettings, toggleOverlay, setPadding } = useAppStore() |
| const { showOverlay, padding } = settings |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <h3 className="font-medium flex items-center gap-2"> |
| <Settings className="h-4 w-4" /> |
| Visualization Overlays |
| </h3> |
| |
| <div className="grid grid-cols-2 gap-2"> |
| {Object.entries(showOverlay).map(([key, value]) => ( |
| <label key={key} className="flex items-center gap-2 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={value} |
| onChange={() => toggleOverlay(key as keyof typeof showOverlay)} |
| className="rounded border-gray-300" |
| /> |
| <span className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</span> |
| </label> |
| ))} |
| </div> |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| export function PaddingControls() { |
| const { settings, setPadding, originalImageData, selectedKernel } = useAppStore() |
| const { padding } = settings |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <h3 className="font-medium flex items-center gap-2"> |
| <Grid className="h-4 w-4" /> |
| Padding Strategy |
| </h3> |
| |
| <Select |
| value={padding} |
| onChange={(e) => setPadding(e.target.value as typeof padding)} |
| options={PADDING_MODES.map((p) => ({ value: p.value, label: p.label }))} |
| placeholder="Select padding mode" |
| /> |
| |
| <div className="text-sm text-gray-500 dark:text-gray-400"> |
| {PADDING_MODES.find((p) => p.value === padding)?.description} |
| </div> |
| |
| <PaddingVisualization |
| imageData={originalImageData} |
| padding={padding} |
| kernelSize={selectedKernel?.size ?? 3} |
| /> |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| function PaddingVisualization({ |
| imageData, |
| padding, |
| kernelSize |
| }: { |
| imageData: ImageData | null |
| padding: 'zero' | 'reflect' | 'replicate' | 'wrap' |
| kernelSize: number |
| }) { |
| const canvasRef = useRef<HTMLCanvasElement>(null) |
| const halfKernel = Math.floor(kernelSize / 2) |
| const previewSize = 120 |
|
|
| useEffect(() => { |
| if (!imageData || !canvasRef.current) return |
|
|
| const canvas = canvasRef.current |
| const ctx = canvas.getContext('2d') |
| if (!ctx) return |
|
|
| |
| canvas.width = previewSize |
| canvas.height = previewSize |
| ctx.clearRect(0, 0, previewSize, previewSize) |
|
|
| const scale = Math.min(previewSize / (imageData.width + 2 * halfKernel), previewSize / (imageData.height + 2 * halfKernel)) |
| const paddedWidth = (imageData.width + 2 * halfKernel) * scale |
| const paddedHeight = (imageData.height + 2 * halfKernel) * scale |
| const offsetX = (previewSize - paddedWidth) / 2 |
| const offsetY = (previewSize - paddedHeight) / 2 |
|
|
| |
| const getPixel = (x: number, y: number, channel: number): number => { |
| let px = x |
| let py = y |
| const { width, height, data } = imageData |
|
|
| switch (padding) { |
| case 'zero': |
| if (px < 0 || px >= width || py < 0 || py >= height) return 0 |
| break |
| case 'replicate': |
| px = Math.max(0, Math.min(px, width - 1)) |
| py = Math.max(0, Math.min(py, height - 1)) |
| break |
| case 'reflect': |
| if (px < 0) px = -px |
| if (px >= width) px = 2 * width - px - 2 |
| if (py < 0) py = -py |
| if (py >= height) py = 2 * height - py - 2 |
| px = Math.max(0, Math.min(px, width - 1)) |
| py = Math.max(0, Math.min(py, height - 1)) |
| break |
| case 'wrap': |
| px = ((px % width) + width) % width |
| py = ((py % height) + height) % height |
| break |
| } |
|
|
| const index = (py * width + px) * 4 + channel |
| return data[index] |
| } |
|
|
| |
| for (let py = -halfKernel; py < imageData.height + halfKernel; py++) { |
| for (let px = -halfKernel; px < imageData.width + halfKernel; px++) { |
| const r = getPixel(px, py, 0) |
| const g = getPixel(px, py, 1) |
| const b = getPixel(px, py, 2) |
|
|
| const x = offsetX + (px + halfKernel) * scale |
| const y = offsetY + (py + halfKernel) * scale |
|
|
| ctx.fillStyle = `rgb(${r}, ${g}, ${b})` |
| ctx.fillRect(x, y, Math.ceil(scale), Math.ceil(scale)) |
| } |
| } |
|
|
| |
| ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)' |
| ctx.lineWidth = 2 |
| ctx.setLineDash([4, 2]) |
| ctx.strokeRect( |
| offsetX + halfKernel * scale, |
| offsetY + halfKernel * scale, |
| imageData.width * scale, |
| imageData.height * scale |
| ) |
| ctx.setLineDash([]) |
|
|
| |
| ctx.fillStyle = 'rgba(239, 68, 68, 0.8)' |
| ctx.beginPath() |
| ctx.arc( |
| offsetX + halfKernel * scale, |
| offsetY + halfKernel * scale, |
| 4, |
| 0, |
| Math.PI * 2 |
| ) |
| ctx.fill() |
|
|
| |
| ctx.strokeStyle = 'rgba(239, 68, 68, 0.5)' |
| ctx.lineWidth = 1 |
| ctx.strokeRect( |
| offsetX, |
| offsetY, |
| paddedWidth, |
| paddedHeight |
| ) |
| }, [imageData, padding, kernelSize]) |
|
|
| return ( |
| <div className="space-y-2"> |
| <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400">Padding Preview</h4> |
| <div className="relative"> |
| <canvas |
| ref={canvasRef} |
| width={previewSize} |
| height={previewSize} |
| className="bg-gray-100 dark:bg-gray-800 rounded border dark:border-gray-700" |
| /> |
| <div className="absolute bottom-1 left-1 right-1 flex justify-between text-[10px] text-gray-400 px-2"> |
| <span>Original Image</span> |
| <span className="text-red-400">Kernel Center</span> |
| <span>Padding Area</span> |
| </div> |
| </div> |
| </div> |
| ) |
| } |
|
|
| export function KernelInfoPanel() { |
| const { selectedKernel } = useAppStore() |
|
|
| if (!selectedKernel) { |
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 text-center text-gray-500"> |
| No kernel selected |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| const { name, category, matrix, size, normalize, description, formula, reference } = selectedKernel |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <div className="flex items-start justify-between gap-4"> |
| <div> |
| <h3 className="font-medium">{name}</h3> |
| <div className="flex items-center gap-2 mt-1"> |
| <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded dark:bg-blue-900/30 dark:text-blue-300"> |
| {category} |
| </span> |
| <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-800 rounded dark:bg-gray-800 dark:text-gray-300"> |
| {size}×{size} |
| </span> |
| {normalize && ( |
| <span className="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded dark:bg-green-900/30 dark:text-green-300"> |
| Normalized |
| </span> |
| )} |
| </div> |
| </div> |
| </div> |
| |
| <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p> |
| |
| {formula && ( |
| <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded font-mono text-sm"> |
| <span className="text-gray-500">Formula: </span> |
| <span>{formula}</span> |
| </div> |
| )} |
| |
| <div className="space-y-2"> |
| <h4 className="text-sm font-medium">Kernel Matrix</h4> |
| <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${size}, 1fr)` }}> |
| {matrix.map((row, i) => |
| row.map((val, j) => ( |
| <div |
| key={`${i}-${j}`} |
| className={cn( |
| 'p-2 text-center text-sm font-mono rounded', |
| val > 0 ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300' |
| )} |
| > |
| {val.toFixed(val === Math.round(val) ? 0 : 2)} |
| </div> |
| )) |
| )} |
| </div> |
| </div> |
| |
| {reference && ( |
| <a |
| href={reference} |
| target="_blank" |
| rel="noopener noreferrer" |
| className="text-sm text-blue-600 hover:underline flex items-center gap-1" |
| > |
| <Layers className="h-3 w-3" /> |
| Reference |
| </a> |
| )} |
| </CardContent> |
| </Card> |
| ) |
| } |
