SpotDifference

SpotDifference is a tool that automatically generates fun, challenging “spot the difference” puzzles from any image you upload. Then, the user has to spot all the differences in the two images.

Comment 1

Inspiration

So first my idea was to create a word search solver or some puzzle-related solver. However, I saw some people online had already created this. Then, I thought of other puzzles and came across Spot the Difference. That is what led me to make an automatic Spot the Difference maker.

What it does

The goal of Spot the Difference is you are given 2 images, and you have to spot the difference between the images. Each time you click on the difference, it will reveal it. Since this is a Spot the Difference maker, you can upload any photo, and the program will automatically create the 2nd image with up to 5 differences.

How we built it

I built it entirely in HTML/JS/CSS I researched image processing techniques such as the Sobel Edge Filter and used it to find objects in the image by using Flood Fill. Then after finding 5 moderately sized objects, I applied 1 of 3 mutations to each.

  1. Removal - This removes the object and replaces it with another object
  2. Hue Change - This slightly changes color of the object
  3. Flip - This flips the object horizontally.

Challenges we ran into

Some challenges were making the object detection, as it was very laggy for large images. Some fixes were to resize the image to make it faster. Also, sometimes, the mutations that the objects went through made it very obvious that there was a difference there, so I had to tweak a lot of hyperparameters to make it less obvious.

Accomplishments that we're proud of

In under 24 hours, we created a fully functional website that fully runs locally, hosted on Github Pages. The website is fun to use and works as expected.

What we learned

I learned many image processing techniques like the Sobel Edge Filtering, Flood Fill algorithm, and the JS 2dCanvas

What's next for SpotDifference

We can incorporate AI into SpotDifference to have a better way to add differences in the image. Right now, the program is only using simple pixel editing, which has a lot of flaws. Some differences are very obvious as the pixel editing is not context-aware. With AI we can generate realistic differences that are context-aware.

Share this project:

Updates