Image Ai Powered Name Translator Identifier Creator

/**
 * Identifies objects in an image using a pre-trained AI model,
 * translates their names to a specified language, and draws the results
 * on a new canvas.
 *
 * This function dynamically loads TensorFlow.js and the COCO-SSD model.
 * It uses a free public API for translation.
 *
 * @param {HTMLImageElement} originalImg The original image to process.
 * @param {string} [targetLang='es'] The two-letter language code for translation (e.g., 'es' for Spanish, 'fr' for French).
 * @param {number} [confidenceThreshold=0.5] The minimum confidence score (0-1) for an object to be identified.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the original image, bounding boxes, and translated labels.
 */
async function processImage(originalImg, targetLang = 'es', confidenceThreshold = 0.5) {

    /**
     * Dynamically loads a script and returns a promise that resolves when loaded.
     * Caches scripts to avoid reloading.
     * @param {string} url The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${url}"]`)) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error(`Script load error for ${url}: ${err}`));
            document.head.appendChild(script);
        });
    };

    /**
     * Translates a given text to the target language using the MyMemory API.
     * @param {string} text The text to translate (should be in English).
     * @param {string} lang The target language code.
     * @returns {Promise<string>} The translated text, or the original text on failure.
     */
    const translateText = async (text, lang) => {
        if (lang.toLowerCase() === 'en') {
            return text; // No need to translate if target is English
        }
        try {
            const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${lang}`;
            const response = await fetch(apiUrl);
            if (!response.ok) {
                console.error('Translation API error:', response.status, response.statusText);
                return text; // Fallback to original text
            }
            const data = await response.json();
            if (data.responseData && data.responseData.translatedText) {
                // The API can return HTML entities, decode them.
                const tempElem = document.createElement('textarea');
                tempElem.innerHTML = data.responseData.translatedText;
                return tempElem.value;
            }
            return text; // Fallback
        } catch (error) {
            console.error('Failed to fetch translation:', error);
            return text; // Fallback
        }
    };

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);
    
    // Helper function to display messages on the canvas overlay
    const showMessage = (message) => {
        ctx.drawImage(originalImg, 0, 0); // Redraw image to clear previous message
        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = `bold ${Math.max(20, Math.min(canvas.width / 20, 40))}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(message, canvas.width / 2, canvas.height / 2);
    };

    try {
        // Step 1: Load the necessary scripts for TensorFlow.js and the COCO-SSD model.
        showMessage('Loading AI model...');
        // Pinned versions for stability
        await Promise.all([
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.13.0/dist/tf.min.js'),
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js')
        ]);

        if (typeof cocoSsd === 'undefined') {
            throw new Error('cocoSsd is not defined. AI model script might have failed to load.');
        }

        // Step 2: Load the COCO-SSD model.
        const model = await cocoSsd.load();

        // Step 3: Perform object detection.
        showMessage('Analyzing image...');
        const predictions = await model.detect(originalImg);
        
        const filteredPredictions = predictions.filter(p => p.score >= confidenceThreshold);

        if (filteredPredictions.length === 0) {
            showMessage('No objects identified.');
            return canvas;
        }

        // Step 4: Translate all detected class names in parallel.
        const translationPromises = filteredPredictions.map(p => translateText(p.class, targetLang));
        const translatedNames = await Promise.all(translationPromises);
        
        // Step 5: Draw the final results on the canvas.
        ctx.drawImage(originalImg, 0, 0);
        filteredPredictions.forEach((prediction, i) => {
            const [x, y, width, height] = prediction.bbox;
            const originalName = prediction.class;
            const translatedName = translatedNames[i];
            const score = Math.round(prediction.score * 100);

            // Style for the bounding box and label
            const color = '#32CD32'; // LimeGreen for good visibility
            ctx.strokeStyle = color;
            ctx.lineWidth = Math.max(2, canvas.width * 0.003); // Scale line width
            const fontSize = Math.max(12, Math.min(canvas.width / 50, 20));
            ctx.font = `bold ${fontSize}px Arial`;
            
            // Draw the bounding box
            ctx.strokeRect(x, y, width, height);

            // Prepare the label text
            const label = `${originalName} (${score}%) -> ${translatedName}`;
            const textMetrics = ctx.measureText(label);
            const textWidth = textMetrics.width;
            const textHeight = fontSize * 1.4;

            // Position the label above the box, with checks to keep it on screen
            let textX = x + ctx.lineWidth;
            let textY = y - textHeight;

            if (textY < 0) {
               textY = y + ctx.lineWidth; // Place inside at the top
            }
            if (textX + textWidth + 10 > canvas.width) {
               textX = canvas.width - textWidth - 10; // Prevent horizontal overflow
            }
            if(textX < 0) {
               textX = 0;
            }

            // Draw a background for the label for better readability
            ctx.fillStyle = color;
            ctx.fillRect(textX, textY, textWidth + 10, textHeight);

            // Draw the text itself
            ctx.fillStyle = 'black';
            ctx.textBaseline = 'top';
            ctx.fillText(label, textX + 5, textY + (textHeight - fontSize) / 2);
        });

    } catch (error) {
        console.error("An error occurred during image processing:", error);
        // Display a user-friendly error message on the canvas
        showMessage('An error occurred. Please try again.');
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(error.message || 'An unknown error occurred.', canvas.width / 2, canvas.height / 2 + 30);
    }

    return canvas;
}