Skip to content

Commit d9f753a

Browse files
OmkaragrawalOmkaragrawal
committed
primary push
1 parent 54a0a97 commit d9f753a

File tree

7 files changed

+260
-0
lines changed

7 files changed

+260
-0
lines changed

‎index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
3+
<head>
4+
<link rel="stylesheet" href="./style.css">
5+
<!-- Load the latest version of TensorFlow.js -->
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
7+
8+
</head>
9+
10+
<body>
11+
<div id="preload" class="container center-align">
12+
<h1>Please wait MobileNet is loading ....</h1>
13+
</div>
14+
15+
<div id="postload" class="container center-align">
16+
17+
<!-- Add an image that we will use to test -->
18+
<video class="responsive-video" autoplay playsinline muted id="webcam"></video>
19+
20+
<div id="console" class="center-align red-text text-accent-4"></div>
21+
22+
<div class="row btnrow">
23+
<div class="col s12 row btns">
24+
<div class="col s4">
25+
<a class="btn waves-effect cyan accent-4" id="class-a">Add A</a>
26+
</div>
27+
<div class="col s4">
28+
<a class="btn waves-effect cyan accent-4" id="class-b">Add B</a>
29+
</div>
30+
<div class="col s4">
31+
<a class="btn waves-effect cyan accent-4" id="class-c">Add C</a>
32+
</div>
33+
</div>
34+
<div class="col s12 row btndesc">
35+
<div class="col s4">
36+
Add Images that belong to Class A
37+
</div>
38+
<div class="col s4">
39+
Add Images that belong to Class B<br><br>
40+
</div>
41+
<div class="col s4">
42+
A
43+
dd Images that belong to Class C<br> <br>
44+
</div>
45+
</div>
46+
47+
</div>
48+
</div>
49+
50+
51+
<!-- Load index.js after the content of the page -->
52+
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
53+
<script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
54+
<script src="https://unpkg.com/@tensorflow-models/knn-classifier"></script>
55+
<script src="./index.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
57+
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
59+
60+
</body>
61+
62+
</html>

‎index.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const webcamDisplay = document.getElementById('webcam');
2+
3+
webcamDisplay.classList.add('col', 's12');
4+
5+
// webcamDisplay.clientWidth = '100%';
6+
7+
// webcamDisplay.clientHeight = '50%';
8+
const classifier = knnClassifier.create();
9+
let net;
10+
11+
const app = async () => {
12+
document.getElementById("postload").hidden = true;
13+
14+
net = await mobilenet.load();
15+
16+
document.getElementById("preload").hidden = true;
17+
document.getElementById("postload").hidden = false;
18+
19+
console.log('calling setupWebcam')
20+
await setupWebcam();
21+
console.log("Webcam call successful")
22+
23+
// Reads an image from the webcam and associates it with a specific class
24+
// index.
25+
const addExample = classId => {
26+
// Get the intermediate activation of MobileNet 'conv_preds' and pass that
27+
// to the KNN classifier.
28+
const activation = net.infer(webcamDisplay, 'conv_preds');
29+
30+
// Pass the intermediate activation to the classifier.
31+
classifier.addExample(activation, classId);
32+
};
33+
34+
// When clicking a button, add an example for that class.
35+
document.getElementById('class-a').addEventListener('click', () => addExample(0));
36+
document.getElementById('class-b').addEventListener('click', () => addExample(1));
37+
document.getElementById('class-c').addEventListener('click', () => addExample(2));
38+
39+
while (true) {
40+
if (classifier.getNumClasses() > 0) {
41+
// Get the activation from mobilenet from the webcam.
42+
const activation = net.infer(webcamDisplay, 'conv_preds');
43+
// Get the most likely class and confidences from the classifier module.
44+
const result = await classifier.predictClass(activation,3);
45+
46+
const classes = ['A', 'B', 'C'];
47+
document.getElementById('console').innerText = `Prediction: ${classes[result.classIndex]}\nProbability: ${result.confidences[result.classIndex]}
48+
`;
49+
await tf.nextFrame();
50+
}
51+
52+
await tf.nextFrame();
53+
}
54+
};
55+
56+
const setupWebcam = async () => {
57+
const navigatorAny = navigator;
58+
navigator.getUserMedia = navigator.getUserMedia ||
59+
navigatorAny.webkitGetUserMedia||
60+
navigatorAny.mozGetUserMedia ||
61+
navigatorAny.msGetUserMedia;
62+
63+
if(navigator.getUserMedia) {
64+
navigator.getUserMedia({video: true}, (videoStream) => {
65+
webcamDisplay.srcObject = videoStream;
66+
webcamDisplay.addEventListener('loadeddata', (success) => console.log('video loaded'))
67+
}, (error) => {
68+
alert('Error occured please check the logs in console');
69+
console.error(error);
70+
})
71+
} else {
72+
((error) => {
73+
alert('Error occured please check the logs in console');
74+
console.error(error);
75+
})();
76+
}
77+
};
78+
79+
app();

‎intro-to-js/async-await.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// // --------------------------- Async - Await ---------------------------//
2+
3+
4+
const ioFunction = async (parameters) => {
5+
console.log('Inside I/O function, before I/O operation\n Execution');
6+
7+
setTimeout(() => {
8+
console.log("I/O operation performed");
9+
}, 3000)
10+
11+
console.log("After I/O operation inside I/O function");
12+
}
13+
let second;
14+
async function generalFunction(parametrs) {
15+
let value = await ioFunction();
16+
console.log("After I/O function call, inside parent function");
17+
second = await ioFunction();
18+
}
19+
20+
console.log('Execution start');
21+
22+
(async () => {
23+
await generalFunction();
24+
})();

‎intro-to-js/callback.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// --------------------------- Callback ---------------------------//
2+
3+
// console.log("before making I/O operation");
4+
5+
6+
// const ioFunction = (paramaters, callbackFunction) => {
7+
// console.log("Inside a time consuming function")
8+
// setTimeout(callbackFunction, 3000);
9+
// console.log(" inside the I/O function ")
10+
// };
11+
12+
// // const toBeCalled =
13+
14+
// ioFunction('abfjef ', () => {
15+
// console.log("the callback function.");
16+
// });
17+
// console.log("After the I/O operation is completed");

‎intro-to-js/promise.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
// // --------------------------- Promises ---------------------------//
3+
4+
// const promise = new Promise((resolve, reject) => {
5+
// setTimeout(() => {resolve('resolve is called I/O operation successful')}, 3000);
6+
// });
7+
8+
// const generalFunc = () => {
9+
// console.log("Inside general function");
10+
// promise.then(
11+
// parameters => {
12+
// console.log(parameters);
13+
// return ("Hello from first .then")
14+
// }
15+
16+
// )
17+
// .then( (parametersFromFirst) => {
18+
// console.log(parametersFromFirst)
19+
// })
20+
// .catch(
21+
// error => console.log(error)
22+
// )
23+
// }
24+
25+
// generalFunc();

‎intro-to-js/sync.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
//---------------------Simple Synchronous program-------------------//
2+
3+
// const ioFunction = (parameters) => {
4+
// console.log("Inside I/O function before I/O operation");
5+
// console.log(() => {"I/O operation Finished"}, 3000);
6+
// console.log("Inside I/O function after I/O operation");
7+
// }
8+
9+
// console.log("Before I/O function");
10+
// ioFunction('adbs');
11+
// console.log("After I/O function");
12+
13+

‎style.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* CSS files add styling rules to your content */
2+
3+
body {
4+
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
5+
margin: 2em;
6+
}
7+
8+
h1 {
9+
font-style: italic;
10+
color: #373fff;
11+
}
12+
13+
.btns > div {
14+
border-top: 1px;
15+
border-left: 1px;
16+
border-right: 1px;
17+
}
18+
19+
.btndesc > div {
20+
border-left: 1px;
21+
border-right: 1px;
22+
border-bottom: 1px;
23+
}
24+
25+
body {
26+
display: flex;
27+
flex-direction: column;
28+
height: 100vh;
29+
overflow-y: scroll;
30+
}
31+
#console {
32+
margin: 2px;
33+
padding-top: 5px;
34+
height: fit-content;
35+
}
36+
37+
.btnrow {
38+
margin-bottom: 0px;
39+
padding-bottom: 0px;
40+
}

0 commit comments

Comments
 (0)