Cartoonify

About 💬

A Web application deployed using Railway that uses Python, Flask, SQLAlchemy, SQLite or Postgres Database to handle user authentication and manage a database of uploaded images. The application features a login and registration page, and allows users to upload and cartoonify images. The use of Python and relevant libraries enables efficient and secure handling of user authentication and image management.

Link: https://softengcartoonify-production.up.railway.app/login

Contents 📃

• Cartoonify
  • About 💬
    • Link: https://softengcartoonify-production.up.railway.app/login
  • Contents 📃
  • Features 🌟
  • Tools Used 🔧
  • Repository File Structure 📁
  • Flowchart 💹
  • Use Case Diagram 📈
  • Database Schema
  • Application Demo 🎞️
  • How to run the Application ❓
  • Tests ⌨️
  • Deployment 💻
• Todo 📑
• License 📃

Features 🌟

• Frontend UI with HTML, CSS and Javascript
• Backend with Python and Flask
• Registration of users to a database (either SQLite or PostgreSQL).
• Login for authenticated users.
• Validation of user details.
• Image upload for logged-in users.
• Cartoonify process of uploaded image.
• Display uploaded image and cartoonified image to logged in user.
• Creation of a user folder for storing uploaded images.
• Deletion of the user folder upon logout to free up space.

Tools Used 🔧

• Python
• Flask
• SQLAlchemy
• HTML
• CSS
• Oauth
• Javascript
• Postgres
• SQLite
• Docker

Repository File Structure 📁

├── LICENSE
├── README.md
├── requirements.txt
└── src
    ├── app.py # Main application module
    ├── docker-compose.yml
    ├── Dockerfile
    ├── frontend # Frontend files
    │   ├── display_image.html
    │   ├── error.html
    │   ├── home.html
    │   ├── register_and_login.html
    │   └── static # Folder for static files
    │       ├── logo.png
    │       ├── script.js
    │       └── style.css
    ├── home.py # Module for handling homepage
    ├── index.py # For indexing
    ├── login.py # Module for handling user login
    ├── logout.py # Module for handling user logout
    ├── model.onnx # Model responsible for cartoonifying the image
    ├── models.py # Module for handling user models
    ├── register.py # Module for handling user registration
    ├── requirements.txt # Requirements file
    ├── static # Folder for storing uploaded user images
    │   └── placeholder
    └── utils.py # Utility functions for cartoonifying images

Flowchart 💹

Explanation:

• The flowchart starts at the "Start" node (A).
• The next node is the "Register User" operation (B).
• After the user is registered, the "Login" operation (C) is performed.
• A condition is checked to see if the login was successful (D).
  • If the login was successful, the "Check User Details" operation (E) is performed.
  • If the login was not successful, the flowchart goes back to the "Login" operation (C).
• The user's details are checked to see if they are valid (F).
  • If the details are valid, the flowchart goes to the "Home" end node (G).
  • If the details are not valid, the flowchart goes back to the "Login" operation (C).
• From the "Home" node (G), the user can either upload an image or log out of the application.
  • If the user chooses to upload an image, the "Create User Folder" operation (H) is performed, followed by the "Upload Image" operation (I). The "Cartoonify Image" operation (J) is then performed, followed by the "Display Images" operation (K) to show the uploaded and cartoonified images to the user.
  • If the user chooses to log out, the "Logout" operation (L) is performed and the "Delete User Folder" operation (M) is performed. The flowchart then goes back to the "Start" node (A).

Use Case Diagram 📈

Packages and Model Schema

Database Schema

Database Example Image

Application Demo 🎞️

Cartoonify.Demo.mp4

How to run the Application ❓

How to Run the application locally.

To run the application locally do the following:

1. Clone this repository to your local machine

2. Make sure you have python installed. Visit this link for more information on how to install python to your system.

3. Install the required libraries using pip: pip install -r requirements.txt

4. Create a file called .env in the root directory of your project. Put the necessary environment variables in this file

   • THIS IS JUST FOR TESTING. Once everything is tested and ready to deploy, you'll move these to environment variables.
   • ADD THIS FILE(.env) TO THE .gitignore so you're not putting your environment keys publicly on github!

The environment variables needed are listed below

POSTGRES=
SQLITE=
SECRET_KEY=
DATABASE_MODE=
PORT=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_DISCOVERY_URL=https://accounts.google.com/.well-known/openid-configuration
DEBUG=True

Note: If **DATABASE_MODE** is set to **postgres**, a postgres database will be used else an sqlite database will be used.

1. If you choose to use a local sqlite database make sure to initialize the database first by doing the following from your terminal

• Change the directory

cd src

• Run python

python init_db.py

• A local sqlite database named database.db will be created.

2. Test your changes locally by running python app.py from the src folder of this project. Once this is done you can go to 127.0.0.1:5000 to see the application running.

Running on Local Machine with Docker Compose

You can also run the application in a docker container using docker compose(if you have it installed)

1. Clone the repository:

git clone https://github.com/Nneji123/SoftEngCartoonify.git

2. Change the directory:

cd SoftEngCartoonify
cd src

3. Edit the Dockerfile file and add the keys directly instead of running from the environment

Example:

ENV POSTGRES postgresql://postgres:password@url:port/railway
ENV SQLITE sqlite:///../database.db
ENV SECRET_KEY secret_key 
ENV DATABASE_MODE sqlite
ENV PORT 5000

The above is just an example.

4. Run the docker compose command

docker compose up -d --build 

And then the application should be running on 127.0.0.1:5000

Running in a Gitpod Cloud Environment

Click the button below to start a new development environment:

Tests ⌨️

Test Application

To test the API functions do the following:

1. Clone the repository:

git clone https://github.com/Nneji123/SoftEngCartoonify.git

2. Change the working directory and install the requirements and pytest:

cd SoftEngCartoonify
cd src
pip install -r requirements.txt

3. Move to the tests folder and run the tests

pip install pytest
pytest tests

Performing Load Tests with Locust

1. Make sure the application is running already from the above steps.
2. Install locust:

pip install locust

3. Run locust tests

  cd tests
  locust -f load_test.py

4. Set the number of IP's and address and then run the load tests

Locust Test Images

Deployment 💻

Deploy the Application to Railway

Click the button below to deploy the application to railway

If deploy fails, change the root directory to src in the railway application settings page as shown in the image below:

Todo 📑

• Handle Error Popups
• Update Documentation
• Add support with Docker
• Update Readme.
• Update tests.
• Deploy application to the web.
• Added support for Google Email Authentication

License 📃

MIT