Pokemon Shiny Customizer
Descripción del proyecto
La idea de este proyecto era utilizar herramientas de aprendizaje no supervisado, para identificar las partes de una imagen que tienen colores similares. Con esta premisa, podemos identificar las distintas partes de una imagen y etiquetarla, para posteriormente poder cambiar toda esa capa con un solo click.
Este proyecto tiene un diseño responsive, por lo que se puede visualizar correctamente tanto en dispositivos móviles como en ordenadores.
Tecnologías involucradas
Este proyecto se distingue en 2 partes: Backend y Frontend.
Para la parte del Backend, he creado un script de Python con distintas librerías, entre ellas Scikit-learn, una librería de machine learning. Con la ayuda de esta librería, he aplicado algoritmos de aprendizaje no supervisado conocidos como KNN o K-means. Con este algoritmo, y usando los píxeles de la imagen en escala HSL (Hue, Saturity, Luminosity), se etiqueta la imagen con los distintos colores que tiene para poder facilitar al Frontend la tarea de edición.
Un ejemplo de las etiquetas que se generan en una imagen son las siguientes:
Una vez se realiza el algoritmo, se guardan los resultados en una Base de Datos (en este caso he utilizado Neon, que permite desplegar en la nube fácilmente una Base de Datos PostgreSQL) para que puedan posteriormente ser consultados en el Frontend.
Para la parte del Frontend he integrado el proyecto en la propia página web de mi portfolio, que está implementado en Astro. En este caso he tenido que usar el Server Side Rendering para poder, al entrar al proyecto, leer los datos de BBDD y mostrar la imagen y utilizar el etiquetado calculado por el algoritmo de Python.
La lógica del Front consiste en seleccionar un color y hacer click en una de las partes de la imagen. Al hacer click, se comprueba qué etiqueta tiene ese píxel y aplica un cambio del tono de color por el seleccionado a todos los píxeles que pertenecen a esa misma región de color.
A continuación se muestran algunos ejemplos de lo que se puede llegar a hacer con unos pocos clicks:
