index.ejs
5.78 KB
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
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<div id="check_image">
<img src="/images/1.jpg">
</div>
<div id = "check_audio">
<!--초기값으로 '시작'이라는 음성을 사용 -->
<!--auto play 기능을 위해 iframe 사용 -->
<iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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/2QtWMcVET/";
let model, webcam, labelContainer, maxPredictions;
//predic이전 값을 기억해주는 전역변수. -999로 초기화.
var last_result_predict=-999;
// Load the image model and setup the webcam
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "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)
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(200, 200, 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);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update(); // update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(webcam.canvas);
//나중에 모두 하고나면 이부분은 항목별 일치확률을 보여주는 것으로 제거해도 무방.
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
//ajax로 요청을 보낼 값 초기값 -1
var predict_id = -1;
//해당 항목의 일치확률이 몇프로 이상이어야 해당 항목이라 판단할지 결정하는 변수
var check_probablity=0.95;
//0: 완벽 1: 안씀 2: 턱스크 3: 입스크
if(prediction[0].probability.toFixed(2)>check_probablity){
predict_id=0;
}
else if(prediction[1].probability.toFixed(2)>check_probablity){
predict_id=1;
}
else if(prediction[2].probability.toFixed(2)>check_probablity){
predict_id=2;
}
else if(prediction[3].probability.toFixed(2)>check_probablity){
predict_id=3;
}
//이전 결과와 다를떄만 ajax요청
//last_result_predict는 전역변수. 초기값 -999로 설정되어있다.
//이것 없으면 계속 요청이 보내진다.
if(last_result_predict!=predict_id){
//ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
if(predict_id > 0){
//last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다.
last_result_predict = predict_id;
$(function() {
$.ajax({
type: 'GET',
datatype:'json',
url: '/data?id='+predict_id,
success: function(result) {
console.log(result);
//받아온 json데이터를 처리한다
process_json(result);
}
});
})
}
}
}
//JSON 데이터 처리
function process_json(json_data){
var images = json_data.image;
var strDOM = "";
var audio = json_data.audio;
var audioName = "";
//이미지 태그 생성
strDOM += '<img src="'+images+'">';
//오디오 태그 생성
audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>';
//#cehck_image div의 이미지 교체
$('#check_image').html(strDOM);
//#check_audio div의 오디오 교체
$('#check_audio').html(audioName);
}
</script>
</body>
</html>