Image AI Powered Name Translator

async function processImage(originalImg, minScore = 0.5, boxColor = '#00FF00', textColor = '#000000', lineWidth = 4, fontSize = 20) {

    /**
     * Helper function to dynamically load a script and wait for it to be ready.
     * It avoids reloading if the script's corresponding global object already exists.
     * @param {string} url The URL of the script to load.
     * @param {string} globalName The name of the global variable the script is expected to create.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadScript = (url, globalName) => {
        return new Promise((resolve, reject) => {
            if (window[globalName]) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
            document.head.appendChild(script);
        });
    };

    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Display a loading message on the canvas
    const drawMessage = (message) => {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = `bold ${Math.min(24, canvas.width / 15)}px sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(message, canvas.width / 2, canvas.height / 2);
    };

    drawMessage('Loading AI Model...');

    try {
        // 3. Load dependencies: TensorFlow.js and the Coco-SSD model
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js', 'tf');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest/dist/coco-ssd.min.js', 'cocoSsd');

        // Cache the model on the function object to avoid reloading it on subsequent calls.
        if (!processImage.model) {
            drawMessage('Initializing AI Model...');
            processImage.model = await cocoSsd.load();
        }
        const model = processImage.model;
        
        // Redraw original image to clear the loading message.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // 4. Run the object detection model.
        const predictions = await model.detect(originalImg);
        
        // 5. Draw the results on the canvas.
        ctx.font = `bold ${fontSize}px sans-serif`;
        ctx.textBaseline = 'top';

        predictions.filter(p => p.score >= minScore).forEach(prediction => {
            const [x, y, width, height] = prediction.bbox;
            // The "translated name" is the object's detected class name.
            const text = prediction.class;

            // Draw the bounding box.
            ctx.strokeStyle = boxColor;
            ctx.lineWidth = lineWidth;
            ctx.strokeRect(x, y, width, height);
            
            // Measure text for the background rectangle.
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;
            
            // Draw the text background.
            ctx.fillStyle = boxColor;
            ctx.fillRect(x, y, textWidth + 8, fontSize + 4);
            
            // Draw the name text.
            ctx.fillStyle = textColor;
            ctx.fillText(text, x + 4, y + 2);
        });

    } catch (error) {
        console.error("AI processing failed:", error);
        // On failure, redraw the original image and display an error message.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, 60);
        ctx.font = 'bold 18px sans-serif';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: AI Name Translator failed to run.', canvas.width / 2, 20);
        ctx.fillText('Please check the browser console for details.', canvas.width / 2, 45);
    }
    
    // 6. Return the final canvas with all the drawings.
    return canvas;
}