Weird Museum is a responsive web where you can bring images to life. There is a couple of famous paintings you can choose and you can create realistic face swaps based on the target painting by just taking a short video clip.
✨ See our website! ✨
- Frontend : React
- API Server : Flask
- Deep learning : Pytorch, Colab
- Middleware : Gunicorn
- Web Server : Nginx
- Deployment: Docker, NHN Cloud, GCP(Cloud SQL, GCS bucket)
- Database: PostgreSQL
- API Test : Postman
- API Documentation : Swagger
- Version Control : Git, Github, GitKraken
➡️ Why do we choose these tech stacks for this project?
| Frontend | Backend | etc |
|---|---|---|
    |
    |
         |
- Create a face swap video
- Save result video and share it at gallery page categorized by hashtag
$ git clone https://github.com/Dayflt/Silicon-Valley-Internship-Dayfly.git
- Install packages
$ cd Frontend
$ npm i
- Download vox-cpk.pth.tar here and add it inside Docker\Backend\web\AI\ directory after changing its name with mraa.tar
$ docker-compose up --build # build images and run containers
$ docker-compose down # stop running containers
$ docker-compose up # rerun containers
or
$ docker-compose down -v # stop running containers and delete its volume
- See database
$ docker-compose exec postgres_db psql --username=postgres --dbname=video
(psql)
video=# \l #list all databases
video=# \dt #list all tables in the current database
video=# select * from video_info; #list all data of video_info table
- Running
http://localhost:5000 # Flask application
http://localhost:5000/swagger # Swagger
http://localhost:3000 # React application
-
Check whether 80 and 443 ports are open
-
Modify configuration
- Change domains and email addresses in init-letsencrypt.sh
- Replace all occurrences of weirdmuseum.ml with your domain (ex: server_name museum.ml -> server_name 'your domain')
- Run the init script to obtain SSL Certificates and Credentials (./certbot directory will be created)
$ chmod +x ./init-letsencrypt.sh # Make it executable
$ ./init-letsencrypt.sh # Run the init script
- Check the status of your service
$ docker ps # See running containers
- Once you obtain SSL Certificates and Credentials, use the commands below to run, stop or rerun the containers.
$ docker-compose -f docker-compose.prod.yml up --build
$ docker-compose down #stop running containers
$ docker- compose -f docker-compose.prod.yml up # rerun containers
or
$ docker-compose down # stop running containers and delete its volume
- Running (based on our domain)
https://museum.ml # Nginx
$ docker ps # See running containers
$ docker ps -a # See all containers
$ docker-compose logs [service_name] # Check the service logs
$ docker images # See all built images
$ docker-compose rm -f $(docker ps -a -q) # Remove all containers
$ docker volume ls # See volumes
$ docker images prune # Remove untagged(none) images
$ docker network prune # Remove all unused network
$ docker volume prune # Remove all unused local volume
├── README.md - 리드미 파일
│
├── Backend/ - 백엔드 플라스크 디렉토리
│ ├── test_endpoints.py - unit test 실행 파일
│ ├── run.py - Flask 실행 위한 파일
│ ├── views.py - SQLAlchamy의 기능을 정의한 파일
│ ├── .flaskenv - Flask 실행을 위한 환경변수 설정 파일
│ ├── dayfly-318913-a4b443321e00.json - Google Cloud Bucket에 접근하기 위한 권한 정보가 담긴 파일
│ ├── requirements.txt - 모듈들을 정리한 파일
│ └── web/
│ ├── AI/ - AI모델 알고리즘
│ ├── data/result/ - 백엔드 동영상 임시 저장 디렉토리
│ ├── __init__.py - 실행시키려는 flask app이 정의되어있는 파일 프로젝트를 실행시키면 app을 구동시킴
│ ├── config.py - 필수 configuration 사항들이 정의된 파일
│ ├── gcp.py - google cloud bucket을 이용해 파일 입출력 스트림을 다루기 위한 함수가 정의된 파일
│ ├── models.py - video_table이라는 database class가 정의된 파일
│ ├── prdedictmix.py - AI 모델을 적용해서 서비스의 핵심인 섞인 영상 생성을 하기 위한 파일
│ ├── routes.py - API 명세서가 모두 정의된 파일
│ ├── views.py - database ORM 정의 파일
│ └── static/
│ └── swagger.json - swagger 정의 파일
│
├── Frontend/
│ ├── Dockerfile - 프론트앤드 도커파일
│ ├── public/
│ │ ├──index.html - React 프로젝트 표시(favicon, title설정)
│ │ └── logo.ico - 웹페이지 favicon
│ ├── package.json & package.lock.json - 라이브러리 관리 파일
│ └── src/
│ ├── index.js & index.css - React 프로젝트 파일
│ ├── App.js & App.css - page component들 관리 파일
│ ├── App.test.js & setupTest.js
│ ├── reportWebVitals.js
│ ├── api.jsx - baseURL 설정
│ └── page/
│ ├── css / - 컴포넌트들의 css
│ ├── imgs / - 컴포넌트들의 image
│ ├── Gallery.js - 갤러리 페이지
│ ├── Home.js - 메인 페이지
│ ├── Preview.js - Preview 페이지
│ ├── Record.js - 웹캠 페이지
│ ├── Result.js - 결과물 페이지
│ ├── Selection.js - 사진 선택 페이지
│ └── components/
│ └── Modal.js - 결과물의 정보 입력 팝업창
│
├── Nginx/
│ ├── Dockerfile - nginx 도커파일
│ └── nginx.conf - nginx 설정파일
│
├── Settings/ - 환경변수 설정 파일
│ ├── dev/
│ │ └── .env.dev - 개발환경변수 설정 파일
│ └── prod/
│ └── .env.prod - 배포환경변수 설정 파일
├── docker-compose.yml - 개발용 docker-compose파일
├── docker-compose.prod.yml - 배포용 docker-compose파일
├── init-letsencrypt.sh - SSL인증서 발급받기 위한 과정을 자동화시킨 스크립트파일
└── .gitignore | 김서연 | 방근영 | 이지혜 | 장현우 | 김하은 |
|---|---|---|---|---|
| @ksy991018 | @banggu0321 | @penguin1109 | @aswooo | @harloxx |
| Project Manager,DevOps | Front-end Developer | AI, Back-end Developer | Front-end Developer | AI, Backend-Developer |