MWD / 2020-02-OSS-TermProject

Go to a project
Toggle navigation Toggle navigation pinning
김태영
07f8cfcb 1 parent 53b3121a

add temp image file & request image address by ajax

Inline Side-by-side
Showing 6 changed files with 115 additions and 51 deletions
...@@ -3,7 +3,18 @@ var router = express.Router(); ...@@ -3,7 +3,18 @@ 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 + console.log(id);
15 + //보내주기.
16 + res.send(data);
17 +});
18 +
19 +module.exports = router;
20 +
......
...@@ -7,66 +7,119 @@ ...@@ -7,66 +7,119 @@
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"));
52 } 59 }
60 + }
61 +
62 + async function loop() {
63 + webcam.update(); // update the webcam frame
64 + await predict();
65 + window.requestAnimationFrame(loop);
66 + }
53 67
54 - async function loop() { 68 + // run the webcam image through the image model
55 - webcam.update(); // update the webcam frame 69 + async function predict() {
56 - await predict(); 70 + // predict can take in an image, video or canvas html element
57 - window.requestAnimationFrame(loop); 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;
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;
58 } 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;
98 + }
99 +
100 + //이전 결과와 다를떄만 ajax요청
101 + //last_result_predict는 전역변수. 초기값 -999로 설정되어있다.
102 + //이것 없으면 계속 요청이 보내진다.
103 + if(last_result_predict!=predict_id){
59 104
60 - // run the webcam image through the image model 105 + //ajax로 서버에 그 id에 해당하는 이미지주소를 달라고 요청한다.
61 - async function predict() { 106 + if(predict_id > 0){
62 - // predict can take in an image, video or canvas html element 107 + //last_result_predict값을 지금 결과로 나옴 predict로 초기화해준다.
63 - const prediction = await model.predict(webcam.canvas); 108 + last_result_predict = predict_id;
64 - for (let i = 0; i < maxPredictions; i++) { 109 + $(function() {
65 - const classPrediction = 110 + $.ajax({
66 - prediction[i].className + ": " + prediction[i].probability.toFixed(2); 111 + type: 'GET',
67 - labelContainer.childNodes[i].innerHTML = classPrediction; 112 + datatype:'json',
68 - } 113 + url: '/data?id='+predict_id,
114 + success: function(result) {
115 + //결과값 확인
116 + console.log(result);
117 + }
118 + });
119 + })
120 + }
69 } 121 }
122 + }
70 </script> 123 </script>
71 - </body>
72 -</html>
...\ No newline at end of file ...\ No newline at end of file
124 + </body>
125 +</html>
......