Image Name Language And Code Creator Tool

async function processImage(originalImg, detectionThreshold = 0.5) {

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

    // Create the main container for all output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.maxWidth = `${originalImg.width}px`;
    container.style.margin = 'auto';

    // Display a loading message
    const loadingMessage = document.createElement('p');
    loadingMessage.textContent = 'Initializing AI model... Please wait.';
    loadingMessage.style.textAlign = 'center';
    container.appendChild(loadingMessage);

    try {
        // Load the necessary TensorFlow.js and COCO-SSD model scripts
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js');
        loadingMessage.textContent = 'Loading image recognition model...';
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js');

        // Load the COCO-SSD model
        loadingMessage.textContent = 'Analyzing image...';
        const model = await cocoSsd.load();

        // Detect objects in the provided image
        const predictions = await model.detect(originalImg);
        const filteredPredictions = predictions.filter(p => p.score >= detectionThreshold);

        // Clear the loading message
        container.innerHTML = '';

        // Create a canvas to display the image and detection results
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        canvas.style.maxWidth = '100%';
        canvas.style.height = 'auto';
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Draw bounding boxes and labels for each detected object
        filteredPredictions.forEach(prediction => {
            const [x, y, width, height] = prediction.bbox;
            const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

            // Draw bounding box
            ctx.strokeStyle = '#00FF00';
            ctx.lineWidth = 2;
            ctx.strokeRect(x, y, width, height);

            // Draw label background
            ctx.fillStyle = '#00FF00';
            const textWidth = ctx.measureText(text).width;
            const textHeight = 16;
            ctx.fillRect(x, y, textWidth + 8, textHeight + 4);

            // Draw label text
            ctx.fillStyle = '#000000';
            ctx.font = `${textHeight}px Arial`;
            ctx.fillText(text, x + 4, y + textHeight);
        });

        container.appendChild(canvas);

        const resultsContainer = document.createElement('div');
        resultsContainer.style.marginTop = '15px';

        if (filteredPredictions.length === 0) {
            resultsContainer.innerHTML = '<p><b>Analysis Complete:</b> No common objects were detected.</p>';
        } else {
            // --- "Name" Section ---
            const names = [...new Set(filteredPredictions.map(p => p.class))].join(', ');
            resultsContainer.innerHTML += `<h4>Detected Object Names (Name)</h4><p>${names}</p>`;

            // --- "Language" Section ---
            const objectCounts = filteredPredictions.reduce((acc, p) => {
                acc[p.class] = (acc[p.class] || 0) + 1;
                return acc;
            }, {});
            const descriptionParts = Object.entries(objectCounts).map(([name, count]) => {
                return count === 1 ? `a ${name}` : `${count} ${name}s`; // Simple pluralization
            });
            let description = 'This image appears to contain ';
            if (descriptionParts.length > 1) {
                description += descriptionParts.slice(0, -1).join(', ') + ' and ' + descriptionParts.slice(-1);
            } else {
                description += descriptionParts[0];
            }
            description += '.';
            resultsContainer.innerHTML += `<h4>Generated Description (Language)</h4><p>${description}</p>`;

            // --- "Code" Section ---
            const codeContent = JSON.stringify(filteredPredictions, null, 2);
            resultsContainer.innerHTML += `<h4>Generated Data (Code)</h4><pre style="background-color: #f4f4f4; border: 1px solid #ddd; padding: 10px; white-space: pre-wrap; word-break: break-all;"><code>${codeContent}</code></pre>`;
        }
        container.appendChild(resultsContainer);
        
    } catch (error) {
        console.error('Error in processImage:', error);
        container.innerHTML = `<p style="color: red;">An error occurred while analyzing the image. Please ensure you are online and check the console for details.</p>`;
    }

    return container;
}