File size: 5,727 Bytes
80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 f3aa2b6 80bcac8 | 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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 | import { useCallback, useRef, useEffect } from 'react'
import { useAppStore } from '@/store'
import { convolutionSteps, convolveImage } from '@/lib/convolution/engine'
import type { PaddingMode, ConvolutionStep } from '@/types'
export function useConvolution() {
const {
originalImageData,
selectedKernel,
customKernelMatrix,
customKernelNormalize,
settings,
convolution,
startConvolution,
pauseConvolution,
resumeConvolution,
stopConvolution,
updateConvolutionStep,
updateConvolutionProgress,
completeConvolution,
setConvolutionError,
resetConvolution,
} = useAppStore()
const animationRef = useRef<number | null>(null)
const generatorRef = useRef<Generator<ConvolutionStep> | null>(null)
const isPausedRef = useRef(false)
const stepModeRef = useRef(false)
const frameStartRef = useRef<number>(0)
const kernel = selectedKernel?.matrix ?? customKernelMatrix
const normalize = selectedKernel?.normalize ?? customKernelNormalize
const padding = settings.padding
// Calculate optimal batch size for ~60fps (16.67ms per frame)
// Aim to spend ~8ms on computation, leaving ~8ms for rendering
const getBatchSize = useCallback(() => {
const baseStepsPerMs = 500 // approximate steps per ms on modern hardware
const targetComputeTime = 8 // ms
const speedMultiplier = settings.animationSpeed
return Math.max(1, Math.floor(baseStepsPerMs * targetComputeTime * speedMultiplier))
}, [settings.animationSpeed])
const runConvolution = useCallback(async () => {
if (!originalImageData || !kernel) return
try {
startConvolution()
const extendedImage = {
data: originalImageData.data,
width: originalImageData.width,
height: originalImageData.height,
channels: 4,
}
const gen = convolutionSteps(extendedImage, kernel, padding, normalize, (progress) => {
const totalPixels = originalImageData.width * originalImageData.height * 4
const processedPixels = Math.round(progress * totalPixels)
const elapsedTime = Date.now() - convolution.startTime
updateConvolutionProgress(progress, processedPixels, elapsedTime)
})
generatorRef.current = gen
const processBatch = () => {
if (isPausedRef.current) {
animationRef.current = requestAnimationFrame(processBatch)
return
}
if (stepModeRef.current) {
// In step mode, don't auto-advance
animationRef.current = requestAnimationFrame(processBatch)
return
}
frameStartRef.current = performance.now()
const batchSize = getBatchSize()
let lastStep: ConvolutionStep | null = null
let stepsProcessed = 0
for (let i = 0; i < batchSize; i++) {
const result = gen.next()
if (result.done) {
if (lastStep && lastStep.x === -1) {
// Final step with output image
const output = convolveImage(originalImageData, kernel, padding, normalize)
completeConvolution(output)
}
return
}
lastStep = result.value
updateConvolutionStep(result.value)
stepsProcessed++
// Check if we've spent too much time in this frame (yield to main thread)
if (performance.now() - frameStartRef.current > 8) {
break
}
}
animationRef.current = requestAnimationFrame(processBatch)
}
animationRef.current = requestAnimationFrame(processBatch)
} catch (error) {
setConvolutionError(error instanceof Error ? error.message : 'Convolution failed')
}
}, [
originalImageData,
kernel,
normalize,
padding,
settings.animationSpeed,
convolution.startTime,
startConvolution,
updateConvolutionStep,
updateConvolutionProgress,
completeConvolution,
setConvolutionError,
getBatchSize,
])
const pause = useCallback(() => {
isPausedRef.current = true
pauseConvolution()
}, [pauseConvolution])
const resume = useCallback(() => {
isPausedRef.current = false
resumeConvolution()
}, [resumeConvolution])
const stop = useCallback(() => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current)
animationRef.current = null
}
isPausedRef.current = false
stepModeRef.current = false
generatorRef.current = null
stopConvolution()
}, [stopConvolution])
const step = useCallback(() => {
if (!generatorRef.current) return
stepModeRef.current = true
const result = generatorRef.current.next()
if (!result.done) {
updateConvolutionStep(result.value)
} else if (result.value && result.value.x === -1) {
const output = convolveImage(originalImageData!, kernel, padding, normalize)
completeConvolution(output)
}
}, [originalImageData, kernel, padding, normalize, updateConvolutionStep, completeConvolution])
const reset = useCallback(() => {
stop()
resetConvolution()
}, [stop, resetConvolution])
const toggleStepMode = useCallback((enabled: boolean) => {
stepModeRef.current = enabled
}, [])
useEffect(() => {
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current)
}
}
}, [])
return {
convolution,
runConvolution,
pause,
resume,
stop,
step,
reset,
toggleStepMode,
isRunning: convolution.status === 'running',
isPaused: convolution.status === 'paused',
isCompleted: convolution.status === 'completed',
canRun: !!originalImageData && !!kernel && convolution.status !== 'running',
}
} |