Image Text And URL Link Scanner Tool

function processImage(originalImg, language = 'eng+rus') {
  const container = document.createElement('div');
  container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
  container.style.padding = '24px';
  container.style.backgroundColor = '#ffffff';
  container.style.border = '1px solid #e0e0e0';
  container.style.borderRadius = '12px';
  container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
  container.style.maxWidth = '100%';
  container.style.boxSizing = 'border-box';

  const loadingMsg = document.createElement('div');
  loadingMsg.style.display = 'flex';
  loadingMsg.style.flexDirection = 'column';
  loadingMsg.style.alignItems = 'center';
  loadingMsg.style.justifyContent = 'center';
  loadingMsg.style.padding = '40px 20px';
  loadingMsg.style.color = '#555';
  loadingMsg.style.fontSize = '16px';
  loadingMsg.style.fontWeight = '500';

  const spinner = document.createElement('div');
  spinner.style.border = '4px solid #f3f3f3';
  spinner.style.borderTop = '4px solid #0066cc';
  spinner.style.borderRadius = '50%';
  spinner.style.width = '30px';
  spinner.style.height = '30px';
  spinner.style.animation = 'spin 1s linear infinite';
  spinner.style.marginBottom = '15px';

  const style = document.createElement('style');
  style.textContent = `
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `;
  container.appendChild(style);

  loadingMsg.appendChild(spinner);
  
  const statusText = document.createElement('span');
  statusText.textContent = 'Initializing scanner... Please wait.';
  loadingMsg.appendChild(statusText);

  container.appendChild(loadingMsg);

  if (!originalImg || !originalImg.width || !originalImg.height) {
    statusText.textContent = 'Invalid image provided.';
    statusText.style.color = '#dc3545';
    spinner.style.display = 'none';
    return container;
  }

  // Load Tesseract.js asynchronously
  const loadTesseract = () => {
    return new Promise((resolve, reject) => {
      if (window.Tesseract) {
        return resolve(window.Tesseract);
      }
      
      const existingScript = document.getElementById('tesseract-script');
      if (existingScript) {
        existingScript.addEventListener('load', () => resolve(window.Tesseract));
        existingScript.addEventListener('error', () => reject(new Error('Failed to load Tesseract.js')));
        return;
      }

      const script = document.createElement('script');
      script.id = 'tesseract-script';
      script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
      script.onload = () => resolve(window.Tesseract);
      script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
      document.head.appendChild(script);
    });
  };

  const process = async () => {
    try {
      const Tesseract = await loadTesseract();
      
      const canvas = document.createElement('canvas');
      canvas.width = originalImg.width;
      canvas.height = originalImg.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(originalImg, 0, 0);

      const worker = await Tesseract.createWorker({
        logger: m => {
          if (m.status === 'recognizing text') {
            statusText.textContent = `Scanning Image: ${Math.round(m.progress * 100)}%`;
          } else {
            statusText.textContent = `Status: ${m.status.replace(/_/g, ' ')}...`;
          }
        }
      });
      
      await worker.loadLanguage(language);
      await worker.initialize(language);
      
      const { data: { text } } = await worker.recognize(canvas);
      await worker.terminate();

      // Clear the container
      container.innerHTML = '';

      const title = document.createElement('h3');
      title.textContent = 'Scan Results / Результаты';
      title.style.margin = '0 0 20px 0';
      title.style.color = '#333';
      title.style.fontSize = '20px';
      container.appendChild(title);

      const textSection = document.createElement('div');
      textSection.style.marginBottom = '20px';
      
      const textLabel = document.createElement('strong');
      textLabel.textContent = 'Extracted Text:';
      textLabel.style.color = '#444';
      
      const textContent = document.createElement('pre');
      textContent.style.whiteSpace = 'pre-wrap';
      textContent.style.wordBreak = 'break-word';
      textContent.style.backgroundColor = '#f8f9fa';
      textContent.style.color = '#212529';
      textContent.style.padding = '15px';
      textContent.style.border = '1px solid #dee2e6';
      textContent.style.borderRadius = '8px';
      textContent.style.marginTop = '10px';
      textContent.style.lineHeight = '1.5';
      textContent.style.maxHeight = '250px';
      textContent.style.overflowY = 'auto';
      textContent.textContent = text.trim() || 'No text found in the image.';
      
      textSection.appendChild(textLabel);
      textSection.appendChild(textContent);
      container.appendChild(textSection);

      // Regex to identify logical web links and basic URLs
      const urlRegex = /(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)|www\.[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))/gi;
      const urls = text.match(urlRegex) || [];
      const uniqueUrls = [...new Set(urls)];

      const linkSection = document.createElement('div');
      linkSection.style.backgroundColor = '#eef3fb';
      linkSection.style.padding = '15px';
      linkSection.style.borderRadius = '8px';
      linkSection.style.border = '1px solid #c8dbf9';

      const linkLabel = document.createElement('strong');
      linkLabel.textContent = 'Identified URLs (' + uniqueUrls.length + '):';
      linkLabel.style.color = '#0056b3';
      linkSection.appendChild(linkLabel);

      if (uniqueUrls.length > 0) {
        const ul = document.createElement('ul');
        ul.style.listStyleType = 'none';
        ul.style.paddingLeft = '0';
        ul.style.marginTop = '12px';
        ul.style.marginBottom = '0';
        
        uniqueUrls.forEach(urlStr => {
          let href = urlStr;
          if (!href.toLowerCase().startsWith('http')) {
            href = 'http://' + href;
          }
          
          const li = document.createElement('li');
          li.style.marginBottom = '10px';
          li.style.display = 'flex';
          li.style.alignItems = 'center';
          
          const icon = document.createElement('span');
          icon.textContent = '🔗';
          icon.style.marginRight = '8px';
          icon.style.filter = 'grayscale(100%)';
          
          const a = document.createElement('a');
          a.href = href;
          a.textContent = urlStr;
          a.target = '_blank';
          a.rel = 'noopener noreferrer';
          a.style.color = '#0066cc';
          a.style.textDecoration = 'none';
          a.style.fontWeight = '500';
          a.style.wordBreak = 'break-all';
          
          a.onmouseover = () => a.style.textDecoration = 'underline';
          a.onmouseout = () => a.style.textDecoration = 'none';

          li.appendChild(icon);
          li.appendChild(a);
          ul.appendChild(li);
        });
        linkSection.appendChild(ul);
      } else {
        const noUrls = document.createElement('p');
        noUrls.textContent = 'No URLs found.';
        noUrls.style.color = '#666';
        noUrls.style.margin = '10px 0 0 0';
        linkSection.appendChild(noUrls);
      }

      container.appendChild(linkSection);

    } catch (err) {
      spinner.style.display = 'none';
      statusText.textContent = 'Error processing image: ' + err.message;
      statusText.style.color = '#dc3545';
    }
  };

  process();

  return container;
}