About

This web application was built off of a previous project I made with python and the Numpy library for editing images. The initial focus of the python project was to create a set of functions that could apply convolution effects to images, along with performing other image editing operations using only the linear algebra tools provided in the Numpy library.

After this was completed, I thought that it would be a good idea to use these functions in a web application, which would allow on-demand manipulation of images. Since python is a language that can also build APIs for the web, I figured this would be a good challenge to not only learn about convolution and machine learning but also about web development in python.

Development Process

Initially, I thought using Django would be a good choice, but it turned out to be more complicated than necessary. So, I instead opted to make a Flask application. The syntax and API were straightforward to understand, so converting the python application into an API was a relatively easy task.The Frontend was created in React.js. The main challenges which arose from the front end were state management and sending data to the API. In the end, it turned out that encapsulating most of the state management in one component made the most sense in the project, and other data was passed down to components using the context API. Sending data to the server was done with the fetch API as the Axios library was having some issues converting the response data into a BLOB (Binary Large Object).

Usage

It is fairly straightforward to use the application, however, some knowledge of machine learning and image processing is necessary to get desired results. Otherwise, the application is also useful for applying interesting effects to images. Matrices of 2x2 to 7x7 can be used for convolution or filtering (filtering in this context is simply multiplying every NxN section of an image with an NxN matrix and converting the result to a new image, it is an experimental function I designed). The original image is stored in the browser's memory and can be reverted at any time.

As of right now, only PNG and JPEG images are accepted. and only images <10MB. Below is a demo of the application in use.

COBY DEMO.mp4

Some Fun Uses + Cool Visual Effects

Screen Shot 2022-05-29 at 8.29.34 PM.png