The inspiration for this project came from The Big Bang Theory episode where Raj Koothrapali and Howard Wolowitz were able to use determining characteristics from a model's home (i.e., mountains and popular buildings) to find the exact location for the home and spy on the models. Of course, this project's inspiration was focused on using the features of an image (i.e., the metadata) to find the location of where any image was taken from, given the actual image, and does not aim to aid stalkers of any sort.

What it does

This web app allows anyone to upload images from places they enjoyed visiting, such as on a trip with family and friends. These images will be plotted on a map where individuals can see a story being built simply by the images they took and the path of their journey.

How we built it

Using flask for connecting the frontend and the backend, we were able to build this app. The frontend primarily consisted of rendering templates from HTML pages and providing a space where users may upload the raw photographs of which they took to remember their trips. These images are then sent to the backend where thumbnail images are generated and the metadata of each image is processed to determine the precise coordinates with which they were geotagged. These coordinates were then sent to the frontend to be displayed on a function-locked leaflet map filled with photographs and animations across geolocations.

Challenges we ran into

  • Using Python Flask to upload multiple files to the server
  • Using Leaflet.js to load a map filled with potentially limitless images
  • Ordering the Images by their appropriate date and time
  • Handling errors for images that were not geotagged Note: There were no challenges that we came across that we did not eventually fix.

Accomplishments that we're proud of

  • Having a viable project to submit
  • Publishing a Web App using Python Flask
  • Allowing for the uploading of numerous photos
  • Using Leaflet to display icons
  • Ordering the images by their appropriate date and time
  • Successfully handling errors for images that did not have enough metadata -- no crashes!

What we learned

  • Frontend development
  • How to use Python Flask
  • Connecting the frontend to the backend
  • How to use different Maps APIs and determine which one is the best for the job

What's next for Vidéo de la Mémoire

  • Convert the project into a PWA
  • Handle User Accounts
  • Render video files that can be downloadable
Share this project: