Image Search Using API Key Translator

function processImage(originalImg, translationApiKey = '', targetLanguageCode = 'es') {
    // Create the main container for the UI component
    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.padding = '24px';
    container.style.background = '#ffffff';
    container.style.border = '1px solid #e2e8f0';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.05)';
    container.style.boxSizing = 'border-box';
    
    // Add title
    const header = document.createElement('h2');
    header.textContent = 'API Key Translator Image Search';
    header.style.textAlign = 'center';
    header.style.color = '#1e293b';
    header.style.marginTop = '0';
    header.style.marginBottom = '20px';
    container.appendChild(header);

    // Prepare Preview Image
    const imgContainer = document.createElement('div');
    imgContainer.style.textAlign = 'center';
    imgContainer.style.marginBottom = '24px';
    
    let previewImg;
    if (originalImg instanceof HTMLImageElement && originalImg.src) {
        previewImg = originalImg.cloneNode();
    } else {
        previewImg = document.createElement('img');
        try {
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = originalImg.width || originalImg.naturalWidth || 300;
            tempCanvas.height = originalImg.height || originalImg.naturalHeight || 300;
            tempCanvas.getContext('2d').drawImage(originalImg, 0, 0);
            previewImg.src = tempCanvas.toDataURL();
        } catch (e) {
            console.warn("Could not generate image preview due to CORS or formatting.");
        }
    }
    
    previewImg.style.maxWidth = '100%';
    previewImg.style.maxHeight = '240px';
    previewImg.style.borderRadius = '8px';
    previewImg.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
    imgContainer.appendChild(previewImg);
    container.appendChild(imgContainer);

    // Prepare Status section (Loading indicator)
    const statusContainer = document.createElement('div');
    statusContainer.style.textAlign = 'center';
    statusContainer.style.marginBottom = '24px';

    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
        @keyframes apikey-translator-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(styleSheet);

    const spinner = document.createElement('div');
    spinner.style.width = '35px';
    spinner.style.height = '35px';
    spinner.style.border = '4px solid #f1f5f9';
    spinner.style.borderTop = '4px solid #3b82f6';
    spinner.style.borderRadius = '50%';
    spinner.style.animation = 'apikey-translator-spin 1s linear infinite';
    spinner.style.margin = '0 auto 12px auto';
    statusContainer.appendChild(spinner);

    const statusText = document.createElement('p');
    statusText.textContent = 'Initializing engine...';
    statusText.style.color = '#64748b';
    statusText.style.fontSize = '14px';
    statusText.style.margin = '0';
    statusContainer.appendChild(statusText);
    container.appendChild(statusContainer);

    // Results area
    const resultsContainer = document.createElement('div');
    container.appendChild(resultsContainer);

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

    // Main Asynchronous Processing Routine
    (async () => {
        try {
            // STEP 1: Image Object Recognition (Using AI MobileNet via TensorFlow.js)
            statusText.textContent = 'Loading TensorFlow recognition model (~5MB)...';
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js', 'tf');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

            statusText.textContent = 'Analyzing and classifying visual contents...';
            
            // Draw standard resolution canvas to optimize MobileNet memory usage
            const MAX_DIM = 800;
            let w = originalImg.width || originalImg.naturalWidth || 224;
            let h = originalImg.height || originalImg.naturalHeight || 224;
            if (w > MAX_DIM || h > MAX_DIM) {
                const ratio = Math.min(MAX_DIM / w, MAX_DIM / h);
                w = Math.round(w * ratio);
                h = Math.round(h * ratio);
            }
            const aiCanvas = document.createElement('canvas');
            aiCanvas.width = w;
            aiCanvas.height = h;
            aiCanvas.getContext('2d').drawImage(originalImg, 0, 0, w, h);

            // Execute identification model
            const model = await window.mobilenet.load({ version: 2, alpha: 1.0 });
            const predictions = await model.classify(aiCanvas);
            const topPrediction = predictions[0].className.split(',')[0].toLowerCase();
            const confidenceScore = Math.round(predictions[0].probability * 100);

            // STEP 2: Translate Recognition Output
            statusText.textContent = `Translating recognized label '${topPrediction}'...`;
            let translatedText = topPrediction;
            const langCode = (targetLanguageCode || 'es').trim();
            
            // Skip translation if target language is already English
            if (langCode.toLowerCase() !== 'en') {
                const langPair = `en|${langCode}`;
                let translateUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(topPrediction)}&langpair=${langPair}`;
                
                // Append the translation API Key if one was successfully inputted
                if (translationApiKey && translationApiKey.trim() !== '') {
                    translateUrl += `&key=${encodeURIComponent(translationApiKey.trim())}`;
                }

                try {
                    const trRes = await fetch(translateUrl);
                    if (trRes.ok) {
                        const trData = await trRes.json();
                        if (trData?.responseData?.translatedText) {
                            translatedText = trData.responseData.translatedText;
                        }
                    }
                } catch (e) {
                    console.warn("Remote translation failed, defaulting to English label.");
                }
            }

            // STEP 3: Search Web for Translated Visual Results
            statusText.textContent = `Conducting image search for '${translatedText}'...`;
            let foundRelatedImages = [];
            
            const fetchWikiImages = async (searchTerm, targetLang) => {
                const url = `https://${targetLang}.wikipedia.org/w/api.php?action=query&prop=pageimages&generator=search&gsrsearch=${encodeURIComponent(searchTerm)}&gsrlimit=6&pithumbsize=400&format=json&origin=*`;
                const res = await fetch(url);
                const data = await res.json();
                if (data?.query?.pages) {
                    return Object.values(data.query.pages)
                        .filter(page => page.thumbnail?.source)
                        .map(page => ({ src: page.thumbnail.source, title: page.title }));
                }
                return [];
            };

            try {
                foundRelatedImages = await fetchWikiImages(translatedText, langCode);
                // Fallback attempt in English if translated response gives no visual results
                if (foundRelatedImages.length === 0 && langCode !== 'en') {
                    foundRelatedImages = await fetchWikiImages(topPrediction, 'en');
                }
            } catch(e) {
                // Secondary final fallback attempt to bypass region strictness
                if (langCode !== 'en') {
                    try { foundRelatedImages = await fetchWikiImages(topPrediction, 'en'); } catch(err){}
                }
            }

            // --- UI Updating with final Search Results ---
            statusContainer.style.display = 'none'; // Hide loading state

            // Render Info Tag
            const infoCard = document.createElement('div');
            infoCard.style.backgroundColor = '#f8fafc';
            infoCard.style.padding = '16px';
            infoCard.style.borderRadius = '8px';
            infoCard.style.border = '1px solid #e2e8f0';
            infoCard.style.marginBottom = '20px';
            infoCard.innerHTML = `
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span style="font-weight: 600; color: #475569;">Image AI Recognition:</span>
                    <span style="color: #0f172a; text-transform: capitalize;">${topPrediction} 
                        <span style="color: #64748b; font-size: 13px; font-weight: normal;">(${confidenceScore}%)</span>
                    </span>
                </div>
                ${langCode.toLowerCase() !== 'en' ? `
                <div style="display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px dashed #cbd5e1;">
                    <span style="font-weight: 600; color: #475569;">Translation API (${langCode.toUpperCase()}):</span>
                    <span style="color: #0f172a; font-weight: 500; text-transform: capitalize;">${translatedText}</span>
                </div>` : ''}
            `;
            resultsContainer.appendChild(infoCard);

            // Google Images Action Button
            const gImagesBtn = document.createElement('a');
            gImagesBtn.href = `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(translatedText)}`;
            gImagesBtn.target = '_blank';
            gImagesBtn.textContent = '🔍 View Full Google Images Search';
            gImagesBtn.style.display = 'block';
            gImagesBtn.style.width = '100%';
            gImagesBtn.style.textAlign = 'center';
            gImagesBtn.style.padding = '14px';
            gImagesBtn.style.backgroundColor = '#3b82f6';
            gImagesBtn.style.color = '#ffffff';
            gImagesBtn.style.textDecoration = 'none';
            gImagesBtn.style.borderRadius = '8px';
            gImagesBtn.style.fontWeight = '600';
            gImagesBtn.style.boxSizing = 'border-box';
            gImagesBtn.style.marginBottom = '20px';
            gImagesBtn.style.transition = 'background-color 0.2s';
            gImagesBtn.onmouseover = () => gImagesBtn.style.backgroundColor = '#2563eb';
            gImagesBtn.onmouseout = () => gImagesBtn.style.backgroundColor = '#3b82f6';
            resultsContainer.appendChild(gImagesBtn);

            // Found Visual Sub-results (Wikipedia Gallery)
            if (foundRelatedImages.length > 0) {
                const galleryTitle = document.createElement('h3');
                galleryTitle.textContent = 'Related Encyclopedia Imagery';
                galleryTitle.style.fontSize = '16px';
                galleryTitle.style.color = '#1e293b';
                galleryTitle.style.borderBottom = '2px solid #f1f5f9';
                galleryTitle.style.paddingBottom = '8px';
                galleryTitle.style.marginTop = '0';
                resultsContainer.appendChild(galleryTitle);

                const galleryWrap = document.createElement('div');
                galleryWrap.style.display = 'grid';
                galleryWrap.style.gridTemplateColumns = 'repeat(auto-fill, minmax(140px, 1fr))';
                galleryWrap.style.gap = '12px';
                
                foundRelatedImages.forEach(img => {
                    const itemBox = document.createElement('div');
                    itemBox.style.borderRadius = '8px';
                    itemBox.style.overflow = 'hidden';
                    itemBox.style.border = '1px solid #e2e8f0';
                    itemBox.style.background = '#ffffff';
                    
                    const itemImg = document.createElement('img');
                    itemImg.src = img.src;
                    itemImg.title = img.title;
                    itemImg.style.width = '100%';
                    itemImg.style.height = '110px';
                    itemImg.style.objectFit = 'cover';
                    itemImg.style.display = 'block';
                    
                    const itemText = document.createElement('div');
                    itemText.textContent = img.title;
                    itemText.style.padding = '8px';
                    itemText.style.fontSize = '12px';
                    itemText.style.color = '#475569';
                    itemText.style.background = '#f8fafc';
                    itemText.style.whiteSpace = 'nowrap';
                    itemText.style.overflow = 'hidden';
                    itemText.style.textOverflow = 'ellipsis';
                    itemText.style.textAlign = 'center';
                    itemText.style.fontWeight = '500';

                    itemBox.appendChild(itemImg);
                    itemBox.appendChild(itemText);
                    galleryWrap.appendChild(itemBox);
                });
                resultsContainer.appendChild(galleryWrap);
            }

        } catch (err) {
            // Error handling state mapping
            statusText.textContent = 'API processing encountered an issue.';
            spinner.style.display = 'none';
            statusText.style.color = '#e11d48';
            statusText.style.fontWeight = '600';
            
            const errDetails = document.createElement('div');
            errDetails.textContent = err.message || err.toString();
            errDetails.style.fontSize = '12px';
            errDetails.style.color = '#e11d48';
            errDetails.style.marginTop = '10px';
            errDetails.style.background = '#ffe4e6';
            errDetails.style.padding = '8px';
            errDetails.style.borderRadius = '4px';
            statusContainer.appendChild(errDetails);
        }
    })();

    return container;
}