Image Language Identifier Key API Picker

async function processImage(originalImg, configuredApiKey = "auto", apiServiceSelection = "Tesseract Local") {
    // Create main container
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.maxWidth = "800px";
    container.style.margin = "0 auto";
    container.style.padding = "20px";
    container.style.backgroundColor = "#fafafa";
    container.style.borderRadius = "8px";
    container.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";

    // Header
    const header = document.createElement('h2');
    header.innerText = "Language Identifier & API Key Picker";
    header.style.color = "#333";
    header.style.borderBottom = "2px solid #ddd";
    header.style.paddingBottom = "10px";
    header.style.marginTop = "0";
    container.appendChild(header);

    // Display Configurations Used
    const configBar = document.createElement('div');
    configBar.style.display = "flex";
    configBar.style.gap = "20px";
    configBar.style.marginBottom = "20px";
    configBar.style.fontSize = "14px";
    configBar.style.color = "#555";
    configBar.innerHTML = `
        <div><strong>API Handler:</strong> ${apiServiceSelection}</div>
        <div><strong>API Key Status:</strong> ${configuredApiKey === 'auto' ? '<em>Auto-assigned</em>' : configuredApiKey}</div>
    `;
    container.appendChild(configBar);

    // Image Preview Canvas
    const imgCanvas = document.createElement('canvas');
    const ctx = imgCanvas.getContext('2d');
    const MAX_WIDTH = 400;
    let w = originalImg.width;
    let h = originalImg.height;
    if (w > MAX_WIDTH) {
        h = h * (MAX_WIDTH / w);
        w = MAX_WIDTH;
    }
    imgCanvas.width = w;
    imgCanvas.height = h;
    ctx.drawImage(originalImg, 0, 0, w, h);
    imgCanvas.style.display = "block";
    imgCanvas.style.maxWidth = "100%";
    imgCanvas.style.marginBottom = "20px";
    imgCanvas.style.borderRadius = "4px";
    imgCanvas.style.border = "1px solid #ccc";
    container.appendChild(imgCanvas);

    // Status container
    const statusBox = document.createElement('div');
    statusBox.style.padding = "15px";
    statusBox.style.backgroundColor = "#e1f5fe";
    statusBox.style.borderLeft = "4px solid #03a9f4";
    statusBox.style.color = "#01579b";
    statusBox.style.marginBottom = "20px";
    statusBox.style.borderRadius = "0 4px 4px 0";
    statusBox.innerText = "Loading local OCR engine (Tesseract.js)...";
    container.appendChild(statusBox);

    // Results container (hidden initially)
    const resultsBox = document.createElement('div');
    resultsBox.style.display = "none";
    container.appendChild(resultsBox);

    // Full scale canvas for Tesseract OCR processing
    const processCanvas = document.createElement('canvas');
    processCanvas.width = originalImg.width;
    processCanvas.height = originalImg.height;
    processCanvas.getContext('2d').drawImage(originalImg, 0, 0);

    try {
        // Load Tesseract dynamically
        if (!window.Tesseract) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = "https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js";
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        statusBox.innerText = "Initializing Language & Script Detection (OSD) module...";
        const worker = await Tesseract.createWorker();

        // 1. Run OSD (Orientation and Script Detection) to identify the language/script
        let scriptDetected = "Detection skipped/failed";
        let scriptConfidence = "N/A";
        let orientation = "N/A";

        try {
            await worker.loadLanguage('osd');
            await worker.initialize('osd');
            const osdResult = await worker.detect(processCanvas);
            scriptDetected = osdResult.data.script;
            scriptConfidence = (osdResult.data.script_confidence * 100).toFixed(1) + "%";
            orientation = osdResult.data.orientation_degrees + "°";
        } catch (e) {
            console.warn("OSD failed. This is typically due to sparse or indistinguishable text in the image.", e);
            scriptDetected = "Not enough clear text for OSD";
        }

        // 2. Extract Text via primary OCR
        statusBox.innerText = "Extracting text to scan for API Keys...";
        await worker.loadLanguage('eng');
        await worker.initialize('eng');
        const ocrResult = await worker.recognize(processCanvas);
        const extractedText = ocrResult.data.text;
        await worker.terminate();

        // 3. Setup Regex Finders to "Pick" API Keys from the text
        const exactMatches = [];
        
        // AWS Keys
        const awsMatches = extractedText.match(/AKIA[0-9A-Z]{16}/g) || [];
        exactMatches.push(...awsMatches);
        
        // General UUIDs / Typical standard tokens
        const uuidMatches = extractedText.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/g) || [];
        exactMatches.push(...uuidMatches);
        
        // Stripe-like Keys (sk_live/pk_live)
        const stripeMatches = extractedText.match(/(sk_live_|pk_live_|sk_test_|pk_test_)[0-9a-zA-Z]{24,}/g) || [];
        exactMatches.push(...stripeMatches);
        
        // Generic 32+ character hex or base62 (Common for raw OAuth tokens, Webhooks, etc.)
        const genericMatches = extractedText.match(/\b[a-zA-Z0-9]{32}\b/g) || [];
        exactMatches.push(...genericMatches);

        // Deduplicate
        const uniqueKeys = [...new Set(exactMatches)];

        // Build Results Presentation
        statusBox.style.display = "none"; // hide loading status
        resultsBox.style.display = "block";

        // Language block
        const langBlock = document.createElement('div');
        langBlock.style.backgroundColor = "#fff";
        langBlock.style.padding = "15px";
        langBlock.style.marginBottom = "20px";
        langBlock.style.borderRadius = "4px";
        langBlock.style.border = "1px solid #eee";
        langBlock.innerHTML = `
            <h3 style="margin-top:0; color:#2c3e50;">Language Identifier Result</h3>
            <table style="width:100%; text-align:left; border-collapse:collapse; font-size:14px;">
                <tr>
                    <td style="padding:4px 0; width:150px;"><strong>Identified Script (Lang):</strong></td>
                    <td><span style="background-color:#ffe0b2; padding:2px 6px; border-radius:3px; font-weight:bold;">${scriptDetected}</span></td>
                </tr>
                <tr><td style="padding:4px 0;"><strong>Script Confidence:</strong></td><td>${scriptConfidence}</td></tr>
                <tr><td style="padding:4px 0;"><strong>Text Orientation:</strong></td><td>${orientation}</td></tr>
            </table>
        `;
        resultsBox.appendChild(langBlock);

        // API Key pick block
        const keyBlock = document.createElement('div');
        keyBlock.style.backgroundColor = "#fff";
        keyBlock.style.padding = "15px";
        keyBlock.style.marginBottom = "20px";
        keyBlock.style.borderRadius = "4px";
        keyBlock.style.border = "1px solid #eee";
        keyBlock.innerHTML = `
            <h3 style="margin-top:0; color:#2c3e50;">Key API Pick (Discovered Keys)</h3>
            ${uniqueKeys.length > 0 
              ? `<ul style="margin:0; padding-left:20px; color:#c0392b; font-family:monospace; font-size:15px; word-break:break-all;">
                  ${uniqueKeys.map(k => `<li>${k}</li>`).join('')}
                 </ul>` 
              : `<p style="margin:0; color:#7f8c8d; font-style:italic;">No standard API key patterns (AWS, Stripe, UUIDs, 32-char auth tokens) were structurally detected.</p>`
            }
        `;
        resultsBox.appendChild(keyBlock);

        // Raw Text block
        const textBlock = document.createElement('div');
        textBlock.style.backgroundColor = "#fff";
        textBlock.style.padding = "15px";
        textBlock.style.borderRadius = "4px";
        textBlock.style.border = "1px solid #eee";
        textBlock.innerHTML = `
            <h3 style="margin-top:0; color:#2c3e50; font-size:16px;">Full Extracted Text Trace</h3>
            <pre style="white-space:pre-wrap; word-wrap:break-word; font-family:monospace; font-size:13px; color:#333; margin:0; max-height:180px; overflow-y:auto; background:#f4f4f4; padding:10px; border-radius:3px;">${extractedText.trim() || 'No text recognized in the input image.'}</pre>
        `;
        resultsBox.appendChild(textBlock);

    } catch (error) {
        statusBox.style.backgroundColor = "#ffebee";
        statusBox.style.borderLeftColor = "#f44336";
        statusBox.style.color = "#c62828";
        statusBox.innerText = `An error occurred: ${error.message}`;
        console.error(error);
    }

    return container;
}