React TypeScript - Tesseract로 OCR 만들기

https://tesseract.projectnaptha.com/

들어가며

오늘은 OCR 기능을 사용할 수 있게 도와주는 Tesseract js를 사용해 보도록 하겠습니다.

실습

엄청 많은 나라의 언어를 지원합니다. 아래에서 확인하실 수 있습니다.
https://tesseract-ocr.github.io/tessdoc/Data-Files#data-files-for-version-400-november-29-2016

npm install tesseract.js

import React, { useState } from 'react';
import Tesseract from 'tesseract.js';

const OCRComponent: React.FC = () => {
  const [progress, setProgress] = useState<number>(0);
  const [text, setText] = useState<string>('');
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  // 이미지 업로드 시 호출되는 함수
  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        setImageUrl(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  // OCR 버튼 클릭 시 호출되는 함수
  const handleClick = () => {
    if (imageUrl) {
      // Tesseract.js를 사용해 이미지에서 텍스트를 인식
      Tesseract.recognize(imageUrl, 'eng+kor', {
        logger: (m) => {
          if (m.status === 'recognizing text') {
            // OCR 진행률을 업데이트
            const progressValue = (m.progress * 100).toFixed(2);
            setProgress(parseFloat(progressValue));
          }
        },
      }).then(({ data: { text } }) => {
        // 인식된 텍스트를 상태에 저장
        setText(text);
        console.log(text);
      });
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {imageUrl && (
        <div>
          <img src={imageUrl} alt="Uploaded" style={{ maxWidth: '100%' }} />
        </div>
      )}
      <progress value={progress} max="100">{progress}%</progress>
      {/* OCR을 시작하는 버튼, 이미지가 없을 경우 비활성화 */}
      <button onClick={handleClick} disabled={!imageUrl}>
        Recognize Text
      </button>
      <p>Recognized Text: {text}</p>
    </div>
  );
};

export default OCRComponent;

인식 가능한 언어를 설정할 수 있는데 eng+kor 같이 이중 언어도 가능합니다. 하지만 정확도는 단독으로 사용할 때 더 높은 것 같다는 느낌이 들었습니다.

결론

Google Vison OCR 보다는 성능이 떨어지지만 오픈 소스라는 엄청난 장점이 존재하는 Tesseract를 사용해 보았습니다.