Image Music Scanner And Identifier Tool

function processImage(originalImg, scanLanguage = 'eng+rus') {
    // Container setup
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.maxWidth = '500px';
    container.style.margin = '0 auto';
    container.style.backgroundColor = '#181818';
    container.style.color = '#ffffff';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.borderRadius = '16px';
    container.style.overflow = 'hidden';
    container.style.boxShadow = '0 10px 30px rgba(0,0,0,0.5)';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    
    // Inject CSS for scanning animations
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes scanline {
            0% { top: 0; }
            50% { top: 100%; }
            100% { top: 0; }
        }
        .music-scanner-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 3px;
            background: #1db954; /* Spotify green-like accent */
            box-shadow: 0 0 15px #1db954, 0 0 30px #1db954;
            animation: scanline 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            z-index: 10;
        }
        .music-scanner-pulse {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }
    `;
    container.appendChild(style);

    // Top section: Image Viewport with Scanning Effect
    const imageWrapper = document.createElement('div');
    imageWrapper.style.position = 'relative';
    imageWrapper.style.width = '100%';
    imageWrapper.style.backgroundColor = '#0a0a0a';
    imageWrapper.style.display = 'flex';
    imageWrapper.style.justifyContent = 'center';
    imageWrapper.style.alignItems = 'center';
    imageWrapper.style.maxHeight = '320px';
    imageWrapper.style.overflow = 'hidden';
    
    const imgEl = document.createElement('img');
    imgEl.src = originalImg.src;
    imgEl.style.width = '100%';
    imgEl.style.height = 'auto';
    imgEl.style.objectFit = 'contain';
    imgEl.style.maxHeight = '320px';
    imgEl.style.opacity = '0.4';
    imgEl.style.transition = 'opacity 0.8s ease';
    
    const scannerLine = document.createElement('div');
    scannerLine.className = 'music-scanner-line';
    
    imageWrapper.appendChild(imgEl);
    imageWrapper.appendChild(scannerLine);
    container.appendChild(imageWrapper);

    // Bottom section: Info, Status and Identifications
    const infoWrapper = document.createElement('div');
    infoWrapper.style.padding = '25px';
    infoWrapper.style.display = 'flex';
    infoWrapper.style.flexDirection = 'column';
    infoWrapper.style.alignItems = 'center';
    infoWrapper.style.minHeight = '140px';
    
    const statusText = document.createElement('h3');
    statusText.innerText = 'Initializing Music Scanner...';
    statusText.style.margin = '0 0 10px 0';
    statusText.style.fontSize = '18px';
    statusText.className = 'music-scanner-pulse';
    
    const detailText = document.createElement('p');
    detailText.innerText = 'Loading cognitive models';
    detailText.style.margin = '0';
    detailText.style.fontSize = '14px';
    detailText.style.color = '#a0a0a0';
    detailText.style.textAlign = 'center';
    
    infoWrapper.appendChild(statusText);
    infoWrapper.appendChild(detailText);
    container.appendChild(infoWrapper);

    // Asynchronous Execution Context for scanning and identification
    (async () => {
        try {
            // Step 1: Load Tesseract.js OCR library
            if (typeof window.Tesseract === 'undefined') {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // Step 2: Read Text/Metadata from Image Frame
            statusText.innerText = 'Scanning Image Surface...';
            detailText.innerText = 'Extracting structural text matrices';
            
            // Draw to a clean canvas to prevent strict object typing issues
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width || 800;
            canvas.height = originalImg.naturalHeight || originalImg.height || 600;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

            const result = await window.Tesseract.recognize(canvas, scanLanguage, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        detailText.innerText = `Interpreting symbols: ${Math.round(m.progress * 100)}%`;
                    }
                }
            });

            const text = result.data.text || '';
            const cleanText = text.replace(/[^a-zA-Zа-яА-Я0-9\s]/g, ' ').trim();
            const textTokens = cleanText.split(/\s+/).filter(w => w.length > 2);
            
            let query = '';
            // Attempt to take the most prominent 4 words for a high-accuracy search match
            if (textTokens.length > 0) {
                query = textTokens.slice(0, 4).join(' ');
            }

            if (!query) {
                throw new Error('Music unidentifiable: No readable clues found directly in the image.');
            }

            statusText.innerText = 'Searching Database...';
            detailText.innerText = `Looking up matches for: "${query}"`;
            
            // Step 3: Search iTunes Public API for a music match
            const iTunesUrl = `https://itunes.apple.com/search?term=${encodeURIComponent(query)}&media=music&entity=song&limit=1`;
            const response = await fetch(iTunesUrl);
            const data = await response.json();

            // Processing complete - Reset Scan FX
            scannerLine.remove();
            imgEl.style.opacity = '1';
            statusText.className = '';

            infoWrapper.innerHTML = ''; // Clear status items

            if (data.results && data.results.length > 0) {
                const track = data.results[0];
                
                // Track Found UI
                const successLabel = document.createElement('div');
                successLabel.innerText = '✓ Track Identified';
                successLabel.style.color = '#1db954';
                successLabel.style.fontWeight = 'bold';
                successLabel.style.marginBottom = '20px';
                successLabel.style.textTransform = 'uppercase';
                successLabel.style.letterSpacing = '1px';
                successLabel.style.fontSize = '12px';
                infoWrapper.appendChild(successLabel);

                const artwork = document.createElement('img');
                // Upgrade standard 100x100 resolution to a sharper 300x300
                artwork.src = track.artworkUrl100 ? track.artworkUrl100.replace('100x100', '300x300') : '';
                artwork.style.width = '140px';
                artwork.style.height = '140px';
                artwork.style.borderRadius = '8px';
                artwork.style.boxShadow = '0 6px 16px rgba(0,0,0,0.6)';
                artwork.style.marginBottom = '15px';
                artwork.style.objectFit = 'cover';
                if (artwork.src) infoWrapper.appendChild(artwork);

                const trackName = document.createElement('h3');
                trackName.innerText = track.trackName;
                trackName.style.margin = '0 0 5px 0';
                trackName.style.fontSize = '22px';
                trackName.style.textAlign = 'center';
                infoWrapper.appendChild(trackName);

                const artistName = document.createElement('p');
                artistName.innerText = track.artistName;
                artistName.style.margin = '0 0 20px 0';
                artistName.style.fontSize = '16px';
                artistName.style.color = '#b3b3b3';
                artistName.style.textAlign = 'center';
                infoWrapper.appendChild(artistName);

                if (track.previewUrl) {
                    const audio = document.createElement('audio');
                    audio.controls = true;
                    audio.src = track.previewUrl;
                    audio.style.width = '100%';
                    audio.style.outline = 'none';
                    audio.style.borderRadius = '24px';
                    infoWrapper.appendChild(audio);
                }
            } else {
                // Unrecognized Content UI
                const failLabel = document.createElement('div');
                failLabel.innerText = '✗ Track Unrecognized';
                failLabel.style.color = '#ff4d4d';
                failLabel.style.fontWeight = 'bold';
                failLabel.style.marginBottom = '12px';
                
                const failDetail = document.createElement('p');
                failDetail.innerText = `Detected surface features: "${query}"\nNo corresponding tracks located in the music registry.`;
                failDetail.style.color = '#b3b3b3';
                failDetail.style.textAlign = 'center';
                failDetail.style.margin = '0';
                failDetail.style.fontSize = '14px';
                failDetail.style.lineHeight = '1.5';
                
                infoWrapper.appendChild(failLabel);
                infoWrapper.appendChild(failDetail);
            }

        } catch (err) {
            // General Error Handling UI
            scannerLine.remove();
            imgEl.style.opacity = '1';
            statusText.className = '';
            statusText.innerText = 'Scan Completed (Error)';
            statusText.style.color = '#ff4d4d';
            detailText.innerText = err.message || 'An unknown anomaly occurred during identification.';
            detailText.style.color = '#ffaaaa';
        }
    })();

    // Returns synchronous outer container immediately while inner content mutates asynchronously
    return container;
}