The TemPad Timeline

All that was and all that could be in the Marvel Cinematic Universe.

Comment

The TemPad Timeline

💡 Inspiration

After spending an hour trying to explain the events of the last 24 Marvel movies to my friend, I realised that the Marvel Cinematic Universe can be really confusing for new fans! That’s why I built the TemPad Timeline - a recreation of the TemPad device used by the Time Variance Authority, as seen in the “Loki” series.

🚀 What it does

Shows all that was, all that is and all that could be in the MCU.

  • Shows all released Marvel movies in chronological order
  • Provides a summary of a movie when selected by the user
  • True to theme, the front-end design is heavily inspired by the retro screen of TemPad, shown here.

…But that’s not all. If you’re a major Marvel fan who already knows the timeline by heart, the TemPad Timeline also shows you what might have happened in a a different universe.

  • Click the “Overthrow the Time Keepers” button to generate alternate timelines
  • Brief prompts of ‘nexus events’ (deviations from original events of the movies) are shown

🛠️ How we built it

The front-end is built using React.js. The movie poster images were taken from this article and a sepia filter was applied to create a retro look.

The back-end is written in Python. I didn’t want to complicate my local codebase with a different language or another framework, so I hosted the backend on Google Cloud Functions.

  • Function 1 takes a URL and uses Beautiful Soup to web scrape the summary of a movie from the MCU Fan Wiki.

  • Function 2 selects a random sentence from the movie summary and generates the beginning of a story using natural language processing. This story prompt is sent back as the summary for the ‘nexus event’ created when the user presses “Overthrow the Time Keepers”. The pre-trained model is based on GPT-2 and is available here at HuggingFace.

🥺 Challenges we ran into

  1. Connecting the front-end to the back-end on Google Cloud Functions. I had no prior experience with Google Cloud Functions, so it took longer than I thought to correctly deploy the back-end. Determining how to correctly access the GET request parameters and overcome CORS errors was certainly a frustrating process.
  2. I had to experiment with different methods to generate a new ‘alternative timeline nexus event’. Originally, I planned to use Google Cloud’s AutoML to extract entities (e.g. names of superheroes, locations) then replace those entities with other random entities. For example, swapping out the Person entity in the sentence “Tony Stark was in Afghanistan…” could produce the alternative sentence “Pepper Potts was in Afghanistan…”. However, I realised I didn’t have time to learn to use AutoML within the time limit, so I ended up looking at story generation with pre-trained NLP transformers.


🏆 Accomplishments that we're proud of / What I learned

  • Designing the TemPad timeline made my inner Marvel fan extremely happy. :D
  • The timeline graphics and the sidebar are split into different components, and I refreshed my knowledge on lifting state up and passing props down so they could communicate.
  • I learned to use Google Cloud Functions and connect them to locally hosted front-end applications. Specifically, I learned about CORS errors and how to fix them.
  • I learned a little more about how NLP transformers like GPT-2 work, and got to use one IRL.
  • I experimented with CSS animations to add some motion effects to the “Overthrow” button and make the main timeline change colours throughout.

🔮 What's next for TemPad: MCU Timeline

  • I want to improve the movie summary loading time. There is a noticeable delay in communication from the backend. Perhaps I will look into caching summaries to reduce waiting time.
  • I want to fine-tune the GPT-2 model for generating alternative timelines. I read a useful article about how the model used here works - I could recreate the model and modify it to make it more specific to the MCU.
  • Given more time, I could animate the alternative timelines growing out of the main branch to make it look cooler.
Share this project:

Updates