INTRODUCTION /
The Mirror is an interactive web experience that explores the concept of the "Machine Gaze." Unlike a traditional mirror that reflects light, this system reflects data. It uses real-time computer vision and generative AI to deconstruct the user's image into vectors, emotional tags, and market values. It is not just a passive reflection; it is a digital entity that watches, analyzes, and thinks about what it sees.
DESIGN CONCEPT /
The visual language of The Mirror is rooted in Cyberpunk and Retro-Futurism. It imagines a near-future interface where biometric surveillance is ubiquitous and aestheticized.
The Machine Gaze:
The UI is designed to look like the internal HUD (Heads-Up Display) of an android or a surveillance system. It displays "thought processes" rather than polished, user-friendly text.
Deconstruction:
The video feed is split into four analytical channels (Raw, Flow, Blobs, Edges) to show how machines decompose human visual input into mathematical representations.
Digital Tangibility:
The center of the screen features a 3D particle cloud. This represents the user's "digital soul." By using hand gestures, the user can physically expand or contract this cloud, bridging the gap between physical movement and digital reaction.
The Receipt:
A satirical commentary on surveillance capitalism. The AI doesn't just see a person; it sees an inventory of items with estimated market values, turning the user into a product list.
ENGINEERING STRUCTURE /
The architecture is a hybrid of high-performance client-side processing and serverless AI integration.
Frontend:
Visual Processing: Uses OpenCV.js for real-time, heavy-duty image processing (Optical Flow, Canny Edge Detection, Background Subtraction) directly in the browser.
Biometrics & Interaction: Uses Google MediaPipe for low-latency hand tracking and face meshing. This data drives the interactive elements without sending video to a server.
3D Visualization: Uses Three.js to render a custom particle system containing 3,000 points that react to hand coordinates and depth.
UI/UX: Custom CSS animations, typewriter effects, and infinite tickers create a "living" interface.
Backend:
Security Layer: A Vercel Edge Function acts as a proxy. It receives image snapshots from the frontend and forwards them to OpenAI. This ensures the API key is never exposed to the client.
Intelligence: OpenAI GPT-4o (Vision) analyzes the snapshots. It is prompted with a specific "persona" to output structured JSON data containing:
An "Inner Voice" monologue.
Algorithmic tags.
A futuristic inventory receipt.
USER GUIDE /
Getting Started:
Open the web link. Allow Camera Permissions when prompted. The system requires video access to analyze the scene.
How to Interact:
The Gesture Cloud (Center Screen):
Raise your hand into the camera frame.
Open Hand: The 3D particle cloud will expand and explode outward.
Closed Fist: The cloud will contract and condense inward.
Movement: Move your hand left/right/up/down to rotate the cloud in 3D space.
The Analysis:
Stand still for a moment to let the "Raw Feed" capture a clear image.
Watch the Top Ticker for the AI's internal monologue about you.
Read the Right Panel to see the system typing out a raw description of your environment and generating a receipt for your outfit/items.
The Metrics (Left Panel):
Move around quickly to see the "Motion Energy" and "Entropy" values spike.
These numbers represent the raw mathematical changes between video frames.
