Curio-Shorts

TikTok For Education : Swap Brain Rot With Brain Fuel

Comment

Inspiration

The inspiration for Curio-Shorts comes from wanting to transform passive screen time into an active, educational experience. We saw the immense engagement of short-form video platforms like TikTok but also recognized the concern about "brain rot" - endless scrolling through low-value content. Our core idea, captured in our slogan "swap brain rot for brain fuel," was to harness that same addictive, fast-paced format but use it to spark curiosity and learning, especially for younger audiences. We wanted to create a tool that makes learning as fun and accessible as social media. This app is great example of using AI for education. To make education engaging.

What it does

Curio-Shorts is an AI-powered educational content creator. A user can ask any question, from "Why is the sky blue?" to "How does photosynthesis work?". They then select a narrator (like Spider-Man, Barbie, or a custom character) and a visual art style (like Anime, Comic Book, or Storybook).

The application then:

  • Uses the Gemini 2.5 Flash model to write a short, catchy song that explains the topic from the chosen character's perspective. The AI also suggests a musical style.
  • For each line of the song, it generates a unique illustration using the Gemini 2.5 Flash Image Preview model, matching the lyrics and the selected art style.
  • It combines these AI-generated images, lyrics, background music, and a text-to-speech voiceover into a "Short" - a vertical, scrollable video slideshow.
  • All created Shorts are automatically saved in the browser using IndexedDB, allowing users to build a personal library of fun, educational content they can rewatch anytime.

How we built it

We built this as a client-side-only web application to make it fast, scalable, and easy to deploy.

  • Frontend: The app is built with vanilla HTML, CSS, and TypeScript, without relying on a major framework. This keeps it lightweight and performant. The UI is designed to mimic the familiar vertical feed of modern social apps, using CSS Scroll Snap for the core navigation.

  • AI Integration: We used the @google/genai SDK to communicate with Google's AI models directly from the browser. gemini-2.5-flash is used for structured content generation. We prompt it to return a JSON object containing the song lyrics, corresponding image prompts, and a music style. gemini-2.5-flash-image-preview handles all the visual creation, turning the text prompts into beautiful illustrations for each slide.

  • Audio: For narration, we leverage the browser's native Web Speech API (SpeechSynthesisUtterance), which allows us to use different voices installed on the user's system. The background music consists of pre-loaded audio tracks that are selected based on the AI's music_style suggestion.

  • Persistence: To ensure users don't lose their creations, we use IndexedDB for all storage. This allows the app to function offline and saves the entire history of generated Shorts directly in the user's browser.

Challenges we ran into

  • Consistent AI Output: Getting the AI to reliably return a perfectly formatted JSON object every time was a key challenge. We solved this through careful prompt engineering, creating a detailed system instruction that specifies the exact structure, and by using the responseSchema feature in the API call to enforce the JSON output.

  • Image Cohesion: Ensuring that the 6-8 images generated for a single Short felt stylistically consistent was difficult. We addressed this by programmatically prepending a strong style directive (e.g., "In the style of a classic American comic book...") to every image prompt sent to the model.

  • User Experience During Generation: A full generation cycle involves multiple API calls and can take several seconds. We had to build a clear and responsive UI that disables buttons, shows a "Generating..." state, and provides clear error popups to manage user expectations and prevent frustration if an API call fails.

  • State Management: Without a framework, managing the application's state (e.g., isPlaying, isGenerating, the currently active video) required careful handling of variables and event listeners to prevent race conditions, especially between asynchronous AI calls and user interactions.

Accomplishments that we're proud of

  • A Truly Multi-Modal Experience: We are proud of successfully orchestrating multiple AI models to create a single, cohesive piece of content. The app seamlessly blends AI-generated text, AI-generated images, and audio into a final product that feels polished and unified.

  • Full Offline Functionality: By using IndexedDB, we made the app incredibly robust. Once a Short is generated, it's saved forever in the user's browser. They can come back a week later with no internet and still browse their entire library.

  • An Engaging and Intuitive UI: We successfully replicated the addictive, intuitive feel of a short-form video feed using only standard web technologies. The combination of vertical and horizontal scrolling feels natural and keeps users engaged.

  • Zero Backend Dependency: The entire application runs in the browser. This makes it incredibly simple to host and means it can scale to any number of users without server costs, as all the computation and API calls are handled by the client.

What we learned

  • The Power of Structured JSON Output: This project solidified our understanding of how powerful it is to use the responseSchema feature. It transforms the language model from a simple text generator into a predictable and reliable backend, making it much easier to build applications on top of it.

  • Orchestrating AI Workflows: We learned how to chain AI calls effectively - using the output of the text model (the image prompts) as the input for the image model. This workflow is key to creating rich, multi-layered content.

  • Leveraging Modern Browser APIs: We gained a deeper appreciation for the power of native browser APIs. The Web Speech API and IndexedDB are incredibly capable and allowed us to build core features like voice narration and offline storage without any external libraries or dependencies.

What's next for Curio-Shorts

AI-Generated Music: Instead of using pre-selected audio tracks, we want to explore integrating an AI music generation model to create a unique, fitting instrumental for every single Short, making each creation 100% unique.

Curio-Shorts Role In Education

  1. AI in Education : This is the core of the application. Curio-Shorts is a direct demonstration of AI as a content creation engine for personalized learning. Automated Content Generation: Instead of relying on pre-made educational videos, the app uses Gemini AI to generate brand new, custom content on the fly. The AI acts as both a songwriter (creating simple, rhyming explanations) and an illustrator (generating unique images for each line of the song). Personalization at Scale: The AI tailors the educational content to a student's interests by adopting the persona of a chosen character (like Spider-Man or Barbie). This makes the information more relatable and memorable. An explanation of photosynthesis from a cat is very different from one by a superhero.

  2. Learning Accessibility : The app is designed to make learning more accessible to students with different needs and learning styles, following the principles of Universal Design for Learning (UDL). Multi-Modal Presentation: Information is delivered in multiple ways simultaneously: Visual: Custom illustrations for every concept. Auditory: Text-to-speech narration and background music. Textual: Lyrics are displayed on-screen. This combination helps reinforce learning and caters to visual, auditory, and reading-based learners. Simplifying Complexity: The AI's primary task is to break down complex topics into short, simple lyrics. This makes intimidating subjects more approachable for younger learners or those struggling with a topic. Voice Options: By allowing users to select from the voices available on their system, the app can be adjusted for students who find certain voice tones or speeds easier to understand.

  3. Gamified Education : Curio-Shorts cleverly uses a "gamified" approach to make learning feel more like entertainment. Familiar, Engaging Format: The app's entire interface mimics the addictive, scrollable vertical feed of TikTok and YouTube Shorts. It leverages a format students are already engaged with, making learning feel less like a chore. Character-Based Learning: Choosing a favorite character to be the "teacher" incorporates an element of play and fantasy into the educational process. Collection and Ownership: The "My Shorts" gallery allows users to build a personal library of the content they've created. This sense of collection and ownership can be a powerful motivator to continue learning and exploring new topics.

  4. Student Wellness & Productivity : The app's slogan, "swap brain rot for brain fuel," directly addresses this area. Promoting Positive Screen Time: It offers a productive and enriching alternative to passive, endless scrolling on entertainment apps. It transforms screen time into an active, creative, and educational pursuit, which can improve a student's relationship with technology. Reducing Learning Anxiety: It provides a safe, private space for curiosity. Students who might be afraid to ask a "silly" question in class can ask the app anything without fear of judgment, fostering a healthier attitude toward learning. Sparking Curiosity: By providing instant and fun answers, the app encourages a cycle of questioning and discovery, boosting intrinsic motivation and making students more productive learners.

  5. Tools for Teachers : While designed for students, Curio-Shorts can also be a powerful tool for educators. Lesson Hooks: A teacher can generate a quick, 1-minute Short to introduce a new topic in a fun and engaging way, capturing the class's attention from the start (a perfect "bell ringer" activity). Differentiated Instruction: A teacher can create multiple Shorts on the same topic but with different characters or styles to appeal to the varied interests of students in their classroom. Creative Project Alternative: Instead of a traditional report, a teacher could assign students to create their own Curio-Short to explain a concept. This assesses their understanding while also developing digital literacy and creativity skills.

Built With

Share this project:

Updates