Image House Identifier Tool

/**
 * Identifies houses within an image using a pre-trained object detection model.
 *
 * This function uses the TensorFlow.js COCO-SSD model to perform object detection.
 * NOTE: The COCO-SSD model does not have a "house" class. This function identifies
 * the "building" class and labels it as "House" as a close approximation.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} confidenceThreshold The minimum confidence score (0.0 to 1.0) for a detection to be considered valid. Default is 0.5.
 * @param {number} maxBoxes The maximum number of houses to identify in the image. Default is 5.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a new canvas element with the original image and bounding boxes drawn around detected houses.
 */
async function processImage(originalImg, confidenceThreshold = 0.5, maxBoxes = 5) {
    // Sanitize parameters
    const threshold = Math.max(0, Math.min(1, parseFloat(confidenceThreshold)));
    const maxDetections = Math.max(1, parseInt(maxBoxes));

    // Create a canvas to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    // Helper to dynamically load scripts if they aren't already present
    const loadScript = (src) => new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) {
            return resolve();
        }
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
        document.head.appendChild(script);
    });

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

        // Load the model. We cache the model promise on the window object
        // to avoid reloading it on subsequent calls.
        if (!window.cocoSsdModelPromise) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';
            ctx.font = '20px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('Loading model (first time only)...', canvas.width / 2, canvas.height / 2);
            window.cocoSsdModelPromise = cocoSsd.load();
        }
        const model = await window.cocoSsdModelPromise;

        // Redraw the original image in case the loading message was shown
        ctx.drawImage(originalImg, 0, 0);

        // Detect objects in the image
        const predictions = await model.detect(originalImg);

        // Filter for 'building' class, apply confidence threshold, and limit results
        const housePredictions = predictions
            .filter(p => p.class === 'building' && p.score >= threshold)
            .slice(0, maxDetections);

        if (housePredictions.length > 0) {
            // Set styles for drawing
            const fontSize = Math.max(16, Math.floor(canvas.width / 60));
            ctx.font = `bold ${fontSize}px sans-serif`;
            ctx.lineWidth = Math.max(2, Math.floor(canvas.width / 300));

            for (const prediction of housePredictions) {
                const [x, y, width, height] = prediction.bbox;
                const score = (prediction.score * 100).toFixed(1);
                const label = `House (${score}%)`;

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

                // Draw label background
                ctx.fillStyle = '#00FF00';
                const textMetrics = ctx.measureText(label);
                const textHeight = fontSize * 1.2;
                ctx.fillRect(x, y, textMetrics.width + 8, textHeight);

                // Draw label text
                ctx.fillStyle = '#000000'; // Black text
                ctx.fillText(label, x + 4, y + fontSize);
            }
        } else {
            // Display a message if no houses are found
            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
            ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
            ctx.fillStyle = 'white';
            ctx.font = '24px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText('No houses identified.', canvas.width / 2, canvas.height - 18);
        }

    } catch (error) {
        console.error("House identification failed:", error);
        // Draw an error message on the canvas if something goes wrong
        ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Error: Could not identify objects.', canvas.width / 2, canvas.height / 2);
    }

    return canvas;
}