Solving Block Image Puzzle with neural networks (WebApp Solution)

Source: Deep Learning on Medium

Solving Block Image Puzzle with neural networks (WebApp Solution)

What you need

  • You need a block image puzzle and a solution image to use this demo.
  • The shuffle image will be used as training data
  • The solution image will be used a test data
Pass a block image puzzle of size 3×3 to 10×10 and let neural networks (AutoEncoder) solve it

How it works

  • The solution image will split into the blocks the same as provided into shuffle image
  • The neural networks will be developed to find the closest block from the training data to match with solution block
  • The resultset will be the ordered list of the block from training images to solve the puzzle
  • Using the order list of the block, the final solution image is generated from the blocks of shuffle image

Video Walkthrough:

Image Processing to rearrange problem and solution images

  • The user enters both source puzzle image and the solution images
  • The user also select the size of the puzzle between 3×3 to 10×10
  • Both images are resized to be square and size is in the multiple puzzle size times 100. For example, if your puzzle size is 5×5 then both images height and width will be 500
  • Next step is to extract image blocks of size 100×100 from both source and solution images and saved to disk
  • Solution images are considered as test images stored with trainimg prefix and problem images are saved with testimg prefix as training images.

Creating Training and Test Dataset

  • We read the shuffle problem image as training data and break into 100×100 images and save it into the disk


  • We also read the target solution image as test data and break into 100×100 blocks as save it also to disk


  • After both training and test images of size 100×100 are generated, the next step is to load training and test image data into memory for model building


Building Deep Learning Model

  • To build the model we select the following first as configuration
  • Model Type : SimpleAE | convAE | VGG19
  • epochs — the Total number of times the training process will be conducted, VGG19 requires no epochs.
  • Each model type you select has a fixed required to read the training and test data. So after you select the model type you will have to transform the input training and test data to meet the model type requirements.


  • Now we start the batch process bypassing the model configuration, training image data, and epochs


  • Once the model is ready now we need to pass training and test data to generate the model embeddings


  • To build the KNN model will pass the number of neighbors and distance metrics along with flattened training image data


Generating results image map

  • After the KNN model is ready we pass the solution puzzle images (flattened test data) to generate the image map sequence


  • The final mapping sequence is sent to the image processing function which rearranges the shuffle image blocks based on the final image map.


Get the Full Source Code:

To run the source code you just need:

$ streamlit run