CIS-566-Fall-2022 · ess-aar · Nov 21, 2022 · Nov 21, 2022 · Nov 21, 2022
diff --git a/README.md b/README.md
@@ -1,5 +1,14 @@
 # lab07-machine-learning
 
+I trained my model to recognize three hand gestures:
+  - V sign : Peace
+  - Open palm : Stop
+  - Thumbs up : Good job
+
+https://user-images.githubusercontent.com/90112787/203116531-479f6e29-63e1-4a8b-990a-34c2b7379a78.mov
+
+![Screenshot 2022-11-20 at 7 18 56 PM](https://user-images.githubusercontent.com/90112787/202934647-8ebc2430-6362-4c2c-9820-e037bd4db838.png)
+
 1. Create a brief demo with Teachable Machine
   - Go to https://teachablemachine.withgoogle.com/
   - Follow the instrcutions for an Image Project (standard image model)

diff --git a/p5/index.html b/p5/index.html
@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Webcam Image Classification using a pre-trained customized model and p5.js</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <h1>Teachable Machine</h1>
+  <p>This is a demonstration of image classification using a model trained with Google's Teachable
+    Machine project. If you cover the camera, this model will classify the image as "nighttime," otherwise will classify
+    anything else as "daytime." </p>
+  <script src="sketch.js"></script>
+</body>
+
+</html>
diff --git a/p5/ml5.min.js b/p5/ml5.min.js
diff --git a/p5/p5.dom.min.js b/p5/p5.dom.min.js
diff --git a/p5/p5.min.js b/p5/p5.min.js
diff --git a/p5/sketch.js b/p5/sketch.js
@@ -0,0 +1,68 @@
+// Classifier Variable
+let classifier;
+// Model URL
+let imageModelURL = 'https://teachablemachine.withgoogle.com/models/gowe9MwQo/';
+
+// Video
+let video;
+let flippedVideo;
+// To store the classification
+let label = "";
+
+// Load the model first
+function preload() {
+  classifier = ml5.imageClassifier(imageModelURL + 'model.json');
+}
+
+function setup() {
+  createCanvas(320, 260);
+  // Create the video
+  video = createCapture(VIDEO);
+  video.size(320, 240);
+  video.hide();
+
+  flippedVideo = ml5.flipImage(video);
+  // Start classifying
+  classifyVideo();
+}
+
+function draw() {
+  background(0);
+  // Draw the video
+  image(flippedVideo, 0, 0);
+
+  // Draw the label
+  fill(255);
+  textSize(16);
+  textAlign(CENTER);
+
+  if (label === "Class 1") {
+    text("Peace", width / 2, height - 4);
+  } else if (label === "Class 2") {
+    text("Stop!", width / 2, height - 4);
+  } else if (label === "Class 3") {
+    text("Good job!", width / 2, height - 4);
+  }
+}
+
+// Get a prediction for the current video frame
+function classifyVideo() {
+  flippedVideo = ml5.flipImage(video)
+  classifier.classify(flippedVideo, gotResult);
+  flippedVideo.remove();
+
+}
+
+// When we get a result
+function gotResult(error, results) {
+  // If there is an error
+  if (error) {
+    console.error(error);
+    return;
+  }
+  // The results are in an array ordered by confidence.
+  // console.log(results[0]);
+  label = results[0].label;
+  // Classifiy again!
+  classifyVideo();
+}
diff --git a/p5/style.css b/p5/style.css
@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
diff --git a/teachable_machine_lab.tm b/teachable_machine_lab.tm