tarunnsingh / morph-client

Client Side Script for FaceMorphing WebApp

Face Morphing (Client Side Script) - See Server Side Here.

Project Demo 🤓

What is Morphing? 🤔

The face morphing algorithm morphs between faces using a common set of feature points, placed by hand on each face. To morph between two faces, you need to warp both faces to a common shape so they can be blended together.

About this Client Side Repo 🧐

This will run only when you are up and running the server.

Uses:

1. FilePond: FilePond provides a smooth UX for uploading and kind of files. A wrapper built for ReactJS makes our job easy.
2. Material UI: Provides easy styling functionalities to React components.

Requirements:

• Nodejs: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

• Docker: Download Docker and Docker Compose is an open platform for developing, shipping, and running applications. For Windows and Mac, it's recommended to get the Docker Desktop app.

  • Docker Engine Version: v19.03.8

Run Locally: 🚀

1. [Important] Before running this client side script, make sure you have started your server succesfully. Check Steps in the SERVER repo.
2. Now clone this repo to any other location than that of the server.
3. If in the Server Side steps you changes the PORT number then update it in package.json -> PROXY. Otherwise leave it as is.
4. Install dependecies with npm install.
5. Run the script with npm start.
6. Go to ```http://localhost:3000" in browse to test the project.

Run using Docker. 🚀

1. Go to the root folder of the project.
2. Build the Docker image with this command: docker build -t morph-client .
3. Once it finishes building, run the following command to start docker run -itd -p [appPort]:[containerPortToExpose] morph-client:latest.

• Note: the appPort is the one where the application would be listening to, and the containerPortToExpose is the one that would be visible outside the container. Eg: 3000:3000

Contribute

Check and put up Issues and let me know the features which you wish to add before making a PR.

Leave a ⭐ if you found this helpful.

morph-client's Issues

Display a Nice Spinner/Loading Animation

- When tapped on the Download Button , the following text and Spinner shows up.

Add some interesting animation/spinner/changing-text etc. in it's place.

Crop images before Uploading

Problem:

Currently we always upload images with the same dimensions already. See HERE. This means we need to resize/crop images to be of the same size. This is actually the requirement for the server to correctly output the morph.

Solution:

The requirement is to make a feature in React which provides functionality to the user to crop images. And once cropped they can be uploaded.

Suggestion Using DOKA.JS which has built-in integration with filepond. See Here

Before asking the issue to be assigned, I would be glad to discuss your approach. 😄

Make a Docker Container

Problem

Currently this repo combined with the server repo, together are required to build the project. The Flask server and the React frontend need to be built under a single image, anyhow? Has this been NodeJs, it would be super easy to do. Moreover if you suggest to host both repos separately, then I am receiving problems with DLIB while trying to deploy this Flask Server on Heroku.

Is it possible to combine both using Docker.

If yes, any help would be appreciated.