-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (134 loc) · 5.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<title>機器學習</title>
</head>
<style>
.right {
float: right;
padding-right: 15%;
}
.left {
float: left;
}
</style>
<body>
<div class="left">
<img id="imagePreview" style="height: 300px;" />
<input id="imageUpload" type="file" />
<div>Teachable Machine Image Model with upload</div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = 'https://teachablemachine.withgoogle.com/models/yWSVUHQWM/'
let model, labelContainer, maxPredictions;
// Load the image model
async function init() {
const modelURL = URL + 'model.json';
const metadataURL = URL + 'metadata.json';
// load the model and metadata
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
labelContainer = document.getElementById('label-container');
for (let i = 0; i < maxPredictions; i++) {
// and class labels
labelContainer.appendChild(document.createElement('div'));
}
}
async function predict() {
// predict can take in an image, video or canvas html element
var image = document.getElementById('imagePreview');
const prediction = await model.predict(image, false);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').attr('src', e.target.result);
// $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
};
reader.readAsDataURL(input.files[0]);
init().then(() => {
predict();
});
}
}
$('#imageUpload').change(function () {
readURL(this);
});
</script>
</div>
<div class="right">
<div>Teachable Machine Webcam Model</div>
<button type="button" onclick="inits()">Start</button>
<button type="button" onclick="stop()">Stop</button>
<div id="webcam-container"></div>
<div id="label-containers"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const AURL = "https://teachablemachine.withgoogle.com/models/yWSVUHQWM/";
let models, webcam, labelContainers, maxPrediction;
// Load the image model and setup the webcam
async function inits() {
const modelURLs = AURL + "model.json";
const metadataURLs = AURL + "metadata.json";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// or files from your local hard drive
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
models = await tmImage.load(modelURLs, metadataURLs);
maxPrediction = models.getTotalClasses();
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(300, 300, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
// append elements to the DOM
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainers = document.getElementById("label-containers");
for (let i = 0; i < maxPrediction; i++) { // and class labels
labelContainers.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update(); // update the webcam frame
await predicts();
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predicts() {
// predict can take in an image, video or canvas html element
const prediction = await models.predict(webcam.canvas);
for (let i = 0; i < maxPrediction; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainers.childNodes[i].innerHTML = classPrediction;
}
}
async function stop() {
await webcam.stop();
}
</script>
</div>
</body>
</html>