Image Name Translator Scene Identifier Tool

/**
 * processes an image to identify scenes/objects and recognize text.
 * This function uses TensorFlow.js with the COCO-SSD model for object detection
 * and Tesseract.js for optical character recognition (OCR).
 * It dynamically loads the required scripts if they are not already present.
 * The results are drawn onto a new canvas which is returned.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} [detectionThreshold='0.5'] The minimum confidence score (0.0 to 1.0) for an object to be detected.
 * @param {string} [ocrLanguage='eng'] The language code for Tesseract.js to use for OCR (e.g., 'eng', 'spa', 'fra').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the original image with annotations.
 */
async function processImage(originalImg, detectionThreshold = '0.5', ocrLanguage = 'eng') {
    // Helper function to dynamically load a script if its main object is not defined on the window.
    const loadScript = (url, check) => {
        if (window[check]) {
            return Promise.resolve();
        }
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Script load error for ${url}`));
            document.head.appendChild(script);
        });
    };

    // Setup the canvas to be the same size as the image.
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

    // Helper function to draw status text on the canvas.
    const drawStatus = (text) => {
        ctx.drawImage(originalImg, 0, 0); // Draw the image as the background.
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, canvas.height / 2 - 25, canvas.width, 50);
        ctx.fillStyle = 'white';
        // Use a font size relative to the image width for better scaling.
        const fontSize = Math.max(24, canvas.width / 40);
        ctx.font = `bold ${fontSize}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
        // Reset canvas context properties
        ctx.textAlign = 'left';
        ctx.textBaseline = 'alphabetic';
    };

    drawStatus('Loading AI models...');

    try {
        // --- 1. Load External Libraries ---
        // Dynamically load TensorFlow.js, the COCO-SSD model, and Tesseract.js in sequence.
        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');
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js', 'Tesseract');

        drawStatus('Analyzing image... (this may take a moment)');

        // --- 2. Run Analyses and Collect Results in Parallel ---
        let objectPredictions = [];
        let ocrWords = [];

        // Start object detection (Scene Identifier)
        const objectDetectionPromise = cocoSsd.load().then(model => model.detect(originalImg)).then(predictions => {
            objectPredictions = predictions;
            console.log('Object Detection complete.');
        });

        // Start OCR (Text "Translator")
        const ocrPromise = Tesseract.createWorker(ocrLanguage).then(async (worker) => {
            // Note: First time use for a language will download language data.
            console.log(`Recognizing text with language: ${ocrLanguage}`);
            const { data: { words } } = await worker.recognize(canvas);
            ocrWords = words;
            await worker.terminate();
            console.log('OCR complete.');
        });

        // Wait for both analysis processes to finish.
        await Promise.all([objectDetectionPromise, ocrPromise]);

        // --- 3. Draw Final Results ---
        // Redraw the original image to clear the status message.
        ctx.drawImage(originalImg, 0, 0);

        // Helper function to draw a styled bounding box and label.
        const drawBox = (box, text, color) => {
            ctx.strokeStyle = color;
            // Scale line width and font size based on image dimensions for better visibility.
            ctx.lineWidth = Math.max(2, canvas.width / 400);
            ctx.strokeRect(box.x, box.y, box.width, box.height);

            const fontSize = Math.max(12, canvas.width / 60);
            ctx.font = `bold ${fontSize}px Arial`;
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;
            const textHeight = fontSize;
            
            ctx.fillStyle = color;
            ctx.fillRect(box.x, box.y - (textHeight + 4), textWidth + 8, textHeight + 4);

            ctx.fillStyle = '#ffffff';
            ctx.fillText(text, box.x + 4, box.y - 4);
        };

        // Draw object detection results.
        const threshold = parseFloat(detectionThreshold);
        objectPredictions.forEach(p => {
            if (p.score >= threshold) {
                const box = { x: p.bbox[0], y: p.bbox[1], width: p.bbox[2], height: p.bbox[3] };
                const text = `${p.class} (${Math.round(p.score * 100)}%)`;
                drawBox(box, text, '#3498db'); // Blue for objects
            }
        });

        // Draw OCR results.
        ocrWords.forEach(word => {
            if (word.confidence > 60) { // Filter out low-confidence words.
                const box = {
                    x: word.bbox.x0,
                    y: word.bbox.y0,
                    width: word.bbox.x1 - word.bbox.x0,
                    height: word.bbox.y1 - word.bbox.y0
                };
                const text = `"${word.text}"`;
                drawBox(box, text, '#2ecc71'); // Green for recognized text
            }
        });

    } catch (error) {
        console.error("Image processing failed:", error);
        // Display a user-friendly error message on the canvas.
        drawStatus(`Error: ${error.message.substring(0, 50)}...`);
    }

    return canvas;
}