@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web

Bilingual documentation: Bahasa Indonesia | English

Bahasa Indonesia

Library client-side JavaScript modular untuk menggambar, menyelaraskan, dan menangani interaksi kotak bounding box OCR secara interaktif dan responsif di atas elemen gambar.

Fitur Utama

• 📐 Penskalaan Responsif: Bounding box otomatis menyesuaikan skala saat browser di-resize (mengubah koordinat piksel alami gambar ke skala render aktif).
• ✏️ Target Field Alignment: Mengisi kolom formulir target yang sedang aktif saat kotak OCR diklik.
• ⏭️ Auto-Advance Sequencing: Berpindah ke kolom formulir berikutnya secara otomatis jika kolom aktif selesai diisi.
• 🎨 Self-Contained Styles: Menyematkan styles modern bawaan secara dinamis saat diinisialisasi.

Instalasi

npm install @craftthingy-digital-innovation/cty-ocr-interactive-bbox-web

Cara Penggunaan

import { OcrBboxVisualizer } from '@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web';

const visualizer = new OcrBboxVisualizer({
  container: '#ocr-interactive-container', // Element container gambar
  image: '#ocr-interactive-image', // Element gambar <img>
  bboxes: ocrResults, // Array data [{ text, box: { x, y, width, height } }]
  activeTargetField: 'ocr-field-no_paspor',
  fieldsSequence: ['ocr-field-no_paspor', 'ocr-field-nama_pemohon', 'ocr-field-tempat_lahir'],
  autoAdvance: true,
  onWordClick: (word, activeField) => {
    // Dipanggil saat bbox diklik
    const input = document.getElementById(activeField);
    if (input) {
      input.value = word.text;
      input.dispatchEvent(new Event('input'));
    }
  },
  onAutoAdvance: (nextField) => {
    // Dipanggil saat berpindah target aktif
    const nextBtn = document.querySelector(`.btn-ocr-target[data-target="${nextField}"]`);
    if (nextBtn) nextBtn.click();
  }
});

// Render bboxes
visualizer.draw();

// Update target aktif secara dinamis
visualizer.setActiveTargetField('ocr-field-nama_pemohon');

// Hancurkan listener jika modal ditutup
visualizer.destroy();

English

A modular client-side JavaScript library to draw, scale, and manage interactive OCR bounding boxes responsively on top of image viewport elements.

Key Features

• 📐 Responsive Auto-Scaling: BBoxes scale automatically on viewport resize (computes raw natural resolution to active display widths/heights).
• ✏️ Target Field Alignment: Maps clicked OCR boxes directly to active form target inputs.
• ⏭️ Auto-Advance Sequencing: Cycles automatically to the next form field key sequence once a click is registered.
• 🎨 Self-Contained Styles: Injects high-performance CSS styles automatically upon instantiation.

Installation

npm install @craftthingy-digital-innovation/cty-ocr-interactive-bbox-web

Usage

import { OcrBboxVisualizer } from '@craftthingy-digital-innovation/cty-ocr-interactive-bbox-web';

const visualizer = new OcrBboxVisualizer({
  container: '#ocr-interactive-container',
  image: '#ocr-interactive-image',
  bboxes: ocrResults,
  activeTargetField: 'ocr-field-no_paspor',
  fieldsSequence: ['ocr-field-no_paspor', 'ocr-field-nama_pemohon', 'ocr-field-tempat_lahir'],
  autoAdvance: true,
  onWordClick: (word, activeField) => {
    const input = document.getElementById(activeField);
    if (input) {
      input.value = word.text;
      input.dispatchEvent(new Event('input'));
    }
  },
  onAutoAdvance: (nextField) => {
    const nextBtn = document.querySelector(`.btn-ocr-target[data-target="${nextField}"]`);
    if (nextBtn) nextBtn.click();
  }
});

visualizer.draw();
visualizer.setActiveTargetField('ocr-field-nama_pemohon');
visualizer.destroy();

License

Licensed under Public-Source Corporate Royalty License (PSCRL). See LICENSE for details.