index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="theme-color" content="#070b14" />
  <title>VisualComputing | Interactive Computer Vision Lab</title>
  <meta name="description" content="Laboratorio de computer vision en el navegador: dibujo por gestos, detección de objetos/cuerpo, geometría facial y visualizaciones WebGL controladas con las manos." />
  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
  <link rel="preconnect" href="https://storage.googleapis.com" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="app-shell">
    <header class="topbar">
      <div>
        <p class="eyebrow">APEPSIS · VISUAL COMPUTING</p>
        <h1>Interactive Vision Lab</h1>
      </div>
      <div class="camera-actions">
        <button id="startCamera" class="button primary">Activar cámara</button>
        <button id="switchCamera" class="button ghost" disabled>Cambiar cámara</button>
      </div>
    </header>

    <nav class="mode-tabs" aria-label="Modos de visión">
      <button class="mode-tab active" data-mode="draw">
        <span class="mode-number">01</span>
        <span><strong>Gesture Draw</strong><small>Dibuja con los dedos</small></span>
      </button>
      <button class="mode-tab" data-mode="detect">
        <span class="mode-number">02</span>
        <span><strong>Scene Vision</strong><small>Objetos + pose corporal</small></span>
      </button>
      <button class="mode-tab" data-mode="face">
        <span class="mode-number">03</span>
        <span><strong>Face Geometry</strong><small>Rostro + ojos + métricas</small></span>
      </button>
      <button class="mode-tab domain-tab" data-mode="domain">
        <span class="mode-number">04</span>
        <span><strong>JJK Domain Lab</strong><small>Gojo · Limitless gestures</small></span>
      </button>
    </nav>

    <main class="workspace">
      <section class="vision-stage" aria-label="Vista de cámara">
        <div id="cameraPlaceholder" class="camera-placeholder">
          <div class="scanner-orb"></div>
          <h2>Cámara inactiva</h2>
          <p>Activa la cámara para iniciar el procesamiento local.</p>
        </div>
        <video id="webcam" autoplay playsinline muted></video>
        <canvas id="drawCanvas"></canvas>
        <canvas id="overlayCanvas"></canvas>
        <canvas id="manaCanvas" aria-label="Gathering mana particle effects"></canvas>
        <canvas id="domainCanvas" aria-label="JJK WebGL effects"></canvas>

        <div class="stage-hud top-left">
          <span id="liveDot" class="live-dot"></span>
          <span id="cameraStatus">OFFLINE</span>
        </div>
        <div class="stage-hud top-right">
          <span id="fpsValue">0 FPS</span>
        </div>
        <div id="modeHint" class="stage-hint">Junta pulgar + índice, arrastra y suelta.</div>
      </section>

      <aside class="control-panel">
        <section class="panel-section mode-panel active" data-panel="draw">
          <div class="section-heading">
            <div><span class="kicker">MODO 01</span><h2>Gesture Draw</h2></div>
            <span id="handState" class="status-pill">Sin mano</span>
          </div>
          <p class="panel-copy">El índice funciona como cursor. Haz un <strong>pinch</strong> con pulgar + índice para crear una figura.</p>

          <label class="field-label">Figura</label>
          <div class="shape-grid" id="shapeGrid">
            <button class="shape-button active" data-shape="rectangle">▭ <span>Rectángulo</span></button>
            <button class="shape-button" data-shape="square">□ <span>Cuadrado</span></button>
            <button class="shape-button" data-shape="circle">○ <span>Círculo</span></button>
            <button class="shape-button" data-shape="line">╱ <span>Línea</span></button>
            <button class="shape-button" data-shape="freehand">⌁ <span>Libre</span></button>
          </div>

          <div class="control-row">
            <label>Grosor <input id="lineWidth" type="range" min="2" max="14" value="5" /></label>
          </div>
          <div class="button-row">
            <button id="clearDraw" class="button ghost grow">Limpiar</button>
            <button id="saveDraw" class="button secondary grow">Guardar PNG</button>
          </div>

          <div class="metric-grid compact">
            <div class="metric"><span>Manos</span><strong id="handsCount">0</strong></div>
            <div class="metric"><span>Pinch</span><strong id="pinchMetric">—</strong></div>
          </div>
        </section>

        <section class="panel-section mode-panel" data-panel="detect">
          <div class="section-heading">
            <div><span class="kicker">MODO 02</span><h2>Scene Vision</h2></div>
            <span id="sceneState" class="status-pill">Esperando</span>
          </div>
          <p class="panel-copy">Detecta objetos comunes con cajas y, si aparece una persona, superpone landmarks corporales.</p>

          <div class="summary-card">
            <span class="field-label">La cámara está viendo</span>
            <div id="sceneSummary" class="scene-summary">Activa la cámara para analizar la escena.</div>
          </div>

          <div class="metric-grid">
            <div class="metric"><span>Objetos</span><strong id="objectCount">0</strong></div>
            <div class="metric"><span>Personas</span><strong id="personCount">0</strong></div>
            <div class="metric"><span>Pose</span><strong id="poseStatus">OFF</strong></div>
            <div class="metric"><span>Conf. máx.</span><strong id="maxConfidence">—</strong></div>
          </div>

          <div class="detected-list" id="detectedList"></div>
        </section>

        <section class="panel-section mode-panel" data-panel="face">
          <div class="section-heading">
            <div><span class="kicker">MODO 03</span><h2>Face Geometry</h2></div>
            <span id="faceState" class="status-pill">Sin rostro</span>
          </div>
          <p class="panel-copy">Mide geometría visible del rostro en tiempo real. No identifica personas, no guarda plantillas biométricas y no infiere atributos sensibles.</p>

          <div class="metric-grid">
            <div class="metric"><span>Rostros</span><strong id="faceCount">0</strong></div>
            <div class="metric"><span>Landmarks</span><strong id="landmarkCount">0</strong></div>
            <div class="metric"><span>Dist. ojos</span><strong id="eyeDistance">—</strong></div>
            <div class="metric"><span>Ancho rostro</span><strong id="faceWidth">—</strong></div>
            <div class="metric"><span>Ojo izq.</span><strong id="leftEyeOpen">—</strong></div>
            <div class="metric"><span>Ojo der.</span><strong id="rightEyeOpen">—</strong></div>
            <div class="metric"><span>Roll</span><strong id="rollValue">—</strong></div>
            <div class="metric"><span>Yaw aprox.</span><strong id="yawValue">—</strong></div>
          </div>

          <div class="privacy-note">
            <strong>Procesamiento local</strong>
            <span>Los frames se procesan en tu navegador. Esta demo no envía capturas a un servidor propio.</span>
          </div>
        </section>

        <section class="panel-section mode-panel domain-panel" data-panel="domain">
          <div class="section-heading">
            <div><span class="kicker domain-kicker">MODO 04 · JJK</span><h2>Limitless Domain Lab</h2></div>
            <span id="domainState" class="status-pill domain-status">READY</span>
          </div>
          <p class="panel-copy">Gojo-inspired gesture-controlled particles and layered geometric energy spheres rendered with MediaPipe + Three.js.</p>

          <div class="domain-technique-card blue-technique">
            <div><span>LEFT HAND</span><strong>Blue</strong></div>
            <span id="leftGesture" class="status-pill">OPEN</span>
            <b id="blueCharge">0%</b>
          </div>
          <div class="domain-technique-card red-technique">
            <div><span>RIGHT HAND</span><strong>Red</strong></div>
            <span id="rightGesture" class="status-pill">OPEN</span>
            <b id="redCharge">0%</b>
          </div>

          <div class="domain-sequence">
            <div><span>01</span><p>Cross index + middle fingers on the <strong>left hand</strong> to charge Blue.</p></div>
            <div><span>02</span><p>Cross index + middle fingers on the <strong>right hand</strong> to charge Red.</p></div>
            <div><span>03</span><p>When both are ready, bring both hands together to create <strong>Hollow Purple</strong>.</p></div>
            <div><span>04</span><p>Keep Purple in one hand, open it, then make a fast throwing motion to fire it in a straight line.</p></div>
          </div>

          <div class="metric-grid compact">
            <div class="metric"><span>Fusion</span><strong id="fusionState">WAITING</strong></div>
            <div class="metric"><span>Projectile</span><strong id="projectileState">—</strong></div>
          </div>

          <button id="resetDomain" class="button domain-reset">Reset technique</button>

          <div class="domain-library">
            <span class="field-label">Domain slots</span>
            <div class="domain-slot active"><span>01</span><strong>Gojo · Limitless</strong></div>
            <div class="domain-slot locked"><span>02</span><strong>Coming soon</strong></div>
            <div class="domain-slot locked"><span>03</span><strong>Coming soon</strong></div>
          </div>
        </section>

        <section class="runtime-card">
          <div><span class="runtime-dot"></span><span id="runtimeStatus">Modelos bajo demanda</span></div>
          <small id="runtimeDetail">Activa la cámara y selecciona un modo.</small>
        </section>
      </aside>
    </main>

    <footer>
      <span>VisualComputing · Browser Computer Vision</span>
      <span>MediaPipe · TensorFlow.js · Three.js · WebGL</span>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js"></script>
  <script type="module" src="app.js"></script>
  <script type="module" src="gojo-domain.js"></script>
  <script type="module" src="mana-particles.js"></script>
</body>
</html>