FiBei Face Swap

This is a website that utilizes artificial intelligence that swaps faces on the video based on the given image.

Missing in the restructured repository

1. No faceswap service.
2. No UI.
3. No data cleaning in backend.

Usage

Note

This does not contain bootstrap and bootstrap-icons.

Via Docker

Prerequisites

1. GitHub Codespaces or local Docker.
2. Download .env files and database from FiBei Face Swap env.
3. Get the login credentials from FiBei Face Swap creds.

• Turn on: docker compose up -d
• Turn off: docker compose down
• Rebuild: docker compose up -d --no-deps --build

Port numbers

• Frontend: 3000
• Backend: 5000
• MySQL: 3306
• phpMyAdmin: 8080

Important

When running on GitHub Codespaces, make the ports public so that CORS error won't happen when signing in.

Via XAMPP

Prerequisites

1. Node.js
2. XAMPP
3. Python
4. Get the login credentials from FiBei Face Swap creds.

Setup dependencies

1. Pull the repository.
2. Download .env files and database from FiBei Face Swap env.
3. cd frontend
4. npm install
5. cd ..
6. cd backend
7. npm install

Setup MySQL Database

1. Run XAMPP.
2. Start Apache and MySQL.
3. Open browser and enter "localhost" it should open XAMPP panel on browser.
4. Click phpMyAdmin.
5. Create database. Name it as "fibei_users".
6. Drag fibei_users.sql onto the database to generate table.

Run the website

1. Run XAMPP.
2. Start Apache and MySQL.
3. Open new terminal.
4. cd backend
5. npm run dev
6. Open new terminal.
7. cd frontend
8. npm start

Architecture

Model-View-Controller (MVC)

Programming Stack

1. Express JS
2. React JS
3. HTML
4. CSS
5. Python
6. Python Flask for AI service