CrystalMath

Making Mathematics Visual, Intuitive, and Alive Through AI-Powered Animations

Comment

Inspiration 💡

The inspiration for CrystalMath came from the desire to make abstract mathematical concepts more tangible and engaging 🤩. Many find it challenging to visualize complex equations and transformations solely from static text and diagrams 🤯. We wanted to leverage the power of animation to bring mathematics to life ✨, making it more intuitive and enjoyable for students 🎓, educators 👩‍🏫, and enthusiasts alike. The idea was to create a tool that could bridge the gap between symbolic representation and visual understanding 🌉.

What it does 🚀

CrystalMath is a web application that transforms mathematical expressions into captivating animated visualizations 🎬. Users can input a variety of mathematical expressions (like derivatives, integrals, or functions to be plotted) through a user-friendly React frontend 💻. The application then processes this input using a Flask backend, which orchestrates the generation of a video animation using the Manim Community Edition animation engine ⚙️. The final animated video is then displayed back to the user, providing a dynamic and visual representation of the mathematical concept 📊. Optionally, these videos can be uploaded to an AWS S3 bucket for storage and sharing ☁️.

How we built it 🛠️

CrystalMath was built using a combination of modern web technologies and a powerful mathematical animation engine:

  • Frontend: We used React with Vite ⚡ to create a responsive and interactive user interface. This allows users to easily input their mathematical expressions and view the generated videos. Components were built for input forms and video display.
  • Backend: A Python Flask 🐍 server handles the core logic. It receives requests from the frontend, processes the mathematical input (potentially using libraries or APIs like Wolfram Alpha 🐺 for parsing and Anthropic for other AI-driven insights, as suggested by the API key configurations), and then interfaces with Manim.
  • Animation Engine: Manim Community Edition 🎨 is the heart of our visualization. The Flask backend prepares scripts or commands for Manim based on the user's input and predefined templates (e.g., derivative.txt, single_integral.txt). Manim then renders these into video files.
  • API Integration: The backend is designed to integrate with external APIs like Anthropic and Wolfram Alpha to enhance expression understanding and processing 🔗.
  • Cloud Storage (Optional): We incorporated AWS S3 using boto3 for storing the generated video animations, with Terraform configurations available to help set up the S3 bucket 🪣.
  • Development Environment: We utilized virtual environments for Python dependency management and npm for Node.js packages 📦.

The workflow involves the React frontend sending the user's mathematical expression to the Flask backend. The backend then prepares and executes a Manim scene to generate the animation, which is subsequently sent back to the frontend for display or uploaded to S3 🔄.

Challenges we ran into 🧗‍♀️

Building CrystalMath within the hackathon timeframe presented several challenges:

  • Manim Integration: Integrating Manim, a powerful but complex library, with a web backend was a significant hurdle 🚧. Ensuring Manim's dependencies (LaTeX, FFmpeg) were correctly configured and that it could be called programmatically by Flask required careful setup and troubleshooting.
  • Dynamic Scene Generation: Creating Manim scenes dynamically based on arbitrary user input is non-trivial 🤔. We started with templates and worked towards making the generation process more flexible.
  • API Configuration and Quotas: Setting up and managing API keys for services like Anthropic and Wolfram Alpha, and working within any potential rate limits or usage quotas, required attention to detail 🔑.
  • Frontend-Backend Communication: Ensuring smooth data flow and error handling between the React frontend and Flask backend, especially for asynchronous operations like video generation, was crucial 💬.
  • Time Constraints: As with any hackathon, managing time effectively ⏳ to deliver a functional end-to-end prototype was a constant challenge. We had to prioritize core features.
  • Dependency Management: The requirements.txt initially had system-specific paths, which required cleanup (as noted by the req.py script) to ensure broader compatibility 🩹.

Accomplishments that we're proud of 🏆

Despite the challenges, we're proud of several accomplishments:

  • End-to-End Functional Prototype: We successfully built a working web application that takes user input, generates a mathematical animation, and displays it ✅.
  • Successful Manim Integration: Getting Manim to generate animations based on web requests was a major technical achievement for the team 💪.
  • Clear User Interface: We developed a clean and intuitive frontend that makes it easy for users to interact with the application ✨.
  • Modular Design: The separation of frontend, backend, and animation logic allows for easier future development and scaling 🧱.
  • Learning and Applying New Technologies: The team quickly learned and applied various technologies, including Manim, Flask, and React, within a short period 🧠.

What we learned 📚

This hackathon was a valuable learning experience. Key takeaways include:

  • Power of Visualization in Education: We gained a deeper appreciation for how visual tools can significantly enhance understanding in complex fields like mathematics 📈.
  • Technical Skills: We significantly improved our skills in Python (Flask, Manim), JavaScript (React), and integrating diverse services and libraries 💻.
  • Problem-Solving Under Pressure: Working against the clock ⏰ honed our ability to quickly diagnose issues, find solutions, and make pragmatic decisions.
  • Importance of Clear APIs: Designing clear communication pathways between the frontend and backend is essential for a smooth user experience ↔️.
  • Teamwork and Collaboration: Effectively dividing tasks and collaborating 🤝 was key to our progress.

What's next for CrystalMath 🔮

We see a lot of potential for CrystalMath to grow beyond a hackathon project:

  • Expanded Mathematical Functionality: Support for a wider range of mathematical topics ♾️, notations, and more complex multi-step visualizations.
  • Interactive Animations: Allow users to interact with the animations 🖱️ (e.g., change parameters in real-time, pause and inspect steps).
  • User Accounts and History: Enable users to save their generated animations and track their history 👤.
  • Customization Options: More control over animation styles, colors, and speed 🎨.
  • Educational Content Integration: Partnering with educators 👩‍🏫 to create a library of pre-defined animations for common curriculum topics.
  • Improved Error Handling and Input Parsing: More robust parsing of mathematical expressions and clearer feedback for invalid inputs ✔️.
  • Deployment and Scalability: Optimizing the application for deployment and ensuring it can handle a larger number of users 🌐.
  • Community Features: Allowing users to share their creations or custom Manim scripts 🌍.

We're excited about the future possibilities and believe CrystalMath can become a valuable tool for the mathematics community! 🌟

Share this project:

Updates