YouTube Stats For Nerds Audio Volume And Codec Information Extractor

async function processImage(originalImg, bgColor = "#1e1e1e", textColor = "#e0e0e0", accentColor = "#ff4a4a") {
    // Helper function to prevent HTML injection from OCR strings
    const escapeHTML = (str) => {
        return str.replace(/[&<>'"]/g, tag => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            "'": '&#39;',
            '"': '&quot;'
        }[tag] || tag));
    };

    // Create the container element that will be returned immediately
    const container = document.createElement('div');
    container.style.cssText = `
        background-color: ${escapeHTML(bgColor)};
        color: ${escapeHTML(textColor)};
        font-family: 'Courier New', Courier, monospace;
        padding: 20px;
        border-radius: 8px;
        max-width: 650px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        word-wrap: break-word;
        position: relative;
    `;
    
    // Initial Loading State
    container.innerHTML = `
        <h3 style="margin-top: 0; color: ${escapeHTML(accentColor)};">YouTube Stats For Nerds Extractor</h3>
        <p>Loading OCR engine and processing image. Please wait...</p>
        <div style="border-top: 2px solid ${escapeHTML(accentColor)}; width: 0%; transition: width 0.5s; margin-top: 10px;" id="loading-bar"></div>
    `;

    // Process asynchronously to avoid blocking the main thread
    (async () => {
        try {
            // Dynamically load Tesseract.js if not available
            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);
                });
            }

            const loadingBar = container.querySelector('#loading-bar');
            if (loadingBar) loadingBar.style.width = '30%';

            // Initialize Tesseract worker
            const worker = await Tesseract.createWorker('eng');
            
            if (loadingBar) loadingBar.style.width = '60%';

            // Perform OCR
            const { data: { text } } = await worker.recognize(originalImg);
            await worker.terminate();

            if (loadingBar) loadingBar.style.width = '100%';

            // Parse text lines for specific YouTube stats
            const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0);
            
            let volumeLines = [];
            let codecLines = [];

            lines.forEach(line => {
                const lowerLine = line.toLowerCase();
                
                // Identify Volume, Normalized, Loudness and dB metrics
                if (lowerLine.includes('vol') || 
                    lowerLine.includes('norm') || 
                    lowerLine.match(/\b\d+(\.\d+)?\s*db\b/) || 
                    lowerLine.includes('loudness')) {
                    
                    // Filter out likely false positive words from other Stats bits
                    if (!lowerLine.includes('color') && !lowerLine.includes('viewport')) {
                        volumeLines.push(line);
                    }
                }
                
                // Identify Codec metrics (Opus, AC3, mp4a, ec-3, vp9, avc1)
                if (lowerLine.includes('codec') || 
                    lowerLine.includes('opus') || 
                    lowerLine.includes('mp4a') || 
                    lowerLine.includes('ac3') || 
                    lowerLine.includes('avc') || 
                    lowerLine.includes('vp9') || 
                    lowerLine.includes('ec-3')) {
                    
                    if (!codecLines.includes(line)) {
                         codecLines.push(line);
                    }
                }
            });

            // Update UI with Extracted Data
            container.innerHTML = `
                <h3 style="margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #444; color: ${escapeHTML(accentColor)};">
                    Audio Volume & Codec Inspector
                </h3>
                
                <div style="margin-top: 15px;">
                    <strong style="color: #76B900;">Volume / Loudness Information:</strong>
                    <ul style="margin: 8px 0; padding-left: 20px; line-height: 1.5;">
                        ${volumeLines.length > 0 
                            ? volumeLines.map(v => `<li>${escapeHTML(v)}</li>`).join('') 
                            : '<li><em>No specific volume/normalized statistics detected.</em></li>'}
                    </ul>
                </div>
                
                <div style="margin-top: 15px;">
                    <strong style="color: #00B4D8;">Codec Information:</strong>
                    <ul style="margin: 8px 0; padding-left: 20px; line-height: 1.5;">
                        ${codecLines.length > 0 
                            ? codecLines.map(c => `<li>${escapeHTML(c)}</li>`).join('') 
                            : '<li><em>No codec information detected.</em></li>'}
                    </ul>
                </div>
                
                <details style="margin-top: 25px; border: 1px solid #333; padding: 10px; border-radius: 5px; background: rgba(0,0,0,0.2);">
                    <summary style="cursor: pointer; font-weight: bold; color: #aaa;">View Full Raw OCR Output</summary>
                    <pre style="white-space: pre-wrap; font-size: 0.85em; margin-top: 10px; color: #888;">${escapeHTML(text)}</pre>
                </details>
            `;

        } catch (err) {
            container.innerHTML = `
                <h3 style="margin-top: 0; color: ${escapeHTML(accentColor)};">Error Processing Image</h3>
                <p style="color: #ffaaaa;">Failed to extract text. See error details below:</p>
                <pre style="white-space: pre-wrap; font-size: 0.85em; color: #aaa;">${escapeHTML(err.message)}</pre>
            `;
        }
    })();

    return container;
}