@visns-studio/visns-components 5.11.1 → 5.11.3

package/src/components/crm/BusinessCardOcr.jsx

@@ -6,16 +6,19 @@ import { toast } from 'react-toastify';
 import Tesseract from 'tesseract.js';
 import {
     Camera,
-    Image as ImageIcon,
-    CircleX,
-    ArrowCycle,
-    CircleCheck,
-    ArrowCounterClockwise,
-    Envelope,
-    Network,
-    Edit,
-    Plus,
-} from 'akar-icons';
+    ImagePlus,
+    X,
+    SwitchCamera,
+    CheckCircle,
+    RotateCcw,
+    Mail,
+    Globe,
+    Building2,
+    User,
+    Zap,
+    ZapOff,
+    Focus,
+} from 'lucide-react';
 
 import CustomFetch from './Fetch';
 import ocrStyles from './styles/BusinessCardOcr.module.scss';
@@ -34,6 +37,9 @@ const BusinessCardOcr = ({
     const [cameraFacing, setCameraFacing] = useState('environment'); // environment (back), user (front)
     const [availableCameras, setAvailableCameras] = useState([]);
     const [currentCameraIndex, setCurrentCameraIndex] = useState(0);
+    const [flashEnabled, setFlashEnabled] = useState(false);
+    const [isFocusing, setIsFocusing] = useState(false);
+    const [cameraReady, setCameraReady] = useState(false);
     const [isProcessing, setIsProcessing] = useState(false);
     const [extractedData, setExtractedData] = useState({});
     const [ocrProgress, setOcrProgress] = useState(0);
@@ -112,9 +118,10 @@ const BusinessCardOcr = ({
 
     const initializeCamera = async () => {
         try {
+            setCameraReady(false);
             let constraints;
 
-            // Use specific device if available cameras are detected
+            // Enhanced camera constraints with focus and quality
             if (
                 availableCameras.length > 0 &&
                 availableCameras[currentCameraIndex]
@@ -125,17 +132,25 @@ const BusinessCardOcr = ({
                             exact: availableCameras[currentCameraIndex]
                                 .deviceId,
                         },
-                        width: { ideal: 1280 },
-                        height: { ideal: 720 },
+                        width: { min: 1280, ideal: 1920, max: 3840 },
+                        height: { min: 720, ideal: 1080, max: 2160 },
+                        focusMode: ['continuous', 'auto'],
+                        exposureMode: 'auto',
+                        whiteBalanceMode: 'auto',
+                        torch: flashEnabled
                     },
                 };
             } else {
-                // Fallback to facing mode
+                // Fallback to facing mode with enhanced settings
                 constraints = {
                     video: {
                         facingMode: cameraFacing,
-                        width: { ideal: 1280 },
-                        height: { ideal: 720 },
+                        width: { min: 1280, ideal: 1920, max: 3840 },
+                        height: { min: 720, ideal: 1080, max: 2160 },
+                        focusMode: ['continuous', 'auto'],
+                        exposureMode: 'auto',
+                        whiteBalanceMode: 'auto',
+                        torch: flashEnabled
                     },
                 };
             }
@@ -147,6 +162,9 @@ const BusinessCardOcr = ({
 
             if (videoRef.current) {
                 videoRef.current.srcObject = stream;
+                videoRef.current.onloadedmetadata = () => {
+                    setCameraReady(true);
+                };
             }
         } catch (error) {
             console.error('Error accessing camera:', error);
@@ -161,9 +179,80 @@ const BusinessCardOcr = ({
         }
     };
 
-    const capturePhoto = useCallback(() => {
+    // Autofocus trigger before capture
+    const triggerAutofocus = async () => {
+        if (!cameraStream) return;
+        
+        setIsFocusing(true);
+        try {
+            const track = cameraStream.getVideoTracks()[0];
+            const capabilities = track.getCapabilities();
+            
+            if (capabilities.focusMode && capabilities.focusMode.includes('auto')) {
+                await track.applyConstraints({
+                    advanced: [{ focusMode: 'auto' }]
+                });
+                
+                // Wait for focus to settle
+                await new Promise(resolve => setTimeout(resolve, 1000));
+            }
+        } catch (error) {
+            console.warn('Autofocus failed:', error);
+        } finally {
+            setIsFocusing(false);
+        }
+    };
+
+    // Image preprocessing pipeline
+    const preprocessImage = async (imageBlob) => {
+        return new Promise((resolve) => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const img = new Image();
+            
+            img.onload = () => {
+                // Step 1: Optimal sizing (2400px width max for OCR)
+                const maxWidth = 2400;
+                const scale = Math.min(maxWidth / img.width, maxWidth / img.height, 1);
+                canvas.width = img.width * scale;
+                canvas.height = img.height * scale;
+                
+                // Step 2: Draw with anti-aliasing disabled for sharp text
+                ctx.imageSmoothingEnabled = false;
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                
+                // Step 3: Enhance contrast and brightness
+                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                const data = imageData.data;
+                
+                for (let i = 0; i < data.length; i += 4) {
+                    // Increase contrast (1.4x) and brightness (+20) for better OCR
+                    data[i] = Math.min(255, Math.max(0, data[i] * 1.4 + 20));     // Red
+                    data[i + 1] = Math.min(255, Math.max(0, data[i + 1] * 1.4 + 20)); // Green
+                    data[i + 2] = Math.min(255, Math.max(0, data[i + 2] * 1.4 + 20)); // Blue
+                }
+                
+                ctx.putImageData(imageData, 0, 0);
+                
+                // Step 4: Convert to high-quality PNG for OCR
+                canvas.toBlob(resolve, 'image/png', 1.0);
+            };
+            
+            img.onerror = () => {
+                console.warn('Image preprocessing failed, using original');
+                resolve(imageBlob);
+            };
+            
+            img.src = URL.createObjectURL(imageBlob);
+        });
+    };
+
+    const capturePhoto = useCallback(async () => {
         if (!videoRef.current || !canvasRef.current) return;
 
+        // Trigger autofocus before capture
+        await triggerAutofocus();
+
         const video = videoRef.current;
         const canvas = canvasRef.current;
         const context = canvas.getContext('2d');
@@ -173,15 +262,17 @@ const BusinessCardOcr = ({
         context.drawImage(video, 0, 0);
 
         canvas.toBlob(
-            (blob) => {
-                setCapturedImage(blob);
+            async (blob) => {
+                // Preprocess image for better OCR
+                const processedBlob = await preprocessImage(blob);
+                setCapturedImage(processedBlob);
                 setCurrentStep('preview');
                 stopCamera();
             },
             'image/jpeg',
-            0.9
+            0.95
         );
-    }, []);
+    }, [cameraStream]);
 
     const switchCamera = () => {
         if (availableCameras.length > 1) {
@@ -196,6 +287,28 @@ const BusinessCardOcr = ({
         }
     };
 
+    // Toggle flash/torch
+    const toggleFlash = async () => {
+        if (!cameraStream) return;
+        
+        try {
+            const track = cameraStream.getVideoTracks()[0];
+            const capabilities = track.getCapabilities();
+            
+            if (capabilities.torch) {
+                await track.applyConstraints({
+                    advanced: [{ torch: !flashEnabled }]
+                });
+                setFlashEnabled(!flashEnabled);
+            } else {
+                toast.warn('Flash not supported on this camera');
+            }
+        } catch (error) {
+            console.warn('Flash toggle failed:', error);
+            toast.warn('Unable to control flash');
+        }
+    };
+
     const retakePhoto = () => {
         setCapturedImage(null);
         setCurrentStep('camera');
@@ -254,6 +367,55 @@ const BusinessCardOcr = ({
         event.target.value = '';
     };
 
+    // Advanced OCR with optimized configuration
+    const performAdvancedOCR = async (imageBlob) => {
+        const ocrConfig = {
+            logger: (m) => {
+                if (m.status === 'recognizing text') {
+                    const progress = Math.round(m.progress * 100);
+                    setOcrProgress(progress);
+                }
+            },
+            options: {
+                tessedit_pageseg_mode: '6', // Single uniform block
+                tessedit_char_whitelist: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghklmnopqrstuvwxyz0123456789@.-_+()/ ',
+                tessedit_ocr_engine_mode: '1', // Neural nets LSTM engine
+                preserve_interword_spaces: '1',
+                tessjs_create_pdf: '0',
+                tessjs_create_hocr: '0'
+            }
+        };
+
+        try {
+            // Pass 1: Standard recognition (60% of progress)
+            setOcrProgress(10);
+            const result1 = await Tesseract.recognize(imageBlob, 'eng', ocrConfig);
+            setOcrProgress(60);
+            
+            // Pass 2: Alternative segmentation for stubborn text (40% of progress)
+            const altConfig = {
+                ...ocrConfig,
+                options: { ...ocrConfig.options, tessedit_pageseg_mode: '8' } // Single word
+            };
+            const result2 = await Tesseract.recognize(imageBlob, 'eng', altConfig);
+            setOcrProgress(100);
+            
+            // Combine results - prefer the longer, more complete text
+            const text1 = result1.data.text.trim();
+            const text2 = result2.data.text.trim();
+            const finalText = text1.length > text2.length ? text1 : text2;
+            
+            console.log('OCR Result 1:', text1);
+            console.log('OCR Result 2:', text2);
+            console.log('Final Text:', finalText);
+            
+            return finalText;
+        } catch (error) {
+            console.error('Advanced OCR failed:', error);
+            throw error;
+        }
+    };
+
     const processBusinessCard = async () => {
         if (!capturedImage) return;
 
@@ -262,17 +424,8 @@ const BusinessCardOcr = ({
         setOcrProgress(0);
 
         try {
-            const result = await Tesseract.recognize(capturedImage, 'eng', {
-                logger: (m) => {
-                    if (m.status === 'recognizing text') {
-                        const progress = Math.round(m.progress * 100);
-                        setOcrProgress(progress);
-                    }
-                },
-            });
-
-            const text = result.data.text;
-            const parsedData = parseExtractedText(text);
+            const text = await performAdvancedOCR(capturedImage);
+            const parsedData = intelligentFieldMapping(text);
             setExtractedData({ ...parsedData, rawText: text });
             setCurrentStep('results');
             toast.success('Business card processed successfully!');
@@ -348,10 +501,10 @@ const BusinessCardOcr = ({
         const spaceRatio = spaces / total;
 
         // Skip if mostly symbols
-        if (symbolRatio > 0.3) return true;
+        if (symbolRatio > 0.4) return true;
 
         // Skip if too many consecutive spaces or weird spacing
-        if (spaceRatio > 0.4) return true;
+        if (spaceRatio > 0.5) return true;
 
         // Skip if it's all numbers or mostly numbers (unless it looks like a phone)
         if (
@@ -361,10 +514,34 @@ const BusinessCardOcr = ({
         )
             return true;
 
-        // Skip lines that look like formatting artifacts
-        const formatArtifacts =
-            /^[.\-_|]+$|^[^a-zA-Z]*[|]+[^a-zA-Z]*$|^\s*[.]\s*[A-Z]?\s*$/;
-        if (formatArtifacts.test(trimmed)) return true;
+        // Enhanced formatting artifacts detection
+        const formatArtifacts = [
+            /^[.\-_|>]+$/,  // Lines of just punctuation
+            /^[^a-zA-Z]*[|>]+[^a-zA-Z]*$/,  // Lines with pipes/arrows mixed with symbols
+            /^\s*[.]\s*[A-Z]?\s*$/,  // Dots with random letters
+            /^[A-Z]\s*[>|]\s*[|]*\s*[A-Za-z\.]*\s*[|]*$/,  // Pattern like "I | I.egal"
+            /^[)>|.\s]{3,}$/,  // Lines of mixed symbols
+            /^[a-zA-Z]\s*[)>|.\s]+$/,  // Single letter followed by symbols
+            /^[\s\d§.\-_]+$/,  // Lines of numbers and symbols only
+            /^[EF]{2,}[.\s]*$/,  // Repeated E or F letters (common OCR errors)
+            // New patterns for the current example
+            /^[A-Z\s]{4,}[R\s]{2,}.*$/,  // "HEIR A NR RS RR rn ORRIN"
+            /^[A-Z][A-Z\s]{3,}[A-Z].*$/,  // All caps with spaces
+            /^[—\-]\s*[A-Za-z]{1,3}\s*[§].*$/,  // "— Cl § ae"
+            /^[&§¢”]+.*$/,  // Lines starting with symbols
+            /^[,\-'\(¢¢”]+.*$/,  // Lines starting with punctuation
+            /^\d+\s*[A-Za-z\s]{1,10}\s*[¢”]+.*$/,  // "94 Level 3 16 Irwin S ¢"
+            /^[a-z]{1,4}\s*[A-Za-z]\s*[b]\s*[A-Za-z]\s*[b][ef]\s*[fs].*$/,  // "dose I b E be fs"
+            /^\d+\s*[i]\s*[A-Za-z]{1,3}\s*\d+\s*[A-Za-z]{1,3}$/,  // "3 i Ee 4 Le"
+            /^[x]\s*[A-Za-z]{1,3}\s*[A-Z]{1,3}\s*[&]+.*$/,  // "x Ei FY &"
+            /^[A-Z]{3,}.*[R]{2,}.*$/,  // Multiple caps with repeated R's
+            /.*[die]$/,  // Lines ending with "die"
+            /^[ORRIN]{3,}.*$/,  // Lines with repeated caps like ORRIN
+        ];
+        
+        for (const pattern of formatArtifacts) {
+            if (pattern.test(trimmed)) return true;
+        }
 
         // Skip if it has random character combinations
         const randomPattern =
@@ -394,7 +571,7 @@ const BusinessCardOcr = ({
 
             // Check for excessive symbol contamination in words
             const symbolsInWord = (word.match(/[^a-zA-Z0-9]/g) || []).length;
-            if (symbolsInWord / word.length > 0.3) {
+            if (symbolsInWord / word.length > 0.4) {
                 gibberishWords++;
                 continue;
             }
@@ -427,22 +604,33 @@ const BusinessCardOcr = ({
             }
         }
 
-        // If more than 60% of words are gibberish or mixed case, consider it gibberish
+        // If more than 50% of words are gibberish or mixed case, consider it gibberish
         const gibberishRatio = gibberishWords / Math.max(totalWords, 1);
         const mixedCaseRatio = mixedCaseWords / Math.max(totalWords, 1);
 
-        if (gibberishRatio > 0.6) return true;
-        if (mixedCaseRatio > 0.5 && totalWords > 2) return true;
+        if (gibberishRatio > 0.5) return true;
+        if (mixedCaseRatio > 0.4 && totalWords > 2) return true;
 
-        // Check for specific gibberish patterns
+        // Check for specific gibberish patterns from your example
         const gibberishPatterns = [
-            // Patterns like ": Re : Bei oc oC"
+            // Patterns like "> | I.egal Practitioner Director |"
+            /^[>|]\s*[|]\s*[I]\.[a-zA-Z]+/,
+            // Patterns like "urae (08) 9220 4402" (partial words)
+            /^[a-z]{2,4}\s*\(/,
+            // Patterns like ") . 3 dh § 8" (symbols with scattered letters/numbers)
+            /^[)].+[§].+$/,
+            // Patterns like "» 3 "e |" (mixed symbols)
+            /^[»].+["e].+[|]/,
+            // Patterns like "oy Level" (partial words)
+            /^[a-z]{1,2}\s+[A-Z][a-z]+/,
+            // Patterns like "EE. Se" (repeated letters)
+            /^[A-Z]{2,}[.]\s*[A-Z][a-z]$/,
+            // Patterns like "fio) i ) L\" (mixed parentheses and letters)
+            /^[a-z]{2,3}[)].*[)].*[L\\]/,
+            // Original patterns
             /^[:;]\s*[A-Za-z]{1,3}\s*[:;]\s*[A-Za-z]{1,4}\s+[a-z]{1,2}\s+[a-zA-Z]{1,2}$/,
-            // Patterns like "HE — SE TL Beant 2 Es Re Se"
             /^[A-Z]{1,3}\s*[—\-]\s*[A-Z]{1,3}\s+[A-Z]{1,3}\s+[A-Za-z]{1,6}\s+\d+\s+[A-Za-z]{1,3}\s+[A-Za-z]{1,3}\s+[A-Za-z]{1,3}$/,
-            // Patterns with excessive brackets, symbols mixed with short words
             /[>\[\]]{2,}|[A-Za-z]{1,3}\s+[>\[\]<]+\s+[A-Za-z]{1,3}/,
-            // Excessive punctuation mixed with short letter sequences
             /^[^a-zA-Z]*[a-zA-Z]{1,2}[^a-zA-Z]+[a-zA-Z]{1,3}[^a-zA-Z]+.*$/,
         ];
 
@@ -503,6 +691,8 @@ const BusinessCardOcr = ({
         switch (fieldType) {
             case 'name':
                 // For names: only letters, spaces, apostrophes, periods, hyphens
+                // First remove pipe symbols and other common artifacts
+                cleaned = cleaned.replace(/[|]/g, ' '); // Replace pipes with spaces
                 cleaned = cleaned.replace(/[^a-zA-Z\s'.-]/g, '');
                 // Remove excessive spaces
                 cleaned = cleaned.replace(/\s+/g, ' ');
@@ -512,9 +702,11 @@ const BusinessCardOcr = ({
 
             case 'company':
                 // For companies: letters, numbers, spaces, common punctuation
+                // Remove pipe characters and other artifacts first
+                cleaned = cleaned.replace(/[|]/g, ' '); // Replace pipes with spaces
                 cleaned = cleaned.replace(/[^a-zA-Z0-9\s&.,'-]/g, '');
-                // Remove pipe characters and equals signs that OCR often mistakes
-                cleaned = cleaned.replace(/[|="]/g, '');
+                // Remove equals signs that OCR often mistakes
+                cleaned = cleaned.replace(/[="]/g, '');
                 // Remove excessive spaces
                 cleaned = cleaned.replace(/\s+/g, ' ');
                 // Remove leading/trailing punctuation except periods
@@ -526,9 +718,11 @@ const BusinessCardOcr = ({
 
             case 'position':
                 // For positions: letters, spaces, common punctuation
+                // Remove pipe characters and other artifacts first
+                cleaned = cleaned.replace(/[|]/g, ' '); // Replace pipes with spaces
                 cleaned = cleaned.replace(/[^a-zA-Z\s&.,'-]/g, '');
-                // Remove pipe characters and equals signs
-                cleaned = cleaned.replace(/[|="]/g, '');
+                // Remove equals signs
+                cleaned = cleaned.replace(/[="]/g, '');
                 // Remove excessive spaces
                 cleaned = cleaned.replace(/\s+/g, ' ');
                 // Remove leading/trailing punctuation
@@ -555,7 +749,7 @@ const BusinessCardOcr = ({
 
             default:
                 // General cleaning: remove obvious artifacts
-                cleaned = cleaned.replace(/[|="]/g, '');
+                cleaned = cleaned.replace(/[|="]/g, ' '); // Replace pipes with spaces
                 cleaned = cleaned.replace(/\s+/g, ' ');
         }
 
@@ -568,7 +762,369 @@ const BusinessCardOcr = ({
         return cleaned;
     };
 
+    // Helper function to capitalize first letter of each word (ucfirst)
+    const ucFirstWords = (text) => {
+        if (!text || typeof text !== 'string') return '';
+        
+        return text
+            .toLowerCase()
+            .split(' ')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    };
+
+    // Intelligent field mapping with confidence scoring
+    const intelligentFieldMapping = (rawText) => {
+        console.log('Raw OCR Text:', rawText);
+        
+        const lines = rawText.split('\n').filter(line => line.trim().length > 0);
+        const fieldCandidates = {};
+        
+        // Enhanced email detection
+        const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/gi;
+        const emails = rawText.match(emailRegex);
+        if (emails && emails.length > 0) {
+            const cleanEmail = cleanFieldValue(emails[0], 'email');
+            if (cleanEmail) {
+                fieldCandidates.email = cleanEmail;
+                console.log('Found email:', cleanEmail);
+            }
+        }
+        
+        // Enhanced phone detection with international support
+        const phoneRegex = /(\+?[\d\s\-\(\)]{8,20})/g;
+        const phoneMatches = rawText.match(phoneRegex);
+        if (phoneMatches) {
+            const validPhones = phoneMatches.filter(p => {
+                const digits = p.replace(/\D/g, '');
+                return digits.length >= 8 && digits.length <= 15;
+            });
+            if (validPhones.length > 0) {
+                const cleanPhone = cleanFieldValue(validPhones[0].trim(), 'phone');
+                if (cleanPhone) {
+                    fieldCandidates.mobile = cleanPhone;
+                    fieldCandidates.phone = cleanPhone; // Backward compatibility
+                    console.log('Found phone:', cleanPhone);
+                }
+            }
+        }
+        
+        // Website detection
+        const websiteRegex = /((?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?)/gi;
+        const websites = rawText.match(websiteRegex)?.filter(w => !w.includes('@'));
+        if (websites && websites.length > 0) {
+            const cleanWebsite = cleanFieldValue(websites[0], 'website');
+            if (cleanWebsite) {
+                fieldCandidates.website = cleanWebsite;
+                console.log('Found website:', cleanWebsite);
+            }
+        }
+        
+        // Advanced name detection
+        const namePatterns = detectNames(lines, fieldCandidates);
+        console.log('Name detection candidates:', namePatterns);
+        console.log('Lines being processed for names:', lines.map((line, i) => `${i}: "${line}"`));
+        if (namePatterns.length > 0) {
+            const bestName = namePatterns[0];
+            fieldCandidates.firstname = bestName.first;
+            fieldCandidates.first_name = bestName.first; // Backward compatibility
+            if (bestName.last && bestName.last.trim()) {
+                fieldCandidates.lastname = bestName.last;
+                fieldCandidates.last_name = bestName.last; // Backward compatibility
+                console.log('Selected name:', bestName.first, '|', bestName.last, 'from line:', bestName.originalLine, 'confidence:', bestName.confidence);
+            } else {
+                console.log('Selected name (first only):', bestName.first, 'from line:', bestName.originalLine, 'confidence:', bestName.confidence);
+                console.log('Last name was empty or invalid:', `"${bestName.last}"`);
+            }
+        } else {
+            console.log('No name patterns detected. Lines processed:', lines.map((line, i) => `${i}: "${line}"`));
+        }
+        
+        // Position detection with context awareness
+        const positionCandidates = detectPosition(lines, fieldCandidates);
+        console.log('Position detection candidates:', positionCandidates);
+        if (positionCandidates.length > 0) {
+            fieldCandidates.position = ucFirstWords(positionCandidates[0].text);
+            console.log('Selected position:', fieldCandidates.position, 'confidence:', positionCandidates[0].confidence);
+        }
+        
+        // Company detection with improved logic
+        const companyCandidates = detectCompany(lines, fieldCandidates);
+        console.log('Company detection candidates:', companyCandidates);
+        if (companyCandidates.length > 0) {
+            fieldCandidates.company = ucFirstWords(companyCandidates[0].text);
+            console.log('Selected company:', fieldCandidates.company, 'confidence:', companyCandidates[0].confidence);
+        }
+        
+        // Collect unused lines
+        const unusedLines = [];
+        lines.forEach((line, index) => {
+            const trimmedLine = line.trim();
+            if (!isLikelyOCRArtifact(trimmedLine) && 
+                !Object.values(fieldCandidates).some(value => 
+                    typeof value === 'string' && value.includes(trimmedLine)
+                )) {
+                const cleanedLine = cleanFieldValue(trimmedLine, 'general');
+                if (cleanedLine && cleanedLine.length > 1) {
+                    unusedLines.push({
+                        text: cleanedLine,
+                        index: index,
+                    });
+                }
+            }
+        });
+        
+        fieldCandidates._unusedData = unusedLines;
+        console.log('Final field candidates:', fieldCandidates);
+        
+        return fieldCandidates;
+    };
+
+    // Enhanced name detection with ML-like scoring
+    const detectNames = (lines, existingFields) => {
+        const namePatterns = [
+            /^[A-Z][a-z]+ [A-Z][a-z]+$/, // John Smith
+            /^[A-Z]\. [A-Z][a-z]+$/, // J. Smith
+            /^[A-Z][a-z]+ [A-Z]\. [A-Z][a-z]+$/, // John A. Smith
+            /^[A-Z][a-z]+$/, // John (single name)
+            /^[A-Z][a-z]+ [A-Z][a-z]+ [A-Z][a-z]+$/, // John Middle Smith
+        ];
+        
+        const candidates = [];
+        
+        lines.forEach((line, index) => {
+            const cleanLine = line.trim();
+            
+            // Skip lines with known field data
+            if (existingFields.email && cleanLine.includes(existingFields.email)) return;
+            if (existingFields.mobile && cleanLine.includes(existingFields.mobile)) return;
+            
+            // Pre-clean the line to handle artifacts like pipes
+            const preCleanedLine = cleanLine.replace(/[|]/g, ' ').replace(/\s+/g, ' ').trim();
+            
+            // Skip obvious artifacts (but check both original and pre-cleaned)
+            if (isLikelyOCRArtifact(cleanLine) && isLikelyOCRArtifact(preCleanedLine)) return;
+            
+            // Check against name patterns on both original and pre-cleaned text
+            const testLines = [cleanLine, preCleanedLine];
+            
+            testLines.forEach(testLine => {
+                namePatterns.forEach(pattern => {
+                    if (pattern.test(testLine)) {
+                        const nameWords = testLine.split(' ').filter(w => w.length > 0);
+                        const confidence = calculateNameConfidence(testLine, index, lines.length);
+                        
+                        // Lower threshold for better name capture
+                        if (confidence > 0.2) {
+                            const rawLast = nameWords.slice(1).join(' ');
+                            const cleanedFirst = cleanFieldValue(nameWords[0], 'name');
+                            const cleanedLast = cleanFieldValue(rawLast, 'name');
+                            
+                            console.log(`Processing name: words=[${nameWords.join(', ')}], rawLast="${rawLast}", cleanedFirst="${cleanedFirst}", cleanedLast="${cleanedLast}"`);
+                            
+                            if (cleanedFirst) {
+                                console.log(`Name candidate from "${testLine}": first="${cleanedFirst}", last="${cleanedLast}", confidence=${confidence}`);
+                                candidates.push({
+                                    first: cleanedFirst,
+                                    last: cleanedLast || '', // Ensure last is always a string
+                                    confidence: confidence,
+                                    index: index,
+                                    originalLine: cleanLine
+                                });
+                            }
+                        }
+                    }
+                });
+            });
+            
+            // Special case: Check for names that might not match strict patterns
+            // but have strong name characteristics (use pre-cleaned text)
+            const nameWords = preCleanedLine.split(' ').filter(w => w.length > 0);
+            if (nameWords.length === 2 || nameWords.length === 3) {
+                const allProperCase = nameWords.every(word => 
+                    word.length > 0 && 
+                    word[0] === word[0].toUpperCase() && 
+                    word.slice(1) === word.slice(1).toLowerCase() &&
+                    /^[A-Za-z]+$/.test(word) // Only letters, no symbols
+                );
+                
+                if (allProperCase) {
+                    const confidence = calculateNameConfidence(preCleanedLine, index, lines.length);
+                    if (confidence > 0.15) { // Even lower threshold for proper case names
+                        const rawLast = nameWords.slice(1).join(' ');
+                        const cleanedFirst = cleanFieldValue(nameWords[0], 'name');
+                        const cleanedLast = cleanFieldValue(rawLast, 'name');
+                        
+                        console.log(`Processing proper case name: words=[${nameWords.join(', ')}], rawLast="${rawLast}", cleanedFirst="${cleanedFirst}", cleanedLast="${cleanedLast}"`);
+                        
+                        if (cleanedFirst) {
+                            console.log(`Proper case name candidate from "${preCleanedLine}": first="${cleanedFirst}", last="${cleanedLast}", confidence=${confidence + 0.1}`);
+                            candidates.push({
+                                first: cleanedFirst,
+                                last: cleanedLast || '', // Ensure last is always a string
+                                confidence: confidence + 0.1, // Bonus for proper case
+                                index: index,
+                                originalLine: cleanLine
+                            });
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Sort by confidence and position (names usually appear early)
+        return candidates.sort((a, b) => 
+            (b.confidence + (1 - b.index / lines.length) * 0.3) - 
+            (a.confidence + (1 - a.index / lines.length) * 0.3)
+        );
+    };
+
+    // Calculate name confidence based on various factors
+    const calculateNameConfidence = (text, index, totalLines) => {
+        let confidence = 0.5; // Base confidence
+        
+        // Bonus for being early in the text (names usually come first)
+        if (index < totalLines * 0.3) confidence += 0.3;
+        
+        // Bonus for proper capitalization
+        const words = text.split(' ');
+        const properlyCapitalized = words.every(word => 
+            word.length > 0 && word[0] === word[0].toUpperCase() && 
+            word.slice(1) === word.slice(1).toLowerCase()
+        );
+        if (properlyCapitalized) confidence += 0.2;
+        
+        // Penalty for being too long (unlikely to be just a name)
+        if (text.length > 30) confidence -= 0.2;
+        
+        // Bonus for common name lengths
+        if (text.length >= 5 && text.length <= 20) confidence += 0.1;
+        
+        return Math.min(1, Math.max(0, confidence));
+    };
+
+    // Position detection with business context
+    const detectPosition = (lines, existingFields) => {
+        const positionKeywords = [
+            'director', 'manager', 'ceo', 'cto', 'cfo', 'president', 'vice president',
+            'senior', 'lead', 'head', 'chief', 'supervisor', 'coordinator',
+            'specialist', 'analyst', 'engineer', 'developer', 'designer',
+            'consultant', 'sales', 'marketing', 'lawyer', 'attorney', 'practitioner',
+            'partner', 'associate', 'executive', 'officer', 'founder', 'owner',
+            'legal practitioner' // Added for the specific example
+        ];
+        
+        const candidates = [];
+        
+        lines.forEach((line, index) => {
+            const cleanLine = line.trim();
+            const lowerLine = cleanLine.toLowerCase();
+            
+            // Skip if line contains email/phone
+            if (existingFields.email && cleanLine.includes(existingFields.email)) return;
+            if (existingFields.mobile && cleanLine.includes(existingFields.mobile)) return;
+            
+            // Pre-clean the line to handle artifacts like pipes
+            const preCleanedLine = cleanLine.replace(/[|]/g, ' ').replace(/\s+/g, ' ').trim();
+            const preCleanedLower = preCleanedLine.toLowerCase();
+            
+            // Calculate keyword score on both original and pre-cleaned text
+            let keywordScore = 0;
+            let matchedKeywords = 0;
+            
+            positionKeywords.forEach(keyword => {
+                if (lowerLine.includes(keyword) || preCleanedLower.includes(keyword)) {
+                    keywordScore += keyword.length / Math.max(cleanLine.length, preCleanedLine.length);
+                    matchedKeywords++;
+                }
+            });
+            
+            // Bonus for multiple keyword matches
+            if (matchedKeywords > 1) keywordScore *= 1.5;
+            
+            if (keywordScore > 0.1) {
+                const cleanedText = cleanFieldValue(preCleanedLine, 'position');
+                if (cleanedText && cleanedText.length > 2) {
+                    candidates.push({
+                        text: cleanedText,
+                        confidence: Math.min(0.95, keywordScore * 2),
+                        index: index
+                    });
+                }
+            }
+        });
+        
+        return candidates.sort((a, b) => b.confidence - a.confidence);
+    };
+
+    // Company detection with improved logic
+    const detectCompany = (lines, existingFields) => {
+        const companyIndicators = [
+            'inc', 'corp', 'ltd', 'llc', 'company', 'co.', 'corporation',
+            'incorporated', 'limited', 'enterprises', 'group', 'solutions',
+            'services', 'systems', 'technologies', 'tech', 'consulting',
+            'law', 'legal', 'firm', 'associates', 'partners', 'curae' // Added for the specific example
+        ];
+        
+        const candidates = [];
+        
+        lines.forEach((line, index) => {
+            const cleanLine = line.trim();
+            const lowerLine = cleanLine.toLowerCase();
+            
+            // Skip known fields
+            if (existingFields.email && cleanLine.includes(existingFields.email)) return;
+            if (existingFields.mobile && cleanLine.includes(existingFields.mobile)) return;
+            if (existingFields.firstname && cleanLine.includes(existingFields.firstname)) return;
+            
+            // Pre-clean the line to handle artifacts like pipes
+            const preCleanedLine = cleanLine.replace(/[|]/g, ' ').replace(/\s+/g, ' ').trim();
+            const preCleanedLower = preCleanedLine.toLowerCase();
+            
+            const hasCompanyIndicator = companyIndicators.some(
+                indicator => lowerLine.includes(indicator) || preCleanedLower.includes(indicator)
+            );
+            const isAllCaps = cleanLine === cleanLine.toUpperCase() && cleanLine.length > 2;
+            const cleanedWords = preCleanedLine.split(/\s+/);
+            const letterRatio = (preCleanedLine.match(/[a-zA-Z]/g) || []).length / preCleanedLine.length;
+            
+            let confidence = 0;
+            
+            // High confidence for company indicators
+            if (hasCompanyIndicator) confidence += 0.7;
+            
+            // Moderate confidence for all caps (common for company names)
+            if (isAllCaps) confidence += 0.4;
+            
+            // Bonus for reasonable length and structure
+            if (letterRatio > 0.6 && preCleanedLine.length >= 3 && preCleanedLine.length <= 40) {
+                confidence += 0.2;
+            }
+            
+            // Bonus for being positioned after name/position
+            if (index > 0 && index < lines.length * 0.7) confidence += 0.1;
+            
+            if (confidence > 0.3) {
+                const cleanedText = cleanFieldValue(preCleanedLine, 'company');
+                if (cleanedText && cleanedText.length > 2) {
+                    candidates.push({
+                        text: cleanedText,
+                        confidence: Math.min(0.95, confidence),
+                        index: index
+                    });
+                }
+            }
+        });
+        
+        return candidates.sort((a, b) => b.confidence - a.confidence);
+    };
+
     const parseExtractedText = (text) => {
+        // Use the new intelligent field mapping system
+        return intelligentFieldMapping(text);
+    };
+
+    const parseExtractedTextLegacy = (text) => {
         const lines = text.split('\n').filter((line) => line.trim());
         const parsed = {};
         const unusedLines = [];
@@ -831,6 +1387,8 @@ const BusinessCardOcr = ({
         return parsed;
     };
 
+    // parseExtractedText now uses intelligent mapping above
+
     // Helper function to get field input type
     const getFieldInputType = (fieldId) => {
         const fieldTypeMap = {
@@ -849,14 +1407,14 @@ const BusinessCardOcr = ({
     // Helper function to get field icon
     const getFieldIcon = (fieldId) => {
         const iconMap = {
-            email: <Envelope size={16} />,
+            email: <Mail size={16} />,
             mobile: null,
             phone: null,
-            website: <Network size={16} />,
+            website: <Globe size={16} />,
             position: null,
-            company: <Network size={16} />,
-            firstname: <Edit size={16} />,
-            lastname: <Edit size={16} />,
+            company: <Building2 size={16} />,
+            firstname: <User size={16} />,
+            lastname: <User size={16} />,
         };
         return iconMap[fieldId];
     };
@@ -1086,7 +1644,7 @@ const BusinessCardOcr = ({
                         onClick={handleClose}
                         className={ocrStyles.closeButton}
                     >
-                        <CircleX size={24} />
+                        <X size={24} />
                     </button>
                 </div>
 
@@ -1094,7 +1652,7 @@ const BusinessCardOcr = ({
                     {currentStep === 'camera' && (
                         <div className={ocrStyles.cameraContainer}>
                             <div className={ocrStyles.captureGuide}>
-                                <p>Position business card within the frame</p>
+                                <p>Position business card within the frame and tap to focus</p>
                             </div>
                             <div className={ocrStyles.videoWrapper}>
                                 <video
@@ -1103,45 +1661,73 @@ const BusinessCardOcr = ({
                                     playsInline
                                     muted
                                     className={ocrStyles.cameraVideo}
+                                    onClick={triggerAutofocus}
                                 />
-                                <div className={ocrStyles.cameraOverlay}></div>
+                                {/* Enhanced camera overlay with focus frame */}
+                                <div className={ocrStyles.cameraOverlay}>
+                                    <div className={ocrStyles.focusFrame}>
+                                        {isFocusing && (
+                                            <div className={ocrStyles.focusIndicator}>
+                                                <Focus className={ocrStyles.focusIcon} />
+                                                <span>Focusing...</span>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
                             </div>
 
                             <div className={ocrStyles.cameraControls}>
-                                {availableCameras.length > 1 && (
+                                <div className={ocrStyles.controlsTop}>
+                                    {availableCameras.length > 1 && (
+                                        <button
+                                            onClick={switchCamera}
+                                            className={ocrStyles.controlButton}
+                                            title="Switch Camera"
+                                        >
+                                            <SwitchCamera size={20} />
+                                        </button>
+                                    )}
+                                    
+                                    {/* Flash toggle button */}
+                                    <button
+                                        onClick={toggleFlash}
+                                        className={`${ocrStyles.controlButton} ${flashEnabled ? ocrStyles.active : ''}`}
+                                        title={flashEnabled ? 'Turn off flash' : 'Turn on flash'}
+                                    >
+                                        {flashEnabled ? <Zap size={20} /> : <ZapOff size={20} />}
+                                    </button>
+                                </div>
+
+                                <div className={ocrStyles.controlsBottom}>
                                     <button
-                                        onClick={switchCamera}
+                                        onClick={() =>
+                                            fileInputRef.current?.click()
+                                        }
                                         className={ocrStyles.secondaryButton}
                                     >
-                                        <ArrowCycle size={20} />
-                                        Switch Camera
+                                        <ImagePlus size={20} />
+                                        Upload
                                     </button>
-                                )}
 
-                                <button
-                                    onClick={capturePhoto}
-                                    className={ocrStyles.captureButton}
-                                >
-                                    <Camera size={24} />
-                                    Capture
-                                </button>
+                                    <button
+                                        onClick={capturePhoto}
+                                        className={`${ocrStyles.captureButton} ${isFocusing ? ocrStyles.focusing : ''}`}
+                                        disabled={isFocusing}
+                                    >
+                                        <Camera size={28} />
+                                        {isFocusing ? 'Focusing...' : 'Capture'}
+                                    </button>
 
-                                <input
-                                    type="file"
-                                    ref={fileInputRef}
-                                    onChange={handleFileUpload}
-                                    accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
-                                    style={{ display: 'none' }}
-                                />
-                                <button
-                                    onClick={() =>
-                                        fileInputRef.current?.click()
-                                    }
-                                    className={ocrStyles.secondaryButton}
-                                >
-                                    <ImageIcon size={24} />
-                                    Upload Image
-                                </button>
+                                    <input
+                                        type="file"
+                                        ref={fileInputRef}
+                                        onChange={handleFileUpload}
+                                        accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
+                                        style={{ display: 'none' }}
+                                    />
+                                    
+                                    <div className={ocrStyles.placeholder}></div>
+                                </div>
                             </div>
                         </div>
                     )}
@@ -1161,7 +1747,7 @@ const BusinessCardOcr = ({
                                     onClick={retakePhoto}
                                     className={ocrStyles.secondaryButton}
                                 >
-                                    <ArrowCounterClockwise size={20} />
+                                    <RotateCcw size={20} />
                                     Retake
                                 </button>
 
@@ -1170,7 +1756,7 @@ const BusinessCardOcr = ({
                                     disabled={isProcessing}
                                     className={ocrStyles.primaryButton}
                                 >
-                                    <CircleCheck size={20} />
+                                    <CheckCircle size={20} />
                                     Process Card
                                 </button>
                             </div>
@@ -1231,7 +1817,7 @@ const BusinessCardOcr = ({
                                     <>
                                         <div className={ocrStyles.fieldGroup}>
                                             <label>
-                                                <Edit size={16} />
+                                                <User size={16} />
                                                 First Name
                                             </label>
                                             <input
@@ -1252,7 +1838,7 @@ const BusinessCardOcr = ({
                                         </div>
                                         <div className={ocrStyles.fieldGroup}>
                                             <label>
-                                                <Edit size={16} />
+                                                <User size={16} />
                                                 Last Name
                                             </label>
                                             <input
@@ -1273,7 +1859,7 @@ const BusinessCardOcr = ({
                                         </div>
                                         <div className={ocrStyles.fieldGroup}>
                                             <label>
-                                                <Envelope size={16} />
+                                                <Mail size={16} />
                                                 Email
                                             </label>
                                             <input
@@ -1310,7 +1896,7 @@ const BusinessCardOcr = ({
                                         </div>
                                         <div className={ocrStyles.fieldGroup}>
                                             <label>
-                                                <Network size={16} />
+                                                <Building2 size={16} />
                                                 Company
                                             </label>
                                             <input
@@ -1439,7 +2025,7 @@ const BusinessCardOcr = ({
                                     onClick={retakePhoto}
                                     className={ocrStyles.secondaryButton}
                                 >
-                                    <ImageIcon size={20} />
+                                    <ImagePlus size={20} />
                                     Scan Another
                                 </button>