add Teachable Machine skeleton code (get model by Teachable Machine)
Showing
4 changed files
with
64 additions
and
2 deletions
.gitignore
0 → 100644
1 | +/node_modules/ | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
package-lock.json
0 → 100644
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 | ... | ... |
-
Please register or login to post a comment