YouTube Audio Volume Normalization Tool For Opus And Ac3 Formats

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

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

    // Automatically determine content loudness based on the prompt's described normalization levels
    let finalContentLoudness = contentLoudness;
    if (contentLoudness === 'auto') {
        finalContentLoudness = (audioFormat.toLowerCase() === 'ac3') ? '-26.0dB' : '-19.0dB';
    }

    // Adaptive scaling so the overlay box scales proportionally and always fits
    let scale = Math.max(1, originalImg.width / 1280); 
    
    // Prevent the overlay box from being larger than the canvas itself on unusually small images
    if (600 * scale > originalImg.width) {
        scale = originalImg.width / 620; 
    }
    if (450 * scale > originalImg.height) {
        scale = Math.min(scale, originalImg.height / 480); 
    }

    // Calculations for the sizing and positioning of the overlay box
    const padding = 20 * scale;
    const boxWidth = 540 * scale;
    const boxHeight = 350 * scale;
    const boxX = padding;
    const boxY = padding;

    // Draw Stats for Nerds semi-transparent background
    ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
    if (ctx.roundRect) {
        ctx.beginPath();
        ctx.roundRect(boxX, boxY, boxWidth, boxHeight, 6 * scale);
        ctx.fill();
    } else {
        ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    }

    // Base font setting
    const fontName = '"Roboto", Arial, sans-serif';

    // Top-right Close (✕) button
    ctx.fillStyle = '#ffffff';
    ctx.textBaseline = 'top';
    ctx.font = `${18 * scale}px ${fontName}`;
    ctx.textAlign = 'right';
    ctx.fillText("✕", boxX + boxWidth - 15 * scale, boxY + 15 * scale);

    // Header Title
    ctx.font = `bold ${15 * scale}px ${fontName}`;
    ctx.textAlign = 'left';
    ctx.fillText("Stats for nerds", boxX + 15 * scale, boxY + 18 * scale);

    // Divider Line
    ctx.lineWidth = 1 * Math.max(1, scale * 0.5);
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.beginPath();
    ctx.moveTo(boxX, boxY + 45 * scale);
    ctx.lineTo(boxX + boxWidth, boxY + 45 * scale);
    ctx.stroke();

    // Stats Configuration Data
    // Simulating standard YouTube Stats for Nerds layout
    const stats = [
        ["Video ID / sCPN", "aBcDeFgHiJk / XXXX YYYY ZZZZ"],
        ["Viewport / Frames", `${canvas.width}x${canvas.height}*1.00 / 0 dropped of 1337`],
        ["Current / Optimal Res", `${canvas.width}x${canvas.height}@60 / ${canvas.width}x${canvas.height}@60`],
        ["Volume / Normalized", `100% / 100% (content loudness ${finalContentLoudness} / ref ${targetLoudness})`],
        ["Codecs", `vp09.00.51.08.01.01 (303) / ${audioFormat.toLowerCase()} (251)`],
        ["Color", "bt709 / smpte170m"],
        ["Host", "r1---sn-hp57kneo.googlevideo.com"],
        ["Connection Speed", "154000 Kbps"],
        ["Network Activity", "0 KB"],
        ["Buffer Health", "30.00 s"]
    ];

    // Traverse and draw rows identically to YouTube layout
    ctx.font = `${13 * scale}px ${fontName}`;
    const col1X = boxX + 15 * scale;
    const col2X = boxX + 180 * scale;
    let currentY = boxY + 55 * scale;

    stats.forEach((stat) => {
        // Label (left column - dimmed)
        ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
        ctx.fillText(stat[0], col1X, currentY);
        
        // Value (right column - bright white)
        ctx.fillStyle = '#ffffff';
        ctx.fillText(stat[1], col2X, currentY);
        
        currentY += 24 * scale;
    });

    // Bottom Action Link 
    ctx.fillStyle = '#3ea6ff';
    ctx.font = `bold ${13 * scale}px ${fontName}`;
    ctx.fillText("Copy debug info", boxX + 15 * scale, currentY + 12 * scale);

    return canvas;
}