Untuk pengekstrakan data dari gambar seperti resit, kad pengenalan, atau borang kertas, kaedah tradisional sering menggunakan OCR (Optical Character Recognition) digabungkan dengan peraturan atau regex untuk mengekstrak data. Ini rumit dan sukar apabila format data berubah.

Sebenarnya, kita mempunyai pilihan lain: LLM Multimodal yang boleh "memahami gambar" dan "menjawab soalan" secara langsung.

Konsep

LLM Multimodal boleh memproses teks dan gambar serentak, membolehkan kita memasukkan gambar bersama dengan prompt seperti:

Gambar ini adalah resit restoran. Sila ekstrak data ke dalam JSON: nama restoran, tarikh, item makanan, jumlah keseluruhan

Contoh Kod

Model

Untuk pusingan ini, kita akan cuba menggunakan gemma3-12b-vision

Anda boleh mengikuti Getting Started dalam README untuk sesiapa yang ingin mencuba deploy model sendiri

Kod

client-gemma3.ts

1. Tetapkan prompt yang jelas tentang apa gambar ini, field apa yang diperlukan dengan contoh, apa yang perlu dilakukan jika tidak dijumpai, dan nyatakan mesti mengembalikan dalam format JSON sahaja. Di sini kita juga akan memberitahunya untuk melihat category untuk menentukan apa itu. Jika invoice, maka ekstrak field yang kita inginkan, tetapi jika tidak, beritahu kita apa itu.

This is an image of a document. Please analyze the document and return a JSON object that strictly follows the schema below:

{
  "category": string,                    // Document category: "invoice", "receipt", or "other-[description]"
  "result": object | null           // Invoice data if category is "invoice", otherwise null
}

If the document category is "invoice", return the result as:
{
  "category": "invoice",
  "result": {
    "invoice_number": string,              // e.g. "INV-2024-00123"
    "invoice_date": string,             // Date as shown in document (any format: DD/MM/YYYY, MM-DD-YYYY, YYYY-MM-DD, etc.)
    "due_date": string | null,        // Date as shown in document (any format) or null if not found
    "total_amount": number | null,    // Final total amount (e.g. 1234.50) in INR
    "items": [
      {
        "description": string,        // Name of the product or service
        "quantity": number | null,
        "unit_price": number | null,
        "line_total": number | null
      }
    ]
  }
}

If the document category is NOT "invoice", return the result as:
{
  "category": "receipt" | "other-[description]",
  "result": null
}

DOCUMENT CATEGORY GUIDELINES:
- "invoice": Only tax invoices, billing invoices, commercial invoices
- "receipt": Payment receipts, transaction receipts
- "other-[description]": For any other content, describe what you see after "other-"
  Examples: "other-id_card", "other-child_photo", "other-certificate", "other-bill", "other-menu", "other-text_document"

IMPORTANT INSTRUCTIONS:
- Only extract invoice data if the document category is clearly "invoice"
- For receipts, use exactly "receipt" as the category
- For anything else, use "other-" followed by a brief English description of what you see
- For dates, extract them exactly as they appear in the document - do not convert or reformat
- For all non-invoice documents, set result to null
- Do not guess or fabricate values
- Return ONLY the JSON object directly. Do not wrap it in markdown code blocks (\`\`\`json\`\`\`)
- Do not include any explanation, comments, or extra text before or after the JSON
- Your response should start with { and end with }
- The response must be valid JSON that can be parsed directly

2. Hantar gambar melalui jenis image_url dalam content message berulang-alik

  const { data } = await axios.post(
    `${process.env.BASE_URL}/chat/completions`,
    {
      model: "gemma3-12b-vision",
      messages: [
        {
          role: "user",
          content: [
            {
              type: "text",
              text: prompt,
            },
            {
              type: "image_url",
              image_url: { url: `data:image/jpeg;base64,${image}` },
            },
          ],
        },
      ],
    },
    {
      headers: {
        Authorization: `Bearer ${process.env.API_KEY}`,
        "Content-Type": "application/json",
      },
    }
  );

client-openai.ts

Untuk kes menggunakan Model lain yang menyokong OpenAI Completions dan Multimodal

Keputusan

{
  "category": "invoice",
  "result": {
    "invoice_number": "INV-005",
    "invoice_date": "Jun 22, 2021",
    "due_date": "Jun 27, 2021",
    "total_amount": 1564,
    "items": [
      {
        "description": "Desktop furniture",
        "quantity": 1,
        "unit_price": 232,
        "line_total": 232
      },
      {
        "description": "Plumbing and electrical services",
        "quantity": 2,
        "unit_price": 514,
        "line_total": 1028
      },
      {
        "description": "Water tank repair works",
        "quantity": 2,
        "unit_price": 152,
        "line_total": 304
      }
    ]
  }
}

{
  "category": "invoice",
  "result": {
    "invoice_number": "100",
    "invoice_date": "1/30/23",
    "due_date": "1/30/23",
    "total_amount": 420,
    "items": [
      {
        "description": "20\" x 30\" hanging frames",
        "quantity": 10,
        "unit_price": 15,
        "line_total": 150
      },
      {
        "description": "5\" x 7\" standing frames",
        "quantity": 50,
        "unit_price": 5,
        "line_total": 250
      }
    ]
  }

{
  "category": "receipt",
  "result": null
}

Kelebihan

• Berfungsi dengan pelbagai format (walaupun layout berubah)
• Boleh menentukan data yang diinginkan melalui prompt
• Tidak perlu menulis regex atau template khusus dokumen
• Boleh menambah syarat seperti jika a maka ekstrak b
• Boleh melakukan klasifikasi/validasi

Perhatian

• Kos agak tinggi (dikenakan bayaran per token)
• Ketepatan bergantung pada prompt dan kejelasan gambar
• Harus mempunyai fallback atau validasi jika model memberikan jawapan salah

Berbanding dengan Pendekatan OCR

1. OCR: Tukar gambar ke teks
2. OCR Post-processing: Tingkatkan teks yang diperoleh daripada OCR untuk lebih tepat
3. Text Extraction & Cleaning: Ekstrak teks penting dan bersihkan data
4. Document Structure Understanding: Fahami struktur dokumen (resit, invois, laporan kelulusan)
5. Named Entity Recognition (NER): Kenal pasti nama syarikat, tarikh, jumlah, nombor dokumen

Kesimpulan

Menggunakan Multimodal LLM untuk pengekstrakan data dari gambar adalah pendekatan yang sangat baik, terutamanya apabila dokumen mempunyai banyak field dan kita hanya ingin mengekstrak field tertentu, layout mungkin tidak konsisten, atau ada syarat tertentu untuk pengekstrakan data. Kita boleh mengawalnya melalui prompt tanpa membina sistem parsing yang kompleks. Ini bermakna kita tidak perlu lagi terikat pada idea bahawa jenis kerja ini mesti hanya menggunakan OCR dan kemudian duduk menulis regex atau menganalisis lebih lanjut untuk mengekstrak data yang benar-benar kita inginkan.

Contoh yang diberikan adalah pengekstrakan data mudah, tetapi sebenarnya, ada banyak pendekatan lain yang boleh kita ambil. Kita boleh menambah syarat tertentu, menggunakannya untuk Klasifikasi/Validasi.

---

Float16

Platform sumber GPU terurus untuk pembangun. Alami serverless GPU termurah dalam mod spot dan GPU endpoint terpantas dalam mod deploy.

Berhubung dengan kami:

• Medium : Float16.cloud
• Facebook : Float16.cloud
• X : Float16.cloud
• Discord : Float16.cloud
• Youtube : Float16.cloud