Image Scanner And Identifier Tool

async function processImage(originalImg, scanLanguage = 'eng+rus', identifyObjects = 'yes') {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.position = 'relative';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '15px';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.margin = '0 auto';
    container.style.color = '#333';

    // Draw the original image onto a canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    // Style the canvas for display
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '8px';
    canvas.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
    container.appendChild(canvas);

    // Create the results panel
    const resultsDiv = document.createElement('div');
    resultsDiv.style.background = '#f8f9fa';
    resultsDiv.style.border = '1px solid #e9ecef';
    resultsDiv.style.padding = '20px';
    resultsDiv.style.borderRadius = '8px';
    resultsDiv.style.boxShadow = '0 2px 5px rgba(0,0,0,0.05)';
    
    // Initial loading text
    resultsDiv.innerHTML = `
        <h3 style="margin-top:0; color:#2c3e50; border-bottom: 2px solid #e9ecef; padding-bottom: 10px;">
            🔍 Scanner & Identifier Analysis
        </h3>
        <p style="color:#666; font-style: italic;">
            🚀 Initializing AI models and analyzing image... Please wait.
        </p>
    `;
    container.appendChild(resultsDiv);

    // Helper function to dynamically load external scripts
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${src}"]`)) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.crossOrigin = 'anonymous';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };

    // Run the analysis asynchronously so the browser can paint the UI immediately
    (async () => {
        let resultsHTML = '';

        try {
            // 1. Identify Objects (using TensorFlow.js & MobileNet)
            if (identifyObjects.toString().toLowerCase() === 'yes' || identifyObjects === '1') {
                resultsHTML += '<h4 style="color:#34495e; margin-bottom: 10px;">🏷️ Object Identification:</h4>';
                try {
                    // Load TensorFlow.js core
                    await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3');
                    // Load MobileNet model
                    await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2');

                    const model = await mobilenet.load();
                    // Classify the image (canvas is used as the image source)
                    const predictions = await model.classify(canvas);

                    resultsHTML += '<ul style="list-style-type: none; padding-left: 0; margin-top: 0;">';
                    predictions.forEach(p => {
                        const percent = (p.probability * 100).toFixed(2);
                        // Progress bar styling
                        resultsHTML += `
                            <li style="margin-bottom: 8px; background: #fff; padding: 10px; border-radius: 6px; border: 1px solid #ddd;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <strong>${p.className.charAt(0).toUpperCase() + p.className.slice(1)}</strong>
                                    <span style="color:#28a745; font-weight: bold;">${percent}%</span>
                                </div>
                                <div style="width: 100%; background: #e9ecef; border-radius: 4px; height: 8px; overflow: hidden;">
                                    <div style="width: ${percent}%; background: #28a745; height: 100%;"></div>
                                </div>
                            </li>`;
                    });
                    resultsHTML += '</ul>';
                } catch (e) {
                    resultsHTML += `<p style="color:#dc3545; background:#f8d7da; padding:10px; border-radius:4px;">Error loading object identifier: ${e.message}</p>`;
                }
            }

            // 2. Scan Text (using Tesseract.js for OCR)
            if (scanLanguage && scanLanguage !== 'none') {
                resultsHTML += `<h4 style="color:#34495e; margin-top: 20px; margin-bottom: 10px;">📝 Text Scanner (Languages: ${scanLanguage}):</h4>`;
                try {
                    await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
                    
                    const { data } = await Tesseract.recognize(
                        canvas,
                        scanLanguage,
                        { logger: m => console.log('OCR Progress:', m.status, Math.round(m.progress * 100) + '%') }
                    );

                    if (data.text && data.text.trim().length > 0) {
                        resultsHTML += `
                            <div style="background: #fff; border: 1px solid #ced4da; padding: 15px; border-radius: 6px; white-space: pre-wrap; font-family: monospace; color: #333; max-height: 250px; overflow-y: auto;">
                                ${data.text.replace(/</g, "&lt;").replace(/>/g, "&gt;")}
                            </div>`;
                    } else {
                        resultsHTML += `<p style="color:#6c757d; font-style: italic;">No readable text detected in the image.</p>`;
                    }
                } catch (e) {
                    resultsHTML += `<p style="color:#dc3545; background:#f8d7da; padding:10px; border-radius:4px;">Error loading text scanner: ${e.message}</p>`;
                }
            }

            // Update the results UI with the final output
            resultsDiv.innerHTML = `
                <h3 style="margin-top:0; color:#2c3e50; border-bottom: 2px solid #e9ecef; padding-bottom: 10px;">
                    ✅ Scanner & Identifier Results
                </h3>
                ${resultsHTML}
            `;

        } catch (err) {
            // General error handler
            resultsDiv.innerHTML = `
                <h3 style="margin-top:0; color:#dc3545;">❌ Analysis Failed</h3>
                <p>${err.message}</p>
            `;
        }
    })();

    return container;
}