Documentazione

Architettura ad Alto Livello

Il sistema "Ghòstati" utilizza un'architettura a plugin modulari pensata per separare il nucleo di tracciamento facciale dagli effetti visivi (i "Ghostyles").

Tecnicamente, l'engine principale è una web app Vanilla JS che inizializza la webcam, e utilizza face-api.js per inferire in tempo reale i Landmarks a 68 punti del viso. Il loop di rendering è gestito autonomamente per garantire performance scalabili (FPS controllati).

Og intanto, l'engine richiama l'effetto attivo (il plugin). Ogni Ghostyle è un ES Module (.js) caricato dinamicamente via import(url). Questo significa che i Ghostyle possono essere creati come file locali indipendenti, o addirittura hostati su server remoti e passati via URL.

L'engine fornisce al plugin due cose: le coordinate del volto aggiornate e le API globali offerte da window.Ghostati per semplificare drasticamente la geometria e il disegno su un Canvas dedicato (livello di overlay).

Template Didattico

Un plugin Ghòstyle per funzionare deve unicamente esportare un paio di funzioni specifiche (gli "Event Hooks"). Questo snippet di codice rappresenta lo scheletro di base per cominciare a sviluppare.

// @name Effetto Base

/**
 * [BLOCCO INIT]
 * Funzione di inizializzazione locale (Opzionale).
 * Chiamata *una sola volta* quando il Ghostyle viene importato in memoria.
 */
export function onInit() {
  Ghostati.log('Effetto base caricato correttamente!', 'BASE_STYLE');
}

/**
 * [BLOCCO DRAW]
 * Funzione principale di rendering.
 * L'Engine richiama questa funzione iterativamente nel RAF loop.
 * 
 * @param {CanvasRenderingContext2D} ctx - Il contesto 2D nativo.
 * @param {faceapi.FaceLandmarks68} landmarks - Collezione dei landmark spaziali del viso.
 * @param {faceapi.Box} box - Il Bounding Box che riquadra tutto il viso.
 */
export function onDraw(ctx, landmarks, box) {
  // 1. Estrazione Segmenti (Array di {x,y})
  const leftEye = landmarks.getLeftEye();
  const rightEye = landmarks.getRightEye();

  // 2. Logging temporaneo (opzionale) o manipolazione
  // Attenzione: usare Ghostati.log qui scriverà messaggi ad alto rate / frame.
  
  // 3. Staging via ctx standard
  ctx.fillStyle = 'rgba(255, 122, 122, 0.45)';
  ctx.strokeStyle = 'rgba(255, 122, 122, 0.9)';

  // 4. Rendering tramite libreria Helper
  Ghostati.drawClosedPath(ctx, leftEye, ctx.fillStyle, ctx.strokeStyle, 2);
  Ghostati.drawClosedPath(ctx, rightEye, ctx.fillStyle, ctx.strokeStyle, 2);
}

/**
 * [BLOCCO CLEAR]
 * Funzione di smontaggio / teardown (Opzionale).
 * L'Engine svuota automaticamente il Canvas. Usalo se hai timer o memorie da annullare.
 */
export function onClear(ctx) {
  console.log("Ripristino pulizia plugin base.");
}

Spiegazione dei Blocchi

Modalità Diagnostica (Test CV Dazzle)

Ghòstati non si limita ad applicare il trucco AR in modo cosmetico, ma include uno strumento di Diagnostica e Analisi delle Vulnerabilità progettato per valutare la reale efficacia del Ghostyle nel neutralizzare gli algoritmi di Facial Recognition (CV Dazzle).