perf: 영수증 OCR 속도·정확도 개선

- Tesseract 워커 1회 생성 후 재사용(매 스캔 모델 재로드 제거) → 2번째부터 빠름 - 인식 전 이미지 축소(최대 1600px)+Otsu 이진화로 숫자 인식률 향상 - 금액 파싱 개선: 합계 키워드 다음 줄까지 탐색, 콤마 금액 우선, 전화/사업자/카드번호·시간 제외 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-03 17:02:34 +09:00
parent e1d2ec5bd7
commit 715dae70ab
1 changed files with 125 additions and 24 deletions
@@ -1,6 +1,7 @@
 // 영수증 OCR (온디바이스, Tesseract.js). 서버·API키 불필요.
 // 이미지 → 텍스트 인식 → 금액·날짜·상호 추출.
-import Tesseract from 'tesseract.js'
+// 속도 최적화: ① 워커 1회 생성 후 재사용(모델 재로드 방지) ② 인식 전 이미지 축소·흑백 전처리.
+import { createWorker } from 'tesseract.js'

 // 합계 금액을 가리키는 키워드 (우선순위 높은 순)
 const TOTAL_KEYWORDS = [
@@ -11,32 +12,135 @@ const TOTAL_KEYWORDS = [
 // 합계로 오인하기 쉬운(제외할) 키워드
 const EXCLUDE_KEYWORDS = ['부가세', '면세', '과세', '봉사료', '거스름', '받은금액', '현금', '잔액', '포인트']

-// 문자열에서 숫자(천단위 콤마 포함)들을 추출 → 정수 배열
-function numbersIn(line) {
-  const out = []
-  const re = /\d{1,3}(?:,\d{3})+|\d{3,}/g
+// ===== 워커 재사용 =====
+let workerPromise = null
+let onProgressCb = null
+function getWorker() {
+  if (!workerPromise) {
+    workerPromise = createWorker('kor+eng', 1, {
+      logger: (m) => {
+        if (m.status === 'recognizing text' && onProgressCb && typeof m.progress === 'number') {
+          onProgressCb(Math.round(m.progress * 100))
+        }
+      },
+    }).then(async (w) => {
+      // 영수증은 단일 블록에 가까움 → 자동 레이아웃 분석 비용 절감
+      await w.setParameters({ tessedit_pageseg_mode: '6' })
+      return w
+    })
+  }
+  return workerPromise
+}
+
+// ===== 이미지 전처리: 축소 + 흑백 =====
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = src
+  })
+}
+async function preprocess(image, maxDim = 1600) {
+  const url = typeof image === 'string' ? image : URL.createObjectURL(image)
+  try {
+    const img = await loadImage(url)
+    const scale = Math.min(1, maxDim / Math.max(img.width, img.height))
+    const w = Math.max(1, Math.round(img.width * scale))
+    const h = Math.max(1, Math.round(img.height * scale))
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(img, 0, 0, w, h)
+    // 흑백 → Otsu 이진화 (영수증 글자/숫자 인식률 향상)
+    const imgData = ctx.getImageData(0, 0, w, h)
+    const d = imgData.data
+    const hist = new Array(256).fill(0)
+    const gray = new Uint8Array(d.length / 4)
+    for (let i = 0, p = 0; i < d.length; i += 4, p++) {
+      const g = (d[i] * 0.299 + d[i + 1] * 0.587 + d[i + 2] * 0.114) | 0
+      gray[p] = g
+      hist[g]++
+    }
+    const th = otsu(hist, gray.length)
+    for (let i = 0, p = 0; i < d.length; i += 4, p++) {
+      const v = gray[p] > th ? 255 : 0
+      d[i] = d[i + 1] = d[i + 2] = v
+    }
+    ctx.putImageData(imgData, 0, 0)
+    return canvas
+  } finally {
+    if (typeof image !== 'string') URL.revokeObjectURL(url)
+  }
+}
+
+// Otsu 임계값 계산
+function otsu(hist, total) {
+  let sum = 0
+  for (let i = 0; i < 256; i++) sum += i * hist[i]
+  let sumB = 0, wB = 0, max = 0, threshold = 127
+  for (let i = 0; i < 256; i++) {
+    wB += hist[i]
+    if (wB === 0) continue
+    const wF = total - wB
+    if (wF === 0) break
+    sumB += i * hist[i]
+    const mB = sumB / wB
+    const mF = (sum - sumB) / wF
+    const between = wB * wF * (mB - mF) * (mB - mF)
+    if (between > max) {
+      max = between
+      threshold = i
+    }
+  }
+  return threshold
+}
+
+// 한 줄에서 금액 후보 추출 (전화·사업자·카드번호·시간 제외) → [{n, hasComma}]
+function moneyNumbers(line) {
+  const res = []
+  const re = /\d{1,3}(?:,\d{3})+|\d+/g
  let m
  while ((m = re.exec(line)) !== null) {
-    const n = parseInt(m[0].replace(/,/g, ''), 10)
-    if (!Number.isNaN(n)) out.push(n)
+    const raw = m[0]
+    const start = m.index
+    const end = start + raw.length
+    const before = line[start - 1] || ''
+    const after = line[end] || ''
+    // 시간(12:30) / 전화·사업자·카드(하이픈 연결) 제외
+    if (before === ':' || after === ':') continue
+    if (before === '-' || after === '-') continue
+    const n = parseInt(raw.replace(/,/g, ''), 10)
+    if (Number.isNaN(n)) continue
+    res.push({ n, hasComma: raw.includes(',') })
  }
-  return out
+  return res
 }

 // 합계 금액 추정
 function extractAmount(lines) {
-  // 1) 합계 키워드가 있는 줄에서 금액 찾기 (제외 키워드 줄은 건너뜀)
+  // 1) 합계 키워드 줄(제외 키워드 줄은 건너뜀) + 바로 다음 줄까지 탐색.
+  //    콤마 금액이 있으면 우선, 없으면 최댓값.
  for (const kw of TOTAL_KEYWORDS) {
-    for (const line of lines) {
-      if (!line.includes(kw)) continue
-      if (EXCLUDE_KEYWORDS.some((ex) => line.includes(ex))) continue
-      const nums = numbersIn(line)
-      if (nums.length) return Math.max(...nums)
+    for (let i = 0; i < lines.length; i++) {
+      if (!lines[i].includes(kw)) continue
+      if (EXCLUDE_KEYWORDS.some((ex) => lines[i].includes(ex))) continue
+      for (let j = i; j <= Math.min(i + 1, lines.length - 1); j++) {
+        const nums = moneyNumbers(lines[j])
+        if (!nums.length) continue
+        const comma = nums.filter((x) => x.hasComma).map((x) => x.n)
+        return comma.length ? Math.max(...comma) : Math.max(...nums.map((x) => x.n))
+      }
    }
  }
-  // 2) 폴백: 전체에서 가장 큰 금액(100원 이상)
-  const all = lines.flatMap(numbersIn).filter((n) => n >= 100 && n < 100_000_000)
-  return all.length ? Math.max(...all) : null
+  // 2) 폴백: 콤마 금액 우선
+  const all = lines.flatMap(moneyNumbers)
+  const comma = all.filter((x) => x.hasComma).map((x) => x.n).filter((n) => n >= 100 && n < 100_000_000)
+  if (comma.length) return Math.max(...comma)
+  // 3) 콤마가 전혀 없으면(인식 누락) 1000~천만, 10원 단위인 가장 큰 수
+  const plain = all.map((x) => x.n).filter((n) => n >= 1000 && n <= 10_000_000 && n % 10 === 0)
+  return plain.length ? Math.max(...plain) : null
 }

 // 거래일 추정 (YYYY-MM-DD 반환)
@@ -77,13 +181,10 @@ function extractStore(lines) {
 * @returns {Promise<{amount:number|null, date:string|null, store:string|null, text:string}>}
 */
 export async function scanReceipt(image, onProgress) {
-  const { data } = await Tesseract.recognize(image, 'kor+eng', {
-    logger: (msg) => {
-      if (msg.status === 'recognizing text' && typeof msg.progress === 'number') {
-        onProgress?.(Math.round(msg.progress * 100))
-      }
-    },
-  })
+  onProgressCb = onProgress
+  const [worker, canvas] = await Promise.all([getWorker(), preprocess(image)])
+  const { data } = await worker.recognize(canvas)
+  onProgressCb = null
  const text = data.text || ''
  const lines = text.split('\n').map((l) => l.trim()).filter(Boolean)
  return {