readme.md

팀 소개

사진	팀원명	역할	깃허브	이메일
	김범준	Front-end
	박시창	Back-end

프로젝트 설명

기능 설계

😷사용시나리오 마스크쓰고 신원등록자의 신원인식 1

기능	설명
	신원확인
	입력확인

😎사용시나리오 마스크쓰고 신원등록자의 신원인식 2

기능	설명
	신원확인
	입력확인

👿사용시나리오 마스크쓰고 신원불명의 신원인식

기능	설명
	신원확인
	입력확인

서비스 플로우

불스아이즈 기대효과

초계병들의 업무부담 감소와 보안 강화

• 실시간 얼굴인식 기능으로 초계병들의 업무부담 감소 및 보안 강화
• 마스크를 써 육안으로 확인하기 힘든 사람의 신원정보 확인 가능
• 출입기록 데이터로 효율적인 관리대장 관리

기존에 있는 카메라 장치에 적용할 수 있는 높은 확장성

• 기존에 있는 카메라 장치에 적용하여 비용 감소
• 장치에 소프트웨어를 설치하여 사용 가능한 높은 확장성

보안사고 발생시 즉각적인 피드백

• 신원 미확인 자로 인식이 되면 관리자가 바로 확인 가능
• 보안사고 발생 시 출입기록을 확인하여 즉각적인 조치 가능

불스아이즈의 장점

전반적인 개발문서의 구체적 표현성

• 프로젝트의 issues 들로 Features를 Back-end 와 Front-end로 생성하여 개발문서 정리
• Release 로 한눈에 버전 확인 가능
• 개발중의 Bugs 들도 Issues 에 기입됨

데모 결과에 대한 시현 능숙도 및 원활한 작품

• 얼굴인식이 원활하게 되고 신원인식시스템이 잘 작동하게 구현되어짐
• 테이블의 필터 기능을 제공하여 체계적인 관리가 가능

독창성 유무

• 실시간으로 마스크를 쓴 사람 얼굴을 인식하여 신원확인 가능
• 출입기록 데이터로 효율적인 인원관리 가능
• 보안사고 발생 시 즉각적인 대처 가능

비즈니스에 대한 발전 가능성

• 누구나 쉽게 서비스를 관리할 수 있도록 페이지 구축
• 오픈소스로 이루어진 프로그램으로 서비스 구축 비용 절감
• 기존에 있는 카메라에 소프트웨어를 설치하여 편리하게 서비스 사용가능
• 중요한 기관에 서비스를 적용하여 초계병들의 부담을 낮춰 업무 효율성 증가

공개SW 기여도

팀 역할 분배와 수행에서 팀워크

• Front-end와 Back-end로 역할을 분배하여 효과적으로 개발
• Git-flow를 사용하여 우선순위 높은 작업부터 하나씩 선택하여 작업을 나눠가져 개발
• 문제가 발생했을 때 원활한 의사소통으로 빠르게 해결

컴퓨터 구성 / 필수 조건 안내 (Prerequisites)

접속 가능한 브라우저

• 권장: Google Chrome 버젼 77 이상

다커 엔진 혹은 다커 데스크탑 필요

• 64-bit processor with Second Level Address Translation (SLAT)
• 4GB system RAM
• BIOS-level hardware virtualization support must be enabled in the BIOS settings. For more information, see Virtualization.

기술 스택 (Technique Used)

설치 안내 (Installation Process)

STEP 1 불스아이즈 클론하기

$ git clone git@github.com:osamhack2021/AI_WEB_Bullseyes_Bullseyes.git
#Clone From Github

STEP 2 Front 모듈 설치폴더로 이동하기

$ cd AI_WEB_Bullseyes_Bullseyes/AI\(FE\)/web-admin
#Changing directory to web-admin folder"

STEP 3 Front 모듈 설치하기 node.js 설치확인, 미설치시 node js 설치 부탁드립니다.

$ npm install
#Installing libs for Frontend"

STEP 4 모델 설치하기

[Model의 개발자는 https://github.com/SamYuen101234/Masked_Face_Recognition 입니다.]

• 밑 URL 에서 모델을 다운받아주십시오.
• https://drive.google.com/file/d/1DsMV1R5eqwHiVgfujlCa4NSpqmk-ecor/view?usp=sharing 그리고 클론된 AI_WEB_Bullseyes_Bullseyes/AI(BE)/bullseyes 에 넣어주시면 됩니다.

프로젝트 사용법 (Getting Started)

STEP 1 Docker-compose 시작하기

$ docker-compose up
#Create docker compose for Django Backend, React Frontend, Postgre SQL "
# 에러 발생시 Ctrl + C 누르고 다시 docker-compose up 하시면 됩니다!
# DockerCompose 에서 Dependency가 안지켜질때 에러가 납니다.

STEP 2 Chrome 으로 접속하기

Chrome Browser로 https://localhost:3000 접속하기

개발시간 타임라인

9.16 첫 README 작성 및 DEV

1. Stack 결정 밑 dev plan set
2. react_admin
3. django
4. model decision
5. javascript lib faceapi decision
6. features decisions
7. data visualization plan
8. First sample React admin building
9. Swagger API spec decision

10.01 다커화 및 REST API 만들기, 디자인 MOCK 만들기

1. Django Postgres react containerized
2. Rest API with Swagger API declared
3. Design Mockup complete
4. Adding Two panels for better Facial Recognition data process

10.02 DJANGO REST API 구현

1. Rest api’s model implementation with REST API django

10.03 REST API photo 업로드 기능 구현, Prettier 적용

1. Gitignore file set
2. REST API for photo uploads
3. REST api modified for better contorls for photo uploads
4. Prettier Format Applied

10.05 User Access tab 과 User Tab 통합, REST API 와 연결

1. User Access Users tab intergrated
2. Tables on react hooked to REST API

10.08 Image Upload 를 react에서 구현

1. Package.json set
2. Image upload with json rather than direct form

10.09 React Filters 구현 및 FaceAPI 연결

1. Filters added on React
2. Face Detection with FaceAPI has been intergrated to React

10.10 SideBar edit 추가로 빠른 edit 구현, 필터에 대한 버그 발견

1. Sidebar edit has been added for faster edit flow
2. Bugs on Edit have been spotted
3. Filters would not work because of backeend Filter Intergration

10.11 Face API의 서버 포스팅

1. Face API will be posting the photo once it detects

10.12 React Admin 의 테이블 두개를 한페이지에 연동하려고 했다가 실패함. 두개로 나누고, UI 업그레이드함.

1. Two tables with Face API has been separated to different tabs considering its react admin’s dataprovider only supports one table at one page
2. Theme added to improve app bar

10.13 메뉴랑 앱바 디자인 추가

1. menu appbar design to mock design added.
2. List theme added

10.14 배경과 폰트 추가

1. Background Color and fonts have been added

10.15 REST API 에 필터 추가, 신원인식 모델 서버에 구현

1. Filters intergrated with REST API
2. integrated model and data for image imbeddings from my own source to create backend’s model for recognition with face mask

10.16 JS 코드 재구성 및 REPOSITORIES 이름 수정

1. Refactor JS codes to delete unnecessary pieces of codes
2. Repositories names have been edited
3. Database Population script for demo has been added.

10.17 DEMO 와 마지막 GOAL UI 에가까운 UI 구현

1. Realtime and Video demo UI have been fixed

저작권 및 사용권 정보 (Copyleft / End User License)

• MIT

This project is licensed under the terms of the MIT license. This software uses https://github.com/SamYuen101234/Masked_Face_Recognition