image-to-text

画像からテキストを抽出

OCR（Tesseract）を使用して、画像から読み取り可能なテキストをすべて抽出します。単語単位のバウンディングボックスと信頼度スコアとともに、テキスト全体を返します。

使用する場面

• スクリーンショットやデザインモックアップからテキストを読み取る
• UI の文言（ラベル、ボタン、見出し）を抽出して、手入力の手間を省く
• デザイン画像からテキストの位置とバウンディングボックスを取得する

仕組み

1. 画像を Tesseract.js に渡して光学文字認識を行います
2. Tesseract が画像を行と単語に分割します
3. テキスト全体と単語単位の詳細（位置、信頼度）を返します

使用方法

bash <skill-path>/scripts/image-to-text.sh <image-path> [language]

引数：

• image-path — 画像ファイルのパス（必須）
• language — OCR 言語コード（省略可能。既定値は eng）。一般的なコード：eng、fra、deu、spa、chi_sim、jpn

例：

# Extract text from a screenshot
bash <skill-path>/scripts/image-to-text.sh ./screenshot.png

# Extract French text
bash <skill-path>/scripts/image-to-text.sh ./mockup.png fra

出力

{
  "text": "Request work\nSuggestions\nPlumbing\nHVAC\nCleaning\nElectrical",
  "confidence": 87.4,
  "words": [
    {
      "text": "Request",
      "confidence": 94.2,
      "bbox": { "x0": 142, "y0": 180, "x1": 268, "y1": 204 }
    },
    {
      "text": "work",
      "confidence": 96.1,
      "bbox": { "x0": 274, "y0": 180, "x1": 332, "y1": 204 }
    }
  ],
  "lines": [
    {
      "text": "Request work",
      "confidence": 95.1,
      "bbox": { "x0": 142, "y0": 180, "x1": 332, "y1": 204 }
    }
  ]
}

フィールド	型	説明
text	String	抽出されたテキスト全体。改行で区切られます
confidence	Number	全体の信頼度スコア（0～100）
words	Array	テキスト、信頼度、バウンディングボックスを含む各単語
lines	Array	テキスト、信頼度、バウンディングボックスを含む各行

結果をユーザーに提示する

テキストを抽出した後、行ごとにまとめて提示します。

Extracted text (87.4% confidence):

  Request work
  Suggestions
  Plumbing
  HVAC
  Cleaning
  Electrical

Found 6 lines, 6 words.

デザインから UI の文言を実装する際は、抽出したテキストをそのまま使用してください。

トラブルシューティング

信頼度が低い／テキストが文字化けする — Tesseract は、鮮明でコントラストの高いテキストで最もよく機能します。レンダリングされた UI のスクリーンショットは適しています。斜めに撮影されたテキストやノイズのある写真では、うまく認識できない場合があります。

言語が間違っている — 2 番目の引数に正しい言語コードを指定してください。文字を認識するには、Tesseract に適切な言語モデルが必要です。

初回の実行が遅い — 初回実行時に、Tesseract は言語データ（英語の場合は約 4MB）をダウンロードします。2 回目以降の実行は速くなります。