Image AI Powered Language And Identifier Creator

async function processImage(originalImg, scoreThreshold = 0.5, font = '16px sans-serif', boxColor = '#FF0000') {

    /**
     * Helper function to dynamically load a script and avoid re-loading if it already exists.
     * @param {string} url - The URL of the script to load.
     * @returns {Promise<void>} - A promise that resolves when the script is loaded.
     */
    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 = reject;
            document.head.appendChild(script);
        });
    };

    /**
     * Helper function to get a contrasting text color (black or white) for a given background color.
     * @param {string} hexcolor - The background color in hex format (e.g., '#FF0000').
     * @returns {string} - 'black' or 'white'.
     */
    const getContrastYIQ = (hexcolor) => {
        hexcolor = hexcolor.replace("#", "");
        const r = parseInt(hexcolor.substr(0, 2), 16);
        const g = parseInt(hexcolor.substr(2, 2), 16);
        const b = parseInt(hexcolor.substr(4, 2), 16);
        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
        return (yiq >= 128) ? 'black' : 'white';
    };

    const container = document.createElement('div');
    container.style.fontFamily = 'sans-serif';
    container.style.textAlign = 'center';

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto'; // Maintain aspect ratio

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const statusText = document.createElement('p');
    statusText.style.padding = '10px';
    statusText.style.margin = '10px 0';
    statusText.style.backgroundColor = '#f0f0f0';
    statusText.style.border = '1px solid #ccc';
    statusText.style.borderRadius = '5px';
    statusText.textContent = 'Initializing AI...';
    
    container.appendChild(statusText);
    container.appendChild(canvas);

    try {
        statusText.textContent = 'Loading AI models (this may take a moment on first run)...';
        // Load TensorFlow.js and COCO-SSD model scripts from a CDN.
        // We use Promise.all to load them in parallel for speed.
        await Promise.all([
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js'),
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js')
        ]);

        statusText.textContent = 'Initializing AI model...';
        const model = await cocoSsd.load();

        statusText.textContent = 'Analyzing image...';
        const predictions = await model.detect(canvas);
        const filteredPredictions = predictions.filter(p => p.score >= scoreThreshold);
        
        if (filteredPredictions.length === 0) {
            statusText.textContent = 'AI analysis complete. No objects were identified with the current confidence threshold.';
            return container;
        }

        // The "Language Creator": Generate a summary of findings.
        const objectCounts = {};
        filteredPredictions.forEach(prediction => {
            objectCounts[prediction.class] = (objectCounts[prediction.class] || 0) + 1;
        });

        const summaryParts = Object.entries(objectCounts).map(([className, count]) => {
            return `${count} ${className}${count > 1 ? 's' : ''}`;
        });
        statusText.textContent = `AI Identified: ${summaryParts.join(', ')}.`;

        // The "Identifier Creator": Draw bounding boxes and labels.
        const textColor = getContrastYIQ(boxColor);
        ctx.font = font;

        filteredPredictions.forEach(prediction => {
            const [x, y, width, height] = prediction.bbox;
            const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

            // Draw the bounding box.
            ctx.strokeStyle = boxColor;
            ctx.lineWidth = Math.max(2, canvas.width / 400); // Dynamic line width looks good on various sizes
            ctx.strokeRect(x, y, width, height);

            // Draw the label background.
            ctx.fillStyle = boxColor;
            const textWidth = ctx.measureText(text).width;
            const textHeight = parseInt(font, 10);
            ctx.fillRect(x, y, textWidth + 8, textHeight + 8);

            // Draw the text.
            ctx.fillStyle = textColor;
            ctx.fillText(text, x + 4, y + textHeight);
        });

    } catch (error) {
        console.error("AI model error:", error);
        statusText.textContent = 'An error occurred during AI analysis. Please check the console log for details.';
    }

    return container;
}