AI Video And Text Based Image Search Tool

async function processImage(originalImg, lang = "ru", maxPredictions = 3) {
    // Create the main container UI
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '20px';
    container.style.maxWidth = '700px';
    container.style.margin = '0 auto';
    container.style.boxShadow = '0 10px 20px rgba(0,0,0,0.1)';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';

    // Title
    const title = document.createElement('h2');
    title.innerText = lang === "ru" ? "AI Видеопоиск и Фотопоиск" : "AI Video & Image Search";
    title.style.marginTop = '0';
    title.style.color = '#333333';
    title.style.textAlign = 'center';
    container.appendChild(title);

    // Image preview
    const imgContainer = document.createElement('div');
    imgContainer.style.textAlign = 'center';
    imgContainer.style.marginBottom = '20px';
    const imgClone = new Image();
    imgClone.src = originalImg.src;
    imgClone.style.maxWidth = '100%';
    imgClone.style.maxHeight = '250px';
    imgClone.style.borderRadius = '8px';
    imgClone.style.objectFit = 'contain';
    imgContainer.appendChild(imgClone);
    container.appendChild(imgContainer);

    // Loading overlay / text
    const statusContainer = document.createElement('div');
    statusContainer.style.textAlign = 'center';
    statusContainer.style.padding = '20px';
    statusContainer.innerHTML = lang === "ru" ? 
        '<i style="color: #666;">Загрузка AI модели (TensorFlow.js)... Анализ изображения...</i>' : 
        '<i style="color: #666;">Loading AI Model (TensorFlow.js)... Analyzing Image...</i>';
    container.appendChild(statusContainer);

    // Dynamic helper to load external scripts properly
    const loadScript = (src) => new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) {
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = src;
        script.crossOrigin = "anonymous";
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    try {
        // Load TensorFlow.js core first, then MobileNet model
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1/dist/mobilenet.min.js');

        // Execute AI Visual classification
        const model = await mobilenet.load();
        const predictions = await model.classify(originalImg);
        
        const results = predictions.slice(0, maxPredictions);
        statusContainer.innerHTML = ''; // Clear loading text

        if (results.length === 0) {
            statusContainer.innerHTML = lang === "ru" ? 
                '<b>Объекты не найдены.</b>' : '<b>No objects detected.</b>';
            return container;
        }

        const list = document.createElement('div');
        list.style.display = 'flex';
        list.style.flexDirection = 'column';
        list.style.gap = '15px';

        // Helper to translate core terms roughly if requested (Using AI visual term directly for search)
        results.forEach(pred => {
            const item = document.createElement('div');
            item.style.padding = '15px';
            item.style.backgroundColor = '#f9f9f9';
            item.style.border = '1px solid #e0e0e0';
            item.style.borderRadius = '8px';
            item.style.display = 'flex';
            item.style.justifyContent = 'space-between';
            item.style.alignItems = 'center';
            item.style.flexWrap = 'wrap';
            item.style.gap = '10px';

            const term = pred.className.split(',')[0].trim();
            const probability = (pred.probability * 100).toFixed(1);

            const label = document.createElement('div');
            const accuracyText = lang === "ru" ? "Точность" : "Confidence";
            label.innerHTML = `<strong style="font-size: 1.1em; color: #1a1a1a; text-transform: capitalize;">${term}</strong> 
                               <br><small style="color: #555;">${accuracyText}: ${probability}%</small>`;
            item.appendChild(label);

            const btnGroup = document.createElement('div');
            btnGroup.style.display = 'flex';
            btnGroup.style.gap = '10px';
            btnGroup.style.flexWrap = 'wrap';

            // Function to generate styled buttons
            const createButton = (text, bgColor, textColor, url) => {
                const btn = document.createElement('a');
                btn.href = url;
                btn.target = '_blank';
                btn.rel = 'noopener noreferrer';
                btn.innerText = text;
                btn.style.padding = '10px 15px';
                btn.style.backgroundColor = bgColor;
                btn.style.color = textColor;
                btn.style.textDecoration = 'none';
                btn.style.borderRadius = '6px';
                btn.style.fontWeight = 'bold';
                btn.style.fontSize = '14px';
                btn.style.transition = 'opacity 0.2s';
                
                btn.onmouseover = () => btn.style.opacity = '0.8';
                btn.onmouseout = () => btn.style.opacity = '1';
                return btn;
            };

            const videoText = lang === "ru" ? '🎥 Видеопоиск' : '🎥 Video Search';
            const photoText = lang === "ru" ? '🖼️ Фотопоиск' : '🖼️ Image Search';

            // Yandex search URLs are great for Russian search prompts as requested in [description]
            const videoSearchUrl = `https://yandex.ru/video/search?text=${encodeURIComponent(term)}`;
            const photoSearchUrl = `https://yandex.ru/images/search?text=${encodeURIComponent(term)}`;

            const btnVideo = createButton(videoText, '#ff0000', '#ffffff', videoSearchUrl);
            const btnPhoto = createButton(photoText, '#ffcc00', '#000000', photoSearchUrl);

            btnGroup.appendChild(btnVideo);
            btnGroup.appendChild(btnPhoto);
            item.appendChild(btnGroup);
            list.appendChild(item);
        });

        statusContainer.appendChild(list);

    } catch (error) {
        statusContainer.innerHTML = `<b style="color: red;">Ошибка AI (AI Error): ${error.message}</b>`;
    }

    return container;
}