Video Platform Audio Track DVDRip Player Name Language Extractor

async function processImage(originalImg, language = 'eng') {
    // Create the container element to return
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '20px';
    container.style.backgroundColor = '#fdfdfd';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.color = '#333';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    container.style.maxWidth = '650px';

    // Show initial loading state
    container.innerHTML = `
        <div style="display: flex; align-items: center; justify-content: center; height: 100px;">
            <strong style="color: #007bff;">Analyzing image text data, please wait...</strong>
        </div>
    `;

    // Function to dynamically load Tesseract.js
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                resolve(window.Tesseract);
                return;
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
            script.onload = () => resolve(window.Tesseract);
            script.onerror = () => reject(new Error('Failed to load Tesseract.js'));
            document.head.appendChild(script);
        });
    };

    try {
        const Tesseract = await loadTesseract();
        
        // Draw image directly onto a canvas for processing
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Perform OCR
        const result = await Tesseract.recognize(canvas, language);
        const text = result.data.text || '';

        // Helper function to extract info based on field labels in the OCR text
        const extractByLabel = (regex) => {
            const match = text.match(regex);
            return match ? (match[1] || match[0]).trim() : '';
        };

        // Extract specifics based on the tool's expected properties:
        // Video Platform, Audio Track, DVDRip/Quality, Player Name, Language
        
        const platform = extractByLabel(/(?:Platform|Site|Video Platform):\s*([^\n]+)/i)
            || extractByLabel(/(YouTube|Netflix|Hulu|Amazon|Vimeo|Twitch|Disney\+|HBO Max)/i) 
            || 'Unknown';

        const audioTrack = extractByLabel(/(?:Audio|Track|Audio Track):\s*([^\n]+)/i)
            || extractByLabel(/(AC3|AAC|MP3|DTS[\-\w]*|FLAC|2\.0|5\.1|7\.1)/i)
            || 'Unknown';

        const quality = extractByLabel(/(?:Format|Quality|Release):\s*([^\n]+)/i)
            || extractByLabel(/(DVDRip|BRRip|BDRip|WEBRip|WEB-DL|BluRay|1080p|720p)/i)
            || 'Unknown';

        const player = extractByLabel(/(?:Player|Player Name):\s*([^\n]+)/i)
            || extractByLabel(/(VLC|MPC-HC|PotPlayer|KMPlayer|QuickTime|Windows Media Player)/i)
            || 'Unknown';

        const langExtracted = extractByLabel(/(?:Language|Lang):\s*([^\n]+)/i)
            || extractByLabel(/\b(English|French|Spanish|German|Italian|ENG|FRE|SPA|GER|ITA|JPN|KOR)\b/i)
            || 'Unknown';

        // Render extracted metadata and raw text output
        container.innerHTML = `
            <h2 style="margin-top: 0; font-size: 1.25rem; border-bottom: 2px solid #ddd; padding-bottom: 10px; color: #222;">
                Extraction Report
            </h2>
            <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.95rem;">
                <tbody>
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 10px 0; font-weight: 600; width: 40%;">Video Platform:</td>
                        <td style="padding: 10px 0; text-align: right; color: #555;">${platform}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 10px 0; font-weight: 600;">Audio Track:</td>
                        <td style="padding: 10px 0; text-align: right; color: #555;">${audioTrack}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 10px 0; font-weight: 600;">Quality / Source (DVDRip):</td>
                        <td style="padding: 10px 0; text-align: right; color: #555;">${quality}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 10px 0; font-weight: 600;">Player Name:</td>
                        <td style="padding: 10px 0; text-align: right; color: #555;">${player}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 10px 0; font-weight: 600;">Language:</td>
                        <td style="padding: 10px 0; text-align: right; color: #555;">${langExtracted}</td>
                    </tr>
                </tbody>
            </table>
            <div>
                <strong style="display: block; margin-bottom: 8px; font-size: 0.95rem;">Raw Extracted OCR Text:</strong>
                <div style="background: #eef1f5; padding: 12px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85rem; max-height: 180px; overflow-y: auto; white-space: pre-wrap; color: #444; border: 1px solid #dcdcdc;">${text || 'No parseable text detected in the image.'}</div>
            </div>
        `;
    } catch (error) {
        container.innerHTML = `
            <div style="color: #dc3545; font-weight: bold; background: #fff0f0; border: 1px solid #f8cbcb; padding: 15px; border-radius: 6px;">
                Extraction Error: ${error.message}
            </div>
        `;
    }

    return container;
}