Learn By Visualization

Learn By Visualization is a platform designed to make learning fun, interactive, and accessible for kids.

Comment

Inspiration

I was inspired by the need for interactive and engaging learning platforms for kids, especially those who learn better through visuals and auditory feedback. I wanted to create a fun, accessible way for children to explore educational topics, learn through dynamic visualizations, and hear explanations that reinforce their understanding. The idea of using AI to generate visualization code from a child's input and combining it with browser-based text-to-speech felt like a magical combination that could spark curiosity and excitement in young learners.

What it does

Learn By Visualization is an interactive web application that allows children to type in any educational topic, such as "volcano," "solar system," or "bar graph." The app uses a Perplexity Sonar APIs to generate visualization code (like JavaScript/HTML/CSS snippets for charts, diagrams, or animations) along with simple explanations and quiz questions. The visualization is rendered live in the browser, and the explanation is read aloud using the browser's text-to-speech feature, creating an engaging, multimodal learning experience.

How we built it

Frontend: A web application built with React.js, featuring a kid-friendly UI with colorful visuals and easy navigation.

Backend: Python FastAPI proxy, API integration with Perplexity Sonar LLM API that takes the user’s topic and generates the corresponding visualization code, explanation, and quiz content.

Rendering: A sandbox in the browser that executes the generated visualization code.

Text-to-Speech: Leveraging the Web Speech API to read the explanation aloud.

Quiz Module: Dynamically generated quiz questions related to the topic to encourage interaction and learning.

Q&A: Users can ask questions related to the topic.

Challenges we ran into

Tuning the LLM prompts: Getting the LLM to generate accurate and educational visualizations consistently was challenging. We had to iterate on prompt engineering and configurations.

Accomplishments that we're proud of

Building a working prototype where kids can type a topic and instantly see an interactive visualization with an audio explanation.

Creating a safe and fun learning environment where kids can explore topics in a creative way.

Integrating AI-generated content seamlessly with a frontend visualization engine and text-to-speech functionality.

What we learned

The importance of prompt engineering for AI-based applications.

How to integrate AI outputs safely into a web app and manage dynamic content rendering.

The value of multimodal learning—how combining visuals and audio can enhance engagement and retention for children.

What's next for Learn By Visualization

Gamification elements: Rewards, badges, and achievements to motivate learning.

Built With

Share this project:

Updates