김태영

Merge branch 'feature/css' into 'master'

Feature/css

pull request.
css 적용. 틀만 만들었기 때문에 병합할때 id, name, class등 맞춰줘야함.

See merge request !4
1 body { 1 body {
2 - padding: 50px; 2 + padding-top: 5px;
3 + padding-bottom: 20px;
3 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 } 5 }
5 6
6 a { 7 a {
7 color: #00B7FF; 8 color: #00B7FF;
8 } 9 }
10 +
11 +/* 헤더 */
12 +header{
13 + height:70px;
14 + background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
15 + -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
16 + box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
17 +}
18 +
19 +.header_name{
20 + margin: 15px;
21 + margin-left : 30px;
22 + float: left;
23 + font-size: 30px ;
24 + color: white;
25 +}
26 +
27 +/* footer */
28 +footer{
29 + padding: 40px 0;
30 + color: #999;
31 + text-align: center;
32 + background-color: #f9f9f9;
33 + border-top: 1px solid #e5e5e5;
34 +}
35 +
36 +/* 메인 div를 나누기 위한 것. */
37 +.box1{
38 + float: left;
39 + width: 550px;
40 + padding:10px;
41 + margin:10px;
42 +}
43 +
44 +.box2{
45 + display: inline-block;
46 + width: 35%;
47 + padding:10px;
48 + margin:10px;
49 + margin-left: 30px;
50 +
51 +}
52 +
53 +/* box2안의 이미지와 입력폼에 관한 css */
54 +.alert_image{
55 + width:100%;
56 +}
57 +
58 +.col-lg-6{
59 + margin-top: 10px;
60 + width:100%
61 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,7 +14,7 @@ router.get('/data', function(req, res, next){ ...@@ -14,7 +14,7 @@ router.get('/data', function(req, res, next){
14 14
15 data = { 15 data = {
16 image : "/images/"+id+".jpg", 16 image : "/images/"+id+".jpg",
17 - audio : "/audio/"+id+".mp3" 17 + audio : "/audio"+id+".mp3"
18 } 18 }
19 //데이터 확인 19 //데이터 확인
20 console.log(data); 20 console.log(data);
......
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <title><%= title %></title> 4 <title><%= title %></title>
5 +
6 + <!-- Bootstrap -->
7 + <!-- 합쳐지고 최소화된 최신 CSS -->
8 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
5 <link rel='stylesheet' href='/stylesheets/style.css' /> 9 <link rel='stylesheet' href='/stylesheets/style.css' />
10 +<<<<<<< HEAD
11 +=======
6 <!-- Jquery 불러온다 --> 12 <!-- Jquery 불러온다 -->
7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 13 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
8 <script> 14 <script>
...@@ -55,44 +61,68 @@ ...@@ -55,44 +61,68 @@
55 document.getElementById('link').setAttribute('download', fileName); // 다운로드 전 파일 이름을 변경해준다. 61 document.getElementById('link').setAttribute('download', fileName); // 다운로드 전 파일 이름을 변경해준다.
56 }; 62 };
57 </script> 63 </script>
64 +>>>>>>> 915eacfc5f4f474bf100af252cf05cd2b665fe4f
58 </head> 65 </head>
59 <body> 66 <body>
60 - <h1><%= title %></h1> 67 + <!-- header -->
61 - <p>Welcome to <%= title %></p> 68 + <header>
62 - <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 --> 69 + <p class="header_name">MWD</p>
63 - 70 + </header>
64 - <div>Teachable Machine Image Model</div> 71 +
65 - <button type="button" onclick="init()">Start</button> 72 + <!-- main contents -->
66 - <div id="webcam-container"></div> 73 + <div class="container" style="margin-top: 30px">
67 - <div id="label-container"></div> 74 + <div class="box1">
68 - <div id="check_image"> 75 + <div id="webcam-container"></div>
69 - <img src="/images/1.jpg"> 76 + <div id="label-container" ></div>
77 + </div>
78 + <div class="box2">
79 + <div id="check_image">
80 + <img class="alert_image" src="/images/1.jpg">
81 + </div>
82 +
83 + <!-- 인풋 폼 나중에 합치기 -->
84 + <div class="col-lg-6">
85 + <form>
86 + <legend>방문자 인적 사항</legend>
87 + <p>이름: <input class="form-control" type='text' id='name' placeholder="고길동">
88 + </p>
89 + <p>전화번호: <input class="form-control" type='text' id='number' placeholder="010-1234-1234" ></input></p>
90 + <p>신분:
91 + <select id = "identity" class="form-control">
92 + <option value = "재학생">재학생</option>
93 + <option value = "휴학생">휴학생</option>
94 + <option value = "직원">직원</option>
95 + <option value = "외부인">외부인</option>
96 + </select>
97 + </p>
98 + <p>
99 + <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 = "다시입력"/>
100 + <button type = "button" onclick="getInfo();" style="float:right; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); border: 0; " class="btn btn-success">제출</button>
101 + </p>
102 + <button type="button" onclick="save();">저장</button>
103 + <a href="#" id="link" download="name">다운로드</a>
104 + </form>
105 + </div>
106 + <!-- 인풋 폼 종료 -->
107 + </div>
70 </div> 108 </div>
71 - <div id = "check_audio"> 109 + <span id = "check_audio">
72 <!--초기값으로 '시작'이라는 음성을 사용 --> 110 <!--초기값으로 '시작'이라는 음성을 사용 -->
73 <!--auto play 기능을 위해 iframe 사용 --> 111 <!--auto play 기능을 위해 iframe 사용 -->
74 <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe> 112 <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
75 - </div> 113 +<<<<<<< HEAD
76 - <form> 114 + </span>
77 - <fieldset style = "width:600px"> 115 + <!-- footer -->
78 - <legend>방문자 인적 사항</legend> 116 + <footer>
79 - 이름: 117 + <p>Mask-Wearing Discriminate Program Using Teachable Machine 2.0</p>
80 - <input type='text' id='name' style="width:70px" required/>&nbsp; 118 + <p>Using teachable machine 2.0 provided by Google, a model was created that learned the type of mask wearing.</p>
81 - 전화번호: 119 + <p>2017103978김태영 20174015이재호</p>
82 - <input type='text' id='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp; 120 + <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>
83 - <div style="display:inline">신분:</div> 121 + </footer>
84 - <select id = "identity" style="width: 50;"> 122 +
85 - <option value = "재학생">재학생</option> 123 +
86 - <option value = "휴학생">휴학생</option> 124 + <!--https://teachablemachine.withgoogle.com/ 를 통해 학습시키고 얻은 스켈레톤 코드 -->
87 - <option value = "직원">직원</option> 125 +
88 - <option value = "외부인">외부인</option>
89 - </select><br><br>
90 - <button type="button" onclick="getInfo();">제출</button>
91 - <input type = "reset" value = "다시입력"/>
92 - </fieldset>
93 - </form>
94 - <button type="button" onclick="save();">저장</button>
95 - <a href="#" id="link" download="name">다운로드</a>
96 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 126 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
97 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script> 127 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
98 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 128 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
...@@ -109,7 +139,7 @@ ...@@ -109,7 +139,7 @@
109 var last_result_predict=-999; 139 var last_result_predict=-999;
110 140
111 // Load the image model and setup the webcam 141 // Load the image model and setup the webcam
112 - async function init() { 142 + window.onload = async function init() {
113 const modelURL = URL + "model.json"; 143 const modelURL = URL + "model.json";
114 const metadataURL = URL + "metadata.json"; 144 const metadataURL = URL + "metadata.json";
115 145
...@@ -122,7 +152,7 @@ ...@@ -122,7 +152,7 @@
122 152
123 // Convenience function to setup a webcam 153 // Convenience function to setup a webcam
124 const flip = true; // whether to flip the webcam 154 const flip = true; // whether to flip the webcam
125 - webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip 155 + webcam = new tmImage.Webcam(550, 550, flip); // width, height, flip
126 await webcam.setup(); // request access to the webcam 156 await webcam.setup(); // request access to the webcam
127 await webcam.play(); 157 await webcam.play();
128 window.requestAnimationFrame(loop); 158 window.requestAnimationFrame(loop);
...@@ -180,7 +210,7 @@ ...@@ -180,7 +210,7 @@
180 210
181 //ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다. 211 //ajax로 서버에 그 id에 해당하는 이미지의 주소와 음성파일을 달라고 요청한다.
182 if(predict_id > 0){ 212 if(predict_id > 0){
183 - //last_result_predict값을 지금 결과로 나 predict로 초기화해준다. 213 + //last_result_predict값을 지금 결과로 나 predict로 초기화해준다.
184 last_result_predict = predict_id; 214 last_result_predict = predict_id;
185 $(function() { 215 $(function() {
186 $.ajax({ 216 $.ajax({
...@@ -206,7 +236,7 @@ ...@@ -206,7 +236,7 @@
206 var audio = json_data.audio; 236 var audio = json_data.audio;
207 var audioName = ""; 237 var audioName = "";
208 //이미지 태그 생성 238 //이미지 태그 생성
209 - strDOM += '<img src="'+images+'">'; 239 + strDOM += '<img class="alert_image" src="'+images+'">';
210 //오디오 태그 생성 240 //오디오 태그 생성
211 audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>'; 241 audioName += '<iframe src="' + audio + '" allow="autoplay" id="audio" style="display:none"></iframe>';
212 //#cehck_image div의 이미지 교체 242 //#cehck_image div의 이미지 교체
......