김영곤 / 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 135 additions and 51 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 }); 7 });
8 8
9 -module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
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);
22 +});
23 +
24 +module.exports = router;
25 +
......
...@@ -7,66 +7,134 @@ ...@@ -7,66 +7,134 @@
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
21 - 26 +
22 - // the link to your model provided by Teachable Machine export panel 27 + // the link to your model provided by Teachable Machine export panel
23 - const URL = "https://teachablemachine.withgoogle.com/models/2QtWMcVET/"; 28 + const URL = "https://teachablemachine.withgoogle.com/models/2QtWMcVET/";
24 - 29 +
25 - let model, webcam, labelContainer, maxPredictions; 30 + let model, webcam, labelContainer, maxPredictions;
26 - 31 +
27 - // Load the image model and setup the webcam 32 + //predic이전 값을 기억해주는 전역변수. -999로 초기화.
28 - async function init() { 33 + var last_result_predict=-999;
29 - const modelURL = URL + "model.json"; 34 +
30 - const metadataURL = URL + "metadata.json"; 35 + // Load the image model and setup the webcam
31 - 36 + async function init() {
32 - // load the model and metadata 37 + const modelURL = URL + "model.json";
33 - // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 38 + const metadataURL = URL + "metadata.json";
34 - // or files from your local hard drive 39 +
35 - // Note: the pose library adds "tmImage" object to your window (window.tmImage) 40 + // load the model and metadata
36 - model = await tmImage.load(modelURL, metadataURL); 41 + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
37 - maxPredictions = model.getTotalClasses(); 42 + // or files from your local hard drive
38 - 43 + // Note: the pose library adds "tmImage" object to your window (window.tmImage)
39 - // Convenience function to setup a webcam 44 + model = await tmImage.load(modelURL, metadataURL);
40 - const flip = true; // whether to flip the webcam 45 + maxPredictions = model.getTotalClasses();
41 - webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip 46 +
42 - await webcam.setup(); // request access to the webcam 47 + // Convenience function to setup a webcam
43 - await webcam.play(); 48 + const flip = true; // whether to flip the webcam
44 - window.requestAnimationFrame(loop); 49 + webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
45 - 50 + await webcam.setup(); // request access to the webcam
46 - // append elements to the DOM 51 + await webcam.play();
47 - document.getElementById("webcam-container").appendChild(webcam.canvas); 52 + window.requestAnimationFrame(loop);
48 - labelContainer = document.getElementById("label-container"); 53 +
49 - for (let i = 0; i < maxPredictions; i++) { // and class labels 54 + // append elements to the DOM
50 - labelContainer.appendChild(document.createElement("div")); 55 + document.getElementById("webcam-container").appendChild(webcam.canvas);
51 - } 56 + labelContainer = document.getElementById("label-container");
57 + for (let i = 0; i < maxPredictions; i++) { // and class labels
58 + labelContainer.appendChild(document.createElement("div"));
59 + }
60 + }
61 +
62 + async function loop() {
63 + webcam.update(); // update the webcam frame
64 + await predict();
65 + window.requestAnimationFrame(loop);
66 + }
67 +
68 + // run the webcam image through the image model
69 + async function predict() {
70 + // predict can take in an image, video or canvas html element
71 + const prediction = await model.predict(webcam.canvas);
72 +
73 + //나중에 모두 하고나면 이부분은 항목별 일치확률을 보여주는 것으로 제거해도 무방.
74 + for (let i = 0; i < maxPredictions; i++) {
75 + const classPrediction =
76 + prediction[i].className + ": " + prediction[i].probability.toFixed(2);
77 + labelContainer.childNodes[i].innerHTML = classPrediction;
52 } 78 }
53 79
54 - async function loop() { 80 + //ajax로 요청을 보낼 값 초기값 -1
55 - webcam.update(); // update the webcam frame 81 + var predict_id = -1;
56 - await predict(); 82 +
57 - window.requestAnimationFrame(loop); 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;
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;
58 } 98 }
59 99
60 - // run the webcam image through the image model 100 + //이전 결과와 다를떄만 ajax요청
61 - async function predict() { 101 + //last_result_predict는 전역변수. 초기값 -999로 설정되어있다.
62 - // predict can take in an image, video or canvas html element 102 + //이것 없으면 계속 요청이 보내진다.
63 - const prediction = await model.predict(webcam.canvas); 103 + if(last_result_predict!=predict_id){
64 - for (let i = 0; i < maxPredictions; i++) { 104 +
65 - const classPrediction = 105 + //ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
66 - prediction[i].className + ": " + prediction[i].probability.toFixed(2); 106 + if(predict_id > 0){
67 - labelContainer.childNodes[i].innerHTML = classPrediction; 107 + //last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다.
68 - } 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 + }
69 } 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>
72 -</html>
...\ No newline at end of file ...\ No newline at end of file
139 + </body>
140 +</html>
......