결제내역 캡춰화면 OCR 인식 후 합계 계산하기 / tesseract js 5.0 텍스트인식 모바일 웹서비스 프로젝트

타이탄의 도구를 습득하고 있다.

2023 년 말까지 습득해야 하는 기술 또는 관심 있는 분야는

프런트 쪽에 활용분야이며

연말까지 학습하고자 하는 내용은 다음과 같다.

 

three js / blander / opencv js / tesnorflow js  / finetuning chatbot ( llama etc..) 

 

최대한 다양한 툴을 학습하도록 하고자 한다.

 

이번에 목표로 하는 프로젝트는

영수증이나 사용내역을 인식하는 방법이다.

 

이 프로젝트를 시작하게 된 동기는 화면을 캡처 해서 쉽게 계산 내역을 확인하고

계산하여 지인이나 친구에게 전달하는 웹서비스를 만들기 위함이고 실제 개인적으로 유용성도 높지만

AI 툴을 사용하여 만들면 어떨까 하기 때문이다.

 

제작하는 웹섭비스 동작기능 : 캡춰된 카드 결제내역을 N (인당) 으로 나누고 친구에게 공유 또는 손쉽게 계산

 

chatGpt 를 많이 활용할 계획이다.

먼저 ocr 라이브러리를 찾아본다.

ocr 인식에 대한 정보 얻기

opencv나 tensor flow.js를 이용하게 될 수 있겠다.
텍스트를 OCR로 인식하여 화면에 있는 내역을 추출하고 계산하는 웹프로젝트이다.

해결방법을 찾아나가는 것조차 학습의 일부가 되고 있다.

 

tensorflow js 를 이용한 경우에 대해서 물어본다 딥러닝을 위한 사전질문

 

 

라이브러리 먼저 찾기 위한 질문

 

OCR로 인식하는 것은

Tesseract OCR을 이용하는 것도 괜찮다고 한다. opecv 역시 가능하지만

간단해 보이는 테서렉트 JS를 이용해 보기로 한다. 이것을 알게 된 것은 ChatGpt가 추천해 줬기 때문이다.

 

먼저 Tesseract ocr 은 이미지를 인식할 수 있지만

데이터를 활용하기 위해서는 알아서 분류해주지 않는다.

텍스트의 내용이 어떤 내용인지 파악하고 자동분류하는 작업을 해주지는 않는다.

캡처 된 내역을 활용하기 위해서는 다음과 같은 방법을 이용하게 된다.

 

1. 딥러닝학습을 이용하여 오브젝트를 구별하여 추출하는 방법

2. Tesseract OCR 등을 이용하여 텍스트를 파싱 하는 방법이 있겠다.

 

1번 항목은 내가 궁극적으로 이용하고자 하는 것이지만

2번을 통하여 화면캡처정보를 처리함에 어떤 어려움이 있는지 확인하고

코드로 어떻게 해결해야 하는지 알아본다.  딥러딩한것과의 차이점을 확인해 볼 수 있고 개인적으로는 opencv tesseract 등의 툴을 이용하여 타이탄의 도구를 습득하는 것이다.

 

 

KB 카드 결재내역

결제내역 화면을 보니 김작가는 문제점이 보인다.

어느 부분까지 하나의 항목으로 인식하지?

어떤 방법으로 가능할까?

 

수평선을 이용하면 항목을 구분할 수 있다고 한다.

하지만 수평선이 없는 카드사의 어플 화면도 있을 것이다.

 

tesseract.js 코드는 이용하기 어렵지 않다. 예시는 이미 인터넷에도 있으면 gitHub 페이지에도 있다.

나는 node js + react js 에서 작성해 본다.

자바스크립트용 코드는 npm 으로 설치하면 된다.

 

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  image,language,
  { 
    logger: m => console.log(m) 
  }
)
.catch (err => {
  console.error(err);
})
.then(result => {
 console.log(result);
})
}

 

result 값에는 인식한 텍스트를 항목구분 없이 한 번에 출력해 준다.

 

result 결과값은 이런식으로 나온다

 

참고로, 

캡처이미지는 인식에 있어서는 전처리등을 통하면 인식율과 속도까지 향상시킬 수 있다.

카메라를 이용하여 촬영한다면 노이즈제거등의 전처리는 필수로 보인다.

 

이미지 전처리 과정은 아래 사이트를 참고

opencv 파이썬 라이브러리이지만 opencv.js 에서도 충분히 가능할듯하고

아니더라도 이미지 라이브러릴 사용하면 될 것으로 판단된다.

 

https://turtle-dennis.tistory.com/30

[Tesseract & OpenCV]를 이용한 OCR-2-1 전처리(pre-processing)

https://chococookiee.tistory.com/59

[openCV] tesseract를 이용해서 이미지의 텍스트 추출

 

하지만 지금 중요한 순위는 인식이 된 텍스트 정보를 항목별로 분류하는 것이다.

노이즈 처리는 잠시 미뤄둔다. 캡처화면은 나름 선명한 화질을 가지고 있기 때문에 별도의 작업은 필요하지 않다고 생각한다 ( 하지만 이것도 틀린 것을 알게 되었다 , tesseract 의 인식율이 매우 좋지않다. )

 

tesseract 5.0 을 이용하여 작성해 보았는데 

OEM 정보를 변경할 수 있다. 인식엔진을 선택할 수 있는 것인데. 내가 가진화면들로 테스트할 때는 

TESSERACT와 LSTM 엔진을 모두 섞었을 때 가장 좋은 결과가 나왔다. 

       TESSERACT_ONLY: 0,
       LSTM_ONLY: 1,
       TESSERACT_LSTM_COMBINED: 2,
       DEFAULT: 3,
 

 

먼저. 추출된 텍스트에서 최적화된 정규식을 작성한다.

캡처 된 결제내역은 카드사별 모두 다를 것이다. 물론 카드사별로 정규식을 작성하여 처리도 가능하겠지만

카드사도 정기적으로 앱을 업데이트하지 않는가? 화면구성이 변동될 수밖에 없다.

때문에 카드사별로 정규식을 적용해도 인식에는 한계가 있을 수밖에 없다.

범용적으로 가장 유연하게 동작하는 정규식을 작성해 보기로 한다.
이 과정은 chatGpt를 이용해 본다.

 

tesseract를 이용할 때 text 정보 많이 아니라

글자의 크기. 감지된 에지박스의 높이 넓이

그리고 block , lines, paragraph, word 단위로 그룹핑하여 감지가 된다

설정값에 따라 묶이는 정도가 다르며 이것도 무조건 맹신해서는 안된다.

 

https://medium.com/geekculture/tesseract-ocr-understanding-the-contents-of-documents-beyond-their-text-a98704b7c655

Tesseract OCR: Understanding the Contents of Documents, Beyond Their Text

 

 

block paragraph lines word 차이를 잘 보여준다.

 

 

나는 파싱정보를 Line 으로 읽어서 활용한다. 이유는 카드사마다 항목구분에 차이가 있을 것이기 때문이다.

때문에 최대한 범용적으로 적용하기 위해서는 고민을 해보았고. 최대한 한 줄씩 순차적으로 인식하는 방법을 택해본다.

.

이건 인간의 영역이 아닐까 싶다.

일단 신용카드의 거래내역에 날짜. 시간. 가격. 구매항목  이 4가지는 절대 빠지지 않을 것 같다.

이중에서도 뽑으라면 구매시간, 물건가격 이 항목 2가지는 더 중요할 것 같다.

 

정규식을 이용한 정보 추출에는 기준이 필요할 수밖에 없다.

어떤 카드사의 거래내역 조회화면에도 반드시 포함되어 있을 것 같은 정보가 필요하다는 말이다.

 

정규식으로 날짜와 시간의 항목을 구할 수 있도록 찾아본다.

 

날짜 /(\d{2}\.\d{2})/

시간 /(\d{2}:\d{2})/

 

시간 항목에서 감지되는 상단의 노이즈등이 있다. 사용자가 캡처기능으로 잘 잘라내면 되겠지만

노이즈 필터 항목으로 최대한 제거해 본다. 제거를 해보는 것이지만 모든 휴대폰 기종에 적용될 것 같지는 않다.

나는 충전 배터리 % 있는 경우에만 제거하도록 했는데 정말 이게 맞나 싶다.

 

 

 

현대카드의 결재내역

 

 

여기서 어려운 점은 구매항목(구매아이템)에 대한 것은 정규식으로 뽑아내기가 매우 어렵다는 말이다.

 

1. 먼저 시간과 구매금액은 순차적으로 하나의 항목으로 묶는다.

 

2. 가격감지 시 글자크기가 큰 것이 구매가격이다. 아래와 같이 할인금액이 표시되는 경우도 있는데  할인은 작은 글자.

실제 구매가격은 큰 글자로 구성하였을 것이라고 판단해 본다.

 

3. 구매항목은 가장 큰 글씨일 것으로 판단된다. 글자크기로 구매항목을 추측해 본다.

 

4. 맨 위에 항목을 기준으로 아래에도 동일한 글자크기의 구성이 반복된다.

 

이렇게 4가지 정도의 기준으로 항목을 구분할 수 있도록 만들려고 한다.

결국 딥러닝을 통해서 위의 항목을 인공지능이 다 유사점을 추측해서 결과를 내놓는다는 거 아닌가.

 

다시 항목을 보도록 하자

 

동일한 사이즈의 항목(가격, 시간, 구매항목등)

 

유사항 크기의 구조를 가지고 있다.

딥러닝을 통하면 특징적인 부분의 연관성을 찾을 것이다.

 

우리는 글자의 크기를 기준으로 정리한다

기준은 맨 위에 항목으로 한다. 기준이 없이 작성한다면 현재시간과 다음항목의 시간이 꼬이고 가격 또한 엉뚱한 항목에 배치될 것이다.

 

맨 위에 첫 항목을 기준은 아래처럼 같이 정한다.

 

구매 항목의 크기 purchaseItem_height

날자의 크기 date_height

 

이제 하위항목은 첫 번째 항목과 일치되는 사이즈를 기준으로 필터링하여

날자 시간 구매항목등이 다른 것과 꼬이지 않도록 코드에 넣어준다.

최대한 공통된 기준을 정해야. 오히려 유연하게 정규식이 다양한 경우에 적용될 것으로 생각이 된다.

 

 

여기서 또 문제가 있는데 오차범위를 허용하기 위한 상수값 역시 설정해야 한다.

예를 들면, 제목의 경우 크기가 30인데 하위항목의 경우 29 인경우가 발생한다. OCR이 정확한 크기를 잡아내기 힘들다

TESSERACT만의 문제가 아닐 것 같다.  결국 미세한 차이는 발생하기 때문에 어느 정도 BUFFER 를 줘서 처리한다.

 

정말 어쩔 수 없는 아날로그 데이터의 문제이다.

 

학습과정을 거친다면 어느정도 보정치가 적용된 모델을 생성할 수 있을 것이다.

나는 이걸 손으로 눈으로 체크하고 있다.

 

tesseract의 인식율이 안 좋다는 것이 확인가능한 것이

숫자 7 어디갔나

 

 

동일한 7이지만 20:5로 인식한다 

아래는 정확히 19:57로 인식한다. 높은 인식율을 전제로 정규식을 작성하기 때문에

이런 문제는 웹서비스의 동작 자체에 치명적이다. 

전처리 과정을 거치면 나아질 수도 있을 것 같긴 하지만 눈으로 보기에는 이렇게 선명한데?

 

일단 아래처럼 출력결과물을 뽑을 수 있다.

 

CONSOLE.LOG 로 출력

 

그래서 LSTM + TESSERACT ONLY  복합모드를 이용하여 처리할 수 있었다.

하지만 많은 샘플로 테스트해보지 않는 한 분명히 문제가 발생할 것이다.

절대 완벽할 수가 없다. 이걸 전제로 하지 않는다면 확률을 이용한 시스템은 무조건 망가진다.

 

보완하기 위해서는 어떤 추출방식을 적용하느냐를 사용자에게 선택해야 하는 문제가 발생할듯하다.

1. 정규식 + 글자 크기

2. 글자 크기

 

3. 정규식

 

 

어떤 것을 기준으로 적용해야 하는지 선택하도록 구성하고 사용자는 자신의 신용카드사 거래내역 캡처화면에 가장 잘 동작하는 것을 선택하도록 할 수밖에 없는 것 같다.

 

이제 2 편에서 chatGpt와 함께 프론트 엔드를 작성하도록 해보자.