YouTube Stats For Nerds Audio Volume Normalization Analyzer

async function processImage(originalImg, bgColor = "#161b22", accentColor = "#58a6ff") {
    // Dynamically load Tesseract.js (v5) if it's not already on the page
    if (!window.Tesseract) {
        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(new Error("Failed to load Tesseract OCR engine."));
            document.head.appendChild(script);
        });
    }

    let text = "";
    try {
        // Run OCR on the original image
        const result = await window.Tesseract.recognize(originalImg, 'eng');
        text = result.data.text || "";
    } catch (e) {
        console.error("OCR Error:", e);
        text = "";
    }

    // Outer Container
    const container = document.createElement('div');
    container.style.cssText = `
        background: ${bgColor}; 
        color: #e6edf3; 
        font-family: system-ui, -apple-system, sans-serif; 
        padding: 24px; 
        border-radius: 12px; 
        box-shadow: 0 8px 24px rgba(0,0,0,0.4); 
        max-width: 650px; 
        display: flex; 
        flex-direction: column; 
        gap: 20px;
    `;

    // 1. Image Thumbnail
    const imgWrapper = document.createElement('div');
    imgWrapper.style.cssText = `
        text-align: center; 
        border-radius: 8px; 
        overflow: hidden; 
        background: rgba(0,0,0,0.5); 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        padding: 12px; 
        border: 1px solid rgba(255,255,255,0.1);
    `;
    
    // Create a small preview canvas to safely display without external links
    const maxImgHeight = 220;
    const thumbCanvas = document.createElement('canvas');
    let ratio = originalImg.width / originalImg.height;
    let tHeight = Math.min(originalImg.height, maxImgHeight);
    let tWidth = tHeight * ratio;
    
    // Prevent overflowing the container's max width
    if (tWidth > 600) {
        tWidth = 600;
        tHeight = tWidth / ratio;
    }
    
    thumbCanvas.width = tWidth;
    thumbCanvas.height = tHeight;
    thumbCanvas.style.cssText = "border-radius: 4px;";
    const tctx = thumbCanvas.getContext('2d');
    tctx.drawImage(originalImg, 0, 0, tWidth, tHeight);
    imgWrapper.appendChild(thumbCanvas);
    container.appendChild(imgWrapper);

    // 2. Header
    const header = document.createElement('h3');
    header.style.cssText = `
        margin: 0; 
        color: ${accentColor}; 
        font-size: 22px; 
        border-bottom: 2px solid rgba(255,255,255,0.1); 
        padding-bottom: 12px;
    `;
    header.innerText = "Stats for Nerds Volume Analysis";
    container.appendChild(header);

    // 3. Audio Data Parse Logic
    let parsedLines = [];
    let loudnessText = "";

    // Parse Percentages (usually Volume / Normalized Volume are the primary percentages)
    let pctMatch = [...text.matchAll(/([\d\.]+)%/g)].map(m => m[1]);
    if (pctMatch.length >= 2) {
        parsedLines.push(`Player Volume: <strong style="color:#fff">${pctMatch[0]}%</strong> | Normalized Volume: <strong style="color:#fff">${pctMatch[1]}%</strong>`);
    } else if (pctMatch.length === 1) {
         parsedLines.push(`Player Volume: <strong style="color:#fff">${pctMatch[0]}%</strong>`);
    }

    // Parse dB (Loudness stats)
    let stdMatch = text.match(/loudness[^\d-]*([-+]*[\d\.]+)\s*dB/i); // Standard Desktop YouTube format
    let stMatch = text.match(/\(\s*([-+]*[\d\.]+)\s*dB\s*\/\s*([-+]*[\d\.]+)\s*dB\s*\)/i); // Android TV / SmartTube format

    if (stdMatch) {
        let l = parseFloat(stdMatch[1]);
        parsedLines.push(`Content Loudness: <strong style="color:#fff">${l} dB</strong> (relative to target)`);
        
        if (l > 0) {
            loudnessText = `Audio is <strong style="color:#fff">${l}dB LOUDER</strong> than the platform's target (-14 LUFS). The video player applies compression limiters (scales the volume down) to match other videos and prevent clipping.`;
        } else if (l < 0) {
            loudnessText = `Audio is <strong style="color:#fff">${Math.abs(l)}dB QUIETER</strong> than the platform's target. YouTube does NOT artificially boost audio above 100%, so this video may sound quieter than standard videos.`;
        } else {
            loudnessText = `Audio is <strong style="color:#fff">EXACTLY</strong> at the platform's target loudness. It plays in pristine, uncompressed quality exactly as uploaded.`;
        }
    } else if (stMatch) {
        let cur = parseFloat(stMatch[1]);
        let tgt = parseFloat(stMatch[2]);
        parsedLines.push(`Stream Loudness: <strong style="color:#fff">${cur} dB</strong> | Target Loudness: <strong style="color:#fff">${tgt} dB</strong>`);
        
        let diff = cur - tgt;
        if (diff > 0) {
            loudnessText = `Stream is <strong style="color:#fff">${diff.toFixed(1)}dB LOUDER</strong> than the target level. Normalized volume will be lowered to prevent clipping and protect your ears.`;
        } else if (diff < 0) {
            loudnessText = `Stream is <strong style="color:#fff">${Math.abs(diff).toFixed(1)}dB QUIETER</strong> than the target level. Since it is below zero-reference, the platform will likely play it out at the original low level.`;
        } else {
            loudnessText = `Stream is <strong style="color:#fff">EXACTLY</strong> at the target loudness (-14 LUFS reference).`;
        }
    } else {
        // Fallback: search for any standalone dB identifiers
        let allDB = [...text.matchAll(/([-+]*[\d\.]+)\s*dB/ig)].map(m => m[0]);
        if (allDB.length > 0) {
            parsedLines.push(`Detected dB readings: <strong style="color:#fff">${allDB.join(', ')}</strong>`);
            loudnessText = `Found dB stats in the text, but could not determine standard normalization context format.`;
        } else {
            loudnessText = (text.trim().length === 0) 
                ? "OCR failed to read text from the image." 
                : "No Audio / Loudness dB statistics were detected. Please ensure your image is a highly-visible screenshot of 'Stats for Nerds'.";
        }
    }

    // 4. Content Render Element Setup
    const contentBox = document.createElement('div');
    contentBox.style.cssText = "font-size: 16px; line-height: 1.6;";

    // Draw parsed facts array list
    if (parsedLines.length > 0) {
        const ul = document.createElement('ul');
        ul.style.cssText = "margin: 0 0 20px 0; padding-left: 0; list-style-type: none;";
        parsedLines.forEach(line => {
            const li = document.createElement('li');
            li.style.cssText = "margin-bottom: 8px; font-family: ui-monospace, SFMono-Regular, default, monospace; font-size: 15px; color: #8b949e;";
            li.innerHTML = `<span style="color: ${accentColor}; margin-right: 6px;">►</span> ${line}`;
            ul.appendChild(li);
        });
        contentBox.appendChild(ul);
    }

    // Draw final analysis container
    const analysisWrapper = document.createElement('div');
    analysisWrapper.style.cssText = `
        background: rgba(255, 255, 255, 0.04); 
        padding: 16px; 
        border-radius: 8px; 
        border-left: 5px solid ${accentColor};
    `;
    analysisWrapper.innerHTML = `<strong style="color: ${accentColor}; font-size: 18px; display: block; margin-bottom: 10px;">Diagnostic Analysis:</strong>${loudnessText}`;
    contentBox.appendChild(analysisWrapper);

    container.appendChild(contentBox);

    return container;
}