DEV Community

Vedant Gajbhiye
Vedant Gajbhiye

Posted on

StudyLens: Notes to Study Kit

#opensource #hacktoberfest #gemmachallenge #ai

Gemma 4 Challenge: Build With Gemma 4 Submission

Tagline: Upload photos of your notes and get a summary, flashcards and a quiz in English, Hindi or Marathi.

Prize categories: Best Use of Gemma 4 | Best Open-Source AI Project

Links

Inspiration

Students already take photos of notes, whiteboards and textbook pages. Those photos pile up in a camera roll and never turn into revision. Making flashcards and practice questions by hand takes longer than studying itself, so most people skip it. We wanted a tool where the photo is the only input.

We also wanted it to work in the languages students actually think in. Many students read English notes but revise more comfortably in Hindi or Marathi, so the kit can be generated in any of the three.

What it does

Upload one to four photos of handwritten notes or a printed page. Notes to Study Kit returns:

  • a title and a bullet-point summary
  • key terms with definitions
  • flashcards you can flip through
  • an interactive multiple-choice quiz with instant feedback, explanations and a score

You choose the output language (English, Hindi, Marathi), how many flashcards and questions you want, and which Gemma 4 model to use: a fast one for most pages, or a larger one for messy handwriting and dense pages. The kit is built only from what is visible in the photos, so it studies your notes, not a generic version of the topic. The interface is minimal and responsive, with System, Light and Dark themes.

How we built it

  • Gemma 4 is the core of the app. It runs through the Gemini API and reads the note photos directly, so there is no separate OCR step. One multimodal call turns the image into a structured study kit. Users can switch between gemma-4-26b-a4b-it (faster) and gemma-4-31b-it (higher quality). The server only accepts those two model names.
  • Flask backend with a structured prompt that asks for one JSON object. The server then validates it: every quiz question must have exactly four options and a valid answer index, malformed items are dropped, and unparseable output is retried once.
  • Vanilla HTML, CSS and JavaScript frontend with no build step: drag-and-drop upload, flip cards, a scored quiz, and a theme switcher that respects the device setting.
  • Hosted on Render with gunicorn, deployed from the GitHub repo. The API key lives in an environment variable, never in the code.
  • Open source under the MIT license, with a README, .env.example and contribution ideas.

Challenges we ran into

  • Getting dependable structured output from an open model. The model can wrap JSON in markdown fences or add a sentence before it. We extract the JSON object defensively, validate every field, and retry once before showing an error.
  • Trusting the output. A study tool that invents facts is worse than none. The prompt tells the model to use only what the notes say and skip anything unreadable, and the UI reminds students to check important facts.
  • Protecting a public demo. An open endpoint backed by an API key can be drained, so we added file type and size limits, an allowlist of models, and a per-IP rate limit.
  • Multilingual quizzes. Keeping questions, options and explanations all in the chosen language, while the answer index stays machine-readable, needed a strict output schema.

Accomplishments that we're proud of

  • A single photo becomes four study formats in one model call.
  • It runs end to end on free tiers: Gemma 4 through the Gemini API and a free Render instance.
  • The whole app is small enough to read in one sitting, which makes it a good base for contributors.

What we learned

  • Gemma 4's image understanding is good enough to replace a separate OCR pipeline for typical note photos.
  • With open-weight models, the validation layer around the model matters as much as the prompt.
  • Letting users choose between a fast and a higher-quality model is a simple way to trade speed for accuracy.

What's next

  • PDF and multi-page document input
  • Export flashcards to Anki
  • Saved kits and spaced-repetition scheduling
  • More languages
  • Self-hosting an open-weight model so the app does not depend on a hosted API

Built with

Gemma 4, Gemini API, Python, Flask, gunicorn, HTML, CSS, JavaScript, Render, GitHub

Top comments (0)