I cant see the camera now

index.html

@@ -106,8 +106,23 @@
             </button>
         </div>
 
+        <!-- Camera View (Hidden by default) -->
+        <div id="camera-view" class="hidden flex justify-center mb-8">
+            <div class="camera-container relative">
+                <video id="video" autoplay playsinline class="w-full max-w-2xl rounded-lg"></video>
+                <div id="loading" class="absolute inset-0 bg-black/70 flex items-center justify-center hidden">
+                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Prediction Display -->
+        <div class="text-center mb-8">
+            <p id="prediction-text" class="text-lg">Point your camera at an object and capture to begin</p>
+        </div>
+
         <!-- Collage Section in the center -->
-        <div class="collage-container p-6 rounded-2xl">
+<div class="collage-container p-6 rounded-2xl">
 <div class="flex justify-between items-center mb-4">
                 <h2 class="text-xl font-semibold flex items-center">
                     <i data-feather="grid" class="mr-2 text-purple-400"></i> Dynamic Collage
@@ -187,49 +202,40 @@
 
         // Camera setup
         let stream = null;
-startCameraBtn.addEventListener('click', async () => {
-            try {
-                stream = await navigator.mediaDevices.getUserMedia({ video: true });
-                video.srcObject = stream;
-                startCameraBtn.innerHTML = '<i data-feather="video-off" class="mr-2"></i> Stop Camera';
-                startCameraBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
-                startCameraBtn.classList.add('bg-red-600', 'hover:bg-red-700');
-                feather.replace();
-            } catch (err) {
-                console.error("Error accessing camera:", err);
-                predictionText.textContent = "Error accessing camera. Please check permissions.";
-                predictionText.classList.add('text-red-400');
-            }
-        });
-
-        startCameraBtn.addEventListener('click', () => {
-            if (stream) {
-                stream.getTracks().forEach(track => track.stop());
-                stream = null;
-                video.srcObject = null;
-                startCameraBtn.innerHTML = '<i data-feather="video" class="mr-2"></i> Start Camera';
-                startCameraBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
-                startCameraBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
-                feather.replace();
-            }
-        });
         
         // Toggle camera view
-        cameraToggle.addEventListener('click', () => {
+        cameraToggle.addEventListener('click', async () => {
             const cameraView = document.getElementById('camera-view');
             if (cameraView.classList.contains('hidden')) {
-                cameraView.classList.remove('hidden');
-                cameraToggle.innerHTML = '<i data-feather="x" class="mb-2 text-blue-400" size="32"></i><span class="text-lg font-semibold">Close Camera</span>';
+                // Open camera
+                try {
+                    stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    video.srcObject = stream;
+                    cameraView.classList.remove('hidden');
+                    cameraToggle.innerHTML = '<i data-feather="x" class="mb-2 text-blue-400" size="32"></i><span class="text-lg font-semibold">Close Camera</span>';
+                    feather.replace();
+                } catch (err) {
+                    console.error("Error accessing camera:", err);
+                    predictionText.textContent = "Error accessing camera. Please check permissions.";
+                    predictionText.classList.add('text-red-400');
+                }
             } else {
+                // Close camera
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                    stream = null;
+                }
+                video.srcObject = null;
                 cameraView.classList.add('hidden');
                 cameraToggle.innerHTML = '<i data-feather="camera" class="mb-2 text-blue-400" size="32"></i><span class="text-lg font-semibold">Open Camera</span>';
+                feather.replace();
             }
-            feather.replace();
         });
+        
         // Load COCO-SSD model
         let model;
         cocoSsd.load().then(loadedModel => {
-model = loadedModel;
+            model = loadedModel;
             console.log("COCO-SSD model loaded");
         }).catch(err => {
             console.error("Error loading model:", err);
@@ -240,7 +246,7 @@ model = loadedModel;
         // Capture image and process with ResNet (COCO-SSD)
         captureBtn.addEventListener('click', async () => {
             if (!stream) {
-                predictionText.textContent = "Please start the camera first";
+                predictionText.textContent = "Please open the camera first";
                 predictionText.classList.add('text-yellow-400');
                 return;
             }
@@ -290,6 +296,7 @@ model = loadedModel;
                 captureBtn.classList.remove('opacity-50', 'cursor-not-allowed');
             }
         });
+
         // Add multiple images to collage with dynamic movement
         function addToCollage(object) {
             // Remove placeholder if it exists
@@ -320,6 +327,7 @@ model = loadedModel;
                 collage.appendChild(collageItem);
             }
         }
+
         // Clear collage
         clearCollageBtn.addEventListener('click', () => {
             collage.innerHTML = `