Image Alphabet Identifier And Translator Tool

/**
 * Identifies and extracts text (alphabet) from an image using OCR.
 * This function interprets "Identifier And Translator" as identifying the text
 * in the image and "translating" it into a machine-readable string format.
 * It uses the Tesseract.js library for Optical Character Recognition (OCR),
 * which is dynamically loaded from a CDN.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} language A comma-separated string of language codes (e.g., 'eng', 'rus', 'eng,rus') for the OCR engine. See Tesseract.js documentation for available language codes.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the identified text and processing information.
 */
async function processImage(originalImg, language = 'eng') {
  // Create a container element to display progress and the final result.
  const resultContainer = document.createElement('div');
  resultContainer.style.fontFamily = 'Arial, sans-serif';
  resultContainer.style.padding = '20px';
  resultContainer.style.border = '1px solid #ccc';
  resultContainer.style.borderRadius = '8px';
  resultContainer.style.textAlign = 'left';
  resultContainer.innerHTML = '<h3>Initializing OCR Engine...</h3><p>Please wait while the necessary components are loaded.</p>';

  // Dynamically load the Tesseract.js library if it's not already available.
  const loadTesseract = async () => {
    if (typeof Tesseract === 'undefined') {
      const script = document.createElement('script');
      script.src = 'https://unpkg.com/tesseract.js@5.0.5/dist/tesseract.min.js';
      script.defer = true;
      document.head.appendChild(script);
      return new Promise((resolve, reject) => {
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Failed to load Tesseract.js script.'));
      });
    }
    return Promise.resolve();
  };

  try {
    await loadTesseract();

    resultContainer.innerHTML = '<h3>Creating OCR Worker...</h3><p>The OCR worker is being prepared for image analysis.</p>';

    // Tesseract.js requires languages to be in 'lang1+lang2' format.
    const tesseractLang = language.split(',').join('+');

    const worker = await Tesseract.createWorker(tesseractLang, 1, {
      logger: m => {
        // Update the user on the progress of the OCR process.
        let statusText = m.status.replace(/_/g, ' ');
        statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
        let progressHTML = '';
        if (m.status === 'recognizing text' && m.progress) {
          const progress = (m.progress * 100).toFixed(2);
          progressHTML = `
            <div style="width: 100%; background-color: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 10px;">
              <div style="width: ${progress}%; background-color: #4caf50; color: white; text-align: center; line-height: 20px; height: 20px;">
                ${progress}%
              </div>
            </div>
          `;
        }
        resultContainer.innerHTML = `<h3>${statusText}...</h3><p>This may take a moment depending on the image size and language complexity.</p>${progressHTML}`;
      }
    });

    const {
      data: {
        text,
        confidence
      }
    } = await worker.recognize(originalImg);

    await worker.terminate();

    // Display the final result.
    resultContainer.innerHTML = `
      <h3>Identification Complete</h3>
      <div style="margin-bottom: 15px; font-size: 1.1em;">
          <strong>Confidence Score:</strong> <span style="color: ${confidence > 80 ? '#28a745' : '#dc3545'};">${confidence.toFixed(2)}%</span>
      </div>
      <div style="margin-bottom: 10px;">
          <strong>Identified Text:</strong>
      </div>
      <pre style="white-space: pre-wrap; word-wrap: break-word; background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; border-radius: 4px; max-height: 400px; overflow-y: auto;">${text || '(No text was identified in the image.)'}</pre>
    `;

  } catch (error) {
    console.error('OCR Processing Error:', error);
    resultContainer.innerHTML = `
      <h3>An Error Occurred</h3>
      <p>Could not process the image. Please check the browser console for more details.</p>
      <pre style="color: red; background: #fff2f2; padding: 10px; border-radius: 4px; white-space: pre-wrap;">${error.message}</pre>
    `;
  }

  return resultContainer;
}