MWD / 2020-02-OSS-TermProject

Go to a project
Toggle navigation Toggle navigation pinning
김태영
f9204332 2 parents 53b3121a 4f4fab84

Merge branch 'feature/print_image' into 'master' 

Feature/print image

add print image to mainpage

See merge request !1
Inline Side-by-side
Showing 6 changed files with 86 additions and 2 deletions
...@@ -3,7 +3,23 @@ var router = express.Router(); ...@@ -3,7 +3,23 @@ var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 router.get('/', function(req, res, next) { 5 router.get('/', function(req, res, next) {
6 - res.render('index', { title: 'Express' }); 6 + res.render('index', { title: 'MWD' , url: "/images/1.jpg"});
7 +});
8 +
9 +/* predict() 의 결과를 querystring으로 받아 그것에 맞는 이미지와 음성파일을 보내준다. */
10 +/* /data?id=n 의 형태로 id값을 전달해 준다. */
11 +router.get('/data', function(req, res, next){
12 +
13 + id = req.query.id;
14 +
15 + data = {
16 + image : "/images/"+id+".jpg"
17 + }
18 + //데이터 확인
19 + console.log(data);
20 + //보내주기.
21 + res.send(data);
7 }); 22 });
8 23
9 module.exports = router; 24 module.exports = router;
25 +
......
...@@ -7,14 +7,19 @@ ...@@ -7,14 +7,19 @@
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/ 를 통해 학습시키고 얻은 스켈레톤 코드 --> 10 <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
11 +
12 <div>Teachable Machine Image Model</div> 12 <div>Teachable Machine Image Model</div>
13 <button type="button" onclick="init()">Start</button> 13 <button type="button" onclick="init()">Start</button>
14 <div id="webcam-container"></div> 14 <div id="webcam-container"></div>
15 <div id="label-container"></div> 15 <div id="label-container"></div>
16 + <div id="check_image">
17 + <img src="/images/1.jpg">
18 + </div>
19 +
16 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 20 <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> 21 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
22 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
18 <script type="text/javascript"> 23 <script type="text/javascript">
19 // More API functions here: 24 // More API functions here:
20 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image 25 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
...@@ -24,6 +29,9 @@ ...@@ -24,6 +29,9 @@
24 29
25 let model, webcam, labelContainer, maxPredictions; 30 let model, webcam, labelContainer, maxPredictions;
26 31
32 + //predic이전 값을 기억해주는 전역변수. -999로 초기화.
33 + var last_result_predict=-999;
34 +
27 // Load the image model and setup the webcam 35 // Load the image model and setup the webcam
28 async function init() { 36 async function init() {
29 const modelURL = URL + "model.json"; 37 const modelURL = URL + "model.json";
...@@ -61,12 +69,72 @@ ...@@ -61,12 +69,72 @@
61 async function predict() { 69 async function predict() {
62 // predict can take in an image, video or canvas html element 70 // predict can take in an image, video or canvas html element
63 const prediction = await model.predict(webcam.canvas); 71 const prediction = await model.predict(webcam.canvas);
72 +
73 + //나중에 모두 하고나면 이부분은 항목별 일치확률을 보여주는 것으로 제거해도 무방.
64 for (let i = 0; i < maxPredictions; i++) { 74 for (let i = 0; i < maxPredictions; i++) {
65 const classPrediction = 75 const classPrediction =
66 prediction[i].className + ": " + prediction[i].probability.toFixed(2); 76 prediction[i].className + ": " + prediction[i].probability.toFixed(2);
67 labelContainer.childNodes[i].innerHTML = classPrediction; 77 labelContainer.childNodes[i].innerHTML = classPrediction;
68 } 78 }
79 +
80 + //ajax로 요청을 보낼 값 초기값 -1
81 + var predict_id = -1;
82 +
83 + //해당 항목의 일치확률이 몇프로 이상이어야 해당 항목이라 판단할지 결정하는 변수
84 + var check_probablity=0.95;
85 + //0: 완벽 1: 안씀 2: 턱스크 3: 입스크
86 +
87 + if(prediction[0].probability.toFixed(2)>check_probablity){
88 + predict_id=0;
89 + }
90 + else if(prediction[1].probability.toFixed(2)>check_probablity){
91 + predict_id=1;
69 } 92 }
93 + else if(prediction[2].probability.toFixed(2)>check_probablity){
94 + predict_id=2;
95 + }
96 + else if(prediction[3].probability.toFixed(2)>check_probablity){
97 + predict_id=3;
98 + }
99 +
100 + //이전 결과와 다를떄만 ajax요청
101 + //last_result_predict는 전역변수. 초기값 -999로 설정되어있다.
102 + //이것 없으면 계속 요청이 보내진다.
103 + if(last_result_predict!=predict_id){
104 +
105 + //ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
106 + if(predict_id > 0){
107 + //last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다.
108 + last_result_predict = predict_id;
109 + $(function() {
110 + $.ajax({
111 + type: 'GET',
112 + datatype:'json',
113 + url: '/data?id='+predict_id,
114 + success: function(result) {
115 + console.log(result);
116 +
117 + //받아온 json데이터를 처리한다
118 + process_json(result);
119 + }
120 + });
121 + })
122 + }
123 + }
124 + }
125 +
126 + //JSON 데이터 처리
127 + function process_json(json_data){
128 + var images = json_data.image;
129 + var strDOM = "";
130 +
131 + //이미지 태그 생성
132 + strDOM += '<img src="'+images+'">';
133 +
134 + //#cehck_image div의 이미지 교체
135 + $('#check_image').html(strDOM);
136 + }
137 +
70 </script> 138 </script>
71 </body> 139 </body>
72 </html> 140 </html>
......