Inspiration
As students ourselves, we've always struggled with one problem studying smarter, not harder. Existing AI study tools either cost money, require an internet connection, or send your notes to a server you don't control. We wanted something different.
What it does
NoteCraft is a browser-based AI study assistant that helps students study smarter. Paste your notes or upload a photo of your textbook and NoteCraft generates a summary, extracts key points, creates a multiple-choice quiz, and produces memory tips, all powered by a real generative AI model running locally on your device. No server. No API keys. No cost. Your notes never leave your machine.
How we built it
We built NoteCraft as a pure three-file web application index.html, styles.css, and app.js with zero backend and zero build tools. The AI runs entirely in the browser using Transformers.js, which loads Google's Flan-T5 Small model (~80MB) from Hugging Face and executes it locally via WebAssembly. For photo uploads, we integrated Tesseract.js to perform OCR directly on the device, with HTML5 Canvas preprocessing to improve accuracy on scientific and symbol-heavy content. The entire stack is vanilla JavaScript no frameworks, no npm, no compilation step.
Challenges we ran into
The biggest challenge was Flan-T5 Small's limitations. Being a compact model, it handled structured tasks like MCQ generation well but collapsed to one-word outputs for open-ended tasks like summarization and memory tips. We solved this with a hybrid approach the model is tried first, and if the output is too short, a smart JavaScript fallback using sentence scoring and term frequency analysis kicks in automatically. OCR accuracy was another major hurdle Tesseract.js struggled with Greek letters and scientific notation (σ, π, →), producing garbled text. We fixed this with Canvas-based image preprocessing and a post-OCR symbol correction pipeline.
Accomplishments that we're proud of
We are proud that NoteCraft runs a real generative AI model with zero infrastructure no server, no database, no API bill, ever. The app works offline after the first load, making it genuinely accessible to students in low-connectivity environments. We are also proud of solving the OCR-to-AI pipeline for scientific content, which required creative workarounds at every layer of the stack. Most of all, we built something that is actually useful not just a demo.
What we learned
We learned that meaningful AI applications do not require the cloud. WebAssembly has made it possible to run real machine learning models inside a browser tab, and that fundamentally changes what a "frontend only" project can do. We also learned the importance of knowing your model's limits rather than fighting Flan-T5 Small's weaknesses, we designed around them with a hybrid system that plays to the model's strengths. Prompt engineering, even for small models, makes a significant difference in output quality.
Log in or sign up for Devpost to join the conversation.