Image Search Topic Text Finder

async function processImage(originalImg, maxTopics = 5) {
    // Create the main wrapper container
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.alignItems = 'center';
    wrapper.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    wrapper.style.gap = '15px';
    wrapper.style.padding = '20px';
    wrapper.style.backgroundColor = '#f7f9fc';
    wrapper.style.border = '1px solid #e1e4e8';
    wrapper.style.borderRadius = '8px';
    wrapper.style.maxWidth = '600px';
    wrapper.style.margin = '0 auto';

    // Draw the image onto a canvas to feed into the model
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '6px';
    canvas.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    wrapper.appendChild(canvas);

    // Create a container for the classification results
    const resultBox = document.createElement('div');
    resultBox.style.width = '100%';
    resultBox.style.padding = '15px';
    resultBox.style.backgroundColor = '#ffffff';
    resultBox.style.border = '1px solid #d1d5da';
    resultBox.style.borderRadius = '6px';
    resultBox.style.boxSizing = 'border-box';
    resultBox.innerHTML = '<div style="color: #586069; text-align: center; font-size: 14px; padding: 10px;">Initializing Image Topic Finder...</div>';
    wrapper.appendChild(resultBox);

    // Helper function to safely load external javascript files
    async function loadScript(url, globalVar) {
        if (window[globalVar]) return;
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    try {
        resultBox.innerHTML = '<div style="color: #586069; text-align: center; font-size: 14px; padding: 10px;">Loading TensorFlow.js core...</div>';
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
        
        resultBox.innerHTML = '<div style="color: #586069; text-align: center; font-size: 14px; padding: 10px;">Loading MobileNet classification model...</div>';
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');
        
        resultBox.innerHTML = '<div style="color: #586069; text-align: center; font-size: 14px; padding: 10px;">Analyzing image and extracting topics...</div>';
        
        // Load the AI model
        const model = await window.mobilenet.load();
        
        // Run classification on the canvas representation of the image
        const predictions = await model.classify(canvas);
        
        // Format HTML with the extracted topic predictions
        let html = '<h3 style="margin-top: 0; margin-bottom: 12px; font-size: 18px; color: #24292e;">Search Topic Text Finder Results</h3>';
        html += '<ul style="list-style-type: none; padding-left: 0; margin: 0;">';
        
        const limit = parseInt(maxTopics) > 0 ? parseInt(maxTopics) : 5;
        
        predictions.slice(0, limit).forEach(p => {
            const confidence = Math.round(p.probability * 100);
            const topics = p.className.split(',').map(t => t.trim());
            const primaryTopic = topics[0];
            const badgeColor = confidence > 50 ? '#28a745' : (confidence > 20 ? '#dbab09' : '#cb2431');
            
            html += `
                <li style="margin-bottom: 12px; display: flex; flex-direction: column; border-bottom: 1px dotted #eaecef; padding-bottom: 10px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <strong style="color: #0366d6; font-size: 16px; text-transform: capitalize;">${primaryTopic}</strong>
                        <span style="background-color: ${badgeColor}; color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;">
                            ${confidence}% Confidence
                        </span>
                    </div>
                    <div style="font-size: 13px; color: #586069;">Keywords to search: <em style="color: #24292e;">${topics.join(', ')}</em></div>
                </li>
            `;
        });
        
        html += '</ul>';
        html += '<div style="margin-top: 10px; font-size: 11px; color: #959da5; text-align: center;">Powered by TensorFlow.js & MobileNet</div>';
        
        resultBox.innerHTML = html;
        
    } catch (e) {
        resultBox.innerHTML = `<div style="color: #cb2431; text-align: center; font-size: 14px; padding: 10px;"><strong>Error:</strong> Failed to analyze the image. (${e.message})</div>`;
    }

    return wrapper;
}