Panic! At the Classroom

Panic! at the Classroom Dashboard
Financial Data Excel Sheet
Lecture Notes on Notion

📖 Panic! at the Classroom

Inspiration: The Heart Attack at 2:00 PM

It started with a universal experience. We were sitting in a lecture hall, effectively multi-tasking—listening with one ear while grinding ranked matches in League of Legends with the other hand. Suddenly, the shadow of the professor loomed over our shoulders.

The sheer panic of trying to Alt + Tab while simultaneously dragging a window and looking intellectual is a biological stress test no student should have to endure. We realized that human reaction times, averaging around , simply aren't fast enough to outpace a suspicious lecturer.

We asked ourselves: What if our computers were paranoid so we didn't have to be?

We didn't just want a boss-key; we wanted a digital bodyguard. Thus, Panic at the Classroom was born—an AI sentinel that watches your back and instantly generates a watertight alibi.

What it does

Panic at the Classroom is a background surveillance tool that turns your webcam into a motion detector for authority figures.

The Watchman: It sits in your system tray, silently monitoring the video feed.
The Trigger: Using computer vision, it recognizes specific faces (your professor, your boss, or your mom).
The Alibi: The millisecond a target is identified, the app nukes your game/Netflix window and instantly overlays a fully interactive, professional-grade fake Excel dashboard.

It’s not just a screenshot; it’s a functional, scrolling, clickable spreadsheet that makes you look like the hardest working student in the room.

How we built it: The "Paranoid" Stack

We architected this as an Electron desktop application to gain full system access while using web technologies for the interface.

1. The Eye of Sauron (Face Detection) We utilized TensorFlow.js and face-api.js running directly in the renderer process. We needed speed over raw accuracy. We implemented a confidence threshold function where the "Panic State" () triggers only when the probability of the target face () exceeds our safety margin ():

We tuned to to balance sensitivity with the risk of false positives (flashing a spreadsheet every time we took a sip of water).

2. The Overlay (Electron & React) The core challenge was the "mask." We built a React frontend that mimics Microsoft Excel pixel-for-pixel. We used CSS Grid for the cells and Chart.js to render dynamic, "business-looking" graphs that animate in real-time. This ensures that even if the professor stares at the screen, the data looks "live" and legitimate.

3. The Optimization Since the user is likely running heavy applications (games) underneath, our app had to be lightweight. We optimized the detection loop to run on a separate thread, keeping the main process unblocked.

Challenges we ran into

The "Head Bob" Problem: Initially, the AI was too sensitive. If the user leaned back to laugh, the camera angle shifted, and the app thought a new person had entered, triggering the Excel sheet mid-game. We had to implement a persistence filter that requires the face to be present for consecutive frames.
Latency vs. Accuracy: Running a neural network in a JS environment can be heavy. We had to quantize the model weights to get the inference time down. Our goal was a reaction time of .
The "Uncanny Valley" of Spreadsheets: Making a fake Excel sheet look real is surprisingly hard. We spent hours tweaking the specific shade of "Microsoft Green" and ensuring the grid lines aligned perfectly.

Accomplishments that we're proud of

Sub-200ms Reaction Time: We managed to optimize the pipeline so the switch happens faster than a human can physically blink.
The "Ghost" Mode: The app runs entirely in the system tray with near-zero CPU usage when idle, meaning it doesn't drop the frame rate of the games we are playing.
Universal Overlay: Because we used Electron's BrowserWindow with the alwaysOnTop flag, our fake Excel sheet successfully covers everything from full-screen Discord streams to AAA games.

What we learned

We gained a deep appreciation for WebRTC and privacy permissions (getting camera access in Electron is a journey!). We also learned that UI design is a form of social engineering; the "Excel" sheet doesn't need real data, it just needs to look complicated enough that people don't ask questions.

What's next for Panic at the Classroom

Multi-Teacher Support: A "Rogues Gallery" to register the faces of every professor in the department.
Context Awareness: An update where the "Panic App" changes based on context (e.g., switches to a fake VS Code environment for CS classes, or a fake CAD drawing for Engineering).
Mobile Companion: A "Lookout" app for your phone that acts as a remote camera to place in the hallway.