ThinkEureka

• 

• 

• 

• 

• 

Inspiration

When learning from Khan Academy, the interactive animations embedded within certain reading materials had the most profound impact on my understanding. One of the moments that stands out is how engaging and effective it was to learn about private and public key cryptography by interacting with the concept rather than just watching a video. Being able to manipulate and visualize the cryptographic process in real-time made the complex topic much easier to grasp. This hands-on, interactive experience was far more engaging and memorable than passive video watching.

With the development of large language models (LLMs), I began to experiment with prompting these models to generate animations for some of the more challenging topics in computer science and mathematics. The ability to create tailored, interactive visualizations for complex concepts made learning even more intuitive. It was exciting to see how AI could enhance the learning process by offering instant, personalized animations that helped clarify abstract ideas. This experience was not only more effective but also more enjoyable—like turning a textbook into a dynamic, interactive learning environment.

I wanted to share this innovative approach with others, and that's how ThinkEureka was born. I saw an opportunity to create a platform where everyone could benefit from these AI-generated, interactive animations, turning abstract topics into accessible and fun learning experiences.

What it does

ThinkEureka is a platform designed to make abstract concepts in computer science, mathematics and others subjects simple and engaging through interactive animations. It leverages modern web technologies to create intuitive, playful, and educational experiences, making complex ideas accessible to a broader audience.

How we built it

The development of ThinkEureka involved extensive use of GitHub Copilot to generate the UI and guide the creation of various components. I utilized modern frameworks and technologies including:

• Next.js for server-side rendering and building the web application.
• React for creating a dynamic and responsive user interface.
• Prisma as an ORM for database management and connecting with Azure SQL.
• Azure AI Foundry for integrating AI-driven functionalities.
• Azure SQL Server & Azure SQL Database for efficient data storage and retrieval.
• Next-Auth for implementing robust authentication and user management.

Through this tech stack, I aimed to create a seamless experience where users can interact with animations that simplify abstract concepts.

Challenges I ran into

Integrating LLM code into Nextjs

Integrating code generated by LLMs into a Next.js website posed challenges due to compatibility issues. The generated code required transpiling, which involved adding Babel to handle the transpilation process. One challenge was ensuring the AI didn't generate import statements, as the code would fail to transpile at those points.

Connecting Prisma with SQL Database

Another difficulty was connecting Prisma to SQL Server, specifically determining the correct URI for the connection. I tried multiple connection strings, but none of them worked consistently. Sometimes the connection would succeed, while other times it wouldn't. Eventually, I found the correct string and resolved some inconsistencies by increasing the polling time in the URI itself.

Choosing the right model

Additionally, choosing the right model for code generation was a challenge, as the code had to fit within the constraints of the Next.js architecture while ensuring performance, security, and scalability. Some models weren’t suitable for animation code generation, so I had to test multiple models to find the best fit.

Accomplishments that we're proud of

Integrating the LLM code

Successfully transpiling the code generated by the LLM and using it to render animations on the ThinkEureka platform is something I'm really proud of. Overcoming the challenges of transpilation and ensuring smooth integration with the platform's architecture was a significant milestone.

Using next-auth

This was my first time using Next-Auth, and I successfully integrated it into my Next.js project to handle authentication and user management. This achievement added a robust security layer to the platform, allowing users to interact with animations while maintaining a secure and personalized experience.

Navigating Azure cloud

Moreover, this was also my first time working with Azure, and I was able to successfully navigate the platform and leverage the services I needed, including Azure AI Foundry and Azure SQL, to build a scalable and efficient backend. The experience with Azure has been invaluable in improving the platform’s performance and reliability.

What we learned

Through this project, I gained hands-on experience with:

• Azure services, particularly Azure AI Foundry and Azure SQL for robust backend solutions.
• Using AI-generated code efficiently, especially in large-scale projects with complex architectures.
• Optimizing Next.js applications to handle dynamic content and animations.
• Next-Auth for authentication management.

What's next for ThinkEureka

Moving forward, I plan to:

• Fine-tune the animation model to reduce the number of shots required to generate high-quality animations, aiming for a seamless one-shot generation process.
• Expand the range of animations and interactions by adding support for other animation frameworks beyond just Framer Motion. This will give users a broader selection of animation tools to visualize complex concepts.
• Explore additional AI-driven features, such as personalized learning paths or interactive quizzes, to further engage users and enhance the educational value.

Built With

• azureaifoundry
• azureopenai
• azuresqlserver
• github-copilot
• next-auth
• nextjs
• prisma
• tailwind-css
• typescript