requirements.txt

app.py

@@ -10,7 +10,7 @@ from PIL import Image
 app = Flask(__name__)
 
 # Load YOLO model
-trained_model = YOLO("best.pt")
+trained_model = YOLO("best_float16.tflite")
 
 # Load TFLite model
 interpreter = tf.lite.Interpreter(model_path='model_chip_v4.tflite')
@@ -42,9 +42,9 @@ def predict():
         image = Image.open(file.stream)
         image = image.convert('RGB')
         image = np.array(image)
-        image_rgb = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+        # image_rgb = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
 
-        results = trained_model.predict(image_rgb)
+        results = trained_model.predict(image)
 
         if isinstance(results, list):
             result = results[0]

best.pt → best_float16.tflite

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:09e02b1d3c1c2bcf75634fb5b5238047a999c1f53b49129a84960d5ca35ce7b6
-size 18508438
+oid sha256:e752e90ca32f978d980d34a1c7277d420000a4bae852cbfad482996da4823a21
+size 22436674

index.js

@@ -1,31 +0,0 @@
-function uploadImage() {
-  const file = imageInput.files[0];
-  if (!file) {
-    alert("Please select an image to upload.");
-    return;
-  }
-
-  const formData = new FormData();
-  formData.append("file", file);
-
-  fetch("/predict", {
-    method: "POST",
-    body: formData,
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      if (data.confidence_score !== undefined) {
-        const reader = new FileReader();
-        reader.onload = function (e) {
-          resultsImg.src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-        alert("Confidence Score: " + data.confidence_score);
-      } else {
-        alert(data.error);
-      }
-    })
-    .catch((error) => {
-      console.error("Error:", error);
-    });
-}

js/index.js

@@ -0,0 +1,104 @@
+const video = document.getElementById("camera");
+const canvas = document.getElementById("canvas");
+const captureBtn = document.getElementById("capture-btn");
+const imageInput = document.getElementById("imageInput");
+const resultsImg = document.getElementById("results");
+const chooseFileBtn = document.getElementById("chooseFileBtn");
+const uploadSuccess = document.getElementById("uploadSuccess");
+const confidenceScore = document.getElementById("confidenceScore");
+
+// Access the webcam only if not on mobile
+if (window.innerWidth > 768) {
+  navigator.mediaDevices
+    .getUserMedia({ video: true })
+    .then((stream) => {
+      video.srcObject = stream;
+    })
+    .catch((err) => {
+      console.error("Error accessing webcam: ", err);
+    });
+} else {
+  // If the screen is small, stop the webcam stream if it exists
+  if (video.srcObject) {
+    const stream = video.srcObject;
+    const tracks = stream.getTracks();
+
+    tracks.forEach((track) => {
+      track.stop();
+    });
+
+    video.srcObject = null;
+  }
+}
+
+// Capture the image
+captureBtn.addEventListener("click", () => {
+  const context = canvas.getContext("2d");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  canvas.toBlob((blob) => {
+    const formData = new FormData();
+    formData.append("file", blob, "captured_image.png");
+
+    fetch("/predict", {
+      method: "POST",
+      body: formData,
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.confidence_score !== undefined) {
+          resultsImg.src = canvas.toDataURL("image/png"); // Display captured image
+          confidenceScore.textContent =
+            "Confidence Score: " + data.confidence_score;
+          uploadSuccess.style.display = "block"; // Show success message
+        } else {
+          alert(data.error);
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }, "image/png");
+});
+
+// Trigger click on the hidden file input when the custom button is clicked
+chooseFileBtn.addEventListener("click", () => {
+  imageInput.click();
+});
+
+// Upload the selected image
+function uploadImage() {
+  const file = imageInput.files[0];
+  if (!file) {
+    alert("Please select an image to upload.");
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  fetch("/predict", {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.confidence_score !== undefined) {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+          resultsImg.src = e.target.result; // Display uploaded image
+          confidenceScore.textContent =
+            "Confidence Score: " + data.confidence_score;
+          uploadSuccess.style.display = "block"; // Show success message
+        };
+        reader.readAsDataURL(file);
+      } else {
+        alert(data.error);
+      }
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+}

templates/index.html

@@ -129,6 +129,7 @@
         margin-bottom: 10px;
       }
     </style>
+    <!-- <script src="script.js" defer></script> -->
   </head>
   <body>
     <!-- Camera Container for larger devices -->
@@ -174,7 +175,7 @@
       <p id="confidenceScore"></p>
     </div>
 
-    <script>
+    <!-- <script>
       const video = document.getElementById("camera");
       const canvas = document.getElementById("canvas");
       const captureBtn = document.getElementById("capture-btn");
@@ -279,6 +280,112 @@
             console.error("Error:", error);
           });
       }
+    </script> -->
+    <script>
+      const video = document.getElementById("camera");
+      const canvas = document.getElementById("canvas");
+      const captureBtn = document.getElementById("capture-btn");
+      const imageInput = document.getElementById("imageInput");
+      const resultsImg = document.getElementById("results");
+      const chooseFileBtn = document.getElementById("chooseFileBtn");
+      const uploadSuccess = document.getElementById("uploadSuccess");
+      const confidenceScore = document.getElementById("confidenceScore");
+
+      // Access the webcam only if not on mobile
+      if (window.innerWidth > 768) {
+        navigator.mediaDevices
+          .getUserMedia({ video: true })
+          .then((stream) => {
+            video.srcObject = stream;
+          })
+          .catch((err) => {
+            console.error("Error accessing webcam: ", err);
+          });
+      } else {
+        // If the screen is small, stop the webcam stream if it exists
+        if (video.srcObject) {
+          const stream = video.srcObject;
+          const tracks = stream.getTracks();
+
+          tracks.forEach((track) => {
+            track.stop();
+          });
+
+          video.srcObject = null;
+        }
+      }
+
+      // Capture the image
+      captureBtn.addEventListener("click", () => {
+        const context = canvas.getContext("2d");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        canvas.toBlob((blob) => {
+          const formData = new FormData();
+          formData.append("file", blob, "captured_image.png");
+
+          fetch("/predict", {
+            method: "POST",
+            body: formData,
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              if (data.confidence_score !== undefined) {
+                resultsImg.src = canvas.toDataURL("image/png"); // Display captured image
+                confidenceScore.textContent =
+                  "Confidence Score: " + data.confidence_score;
+                uploadSuccess.style.display = "block"; // Show success message
+              } else {
+                alert(data.error);
+              }
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+            });
+        }, "image/png");
+      });
+
+      // Trigger click on the hidden file input when the custom button is clicked
+      chooseFileBtn.addEventListener("click", () => {
+        imageInput.click();
+      });
+
+      // Upload the selected image
+      function uploadImage() {
+        const file = imageInput.files[0];
+        if (!file) {
+          alert("Please select an image to upload.");
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append("file", file);
+
+        fetch("/predict", {
+          method: "POST",
+          body: formData,
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.confidence_score !== undefined) {
+              const reader = new FileReader();
+              reader.onload = function (e) {
+                resultsImg.src = e.target.result; // Display uploaded image
+                confidenceScore.textContent =
+                  "Confidence Score: " + data.confidence_score;
+                uploadSuccess.style.display = "block"; // Show success message
+              };
+              reader.readAsDataURL(file);
+            } else {
+              alert(data.error);
+            }
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+          });
+      }
     </script>
   </body>
 </html>

vercel.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "builds": [{ "src": "app.py", "use": "@vercel/python" }],
+  "routes": [{ "src": "/(.*)", "dest": "app.py" }]
+}