utilizzo di MP4 come input

README.it.md

@@ -8,16 +8,17 @@
 
 **ghòstati** (dal repository `antagonistrucco`) è una piattaforma sperimentale e uno strumento diagnostico progettato per contrastare gli algoritmi di riconoscimento facciale. Applicando specifici pattern di trucco (ispirati al concetto di CV Dazzle), gli utenti possono esplorare come i modelli di computer vision interpretano i landmark facciali e tentare di offuscare la propria identità digitale in tempo reale.
 
-Il progetto presenta un'architettura modulare basata su plugin, la quale permette a qualsiasi sviluppatore di scrivere script di trucco AR personalizzati ("Ghostyles") e di testarne l'efficacia contro i modelli di riconoscimento direttamente nel browser tramite la webcam.
+Il progetto presenta un'architettura modulare basata su plugin, la quale permette a qualsiasi sviluppatore di scrivere script di trucco AR personalizzati ("Ghostyles") e di testarne l'efficacia contro i modelli di riconoscimento direttamente nel browser sia tramite la webcam live sia tramite un file video locale caricato dall'utente.
 
 ## Funzionalità Principali
 
 - **Live Face Tracking:** Rilevamento dei landmark facciali in tempo reale direttamente nel browser utilizzando `face-api.js`.
+- **Flusso a Doppia Sorgente:** Puoi partire dalla webcam live oppure caricare un file video locale. I file locali usano un flusso in due fasi: una fase di selezione per scorrere il video e scegliere il punto di partenza, seguita da una fase overlay per eseguire tracking dei landmark e rendering dei Ghostyle in tempo reale.
 - **Sistema di Plugin Modulare (Ghostyles):** Carica dinamicamente effetti di trucco AR personalizzati. I plugin possono essere ospitati localmente o tramite URL remoto. Alcuni effetti inclusi:
   - Graphic Liner, Smokey Eyes, Blush Lift, Lip Tint, Soft Contour, Stage Mask, Splash, etc.
 - **Modalità Diagnostica ("Scansione Trucco"):** Testa l'efficacia del tuo camouflage AR. Lo strumento valuta l'opacità del trucco, cattura il volto alterato e calcola la probabilità di corrispondenza rispetto ai profili salvati per determinare se il sistema di riconoscimento è stato ingannato.
 - **Salva e Confronta (Enrolling):** Salva un volto di base iniziale e confrontalo con il feed live della webcam per verificare se l'algoritmo di face matching ti riconosce ancora dopo aver applicato il camuffamento.
-- **Privacy-First:** Tutte le elaborazioni vengono eseguite localmente sul computer, senza caricare dati biometrici su server remoti.
+- **Privacy-First:** Tutte le elaborazioni vengono eseguite localmente sul computer, senza caricare dati biometrici o file video su server remoti.
 
 ## Installazione
 
@@ -35,6 +36,15 @@ Trattandosi di un'applicazione web statica, non è necessario alcun passaggio di
    python3 -m http.server 8000
    ```
 3. Apri un browser moderno e vai all'indirizzo `http://localhost:8000/ghostati-face-api.html`.
+4. Scegli `Avvia Webcam` per il flusso live, oppure carica un file con `Carica Video (Locale)`.
+5. Se usi un file locale, scorri il video nella fase di selezione e poi premi `AVVIA OVERLAY` per avviare tracking e rendering.
+
+## Uso Dei File Video Locali
+
+- L'analisi dei file video locali avviene interamente nel browser e non carica il media su servizi esterni.
+- Durante la fase di selezione il video espone i controlli nativi del browser, così puoi scegliere il punto di partenza prima di avviare l'overlay.
+- File lunghi, ad alta risoluzione o in 4K possono saturare la memoria del browser. L'interfaccia mostra un indicatore del JS heap per aiutare a capire quando il clip è troppo pesante per la sessione corrente.
+- Quando torni alla webcam, la sorgente file viene rilasciata e l'object URL associato viene revocato.
 
 ## Sviluppare un Ghostyle (Plugin)
 

README.md

@@ -8,16 +8,17 @@
 
 **ghòstati** (from the repository `antagonistrucco`) is an experimental platform and diagnostic tool designed to counter facial recognition algorithms. By applying specific makeup patterns (inspired by the CV Dazzle concept), users can explore how computer vision models interpret facial landmarks and attempt to anonymize their digital footprint in real time. 
 
-The project features a fully modular, plugin-based architecture, allowing any developer to write custom AR makeup scripts ("Ghostyles") and test their efficiacy against recognition models directly in the browser via their webcam.
+The project features a fully modular, plugin-based architecture, allowing any developer to write custom AR makeup scripts ("Ghostyles") and test their efficiacy against recognition models directly in the browser either via the live webcam or via a locally uploaded video file.
 
 ## Features
 
 - **Live Face Tracking:** Real-time facial landmark detection directly in the browser utilizing `face-api.js`.
+- **Dual Source Workflow:** You can start from the live webcam or load a local video file. Local files use a two-step flow: a selection phase for scrubbing and choosing the source segment, then an overlay phase for real-time landmark tracking and Ghostyle rendering.
 - **Modular Plugin System (Ghostyles):** Load custom AR makeup effects dynamically. Plugins can be hosted locally or loaded via a remote URL. Included effects: 
   - Graphic Liner, Smokey Eyes, Blush Lift, Lip Tint, Soft Contour, Stage Mask, Splash, etc.
 - **Diagnostic Mode ("Scansione Trucco"):** Test the effectiveness of your AR camouflage. The tool evaluates makeup opacity, captures the altered face, and computes matching likelihood against saved profiles to determine if the face recognition system is successfully spoofed.
 - **Save & Compare:** Save an initial baseline face and compare live webcam feeds to it to check if the face matching algorithm still recognizes you after applying the camouflage.
-- **Privacy-First:** All processing is done locally on the client interface without uploading biometric data to remote servers.
+- **Privacy-First:** All processing is done locally on the client interface without uploading biometric data or local video files to remote servers.
 
 ## Getting Started
 
@@ -35,6 +36,15 @@ Since it's a static web application, there is no build step required.
    python3 -m http.server 8000
    ```
 3. Open a modern browser and navigate to `http://localhost:8000/ghostati-face-api.html`.
+4. Choose `Avvia Webcam` for the live camera flow, or upload a local file with `Carica Video (Locale)`.
+5. If you load a file, scrub to the point you want to analyze during selection mode, then press `AVVIA OVERLAY` to start tracking and rendering.
+
+## Working With Local Video Files
+
+- Local video analysis is performed entirely in-browser and does not upload media anywhere.
+- Uploaded files expose native video controls during the selection phase so you can choose the starting point before the overlay loop begins.
+- Long, high-resolution, or 4K files can exhaust browser memory. The interface exposes a JS heap readout to help detect when a clip is too heavy for the current browser session.
+- When you switch back to the webcam, the file source is released and its object URL is revoked.
 
 ## Writing a Ghostyle (Plugin)
 

ghostati-face-api.html

@@ -31,26 +31,69 @@
         <h1>ghòstati</h1>
         <div class="subtitle">
           Questo giocattolo sarà presentato al <a href="https://www.nina.watch/festival.html">Festival di NINA</a>, scopri di più <a
-            href="https://www.nina.watch/festival_eng.html" style="color: var(--accent-2);">(anche internazionale)</a>.
+            href="https://www.nina.watch/festival_eng.html" class="link-accent">(anche internazionale)</a>.
         </div>
       </div>
       <section class="about">
         <p>
-          Qui è tutto in ALPHA, se vuoi passa sul <a style="color: var(--accent-2);"
+          Qui è tutto in ALPHA, se vuoi passa sul <a class="link-accent"
             href="https://github.com/vecna/antagonistrucco">repository</a>.
         </p>
       </section>
     </header>
 
     <main class="layout">
       <section class="panel controls">
-        <div class="panel-header" id="diagnosisBox"
-          style="background: linear-gradient(135deg, rgba(159, 122, 234, 0.12), rgba(122, 162, 255, 0.08)); border-bottom: 1px solid rgba(159, 122, 234, 0.3); padding-bottom: 20px; text-align: center;">
-          <h2
-            style="color: var(--accent-2); margin-bottom: 12px; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase;">
+
+        <div class="panel-header panel-header-source" id="videoSourceBox">
+          <h2 class="panel-eyebrow-title">
+            Sorgente Video
+          </h2>
+          <div class="source-indicator" id="videoSourceIndicator">
+            Nessuna sorgente
+          </div>
+          <div class="stack stack-compact">
+            <button id="srcWebcamBtn" class="action-btn action-btn-source">Avvia Webcam</button>
+            <label for="srcFileInput" class="secondary-btn file-upload-label">Carica Video (Locale)</label>
+            <input type="file" id="srcFileInput" accept="video/*" class="file-input-hidden" />
+            <div id="fileInfoBox" class="file-info-box">
+                <span id="fileSizeLabel"></span><br>
+                <strong class="file-warning-label">Attenzione:</strong> I browser hanno limiti di risorse stringenti. Video lunghi o 4K possono causare crash di memoria.
+                <span id="memoryLabel" class="memory-label"></span>
+            </div>
+
+            <div id="phaseTransitionBox" class="phase-transition-box">
+                <button id="phaseStartBtn" class="action-btn action-btn-start-overlay">AVVIA OVERLAY</button>
+                <button id="phaseStopBtn" class="secondary-btn secondary-btn-stop">Ferma e Modifica Sorgente</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-card workflow-card">
+          <h3>Workflow sorgente</h3>
+          <div class="workflow-badges">
+            <span id="workflowSourceBadge" class="workflow-badge workflow-badge-source">nessuna sorgente</span>
+            <span id="workflowPhaseBadge" class="workflow-badge workflow-badge-phase">in attesa</span>
+          </div>
+          <p id="workflowHintTitle" class="workflow-hint-title">Seleziona da dove partire</p>
+          <p id="workflowHintText" class="workflow-hint-text">Con la webcam puoi iniziare subito. Con un file locale puoi prima scorrere il video, scegliere il punto utile e poi attivare l'overlay.</p>
+          <div class="workflow-grid">
+            <div id="workflowWebcamCard" class="workflow-mode-card">
+              <strong>Modalità webcam</strong>
+              <span>Feed live immediato, mirror del feed e scansione continua senza fase di scrub.</span>
+            </div>
+            <div id="workflowFileCard" class="workflow-mode-card">
+              <strong>Modalità file locale</strong>
+              <span>Controlli nativi del video in selezione, poi tracking e overlay sul playback quando avvii la fase dedicata.</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-header panel-header-diagnosis" id="diagnosisBox">
+          <h2 class="panel-eyebrow-title panel-eyebrow-title-accent">
             Verifica efficacia</h2>
-          <button id="scanBtn" class="action-btn" style="transition: all 0.3s ease;">Scansiona Faccia</button>
-          <button id="copyMakeupBtn" class="secondary-btn" disabled style="margin-top: 8px; font-size: 11px;">Copia
+          <button id="scanBtn" class="action-btn action-btn-scan">Scansiona Faccia</button>
+          <button id="copyMakeupBtn" class="secondary-btn secondary-btn-copy" disabled>Copia
             volto truccato</button>
         </div>
         <div class="panel-header">
@@ -77,44 +120,42 @@ <h3>Archivio locale</h3>
         <div class="viewer" id="viewer">
           <div class="status-pill"><span id="statusDot" class="status-dot"></span><span
               id="statusText">inizializzazione...</span></div>
-          <div id="placeholder">Caricamento modelli e richiesta webcam…</div>
+          <div id="placeholder">Caricamento modelli e inizializzazione sorgente video…</div>
           <video id="video" autoplay muted playsinline></video>
           <img id="previewImage" alt="preview diagnostica" />
           <canvas id="overlay"></canvas>
         </div>
         <div class="logbox" id="logBox">
-          <div class="log-line">In attesa dell’avvio della webcam…</div>
+          <div class="log-line">In attesa della selezione della sorgente video…</div>
         </div>
       </section>
 
       <section class="panel makeup">
         <div class="panel-header">
-          <p>Overlay live ancorati ai landmark del volto e visualizzati direttamente sulla webcam.</p>
+          <p>Overlay live ancorati ai landmark del volto e visualizzati direttamente sul feed video.</p>
         </div>
         <div class="stack" id="ghostylesContainer">
         </div>
 
-        <div style="padding: 0 16px 12px;">
-          <select id="fpsSelect" style="width: 100%; padding: 10px 14px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;">
+        <div class="select-wrap">
+          <select id="fpsSelect" class="fps-select">
             <option value="30">⚙️ Frequenza Rendering: 30ms (Pesante)</option>
             <option value="60">⚙️ Frequenza Rendering: 60ms (Veloce)</option>
             <option value="90">⚙️ Frequenza Rendering: 90ms (Media)</option>
             <option value="120" selected>⚙️ Frequenza Rendering: 120ms (Ecosostenibile)</option>
           </select>
         </div>
 
-        <div id="ghostyleDetails" class="stack"
-          style="padding-top: 0; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 0px; background-color: var(--accent-2); border-radius: 12px;">
-          <input type="url" id="remoteGhostyleUrl"
-            style="background: rgba(0,0,0,0.3); font-size:12px; text-align: left; padding: 10px; cursor: text;"
+        <div id="ghostyleDetails" class="stack ghostyle-details">
+          <input type="url" id="remoteGhostyleUrl" class="ghostyle-url-input"
             placeholder="https://.../urleffect.js" />
-          <button id="loadRemoteGhostyleBtn" class="secondary-btn" style="margin-top: -6px;">Carica Ghostyle
+          <button id="loadRemoteGhostyleBtn" class="secondary-btn ghostyle-load-btn">Carica Ghostyle
             Remoto</button>
-          <a href="ghostati-docs.html" class="btn-link" style="text-align: center; color: var(--bg);">📖 Sviluppa in
+          <a href="ghostati-docs.html" class="btn-link ghostyle-docs-link">📖 Sviluppa in
             Ghostyle</a>
         </div>
         <p class="small-note">
-          Un click attiva la guida sulla webcam; un secondo click sullo stesso pulsante la spegne e torna il feed
+          Un click attiva la guida sul feed selezionato; un secondo click sullo stesso pulsante la spegne e torna il feed
           pulito.
         </p>
         <div class="list-card">
@@ -128,7 +169,7 @@ <h3>Modalità attiva</h3>
   </div>
 
   <script src="https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/dist/face-api.min.js"></script>
-  <script src="scripts/ghostati-face-api.js"></script>
+  <script type="module" src="scripts/overlay.js"></script>
 </body>
 
 </html>