YouTube Stats For Nerds Volume Normalization Analyzer

async function processImage(originalImg, language = "eng") {
    // Create an outer container to overlay our analysis neatly over the image
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.width = '100%';
    container.style.maxWidth = originalImg.width + 'px';
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.backgroundColor = '#000';
    
    // Draw the original image onto a canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);
    
    canvas.style.display = 'block';
    canvas.style.width = '100%';
    canvas.style.height = 'auto';
    container.appendChild(canvas);

    // Create the Analyzer Overlay view
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '5%';
    overlay.style.left = '5%';
    overlay.style.backgroundColor = 'rgba(20, 20, 20, 0.9)';
    overlay.style.padding = '15px 20px';
    overlay.style.borderRadius = '8px';
    overlay.style.color = '#fff';
    overlay.style.boxShadow = '0 8px 16px rgba(0,0,0,0.8)';
    overlay.style.border = '1px solid #444';
    overlay.style.width = '90%';
    overlay.style.boxSizing = 'border-box';
    overlay.style.zIndex = '10';
    
    const title = document.createElement('h3');
    title.innerText = 'YouTube Volume Normalization Analyzer';
    title.style.margin = '0 0 10px 0';
    title.style.color = '#ff4e4e';
    title.style.fontSize = '18px';
    
    const content = document.createElement('div');
    content.style.fontSize = '14px';
    content.style.lineHeight = '1.5';
    content.innerHTML = '<p style="margin:0; color:#ddd;">Loading Tesseract OCR engine...</p>';
    
    overlay.appendChild(title);
    overlay.appendChild(content);
    container.appendChild(overlay);

    try {
        // Dynamically load Tesseract.js if not already present
        if (typeof window.Tesseract === 'undefined') {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }
        
        content.innerHTML = '<p style="margin:0; color:#ddd;">Scanning image for <strong>Stats for nerds</strong> data... Please wait, this may take a moment.</p>';

        // Perform OCR on the image
        const result = await window.Tesseract.recognize(canvas, language);
        const text = result.data.text;
        const lines = text.split('\n');
        
        let foundLine = '';
        
        // Find line mentioning volume normalization
        for (const line of lines) {
            const lowerLine = line.toLowerCase();
            if (lowerLine.includes('volume') || lowerLine.includes('normalize') || lowerLine.includes('loudness')) {
                foundLine = line;
                break;
            }
        }
        
        // Fallback: look for generic decibel entries commonly seen in detailed device statistics
        if (!foundLine) {
            for (const line of lines) {
                const lowerLine = line.toLowerCase();
                if (lowerLine.includes('db') && (line.includes('%') || line.includes('/'))) {
                    foundLine = line;
                    break;
                }
            }
        }

        if (foundLine) {
            let htmlStr = `<div style="margin-bottom:12px;">
                <strong>Detected Stats Line:</strong>
                <div style="color:#00ffcc; font-family:monospace; background:#111; padding:8px; border-radius:4px; margin-top:4px; word-break:break-all;">${foundLine}</div>
            </div>`;
            
            // Extract dB metric patterns like (-35.0dB) or (-14.0dB) that correlate to YouTube's Loudness algorithms
            const dbMatches = foundLine.match(/(-?\d+(?:\.\d+)?)\s*dB/gi);
            if (dbMatches && dbMatches.length > 0) {
                htmlStr += `<div style="margin-bottom:8px;"><strong>Loudness Analysis:</strong></div><ul style="margin:0 0 12px 0; padding-left:20px; list-style-type:square;">`;
                
                dbMatches.forEach((match) => {
                    const val = parseFloat(match.replace(/db/i, '').trim());
                    let color = val > 0 ? '#ffaa00' : '#00ffcc';
                    
                    let targetNote = "";
                    if (val === -14 || val === -14.0) {
                        targetNote = " <i>(YouTube's target reference level limit)</i>";
                        color = '#aaaaaa';
                    } else if (val < 0) {
                        targetNote = " <i>(Quiet content relative to reference, audio compression skipped)</i>";
                    } else {
                        targetNote = " <i>(Loudness reduction penalty applied to normalize volume)</i>";
                    }

                    htmlStr += `<li style="color:${color}; margin-bottom:6px;"><strong>${match}</strong>${targetNote}</li>`;
                });
                htmlStr += `</ul>`;
                
                // Identify mentions of popular codecs referenced in the original query
                const lowerText = foundLine.toLowerCase();
                const hasOpus = lowerText.includes('opus');
                const hasAc3 = lowerText.includes('ac3');
                const hasEac3 = lowerText.includes('eac3') || lowerText.includes('ec-3');
                const hasMp4a = lowerText.includes('mp4a');

                if (hasOpus || hasAc3 || hasEac3 || hasMp4a) {
                    htmlStr += `<div style="font-size:12px; color:#aaa; border-top:1px solid #333; padding-top:8px;"><strong>Detected Codecs Context:</strong> `;
                    const foundCodecs = [];
                    if (hasOpus) foundCodecs.push("Opus");
                    if (hasAc3) foundCodecs.push("AC-3 (Dolby Digital)");
                    if (hasEac3) foundCodecs.push("E-AC-3 (Dolby Digital Plus)");
                    if (hasMp4a) foundCodecs.push("AAC (mp4a)");
                    htmlStr += foundCodecs.join(', ') + `</div>`;
                }

            } else {
                htmlStr += `<p style="margin:0; color:#ffaa00;">No precise dB measurements found in the extracted line.</p>`;
            }
            content.innerHTML = htmlStr;
        } else {
            content.innerHTML = `<p style="margin:0; color:#ffaa00;">No volume normalization data found in this image.<br>Please ensure the image contains a clear, readable "Stats for nerds" overlay.</p>`;
            
            // Present a snippet of what could be seen to help users troubleshoot formatting issues
            const cleanText = text.replace(/[^a-zA-Z0-9\s]/g, ' ').replace(/\s+/g, ' ').trim();
            const snippet = cleanText.substring(0, 100);
            if (snippet) {
                content.innerHTML += `<p style="margin:10px 0 0 0; font-size:11px; color:#888;">Detected text preview: ${snippet}...</p>`;
            }
        }

    } catch (err) {
        content.innerHTML = `<p style="margin:0; color:#ff4e4e;">Error processing image: ${err.message}</p>`;
    }

    return container; // Returns wrapper element containing original image and dynamic analysis display
}