YouTube Stats For Nerds Volume Normalizer For Opus And Ac3 Audio

function processImage(originalImg, audioFormat = 'Opus', contentLoudness = 'auto', targetLoudness = '-14.0dB', volumePercentage = 100, normalizedPercentage = 100) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

    // Draw the underlying image
    ctx.drawImage(originalImg, 0, 0);

    // Adjust scale so the overlay looks consistent regardless of image resolution
    // Assuming the base design looks proportional on a 1280x720 base image
    const scale = Math.max(0.4, originalImg.width / 1280); 
    const baseWidth = 460;
    const baseHeight = 260;
    
    const width = baseWidth * scale;
    const height = baseHeight * scale;

    const startX = 20 * scale;
    const startY = 20 * scale;
    const padding = 15 * scale;
    const lineSpacing = 20 * scale;
    
    // Fonts settings
    const fontSize = 13 * scale;
    const iconSize = 22 * scale;
    const colWidth = 165 * scale;

    // Draw Overlay Box Background (Dark transparent standard for YouTube 'Stats for nerds')
    ctx.fillStyle = 'rgba(18, 18, 18, 0.75)';
    ctx.fillRect(startX, startY, width, height);

    // Draw Close Button (×)
    ctx.fillStyle = '#ffffff';
    ctx.font = `${iconSize}px "Roboto", "Segoe UI", "Arial", sans-serif`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('×', startX + width - padding, startY + padding - (3 * scale));

    // Resolve audio format variables based on description logic
    let finalContentLoudness = contentLoudness;
    const formatLower = audioFormat.toLowerCase();
    const isAc3 = formatLower === 'ac3' || formatLower === 'ac-3';
    
    if (contentLoudness === 'auto') {
        // Fallback to defaults shown in the tool description for their respective formats
        finalContentLoudness = isAc3 ? '-26.0dB' : '-19.0dB';
    }

    const codecStr = isAc3 ? 'ac-3 (381)' : 'opus (251)';
    const volNormStr = `${volumePercentage}% / ${normalizedPercentage}% (content loudness ${finalContentLoudness} / target ${targetLoudness})`;

    // Mock realistic Stats for Nerds rows while injecting our specific volume normalizations
    const statsItems = [
        { k: 'Video ID / sCPN', v: 'aBcDeFgHiJk / X1Y2 Z3W4 V5U6' },
        { k: 'Viewport / Frames', v: '1920x1080*1.00 / 0 dropped of 1245' },
        { k: 'Current / Optimal Res', v: '1920x1080@60 / 1920x1080@60' },
        { k: 'Volume / Normalized', v: volNormStr },
        { k: 'Codecs', v: `vp09.00.51.08.01.01.01.01.00 (399) / ${codecStr}` },
        { k: 'Color', v: 'bt709 / bt709' },
        { k: 'Host', v: 'r4---sn-nx5s-cg0e.googlevideo.com' },
        { k: 'Connection Speed', v: '65432 Kbps' },
        { k: 'Network Activity', v: '0 KB' },
        { k: 'Buffer Health', v: '115.42 s' },
        { k: 'Mystery Text', v: 'vd:s, tl:85, ec:1' }
    ];

    // Draw Stats Text
    ctx.font = `${fontSize}px "Roboto", "Segoe UI", "Arial", sans-serif`;
    ctx.textAlign = 'left';

    let textY = startY + padding;

    for (let i = 0; i < statsItems.length; i++) {
        // Label / Key column
        ctx.fillStyle = '#b3b3b3'; // lightly dimmed gray text
        ctx.fillText(statsItems[i].k, startX + padding, textY);

        // Value column
        ctx.fillStyle = '#ffffff'; // standard bold white text
        ctx.fillText(statsItems[i].v, startX + padding + colWidth, textY);

        textY += lineSpacing;
    }

    return canvas;
}