Project Story — WHATS_EduCentre™

“From Cloud Reliance to Local Sovereignty”


What it does

WHATS_EduCentre™ is a local-first, multimodal AI studio that transforms the browser into a secure classroom and creative lab.
It empowers students, educators, and independent creators to analyze, write, translate, illustrate, narrate, and export — entirely on-device — using Chrome’s Built-in AI APIs (Prompt, Proofreader, Summarizer, Translator, Writer, Rewriter) in combination with Gemini Nano and Gemini 2.5 Flash.

The app follows a guided pipeline:

Each stage turns raw resources into refined outputs — text, image, audio, or video — with complete privacy and offline capability.
It’s education, creation, and governance in one ecosystem.


How we built it

The project began as an experiment: could Chrome itself become an operating system for AI?

Core Architecture:

  • Framework: Angular 18 + Preact + TailwindCSS
  • Storage: OPFS + IndexedDB (Dexie.js) for local persistence
  • AI Bridge: Chrome Built-in AI APIs (Gemini Nano) for client-side inference
  • Hybrid Escalation: Seamless hand-off to Gemini 2.5 Flash, Imagen 4, Veo, and Gemini TTS for heavier multimodal workloads
  • Creative Canvas: A composition engine that merges text, images, videos, and narration in a regenerable graph
  • Workbench Personas: Contextual system prompts that let users “chat” with specialized roles like Teacher, Principal, or Dad

The result is a browser application that functions like a mini OS for local AI creativity — blending on-device intelligence with Chrome’s modern web stack.


Challenges we ran into

  • On-Device Performance: Balancing video analysis, audio streaming, and text generation required Web Workers and efficient batching.
  • Offline Integrity: Hybrid API fallbacks demanded precise state reconciliation between IndexedDB and in-memory data.
  • Output Consistency: Harmonizing schema differences between Built-in APIs and Gemini Flash required a strict JSON-response contract.
  • User Experience Density: With so many capabilities, progressive disclosure became essential for clarity.
  • Time & Focus: Completing a full rebuild in under 48 hours tested both engineering stamina and design discipline.

Accomplishments that we're proud of

  • A fully offline, privacy-first AI studio — no logins, no uploads
  • True multimodality: live webcam narration, image generation, video synthesis, and speech output unified in one canvas
  • Ethical architecture: data ownership by design, not afterthought
  • Dynamic personas: context-aware and human-feeling feedback
  • Educational impact: accessible AI for low-connectivity schools
  • System coherence: all modules (SAAIS™, WHATS_AI™, hermanus.me) interoperate seamlessly

The proudest moment: when WHATS_sight™ described a live camera scene aloud, fully on-device — proving the browser itself can see and speak.


What we learned

  • Privacy and AI can coexist. Gemini Nano proved that personalization doesn’t need cloud exfiltration.
  • AI is a medium, not a tool. Text, image, audio, and video are simply modes of human expression.
  • Prompt engineering meets software engineering. Deterministic JSON schemas make AI output composable.
  • Human context is the ultimate model parameter. Personas and local data make every interaction meaningful.

Mathematically, the regenerative workflow behaves like:

$$ R = f(P, E, C, Pr, Ex) $$

Where
( P = \text{Pantry} ),
( E = \text{Extract} ),
( C = \text{Compose} ),
( Pr = \text{Produce} ),
( Ex = \text{Export} ).

Each iteration of ( R ) yields a measurable life-deficit reduction and creative-output gain.


What's next for WHATS_EduCentre™

  • Chrome PWA Release: Packaged installation for schools and creators
  • Peer-to-Peer Collaboration: Local classrooms connected via WebRTC mesh
  • AR / VR Learning Mode: Field exploration with Gemini Vision overlays
  • Open-Source Toolkit: Publish Creative Canvas as a modular framework
  • Nano Adapter Training: Enable lightweight, on-device fine-tuning

Closing Thought

“The cloud taught AI to scale.
The browser will teach AI to belong.”

WHATS_EduCentre™ isn’t just an app — it’s proof that powerful, responsible AI can thrive inside the browser, not beyond it.

Built With

  • angular-18
  • chrome-built-in-ai
  • file-system-access-api-(opfs)
  • firebase-ai-logic
  • gemini-2.5-flash
  • gemini-live-api
  • gemini-nano
  • gemini-tts-api
  • google-cloud-run
  • imagen-4
  • indexeddb-(dexie.js)
  • json-schema
  • local-first
  • mediarecorder-api
  • preact
  • progressive-web-app-(pwa)
  • service-worker-api
  • tailwindcss
  • typescript
  • veo
  • web-audio-api
  • web-workers
  • webrtc
Share this project:

Updates

Submission history