StudyLens — AI PDF Reader

An intelligent, local-first AI-powered PDF reader with real-time Q&A chat, auto-generated quizzes, and smart summaries. Built with React + TypeScript + Vite (frontend) and Express + TypeScript (backend), powered by Google Gemini AI. Created by Abdullah Al Fuwad, Computer Science and Telecommunication Engineering (Session 2021-2022) at Noakhali Science and Technology University (NSTU).

---

Features

• PDF Viewer — open files or paste a URL, pinch-to-zoom on mobile, resizable panel on desktop
• Persistent Storage — AI chat history, quiz progress, and summaries are automatically saved to IndexedDB and instantly restore gracefully when switching tabs or refreshing. Flushed upon loading a new PDF to protect privacy.
• Real-Time Streaming — lightning-fast ChatGPT-like text streaming powered by Server-Sent Events (SSE).
• Multiple AI Models — switch dynamically between Gemini 3.1 Flash Lite, Gemini 3 Flash, Gemma 3 27B, Gemini 2.5 series, and Gemini 2.0 right from the TopBar UI.
• Q&A Chat — ask anything about your PDF, AI answers directly from the document (or use general AI knowledge) formatted natively in Markdown.
• Quiz Generator — auto-generates MCQs with scoring and explanations, guarded by Google Structured Outputs for unbreakable strict JSON accuracy.
• AI Summary — summarize any topic, chapter, or the whole PDF in 4 diverse styles.
• Secure API — Gemini API key lives only on the backend, never exposed in the browser.

---

Project Structure

studylens/
├── frontend/          # React + Vite + TypeScript + Tailwind
│   ├── src/
│   │   ├── components/   # UI components (TopBar, AIPanel, Tabs)
│   │   ├── hooks/        # useStorage, usePinchZoom, useToast
│   │   ├── lib/          # api.ts (calls backend SSE streams), storage.ts
│   │   └── types/        # Shared TypeScript types
│
└── backend/           # Express + TypeScript — API key proxy
    └── src/index.ts   # POST /api/chat → calls Google Gemini API

---

Local Development

1. Clone and install

git clone https://github.com/abdullah09c/studylens.git
cd studylens

# Install frontend dependencies
cd frontend && npm install

# Install backend dependencies
cd ../backend && npm install

2. Set up environment variables

# Backend
cd backend
cp .env.example .env
# Edit .env and add your GEMINI_API_KEY

# Frontend
cd frontend
cp .env.example .env

3. Run both servers

# Terminal 1 — backend (port 3001)
cd backend && npm run dev

# Terminal 2 — frontend (port 5173)
cd frontend && npm run dev

Open http://localhost:5173

---

Environment Variables

Backend .env

Variable	Description
GEMINI_API_KEY	Your Google Gemini API key — never share this
GEMINI_MODEL	Optional override for the primary fallback model (e.g. gemini-3.1-flash-lite-preview)
ALLOWED_ORIGINS	Comma-separated allowed frontend URLs
BACKEND_ACCESS_KEY	Shared secret required on every /api/* request
PORT	Server port

Frontend .env

Variable	Description
VITE_API_URL	URL of deployed backend (empty = use Vite proxy in dev)
VITE_BACKEND_ACCESS_KEY	Must match backend BACKEND_ACCESS_KEY

---

Tech Stack

Layer	Tech
Frontend framework	React 18 + TypeScript
Build tool	Vite 5
Styling	Tailwind CSS v3
PDF rendering	PDF.js 3.11
Text Parsing	React-Markdown
Backend	Express + TypeScript
AI	Google Gemini (Structured Outputs & SSE Streams)
Storage	File System Access API + IndexedDB

---

Security

• The Gemini API key only exists on the backend server
• Frontend calls /api/chat on your own backend — never Google directly
• CORS can be locked down to your specific frontend origin
• Prompts use robust chunk context sampling (capped at 12000 chars) specifically targeted at avoiding massive token exhaustion

---

License

MIT