\n 📷 JPEG/HEIC to HTML OCR Converter\n

\n Upload JPEG and HEIC images and convert them to searchable HTML with mathematical formula recognition\n

\n \n {/* Library Status Indicator */}\n

\n \n HEIC Converter {librariesLoaded.heic2any ? 'Ready' : 'Loading...'}\n

\n \n OCR Engine {librariesLoaded.tesseract ? 'Ready' : 'Loading...'}\n

\n \n {/* Loading Message */}\n {(!librariesLoaded.heic2any || !librariesLoaded.tesseract) && (\n

\n \n Loading processing libraries... Please wait before uploading HEIC files.\n

\n )}\n

\n\n {\n if (librariesLoaded.heic2any && librariesLoaded.tesseract) {\n fileInputRef.current?.click();\n }\n }}\n >\n

📁

\n {(!librariesLoaded.heic2any || !librariesLoaded.tesseract) \n ? 'Loading libraries... Please wait'\n : 'Drop JPEG/HEIC files here or click to browse'\n }\n

\n {(!librariesLoaded.heic2any || !librariesLoaded.tesseract)\n ? 'HEIC converter and OCR engine are loading...'\n : 'Supports multiple file upload • JPEG and HEIC formats • Mathematical formula recognition'\n }\n

\n \n

\n\n {files.length > 0 && (\n

\n Uploaded Files ({files.length})\n

\n f.isHeic) && !librariesLoaded.heic2any)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {isProcessing ? (\n <>\n \n Processing...\n \n ) : !librariesLoaded.tesseract ? (\n '⏳ Loading OCR Engine...'\n ) : files.some(f => f.isHeic) && !librariesLoaded.heic2any ? (\n '⏳ Loading HEIC Converter...'\n ) : (\n '🔍 Start OCR & Math Processing'\n )}\n \n \n Clear All\n \n

\n\n

\n {files.map((fileWithPreview) => {\n const status = processingStatus[fileWithPreview.id];\n return (\n

\n {fileWithPreview.file.name}\n

\n removeFile(fileWithPreview.id)}\n disabled={isProcessing}\n className=\"text-red-500 hover:text-red-700 ml-2 disabled:opacity-50\"\n >\n ✕\n \n

\n \n \n \n

\n Size: {(fileWithPreview.file.size / 1024).toFixed(1)} KB\n {fileWithPreview.isHeic && HEIC}\n

\n\n {status && (\n

\n \n {status.status === 'pending' && '⏳ Pending'}\n {status.status === 'converting' && '🔄 Converting HEIC'}\n {status.status === 'processing' && '🔍 Processing OCR'}\n {status.status === 'completed' && '✅ Completed'}\n {status.status === 'error' && '❌ Error'}\n \n {(status.status === 'converting' || status.status === 'processing') && (\n \n {status.progress}%\n \n )}\n

\n \n {(status.status === 'converting' || status.status === 'processing' || status.status === 'completed') && (\n

\n )}\n\n {status.status === 'completed' && status.text && (\n

\n {status.text.substring(0, 100)}\n {status.text.length > 100 && '...'}\n

\n )}\n\n {status.status === 'completed' && status.mathFormulas && status.mathFormulas.length > 0 && (\n

🧮 Math Formulas Found:

\n {status.mathFormulas.slice(0, 3).join(', ')}\n {status.mathFormulas.length > 3 && ` +${status.mathFormulas.length - 3} more`}\n

\n )}\n\n {status.status === 'error' && (\n

\n {status.error}\n

\n )}\n

\n );\n })}\n

\n \n )}\n\n {ocrResults.length > 0 && (\n

\n OCR Results ({ocrResults.length} files processed)\n

\n \n 📥 Download HTML with Math\n \n

\n\n

\n {ocrResults.map((result, index) => (\n

{result.filename}

\n \n Confidence: {result.confidence.toFixed(1)}%\n \n {result.mathFormulas && result.mathFormulas.length > 0 && (\n \n 🧮 {result.mathFormulas.length} formulas\n \n )}\n

\n {result.text.trim() || (\n No text detected\n )}\n

\n {result.mathFormulas && result.mathFormulas.length > 0 && (\n

Mathematical Formulas Detected:

\n {result.mathFormulas.map((formula, fIndex) => (\n

\n {formula}\n

\n ))}\n

\n )}\n

\n ))}\n

\n )}\n\n

Built with React, Hono, and MathJax • HEIC support via heic2any

\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();","deleted","label",[172,154],"frontend","permalink","https://www.val.town/x/MRPRRSIDENT/Jpegconversionfrtb/code/frontend/index.tsx","extension","actionData","errors"]