Image Language Metadata Extractor

async function processImage(originalImg) {
  /**
   * Dynamically loads a script and returns a promise that resolves when the script is loaded.
   * @param {string} url - The URL of the script to load.
   * @returns {Promise<void>}
   */
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      // Check if script is already loaded
      if (document.querySelector(`script[src="${url}"]`)) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.src = url;
      script.onload = () => resolve();
      script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
      document.head.appendChild(script);
    });
  };

  // Create a container for the results and status updates.
  const resultContainer = document.createElement('div');
  resultContainer.style.fontFamily = 'monospace';
  resultContainer.style.whiteSpace = 'pre-wrap';
  resultContainer.style.padding = '1em';
  resultContainer.style.border = '1px solid #ccc';
  resultContainer.style.borderRadius = '5px';
  resultContainer.style.backgroundColor = '#f9f9f9';
  resultContainer.innerText = 'Initializing...';

  try {
    // 1. DYNAMICALLY LOAD TESSERACT.JS LIBRARY
    // Check if Tesseract is available, if not, load it from a CDN.
    if (typeof Tesseract === 'undefined') {
      resultContainer.innerText = 'Loading OCR Engine (Tesseract.js)...';
      await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
    }

    // 2. CREATE TESSERACT WORKER AND PERFORM DETECTION
    resultContainer.innerText = 'Creating OCR worker...\nThis may take a moment.';

    const worker = await Tesseract.createWorker({
      logger: m => {
        // Provide real-time feedback to the user
        let statusText = `Status: ${m.status}`;
        if (m.progress) {
          statusText += ` | Progress: ${Math.round(m.progress * 100)}%`;
        }
        resultContainer.innerText = statusText;
        console.log(m);
      },
    });

    // Use the detect function for Orientation and Script Detection (OSD).
    resultContainer.innerText = 'Analyzing image for script and orientation...';
    const {
      data
    } = await worker.detect(originalImg);

    // 3. PROCESS AND FORMAT THE RESULTS
    if (data && data.script) {
      let output = `✅ Language Metadata Extracted Successfully:\n\n`;
      output += `Detected Script    : ${data.script}\n`;
      output += `Script Confidence  : ${data.script_confidence.toFixed(2)}%\n\n`;
      output += `Page Orientation   : ${data.orientation_degrees}°\n`;
      output += `Orientation Confidence : ${data.orientation_confidence.toFixed(2)}\n`;

      resultContainer.innerText = output;
      resultContainer.style.color = '#333';
    } else {
      resultContainer.innerText = 'Could not detect any language script in the image.';
      resultContainer.style.color = '#d9534f';
    }

    // 4. CLEAN UP THE WORKER
    await worker.terminate();

  } catch (error) {
    console.error(error);
    resultContainer.innerText = `An error occurred:\n${error.message}`;
    resultContainer.style.color = '#d9534f';
  }

  // 5. RETURN THE RESULT ELEMENT
  return resultContainer;
}