Image Code Screenshot Language Identifier

async function processImage(originalImg) {
    // Self-contained helper function to dynamically load a script if not already present
    const loadScript = (url, globalVarName) => {
        return new Promise((resolve, reject) => {
            if (window[globalVarName]) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
            document.head.appendChild(script);
        });
    };

    // Self-contained helper function to dynamically load a stylesheet
    const loadStyle = (url) => {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`link[href="${url}"]`)) {
                return resolve();
            }
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = url;
            link.onload = () => resolve();
            link.onerror = () => reject(new Error(`Failed to load style: ${url}`));
            document.head.appendChild(link);
        });
    };

    const outputDiv = document.createElement('div');
    outputDiv.style.fontFamily = 'Arial, sans-serif';
    outputDiv.style.padding = '20px';
    outputDiv.style.boxSizing = 'border-box';
    outputDiv.style.width = '100%';

    const updateStatus = (message) => {
        outputDiv.innerHTML = `<p style="font-style: italic; color: #555; text-align: center;">${message}</p>`;
    };
    
    updateStatus('Initializing...');

    try {
        // 1. Load Tesseract.js for OCR
        const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        await loadScript(TESSERACT_CDN, 'Tesseract');
        
        // 2. Perform OCR on the image
        updateStatus('Initializing OCR worker...');
        // Create a worker with a logger to show progress
        const worker = await Tesseract.createWorker('eng', 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = Math.round(m.progress * 100);
                    updateStatus(`Recognizing text... ${progress}%`);
                }
            },
        });

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

        if (!text || text.trim().length === 0) {
            updateStatus('Could not detect any text in the image. Please try a clearer screenshot.');
            return outputDiv;
        }
        
        // 3. Load highlight.js for language detection and syntax highlighting
        updateStatus('Loading language detection library...');
        const HLJS_SCRIPT_CDN = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js';
        const HLJS_STYLE_CDN = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css';
        
        await Promise.all([
            loadScript(HLJS_SCRIPT_CDN, 'hljs'),
            loadStyle(HLJS_STYLE_CDN)
        ]);

        // 4. Detect the programming language
        updateStatus('Analyzing code and detecting language...');
        const result = hljs.highlightAuto(text);
        const language = result.language || 'Unknown';
        const highlightedCode = result.value;

        // 5. Create and return the final display element
        const languageDisplayName = language.charAt(0).toUpperCase() + language.slice(1);
        
        outputDiv.innerHTML = `
            <div style="margin-bottom: 20px; text-align: center;">
                <h3 style="margin: 0 0 5px 0; color: #333; font-weight: normal;">Detected Language</h3>
                <p style="margin: 0; font-size: 1.8em; font-weight: bold; color: #007bff;">${languageDisplayName}</p>
            </div>
            <div>
                <h3 style="margin: 0 0 10px 0; color: #333; font-weight: normal;">Extracted & Highlighted Code</h3>
                <pre style="margin: 0; padding: 15px; border-radius: 5px; background-color: #2d2d2d; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"><code class="hljs ${language}" style="text-align: left;">${highlightedCode}</code></pre>
            </div>
        `;
        
        return outputDiv;

    } catch (error) {
        console.error('An error occurred during image processing:', error);
        updateStatus(`An error occurred: ${error.message}. Check the console for details.`);
        return outputDiv;
    }
}