Jminding · Priyanuj1709 · Nov 2, 2023
diff --git a/index.css b/index.css
@@ -1,18 +1,51 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    background-color: black;
+    color: #fff;
+}
+
+body {
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: aqua;
+}
+
+
 video {
     display: block;
+    width: 50%;
+    height: auto;
+    margin: 0 auto;
+    background-color: #000;
+    border: 1px solid #000;
+    box-shadow: 0 0 5px #000;
+    cursor: pointer;
+
 }
 
 section {
     opacity: 1;
     transition: opacity 500ms ease-in-out;
+
 }
 
 .removed {
     display: none;
+
 }
 
 .invisible {
     opacity: 0.2;
+
 }
 
 .camView {
@@ -21,11 +54,17 @@ section {
     width: calc(100% - 20px);
     margin: 10px;
     cursor: pointer;
+    overflow: hidden;
+    border: 1px solid #fff;
+    box-shadow: 0 0 5px #fff;
+    background-color: #000;
+    transition: all 500ms ease-in-out;
+
 }
 
 .camView p {
     position: absolute;
-    padding: 5px;
+    padding: 50px;
     background-color: rgba(255, 111, 0, 0.85);
     color: #FFF;
     border: 1px dashed rgba(255, 255, 255, 0.7);
@@ -38,4 +77,24 @@ section {
     border: 1px dashed #fff;
     z-index: 1;
     position: absolute;
-}
+}
+
+.highlighter:hover {
+    background: rgba(0, 255, 0, 0.5);
+}
+
+.highlighter:active {
+    background: rgba(0, 255, 0, 0.75);
+}   
+
+.main-header {
+    background-color: #070606;
+    color: #fff;
+    height: 50px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
+
diff --git a/index.html b/index.html
@@ -5,26 +5,24 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Object Detection</title>
-  <!-- Load TensorFlow.js. This is required to use coco-ssd model. -->
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js" type="text/javascript"></script>
-  <!-- Load the coco-ssd model. -->
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <link rel="stylesheet" href="index.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </head>
 <body>
-  <!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
-  <h1 id="pls">Please wait for the AI model to load.</h1>
-  <label for="img" style="cursor: pointer;">Upload Image</label></p>
-  <input class="form-control" id="img" name="img" type="file" accept="image/png, image/jpeg, image/jpg, image/heic, image/tiff" disabled>
+  <h1  class="main-header" id="pls">Please wait for the AI model to load.</h1>
+  <label for="img"  class="upload-img "cursor: pointer;>Upload Image For Detection</label></p>
+  <input class="form-control" id="img" name="img" type="file" accept="image/png, image/jpeg, image/jpg, image/heic, image/tiff" >
   <img id="imgshow" style="display: none;"/>
   <canvas id="canvas" width="0" height="0"></canvas>
   <section id="demos">
     <div id="liveView" class="camView">
       <button id="webcamButton" disabled>Enable Webcam</button>
       <button id="disableWebcamButton" class="removed">Disable Webcam</button>
       <video id="webcam" autoplay muted width="960" height="720"></video>
+      <button id="capture" onclick="changeImage()">Capture</button>
     </div>
   </section>
 

diff --git a/index.js b/index.js
@@ -90,6 +90,7 @@ function predictWebcam() {
             'top: ' + predictions[n].bbox[1] + 'px;' + 
             'width: ' + (predictions[n].bbox[2] - 10) + 'px;';
 
+
         const highlighter = document.createElement('div');
         highlighter.setAttribute('class', 'highlighter');
         highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
@@ -133,4 +134,41 @@ fileSelector.onchange = async () => {
         context.fillText(result[i].score.toFixed(4) * 100 + '% certainty - ' + result[i].class, result[i].bbox[0], result[i].bbox[1] > 10 ? result[i].bbox[1] - 5 : 10);
         console.log("Process finished!");
     }
-};
+};
+
+function changeImage() {
+    var image = document.getElementById('imgshow');
+    image.src = URL.createObjectURL(event.target.files[0]);
+    image.style = "display: block;";
+    const img = document.getElementById('imgshow');
+    const model = cocoSsd.load();
+    model.then(function(loadedModel) {
+        console.log("Model loaded!");
+        model = loadedModel;
+        bruh.innerHTML = "Model loaded!";
+        bruh.classList.add('removed');
+        fileSelector.disabled = false;
+        enableWebcamButton.disabled = false;
+    });
+    model.then(function(loadedModel) {
+        loadedModel.detect(img).then(function(result) {
+            console.log(result);
+            const c = document.getElementById('canvas');
+            c.width = img.width;
+            c.height = img.height;
+            const context = c.getContext('2d');
+            context.drawImage(img, 0, 0);
+            context.font = '10 px Arial';
+            for (let i = 0; i < result.length; i++) {
+                context.beginPath();
+                context.rect(...result[i].bbox);
+                context.linewidth = 5;
+                context.strokeStyle = 'green';
+                context.fillStyle = 'green';
+                context.stroke();
+                context.fillText(result[i].score.toFixed(4) * 100 + '% certainty - ' + result[i].class, result[i].bbox[0], result[i].bbox[1] > 10 ? result[i].bbox[1] - 5 : 10);
+                console.log("Process finished!");
+            }
+        });
+    });
+}