Inspiration

As math students for most of our lives, we’ve often struggled with not fully understanding a formula or an example problem given by a teacher in class. This can lead to frustration and a feeling of being lost. We wanted to solve this problem by providing students with a more engaging way to visualize math problems and formulas, allowing for a deeper understanding through animated representations.

What it does

Project Montgomery transforms a simple math problem into an animation video using the Manim library in Python (developed by the famous YouTuber 3Blue1Brown) and Google Gemini to help math students better visualize the problem that they are given. Users can input what to be displayed and be able to see the changes happening to the equations in real time.

How we built it

We built the frontend using the Next.JS framework and Chakra UI, allowing users to input math problems through text and visualize them easily.

The backend is powered by Python and the Manim library, which processes the math problem inputs, generates animations, and delivers them back to the frontend for display. The backend also includes a scraper tool developed to gather documentation from the official Manim community website. To do the actual animation generation, we send input prompts from the frontend to the backend, where Google generative AI writes Manim scripts to generate the .mp4 animations.

Challenges we ran into

One challenge we ran into was downloading dependencies needed for the project. This occurred for the scraper tool we developed to gather documentation from the official Manim community website, but also getting Manim to install and run on different devices.

On top of this, we struggled to manage dependencies mainly in Manim and our AI tools due to the multitude of frameworks and libraries. The differences of these between our devices further created issues along with compatibility problems.

Accomplishments that we're proud of

We’re proud of having developed a tool that can bring abstract math concepts to life in such a visually engaging way. One of our biggest achievements was successfully integrating Manim with our backend, allowing real-time input from users to be turned into animated outputs. Later on into the hackathon, we were able to have our AI memorize previous prompting, making for a more comprehensive animation.

It was hard to correctly download the libraries for our different devices, and connecting the front end to the backend was not very clear. We solved these issues by searching for help online and watching youtube setup tutorials, respectively.

What we learned

We effectively learned the Manim library and fed documentation to Google Gemini for animation generation. We also learned newer web development technologies like NextJS and ChakraUI, as well as FastAPI for a python backend.

As mentioned above, we struggle with dependency management which led to a lot of trouble shooting, especially for Gemini. We were, however, able to fix this with containerization, namely through Docker which provided a more uniform environment for us despite our different operating systems. All together, we learned a lot about the importance of dependency management.

What's next for Project Montgomery

We plan to optimize Project Montgomery’s speed in generating more complex prompts of equations by using Groq. Instead of prompting Gemini API, we will prompt Groq.

Furthermore, we intend to integrate this with Learned Management Systems (such as Canvas) which would allow instructors to show their thought process more clearly for problems. We further had the plan of potentially adding in an analytic feature that would allow instructors to view data on how their students interacted with the animation. This can, for example, can be used to find out where students are struggling the most in (e,g by showing at what point the animation is paused the most).

Built With

Share this project:

Updates