이재호

Update README.md

...@@ -27,24 +27,13 @@ ...@@ -27,24 +27,13 @@
27 <!-- PROJECT LOGO --> 27 <!-- PROJECT LOGO -->
28 <br /> 28 <br />
29 <p align="center"> 29 <p align="center">
30 - <a href="https://github.com/othneildrew/Best-README-Template"> 30 + <img src="/readme_img/camera.png" width="100" height="100">
31 - <img src="readme_img/logo.png" alt="Logo" width="80" height="80">
32 </a> 31 </a>
33 32
34 <h3 align="center">Mask-Wearing Discriminator!</h3> 33 <h3 align="center">Mask-Wearing Discriminator!</h3>
35 34
36 <p align="center"> 35 <p align="center">
37 - 구글 Teachable Machine 2.0을 이용하여 마스크 착용 검사 및 출입부 작성 기능을 제공합니다. 36 + 웹캠을 이용한 실시간 마스크 착용 판별 및 출입부 작성 기능을 제공합니다.
38 - <br />
39 - <!--여기 뭐 넣을지 생각해보자-->
40 - <a href="http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject"><strong>Explore the docs »</strong></a>
41 - <br />
42 - <br />
43 - <a href="https://teachablemachine.withgoogle.com">Teachable Machine 2.0</a>
44 - ·
45 - <a href="https://www.w3schools.com/">W3schools</a>
46 - ·
47 - <a href="http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/issues">Request Feature</a>
48 </p> 37 </p>
49 </p> 38 </p>
50 39
...@@ -52,7 +41,7 @@ ...@@ -52,7 +41,7 @@
52 41
53 <!-- TABLE OF CONTENTS --> 42 <!-- TABLE OF CONTENTS -->
54 <details open="open"> 43 <details open="open">
55 - <summary>Table of Contents</summary> 44 + <summary>Contents</summary>
56 <ol> 45 <ol>
57 <li> 46 <li>
58 <a href="#about-the-project">About The Project</a> 47 <a href="#about-the-project">About The Project</a>
...@@ -63,8 +52,8 @@ ...@@ -63,8 +52,8 @@
63 <li> 52 <li>
64 <a href="#getting-started">Getting Started</a> 53 <a href="#getting-started">Getting Started</a>
65 <ul> 54 <ul>
66 - <li><a href="#prerequisites">Prerequisites</a></li> 55 + <li><a href="#prerequisites">Installation</a></li>
67 - <li><a href="#installation">Installation</a></li> 56 + <li><a href="#installation">Initial setting</a></li>
68 </ul> 57 </ul>
69 </li> 58 </li>
70 <li><a href="#usage">Usage</a></li> 59 <li><a href="#usage">Usage</a></li>
...@@ -74,7 +63,6 @@ ...@@ -74,7 +63,6 @@
74 <li><a href="#reference">Reference</a></li> 63 <li><a href="#reference">Reference</a></li>
75 <li><a href="#license">License</a></li> 64 <li><a href="#license">License</a></li>
76 <li><a href="#contact">Contact</a></li> 65 <li><a href="#contact">Contact</a></li>
77 - <li><a href="#acknowledgements">Acknowledgements</a></li>
78 </ol> 66 </ol>
79 </details> 67 </details>
80 68
...@@ -93,13 +81,13 @@ Teachable Machine 2.0을 이용해 마스크 착용을 유형별로 학습시킨 ...@@ -93,13 +81,13 @@ Teachable Machine 2.0을 이용해 마스크 착용을 유형별로 학습시킨
93 81
94 82
95 ### Built With 83 ### Built With
96 -
97 * [Bootstrap](https://getbootstrap.com) 84 * [Bootstrap](https://getbootstrap.com)
98 * [JQuery](https://jquery.com) 85 * [JQuery](https://jquery.com)
99 * [Nodejs](https://nodejs.org) 86 * [Nodejs](https://nodejs.org)
100 - [express](https://github.com/expressjs/express) 87 - [express](https://github.com/expressjs/express)
101 - [ejs](https://github.com/mde/ejs) 88 - [ejs](https://github.com/mde/ejs)
102 * [Teachable Machine](https://teachablemachine.withgoogle.com) 89 * [Teachable Machine](https://teachablemachine.withgoogle.com)
90 +* [Kakao TTS API](https://developers.kakao.com/docs/latest/ko/voice/common)
103 91
104 92
105 93
...@@ -109,65 +97,73 @@ Teachable Machine 2.0을 이용해 마스크 착용을 유형별로 학습시킨 ...@@ -109,65 +97,73 @@ Teachable Machine 2.0을 이용해 마스크 착용을 유형별로 학습시킨
109 97
110 ### Installation 98 ### Installation
111 99
112 -1. Clone the repo 100 +1. Repository Clone 하기
113 ```sh 101 ```sh
114 git clone http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject.git 102 git clone http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject.git
115 ``` 103 ```
116 -2. Install NPM packages 104 +2. NPM 패키지 설치하기
117 ```sh 105 ```sh
118 npm install 106 npm install
119 ``` 107 ```
120 -3. Enter your API in `index.ejs` 108 +3. `index.ejs`에 API 넣기
121 ```JS 109 ```JS
122 - const URL = 'ENTER YOUR Teachable Machine Model Url'; 110 + const URL = 'Teachable Machine 모델의 Url을 입력';
123 ``` 111 ```
124 -4. Start Server in npm located. 112 +4. NPM을 이용해 서버 시작하기
125 ```sh 113 ```sh
126 npm start 114 npm start
127 ``` 115 ```
128 ### Initial setting 116 ### Initial setting
129 1. Main page 접속<br> 117 1. Main page 접속<br>
130 - 1.1 https://localhost:3000을 통해 Main page에 접속합니다.<br><br> 118 + 1.1 https://localhost:3000 으로 Main page에 접속합니다.<br><br>
131 2. 카메라 허용<br> 119 2. 카메라 허용<br>
132 - 2.1 카메라 허용 메시지가 표시되면 허용을 선택합니다.<br><br> 120 + 2.1 카메라 권한 요청 메시지가 표시되면 허용을 선택합니다.<br><br>
133 121
134 <!-- USAGE EXAMPLES --> 122 <!-- USAGE EXAMPLES -->
135 ## Usage 123 ## Usage
136 <!-- 사진 순서별로 정렬할 수 있도록. --> 124 <!-- 사진 순서별로 정렬할 수 있도록. -->
137 -[![Product Name Screen Shot][product-screenshot1]]()<br><br> 125 +사용하는 장소를 입력해 준다.<br>
138 -[![Product Name Screen Shot][product-screenshot2]]()<br><br> 126 +<img src="/readme_img/1.png"><br><br>
139 -[![Product Name Screen Shot][product-screenshot3]]()<br><br> 127 +
140 1. 마스크 착용 판별 기능<br> 128 1. 마스크 착용 판별 기능<br>
141 1.1. 카메라 정면을 바라보고 서있는다. <br> 129 1.1. 카메라 정면을 바라보고 서있는다. <br>
142 1.2. 마스크 착용 여부에 따라 영상 출력부 우측의 이미지가 변하고 소리가 출력된다.<br> 130 1.2. 마스크 착용 여부에 따라 영상 출력부 우측의 이미지가 변하고 소리가 출력된다.<br>
143 -<br> 131 + * 정상 착용 예시<br>
132 + <img src="/readme_img/정상.jpg"><br><br>
133 + * 불량 착용 예시<br>
134 + <img src="/readme_img/불량.jpg"><br><br>
135 +
144 2. 출입내역 기록 기능<br> 136 2. 출입내역 기록 기능<br>
145 2.1. 처음 페이지에 접속하여 출입내역을 작성할 곳의 위치를 입력한다.<br> 137 2.1. 처음 페이지에 접속하여 출입내역을 작성할 곳의 위치를 입력한다.<br>
146 2.2. 건물에 출입하는 인원들은 캠 앞에서서 이름, 전화번호, 신분을 선택하고 제출을 누른다.<br/> 138 2.2. 건물에 출입하는 인원들은 캠 앞에서서 이름, 전화번호, 신분을 선택하고 제출을 누른다.<br/>
147 2.3. 이때 마스크를 착용하지 않았다면 작성한 내용을 제출이 불가능하다.<br><br> 139 2.3. 이때 마스크를 착용하지 않았다면 작성한 내용을 제출이 불가능하다.<br><br>
140 + * 인적 사항 입력란<br>
141 + <img src="/readme_img/인적사항.jpg"><br><br>
142 +
148 3. 출입내역 저장 기능<br> 143 3. 출입내역 저장 기능<br>
149 3.1 지금까지 기록한 내용들을 '저장' 버튼을 눌러 파일을 생성한다.<br> 144 3.1 지금까지 기록한 내용들을 '저장' 버튼을 눌러 파일을 생성한다.<br>
150 3.2 생성한 파일을 '다운로드'를 통해 로컬에 저장한다.<br><br> 145 3.2 생성한 파일을 '다운로드'를 통해 로컬에 저장한다.<br><br>
151 - 146 + * 다운로드 예시<br>
147 + <img src="/readme_img/다운로드.jpg"><br><br>
152 148
153 149
154 150
155 <!-- ROADMAP --> 151 <!-- ROADMAP -->
156 ## Roadmap 152 ## Roadmap
157 153
158 -See the [open issues](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/issues) for a list of proposed features (and known issues). 154 +제안된 기능 및 발견된 오류는 목록은 [Issues](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/issues) 를 참조하십시오.
159 155
160 156
161 157
162 <!-- PRECAUTION --> 158 <!-- PRECAUTION -->
163 -## Precautions 159 +## Precaution
164 -아래 주의사항에 유의하여 사용해주세요.<br> 160 +아래 주의사항에 유의해 사용해 주세요. <br>
165 **1. 마스크 착용 여부 판별에 웹캠의 실시간 영상 데이터를 사용. 브라우저의 웹캠 접근 권한 허용 필수. 웹캠 없이도 출입자 인적사항 기록은 가능하나 마스크 착용 여부 판별은 불가.**<br> 161 **1. 마스크 착용 여부 판별에 웹캠의 실시간 영상 데이터를 사용. 브라우저의 웹캠 접근 권한 허용 필수. 웹캠 없이도 출입자 인적사항 기록은 가능하나 마스크 착용 여부 판별은 불가.**<br>
166 **2. 인터넷 브라우저별로 json 및 txt 파일 생성 방법이 달라 Internet Explorer에서는 출입자 인적사항 기록은 가능하나 저장은 불가**<br> 162 **2. 인터넷 브라우저별로 json 및 txt 파일 생성 방법이 달라 Internet Explorer에서는 출입자 인적사항 기록은 가능하나 저장은 불가**<br>
167 **3. Internet Explorer에서 대화 상자(Prompt)의 출력 방식이 Chrome 과는 달라 대화 상자 출력 불가. 따라서 초기에 위치 입력이 불가**<br> 163 **3. Internet Explorer에서 대화 상자(Prompt)의 출력 방식이 Chrome 과는 달라 대화 상자 출력 불가. 따라서 초기에 위치 입력이 불가**<br>
168 **4. 출입자 인적사항을 기록한 파일을 다운로드 시 반드시 로컬의 Download 폴더에 저장됨. 저장 경로 변경 불가.**<br> 164 **4. 출입자 인적사항을 기록한 파일을 다운로드 시 반드시 로컬의 Download 폴더에 저장됨. 저장 경로 변경 불가.**<br>
169 **5. 웹캠 앞에서의 재빠른 움직임은 마스크 착용 여부를 정확히 판별하지 못할 수 있음.**<br> 165 **5. 웹캠 앞에서의 재빠른 움직임은 마스크 착용 여부를 정확히 판별하지 못할 수 있음.**<br>
170 - 166 +**6. 크롬 브라우저의 특성상 첫 음성 출력에 소요되는 시간이 지연될 수 있음.**<br>
171 167
172 <!-- CONTRIBUTING --> 168 <!-- CONTRIBUTING -->
173 ## Contributing 169 ## Contributing
...@@ -191,6 +187,8 @@ See the [open issues](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/issues ...@@ -191,6 +187,8 @@ See the [open issues](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/issues
191 · 187 ·
192 <a href="https://devdocs.io/node/">Node.js</a> 188 <a href="https://devdocs.io/node/">Node.js</a>
193 189
190 +<a href="https://developers.kakao.com/docs/latest/ko/voice/common">Kakao TTS API</a>
191 +
194 192
195 <!-- LICENSE --> 193 <!-- LICENSE -->
196 ## License 194 ## License
...@@ -202,47 +200,12 @@ GPL-v3.0 라이센스를 적용합니다. 자세한 정보는 [License][license- ...@@ -202,47 +200,12 @@ GPL-v3.0 라이센스를 적용합니다. 자세한 정보는 [License][license-
202 200
203 <!-- CONTACT --> 201 <!-- CONTACT -->
204 ## Contact 202 ## Contact
205 -Taeyoung Kim - rlaxodud9809@khu.ac.kr<br> 203 +[Taeyoung Kim] rlaxodud9809@khu.ac.kr<br>
206 -Jaeho Lee - dlwogh9344@khu.ac.kr 204 +[Jaeho Lee] dlwogh9344@khu.ac.kr<br>
207 205
208 206
209 Project Link: [http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject) 207 Project Link: [http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject](http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject)
210 208
211 209
212 210
213 -<!-- ACKNOWLEDGEMENTS -->
214 -<!--## Acknowledgements
215 -* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
216 -* [Img Shields](https://shields.io)
217 -* [Choose an Open Source License](https://choosealicense.com)
218 -* [GitHub Pages](https://pages.github.com)
219 -* [Animate.css](https://daneden.github.io/animate.css)
220 -* [Loaders.css](https://connoratherton.com/loaders)
221 -* [Slick Carousel](https://kenwheeler.github.io/slick)
222 -* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
223 -* [Sticky Kit](http://leafo.net/sticky-kit)
224 -* [JVectorMap](http://jvectormap.com)
225 -* [Font Awesome](https://fontawesome.com)-->
226 -
227 -
228 -
229 -
230 -
231 -<!-- MARKDOWN LINKS & IMAGES -->
232 -<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
233 -<!--[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
234 -[contributors-url]: http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/graphs/master/contributors
235 -[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
236 -[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
237 -[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
238 -[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
239 -[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
240 -[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
241 -[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
242 -[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
243 -[linkedin-url]: https://linkedin.com/in/othneildrew -->
244 -
245 [license-url]: http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/blob/master/LICENSE.txt 211 [license-url]: http://khuhub.khu.ac.kr/MWD/2020-02-OSS-TermProject/blob/master/LICENSE.txt
...\ No newline at end of file ...\ No newline at end of file
246 -[product-screenshot1]: ./readme_img/1.png
247 -[product-screenshot2]: ./readme_img/2.png
248 -[product-screenshot3]: ./readme_img/3.png
......