Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ContentGuard Supreme Console</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <canvas id="fluid-canvas"></canvas> | |
| <div class="scanline"></div> | |
| <div class="ambient-orb orb-a"></div> | |
| <div class="ambient-orb orb-b"></div> | |
| <div class="app-shell"> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="logo-icon"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <div class="brand-info"> | |
| <h1 class="brand-text">ContentGuard</h1> | |
| <p class="brand-subtitle">Supreme Ops Console</p> | |
| </div> | |
| </div> | |
| <div class="sidebar-intro"> | |
| <p class="nav-label">Control Plane</p> | |
| <p class="text-secondary text-sm">Run policy simulations, submit rulings, and train your autonomous moderation loop.</p> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <div class="nav-section"> | |
| <p class="nav-label">Environment Tiers</p> | |
| <button class="nav-item" data-task="easy" onclick="app.startEpisode('easy')"> | |
| <i class="fa-solid fa-radar"></i> | |
| <span>Tier I: Detection</span> | |
| <span class="nav-badge">Primary</span> | |
| </button> | |
| <button class="nav-item" data-task="medium" onclick="app.startEpisode('medium')"> | |
| <i class="fa-solid fa-scale-balanced"></i> | |
| <span>Tier II: Action</span> | |
| <span class="nav-badge">Intermediate</span> | |
| </button> | |
| <button class="nav-item" data-task="hard" onclick="app.startEpisode('hard')"> | |
| <i class="fa-solid fa-gavel"></i> | |
| <span>Tier III: Appeal</span> | |
| <span class="nav-badge">Advanced</span> | |
| </button> | |
| </div> | |
| <div class="nav-section"> | |
| <p class="nav-label">System Admin</p> | |
| <button class="nav-item" onclick="app.toggleSettings()"> | |
| <i class="fa-solid fa-key"></i> | |
| <span>API Credentials</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="status-badge"> | |
| <div id="status-indicator" class="status-indicator"></div> | |
| <span id="status-text" class="hud-label">Initializing...</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- MAIN STAGE: Operational Hub --> | |
| <main class="main-content"> | |
| <header class="topbar"> | |
| <div class="breadcrumb"> | |
| <span class="hud-label">Operational Workspace</span> | |
| <i class="fa-solid fa-chevron-right breadcrumb-sep"></i> | |
| <span id="breadcrumb-task" class="breadcrumb-current">Dashboard</span> | |
| </div> | |
| <div class="hud-item"> | |
| <div class="hud-group"> | |
| <span class="hud-label">Session Depth</span> | |
| <span id="hud-episodes" class="hud-value">0</span> | |
| </div> | |
| <div class="hud-group"> | |
| <span class="hud-label">Policy Accuracy</span> | |
| <span id="hud-accuracy" class="hud-value">0.0%</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="workspace-tabs" id="workspace-tabs"> | |
| <button class="workspace-tab active" data-tab="arena" onclick="app.switchTab('arena')"> | |
| <i class="fa-solid fa-wave-square"></i> | |
| <span>Arena</span> | |
| </button> | |
| <button class="workspace-tab" data-tab="history" onclick="app.switchTab('history')"> | |
| <i class="fa-solid fa-chart-line"></i> | |
| <span>History</span> | |
| </button> | |
| </div> | |
| <section class="page-content" id="landing-page"> | |
| <div class="landing-hero card fade-in"> | |
| <p class="hero-kicker">Realtime moderation arena</p> | |
| <h2 class="landing-title">Premium policy operations with live RL feedback</h2> | |
| <p class="text-secondary landing-subtitle">Select an operational tier from the left control plane to begin full-fidelity moderation evaluation.</p> | |
| <div class="hero-pills"> | |
| <span class="hero-pill"><i class="fa-solid fa-wave-square"></i> Streaming trace</span> | |
| <span class="hero-pill"><i class="fa-solid fa-layer-group"></i> Multi-tier scenarios</span> | |
| <span class="hero-pill"><i class="fa-solid fa-brain"></i> Autonomous loop</span> | |
| </div> | |
| </div> | |
| <div class="landing-grid"> | |
| <article class="card spotlight-card"> | |
| <div class="card-header"> | |
| <h3>Operational Flow</h3> | |
| </div> | |
| <ul class="spotlight-list"> | |
| <li><span class="list-dot"></span>Bootstrap a tier and ingest a fresh policy case.</li> | |
| <li><span class="list-dot"></span>Submit deterministic action payloads for grading.</li> | |
| <li><span class="list-dot"></span>Inspect reward, narrative feedback, and trace logs.</li> | |
| </ul> | |
| </article> | |
| <article class="card spotlight-card"> | |
| <div class="card-header"> | |
| <h3>Model Routing</h3> | |
| <span class="badge">OpenAI + HF</span> | |
| </div> | |
| <p class="text-secondary text-sm">Use API credentials to switch providers. HF tokens can auto-route to the Inference API gateway for faster testing.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <div class="workspace" id="main-interface" style="display: none;"> | |
| <section class="view-col"> | |
| <div class="alert-banner" id="policy-alert-banner"> | |
| <span class="alert-badge" id="alert-level">STABLE</span> | |
| <div class="alert-content"> | |
| <strong id="alert-topic">System Readiness Validated</strong> | |
| <p id="alert-summary">Environment ready for high-fidelity moderation ingest.</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>Case Metadata</h3> | |
| <span id="val-post-id" class="hud-label">#PENDING</span> | |
| </div> | |
| <div id="val-content" class="content-box"> | |
| <!-- Ingested by Typewriter --> | |
| </div> | |
| <div class="stat-grid"> | |
| <div class="stat-item"> | |
| <p class="label">Platform Source</p> | |
| <p id="val-platform" class="value text-accent">--</p> | |
| </div> | |
| <div class="stat-item"> | |
| <p class="label">Account Integrity</p> | |
| <p id="val-user-age" class="value">--</p> | |
| </div> | |
| <div class="stat-item"> | |
| <p class="label">Historical Incidents</p> | |
| <p id="val-prior-violations" class="value text-danger">--</p> | |
| </div> | |
| <div class="stat-item"> | |
| <p class="label">Community Reports</p> | |
| <p id="val-reports" class="value">--</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>Submission Interface</h3> | |
| <span class="badge">Decisive Mode</span> | |
| </div> | |
| <div id="action-panel"> | |
| </div> | |
| <div class="auto-agent-box"> | |
| <div class="card-header compact-header"> | |
| <h4>Autonomous Execution Engine</h4> | |
| </div> | |
| <p class="text-secondary text-sm section-copy"> | |
| Hand over control to the AI Policy Judge. Enable Continuous Training for autonomous RL cycles. | |
| </p> | |
| <div class="agent-btns"> | |
| <button class="btn btn-secondary" id="btn-run-agent" onclick="app.runAgent(false)"> | |
| <i class="fa-solid fa-play"></i> Run Inference | |
| </button> | |
| <button class="btn btn-primary" id="btn-auto-loop" onclick="app.toggleAutoLoop()"> | |
| <i class="fa-solid fa-bolt"></i> Training Loop | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="view-col terminal-column"> | |
| <div class="terminal-card card"> | |
| <div class="terminal-header"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span class="terminal-title">POLICY_TRACE_OVERSIGHT</span> | |
| <button class="btn-icon" onclick="app.clearTerminal()"> | |
| <i class="fa-solid fa-trash-can"></i> | |
| </button> | |
| </div> | |
| <div class="terminal-body" id="terminal-output"> | |
| </div> | |
| <div class="reward-overlay" id="reward-overlay" style="display:none;"> | |
| <span id="reward-display" class="reward-score">0.00</span> | |
| <h3 id="diagnostic-title" class="text-primary">Judicial Alignment Captured</h3> | |
| <div id="feedback-display" class="feedback-bubble">...</div> | |
| <button class="btn btn-secondary" onclick="app.closeReward()">Dismiss Signal</button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <section class="history-page" id="history-page" style="display: none;"> | |
| <div class="history-grid"> | |
| <article class="card history-chart-card"> | |
| <div class="card-header"> | |
| <h3>Accuracy Graph</h3> | |
| <span class="badge" id="history-summary">No Episodes</span> | |
| </div> | |
| <canvas id="accuracy-chart" width="900" height="240"></canvas> | |
| </article> | |
| <article class="card history-log-card"> | |
| <div class="card-header"> | |
| <h3>Prediction History</h3> | |
| <button class="btn-icon" onclick="app.clearHistory()" title="Clear history"> | |
| <i class="fa-solid fa-trash-can"></i> | |
| </button> | |
| </div> | |
| <div id="history-list" class="history-list"></div> | |
| </article> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <div class="modal-overlay" id="settings-modal" style="display:none;"> | |
| <div class="card modal-card"> | |
| <div class="card-header"> | |
| <h3>Developer Credentials</h3> | |
| <button class="btn-icon" onclick="app.toggleSettings()"> | |
| <i class="fa-solid fa-xmark"></i> | |
| </button> | |
| </div> | |
| <div class="panel-body"> | |
| <p class="text-secondary text-sm section-copy"> | |
| Environment supports high-speed injection of custom OpenAI or Hugging Face tokens for personalized judicial evaluation. | |
| </p> | |
| <div class="form-group"> | |
| <label>Standard API Key / HF Token</label> | |
| <input type="password" id="cfg-api-key" placeholder="hf_... or sk-..."> | |
| </div> | |
| <div class="form-group"> | |
| <label>Gateway Port Base URL</label> | |
| <input type="text" id="cfg-base-url" placeholder="https://api.openai.com/v1"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Policy Ingest Model</label> | |
| <input type="text" id="cfg-model" placeholder="gpt-4o-mini"> | |
| </div> | |
| <div class="agent-btns modal-actions"> | |
| <button class="btn btn-primary" onclick="app.saveSettings()">Activate Credentials</button> | |
| <button class="btn btn-secondary" onclick="app.clearSettings()">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |