MWD / 2020-02-OSS-TermProject

Go to a project
Toggle navigation Toggle navigation pinning
김태영
53b3121a 1 parent 7c76e9b6

add Teachable Machine skeleton code (get model by Teachable Machine)

Expand all
Inline Side-by-side
Showing 4 changed files with 64 additions and 2 deletions
1 +/node_modules/
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
...@@ -6,4 +6,4 @@ router.get('/', function(req, res, next) { ...@@ -6,4 +6,4 @@ router.get('/', function(req, res, next) {
6 res.render('index', { title: 'Express' }); 6 res.render('index', { title: 'Express' });
7 }); 7 });
8 8
9 -module.exports = router; 9 +module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,5 +7,66 @@ ...@@ -7,5 +7,66 @@
7 <body> 7 <body>
8 <h1><%= title %></h1> 8 <h1><%= title %></h1>
9 <p>Welcome to <%= title %></p> 9 <p>Welcome to <%= title %></p>
10 +
11 + <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
12 + <div>Teachable Machine Image Model</div>
13 + <button type="button" onclick="init()">Start</button>
14 + <div id="webcam-container"></div>
15 + <div id="label-container"></div>
16 + <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
17 + <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
18 + <script type="text/javascript">
19 + // More API functions here:
20 + // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
21 +
22 + // the link to your model provided by Teachable Machine export panel
23 + const URL = "https://teachablemachine.withgoogle.com/models/2QtWMcVET/";
24 +
25 + let model, webcam, labelContainer, maxPredictions;
26 +
27 + // Load the image model and setup the webcam
28 + async function init() {
29 + const modelURL = URL + "model.json";
30 + const metadataURL = URL + "metadata.json";
31 +
32 + // load the model and metadata
33 + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
34 + // or files from your local hard drive
35 + // Note: the pose library adds "tmImage" object to your window (window.tmImage)
36 + model = await tmImage.load(modelURL, metadataURL);
37 + maxPredictions = model.getTotalClasses();
38 +
39 + // Convenience function to setup a webcam
40 + const flip = true; // whether to flip the webcam
41 + webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
42 + await webcam.setup(); // request access to the webcam
43 + await webcam.play();
44 + window.requestAnimationFrame(loop);
45 +
46 + // append elements to the DOM
47 + document.getElementById("webcam-container").appendChild(webcam.canvas);
48 + labelContainer = document.getElementById("label-container");
49 + for (let i = 0; i < maxPredictions; i++) { // and class labels
50 + labelContainer.appendChild(document.createElement("div"));
51 + }
52 + }
53 +
54 + async function loop() {
55 + webcam.update(); // update the webcam frame
56 + await predict();
57 + window.requestAnimationFrame(loop);
58 + }
59 +
60 + // run the webcam image through the image model
61 + async function predict() {
62 + // predict can take in an image, video or canvas html element
63 + const prediction = await model.predict(webcam.canvas);
64 + for (let i = 0; i < maxPredictions; i++) {
65 + const classPrediction =
66 + prediction[i].className + ": " + prediction[i].probability.toFixed(2);
67 + labelContainer.childNodes[i].innerHTML = classPrediction;
68 + }
69 + }
70 + </script>
10 </body> 71 </body>
11 -</html> 72 +</html>
...\ No newline at end of file ...\ No newline at end of file
......