Skip to content
This repository has been archived by the owner on Apr 6, 2020. It is now read-only.

adds teachable machine image classification example #196

Merged
merged 1 commit into from
Oct 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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>
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"]}

Large diffs are not rendered by default.

Binary file not shown.
Original file line number Diff line number Diff line change
@@ -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();
}