Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 'use client' import { useCallback, useState } from 'react' import { css } from '../../../../styled-system/css' // INLINE copy of the loader code - not imported from a module function isOpenCVReady(): boolean { if (typeof window === 'undefined') return false const cv = (window as unknown as { cv?: { imread?: unknown } }).cv return !!(cv && typeof cv.imread === 'function') } /** * Minimal test page with loader code INLINE (not imported from module). * Testing if the module bundling is causing the issue. */ export default function LoaderTestInlinePage() { const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle') const [error, setError] = useState<string | null>(null) const [time, setTime] = useState<number | null>(null) // Inline loader using useCallback - exactly like useDocumentDetection const loadOpenCVInline = useCallback(async (): Promise<boolean> => { try { if (typeof window !== 'undefined') { if (!isOpenCVReady()) { const existingScript = document.querySelector('script[src="/opencv.js"]') if (!existingScript) { await new Promise<void>((resolve, reject) => { const script = document.createElement('script') script.src = '/opencv.js' script.async = true script.onload = () => { const checkReady = () => { if (isOpenCVReady()) { resolve() } else { const cv = ( window as unknown as { cv?: { onRuntimeInitialized?: () => void } } ).cv if (cv) { const previousCallback = cv.onRuntimeInitialized cv.onRuntimeInitialized = () => { previousCallback?.() resolve() } } else { reject(new Error('OpenCV.js loaded but cv not found')) } } } checkReady() } script.onerror = () => reject(new Error('Failed to load OpenCV.js')) document.head.appendChild(script) }) } else { await new Promise<void>((resolve, reject) => { const maxWait = 30000 const startTime = Date.now() const checkReady = () => { if (isOpenCVReady()) { resolve() } else if (Date.now() - startTime > maxWait) { reject(new Error('OpenCV.js loading timed out')) } else { const cv = ( window as unknown as { cv?: { onRuntimeInitialized?: () => void } } ).cv if (cv) { const previousCallback = cv.onRuntimeInitialized cv.onRuntimeInitialized = () => { previousCallback?.() resolve() } } else { setTimeout(checkReady, 100) } } } checkReady() }) } } } return true } catch (err) { console.error('Failed to load OpenCV:', err) throw err } }, []) const handleTest = async () => { console.log('[LoaderTestInline] Button clicked') setStatus('loading') setError(null) const start = Date.now() try { console.log('[LoaderTestInline] Calling loadOpenCVInline...') const loaded = await loadOpenCVInline() console.log('[LoaderTestInline] loadOpenCVInline returned:', loaded) setTime(Date.now() - start) setStatus(loaded ? 'success' : 'error') } catch (err) { console.log('[LoaderTestInline] Error:', err) setError(err instanceof Error ? err.message : 'Unknown error') setStatus('error') } } return ( <div data-component="loader-test-inline-page" className={css({ minHeight: '100vh', bg: 'gray.900', color: 'gray.100', p: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, })} > <h1 className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Inline Loader Test</h1> <p className={css({ color: 'gray.400', mb: 4 })}> Loader code is INLINE in this component (not imported from module). </p> <button type="button" onClick={handleTest} disabled={status === 'loading'} className={css({ px: 6, py: 3, bg: 'purple.600', color: 'white', borderRadius: 'lg', fontSize: 'lg', fontWeight: 'bold', border: 'none', cursor: 'pointer', _hover: { bg: 'purple.500' }, _disabled: { opacity: 0.5, cursor: 'not-allowed' }, })} > {status === 'loading' ? 'Loading...' : 'Test Inline Loader'} </button> <div className={css({ mt: 4, textAlign: 'center' })}> <div className={css({ fontSize: 'lg' })}> Status:{' '} <span className={css({ color: status === 'success' ? 'green.400' : status === 'error' ? 'red.400' : 'gray.400', })} > {status} </span> </div> {time !== null && <div>Loaded in {time}ms</div>} {error && <div className={css({ color: 'red.400' })}>{error}</div>} </div> </div> ) } |