diff --git a/Audio1.mp3 b/Audio1.mp3 new file mode 100644 index 0000000..cac60a0 Binary files /dev/null and b/Audio1.mp3 differ diff --git a/Audio2.m4a b/Audio2.m4a new file mode 100644 index 0000000..762ce74 Binary files /dev/null and b/Audio2.m4a differ diff --git a/Audio3.m4a b/Audio3.m4a new file mode 100644 index 0000000..5902403 Binary files /dev/null and b/Audio3.m4a differ diff --git a/README.md b/README.md index 1aac10c..f885613 100644 --- a/README.md +++ b/README.md @@ -1 +1,72 @@ -# HUSK \ No newline at end of file + +# 상명대학교 AI프로그래밍 경진대회 + +### HUSK팀 (2021.05.01 ~ 2021.05.31) + +**2021년 1학기 SW-PBL 프로그램** + +------------------- + +**구성원** +| 이름 | 역할 | 책임 | +| :---------------------------------------------------------: | :----------------------------: | :-------------------------------------------------------: | +| [Sudy009(조정현)](https://github.com/Sudy009) | 팀장 👑 | about 페이지 구현 및 구글링&자료수집 | +| [kimseongeun1212(김성은)](https://github.com/kimseongeun201910782) | 부원 👑 | 전체적인 프로젝트 구현 및 관리담당 | +| [02010800jaeheonLee(이재헌)](https://github.com/202010800jaeheonLee) | 부원 👑 | 전체적인 UI 구현보조 및 코드 분석 | +| [chajunkyu(차준규)](https://github.com/202010823) | 부원 👑 | 코드 분석 및 구글링&자료수집 | + +------------------- + +**프로젝트 설명** +별도의 마스크 인식 기계 없이 마스크를 썼는지 안썼는지 또는 코,턱스크를 썼는지 +확인해주는 웹사이트를 제작했습니다. + +프로젝트 경험을 쌓기 위해 처음 프로젝트를 해보는 2학년 학우들과 프로젝트 경험이 있는 3학년 학우 한명으로, +공부하면서 무언가를 만들어본다는 목적으로 참여하게되었습니다. + + + +------------------- + +**사용할 언어 및 프로그램** + +- **Visual Studio Code (VSC)** : HTML,CSS,Javascript 코드를 사용하기 편리 + +- **Github** : 깃헙을 사용하여 팀프로젝트 진행 + +- **Discord** : 음성, 화상 채팅과 자료저장이 모두 되는 프로그램 + +- **Teachable Machine** : 티처블 머신이라는 머신러닝을 쉽게 만들어주는 사이트에서 모델을 다운받아 사용 + +- **Javascript** : 머신러닝 모델 주 언어 - 자바스크립트 + +- **HTML/CSS** : 웹 UI 구현 + +---------------------- +**웹사이트 화면/기능 설명** + +* 웹사이트에 들어갔을 때 딱 보이는 화면입니다. +- '들어가기' 버튼을 누르기전 사이트의 간단한 소개가 나오도록 하였습니다. +![image](https://user-images.githubusercontent.com/62641359/122771906-d51f3980-d2e1-11eb-8b8b-d24a0e86af76.png) + +* 메인 화면 +- 카메라로 사람 얼굴인지를 인식한 후에 마스크 착용 여부를 체크한다. +- 마스크를 썼으면 "안전합니다" 라는 음성이 나오게 되고 +- 코스크나 턱스크를 하면 "마스크를 제대로 써주세요" 라는 음성이 나오게 되며 +- 마스크를 착용하지 않았을 경우 "마스크를 써주세요" 라는 음성이 나오게 된다. +![image](https://user-images.githubusercontent.com/62641359/122772795-b1102800-d2e2-11eb-8a5f-b4f6fdd150d4.png) +![image](https://user-images.githubusercontent.com/62641359/122772836-be2d1700-d2e2-11eb-9fdf-87270cfc9f5b.png) +![image](https://user-images.githubusercontent.com/62641359/122772874-c7b67f00-d2e2-11eb-9380-3145dfafe6df.png) +![image](https://user-images.githubusercontent.com/62641359/122772914-d00eba00-d2e2-11eb-9f13-dd67ab22851d.png) + +* ABOUT 화면 +- 프로젝트에대한 소개가 나오는 페이지 +- sw-PBL 공모전에 냈던 영상이 추가되어 나타남 +- 각 팀원들의 소개 +![image](https://user-images.githubusercontent.com/62641359/122772951-dc931280-d2e2-11eb-981b-462d5d411818.png) +![image](https://user-images.githubusercontent.com/62641359/122773017-e9176b00-d2e2-11eb-8047-2baed61eba0a.png) + + + + + diff --git a/about.css b/about.css new file mode 100644 index 0000000..2d133a2 --- /dev/null +++ b/about.css @@ -0,0 +1,174 @@ +/* 네비게이션 */ +.main-logo{ + position: absolute; + z-index:1; + float:left; + width:100px; + height: 100px; + margin-top:20px; + margin-left: 40px; + } +a{text-decoration:none; color:#000000;} + a:hover{color:#ff0000;} + + /* nav tag */ + nav ul{padding-top:10px;} /* 상단 여백 10px */ + nav ul li { + display:inline; /* 세로나열을 가로나열로 변경 */ + border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */ + + padding:0 10px; /* 각 메뉴 간격 */ + } + nav ul li:first-child{border-left:none;} + +nav{ + position: absolute; + z-index:1; + height: 50px; + padding: 20px;; + margin:0; + margin-left:140px; +} + +nav a:link, nav a:visited{ + font-family: 'Montserrat', sans-serif; + font-size: 1.3rem; + font-weight: 600; + color: #ffff;; + text-decoration: none; + text-align: center; +} +nav a:hover { + color:#bbbbbb; +} + /* Window 1 */ + #window1 { + background-image : url('about_backGround.jpg'); + background-repeat : no-repeat; + color: #ffff; + background-size: cover; + display: table; + margin-left: auto; + margin-right: auto; + align-items: center; + justify-content: center; + } + #intro { + position: absolute; + top: 50%; + height: 240px; + margin-top: -200px; + } + #intro h1 { + font-family: 'Palanquin Dark', sans-serif; + font-weight: 600; + font-size: 72px; + text-align: center; + } + h3 { + font-family: "Apple SD Gothic Neo", sans-serif; + font-weight: 400; + font-size: 24px; + color: rgb(172, 169, 169); + text-align: center; + } + /* Window2 */ + #window2 { + background: #292726; + background: -webkit-linear-gradient(to right, #3f4242, #eeeaee, #3f3e3d); + background: linear-gradient(to right, #505152, #8e7f96, #d6d3d0); + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-between; + justify-content: space-between; + display: flex; + + + } + #window2 video{ + margin-left: 10%; + } + #myself{ + margin-top: 700px; + } + #myself h1 { + font-family: "Apple SD Gothic Neo", sans-serif; + font-weight: 700; + font-size: 64px; + line-height: 1.5; + color: #fff; + margin-left: 20%; + } + #myself h2 { + font-family: "Apple SD Gothic Neo", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 1.5; + color: #fff; + margin-left:20%; + } + #portfoliosite { + text-decoration: none; + color: #7319F3; + font-weight: 600; + } + #portfoliosite:hover { + color: yellow; + } + /* Window 3 */ + #window3 { + background: #292726; + background: -webkit-linear-gradient(to right, #3f4242, #eeeaee, #3f3e3d); + background: linear-gradient(to right, #505152, #8e7f96, #d6d3d0); + color:#000000; + } + #window3 h1 { + padding-top: 1px; + font-family: 'Palanquin Dark', sans-serif; + font-weight: 400; + font-size: 70px; + line-height: 1.5; + text-align: center; + color: #eeeaee; + } + .container { + display: -webkit-flex; + display: flex; + margin-top: 50px; + width:100%; + height:100%; + } + + .hobby { + -webkit-flex: 1; + flex: 1; + text-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + } + + p{ + font-family: 'Gothic A1', sans-serif; + font-weight: 600; + font-size:30px; + } + + .sub_name{ + margin-top: 30px; + font-family: 'Gothic A1', sans-serif; + font-weight: 600; + font-size: 18px; + line-height: 1.5; + } + + .hobby_text { + margin-top: 30px; + font-family: 'Gothic A1', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 1.5; + } + + diff --git a/about.html b/about.html new file mode 100644 index 0000000..e894092 --- /dev/null +++ b/about.html @@ -0,0 +1,107 @@ + + + + + ABOUT HUSK + + + + + + + + +
+ +
+
+
    +
  • HUSK
    • +
  • ABOUT
    • +
+
+ + +
+
+
+

Hi, I'm HUSK!

+

상명대학교 2021-1 AI 경진대회 프로젝트

+
+
+ +
+ + + + +
+

휴스크 소개

+

저는 마스크 착용 여부를 알려주는 휴스크에요!
웹캠을 통해 촬영되는 영상에서 마스크 착용 여부를 인식해
정상착용, 코스크, 턱스크, 미착용을 구별해줘요!

+
+
+ +
+

Developer

+
+
+

조정현

+

상명대학교 휴먼지능정보공학전공 20학번

+

처음 참여하는 프로젝트여서
+ 모든 것이 익숙하지 않다는 어려움도 있었지만
+ 선배님의 도움과 기초 강의를 통해
+ 하나씩 차근차근 해결 할 수 있었습니다.
+ html과 css를 배우고 머신러닝을 접할 수
+ 있는 좋은 시간이였고, 직접 아이디어를 내서
+ 프로젝트를 완성하여 더욱 보람찼습니다.
+ 웹사이트 개발에 관심이 생긴 기회였습니다.

+
+
+

김성은

+

상명대학교 휴먼지능정보공학전공 19학번

+

프로젝트 처음 참여해보는 후배들과
+ 같이 하게 되면서
+ 혼자 해야하는게 많아 힘든 점도 있었지만
+ 그만큼 너무 잘 따라와주고 조금만 설명해도
+ 이해를 잘 해서 진행하는데에 어려움은 없었어요.
+ 2학년때부터 프로젝트를 해봐야겠다는 생각부터가
+ 오히려 존경스러운 부분이었고
+ 또 다른 프로젝트 경험을 쌓게되어
+ 뿌듯하고 보람찼습니다.

+
+
+

이재헌

+

상명대학교 휴먼지능정보공학전공 20학번

+

프로젝트를 하면서
+ 다양한 프로그램들을 응용하는 법을 학습하고
+ 내가 원하는 것을 만들 수 있게 된 것 같습니다.
+ 또한 강의에서 배우는 것 외에
+ 다양한 분야들을 학습하면서
+ 코딩의 역량이 더 늘어났습니다.

+
+
+ +

차준규

+

상명대학교 휴먼지능정보공학전공 20학번

+

프로젝트에 참여하는 것은 처음이라
+ 이론부터 공부해야돼서 어려움을 겪었지만
+ 기초부터 잘 알려주셔서 보다 편하게
+ 프로젝트를 진행 할 수 있었던 것 같습니다.
+ 처음해보는 프로젝트라 기억에 남을 것 같습니다.

+
+
+
+ + + +
+ + + diff --git a/about_background.jpg b/about_background.jpg new file mode 100644 index 0000000..e9efaa2 Binary files /dev/null and b/about_background.jpg differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..320fbd8 --- /dev/null +++ b/index.css @@ -0,0 +1,122 @@ +body { + font: 24px/30px 'Noto Sans CJK KR', Noto Sans KR, sans-serif + +} + +.main-background{ + background-image: linear-gradient( rgba(76, 76,76 , 0.6), rgba(76, 76, 76, 0.6) ), url("images/4472650.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 100%; + position: absolute; +} + +.main-logo{ + position: absolute; + z-index:1; + float:left; + width:100px; + height: 100px; + margin-top:20px; + margin-left: 40px; +} + +a{text-decoration:none; color:#000000;} + a:hover{color:#ff0000;} + + /* nav tag */ + nav ul{padding-top:10px;} /* 상단 여백 10px */ + nav ul li { + display:inline; /* 세로나열을 가로나열로 변경 */ + border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */ + + padding:0 10px; /* 각 메뉴 간격 */ + } + nav ul li:first-child{border-left:none;} + +nav{ + position: absolute; + z-index:1; + height: 50px; + padding: 20px;; + margin:0; + margin-left:100px; +} + +nav a:link, nav a:visited{ + font-family: 'Montserrat', sans-serif; + font-size: 1.3rem; + font-weight: 600; + color:#fff; + text-decoration: none; + text-align: center; +} + +.main_text{ + position: absolute; + z-index: 2; + top:40%; + left:10%; + font-family: 'Open Sans', sans-serif; + font-size: 50px; + color:#fff; +} + +button{ + top:48%; + width:150px; + height: 40px; + color:#000; + background: rgba(255, 255, 255, 0.7); + font-size: 20px; + font-weight: 800; + border:none; + border-radius: 20px; + box-shadow: 0 4px 16px rgba(22, 22, 22, 0.3); + transition:0.3s; + position: absolute; + left:15%; + + transform: translate(-50%,-50%); +} +button:focus { + outline:0; + +} +button:hover{ + background: rgba(0,79,255,0.9); + cursor: pointer; + box-shadow: 0 2px 4px rgba(0,79,255,0.6); +} + +.label-container{ + position: absolute; + z-index:2; + top:52%; + left:10%; + color: #fff; + font-weight: 600; + font-size: 50px; +} + +.square{ + position: absolute; + z-index: 1; + top: 130px; + left: 50%; + width: 750px; + height: 750px; + background: rgba(225, 225, 225, 0.8); +} + +.webcam-container{ + + margin-top: 150px; + margin-left: 50%; + position: relative; + z-index: 2; + float:right; + right:10%; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4396697 --- /dev/null +++ b/index.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + AI MASK CHECKING PROGRAM + + + + +
+
+ +
+
+
    +
  • HUSK
    • +
  • ABOUT
    • +
+
+ +
+
SHOW YOUR FACE
+ +
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/intro.css b/intro.css new file mode 100644 index 0000000..077ea1c --- /dev/null +++ b/intro.css @@ -0,0 +1,81 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; +} + + + +.intro_background{ + background-image: linear-gradient( rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.4) ), url("images/intro_back1.jpg"); + border: 0; + padding: 0; + min-height: 100%; + background-position: center; + background-size: cover; + position: relative; + z-index:0; + +} + +.intro_content +{ + top:30%; + left:40%; + color: aliceblue; + position: absolute; + z-index:1; + text-align: center; + justify-content: center; +} + +.intro_title{ + font-family: 'Anton', sans-serif; + font-weight: 1200; + font-size: 90px; + letter-spacing: 9px; +} + +.intro_subtitle{ + margin-top:50px; + font-family: 'Noto Sans KR', sans-serif; + font-size: 20px; +} + +.vl { + margin-top:60px; + border-left: 2.5px solid #ffff; + height: 70px; + position: absolute; + left: 50%; + margin-left: -3px; +} + +.intro_button button{ + margin-top:190px; + width:150px; + height: 40px; + color:#000; + background: rgba(255, 255, 255, 0.7); + font-size: 20px; + font-weight: 800; + border:none; + border-radius: 20px; + box-shadow: 0 4px 16px rgba(22, 22, 22, 0.3); + transition:0.3s; + position: absolute; + + transform: translate(-50%,-50%); +} +button:focus { + outline:0; + +} +button:hover{ + background: rgba(0,79,255,0.9); + cursor: pointer; + box-shadow: 0 2px 4px rgba(0,79,255,0.6); +} + + + diff --git a/intro.html b/intro.html new file mode 100644 index 0000000..eefee8d --- /dev/null +++ b/intro.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + +
+
+
+
+ H U S K +
+
+ 이 사이트는 마스크를 썼는지 안썼는지에 대한
+ 마스크 착용 유무를 인식할 수 있는 사이트입니다. +
+
+
+ +
+
+ + + + + + \ No newline at end of file