wolfteinter / pic2hubble Goto Github PK

This project is intended to produce images composed of 16x16 pixel clusters of space images mostly from by Hubble Space Telescope. The algorithm is written in Python using Flask which returns the base 64 image, and the frontend is developed in React JS.

License: MIT License

HTML 5.57% CSS 4.70% JavaScript 45.27% Procfile 0.09% Python 44.37%

algorithms astronomical-images graph-algorithms image-generation image-processing python

pic2hubble's Introduction

Pic2Hubble

Some examples:

Approaches

Algorithm v1

Save as a CSV file the average color per channel of all the images of the dataset.
Import the data from the CSV into a Pandas DataFrame.
Iterate over the input image with a slicing window of 16x16, calculate the average color per channel in the window and find the the element k nearset in DataFrame.
1. Select a random image from the k images.
2. Replace the window using the choosen astro mini photo.

Algorithm v2

Save the average color of all the images in the dataset and save them in a CSV file.
Import the data from the CSV into a Pandas DataFrame.
Graph is generated, from color interval (0, 0, 0) to (step, step, step), where the step can be [3, 5, 15, 17, 51, 85], and then for each color channel, the interval is increased with by step value and the same process is continued for each color interval until the color reaches (255, 255, 255) and for each color interval a search is performed to find the 3 closest images based on the mean color over the Dataframe.
Iterate over the input image with a slicing window of 16x16, calculate the average color per channel in the window and then search the replacing image on the graph using DFS.
1. Select a random image from the images available.
2. Replace the slice for the image.

Setup frontend

npm install
npm start

Setup backend

Requeriments

virtualenv

Create virtual env

virtualenv .venv --python=python3.8

Activate virtual env

source .venv/bin/activate

Install dependencies

pip install -r requirements.txt

Add the next variables on .venv/bin/activate

export FLASK_APP="entrypoint:app"
export FLASK_ENV="development"
export APP_SETTINGS_MODULE="api.config.default"

Activate virtual env

source .venv/bin/activate

Run the flask app

flask run

Deactivate virtual env

deactivate

Additional notes

If you are using a Linux distro and get the error: [Errno 24] Too many open files you can use the next command to increase, temporally, the limit of open files.

ulimit -n 4096

Contribute

Feel free to open/help with issues. Fork the repo, create a branch from dev branch, work your changes and open a Pull Request.

pic2hubble's People

Contributors

Stargazers

Watchers

Forkers

samyosm

pic2hubble's Issues

Restart state of front-end when an image has been processed

It's necessary a button to return to home after the user has downloaded the generated image.

Optimize generation of images

Currently, it's necessary to compute every input image in less than 30 seconds in order to avoid the error of time out on production server in Heroku.

Image preview is showing distorted images

It could be great to show the image preview keeping its aspect ratio for a better user experiencie.

Cannot change the image

When an image is selected it cannot be changed, possible solutions could be a button on the image to delete the current image and be able to select other images.

Show error messages on front

The API return some errors messages when something wrong happened. example, bad request error 400 due to no valid file.

It's necessary inform the user about this type of validation fails.

A cool favicon is missing 🐤

Convert the current logo to .ico file, and replace public/favicon.ico

Improve README

It could be cool to:
- Add snapshots of the web app working
- Separate README for front-end
- Add info about how to contribute to the project

PoC to host app using an alternative to Heroku

Error 503 is happening for images that are heavy or large

Bug

Sometimes 503 error happens because of disconnect by Heroku server when an image last more than 30 seconds to be processed. Sometimes is due to a bad internet connection in combination with relatively heavy images (for example: 3-4 MB).

Possible solutions

Resize large input images, for example when the image has a dim more than 3000 px.
Process the image in stages, the division of the images it could be made in the client.
Compress input images that are more than 2.5 MB.

Use 12x12 or 14x14 windows for low resolution images

In order to generate better composed images, I mean to reduce the pixelation effect, it could use kernels with a lower size, for example 12x12 or 14x14 pixels when the input image is less than 800 for the max dimension.

Note: An alternative is to resize the input image to a greater baseline-resolution.

Add Repo Link

Add link to the Git repo on GitHub on the front-end in order to invite to contribute

Insufficient color palets or just and algorythm?

Hello guys! First of all I want to congratulate you for the progress in the app, it is a really good practice for those who are interested in image analysis and pattern recognition.
Making a few attempts trying different kind of images I notice that in clear colors or in a white-bassed paletts the colors are limited. I know that is because ths most part of the base dataset are taked in outerspace-based pictures, so that have a lot of sense that the pictures and the algorythm recognice dark-based colors and the same have some confussion in white-bassed colors.

But, beside that I notice that actually the colors in the first interpretation are the corrects in the most part of the image. I have two questions: the first one is what kind of technique are you using to "classificate" the color pathern?

And the other one is about the dataset, do you normalize the potential pixel areas? I mean, do you have a default chromatic scale to translate the area of the picture to the "most near classification colour"?

I think that the both are really good aspects that you can consider for next improves. Anywho is a really good app and hope to see how this improves.

Cheers!

Make the edge between the dataset images more soft

The idea i have is make a gaussian blur in the image on the edge of the separation between the dataset images, as intended, the general idea is made an easy algorithm to apply a gaussian blur each 16~ pixels that is the size of dataset images.
The idea born when the images that are generated have rough edges between each others like this:

The general idea to apply the gaussian blur

I made a manually edit of a image on photoshop making a gaussian blur between images, taking 2 pixels of radius of each image an apply a gaussian blur of 1 radius pixel, like i shows here, where the orange cells represents the pixels that i applied the filter

And here is the difference between the original and the filtered

Original

Filtered

The edges of the images clearly seems more smooth, and in large scale i think it seems good