【flutter】商品画像取得の実装改善：OCRを活用した新たなアプローチ

前回の記事では、バーコードを用いて商品画像を取得する機能を実装したが、以下の課題が浮上した。

バーコードから商品情報を取得できないケースがある
バーコードが外箱に記載されており、画像から取得が困難な場合がある

これらの課題を解決するため、OCR（Optical Character Recognition）を活用し、画像から商品情報を取得する方法を試した。

PR

github.com

OCRとは

OCRは、画像やスキャンされた文書に含まれる文字を認識し、それをテキストデータとしてデジタル化する技術。今回の実装では、OCRで商品画像から文字情報を取得し、それを基に商品を特定する。

使用するライブラリ & サービス

google_mlkit_text_recognition
- 画像から文字列を抽出
Cloud Natural Language | Google Cloud
- OCRで取得したテキストから商品名を抽出
Yahoo!ショッピングAPI
- 抽出したキーワードで商品情報を取得

実装詳細

1. OCRで画像から文字を抽出

■dart/app/lib/utils/image_mobile.dart

import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';
import 'dart:io';

Future<List<String>> imageTextRecognizer(File image) async { 
  final inputImage = InputImage.fromFile(image);
  final textRecognizer = TextRecognizer(script: TextRecognitionScript.japanese);
  final RecognizedText recognizedText =
      await textRecognizer.processImage(inputImage);
  final texts = recognizedText.blocks
      .map((block) => block.text.replaceAll('\n', ' '))
      .where((text) => text.length > 1 && !RegExp(r'^\d+$').hasMatch(text))
      .toList();

  return texts;
}

このコードは画像内の文字列を抽出する。例えば、以下の画像をOCRに通すと次のような文字列が得られる。

実装的には画像の情報をtextRecognizer.processImageに渡してあげればOK。

■抽出結果：

[
  "38%",
  "\\売上/",
  "No.",
  "※インテージSRI+",
  "一般用ウェッ外ティッシ",
  "累計販売金額",
  "207年\\月20B",
  "▲ここまで引っぱってご使用ください。",
  "シルコット",
  "ウェットティッシュ",
  "、純水99%",
  "手·口まわりの汚れに",
  "メイク時の手指の拭き取りに デ",
  "コアウォーター",
  "ノンアルコール"
]

OCRは文字をある程度の精度で認識するが、完全ではない。このため、追加の処理を加える必要がある。

2. 抽出文字列から商品名を特定

Cloud Natural Languageを使用

cloud.google.com

Google Cloud Natural Languageの「エンティティ分析」を使ってテキストを解析し、商品名を自動抽出する。

■typescript/backend/src/lib/analyzeText.ts

import { LanguageServiceClient } from '@google-cloud/language'

export const analyzeText = async (text: string) => {
  const client = new LanguageServiceClient()

  const document = {
    content: text,
    type: 'PLAIN_TEXT' as const,
  }

  const [result] = await client.analyzeEntities({ document })
  const { entities } = result

  const entityList = entities.filter(
    (entity) => entity.type === 'CONSUMER_GOOD'
  )

  const topEntities = entityList
    .sort((a, b) => b.salience - a.salience)
    .slice(0, 3)
    .map((entity) => entity.name)

  if (topEntities.length === 0) {
    return {
      productNames: entities.slice(0, 3).map((entity) => entity.name),
      extractedWords: [],
    }
  }

  // 抽出して単語を全て取得
  const extractedWords = entities
    .map((entity) => entity.name)
    .filter((name) => !topEntities.includes(name))

  return {
    productNames: topEntities,
    extractedWords,
  }
}