Spaces:

Islamckennon
/

mirage

Paused

MacBook pro commited on Sep 26

Commit

766cb66

1 Parent(s): 662ffc5

feat: upgrade frontend to enterprise-grade premium design

- Redesigned UI with modern Inter font and professional color scheme
- Implemented responsive grid layout with mobile-first approach
- Added real-time status indicators with animated states
- Enhanced WebRTC interface with premium video controls
- Integrated comprehensive metrics dashboard
- Added toast notifications and loading states
- Improved error handling and user feedback
- Created enterprise-grade component library
- Maintained all existing WebRTC and face swap functionality
- Added micro-interactions and smooth animations

Files changed (4) hide show

.github/instructions.md +0 -17
static/index.html +590 -108
static/webrtc_enterprise.js +807 -0
static/webrtc_prod.js +279 -53

.github/instructions.md DELETED Viewed

@@ -1,17 +0,0 @@
-Prime Directive:
-Deliver production-ready, systemic solutions to root causes. Prioritize core utility and absolute system integrity. There is zero tolerance for surface patches, brittle fixes, or non-functional code.
-Mandatory Protocol:
-Map the System: Before acting, map all relevant logic flows, data transformations, and dependencies. Identify all side effects.
-Isolate Root Cause: Diagnose the fundamental issue with code-based evidence. Ensure the fix is systemic and permanent.
-Align with Utility: Every change must advance the project's core objective. Reject low-impact optimizations.
-Implementation Mandates:
-Code Integrity: All code must be robust, generalizable, and directly executable. Prohibit all hardcoding, duplication, and placeholder logic.
-Quality & Security: Enforce static typing, descriptive naming, and strict linting. Validate all I/O, eliminate unsafe calls, and add regression guards.
-Testing: Test coverage must target both the symptom and its root cause. The full test suite must pass without warnings.
-Execution Workflow:
-Analyze system flow.
-Confirm root cause.
-Plan solution.
-Implement the robust fix.
-Validate with all tests.
-Document systemic insights.

static/index.html CHANGED Viewed

@@ -2,142 +2,624 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Mirage Real-time AI Avatar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <style>
     body {
-      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
-      margin: 20px;
-      background: #1a1a1a;
-      color: #fff;
-    }
-    .container { max-width: 1200px; margin: 0 auto; }
-    .header { text-align: center; margin-bottom: 30px; }
-    .controls {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
       align-items: center;
     }
-    .video-container {
-      display: flex;
-      gap: 20px;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .video-box {
-      flex: 1;
-      min-width: 300px;
-      background: #2a2a2a;
-      border-radius: 8px;
-      padding: 15px;
-    }
-    video, img, canvas {
-      width: 100%;
-      border-radius: 8px;
-      background: #000;
     }
-    .video-box video {
       width: 100%;
-      height: 360px;
-      object-fit: cover;
     }
-    button {
-      background: #007bff;
-      color: white;
       border: none;
-      padding: 10px 16px;
-      border-radius: 5px;
       cursor: pointer;
-      font-size: 14px;
-    }
-    button:hover { background: #0056b3; }
-    button:disabled {
-      background: #6c757d;
-      cursor: not-allowed;
-    }
-    .status {
-      padding: 10px;
-      border-radius: 5px;
-      margin: 10px 0;
-    }
-    .status.success { background: #28a745; }
-    .status.error { background: #dc3545; }
-    .status.info { background: #17a2b8; }
-    #log {
-      font: 11px/1.3 monospace;
-      white-space: pre-line;
-      background: #000;
-      padding: 15px;
-      border-radius: 8px;
-      height: 200px;
-      overflow-y: auto;
-      color: #0f0;
-    }
-    .metrics {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 15px;
-      margin: 20px 0;
     }
-    .metric-card {
-      background: #2a2a2a;
-      padding: 15px;
-      border-radius: 8px;
-      border-left: 4px solid #007bff;
     }
     .metric-value {
-      font-size: 24px;
-      font-weight: bold;
-      color: #007bff;
     }
     .metric-label {
-      font-size: 12px;
-      color: #888;
       text-transform: uppercase;
     }
-    input[type="file"] {
-      margin: 10px 0;
     }
-    .virtual-camera-info {
-      background: #2a2a2a;
-      padding: 15px;
-      border-radius: 8px;
-      margin: 20px 0;
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="header">
-      <h1>Mirage Realtime Avatar</h1>
-      <p class="subtitle">Production Preview</p>
-    </div>
-    <div class="controls" id="controls">
-      <input type="file" id="referenceInput" accept="image/*" title="Reference Image" />
-      <button id="initBtn">Initialize AI Pipeline</button>
-      <button id="debugBtn" title="Fetch /debug/models and log to console">Debug Models</button>
-      <button id="connectBtn">Connect</button>
-      <button id="disconnectBtn" disabled>Disconnect</button>
-      <span id="statusText" style="margin-left:auto;font-size:12px;color:#888;">Idle</span>
-    </div>
-    <div class="video-container">
-      <div class="video-box">
-        <h3>Local</h3>
-        <video id="localVideo" autoplay muted playsinline></video>
-      </div>
-      <div class="video-box">
-        <h3>Avatar</h3>
-  <video id="remoteVideo" autoplay playsinline muted></video>
       </div>
     </div>
-    <div id="perfBar" style="font-size:12px;color:#bbb;margin-top:10px;">Latency: -- ms · FPS: -- · GPU: --</div>
-  <script src="/static/webrtc_prod.js"></script>
   </div>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>Mirage AI Avatar Studio</title>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    :root {
+      --primary: #6366f1;
+      --primary-dark: #4f46e5;
+      --primary-light: #818cf8;
+      --secondary: #06b6d4;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --error: #ef4444;
+      --gray-50: #f9fafb;
+      --gray-100: #f3f4f6;
+      --gray-200: #e5e7eb;
+      --gray-300: #d1d5db;
+      --gray-400: #9ca3af;
+      --gray-500: #6b7280;
+      --gray-600: #4b5563;
+      --gray-700: #374151;
+      --gray-800: #1f2937;
+      --gray-900: #111827;
+      --bg-primary: #0a0a0b;
+      --bg-secondary: #141417;
+      --bg-tertiary: #1c1c20;
+      --text-primary: #ffffff;
+      --text-secondary: #a1a1aa;
+      --text-tertiary: #71717a;
+      --border: #27272a;
+      --border-light: #3f3f46;
+      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+      --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    * { box-sizing: border-box; }
     body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 0;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
+      overflow-x: hidden;
+    }
+    .app-container {
+      min-height: 100vh;
+      background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+    }
+    .header {
+      padding: 2rem 0;
+      text-align: center;
+      position: relative;
+      z-index: 10;
+    }
+    .header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 4px;
+      background: var(--gradient-primary);
+      border-radius: 2px;
+    }
+    .header h1 {
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      font-weight: 700;
+      margin: 1rem 0 0.5rem;
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      letter-spacing: -0.02em;
+    }
+    .header .subtitle {
+      font-size: 1.125rem;
+      color: var(--text-secondary);
+      margin: 0;
+      font-weight: 400;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+    }
+    .main-layout {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      margin-bottom: 3rem;
+    }
+    @media (min-width: 1024px) {
+      .main-layout {
+        grid-template-columns: 1fr 320px;
+      }
+    }
+    .content-area {
+      min-width: 0;
+    }
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+    .control-panel {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      box-shadow: var(--shadow-lg);
+    }
+    .control-panel h3 {
+      margin: 0 0 1rem;
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      display: flex;
       align-items: center;
+      gap: 0.5rem;
     }
+    .control-panel h3::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      background: var(--primary);
+      border-radius: 50%;
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .file-upload {
+      position: relative;
+      display: block;
     }
+    .file-upload input[type="file"] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0,0,0,0);
+      border: 0;
+    }
+    .file-upload-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
       width: 100%;
+      padding: 1rem;
+      background: var(--bg-tertiary);
+      border: 2px dashed var(--border-light);
+      border-radius: 0.75rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-weight: 500;
     }
+    .file-upload-button:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+      background: rgba(99, 102, 241, 0.05);
+    }
+    .file-upload-button.has-file {
+      border-color: var(--success);
+      color: var(--success);
+      background: rgba(16, 185, 129, 0.05);
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 0.75rem 1.5rem;
       border: none;
+      border-radius: 0.75rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-decoration: none;
       cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .btn::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+      transition: left 0.5s ease;
+    }
+    .btn:hover::before {
+      left: 100%;
+    }
+    .btn-primary {
+      background: var(--gradient-primary);
+      color: white;
+    }
+    .btn-primary:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--shadow-lg);
+    }
+    .btn-secondary {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+      border: 1px solid var(--border-light);
+    }
+    .btn-secondary:hover {
+      background: var(--bg-secondary);
+      border-color: var(--primary);
+    }
+    .btn-success {
+      background: var(--success);
+      color: white;
+    }
+    .btn-danger {
+      background: var(--error);
+      color: white;
+    }
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none !important;
+    }
+    .status-indicator {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 1rem;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+    .status-idle .status-dot { background: var(--gray-500); }
+    .status-connecting .status-dot { background: var(--warning); }
+    .status-connected .status-dot { background: var(--success); }
+    .status-error .status-dot { background: var(--error); }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .video-container {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    @media (min-width: 768px) {
+      .video-container {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    .video-panel {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      position: relative;
+      overflow: hidden;
+    }
+    .video-panel::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--gradient-primary);
+    }
+    .video-panel h3 {
+      margin: 0 0 1rem;
+      font-size: 1.125rem;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .video-wrapper {
+      position: relative;
+      border-radius: 0.75rem;
+      overflow: hidden;
+      background: #000;
+      aspect-ratio: 16/9;
+    }
+    .video-wrapper video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 0.75rem;
+    }
+    .video-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      font-size: 0.875rem;
+      opacity: 1;
+      transition: opacity 0.3s ease;
+    }
+    .video-wrapper.active .video-overlay {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .metrics-panel {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 1rem;
+      padding: 1.5rem;
+    }
+    .metrics-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 1rem;
     }
+    .metric-item {
+      text-align: center;
+      padding: 1rem;
+      background: var(--bg-tertiary);
+      border-radius: 0.5rem;
+      border: 1px solid var(--border);
     }
     .metric-value {
+      display: block;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 0.25rem;
     }
     .metric-label {
+      font-size: 0.75rem;
+      color: var(--text-tertiary);
       text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 500;
+    }
+    .loading-spinner {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border: 2px solid transparent;
+      border-top: 2px solid currentColor;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .toast {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 0.75rem;
+      padding: 1rem 1.5rem;
+      box-shadow: var(--shadow-xl);
+      z-index: 1000;
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      max-width: 400px;
     }
+    .toast.show {
+      transform: translateX(0);
     }
+    .toast-success {
+      border-left: 4px solid var(--success);
+    }
+    .toast-error {
+      border-left: 4px solid var(--error);
+    }
+    .toast-warning {
+      border-left: 4px solid var(--warning);
+    }
+    @media (max-width: 768px) {
+      .container {
+        padding: 0 1rem;
+      }
+      .header {
+        padding: 1.5rem 0;
+      }
+      .main-layout {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+      .sidebar {
+        order: -1;
+      }
+      .toast {
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+        max-width: none;
+      }
     }
   </style>
 </head>
 <body>
+  <div class="app-container">
+    <div class="container">
+      <div class="header">
+        <h1>Mirage AI Avatar Studio</h1>
+        <p class="subtitle">Enterprise-Grade Real-Time Identity Transformation</p>
+      </div>
+      <div class="main-layout">
+        <div class="content-area">
+          <div class="video-container">
+            <div class="video-panel">
+              <h3>
+                Local Camera
+                <span class="status-indicator status-idle" id="localStatus">
+                  <span class="status-dot"></span>
+                  <span id="localStatusText">Inactive</span>
+                </span>
+              </h3>
+              <div class="video-wrapper" id="localWrapper">
+                <video id="localVideo" autoplay muted playsinline></video>
+                <div class="video-overlay" id="localOverlay">
+                  <span>Click Connect to start camera</span>
+                </div>
+              </div>
+            </div>
+            <div class="video-panel">
+              <h3>
+                AI Avatar
+                <span class="status-indicator status-idle" id="avatarStatus">
+                  <span class="status-dot"></span>
+                  <span id="avatarStatusText">Inactive</span>
+                </span>
+              </h3>
+              <div class="video-wrapper" id="avatarWrapper">
+                <video id="remoteVideo" autoplay playsinline muted></video>
+                <div class="video-overlay" id="avatarOverlay">
+                  <span>Avatar feed will appear here</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="metrics-panel">
+            <h3>Performance Metrics</h3>
+            <div class="metrics-grid">
+              <div class="metric-item">
+                <span class="metric-value" id="latencyValue">--</span>
+                <span class="metric-label">Latency (ms)</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-value" id="fpsValue">--</span>
+                <span class="metric-label">FPS</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-value" id="gpuValue">--</span>
+                <span class="metric-label">GPU Usage</span>
+              </div>
+              <div class="metric-item">
+                <span class="metric-value" id="qualityValue">--</span>
+                <span class="metric-label">Quality</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sidebar">
+          <div class="control-panel">
+            <h3>Reference Image</h3>
+            <label class="file-upload">
+              <input type="file" id="referenceInput" accept="image/*" />
+              <div class="file-upload-button" id="uploadButton">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17,8 12,3 7,8"/>
+                  <line x1="12" y1="3" x2="12" y2="15"/>
+                </svg>
+                <span id="uploadText">Choose Reference Image</span>
+              </div>
+            </label>
+          </div>
+          <div class="control-panel">
+            <h3>Pipeline Control</h3>
+            <div class="controls">
+              <button id="initBtn" class="btn btn-secondary">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="3"/>
+                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                </svg>
+                Initialize Pipeline
+              </button>
+              <button id="connectBtn" class="btn btn-primary">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                  <polyline points="22,4 12,14.01 9,11.01"/>
+                </svg>
+                Connect
+              </button>
+              <button id="disconnectBtn" class="btn btn-danger" disabled>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M18 6 6 18"/>
+                  <path d="M6 6l12 12"/>
+                </svg>
+                Disconnect
+              </button>
+              <button id="debugBtn" class="btn btn-secondary" title="Debug Models">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M20 6 9 17l-5-5"/>
+                </svg>
+                Debug
+              </button>
+            </div>
+          </div>
+          <div class="control-panel">
+            <h3>System Status</h3>
+            <div class="status-indicator" id="systemStatus">
+              <span class="status-dot"></span>
+              <span id="statusText">System Idle</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="toast" id="toast">
+    <div id="toastContent"></div>
   </div>
+  <script src="/static/webrtc_enterprise.js"></script>
 </body>
 </html>

static/webrtc_enterprise.js ADDED Viewed

	@@ -0,0 +1,807 @@

+/* Enterprise-grade WebRTC client for Mirage AI Avatar Studio */
+(function(){
+  'use strict';
+  // Application state
+  const state = {
+    pc: null,
+    control: null,
+    localStream: null,
+    metricsTimer: null,
+    referenceImage: null,
+    connected: false,
+    authToken: null,
+    connecting: false,
+    cancelled: false,
+    initialized: false
+  };
+  // URL parameters
+  const params = new URLSearchParams(location.search);
+  const FORCE_RELAY_URL = params.get('relay') === '1';
+  const VERBOSE = (window.MIRAGE_WEBRTC_VERBOSE === true) || (params.get('wv') === '1');
+  const STATS_INTERVAL_MS = window.MIRAGE_WEBRTC_STATS_INTERVAL_MS || 5000;
+  let statsTimer = null;
+  // DOM Elements
+  const els = {
+    // File upload
+    ref: document.getElementById('referenceInput'),
+    uploadButton: document.getElementById('uploadButton'),
+    uploadText: document.getElementById('uploadText'),
+    // Control buttons
+    init: document.getElementById('initBtn'),
+    debug: document.getElementById('debugBtn'),
+    connect: document.getElementById('connectBtn'),
+    disconnect: document.getElementById('disconnectBtn'),
+    // Video elements
+    localVideo: document.getElementById('localVideo'),
+    remoteVideo: document.getElementById('remoteVideo'),
+    localWrapper: document.getElementById('localWrapper'),
+    avatarWrapper: document.getElementById('avatarWrapper'),
+    localOverlay: document.getElementById('localOverlay'),
+    avatarOverlay: document.getElementById('avatarOverlay'),
+    // Status indicators
+    systemStatus: document.getElementById('systemStatus'),
+    localStatus: document.getElementById('localStatus'),
+    avatarStatus: document.getElementById('avatarStatus'),
+    statusText: document.getElementById('statusText'),
+    localStatusText: document.getElementById('localStatusText'),
+    avatarStatusText: document.getElementById('avatarStatusText'),
+    // Metrics
+    latencyValue: document.getElementById('latencyValue'),
+    fpsValue: document.getElementById('fpsValue'),
+    gpuValue: document.getElementById('gpuValue'),
+    qualityValue: document.getElementById('qualityValue'),
+    // Toast
+    toast: document.getElementById('toast'),
+    toastContent: document.getElementById('toastContent')
+  };
+  // Utility Functions
+  function log(...args) {
+    console.log('[MIRAGE]', ...args);
+  }
+  function vlog(...args) {
+    if(VERBOSE) console.log('[MIRAGE][VERBOSE]', ...args);
+  }
+  // UI Helper Functions
+  function setSystemStatus(status, text) {
+    if (els.systemStatus) {
+      els.systemStatus.className = `status-indicator status-${status}`;
+    }
+    if (els.statusText) {
+      els.statusText.textContent = text;
+    }
+  }
+  function setLocalStatus(status, text) {
+    if (els.localStatus) {
+      els.localStatus.className = `status-indicator status-${status}`;
+    }
+    if (els.localStatusText) {
+      els.localStatusText.textContent = text;
+    }
+  }
+  function setAvatarStatus(status, text) {
+    if (els.avatarStatus) {
+      els.avatarStatus.className = `status-indicator status-${status}`;
+    }
+    if (els.avatarStatusText) {
+      els.avatarStatusText.textContent = text;
+    }
+  }
+  function showToast(message, type = 'info') {
+    if (els.toastContent && els.toast) {
+      els.toastContent.textContent = message;
+      els.toast.className = `toast toast-${type} show`;
+      setTimeout(() => {
+        els.toast.classList.remove('show');
+      }, 4000);
+    }
+  }
+  function updateMetrics(latency, fps, gpu, quality = 'HD') {
+    if (els.latencyValue) els.latencyValue.textContent = latency || '--';
+    if (els.fpsValue) els.fpsValue.textContent = fps || '--';
+    if (els.gpuValue) els.gpuValue.textContent = gpu || '--';
+    if (els.qualityValue) els.qualityValue.textContent = quality || '--';
+  }
+  function setButtonLoading(button, loading = true) {
+    if (!button) return;
+    if (loading) {
+      button.disabled = true;
+      const originalText = button.innerHTML;
+      button.dataset.originalText = originalText;
+      button.innerHTML = '<span class="loading-spinner"></span> Processing...';
+    } else {
+      button.disabled = false;
+      if (button.dataset.originalText) {
+        button.innerHTML = button.dataset.originalText;
+        delete button.dataset.originalText;
+      }
+    }
+  }
+  function setStatus(txt) {
+    setSystemStatus('idle', txt);
+  }
+  // WebRTC Diagnostics
+  function attachPcDiagnostics(pc) {
+    if (!pc) return;
+    const evMap = ['signalingstatechange','iceconnectionstatechange','icegatheringstatechange','connectionstatechange','negotiationneeded'];
+    evMap.forEach(ev => {
+      pc.addEventListener(ev, () => { vlog('pc event', ev, diagSnapshot()); });
+    });
+    pc.addEventListener('track', ev => { vlog('pc track event', ev.track && ev.track.kind, ev.streams && ev.streams.length); });
+    pc.onicecandidate = (e) => {
+      if (e.candidate) {
+        vlog('ice candidate', e.candidate.type, e.candidate.protocol, e.candidate.address, e.candidate.relatedAddress||null);
+      } else {
+        vlog('ice candidate gathering complete');
+      }
+    };
+  }
+  function diagSnapshot() {
+    if (!state.pc) return {};
+    return {
+      signaling: state.pc.signalingState,
+      iceConnection: state.pc.iceConnectionState,
+      iceGathering: state.pc.iceGatheringState,
+      connection: state.pc.connectionState,
+      localTracks: state.pc.getSenders().map(s => ({kind: s.track && s.track.kind, ready: s.track && s.track.readyState})),
+      remoteTracks: state.pc.getReceivers().map(r => ({kind: r.track && r.track.kind, ready: r.track && r.track.readyState}))
+    };
+  }
+  async function collectStats() {
+    if (!state.pc) return;
+    try {
+      const stats = await state.pc.getStats();
+      const summary = { ts: Date.now(), outbound: {}, inbound: {}, candidatePairs: [] };
+      stats.forEach(report => {
+        if (report.type === 'outbound-rtp' && !report.isRemote) {
+          summary.outbound[report.kind || report.mediaType || 'unknown'] = {
+            bitrateKbps: report.bytesSent && report.timestamp ? undefined : undefined,
+            frames: report.framesEncoded,
+            q: report.qualityLimitationReason,
+            packetsSent: report.packetsSent
+          };
+        } else if (report.type === 'inbound-rtp' && !report.isRemote) {
+          summary.inbound[report.kind || report.mediaType || 'unknown'] = {
+            jitter: report.jitter,
+            packetsLost: report.packetsLost,
+            frames: report.framesDecoded,
+            packetsReceived: report.packetsReceived
+          };
+        } else if (report.type === 'candidate-pair' && report.state === 'succeeded') {
+          summary.candidatePairs.push({
+            current: report.nominated,
+            bytesSent: report.bytesSent,
+            bytesReceived: report.bytesReceived,
+            rtt: report.currentRoundTripTime,
+            availableOutgoingBitrate: report.availableOutgoingBitrate
+          });
+        }
+      });
+      vlog('webrtc stats', summary);
+    } catch(e) {
+      vlog('stats error', e);
+    }
+  }
+  // Reference Image Handler
+  async function handleReference(e) {
+    const file = e.target.files && e.target.files[0];
+    if (!file) {
+      if (els.uploadButton) els.uploadButton.classList.remove('has-file');
+      if (els.uploadText) els.uploadText.textContent = 'Choose Reference Image';
+      return;
+    }
+    // Update UI immediately
+    if (els.uploadButton) els.uploadButton.classList.add('has-file');
+    if (els.uploadText) els.uploadText.textContent = `✓ ${file.name}`;
+    showToast(`Reference image selected: ${file.name}`, 'success');
+    // Cache base64 for datachannel use
+    const buf = await file.arrayBuffer();
+    const b64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
+    state.referenceImage = b64;
+    // Upload to server
+    try {
+      setSystemStatus('connecting', 'Uploading reference image...');
+      const fd = new FormData();
+      fd.append('file', new Blob([buf], {type: file.type || 'application/octet-stream'}), file.name || 'reference');
+      const resp = await fetch('/set_reference', {method: 'POST', body: fd});
+      const jr = await resp.json().catch(() => ({}));
+      if (resp.ok && jr && (jr.status === 'success' || jr.status === 'ok')) {
+        setSystemStatus('connected', 'Reference image uploaded successfully');
+        showToast('Reference image set successfully', 'success');
+      } else {
+        setSystemStatus('error', 'Reference upload failed');
+        showToast('Failed to upload reference image', 'error');
+        console.warn('set_reference response', resp.status, jr);
+      }
+    } catch(err) {
+      console.warn('set_reference error', err);
+      setSystemStatus('error', 'Reference upload error');
+      showToast('Error uploading reference image', 'error');
+    }
+    // Send via data channel if already connected
+    try {
+      if (state.connected && state.control && state.control.readyState === 'open') {
+        state.control.send(JSON.stringify({type: 'set_reference', image_base64: state.referenceImage}));
+        showToast('Reference updated in live session', 'success');
+      }
+    } catch(_) {}
+  }
+  // WebRTC Connection
+  async function connect(options) {
+    const overrideRelay = options && options.forceRelay === true;
+    if (state.connected || state.connecting) return;
+    try {
+      setSystemStatus('connecting', 'Requesting camera access...');
+      setLocalStatus('connecting', 'Initializing');
+      setButtonLoading(els.connect, true);
+      els.disconnect.disabled = false;
+      state.cancelled = false;
+      state.connecting = true;
+      // Ping WebRTC router
+      try {
+        const ping = await fetch('/webrtc/ping');
+        if (ping.ok) {
+          const j = await ping.json();
+          log('webrtc ping', j);
+        }
+      } catch(_) {}
+      // Get auth token
+      let authToken = state.authToken;
+      try {
+        const t = await fetch('/webrtc/token');
+        if (t.ok) {
+          const j = await t.json();
+          authToken = j.token;
+          state.authToken = authToken;
+        } else if (t.status === 404) {
+          console.warn('Token endpoint 404 - proceeding without token');
+        }
+      } catch(_) {}
+      // Get user media
+      state.localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
+      els.localVideo.srcObject = state.localStream;
+      if (els.localWrapper) els.localWrapper.classList.add('active');
+      setLocalStatus('connected', 'Camera Active');
+      try {
+        els.localVideo.play && els.localVideo.play();
+      } catch(_) {}
+      setSystemStatus('connecting', 'Establishing connection...');
+      // Get ICE configuration
+      let iceCfg = {iceServers: [{urls: ['stun:stun.l.google.com:19302']}]};
+      try {
+        const ic = await fetch('/webrtc/ice_config');
+        if (ic.ok) { iceCfg = await ic.json(); }
+      } catch(_) {}
+      state._lastIceCfg = iceCfg;
+      if (overrideRelay || FORCE_RELAY_URL || iceCfg.forceRelay === true) {
+        iceCfg.iceTransportPolicy = 'relay';
+      }
+      log('ice config', iceCfg);
+      // Create peer connection
+      state.pc = new RTCPeerConnection(iceCfg);
+      attachPcDiagnostics(state.pc);
+      state._usedRelay = !!iceCfg.iceTransportPolicy && iceCfg.iceTransportPolicy === 'relay';
+      state._relayFallbackTried = !!overrideRelay || !!FORCE_RELAY_URL;
+      // Connection state handlers
+      state.pc.oniceconnectionstatechange = () => {
+        log('ice state', state.pc.iceConnectionState);
+        if (['failed', 'closed'].includes(state.pc.iceConnectionState)) {
+          if (!state.cancelled) disconnect();
+        }
+        if (state.pc.iceConnectionState === 'disconnected') {
+          vlog('ICE disconnected snapshot', diagSnapshot());
+        }
+      };
+      state.pc.onconnectionstatechange = () => {
+        const st = state.pc.connectionState;
+        log('pc state', st);
+        if (st === 'connected' && !statsTimer) {
+          statsTimer = setInterval(collectStats, STATS_INTERVAL_MS);
+        }
+        if (st === 'disconnected') {
+          vlog('PC disconnected snapshot', diagSnapshot());
+          try {
+            state.pc.restartIce && state.pc.restartIce();
+            vlog('Attempted ICE restart');
+          } catch(_) {}
+        }
+        if (['failed', 'closed'].includes(st)) {
+          if (statsTimer) {
+            clearInterval(statsTimer);
+            statsTimer = null;
+          }
+          const hasTurn = state._lastIceCfg && (state._lastIceCfg.turnCount || 0) > 0;
+          const tryRelay = hasTurn && !state._usedRelay && !state._relayFallbackTried;
+          const snapshot = diagSnapshot();
+          vlog('Final failure snapshot', snapshot, {hasTurn, usedRelay: state._usedRelay, relayTried: state._relayFallbackTried});
+          disconnect().then(() => {
+            if (tryRelay) {
+              state._relayFallbackTried = true;
+              log('retrying with relay-only');
+              setSystemStatus('connecting', 'Retrying with TURN relay...');
+              connect({forceRelay: true});
+            } else if (!hasTurn && !state._usedRelay && !state._relayFallbackTried) {
+              log('skipping relay-only retry: no TURN servers available');
+              setSystemStatus('error', 'No TURN servers available');
+              showToast('Connection failed - no TURN servers available', 'error');
+            }
+          });
+        }
+      };
+      // Track handler
+      state.pc.ontrack = ev => {
+        try {
+          const tr = ev.track;
+          log('ontrack', tr && tr.kind, tr && tr.readyState, ev.streams && ev.streams.length);
+          if (tr && tr.kind === 'video') {
+            setSystemStatus('connected', 'Avatar stream received');
+            setAvatarStatus('connected', 'Active');
+            let stream;
+            if (ev.streams && ev.streams[0]) {
+              stream = ev.streams[0];
+              log('Using provided stream:', stream.id, 'tracks:', stream.getTracks().length);
+            } else {
+              stream = new MediaStream([ev.track]);
+              log('Created new MediaStream:', stream.id);
+            }
+            // Set video source
+            log('Setting srcObject on video element');
+            els.remoteVideo.srcObject = null;
+            els.remoteVideo.srcObject = stream;
+            if (els.avatarWrapper) els.avatarWrapper.classList.add('active');
+            // Video event handlers
+            els.remoteVideo.onloadeddata = () => {
+              log('video: loadeddata, attempting play()');
+              els.remoteVideo.play().catch(e => {
+                log('play error', e.name, e.message);
+                setTimeout(() => {
+                  log('Retry play() after error...');
+                  els.remoteVideo.play().catch(e2 => log('Retry play failed:', e2.name));
+                }, 100);
+              });
+            };
+            els.remoteVideo.onplaying = () => {
+              log('video: playing');
+              showToast('Avatar stream connected successfully', 'success');
+            };
+            els.remoteVideo.onerror = (e) => {
+              log('video error:', e);
+              setAvatarStatus('error', 'Stream Error');
+            };
+            // Track state handlers
+            tr.onended = () => {
+              log('video track ended');
+              setAvatarStatus('idle', 'Disconnected');
+              if (els.avatarWrapper) els.avatarWrapper.classList.remove('active');
+            };
+            tr.onmute = () => {
+              log('video track muted');
+              setAvatarStatus('warning', 'Muted');
+            };
+            tr.onunmute = () => {
+              log('video track unmuted');
+              setAvatarStatus('connected', 'Active');
+            };
+          } else if (tr && tr.kind === 'audio') {
+            setSystemStatus('connected', 'Audio stream received');
+          }
+        } catch(e) {
+          log('ontrack error', e);
+          setAvatarStatus('error', 'Connection Error');
+        }
+      };
+      // Data channel setup
+      state.control = state.pc.createDataChannel('control');
+      state.control.onopen = () => {
+        setSystemStatus('connected', 'WebRTC connection established');
+        state.connected = true;
+        state.connecting = false;
+        setButtonLoading(els.connect, false);
+        els.connect.disabled = true;
+        els.disconnect.disabled = false;
+        showToast('WebRTC connection established', 'success');
+        // Send reference image if available
+        if (state.referenceImage) {
+          try {
+            state.control.send(JSON.stringify({type: 'set_reference', image_base64: state.referenceImage}));
+            showToast('Reference image sent to avatar', 'success');
+          } catch(e) {
+            showToast('Failed to send reference image', 'error');
+          }
+        }
+        // Start metrics polling
+        state.metricsTimer = setInterval(() => {
+          try {
+            state.control.send(JSON.stringify({type: 'metrics_request'}));
+          } catch(_) {}
+        }, 4000);
+      };
+      state.control.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          if (data.type === 'metrics' && data.payload) {
+            updatePerf(data.payload);
+          } else if (data.type === 'reference_ack') {
+            setSystemStatus('connected', 'Reference acknowledged');
+          } else if (data.type === 'error' && data.message) {
+            setSystemStatus('error', 'Error: ' + data.message);
+            showToast('Avatar error: ' + data.message, 'error');
+          }
+        } catch(_) {}
+      };
+      // Add local tracks
+      state.localStream.getTracks().forEach(t => state.pc.addTrack(t, state.localStream));
+      // Create offer
+      const offer = await state.pc.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true});
+      await state.pc.setLocalDescription(offer);
+      // Wait for ICE gathering
+      setSystemStatus('connecting', 'Gathering ICE candidates...');
+      await new Promise((resolve) => {
+        if (state.pc.iceGatheringState === 'complete') return resolve();
+        const timeout = setTimeout(() => { resolve(); }, 7000);
+        state.pc.onicegatheringstatechange = () => {
+          if (state.pc.iceGatheringState === 'complete') {
+            clearTimeout(timeout);
+            resolve();
+          }
+        };
+      });
+      // Send offer to server
+      setSystemStatus('connecting', 'Negotiating connection...');
+      const headers = {'Content-Type': 'application/json'};
+      if (authToken) headers['X-Auth-Token'] = authToken;
+      const ld = state.pc.localDescription;
+      const r = await fetch('/webrtc/offer', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({sdp: ld.sdp, type: ld.type})
+      });
+      if (!r.ok) {
+        let bodyText = '';
+        try { bodyText = await r.text(); } catch(_) {}
+        if (r.status === 401 || r.status === 403) {
+          setSystemStatus('error', 'Unauthorized (check API key/token)');
+          showToast('Authentication failed', 'error');
+        } else {
+          setSystemStatus('error', `Server error: ${r.status}`);
+          showToast(`Connection failed: ${r.status}`, 'error');
+        }
+        throw new Error(`Server returned ${r.status}: ${bodyText}`);
+      }
+      const answer = await r.json();
+      await state.pc.setRemoteDescription(new RTCSessionDescription(answer));
+      log('WebRTC negotiation complete');
+    } catch(e) {
+      log('connect error', e);
+      setSystemStatus('error', 'Connection failed');
+      showToast('Failed to establish connection', 'error');
+      state.connecting = false;
+      setButtonLoading(els.connect, false);
+      throw e;
+    }
+  }
+  // Disconnect
+  async function disconnect() {
+    if (state.cancelled) return;
+    state.cancelled = true;
+    log('disconnecting...');
+    // Clear timers
+    if (statsTimer) {
+      clearInterval(statsTimer);
+      statsTimer = null;
+    }
+    if (state.metricsTimer) {
+      clearInterval(state.metricsTimer);
+      state.metricsTimer = null;
+    }
+    // Close connections
+    if (state.control) {
+      try {
+        state.control.onmessage = null;
+        state.control.close();
+      } catch(_) {}
+    }
+    if (state.pc) {
+      try {
+        state.pc.ontrack = null;
+        state.pc.onconnectionstatechange = null;
+        state.pc.oniceconnectionstatechange = null;
+        state.pc.onicegatheringstatechange = null;
+        state.pc.close();
+      } catch(_) {}
+    }
+    if (state.localStream) {
+      try {
+        state.localStream.getTracks().forEach(t => t.stop());
+      } catch(_) {}
+    }
+    // Clear media elements and UI state
+    try {
+      els.localVideo.srcObject = null;
+      if (els.localWrapper) els.localWrapper.classList.remove('active');
+      setLocalStatus('idle', 'Inactive');
+    } catch(_) {}
+    try {
+      if (els.remoteVideo.srcObject) {
+        els.remoteVideo.pause();
+        els.remoteVideo.srcObject = null;
+      }
+      if (els.avatarWrapper) els.avatarWrapper.classList.remove('active');
+      setAvatarStatus('idle', 'Inactive');
+    } catch(_) {}
+    // Reset metrics
+    updateMetrics('--', '--', '--', '--');
+    // Server cleanup
+    try {
+      const hdrs = {};
+      if (state.authToken) hdrs['X-Auth-Token'] = state.authToken;
+      await fetch('/webrtc/cleanup', {method: 'POST', headers: hdrs});
+    } catch(_) {}
+    // Reset state
+    state.pc = null;
+    state.control = null;
+    state.localStream = null;
+    state.connected = false;
+    state.connecting = false;
+    setButtonLoading(els.connect, false);
+    els.connect.disabled = false;
+    els.disconnect.disabled = true;
+    setSystemStatus('idle', 'Disconnected');
+    showToast('Connection terminated', 'warning');
+  }
+  // Performance metrics update
+  function updatePerf(metrics) {
+    try {
+      const latency = metrics.latency_ms ? `${Math.round(metrics.latency_ms)}` : '--';
+      const fps = metrics.fps ? `${Math.round(metrics.fps)}` : '--';
+      const gpu = metrics.gpu_memory_used_mb ? `${Math.round(metrics.gpu_memory_used_mb)}MB` : '--';
+      const quality = metrics.quality || (fps > 25 ? 'HD' : fps > 15 ? 'SD' : 'Low');
+      updateMetrics(latency, fps, gpu, quality);
+      // Update connection quality
+      if (metrics.latency_ms) {
+        if (metrics.latency_ms < 100) {
+          setAvatarStatus('connected', 'Excellent');
+        } else if (metrics.latency_ms < 250) {
+          setAvatarStatus('connected', 'Good');
+        } else {
+          setAvatarStatus('warning', 'High Latency');
+        }
+      }
+    } catch(e) {
+      console.warn('updatePerf error', e);
+    }
+  }
+  // Event Handlers
+  function initializeEventListeners() {
+    // Reference image upload
+    if (els.ref) {
+      els.ref.addEventListener('change', handleReference);
+    }
+    // Initialize pipeline
+    if (els.init) {
+      els.init.addEventListener('click', async () => {
+        try {
+          setSystemStatus('connecting', 'Initializing AI pipeline...');
+          setButtonLoading(els.init, true);
+          const r = await fetch('/initialize', {method: 'POST'});
+          const j = await r.json().catch(() => ({}));
+          if (r.ok && j && (j.status === 'success' || j.status === 'already_initialized')) {
+            state.initialized = true;
+            setSystemStatus('connected', j.message || 'Pipeline initialized');
+            showToast('AI pipeline initialized successfully', 'success');
+            els.init.classList.remove('btn-secondary');
+            els.init.classList.add('btn-success');
+            els.init.innerHTML = `
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                <polyline points="22,4 12,14.01 9,11.01"/>
+              </svg>
+              Pipeline Ready
+            `;
+          } else {
+            setSystemStatus('error', 'Pipeline initialization failed');
+            showToast('Failed to initialize AI pipeline', 'error');
+            console.warn('initialize response', r.status, j);
+          }
+        } catch(e) {
+          setSystemStatus('error', 'Pipeline initialization error');
+          showToast('Error initializing AI pipeline', 'error');
+        } finally {
+          setButtonLoading(els.init, false);
+        }
+      });
+    }
+    // Debug
+    if (els.debug) {
+      els.debug.addEventListener('click', async () => {
+        try {
+          setSystemStatus('connecting', 'Fetching debug information...');
+          setButtonLoading(els.debug, true);
+          const r = await fetch('/debug/models');
+          const j = await r.json();
+          console.log('[DEBUG] /debug/models', j);
+          const modelCount = Object.keys(j.files || {}).length;
+          const existingModels = Object.values(j.files || {}).filter(f => f.exists).length;
+          showToast(`Debug: ${existingModels}/${modelCount} models loaded`, 'info');
+          const inswapper = j.files?.['inswapper_128_fp16.onnx'] || j.files?.['inswapper_128.onnx'];
+          const codeformer = j.files?.['codeformer.pth'];
+          const statusText = `Models: InSwapper=${inswapper?.exists?'✓':'✗'}, CodeFormer=${codeformer?.exists?'✓':'✗'}`;
+          setSystemStatus(inswapper?.exists ? 'connected' : 'warning', statusText);
+          if (!inswapper?.exists) {
+            setSystemStatus('connecting', 'Downloading models...');
+            try {
+              const d = await fetch('/debug/download_models', {method: 'POST'});
+              const dj = await d.json().catch(() => ({}));
+              console.log('[DEBUG] /debug/download_models', dj);
+              showToast('Model download initiated', 'info');
+              setTimeout(async () => {
+                const r2 = await fetch('/debug/models');
+                const j2 = await r2.json();
+                const inswapper2 = j2.files?.['inswapper_128_fp16.onnx'] || j2.files?.['inswapper_128.onnx'];
+                const newStatus = `Models refreshed: InSwapper=${inswapper2?.exists?'✓':'✗'}`;
+                setSystemStatus(inswapper2?.exists ? 'connected' : 'warning', newStatus);
+              }, 2000);
+            } catch(e) {
+              showToast('Model download failed', 'error');
+              console.warn('download_models failed', e);
+            }
+          }
+        } catch(e) {
+          setSystemStatus('error', 'Debug fetch failed');
+          showToast('Failed to fetch debug information', 'error');
+        } finally {
+          setButtonLoading(els.debug, false);
+        }
+      });
+    }
+    // Connect/Disconnect
+    if (els.connect) {
+      els.connect.addEventListener('click', () => connect());
+    }
+    if (els.disconnect) {
+      els.disconnect.addEventListener('click', () => disconnect());
+    }
+  }
+  // Auto-initialization
+  async function autoInitialize() {
+    try {
+      setSystemStatus('connecting', 'Auto-initializing system...');
+      const r = await fetch('/initialize', {method: 'POST'});
+      const j = await r.json().catch(() => ({}));
+      if (r.ok && j && (j.status === 'success' || j.status === 'already_initialized')) {
+        state.initialized = true;
+        setSystemStatus('connected', j.message || 'System ready');
+        if (els.init) {
+          els.init.classList.remove('btn-secondary');
+          els.init.classList.add('btn-success');
+          els.init.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+              <polyline points="22,4 12,14.01 9,11.01"/>
+            </svg>
+            Pipeline Ready
+          `;
+        }
+      } else {
+        console.warn('auto-initialize response', r.status, j);
+        setSystemStatus('idle', 'Click Initialize to start');
+      }
+    } catch(e) {
+      setSystemStatus('idle', 'Click Initialize to start');
+    }
+  }
+  // Initialize application
+  function init() {
+    log('Initializing Mirage AI Avatar Studio');
+    initializeEventListeners();
+    autoInitialize();
+  }
+  // Start the application when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

static/webrtc_prod.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/* Production-focused WebRTC client (replaces dev UI). */
 (function(){
   const state = {
     pc: null,
@@ -9,23 +9,130 @@
     connected: false,
     authToken: null,
     connecting: false,
-    cancelled: false
   };
   const params = new URLSearchParams(location.search);
   const FORCE_RELAY_URL = params.get('relay') === '1';
   const els = {
     ref: document.getElementById('referenceInput'),
     init: document.getElementById('initBtn'),
     debug: document.getElementById('debugBtn'),
     connect: document.getElementById('connectBtn'),
     disconnect: document.getElementById('disconnectBtn'),
     localVideo: document.getElementById('localVideo'),
     remoteVideo: document.getElementById('remoteVideo'),
-    status: document.getElementById('statusText'),
-    perf: document.getElementById('perfBar')
   };
-  function setStatus(txt){ els.status.textContent = txt; }
-  function log(...a){ console.log('[PROD]', ...a); }
   // Verbose toggle (can be overridden by backend-provided global or URL param ?wv=1)
   const VERBOSE = (window.MIRAGE_WEBRTC_VERBOSE === true) || (new URLSearchParams(location.search).get('wv')==='1');
   const STATS_INTERVAL_MS = (window.MIRAGE_WEBRTC_STATS_INTERVAL_MS) || 5000;
@@ -91,28 +198,43 @@
   async function handleReference(e){
     const file = e.target.files && e.target.files[0];
-    if(!file) return;
     // Cache base64 for datachannel use
     const buf = await file.arrayBuffer();
     const b64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
     state.referenceImage = b64;
     // Also POST to HTTP endpoint so the pipeline has the reference even before WebRTC connects
     try {
-      setStatus('Uploading reference...');
       const fd = new FormData();
       fd.append('file', new Blob([buf], {type: file.type||'application/octet-stream'}), file.name||'reference');
       const resp = await fetch('/set_reference', {method:'POST', body: fd});
       const jr = await resp.json().catch(()=>({}));
       if (resp.ok && jr && (jr.status==='success' || jr.status==='ok')){
-        setStatus('Reference set');
       } else {
-        setStatus('Reference upload failed');
         console.warn('set_reference response', resp.status, jr);
       }
     } catch(err){
       console.warn('set_reference error', err);
-      setStatus('Reference upload error');
     }
     // If already connected, also send via data channel for immediate in-session update
     try {
       if (state.connected && state.control && state.control.readyState === 'open') {
@@ -126,8 +248,9 @@
     if(state.connected) return;
     if(state.connecting) return;
     try {
-      setStatus('Requesting media');
-      els.connect.disabled = true;
       els.disconnect.disabled = false; // allow cancel during negotiation
       state.cancelled = false; state.connecting = true;
       // Quick ping to verify router is mounted
@@ -147,10 +270,12 @@
           console.warn('Token endpoint 404 - proceeding without token');
         }
       } catch(_){}
-  state.localStream = await navigator.mediaDevices.getUserMedia({video:true,audio:true});
-  els.localVideo.srcObject = state.localStream;
-  try { els.localVideo.play && els.localVideo.play(); } catch(_) {}
-      setStatus('Creating peer');
       let iceCfg = {iceServers:[{urls:['stun:stun.l.google.com:19302']}]};
       try {
         const ic = await fetch('/webrtc/ice_config');
@@ -206,8 +331,8 @@
           const tr = ev.track;
           log('ontrack', tr && tr.kind, tr && tr.readyState, ev.streams && ev.streams.length);
           if (tr && tr.kind === 'video') {
-            // Only handle video track for remote video element
-            setStatus('Video track received');
             let stream;
             if(ev.streams && ev.streams[0]){
               stream = ev.streams[0];
@@ -221,6 +346,7 @@
             log('Setting srcObject on video element, current value:', els.remoteVideo.srcObject);
             els.remoteVideo.srcObject = null;
             els.remoteVideo.srcObject = stream;
             log('srcObject set, waiting for loadeddata...');
             // Add more event listeners for debugging
@@ -237,27 +363,56 @@
                 }, 100);
               });
             };
-            els.remoteVideo.onplaying = () => log('video: playing');
-            els.remoteVideo.onerror = (e) => log('video error:', e);
             els.remoteVideo.onstalled = () => log('video: stalled');
             // Monitor video track state changes
-            tr.onended = () => log('video track ended');
-            tr.onmute = () => log('video track muted');
-            tr.onunmute = () => log('video track unmuted');
           } else if (tr && tr.kind === 'audio') {
-            setStatus('Audio track received');
           }
-        } catch(e){ log('ontrack error', e); }
       };
       state.control = state.pc.createDataChannel('control');
       state.control.onopen = ()=>{
-        setStatus('Connected');
         state.connected = true;
         els.disconnect.disabled = false;
         if(state.referenceImage){
-          try { state.control.send(JSON.stringify({type:'set_reference', image_base64: state.referenceImage})); } catch(e) {}
         }
         // Metrics polling
         state.metricsTimer = setInterval(()=>{
@@ -342,80 +497,151 @@
     if(state.control){ try { state.control.onmessage=null; state.control.close(); }catch(_){} }
     if(state.pc){ try { state.pc.ontrack=null; state.pc.onconnectionstatechange=null; state.pc.oniceconnectionstatechange=null; state.pc.onicegatheringstatechange=null; state.pc.close(); }catch(_){} }
     if(state.localStream){ try { state.localStream.getTracks().forEach(t=>t.stop()); } catch(_){} }
-    // Clear media elements
-    try { els.localVideo.srcObject = null; } catch(_){}
     try {
       if (els.remoteVideo.srcObject) {
         els.remoteVideo.pause();
         els.remoteVideo.srcObject = null;
       }
     } catch(_){}
     // Best-effort server cleanup
     try {
       const hdrs = {};
       if (state.authToken) hdrs['X-Auth-Token'] = state.authToken;
       await fetch('/webrtc/cleanup', {method:'POST', headers: hdrs});
     } catch(_){ }
     state.pc=null; state.control=null; state.localStream=null; state.connected=false; state.connecting=false;
-    els.connect.disabled=false; els.disconnect.disabled=true; setStatus('Idle');
   }
   els.ref.addEventListener('change', handleReference);
   if (els.init) {
     els.init.addEventListener('click', async ()=>{
       try {
-        setStatus('Initializing pipeline...');
-        els.init.disabled = true;
         const r = await fetch('/initialize', {method:'POST'});
         const j = await r.json().catch(()=>({}));
         if (r.ok && j && (j.status==='success' || j.status==='already_initialized')){
-          setStatus(j.message || 'Initialized');
         } else {
-          setStatus('Init failed');
           console.warn('initialize response', r.status, j);
         }
       } catch(e){
-        setStatus('Init error');
       } finally {
-        els.init.disabled = false;
       }
     });
   }
   if (els.debug) {
     els.debug.addEventListener('click', async ()=>{
       try {
-        setStatus('Fetching debug info...');
         const r = await fetch('/debug/models');
         const j = await r.json();
         console.log('[DEBUG] /debug/models', j);
         const app = j.files?.['appearance_feature_extractor.onnx'];
         const motion = j.files?.['motion_extractor.onnx'];
-        let statusText = `ONNX: app=${app?.exists?'✔':'✖'}(${app?.size_bytes||0}), motion=${motion?.exists?'✔':'✖'}(${motion?.size_bytes||0})`;
-        setStatus(statusText);
-        // If missing, try to force a download now
-        if (!app?.exists) {
-          setStatus('Downloading models...');
           try {
             const d = await fetch('/debug/download_models', {method:'POST'});
             const dj = await d.json().catch(()=>({}));
             console.log('[DEBUG] /debug/download_models', dj);
-            // Refresh presence
-            const r2 = await fetch('/debug/models');
-            const j2 = await r2.json();
-            const app2 = j2.files?.['appearance_feature_extractor.onnx'];
-            const motion2 = j2.files?.['motion_extractor.onnx'];
-            statusText = `ONNX: app=${app2?.exists?'✔':'✖'}(${app2?.size_bytes||0}), motion=${motion2?.exists?'✔':'✖'}(${motion2?.size_bytes||0})`;
-            setStatus(statusText);
-          } catch(e){
             console.warn('download_models failed', e);
-            setStatus('Download failed');
           }
         }
       } catch(e){
-        setStatus('Debug fetch failed');
       }
     });
   }
   els.connect.addEventListener('click', connect);
   els.disconnect.addEventListener('click', disconnect);

+/* Enterprise-grade WebRTC client with premium UI integration */
 (function(){
   const state = {
     pc: null,
     connected: false,
     authToken: null,
     connecting: false,
+    cancelled: false,
+    initialized: false
   };
   const params = new URLSearchParams(location.search);
   const FORCE_RELAY_URL = params.get('relay') === '1';
   const els = {
+    // File upload
     ref: document.getElementById('referenceInput'),
+    uploadButton: document.getElementById('uploadButton'),
+    uploadText: document.getElementById('u  // Auto-initialize on page load (idempotent)
+  (async ()=>{
+    try {
+      setSystemStatus('connecting', 'Auto-initializing pipeline...');
+      const r = await fetch('/initialize', {method:'POST'});
+      const j = await r.json().catch(()=>({}));
+      if (r.ok && j && (j.status==='success' || j.status==='already_initialized')){
+        state.initialized = true;
+        setSystemStatus('connected', j.message || 'System ready');
+        if (els.init) {
+          els.init.classList.remove('btn-secondary');
+          els.init.classList.add('btn-success');
+          els.init.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+              <polyline points="22,4 12,14.01 9,11.01"/>
+            </svg>
+            Pipeline Ready
+          `;
+        }
+      } else {
+        console.warn('auto-initialize response', r.status, j);
+        setSystemStatus('idle', 'Click Initialize to start');
+      }
+    } catch(e){
+      setSystemStatus('idle', 'Click Initialize to start');
+    }
+  })();    // Control buttons
     init: document.getElementById('initBtn'),
     debug: document.getElementById('debugBtn'),
     connect: document.getElementById('connectBtn'),
     disconnect: document.getElementById('disconnectBtn'),
+    // Video elements
     localVideo: document.getElementById('localVideo'),
     remoteVideo: document.getElementById('remoteVideo'),
+    localWrapper: document.getElementById('localWrapper'),
+    avatarWrapper: document.getElementById('avatarWrapper'),
+    localOverlay: document.getElementById('localOverlay'),
+    avatarOverlay: document.getElementById('avatarOverlay'),
+    // Status indicators
+    systemStatus: document.getElementById('systemStatus'),
+    localStatus: document.getElementById('localStatus'),
+    avatarStatus: document.getElementById('avatarStatus'),
+    statusText: document.getElementById('statusText'),
+    localStatusText: document.getElementById('localStatusText'),
+    avatarStatusText: document.getElementById('avatarStatusText'),
+    // Metrics
+    latencyValue: document.getElementById('latencyValue'),
+    fpsValue: document.getElementById('fpsValue'),
+    gpuValue: document.getElementById('gpuValue'),
+    qualityValue: document.getElementById('qualityValue'),
+    // Toast
+    toast: document.getElementById('toast'),
+    toastContent: document.getElementById('toastContent')
   };
+  // UI Helper Functions
+  function setSystemStatus(status, text) {
+    els.systemStatus.className = `status-indicator status-${status}`;
+    els.statusText.textContent = text;
+  }
+  function setLocalStatus(status, text) {
+    els.localStatus.className = `status-indicator status-${status}`;
+    els.localStatusText.textContent = text;
+  }
+  function setAvatarStatus(status, text) {
+    els.avatarStatus.className = `status-indicator status-${status}`;
+    els.avatarStatusText.textContent = text;
+  }
+  function showToast(message, type = 'info') {
+    els.toastContent.textContent = message;
+    els.toast.className = `toast toast-${type} show`;
+    setTimeout(() => {
+      els.toast.classList.remove('show');
+    }, 4000);
+  }
+  function updateMetrics(latency, fps, gpu, quality = 'HD') {
+    els.latencyValue.textContent = latency || '--';
+    els.fpsValue.textContent = fps || '--';
+    els.gpuValue.textContent = gpu || '--';
+    els.qualityValue.textContent = quality || '--';
+  }
+  function setButtonLoading(button, loading = true) {
+    if (loading) {
+      button.disabled = true;
+      const originalText = button.innerHTML;
+      button.dataset.originalText = originalText;
+      button.innerHTML = '<span class="loading-spinner"></span> Processing...';
+    } else {
+      button.disabled = false;
+      if (button.dataset.originalText) {
+        button.innerHTML = button.dataset.originalText;
+        delete button.dataset.originalText;
+      }
+    }
+  }
+  function setStatus(txt) {
+    setSystemStatus('idle', txt);
+  }
+  function log(...a) {
+    console.log('[MIRAGE]', ...a);
+  }
   // Verbose toggle (can be overridden by backend-provided global or URL param ?wv=1)
   const VERBOSE = (window.MIRAGE_WEBRTC_VERBOSE === true) || (new URLSearchParams(location.search).get('wv')==='1');
   const STATS_INTERVAL_MS = (window.MIRAGE_WEBRTC_STATS_INTERVAL_MS) || 5000;
   async function handleReference(e){
     const file = e.target.files && e.target.files[0];
+    if(!file) {
+      els.uploadButton.classList.remove('has-file');
+      els.uploadText.textContent = 'Choose Reference Image';
+      return;
+    }
+    // Update UI immediately
+    els.uploadButton.classList.add('has-file');
+    els.uploadText.textContent = `✓ ${file.name}`;
+    showToast(`Reference image selected: ${file.name}`, 'success');
     // Cache base64 for datachannel use
     const buf = await file.arrayBuffer();
     const b64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
     state.referenceImage = b64;
     // Also POST to HTTP endpoint so the pipeline has the reference even before WebRTC connects
     try {
+      setSystemStatus('connecting', 'Uploading reference image...');
       const fd = new FormData();
       fd.append('file', new Blob([buf], {type: file.type||'application/octet-stream'}), file.name||'reference');
       const resp = await fetch('/set_reference', {method:'POST', body: fd});
       const jr = await resp.json().catch(()=>({}));
       if (resp.ok && jr && (jr.status==='success' || jr.status==='ok')){
+        setSystemStatus('connected', 'Reference image uploaded successfully');
+        showToast('Reference image set successfully', 'success');
       } else {
+        setSystemStatus('error', 'Reference upload failed');
+        showToast('Failed to upload reference image', 'error');
         console.warn('set_reference response', resp.status, jr);
       }
     } catch(err){
       console.warn('set_reference error', err);
+      setSystemStatus('error', 'Reference upload error');
+      showToast('Error uploading reference image', 'error');
     }
     // If already connected, also send via data channel for immediate in-session update
     try {
       if (state.connected && state.control && state.control.readyState === 'open') {
     if(state.connected) return;
     if(state.connecting) return;
     try {
+      setSystemStatus('connecting', 'Requesting camera access...');
+      setLocalStatus('connecting', 'Initializing');
+      setButtonLoading(els.connect, true);
       els.disconnect.disabled = false; // allow cancel during negotiation
       state.cancelled = false; state.connecting = true;
       // Quick ping to verify router is mounted
           console.warn('Token endpoint 404 - proceeding without token');
         }
       } catch(_){}
+      state.localStream = await navigator.mediaDevices.getUserMedia({video:true,audio:true});
+      els.localVideo.srcObject = state.localStream;
+      els.localWrapper.classList.add('active');
+      setLocalStatus('connected', 'Camera Active');
+      try { els.localVideo.play && els.localVideo.play(); } catch(_) {}
+      setSystemStatus('connecting', 'Establishing connection...');
       let iceCfg = {iceServers:[{urls:['stun:stun.l.google.com:19302']}]};
       try {
         const ic = await fetch('/webrtc/ice_config');
           const tr = ev.track;
           log('ontrack', tr && tr.kind, tr && tr.readyState, ev.streams && ev.streams.length);
           if (tr && tr.kind === 'video') {
+            setSystemStatus('connected', 'Avatar stream received');
+            setAvatarStatus('connected', 'Active');
             let stream;
             if(ev.streams && ev.streams[0]){
               stream = ev.streams[0];
             log('Setting srcObject on video element, current value:', els.remoteVideo.srcObject);
             els.remoteVideo.srcObject = null;
             els.remoteVideo.srcObject = stream;
+            els.avatarWrapper.classList.add('active');
             log('srcObject set, waiting for loadeddata...');
             // Add more event listeners for debugging
                 }, 100);
               });
             };
+            els.remoteVideo.onplaying = () => {
+              log('video: playing');
+              showToast('Avatar stream connected successfully', 'success');
+            };
+            els.remoteVideo.onerror = (e) => {
+              log('video error:', e);
+              setAvatarStatus('error', 'Stream Error');
+            };
             els.remoteVideo.onstalled = () => log('video: stalled');
             // Monitor video track state changes
+            tr.onended = () => {
+              log('video track ended');
+              setAvatarStatus('idle', 'Disconnected');
+              els.avatarWrapper.classList.remove('active');
+            };
+            tr.onmute = () => {
+              log('video track muted');
+              setAvatarStatus('warning', 'Muted');
+            };
+            tr.onunmute = () => {
+              log('video track unmuted');
+              setAvatarStatus('connected', 'Active');
+            };
           } else if (tr && tr.kind === 'audio') {
+            setSystemStatus('connected', 'Audio stream received');
           }
+        } catch(e){
+          log('ontrack error', e);
+          setAvatarStatus('error', 'Connection Error');
+        }
       };
       state.control = state.pc.createDataChannel('control');
       state.control.onopen = ()=>{
+        setSystemStatus('connected', 'WebRTC connection established');
         state.connected = true;
+        state.connecting = false;
+        setButtonLoading(els.connect, false);
+        els.connect.disabled = true;
         els.disconnect.disabled = false;
+        showToast('WebRTC connection established', 'success');
         if(state.referenceImage){
+          try {
+            state.control.send(JSON.stringify({type:'set_reference', image_base64: state.referenceImage}));
+            showToast('Reference image sent to avatar', 'success');
+          } catch(e) {
+            showToast('Failed to send reference image', 'error');
+          }
         }
         // Metrics polling
         state.metricsTimer = setInterval(()=>{
     if(state.control){ try { state.control.onmessage=null; state.control.close(); }catch(_){} }
     if(state.pc){ try { state.pc.ontrack=null; state.pc.onconnectionstatechange=null; state.pc.oniceconnectionstatechange=null; state.pc.onicegatheringstatechange=null; state.pc.close(); }catch(_){} }
     if(state.localStream){ try { state.localStream.getTracks().forEach(t=>t.stop()); } catch(_){} }
+    // Clear media elements and UI state
+    try {
+      els.localVideo.srcObject = null;
+      els.localWrapper.classList.remove('active');
+      setLocalStatus('idle', 'Inactive');
+    } catch(_){}
     try {
       if (els.remoteVideo.srcObject) {
         els.remoteVideo.pause();
         els.remoteVideo.srcObject = null;
       }
+      els.avatarWrapper.classList.remove('active');
+      setAvatarStatus('idle', 'Inactive');
     } catch(_){}
+    // Reset metrics
+    updateMetrics('--', '--', '--', '--');
     // Best-effort server cleanup
     try {
       const hdrs = {};
       if (state.authToken) hdrs['X-Auth-Token'] = state.authToken;
       await fetch('/webrtc/cleanup', {method:'POST', headers: hdrs});
     } catch(_){ }
     state.pc=null; state.control=null; state.localStream=null; state.connected=false; state.connecting=false;
+    setButtonLoading(els.connect, false);
+    els.connect.disabled=false; els.disconnect.disabled=true;
+    setSystemStatus('idle', 'Disconnected');
+    showToast('Connection terminated', 'warning');
   }
   els.ref.addEventListener('change', handleReference);
   if (els.init) {
     els.init.addEventListener('click', async ()=>{
       try {
+        setSystemStatus('connecting', 'Initializing AI pipeline...');
+        setButtonLoading(els.init, true);
         const r = await fetch('/initialize', {method:'POST'});
         const j = await r.json().catch(()=>({}));
         if (r.ok && j && (j.status==='success' || j.status==='already_initialized')){
+          state.initialized = true;
+          setSystemStatus('connected', j.message || 'Pipeline initialized');
+          showToast('AI pipeline initialized successfully', 'success');
+          els.init.classList.remove('btn-secondary');
+          els.init.classList.add('btn-success');
+          els.init.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+              <polyline points="22,4 12,14.01 9,11.01"/>
+            </svg>
+            Pipeline Ready
+          `;
         } else {
+          setSystemStatus('error', 'Pipeline initialization failed');
+          showToast('Failed to initialize AI pipeline', 'error');
           console.warn('initialize response', r.status, j);
         }
       } catch(e){
+        setSystemStatus('error', 'Pipeline initialization error');
+        showToast('Error initializing AI pipeline', 'error');
       } finally {
+        setButtonLoading(els.init, false);
       }
     });
   }
   if (els.debug) {
     els.debug.addEventListener('click', async ()=>{
       try {
+        setSystemStatus('connecting', 'Fetching debug information...');
+        setButtonLoading(els.debug, true);
         const r = await fetch('/debug/models');
         const j = await r.json();
         console.log('[DEBUG] /debug/models', j);
+        // Show debug info in toast
+        const modelCount = Object.keys(j.files || {}).length;
+        const existingModels = Object.values(j.files || {}).filter(f => f.exists).length;
+        showToast(`Debug: ${existingModels}/${modelCount} models loaded`, 'info');
         const app = j.files?.['appearance_feature_extractor.onnx'];
         const motion = j.files?.['motion_extractor.onnx'];
+        const inswapper = j.files?.['inswapper_128_fp16.onnx'] || j.files?.['inswapper_128.onnx'];
+        let statusText = `Models: InSwapper=${inswapper?.exists?'✓':'✗'}, App=${app?.exists?'✓':'✗'}, Motion=${motion?.exists?'✓':'✗'}`;
+        setSystemStatus(inswapper?.exists ? 'connected' : 'warning', statusText);
+        // If missing critical models, try to download
+        if (!inswapper?.exists) {
+          setSystemStatus('connecting', 'Downloading models...');
           try {
             const d = await fetch('/debug/download_models', {method:'POST'});
             const dj = await d.json().catch(()=>({}));
             console.log('[DEBUG] /debug/download_models', dj);
+            showToast('Model download initiated', 'info');
+            // Refresh model status
+            setTimeout(async () => {
+              const r2 = await fetch('/debug/models');
+              const j2 = await r2.json();
+              const inswapper2 = j2.files?.['inswapper_128_fp16.onnx'] || j2.files?.['inswapper_128.onnx'];
+              const newStatus = `Models refreshed: InSwapper=${inswapper2?.exists?'✓':'✗'}`;
+              setSystemStatus(inswapper2?.exists ? 'connected' : 'warning', newStatus);
+            }, 2000);
+          } catch(e) {
+            showToast('Model download failed', 'error');
             console.warn('download_models failed', e);
           }
         }
       } catch(e){
+        setSystemStatus('error', 'Debug fetch failed');
+        showToast('Failed to fetch debug information', 'error');
+      } finally {
+        setButtonLoading(els.debug, false);
       }
     });
   }
+  // Update performance metrics display
+  function updatePerf(metrics) {
+    try {
+      const latency = metrics.latency_ms ? `${Math.round(metrics.latency_ms)}` : '--';
+      const fps = metrics.fps ? `${Math.round(metrics.fps)}` : '--';
+      const gpu = metrics.gpu_memory_used_mb ? `${Math.round(metrics.gpu_memory_used_mb)}MB` : '--';
+      const quality = metrics.quality || (fps > 25 ? 'HD' : fps > 15 ? 'SD' : 'Low');
+      updateMetrics(latency, fps, gpu, quality);
+      // Update connection quality indicator
+      if (metrics.latency_ms) {
+        if (metrics.latency_ms < 100) {
+          setAvatarStatus('connected', 'Excellent');
+        } else if (metrics.latency_ms < 250) {
+          setAvatarStatus('connected', 'Good');
+        } else {
+          setAvatarStatus('warning', 'High Latency');
+        }
+      }
+    } catch(e) {
+      console.warn('updatePerf error', e);
+    }
+  }
+  // Event listeners
   els.connect.addEventListener('click', connect);
   els.disconnect.addEventListener('click', disconnect);