ai-webbaseline-assistant

Project Story

Inspiration

We wanted to make adopting modern web features easier while also helping students and developers learn faster. By blending Web Baseline data with an AI study workflow (summary → flashcards → quiz), the app encourages hands-on learning right where the developer works. We took inspiration from:

• The friction developers face when checking browser support and MDN while planning features.
• Study techniques like spaced repetition and self-testing. A simplified retention idea is often modeled as:

$$ R(t) = e^{-\tfrac{t}{\lambda}} $$

where $R(t)$ is retention over time $t$, and $\lambda$ controls the forgetting rate. Our flip-card and quiz flow is designed to counteract this decay by quick, repeated recall.

How We Built It

• Backend (backend/app/main.py):
  • FastAPI endpoints for summarization (/api/documents/), flashcards (/api/flashcards), quizzes (/api/quiz), uploads (/api/upload), and Baseline feature info (/api/feature-info).
  • Summarization pipeline with three layers: Hugging Face Inference API (optional) → local transformers (optional) → naive fallback.
  • File parsing using pypdf and python-docx.
  • CORS + simple health check.
• Frontend (frontend/src/main.jsx):
  • React + Vite + TailwindCSS UI for upload, summarize, flashcards, and quizzes.
  • Flip Cards study mode (click to reveal answer/question).
  • Export results to PDF via jspdf.
• Baseline Data: backend/baseline_data/baseline_features_sample.json used to demonstrate feature lookups with MDN link and a mini-quiz.

What We Learned

• How to structure multi-tier AI fallbacks that gracefully degrade when external APIs or large models aren’t available.
• Practical TailwindCSS setup with Vite and handling editor lint false-positives for @tailwind/@apply while the build pipeline compiles correctly.
• Designing simple but effective heuristics for MCQ generation—keyword masking, distractor selection by frequency/length—and understanding their trade-offs.
• Dockerizing a full-stack app for local dev parity.

Challenges

• Balancing accuracy vs. performance for summarization without requiring heavyweight installs for all users.
• Handling diverse document formats (txt/pdf/docx) robustly, especially PDFs with complex layouts.
• Creating meaningful MCQs from arbitrary text—noisy inputs and domain vocabulary can degrade distractor quality.
• Ensuring the UI stays simple yet covers the full flow (upload → summarize → flashcards → quiz → export).

Future Work

• Stronger quiz generation (NER, keyword extraction, and syntax-aware blanks) and adaptive difficulty.
• True spaced-repetition scheduling, e.g., Leitner boxes, with persistence (SQLite/Firebase) and progress analytics.
• Real Baseline API/data feed with live updates and per-feature deep-dives.
• Authentication + personal libraries of notes, decks, and quizzes.
• One-click deploy templates (Netlify + Render) and Chrome Extension for in-page summarization.

Built With

• docker
• face
• fastapi
• hugging
• javascript/typescript
• json
• python
• react