Wikipedia Image Search Tool

function processImage(originalImg, targetLanguage = 'ru') {
    // Create the container element that will be returned
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
    container.style.maxWidth = '600px';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
    container.style.borderRadius = '10px';
    container.style.overflow = 'hidden';
    container.style.border = '1px solid #e0e0e0';
    container.style.backgroundColor = '#ffffff';
    container.style.color = '#333333';
    container.style.margin = '0 auto';

    // Set initial loading state
    container.innerHTML = `
        <div style="padding: 40px 20px; text-align: center;">
            <div style="display:inline-block; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: wiki-spin 1s linear infinite;"></div>
            <h3 style="margin-top:20px; color:#555; margin-bottom: 5px;">Analyzing image...</h3>
            <p style="margin: 0; color: #888; font-size: 14px;">Running MobileNet classification & searching Wikipedia</p>
            <style>@keyframes wiki-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
        </div>
    `;

    // Execute the asynchronous tasks without blocking the return
    (async () => {
        try {
            // Helper function to dynamically load JS scripts safely
            const loadScript = (src, globalVar) => {
                return new Promise((resolve, reject) => {
                    if (window[globalVar]) return resolve(window[globalVar]);
                    
                    if (document.querySelector(`script[src="${src}"]`)) {
                        const checkInterval = setInterval(() => {
                            if (window[globalVar]) {
                                clearInterval(checkInterval);
                                resolve(window[globalVar]);
                            }
                        }, 100);
                        return;
                    }
                    
                    const script = document.createElement('script');
                    script.src = src;
                    script.crossOrigin = "anonymous";
                    script.onload = () => resolve(window[globalVar]);
                    script.onerror = () => reject(new Error(`Failed to load ${src}`));
                    document.head.appendChild(script);
                });
            };

            // Load TensorFlow.js and MobileNet
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs', 'tf');
            const mobilenet = await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet', 'mobilenet');

            // Initialize model and classify the input image
            const model = await mobilenet.load();
            const predictions = await model.classify(originalImg);

            // Validations
            if (!predictions || predictions.length === 0) {
                throw new Error("Could not classify the image content.");
            }

            // Extract the top concept for querying
            const topPrediction = predictions[0].className.split(',')[0].trim();
            const allTags = predictions.slice(0, 3).map(p => p.className.split(',')[0].trim());

            // 1. Search English Wikipedia (best compatibility with MobileNet's English labels)
            const enSearchApi = `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(topPrediction)}&utf8=&format=json&origin=*`;
            const enSearchRes = await fetch(enSearchApi).then(r => r.json());

            if (!enSearchRes.query || !enSearchRes.query.search || !enSearchRes.query.search.length) {
                throw new Error(`Found no Wikipedia entries relating to: ${topPrediction}`);
            }

            const enTitle = enSearchRes.query.search[0].title;
            
            let finalLang = 'en';
            let finalTitle = enTitle;

            // 2. Fetch the interlanguage link if user wants an article in another language (e.g., 'ru')
            if (targetLanguage !== 'en') {
                const langLinksApi = `https://en.wikipedia.org/w/api.php?action=query&titles=${encodeURIComponent(enTitle)}&prop=langlinks&lllang=${targetLanguage}&format=json&origin=*`;
                const llRes = await fetch(langLinksApi).then(r => r.json());
                const pages = llRes.query.pages;
                const pageId = Object.keys(pages)[0];

                if (pages[pageId] && pages[pageId].langlinks && pages[pageId].langlinks.length > 0) {
                    finalTitle = pages[pageId].langlinks[0]['*'];
                    finalLang = targetLanguage;
                }
            }

            // 3. Fetch the rich extract and thumbnail of the matching article
            const detailsApi = `https://${finalLang}.wikipedia.org/w/api.php?action=query&prop=extracts|pageimages&exintro=1&explaintext=1&titles=${encodeURIComponent(finalTitle)}&format=json&origin=*&pithumbsize=400`;
            const detailsRes = await fetch(detailsApi).then(r => r.json());
            
            const infoPages = detailsRes.query.pages;
            const infoPageId = Object.keys(infoPages)[0];
            const article = infoPages[infoPageId];

            if (infoPageId == "-1") {
                throw new Error(`Failed to load article details for ${finalTitle}`);
            }

            // Prepare the Display Content
            const wikiThumb = article.thumbnail ? article.thumbnail.source : '';
            const extract = article.extract 
                ? (article.extract.length > 400 ? article.extract.substring(0, 400) + '...' : article.extract) 
                : (finalLang === 'ru' ? 'Нет доступного описания.' : 'No summary available.');
            
            const articleUrl = `https://${finalLang}.wikipedia.org/wiki/${encodeURIComponent(finalTitle.replace(/ /g, '_'))}`;

            const tagsHtml = `<span style="font-weight:bold; font-size:13px; margin-right:5px; color:#555;">Detected:</span>` 
                + allTags.map(tag => `<span style="background:#eee; padding:3px 10px; border-radius:12px; font-size:12px; margin-right:6px; margin-bottom:6px; display:inline-block; border: 1px solid #ddd; text-transform: capitalize;">${tag}</span>`).join('');

            // Inject the fully built UI into the container
            container.innerHTML = `
                <div style="padding: 20px;">
                    <h2 style="margin: 0 0 10px 0; font-size: 24px; font-family: 'Times New Roman', Times, serif;">
                        <a href="${articleUrl}" target="_blank" style="text-decoration:none; color:#0645ad;">
                            ${article.title}
                        </a>
                    </h2>
                    
                    <div style="margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center;">
                        ${tagsHtml}
                    </div>
                    
                    <div style="display: flex; gap: 18px; flex-wrap: wrap;">
                        ${wikiThumb ? `
                            <div style="flex-shrink: 0; margin-bottom: 15px;">
                                <img src="${wikiThumb}" alt="${article.title}" style="max-width: 160px; max-height: 200px; border-radius: 6px; box-shadow: 0 3px 6px rgba(0,0,0,0.15); object-fit: cover;" />
                            </div>
                        ` : ''}
                        
                        <div style="flex: 1; min-width: 250px;">
                            <p style="line-height: 1.6; margin: 0; font-size: 14.5px; text-align: justify; color: #444;">${extract}</p>
                            
                            <a href="${articleUrl}" target="_blank" style="display:inline-block; margin-top: 15px; padding: 8px 16px; background-color: #36c; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 500; font-size: 14px; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#0645ad'" onmouseout="this.style.backgroundColor='#36c'">
                                ${finalLang === 'ru' ? 'Читать в Википедии' : 'Read on Wikipedia'}
                            </a>
                        </div>
                    </div>
                    
                    <hr style="border:none; border-top:1px solid #eee; margin: 20px 0 15px 0;">
                    
                    <div style="font-size:11.5px; color:#a0a0a0; text-align:right;">
                        Powered by TensorFlow.js, MobileNet & Wikipedia Action API
                    </div>
                </div>
            `;

        } catch (err) {
            // Handle errors gracefully and update the UI accordingly
            container.innerHTML = `
                <div style="padding: 30px 20px; text-align: center; color: #d32f2f;">
                    <svg style="width:50px; height:50px; margin-bottom:15px; color: #d32f2f;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 style="margin: 0 0 10px 0; font-size: 18px;">Error analyzing image</h3>
                    <p style="margin: 0; font-size: 14px; color: #666;">${err.message}</p>
                </div>
            `;
        }
    })();

    return container;
}