atb00ker / face-paint

Mintbean November 2021 Hackathon

Face Paint

Face paint is the new online free open-source tool to draw over images. It's extremely easy to use, just make an account and get started.

Build for the purposes of Mintbean hackathon.

Table of Contents

1. Features
2. Setup
   • Configurations
   • Development
3. Deployment

Features

Face paint is the new online free open-source tool to draw over images, we have the following features:

1. Size and color Customization Do not restrict yourself with a given color, use the entire RGB spectrum to find the perfect color and size your brush for the job.

2. Unlimited projects Work on multiple projects at once, just upload the image and create a canvas for your project.

3. Free. Secure. Easy. We do not sell your data, we do not charge you a dime. We just give you an easy to use online tool and let you design.

Setup

The following section discusses how to setup Face paint in your system.

Configurations

Create a copy of the .env.example file and rename it to .env. Now, we can manipulate the following variables to configure the application. You can find example values in the .env.example file itself.

Key	Description
DB_USER	PostgreSQL User
DB_PASS	PostgreSQL Password
DB_NAME	Database Table Name
DB_PORT	Database Port
DB_HOST	Database Host/Domain
DJANGO_SECRET_KEY	Secret key used by Django as Salt
DJANGO_ALLOWED_HOSTS	Hosts allowed to make request to API
DJANGO_CORS_ALLOWED_ORIGINS	Whitelistesd Hosts for CORS
REACT_APP_PORT	Port on which react tries to find the application
DEBUG	Application Shows detailed logs when set to True

Prerequisites

• python
• pip
• mpm | yarn
• docker
• docker-compose

Setup Steps

• Create a copy of the .env.example file and rename it to .env.
• Install react dependencies: npm install
• Install django dependencies: pip install -r requirements.txt
• Run the react application: npm run react
• Start dependent services: npm run docker-dev
• Prepare database: npm run makemigrations; npm run migrate
• On a different terminal, start server: npm run server

Licenses

• The open-source libraries used have their own seperate licenses. Most of them are under MIT license. Please check the license for python dependencies' licenses and react dependencies' licenses before using the project for your purposes.

face-paint's Issues

Add basic documentation

[bug] Unexpect username included in all responses

Expected:

[{"id":"a13fdeb7-64dc-4da6-9c1b-4faa3e0d0953","image_path":"https://thispersondoesnotexist.com/image", "drawings": "<json>"}]

Actual:

[{"id":"a13fdeb7-64dc-4da6-9c1b-4faa3e0d0953","image_path":"https://thispersondoesnotexist.com/image","username":"admin"}]

Integrated Frontend & Backend together

[feature] Create a landing page

• Create logo
• Create landing page

[feature] show user canvas list on dashboard

[feature] Add Dashboard add canvas feature

Canvas Server

Make all these endpoints for canvas app on django.

GET /api/v1/image/ <- all images
POST /api/v1/image/ <- create a new image
GET /api/v1/image/<uuid>/ <- specific image
POST /api/v1/image/<uuid>/ <- save specific image

Explore the django `MEDIA_ROOT` concept

EEEEEE... this will work but there is a concept of a MEDIA_ROOT and media folder, please explore that!

Originally posted by @atb00ker in #21 (comment)

[bug] Details page returning list with one object

Details page should only return 1 object.

Endpoint: http://localhost:8000/api/v1/image/a13fdeb7-64dc-4da6-9c1b-4faa3e0d0953

Expected:

{"id":"a13fdeb7-64dc-4da6-9c1b-4faa3e0d0953","image_path":"https://thispersondoesnotexist.com/image","username":"admin"}

Actual:

[{"id":"a13fdeb7-64dc-4da6-9c1b-4faa3e0d0953","image_path":"https://thispersondoesnotexist.com/image","username":"admin"}]

Notice [ and ] in the response!

[api] use postgres database to store json data

use postgres database and save drawing data in json format, in Canvas.

Install problem. psycopg2 is missing from dependencies list

When you add a new dependency. You have to add it in requirements.txt
psycopg2 is missing. Please add it.

[api improvement] keep one migration file

canvas app in django has three migration files:

• merge them into one.
• give it more descriptive name

#11 (comment)

Using postgres database out of the box

[docker] create Dockerfile

[feature] Add Editor page POC