Skip to main content

​
Overview

Visita pushes the boundaries of a standard web app by integrating “Edge AI” and “Enterprise Ops” directly into the workflow. This guide covers the five major advanced systems.

​
1. Client-Side Privacy (MediaPipe)

To comply with strict privacy laws (POPIA) while maintaining a seamless user experience, we run computer vision models directly in the user’s browser.

​
Architecture

  • Library: @mediapipe/tasks-vision (Google)
  • Model: Face Landmarker (Float16 Quantized)
  • Execution: WebAssembly (WASM) with WebGL acceleration.

​
Implementation

The <SecureUpload> component intercepts file selection:
  1. Loads the image into an off-screen Canvas.
  2. Runs the FaceBlurrer service (lib/privacy/face-blurrer.ts).
  3. Detects face landmarks.
  4. Applies a pixelation filter to the bounding box of each face.
  5. Replaces the original file with the privacy-safe Blob before upload.
// components/ui/secure-upload.tsx
const blurredBlob = await FaceBlurrer.blurFaces(originalImage);
onImageProcessed(blurredBlob); // Only the blurred version leaves the device

​
2. Geospatial Command (deck.gl)

We use deck.gl (by vis.gl) to render massive datasets that would choke standard Mapbox markers.

​
Architecture

  • Renderer: WebGL2 via deck.gl
  • Base Map: Mapbox GL JS (Synchronized view state)
  • Layers:
    • HexagonLayer: Aggregates thousands of points into 3D hexagonal density columns.
    • IconLayer: High-performance instanced rendering for individual markers.

​
Components

  • components/ward/IntelMap.tsx: The main controller. It handles the “Zoom Transition” pattern where the map automatically switches between Heatmap (Low Zoom) and Pins (High Zoom).

​
3. Knowledge Engine (Tiptap + Y.js)

The Ward Wiki system is built on an “Offline-First” architecture using CRDTs (Conflict-free Replicated Data Types).

​
Architecture

  • Editor: Tiptap (Headless, Block-based)
  • State: Y.js (Y.Doc)
  • Persistence: IndexedDB (via y-indexeddb)
  • Sync: Ready for WebSockets (liveblocks or hocuspocus).

​
Usage

The <WikiEditor> component auto-saves to the user’s local device immediately. This ensures that minutes and agendas are never lost, even during network interruptions. 
<WikiEditor wardCode="79700026" />

​
4. Ops Infrastructure (Docker)

For enterprise-grade analytics and AI orchestration, we provide self-hosted configurations in the ops/ directory.

​
Business Intelligence (Apache Superset)

Located in ops/superset.
  • Purpose: Cross-ward analytics, rigorous SQL reporting, and “War Room” dashboards.
  • Integration: Connects directly to the Supabase PostgreSQL port (5432).

​
AI Agents (Dify)

Located in ops/dify.
  • Purpose: Visual builder for AI agents (Scouts).
  • Workflow:
    1. Build an agent in Dify (e.g., “News Scraper”).
    2. Expose it via API.
    3. Call it from Visita’s scout-v2.ts.

​
Deployment

These Ops tools are designed to run on a separate VPS or alongside the main app in a containerized environment (e.g., Coolify, Railway, or AWS ECS). They do not run inside the Next.js Serverless functions.