adds teachable machine image classification example (#196)

ml5js · Oct 2, 2019 · 7a07850 · 7a07850
1 parent 9cba15c
commit 7a07850
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 0 deletions.
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/index.html b/p5js/ImageClassification/ImageClassification_Teachable-Machine/index.html
@@ -0,0 +1,20 @@
+<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>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>
+  <script src="sketch.js"></script>
+</body>
+
+</html>
diff --git a/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/metadata.json b/p5js/ImageClassification/ImageClassification_Teachable-Machine/model/metadata.json
@@ -0,0 +1 @@
+{"tfjsVersion":"1.1.2","tmVersion":"1.1.0","tmSupportVersion":"0.6.4","timeStamp":"2019-10-02T18:20:43.552Z","userMetadata":{},"modelName":"untitled","labels":["nighttime","daytime"]}
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
@@ -0,0 +1,51 @@
+// Copyright (c) 2018 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Webcam Image Classification using a pre-trianed customized model and p5.js
+This example uses p5 preload function to create the classifier
+=== */
+
+// const checkpoint = 'model/model.json';
+const checkpoint = 'https://storage.googleapis.com/teachable-machine-pubilshed-models/fa542ec0-b94b-4aa9-add4-c256963b0720/model.json';
+let classifier;
+let video;
+let resultsP;
+
+function preload() {
+  // Create a camera input
+  video = createCapture(VIDEO);
+  // Initialize the Image Classifier method with a pre-trained customized model and the video as the second argument
+  classifier = ml5.imageClassifier(checkpoint);
+}
+
+function setup() {
+  noCanvas();
+  // ml5 also supports using callback pattern to create the classifier
+  // classifier = ml5.imageClassifier(checkpoint, video, modelReady);
+  // If you would like to load the model from local files
+  // classifier = ml5.imageClassifier('model/image-model.json', video, modelReady);
+  resultsP = createP('Loading model and video...');
+  classifyVideo();
+}
+
+// Get a prediction for the current video frame
+function classifyVideo() {
+  classifier.classify(video, gotResult);
+}
+
+// If you use callback pattern to create the classifier, you can use the following callback function
+// function modelReady() {
+//   console.log('Model Ready');
+//   classifyVideo();
+// }
+
+// When we get a result
+function gotResult(err, results) {
+  // The results are in an array ordered by confidence.
+  resultsP.html('Label: ' + results[0].label + ' ' + nf(results[0].confidence, 0, 2));
+  classifyVideo();
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"tfjsVersion":"1.1.2","tmVersion":"1.1.0","tmSupportVersion":"0.6.4","timeStamp":"2019-10-02T18:20:43.552Z","userMetadata":{},"modelName":"untitled","labels":["nighttime","daytime"]}