Pop Learn

Turn Articles Into Interactive Lessons, From reading to understanding, in just one click.

Comment

Inspiration

We were inspired by the challenge of turning passive reading into active learning. Long articles and research papers often overwhelm readers, we wanted to make comprehension faster, visual, and more interactive. Harnessing Chrome's on-device AI models (Gemini Nano) opened a path to achieve that directly inside the browser while preserving privacy.

What it does

Pop Learn enhances your browsing experience with smart, AI-powered features:

  • Instantly summarizes any web article using Chrome’s Summarizer API.
  • Generates visual mindmaps or timelines that organize content into clear structure.
  • Builds interactive quizzes to test understanding, complete with graded feedback.
    All this happens locally in the browser, ensuring fast, secure, privacy‑first learning.

How we built it

  • Built as a Manifest V3 Chrome Extension using JavaScript, HTML, and CSS.
  • Integrated the Prompt API (LanguageModel) for structured AI responses like quiz JSON arrays.
  • Added the Summarizer API for concise representations of long content.
  • Implemented robust fallbacks, if an API isn’t downloaded, heuristic logic ensures the extension still functions.
  • Each feature is wrapped in the same minimal UI card with minimize, maximize, and resize support.

Challenges we ran into

  • Model readiness issues: Chrome’s AI sometimes reports “downloadable,” blocking immediate responses.
  • Handling malformed JSON: AI occasionally produced invalid output, requiring sanitization and regex‑based validation.
  • Maintaining responsiveness: Streaming data had to be displayed smoothly through loaders and spinners.
  • Extension sandboxing (MV3): Managing background messages securely and avoiding external imports.

Accomplishments that we're proud of

  • A fully on-device AI system with no third-party APIs.
  • Seamless SVG mindmap rendering that adapts to process or timeline content.
  • Interactive quiz system with dynamic scoring, retries, and red-green feedback.
  • A polished UI combining aesthetics and performance within Chrome’s functional limitations.

What we learned

  • How to build with Chrome’s next-gen built-in AI APIs, Summarizer, Prompt (LanguageModel).
  • Importance of UX feedback (loaders, state transitions) for AI interactions.
  • Designing modular fallback pipelines keeps the product usable even in partial AI availability.
  • Deep insight into Gemini Nano’s on-device architecture and real-time inference constraints.

What's next for Pop Learn

  • Add Proofreader and Rewriter APIs once Chrome releases stable builds.
  • Support for multi-language summarization through the Translator API.
  • A user dashboard to track reading habits and learning progress.
  • Offline content caching for cross-session access and quick resume.
  • Expanding visualization to include flowcharts and concept maps for academic domains.

Built With

  • chromeextension?
  • chromestorage?
  • css3?
  • devtools?
  • gemininano?
  • html5?
  • javascript?
  • languagemodel?
  • manifestv3?
  • promptstreaming
  • summarizerapi?
  • svg?
  • vanillajs?
  • writerapi?
Share this project:

Updates