index.ejs
9.45 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!-- Jquery를 불러온다 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var place = prompt("위치를 입력해 주세요. ex) 전자정보대학", ""); //위치 정보를 입력 받는다.
alert(place + '(으)로 설정되었습니다.');
var fileName = place + '.txt'; // 위치를 파일 이름으로 쓰기 위함.
var nameArr = []; // 이름을 저장할 배열
var numArr = []; // 전화번호를 저장할 배열
var idArr = []; // 신분을 저장할 배열
var dayTimeArr = []; // 날짜와 시간을 저장할 배열
function getDayTime() // 날짜와 시간을 구해주는 함수
{
var today = new Date();
var day = today.toLocaleDateString(); //년도.월.날짜
var time = today.toLocaleTimeString(); //시:분:초
return (day + ' ' + time);
};
function getInfo() // 입력받은 데이터를 배열에 저장한다.
{
var temp_name = document.getElementById('name').value;
var temp_num = document.getElementById('number').value;
var id_index = document.getElementById('identity');
var temp_id = id_index.options[id_index.selectedIndex].value;
var dateTime = getDayTime();
nameArr.push(temp_name);
console.log(nameArr);
numArr.push(temp_num);
console.log(numArr);
idArr.push(temp_id);
console.log(idArr);
dayTimeArr.push(dateTime);
console.log(dayTimeArr);
};
function save() // 배열에 저장한 데이터를 가공해 json파일의 형태로 만들고, 다운로드 링크를 생성한다.
{
var obj = new Object();
for (var i = 0; i< nameArr.length; i++)
{
obj[nameArr[i]] = {"전화번호": numArr[i], "신분": idArr[i], "일시": dayTimeArr[i]};
}
var obj_s = JSON.stringify(obj, null, "\t"); //json text화 시키기.
var dataUri = "data:application/json;charset=utf-8,"+ encodeURIComponent(obj_s);// 파일 링크 생성
var link = $("#link").attr("href", dataUri);
console.log('Save Complete');
document.getElementById('link').setAttribute('download', fileName); // 다운로드 전 파일 이름을 변경해준다.
};
</script>
</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>
<form>
<fieldset style = "width:600px">
<legend>방문자 인적 사항</legend>
이름:
<input type='text' id='name' style="width:70px" required/>
전화번호:
<input type='text' id='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>
<div style="display:inline">신분:</div>
<select id = "identity" style="width: 50;">
<option value = "재학생">재학생</option>
<option value = "휴학생">휴학생</option>
<option value = "직원">직원</option>
<option value = "외부인">외부인</option>
</select><br><br>
<button type="button" onclick="getInfo();">제출</button>
<input type = "reset" value = "다시입력"/>
</fieldset>
</form>
<button type="button" onclick="save();">저장</button>
<a href="#" id="link" download="name">다운로드</a>
<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>