{ }
</>
λ
#
Muhammad Asad Khan
Cloud · AI · Dev

Mogscope

Facial Analysis & Satirical Intelligence

Mogscope Interface

Concept Definition

A satirical application parodying "looksmaxxing" internet culture. Mogscope computes completely realistic 68-point SSD-MobileNet facial landmark regressions, calculates authentic distances like the "Hunter Index" and exact canthal tilt angles, and funnels this via Edge Functions into a Groq AI model programmed to deliver absurdist diagnostics.

Core Modules

  • PSL Analyzer: Calculates symmetry, Bizygomatic Frame Gauge, and Hunter Index strictly client-side.
  • Face-to-Face Thunderdome: Dual analysis comparison highlighting "Frame Mogs" and PSL deltas with MK-style KO overlays.
  • 3D Skull WebGL: Dynamic anatomical skull rendered interacting natively via Three.js.
  • Web Audio Speech: Real-time text-to-speech voice generation handled directly in-browser via Howler API.

Biometric Execution Pipeline

Facial detection remains entirely secure — 100% of mathematical extraction occurs fully client-side via WebAssembly-compiled @vladmandic/face-api on React 18. Only the pure geometric numbers orchestrate Vercel Edge compute units running Groq's llama-3.3-70b-versatile for highly responsive, tone-strict satirical completions formatting.

graph LR
    subgraph Client [Browser Environment 🖥️]
        Webcam[HD Webcam Array] -->|Video Feed| FaceAPI(FaceAPI.js Model🧠)
        FaceAPI -->|68-point Vector Maps| UI[React 18 Engine]
        UI -->|Geometry Bindings| Three(Three.js Visuals 💀)
    end
    subgraph Cloud [Edge Serverless 🌧️]
        UI -->|Anatomical Data| Vercel(Vercel Edge Functions)
        Vercel -->|Llama 3 Prompting| Groq[(Groq High-Speed API)]
        Groq -->|Satirical Script| Vercel
        Vercel -->|JSON Insights| UI
    end
    UI -->|Text-to-Speech| Voice((Browser Web Audio API 🗣️))
                        

Primary Tooling Matrix

React Tailwind Three.js Groq AI TensorFlow Framer Motion

Implementation Hurdles

  • Performance Optims: Compiling heavy computer vision tensor models cleanly onto weak mobile devices utilizing WebGL backends.
  • State Desynchronization: Ensuring live webcam coordinate streams match seamlessly up with complex Three.js geometry orientations.
View Live App ↗ GitHub Repo ↗