Spaces:

deniztas
/

model

Running

App Files Files Community

deniztas commited on Jul 10, 2025

Commit

8e1bfbd

verified ·

1 Parent(s): 47beacf

after uploading image predictions is not showing - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +91 -3

index.html CHANGED Viewed

@@ -22,6 +22,10 @@
             transform: scale(1.02);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
     </style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
@@ -48,9 +52,15 @@
                                 <h2 class="text-xl font-semibold text-gray-800">
                                     <i class="fas fa-camera text-blue-500 mr-2"></i> Live Feed
                                 </h2>
-                                <button id="startBtn" onclick="init()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition flex items-center">
-                                    <i class="fas fa-play mr-2"></i> Start Camera
-                                </button>
                             </div>
                             <div id="webcam-container" class="webcam-feed bg-gray-200 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden">
                                 <div class="text-center p-4">
@@ -172,6 +182,84 @@
         }
         // run the webcam image through the image model
         async function predict() {
             if (!isRunning) return;

             transform: scale(1.02);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
+        .webcam-feed img {
+            max-width: 100%;
+            max-height: 100%;
+        }
     </style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
                                 <h2 class="text-xl font-semibold text-gray-800">
                                     <i class="fas fa-camera text-blue-500 mr-2"></i> Live Feed
                                 </h2>
+                                <div class="flex gap-2">
+                                    <button id="startBtn" onclick="init()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition flex items-center">
+                                        <i class="fas fa-play mr-2"></i> Start Camera
+                                    </button>
+                                    <label for="fileUpload" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition flex items-center cursor-pointer">
+                                        <i class="fas fa-upload mr-2"></i> Upload Image
+                                        <input id="fileUpload" type="file" accept="image/*" class="hidden" onchange="handleImageUpload(this)">
+                                    </label>
+                                </div>
                             </div>
                             <div id="webcam-container" class="webcam-feed bg-gray-200 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden">
                                 <div class="text-center p-4">
         }
         // run the webcam image through the image model
+        async function handleImageUpload(input) {
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = async function(e) {
+                    const webcamContainer = document.getElementById('webcam-container');
+                    webcamContainer.innerHTML = '';
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    img.className = 'webcam-feed w-full h-full object-contain';
+                    webcamContainer.appendChild(img);
+                    // Stop webcam if running
+                    if (isRunning) {
+                        webcam.stop();
+                        isRunning = false;
+                        const startBtn = document.getElementById('startBtn');
+                        startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Camera';
+                        startBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
+                        startBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
+                        startBtn.disabled = false;
+                    }
+                    // Load model if not already loaded
+                    if (!model) {
+                        try {
+                            const modelURL = URL + "model.json";
+                            const metadataURL = URL + "metadata.json";
+                            model = await tmImage.load(modelURL, metadataURL);
+                            maxPredictions = model.getTotalClasses();
+                        } catch (error) {
+                            console.error('Error loading model:', error);
+                            return;
+                        }
+                    }
+                    // Predict on the uploaded image
+                    await predictOnImage(img);
+                }
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+        async function predictOnImage(imageElement) {
+            // Clear previous predictions
+            labelContainer = document.getElementById('label-container');
+            labelContainer.innerHTML = '';
+            // Create prediction elements
+            for (let i = 0; i < maxPredictions; i++) {
+                const predictionElement = document.createElement('div');
+                predictionElement.className = 'prediction-item';
+                labelContainer.appendChild(predictionElement);
+            }
+            // Predict
+            const prediction = await model.predict(imageElement);
+            for (let i = 0; i < maxPredictions; i++) {
+                const probability = prediction[i].probability.toFixed(2);
+                const percentage = Math.round(probability * 100);
+                const predictionElement = labelContainer.childNodes[i];
+                predictionElement.className = 'prediction-item mb-4';
+                predictionElement.innerHTML = `
+                    <div class="flex justify-between items-center mb-1">
+                        <span class="font-medium text-gray-700">${prediction[i].className}</span>
+                        <span class="text-sm font-semibold ${percentage > 70 ? 'text-green-600' : percentage > 40 ? 'text-yellow-600' : 'text-gray-600'}">
+                            ${percentage}%
+                        </span>
+                    </div>
+                    <div class="prediction-bar" style="width: ${percentage}%"></div>
+                `;
+            }
+        }
         async function predict() {
             if (!isRunning) return;