ml5js · shiffman · Oct 24, 2019 · Oct 24, 2019 · Oct 24, 2019 · Oct 24, 2019
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/metadata.json b/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/metadata.json
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/model.json b/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/model.json
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/weights.bin b/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/weights.bin
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/sketch.js b/p5js/ImageClassification/ImageClassification_Teachable-Machine/sketch.js
diff --git a/p5js/TeachableMachine/ImageModel_TM/index.html b/p5js/TeachableMachine/ImageModel_TM/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="http://localhost:8080/ml5.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/p5js/TeachableMachine/ImageModel_TM/sketch.js b/p5js/TeachableMachine/ImageModel_TM/sketch.js
@@ -0,0 +1,68 @@
+// Copyright (c) 2019 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Webcam Image Classification using a pre-trained customized model and p5.js
+This example uses p5 preload function to create the classifier
+=== */
+
+// Classifier Variable
+let classifier;
+// Model URL
+let imageModelURL = 'https://storage.googleapis.com/teachable-machine-pubilshed-models/fa542ec0-b94b-4aa9-add4-c256963b0720/model.json';
+
+// Video
+let video;
+
+// To store the classification
+let label = "";
+
+// Load the model first
+function preload() {
+  classifier = ml5.imageClassifier(imageModelURL);
+}
+
+function setup() {
+  createCanvas(320, 260);
+  // Create the video
+  video = createCapture(VIDEO);
+  video.size(320, 240);
+  video.hide();
+
+  // Start classifying
+  classifyVideo();
+}
+
+function draw() {
+  background(0);
+  // Draw the video
+  image(video, 0, 0);
+
+  // Draw the label
+  fill(255);
+  textSize(16);
+  textAlign(CENTER);
+  text(label, width / 2, height - 4);
+}
+
+// Get a prediction for the current video frame
+function classifyVideo() {
+  classifier.classify(video, gotResult);
+}
+
+// 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/...assification_Teachable-Machine/index.html → ...TeachableMachine/SoundModel_TM/index.html b/...assification_Teachable-Machine/index.html → ...TeachableMachine/SoundModel_TM/index.html
@@ -3,17 +3,16 @@
 <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="http://localhost:8080/ml5.js" type="text/javascript"></script>
 </head>
 
 <body>
-  <h1>Webcam Image Classification using a pre-trained customized model in Google's Teachable Machine and p5.js</h1>
-  <p>If you cover your webcam, this model will classify it as "nighttime", 
-      otherwise will classify anything else else "daytime" </p>
+  <h1>Teachable Machine</h1>
+  <p>This is a demonstration of sound classification using a model trained with Google's Teachable Machine project. If
+    you clap, this model will classify the sound as "clap." (Until a clap is detected the canvas displays "listening.")
+  </p>
   <script src="sketch.js"></script>
 </body>
 

diff --git a/p5js/TeachableMachine/SoundModel_TM/sketch.js b/p5js/TeachableMachine/SoundModel_TM/sketch.js
@@ -0,0 +1,53 @@
+// Copyright (c) 2019 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Webcam Image Classification using a pre-trained customized model and p5.js
+This example uses p5 preload function to create the classifier
+=== */
+
+// Global variable to store the classifier
+let classifier;
+
+// Label (start by showing listening)
+let label = "listening";
+
+// Teachable Machine model URL:
+let soundModelURL = 'https://storage.googleapis.com/tm-speech-commands/eye-test-sound-yining/model.json';
+
+
+function preload() {
+  // Load the model
+  classifier = ml5.soundClassifier(soundModelURL);
+}
+
+function setup() {
+  createCanvas(320, 240);
+  // Start classifying
+  // The sound model will continuously listen to the microphone
+  classifier.classify(gotResult);
+}
+
+function draw() {
+  background(0);
+  // Draw the label in the canvas
+  fill(255);
+  textSize(32);
+  textAlign(CENTER, CENTER);
+  text(label, width / 2, height / 2);
+}
+
+
+// The model recognizing a sound will trigger this event
+function gotResult(error, results) {
+  if (error) {
+    console.error(error);
+    return;
+  }
+  // The results are in an array ordered by confidence.
+  // console.log(results[0]);
+  label = results[0].label;
+}