Tesseract.jsとReactでOCRコミュニケーションアプリを作る（前編）

npx create-react-app ocr-sms-sender
cd ocr-sms-sender
npm start

npm install --save tesseract.js twilio express dotenv intl-tel-input

import { useState } from "react"
import OcrReader from "./components/OcrReader"
import SmsSender from "./components/SmsSender"

function App() {
  const [ocrData, setOcrData] = useState("")

  // 子コンポーネントからOCRデータをPropsとして受け取る
  const onReadOcrData = (ocrData) => {
    setOcrData(ocrData)
  }

  // 子コンポーネントで別の画像を使用するボタンが押されたことをPropsで検知する
  const onRemoveClicked = () => {
    setOcrData("")
  }

  return (
    <div className="App">
      <header>OCRアプリへようこそ！</header>
      <OcrReader
        onReadOcrData={onReadOcrData}
        onRemoveClicked={onRemoveClicked}
      />
      {ocrData && <SmsSender readText={ocrData}/>}
    </div>
  )
}

export default App

import { useState } from "react"
import { createWorker } from "tesseract.js"

// 画像のOCR処理ステータス
const STATUSES = {
  IDLE: "",
  FAILED: "OCR処理に失敗しました。",
  PENDING: "OCR処理中...",
  SUCCEEDED: "OCR処理完了",
}

export default OcrReader

function OcrReader({onReadOcrData, onRemoveClicked}) {
  const [selectedImage, setSelectedImage] = useState(null)
  const [ocrState, setOcrState] = useState(STATUSES.IDLE)
  const worker = createWorker()
  
  // 画像のOCR処理
  const readImageText = async() => {
    setOcrState(STATUSES.PENDING)
    try {
      await worker.load()
      // OCRで読み取りたい言語を設定
      await worker.loadLanguage("jpn")
      await worker.initialize("jpn")
      const { data: { text } } = await worker.recognize(selectedImage) 
      await worker.terminate()
      
      // 日本語テキストはスペースが入ってしまう可能性があるので、スペースを削除
      const strippedText = text.replace(/\s+/g, "")
      onReadOcrData(strippedText)
      setOcrState(STATUSES.SUCCEEDED)
    } catch (err) {
      setOcrState(STATUSES.FAILED)
    }
  }
}

// 別の画像を使用するボタンを押した時の処理
const handleRemoveClicked = () => {
  setSelectedImage(null)
  onRemoveClicked()
  setOcrState(STATUSES.IDLE)
}

return (
  <div>
    {selectedImage && (
      <div>
        <img src={URL.createObjectURL(selectedImage)} alt="scanned file"  />
      </div>
    )}
    <div>
      {selectedImage?
        <div className="button-container">
          <button onClick={readImageText}>画像をOCR処理する</button>
          <button
            className="remove-button"
            disabled={ocrState === STATUSES.PENDING}
            onClick={handleRemoveClicked}
          >
              別の画像を使用する
          </button>
        </div>
        :
        <>
          <p>画像ファイルをアップロードしてください。</p>
          <input
            type="file"
            name="ocr-image"
            onChange={(event) => {
              setSelectedImage(event.target.files[0])
            }}
          />
          <p>対応フォーマット：bmp、jpg、png、pbm</p>
        </>
      }
    </div>
    <div className="status">
      {ocrState}
    </div>
    <br />
  </div>
)

import { useEffect, useState, useRef } from "react"
import "intl-tel-input/build/css/intlTelInput.css"
import intlTelInput from "intl-tel-input"

// SMS送信ステータス
const STATUSES = {
  IDLE: "",
  FAILED: "メッセージ送信に失敗しました。",
  PENDING: "メッセージ送信中...",
  SUCCEEDED: "メッセージ送信完了",
}

export default SmsSender

function SmsSender ({readText}) {
  const [smsText, setSmsText] = useState(readText)
  const [iti, setIti] = useState(null)
  const [smsSendingStatus, setSmsSendingStatus] = useState(STATUSES.IDLE)
  const inputRef = useRef(null)

  // International Telephone Inputを初期化
  const init = () => intlTelInput(inputRef.current, {
    initialCountry: "jp"
  })

  // レンダー後にInternational Telephone Inputを初期化
  useEffect(() => {
    setIti(init())
  }, [])

  // SMS送信リクエスト
  const sendSMS = async () => {
    setSmsSendingStatus(STATUSES.PENDING)
    const country = iti.getSelectedCountryData()
    const num = `+${country.dialCode}${iti.telInput.value}`
    await fetch("/send-sms", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ to: num, text: smsText }),
    }).then((response) => {
      // Check successful request status
      if (response.status === 200) {
        setSmsSendingStatus(STATUSES.SUCCEEDED)
      } else {
        setSmsSendingStatus(STATUSES.FAILED)
      }
    }).catch(() => {
      // Catch network errors
      setSmsSendingStatus(STATUSES.FAILED)
    })
  }
}

// 送信ボタンが押されたタイミングでSMS送信する
const handleSubmit = e => {
  e.preventDefault()
  e.stopPropagation()
  sendSMS()
}

return (
<div>
  <form onSubmit={(e) => handleSubmit(e)}>
    <div>検知されたテキストを編集：</div>
    <div>
      <textarea
        rows="15"
        cols="45"
        name="name"
        defaultValue={readText}
        onChange={e => setSmsText(e.target.value)}
      />
    </div>
    <input
      ref={inputRef} 
      id="phone"
      name="phone"
      type="tel"
    />
    <div>
      <button disabled={smsSendingStatus == "Sending Message..."} type="submit">SMSメッセージを送信</button>
    </div>
  </form>
  <div className="status">
    {smsSendingStatus}
  </div>
</div>
)

html *
{
  font-family: 'Noto Sans Japanese', sans-serif;
}

.App {
  text-align: center;
}

header {
  color: #2F7AE5;
  font-size: 30px;
}

img {
  width: 280px;
}

textarea {
  border: 1px solid #ccc;
}

button {
  color: #fff;
  background: #2F7AE5;
  padding: 12px;
  border-radius: 5px;
  border: none;
  margin: 3px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

button:hover {
  background-color: #1c4b8d;
}

input[type=text], input[type=tel] {
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  width: 300px;
}

input[type=text] {
  height: 400px;
}

.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.remove-button {
  background: #7E7E7E;
}

.remove-button:hover {
  background: #414141;
}

.status {
  color: #2F7AE5;
}

/* International Telephone InputのCSS */
.iti__flag {background-image: url("/node_modules/intl-tel-input/build/img/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("/node_modules/intl-tel-input/build/img/flags@2x.png");}
}