Image Lyrics And Music Scanner Tool

async function processImage(originalImg, language = 'rus+eng', themeColor = '#1db954') {
    // Create the main container div
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.margin = '0 auto';
    container.style.background = '#121212'; // Dark music-themed background
    container.style.color = '#ffffff';
    container.style.padding = '20px';
    container.style.borderRadius = '12px';
    container.style.boxSizing = 'border-box';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.4)';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Lyrics & Music Scanner';
    title.style.margin = '0 0 20px 0';
    title.style.color = themeColor;
    title.style.textAlign = 'center';
    container.appendChild(title);

    // Display the image being scanned
    const displayImg = new Image();
    displayImg.src = originalImg.src;
    displayImg.style.maxWidth = '100%';
    displayImg.style.maxHeight = '300px';
    displayImg.style.objectFit = 'contain';
    displayImg.style.borderRadius = '8px';
    displayImg.style.marginBottom = '20px';
    displayImg.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
    container.appendChild(displayImg);

    // Status Area for progress
    const statusArea = document.createElement('div');
    statusArea.style.width = '100%';
    statusArea.style.textAlign = 'center';
    statusArea.style.padding = '15px';
    statusArea.style.background = '#282828';
    statusArea.style.borderRadius = '8px';
    statusArea.style.marginBottom = '20px';
    
    const statusText = document.createElement('span');
    statusText.innerText = 'Initializing scanner...';
    statusArea.appendChild(statusText);

    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.height = '6px';
    progressContainer.style.background = '#404040';
    progressContainer.style.marginTop = '10px';
    progressContainer.style.borderRadius = '3px';
    progressContainer.style.overflow = 'hidden';
    
    const progressBar = document.createElement('div');
    progressBar.style.height = '100%';
    progressBar.style.width = '0%';
    progressBar.style.background = themeColor;
    progressBar.style.transition = 'width 0.2s';
    progressContainer.appendChild(progressBar);
    statusArea.appendChild(progressContainer);

    container.appendChild(statusArea);

    // Results container
    const resultsArea = document.createElement('div');
    resultsArea.style.width = '100%';
    resultsArea.style.padding = '20px';
    resultsArea.style.background = '#1e1e1e';
    resultsArea.style.borderLeft = `5px solid ${themeColor}`;
    resultsArea.style.borderRadius = '0 8px 8px 0';
    resultsArea.style.whiteSpace = 'pre-wrap';
    resultsArea.style.lineHeight = '1.6';
    resultsArea.style.fontSize = '16px';
    resultsArea.style.display = 'none';
    resultsArea.style.boxSizing = 'border-box';
    container.appendChild(resultsArea);

    // Convert image to canvas to ensure cross-origin compatibility within the OCR engine
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Function to dynamically load Tesseract.js (Optical Character Recognition)
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                resolve(window.Tesseract);
                return;
            }
            const script = document.createElement('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);
        });
    };

    // Execute the OCR scan process
    (async () => {
        try {
            const Tesseract = await loadTesseract();
            
            const result = await Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const percent = Math.round(m.progress * 100);
                            statusText.innerText = `Scanning Lyrics / Text: ${percent}%`;
                            progressBar.style.width = `${percent}%`;
                        } else {
                            statusText.innerText = `Loading Engine: ${m.status}...`;
                        }
                    }
                }
            );

            // Hide status area and show results
            statusArea.style.display = 'none';
            resultsArea.style.display = 'block';
            
            const extractedText = result.data.text.trim();
            
            if (extractedText) {
                const identifierHeader = document.createElement('div');
                identifierHeader.style.fontWeight = 'bold';
                identifierHeader.style.fontSize = '18px';
                identifierHeader.style.color = themeColor;
                identifierHeader.style.marginBottom = '15px';
                identifierHeader.style.textTransform = 'uppercase';
                identifierHeader.style.letterSpacing = '1px';
                identifierHeader.innerText = '🎵 Extracted Lyrics Data';
                resultsArea.appendChild(identifierHeader);

                const textNode = document.createElement('div');
                textNode.innerText = extractedText;
                resultsArea.appendChild(textNode);
            } else {
                resultsArea.innerText = 'No lyrics or text found in the image. Please try another image with clearer text.';
                resultsArea.style.color = '#ff4a4a';
                resultsArea.style.borderLeftColor = '#ff4a4a';
            }
            
        } catch (err) {
            statusText.innerText = 'Error running the scanner: ' + err.message;
            statusText.style.color = '#ff4a4a';
            progressBar.style.background = '#ff4a4a';
        }
    })();

    return container;
}