Image To Movie Name And Film Title Extractor

async function processImage(originalImg, language = 'eng') {
  // Create a container for the UI
  const container = document.createElement('div');
  container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
  container.style.maxWidth = '600px';
  container.style.margin = '0 auto';
  container.style.padding = '20px';
  container.style.border = '1px solid #e1e4e8';
  container.style.borderRadius = '8px';
  container.style.backgroundColor = '#f6f8fa';
  container.style.color = '#24292e';
  container.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';

  // Add header
  const header = document.createElement('h2');
  header.innerText = 'Movie Name & Film Title Extractor';
  header.style.marginTop = '0';
  header.style.fontSize = '20px';
  header.style.borderBottom = '1px solid #e1e4e8';
  header.style.paddingBottom = '10px';
  container.appendChild(header);

  // Add status indicator
  const status = document.createElement('div');
  status.innerText = 'Preparing to extract text...';
  status.style.fontSize = '14px';
  status.style.color = '#586069';
  status.style.marginBottom = '10px';
  container.appendChild(status);

  // Add progress bar
  const progressBar = document.createElement('div');
  progressBar.style.width = '100%';
  progressBar.style.height = '8px';
  progressBar.style.backgroundColor = '#e1e4e8';
  progressBar.style.borderRadius = '4px';
  progressBar.style.overflow = 'hidden';
  progressBar.style.display = 'none';
  container.appendChild(progressBar);

  const progressFill = document.createElement('div');
  progressFill.style.height = '100%';
  progressFill.style.width = '0%';
  progressFill.style.backgroundColor = '#0366d6';
  progressFill.style.transition = 'width 0.2s ease';
  progressBar.appendChild(progressFill);

  // Add results area
  const resultsArea = document.createElement('div');
  resultsArea.style.marginTop = '15px';
  resultsArea.style.padding = '15px';
  resultsArea.style.backgroundColor = '#ffffff';
  resultsArea.style.border = '1px solid #e1e4e8';
  resultsArea.style.borderRadius = '6px';
  resultsArea.style.display = 'none';
  container.appendChild(resultsArea);

  const resultsList = document.createElement('ul');
  resultsList.style.listStyleType = 'none';
  resultsList.style.padding = '0';
  resultsList.style.margin = '0';
  resultsArea.appendChild(resultsList);

  // Resize image if it's too large to prevent browser crashing and speed up OCR
  const MAX_DIM = 2048;
  let width = originalImg.width;
  let height = originalImg.height;

  if (width > MAX_DIM || height > MAX_DIM) {
    const ratio = Math.min(MAX_DIM / width, MAX_DIM / height);
    width = Math.round(width * ratio);
    height = Math.round(height * ratio);
  }

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(originalImg, 0, 0, width, height);

  // Function to clean and display extracted text
  function processExtractedText(text) {
    status.style.display = 'none';
    progressBar.style.display = 'none';
    resultsArea.style.display = 'block';

    // Parse and filter the extracted text to find potential movie titles
    const lines = text.split('\n')
      .map(line => line.trim())
      .filter(line => line.length > 1) // Ignore single stray characters
      .filter(line => /[a-zA-Z0-9]/.test(line)); // Ensure string contains alphanumeric chars

    if (lines.length > 0) {
      lines.forEach(line => {
        const li = document.createElement('li');
        li.innerText = line;
        li.style.padding = '8px 0';
        li.style.borderBottom = '1px solid #eaecef';
        li.style.fontWeight = '500';
        li.style.fontSize = '16px';
        resultsList.appendChild(li);
      });
      // Remove border from the last item
      if (resultsList.lastChild) {
        resultsList.lastChild.style.borderBottom = 'none';
      }
    } else {
      const p = document.createElement('p');
      p.innerText = 'No movie names or film titles could be detected in this image.';
      p.style.color = '#cb2431';
      p.style.margin = '0';
      resultsArea.appendChild(p);
    }
  }

  // Function to initialize and run Tesseract OCR
  function startOCR() {
    status.innerText = 'Initializing OCR Engine...';
    progressBar.style.display = 'block';

    window.Tesseract.recognize(
      canvas,
      language,
      {
        logger: m => {
          if (m.status === 'recognizing text') {
            status.innerText = `Extracting Text: ${Math.round(m.progress * 100)}%`;
            progressFill.style.width = `${m.progress * 100}%`;
          } else {
            status.innerText = `Status: ${m.status.charAt(0).toUpperCase() + m.status.slice(1)}...`;
          }
        }
      }
    ).then(({ data: { text } }) => {
      processExtractedText(text);
    }).catch(err => {
      status.innerText = 'Extraction failed. The image might not contain readable text.';
      status.style.color = '#cb2431';
      progressBar.style.display = 'none';
      console.error(err);
    });
  }

  // Dynamically load Tesseract.js if it's not already available in the environment
  if (typeof window.Tesseract === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
    script.onload = startOCR;
    script.onerror = () => {
      status.innerText = 'Error: Failed to load OCR library. Please check your network connection.';
      status.style.color = '#cb2431';
    };
    document.head.appendChild(script);
  } else {
    startOCR();
  }

  // Return the container immediately, which will update dynamically as OCR processes
  return container;
}