Image Translation Search Tool

/**
 * Defines and manages promises for loading TensorFlow.js and the COCO-SSD model.
 * This ensures the scripts are loaded only once per page session.
 */
if (!window.tfJsPromise) {
    // Promise for loading the core TensorFlow.js library
    window.tfJsPromise = new Promise((resolve, reject) => {
        // Check if the script already exists
        if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"]')) {
            // Wait for tf object to be available if script is already there but maybe not loaded
             const interval = setInterval(() => {
                if(window.tf) {
                    clearInterval(interval);
                    resolve();
                }
            }, 50);
            return;
        }
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    // Promise for loading the COCO-SSD model, which depends on TensorFlow.js
    window.cocoSsdPromise = window.tfJsPromise.then(() => {
        return new Promise((resolve, reject) => {
            if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest/dist/coco-ssd.min.js"]')) {
                const interval = setInterval(() => {
                    if(window.cocoSsd) {
                        clearInterval(interval);
                        resolve();
                    }
                }, 50);
                return;
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest/dist/coco-ssd.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    });
}


/**
 * Performs object detection on an image, translates the name of the top-detected object,
 * and provides a link to search for the translated name.
 *
 * @param {Image} originalImg The input javascript Image object.
 * @param {string} translateToLang The 2-letter language code (ISO 639-1) to translate the object name to (e.g., 'es', 'ru', 'ja').
 * @param {number} minConfidence The minimum confidence score (0.0 to 1.0) for an object detection to be considered valid.
 * @returns {HTMLElement} A div element containing the annotated image and translation results.
 */
async function processImage(originalImg, translateToLang = 'ru', minConfidence = 0.5) {

    // 1. Create the main container and UI structure
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.maxWidth = `${originalImg.naturalWidth}px`;
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.padding = '15px';
    container.style.boxSizing = 'border-box';

    container.innerHTML = `
        <h3 style="margin-top: 0; margin-bottom: 10px; color: #333;">Image Object Search</h3>
        <p id="status" style="margin: 5px 0 15px 0; color: #555;">Initializing...</p>
        <div id="img-wrapper" style="position: relative; display: inline-block; line-height: 0; max-width: 100%;">
             <img id="display-img" src="${originalImg.src}" style="max-width: 100%; height: auto; border-radius: 4px;">
             <canvas id="bbox-canvas" style="position: absolute; top: 0; left: 0;"></canvas>
        </div>
        <div id="results" style="display: none; margin-top: 15px;">
            <h4 style="margin: 0 0 5px 0; color: #444;">Top Detected Object:</h4>
            <p id="detected-object" style="font-size: 1.2em; font-weight: bold; margin: 0; text-transform: capitalize;"></p>
            <h4 style="margin: 10px 0 5px 0; color: #444;">Translation (${translateToLang.toUpperCase()}):</h4>
            <p id="translated-object" style="font-size: 1.2em; font-weight: bold; margin: 0; color: #0056b3;"></p>
            <a id="search-link" href="#" target="_blank" rel="noopener noreferrer" style="display: inline-block; margin-top: 20px; padding: 10px 18px; background-color: #4285F4; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"></a>
        </div>
    `;

    // 2. Get references to UI elements
    const statusEl = container.querySelector('#status');
    const displayImg = container.querySelector('#display-img');
    const canvas = container.querySelector('#bbox-canvas');
    const resultsEl = container.querySelector('#results');
    const detectedEl = container.querySelector('#detected-object');
    const translatedEl = container.querySelector('#translated-object');
    const searchLinkEl = container.querySelector('#search-link');
    const ctx = canvas.getContext('2d');

    const updateStatus = (text) => {
        statusEl.textContent = text;
    };

    // We must wait for the image to be loaded in the DOM to get its rendered dimensions.
    const runDetection = async () => {
        try {
            // Size the canvas to perfectly overlay the displayed image
            canvas.width = displayImg.clientWidth;
            canvas.height = displayImg.clientHeight;

            // 3. Load the machine learning libraries and model
            updateStatus('Loading detection libraries...');
            await window.cocoSsdPromise; // This triggers the promise chain if not already resolved

            updateStatus('Loading object detection model (this may take a moment)...');
            const model = await cocoSsd.load();

            // 4. Perform object detection
            updateStatus('Analyzing image and detecting objects...');
            const predictions = await model.detect(originalImg);
            const validPredictions = predictions.filter(p => p.score >= minConfidence);

            if (validPredictions.length === 0) {
                throw new Error(`No objects detected with confidence > ${minConfidence * 100}%. Try a lower confidence threshold.`);
            }

            updateStatus(`Detected ${validPredictions.length} object(s). Visualizing results...`);

            // 5. Visualize predictions by drawing on the canvas
            const scaleX = canvas.width / originalImg.naturalWidth;
            const scaleY = canvas.height / originalImg.naturalHeight;
            const BBOX_COLOR = "#00BFFF"; // DeepSkyBlue

            validPredictions.forEach(prediction => {
                const [x, y, width, height] = prediction.bbox;
                ctx.beginPath();
                ctx.lineWidth = "3";
                ctx.strokeStyle = BBOX_COLOR;
                ctx.fillStyle = BBOX_COLOR;
                ctx.rect(x * scaleX, y * scaleY, width * scaleX, height * scaleY);
                ctx.stroke();

                const label = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;
                ctx.font = 'bold 16px Arial';
                const textWidth = ctx.measureText(label).width;
                const textX = x * scaleX;
                const textY = y * scaleY > 20 ? y * scaleY - 5 : 20;

                ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
                ctx.fillRect(textX - 2, textY - 18, textWidth + 4, 22);

                ctx.fillStyle = "white";
                ctx.fillText(label, textX, textY);
            });

            // 6. Translate the name of the highest-confidence object
            const topPrediction = validPredictions[0]; // Predictions are sorted by score
            const objectName = topPrediction.class;

            updateStatus(`Translating "${objectName}" to ${translateToLang}...`);

            const query = encodeURIComponent(objectName);
            const apiUrl = `https://api.mymemory.translated.net/get?q=${query}&langpair=en|${translateToLang}`;

            const response = await fetch(apiUrl);
            if (!response.ok) throw new Error(`Translation API request failed: ${response.statusText}`);

            const data = await response.json();
            if (data.responseStatus !== 200) throw new Error(`Translation failed: ${data.responseDetails}`);

            const translatedName = data.responseData.translatedText;

            // 7. Display the final results
            statusEl.style.display = 'none';
            resultsEl.style.display = 'block';

            detectedEl.textContent = `${objectName} (${Math.round(topPrediction.score * 100)}% confidence)`;
            translatedEl.textContent = translatedName;

            const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(translatedName)}`;
            searchLinkEl.href = searchUrl;
            searchLinkEl.textContent = `Search for "${translatedName}"`;

        } catch (error) {
            console.error('An error occurred during image processing:', error);
            updateStatus(`Error: ${error.message}`);
            statusEl.style.color = 'red';
            statusEl.style.fontWeight = 'bold';
        }
    };

    // If the image is already loaded (e.g., from cache), run detection immediately.
    // Otherwise, attach the detection logic to the onload event.
    if (displayImg.complete) {
        runDetection();
    } else {
        displayImg.onload = runDetection;
    }

    return container;
}