Pokemon Shiny Customizer

Project Description

The idea behind this project was to use unsupervised learning tools to identify parts of an image that share similar colors. Based on this concept, we can identify the different areas within an image and label them, making it possible to later modify an entire layer with a single click.

This project features a responsive design, ensuring proper display on both mobile devices and desktop computers.

Technologies Used

This project is divided into two main parts: Backend and Frontend.

For the Backend, I created a Python script using various libraries, including Scikit-learn, a machine learning library. With the help of this library, I applied unsupervised learning algorithms such as KNN or K-means.
Using this algorithm, and processing the image pixels in HSL (Hue, Saturation, Luminosity) scale, the image is labeled with its different color regions to facilitate editing from the Frontend.

Here’s an example of the labels generated for a single image:

Once the algorithm has been executed, the results are stored in a database (in this case, I used Neon, which allows easy deployment of PostgreSQL databases in the cloud) so they can be later queried from the Frontend.

For the Frontend, I integrated the project into my portfolio website, which is built with Astro.
In this case, I had to use Server Side Rendering to retrieve the database records when the project loads, display the image, and apply the labels computed by the Python algorithm.

The core logic of the Frontend consists of selecting a color and clicking on a region of the image.
Upon clicking, the label for that pixel is checked, and the selected color tone is applied to all pixels belonging to the same color region.

Below are a few examples of what can be achieved with just a few clicks:

---