From 50e7e542112518d8d910cba99ed109a6b33ba840 Mon Sep 17 00:00:00 2001
From: Priyanuj Choudhury <89585963+Priyanuj1709@users.noreply.github.com>
Date: Fri, 3 Nov 2023 00:09:23 +0530
Subject: [PATCH] Changes in some functionalities and UI changes
---
index.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
index.html | 10 ++++-----
index.js | 40 +++++++++++++++++++++++++++++++++-
3 files changed, 104 insertions(+), 9 deletions(-)
diff --git a/index.css b/index.css
index 4b9b439..dc5b895 100644
--- 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;
-}
\ No newline at end of file
+}
+
+.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
index 6952bbe..875a016 100644
--- a/index.html
+++ b/index.html
@@ -5,19 +5,16 @@
Object Detection
-
-
-
- Please wait for the AI model to load.
-
-
+ Please wait for the AI model to load.
+
+
![]()
@@ -25,6 +22,7 @@ Please wait for the AI model to load.
+
diff --git a/index.js b/index.js
index d943f27..dbfedce 100644
--- 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!");
}
-};
\ No newline at end of file
+};
+
+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!");
+ }
+ });
+ });
+}
\ No newline at end of file