index.ejs
8.11 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!-- Bootstrap -->
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<!-- header -->
<header>
<p class="header_name">MWD</p>
</header>
<!-- main contents -->
<div class="container" style="margin-top: 30px">
<div class="box1">
<div id="webcam-container"></div>
<div id="label-container" ></div>
</div>
<div class="box2">
<div id="check_image">
<img class="alert_image" src="/images/1.jpg">
</div>
<!-- 인풋 폼 나중에 합치기 -->
<div class="col-lg-6">
<form>
<legend>방문자 인적 사항</legend>
<p>이름: <input class="form-control" type='text' name='name' placeholder="고길동">
</p>
<p>전화번호: <input class="form-control" type='text' name='number' placeholder="010-1234-1234." ></input></p>
<p>신분:
<select name = "id" class="form-control">
<option value = "재학생">재학생</option>
<option value = "휴학생">휴학생</option>
<option value = "직원">직원</option>
<option value = "외부인">외부인</option>
</select>
</p>
<p>
<input type = "reset" style="float:right; margin-left:5px; background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); border: 0;" class="btn btn-warning"value = "다시입력"/>
<input type = "submit" style="float:right; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); border: 0; " class="btn btn-success" value = "제출"/>
</p>
<button type="button" onclick="">저장</button>
<a href="#" id="link" download="data.txt">다운로드</a>
</form>
</div>
<!-- 인풋 폼 종료 -->
</div>
</div>
<span id = "check_audio">
<!--초기값으로 '시작'이라는 음성을 사용 -->
<!--auto play 기능을 위해 iframe 사용 -->
<iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
</span>
<!-- footer -->
<footer>
<p>Mask-Wearing Discriminate Program Using Teachable Machine 2.0</p>
<p>Using teachable machine 2.0 provided by Google, a model was created that learned the type of mask wearing.</p>
<p>2017103978김태영 20174015이재호</p>
<p>contact us <a href="http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject">khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject</a></p>
</footer>
<!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
<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
window.onload = 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(550, 550, 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 class="alert_image" 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>