3D Model Printer And Scanner Identifier Tool

function processImage(originalImg, scanThemeColor = 'lime', scanSpeed = 1.5) {
    // Create the main container
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.fontFamily = '"Courier New", Courier, monospace';
    container.style.overflow = 'hidden';
    container.style.borderRadius = '6px';
    container.style.boxShadow = '0 8px 16px rgba(0,0,0,0.5)';
    container.style.backgroundColor = '#000';

    // Draw original image on canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    canvas.style.display = 'block';
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.opacity = '0.85';
    container.appendChild(canvas);

    // Overlay scan grid pattern
    const grid = document.createElement('div');
    grid.style.position = 'absolute';
    grid.style.top = '0';
    grid.style.left = '0';
    grid.style.width = '100%';
    grid.style.height = '100%';
    grid.style.backgroundImage = 'linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px)';
    grid.style.backgroundSize = '40px 40px';
    grid.style.pointerEvents = 'none';
    grid.style.transition = 'opacity 1s';
    container.appendChild(grid);

    // Scan laser beam
    const laser = document.createElement('div');
    laser.style.position = 'absolute';
    laser.style.top = '0%';
    laser.style.left = '0';
    laser.style.width = '100%';
    laser.style.height = '2px';
    laser.style.backgroundColor = scanThemeColor;
    laser.style.boxShadow = `0 0 15px 4px ${scanThemeColor}`;
    laser.style.zIndex = '10';
    container.appendChild(laser);

    // Real-time info box displaying progress and results
    const infoBox = document.createElement('div');
    infoBox.style.position = 'absolute';
    infoBox.style.bottom = '15px';
    infoBox.style.left = '15px';
    infoBox.style.right = '15px';
    infoBox.style.backgroundColor = 'rgba(10, 10, 10, 0.85)';
    infoBox.style.color = scanThemeColor;
    infoBox.style.padding = '15px';
    infoBox.style.border = `1px solid ${scanThemeColor}`;
    infoBox.style.borderRadius = '4px';
    infoBox.style.fontSize = '14px';
    infoBox.style.lineHeight = '1.5';
    infoBox.style.boxShadow = '0 4px 6px rgba(0,0,0,0.5)';
    infoBox.style.backdropFilter = 'blur(4px)';
    infoBox.style.boxSizing = 'border-box';
    infoBox.innerHTML = 'SYSTEM BOOT: INITIALIZING SCANNER MODULE...';
    container.appendChild(infoBox);

    // Laser Animation Logic
    let isScanning = true;
    let pos = 0;
    let dir = 1;

    function animate() {
        if (!isScanning) {
            laser.style.display = 'none';
            return;
        }
        pos += dir * scanSpeed;
        if (pos > 100) dir = -1;
        if (pos < 0) dir = 1;
        laser.style.top = pos + '%';
        requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);

    // Helper to dynamically load external scripts sequentially
    const loadJs = (src, globalVarToCheck) => new Promise((resolve, reject) => {
        if (window[globalVarToCheck]) {
            resolve();
            return;
        }
        const existing = document.querySelector(`script[src="${src}"]`);
        if (existing) {
            let check = setInterval(() => {
                if (window[globalVarToCheck]) {
                    clearInterval(check);
                    resolve();
                }
            }, 100);
            return;
        }
        const script = document.createElement('script');
        script.src = src;
        script.crossOrigin = 'anonymous';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    // Run AI identification asynchronously
    const runAnalysis = async () => {
        try {
            infoBox.innerHTML = 'ESTABLISHING LINK WITH AI CORE...<br>> Loading TensorFlow Engine...';
            // Load TF.js
            await loadJs('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
            
            infoBox.innerHTML = 'NEURAL NETWORK ONLINE.<br>> Fetching MobileNet Base Weights...';
            // Load MobileNet to build the classification identifier
            await loadJs('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

            infoBox.innerHTML = 'MODELS READY.<br>> Running Internal Pattern Scan & Extraction...';
            
            if (!window.mobilenet) throw new Error("Mobilenet engine failed to load.");

            // Initiate model process (fetching pre-trained fast web architecture)
            const model = await window.mobilenet.load({ version: 2, alpha: 0.5 });
            const predictions = await model.classify(canvas);

            isScanning = false;
            grid.style.opacity = '0.1'; // Calm down the UI after scan
            
            let resultHtml = `<div style="font-weight:bold; margin-bottom: 8px; border-bottom: 1px dotted ${scanThemeColor}; padding-bottom: 6px;">SCAN COMPLETED / OBJECT IDENTIFICATION:</div>`;
            
            let is3DTarget = false;

            predictions.forEach(p => {
                const prob = (p.probability * 100).toFixed(2) + '%';
                const name = p.className.split(',')[0].toUpperCase(); 
                resultHtml += `<div style="display:flex; justify-content:space-between; margin-bottom: 4px;"><span>>&nbsp;${name}</span> <span>${prob}</span></div>`;
                
                const testName = p.className.toLowerCase();
                // Pick target types correlated with "3D Model Printer and Scanner Identifiers"
                if(testName.match(/printer|scanner|3d|computer|desktop|hardware|device|machine|copier/)) {
                    is3DTarget = true;
                }
            });

            if(is3DTarget) {
                 resultHtml += `<div style="margin-top: 12px; background-color: ${scanThemeColor}; color: #000; padding: 6px; text-align: center; font-weight: bold; text-transform: uppercase;">[MATCH] 3D Model / Printer / Scanner Detected</div>`;
            } else {
                 resultHtml += `<div style="margin-top: 12px; border: 1px solid ${scanThemeColor}; padding: 6px; text-align: center; text-transform: uppercase;">Standard Structural Model Identified</div>`;
            }

            infoBox.innerHTML = resultHtml;

        } catch (err) {
            isScanning = false;
            infoBox.style.color = '#ff4444';
            infoBox.style.border = '1px solid #ff4444';
            infoBox.innerHTML = `<div style="font-weight:bold;">CRITICAL SYSTEM ERROR</div><div style="margin-top:5px;">> ${err.message || 'Security Context or CORS fetch error on source image.'}</div><div style="font-size: 11px; margin-top: 8px;">Ensure original image allows cross-origin data extraction.</div>`;
        }
    };

    // Trigger processing
    runAnalysis();

    // Return the container immediately while analysis runs in the background.
    // Display seamlessly using .html(<this object>) or node.appendChild()
    return container;
}