Issues with setting up and multiple languages

[RoseSamaras]

Hello people, I am Rose from Greece, I am building a business card reader, and I am having lots of issues with language packs, I am a noob and I use a lot of claude to help me, but i cant make it work, results are really bad, and it doesnt read Greek at all, can anyone help?

BusinessCardScanner.jsx
import React, { useState, useRef, useEffect } from 'react';
import {
Button,
VStack,
Image,
useToast,
Box,
Text,
HStack,
Center,
Spinner,
Progress,
IconButton,
Icon
} from '@chakra-ui/react';
import Webcam from 'react-webcam';
import jsQR from 'jsqr';
import { parseVCard, parseBusinessCard } from '../utils/dataExtraction';
import OCRService from '../services/ocrService';
import { MdCameraAlt, MdRefresh } from 'react-icons/md';
import { RiQrScanLine, RiCameraLine, RiRefreshLine } from 'react-icons/ri';

const CAPTURE_OPTIONS = {
width: 1920,
height: 1080,
facingMode: 'environment'
};

// BusinessCardScanner.jsx
const BusinessCardScanner = ({ onExtractedData }) => {
const [mode, setMode] = useState('qr'); // 'qr' or 'card'
const [capturedImage, setCapturedImage] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
const [extractedText, setExtractedText] = useState([]);
const [scanProgress, setScanProgress] = useState(0);
const [isInitialized, setIsInitialized] = useState(false);

const webcamRef = useRef(null);
const qrIntervalRef = useRef(null);
const canvasRef = useRef(document.createElement('canvas'));
const toast = useToast();

// QR Code scanning
useEffect(() => {
if (mode !== 'qr' || !webcamRef.current || isProcessing) return;

qrIntervalRef.current = setInterval(() => {
  const video = webcamRef.current?.video;
  if (!video || video.readyState !== video.HAVE_ENOUGH_DATA) return;

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d', { willReadFrequently: true });
  
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0);

  try {
    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height, {
      inversionAttempts: "attemptBoth"
    });

    if (code) {
      handleQRCode(code.data);
    }
  } catch (error) {
    console.error('QR scanning error:', error);
  }
}, 100);

return () => {
  if (qrIntervalRef.current) {
    clearInterval(qrIntervalRef.current);
  }
};

}, [mode, isProcessing]);

// Initialize OCR
useEffect(() => {
let mounted = true;

const initialize = async () => {
  try {
    await OCRService.getWorker();
    if (mounted) {
      setIsInitialized(true);
      toast({
        title: "Ready",
        description: "Scanner initialized successfully",
        status: "success",
        duration: 2000,
      });
    }
  } catch (error) {
    console.error('Scanner initialization error:', error);
    if (mounted) {
      toast({
        title: "Initialization Error",
        description: "Failed to initialize scanner. Please refresh the page.",
        status: "error",
        duration: 5000,
        isClosable: true,
      });
    }
  }
};

initialize();

return () => {
  mounted = false;
  OCRService.terminate();
};

}, [toast]);

const handleQRCode = async (data) => {
try {
setIsProcessing(true);

  if (data.startsWith('BEGIN:VCARD')) {
    const { vcardData, mappings } = parseVCard(data);
    setExtractedText(vcardData);
    onExtractedData({
      type: 'vcard',
      vcardData,
      mappings,
      raw: data
    });

    toast({
      title: "Success",
      description: "Contact information extracted",
      status: "success",
      duration: 2000,
    });
  } else {
    toast({
      title: "Invalid Format",
      description: "QR code must contain contact information",
      status: "warning",
      duration: 3000,
    });
  }
} catch (error) {
  console.error('QR processing error:', error);
  toast({
    title: "Error",
    description: "Failed to process QR code",
    status: "error",
    duration: 3000,
  });
} finally {
  setIsProcessing(false);
}

};

const handleCapture = async () => {
if (!webcamRef.current || !isInitialized) {
toast({
title: "Error",
description: "Camera or scanner not initialized",
status: "error",
duration: 3000,
});
return;
}

try {
  setIsProcessing(true);
  setScanProgress(20);
  
  const imageSrc = webcamRef.current.getScreenshot();
  if (!imageSrc) {
    throw new Error('Failed to capture image');
  }
  
  // Process and enhance the image
  const processedImage = await preprocessImage(imageSrc);
  setCapturedImage(processedImage);
  setScanProgress(40);
  
  // Perform OCR
  const text = await OCRService.recognize(processedImage);
  setScanProgress(80);
  
  if (!text || text.trim().length === 0) {
    throw new Error('No text was extracted from the image');
  }

  // Process the extracted text
  const lines = text
    .split('\n')
    .map(line => line.trim())
    .filter(line => line.length > 0)
    .map(line => line.replace(/\s+/g, ' ')); // Clean up extra spaces

  setExtractedText(lines);
  onExtractedData({
    type: 'ocr',
    data: lines,
    raw: text
  });

  toast({
    title: "Success",
    description: "Business card scanned successfully",
    status: "success",
    duration: 2000,
  });
} catch (error) {
  console.error('Card processing error:', error);
  toast({
    title: "Error",
    description: error.message || 'Failed to process business card',
    status: "error",
    duration: 3000,
  });
} finally {
  setIsProcessing(false);
  setScanProgress(0);
}

};

const preprocessImage = (imageSrc) => {
return new Promise((resolve) => {
const img = document.createElement('img');
img.onload = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');

    // Set to a higher resolution
    canvas.width = img.width * 2;
    canvas.height = img.height * 2;
    
    // Clear previous content
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Apply image processing
    ctx.filter = 'contrast(1.2) brightness(1.1)';
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    // Get processed image
    resolve(canvas.toDataURL('image/jpeg', 0.95));
  };
  img.src = imageSrc;
});

};

const handleRetake = () => {
setCapturedImage(null);
setExtractedText([]);
setMode('qr');
setIsProcessing(false);
setScanProgress(0);
};

const toggleMode = () => {
setMode(prev => prev === 'qr' ? 'card' : 'qr');
setCapturedImage(null);
setExtractedText([]);
};

return (


<Button
colorScheme={mode === 'qr' ? 'green' : 'gray'}
onClick={() => setMode('qr')}
leftIcon={}
>
QR Code

<Button
colorScheme={mode === 'card' ? 'blue' : 'gray'}
onClick={() => setMode('card')}
leftIcon={}
>
Paper Card

  <Box position="relative" width="100%" aspectRatio={4/3}>
    {!capturedImage ? (
      <>
        <Webcam
          audio={false}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          videoConstraints={CAPTURE_OPTIONS}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover'
          }}
        />
        {mode === 'qr' && (
          <Box
            position="absolute"
            top="50%"
            left="50%"
            transform="translate(-50%, -50%)"
            border="3px solid #22c35e"
            width="280px"
            height="280px"
            borderRadius="20px"
            boxShadow="0 0 0 9999px rgba(0, 0, 0, 0.5)"
          />
        )}
      </>
    ) : (
      <Image 
        src={capturedImage} 
        alt="Captured image" 
        objectFit="contain"
        w="100%"
        h="100%"
      />
    )}

    {isProcessing && (
      <Center
        position="absolute"
        top="0"
        left="0"
        right="0"
        bottom="0"
        bg="blackAlpha.300"
      >
        <Spinner size="xl" color="blue.500" thickness="4px" />
      </Center>
    )}
  </Box>

  {scanProgress > 0 && scanProgress < 100 && (
    <Progress 
      value={scanProgress} 
      width="100%" 
      size="sm" 
      colorScheme="blue" 
      isAnimated
    />
  )}

  <HStack spacing={4} justify="center" w="full">
    {!capturedImage ? (
      mode === 'card' && (
        <Button
          colorScheme="blue"
          onClick={handleCapture}
          isDisabled={isProcessing}
          size="lg"
          leftIcon={<Icon as={RiCameraLine} />}
        >
          Capture Card
        </Button>
      )
    ) : (
      <Button
        colorScheme="purple"
        onClick={handleRetake}
        isDisabled={isProcessing}
        size="lg"
        leftIcon={<Icon as={RiRefreshLine} />}
      >
        Retake
      </Button>
    )}
  </HStack>

  {extractedText.length > 0 && (
    <Box mt={4} p={4} borderRadius="md" borderWidth={1} w="full">
      <Text fontWeight="bold" mb={2}>Extracted Data:</Text>
      {extractedText.map((line, index) => (
        <Text key={index}>{line}</Text>
      ))}
    </Box>
  )}
</VStack>

);
};

export default BusinessCardScanner;

OCR Services
import { createWorker } from 'tesseract.js';

class OCRService {
static worker = null;
static isInitializing = false;

static async getWorker() {
if (OCRService.worker) {
return OCRService.worker;
}

if (OCRService.isInitializing) {
  while (OCRService.isInitializing) {
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  return OCRService.worker;
}

try {
  OCRService.isInitializing = true;

  const worker = await createWorker({
    langPath: '/tessdata',
    logger: m => console.log(m),
  });

  // Initialize with both English and Greek
  await worker.loadLanguage('eng+ell');
  await worker.initialize('eng+ell');

  // Configure OCR parameters for better Greek text recognition
  await worker.setParameters({
    tessedit_pageseg_mode: '6', // Assume uniform text block
    preserve_interword_spaces: '1',
    tessedit_char_whitelist: 'ΑΆΒΓΔΕΈΖΗΉΘΙΊΪΚΛΜΝΞΟΌΠΡΣΤΥΎΫΦΧΨΩΏαάβγδεέζηήθιίϊκλμνξοόπρσςτυύϋφχψωώ' +
      'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!@#$%^&*()_+-=[];:\'"\\|/<>?~ ',
    tessedit_enable_doc_dict: '0',  // Disable document dictionary
    tessedit_ocr_engine_mode: '3',  // Use Legacy + LSTM mode for better accuracy
    language_model_penalty_non_dict_word: '0.5',  // Lower penalty for non-dictionary words
    language_model_penalty_non_freq_dict_word: '0.5',
    textord_heavy_nr: '1',  // Handle text with variable spacing
    lstm_choice_mode: '2',  // Use more aggressive LSTM choices
    lstm_choice_iterations: '10'  // Increase LSTM iterations for better accuracy
  });

  OCRService.worker = worker;
  return OCRService.worker;
} catch (error) {
  console.error('OCR Worker initialization failed:', error);
  throw error;
} finally {
  OCRService.isInitializing = false;
}

}

static async recognize(imageSrc) {
if (!OCRService.worker) {
throw new Error('OCR worker is not initialized');
}

try {
  // Pre-process recognition options
  const recognizeOptions = {
    rectangle: null, // Optional: Add specific region recognition if needed
    rotateAuto: true, // Enable automatic rotation detection
  };

  const { data } = await OCRService.worker.recognize(imageSrc, recognizeOptions);
  
  // Post-process the recognized text
  let text = data.text;
  
  // Clean up common OCR mistakes in Greek text
  text = text.replace(/([ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψω])\s+([,.!;])/g, '$1$2')
             .replace(/\s+/g, ' ')
             .trim();

  return text;
} catch (error) {
  console.error('OCR recognition failed:', error);
  throw error;
}

}

static async terminate() {
if (OCRService.worker) {
await OCRService.worker.terminate();
OCRService.worker = null;
}
}
}

export default OCRService;

[Balearica]

Can you provide a minimal, reproducible example of the issue? While this OP does contain code, it is not something that can be easily run by other users, and no example images are provided. You are most likely to get a response if you can replicate the issue using the example code (modified as needed to replicate the issue) and providing image(s).

[RoseSamaras]

Hello Balearica

Thank you for your quick reply, now it actually works, but the results are very poor, you can see in the image bellow

Can we get on a call, to show you the problem and see how we can collaborate?

Thank you!!