Wikipedia Identifier Image Drag And Drop Tool

async function processImage(originalImg) {
    // Create the main container element
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 6px 16px rgba(0,0,0,0.15)';
    container.style.overflow = 'hidden';
    container.style.backgroundColor = '#ffffff';
    container.style.position = 'relative';

    // Header mimicking Wikipedia style
    const header = document.createElement('div');
    header.style.backgroundColor = '#f6f6f6';
    header.style.padding = '12px 20px';
    header.style.borderBottom = '1px solid #a2a9b1';
    header.style.display = 'flex';
    header.style.alignItems = 'center';
    
    const logoText = document.createElement('span');
    logoText.textContent = 'WIKIPEDIA';
    logoText.style.fontFamily = "'Linux Libertine', 'Times New Roman', Times, serif";
    logoText.style.fontSize = '22px';
    logoText.style.color = '#000';
    logoText.style.letterSpacing = '1px';
    
    header.appendChild(logoText);
    container.appendChild(header);

    // Canvas to hold the image
    const imgCanvas = document.createElement('canvas');
    const ctx = imgCanvas.getContext('2d');
    
    // Scale image to fit max width of 600px while maintaining aspect ratio
    const scale = Math.min(1, 600 / originalImg.width);
    imgCanvas.width = originalImg.width * scale;
    imgCanvas.height = originalImg.height * scale;
    ctx.drawImage(originalImg, 0, 0, imgCanvas.width, imgCanvas.height);
    
    imgCanvas.style.display = 'block';
    imgCanvas.style.width = '100%';
    imgCanvas.style.height = 'auto';
    imgCanvas.style.borderBottom = '1px solid #eee';
    container.appendChild(imgCanvas);

    // Info panel for prediction and Wikipedia data
    const infoPanel = document.createElement('div');
    infoPanel.style.padding = '20px';
    container.appendChild(infoPanel);

    // Initial Loading State
    const loadingState = document.createElement('div');
    loadingState.style.textAlign = 'center';
    loadingState.style.padding = '20px 0';
    loadingState.innerHTML = `
        <div style="color: #54595d; font-size: 16px; margin-bottom: 8px;">Loading AI Model & Identifying Image...</div>
        <div style="font-size: 13px; color: #72777d;">This might take a few moments.</div>
    `;
    infoPanel.appendChild(loadingState);

    try {
        // Dynamically load TensorFlow.js
        if (!window.tf) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.20.0/dist/tf.min.js';
                script.crossOrigin = 'anonymous';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // Dynamically load MobileNet Image Classification model
        if (!window.mobilenet) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js';
                script.crossOrigin = 'anonymous';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // Load the model
        const model = await window.mobilenet.load({ version: 2, alpha: 1.0 });
        
        // Classify the original image
        const predictions = await model.classify(imgCanvas);
        
        if (predictions && predictions.length > 0) {
            // Get the top prediction based on probability
            const topPrediction = predictions[0].className.split(',')[0].trim();
            const confidenceScore = Math.round(predictions[0].probability * 100);
            
            // Query Wikipedia API for the predicted term
            const wikiUrl = `https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=${encodeURIComponent(topPrediction)}&gsrlimit=1&prop=extracts|info&inprop=url&exintro=1&explaintext=1&format=json&origin=*`;
            
            const wikiRes = await fetch(wikiUrl);
            const wikiData = await wikiRes.json();
            
            // Clear loading state
            infoPanel.innerHTML = '';
            
            if (wikiData.query && wikiData.query.pages) {
                const page = Object.values(wikiData.query.pages)[0];
                
                const titleEl = document.createElement('h2');
                titleEl.textContent = page.title;
                titleEl.style.margin = '0 0 5px 0';
                titleEl.style.color = '#202122';
                titleEl.style.fontSize = '24px';
                titleEl.style.fontFamily = "'Linux Libertine', 'Times New Roman', Times, serif";
                
                const metaEl = document.createElement('div');
                metaEl.textContent = `Identified as: ${topPrediction.toUpperCase()} (${confidenceScore}% confidence)`;
                metaEl.style.fontSize = '12px';
                metaEl.style.color = '#54595d';
                metaEl.style.marginBottom = '16px';
                metaEl.style.fontWeight = 'bold';

                const extractEl = document.createElement('p');
                let summaryText = page.extract || 'No description available for this topic.';
                if (summaryText.length > 350) {
                    summaryText = summaryText.substring(0, 350).trim() + '...';
                }
                extractEl.textContent = summaryText;
                extractEl.style.margin = '0 0 20px 0';
                extractEl.style.color = '#202122';
                extractEl.style.lineHeight = '1.6';
                extractEl.style.fontSize = '14px';
                
                const linkWrap = document.createElement('div');
                const linkEl = document.createElement('a');
                linkEl.href = page.fullurl || `https://en.wikipedia.org/wiki/${encodeURIComponent(page.title)}`;
                linkEl.target = '_blank';
                linkEl.textContent = 'Read article on Wikipedia';
                linkEl.style.display = 'inline-block';
                linkEl.style.padding = '8px 16px';
                linkEl.style.backgroundColor = '#3366cc';
                linkEl.style.color = '#ffffff';
                linkEl.style.textDecoration = 'none';
                linkEl.style.borderRadius = '4px';
                linkEl.style.fontWeight = 'bold';
                linkEl.style.fontSize = '14px';
                
                // Add hover effect
                linkEl.onmouseover = () => linkEl.style.backgroundColor = '#2a4b8d';
                linkEl.onmouseout = () => linkEl.style.backgroundColor = '#3366cc';

                linkWrap.appendChild(linkEl);
                
                infoPanel.appendChild(titleEl);
                infoPanel.appendChild(metaEl);
                infoPanel.appendChild(extractEl);
                infoPanel.appendChild(linkWrap);
            } else {
                infoPanel.innerHTML = `
                    <h3 style="margin-top:0; color: #202122;">${topPrediction.charAt(0).toUpperCase() + topPrediction.slice(1)}</h3>
                    <p style="color: #72777d;">We correctly identified the image as <b>${topPrediction}</b>, but unfortunately, we couldn't find a matching Wikipedia article.</p>
                `;
            }
        } else {
            infoPanel.innerHTML = '<p style="color: #d33; font-weight: bold;">We were unable to identify the contents of this image.</p>';
        }

    } catch (error) {
        console.error("Image Identification Error:", error);
        infoPanel.innerHTML = `<p style="color: #d33;">An error occurred while analyzing the image: ${error.message}</p>`;
    }

    return container;
}