Spaces:
Sleeping
Sleeping
Naman Gupta
Fix turn counting, task-aware max steps in inference, explicit conversation reset, openenv.yaml metadata
905ac2f | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>BREACH-0S // Red-Team Arena</title> | |
| <style> | |
| /* ── Reset & Tokens ─────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #080b10; | |
| --bg2: #0d1117; | |
| --bg3: #131922; | |
| --border: #1e2d40; | |
| --accent: #00f5a0; | |
| --accent2: #00c8f5; | |
| --danger: #f5004a; | |
| --warn: #f5a500; | |
| --txt: #ccd6f6; | |
| --txt-dim: #4a5568; | |
| --txt-mute: #8892a4; | |
| --radius: 6px; | |
| --mono: 'Courier New', Courier, monospace; | |
| } | |
| html, body { height: 100%; } | |
| body { | |
| background: var(--bg); | |
| color: var(--txt); | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* ── Scrollbar ──────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 5px; height: 5px; } | |
| ::-webkit-scrollbar-track { background: var(--bg2); } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| /* ── Header ─────────────────────────────────────────────── */ | |
| header { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 10px 18px; | |
| background: var(--bg2); | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .logo { | |
| font-size: 17px; | |
| font-weight: bold; | |
| letter-spacing: 3px; | |
| color: var(--accent); | |
| text-shadow: 0 0 12px var(--accent); | |
| } | |
| .logo span { color: var(--accent2); } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 2px 10px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| border: 1px solid var(--border); | |
| color: var(--txt-mute); | |
| } | |
| .dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--txt-dim); | |
| } | |
| .dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); } | |
| .dot.done { background: var(--warn); box-shadow: 0 0 6px var(--warn); } | |
| .header-right { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--txt-dim); | |
| font-size: 11px; | |
| } | |
| #ep-id { color: var(--accent2); } | |
| /* ── Main layout ─────────────────────────────────────────── */ | |
| main { | |
| display: grid; | |
| grid-template-columns: 260px 1fr 230px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| /* ── Panels ──────────────────────────────────────────────── */ | |
| .panel { | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .panel:last-child { border-right: none; } | |
| .panel-title { | |
| padding: 8px 14px; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| color: var(--txt-dim); | |
| background: var(--bg2); | |
| border-bottom: 1px solid var(--border); | |
| text-transform: uppercase; | |
| } | |
| .panel-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| /* ── Form controls ───────────────────────────────────────── */ | |
| label { | |
| display: block; | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| color: var(--txt-dim); | |
| text-transform: uppercase; | |
| margin-bottom: 5px; | |
| } | |
| select, textarea, input[type="range"] { | |
| width: 100%; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| color: var(--txt); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| border-radius: var(--radius); | |
| outline: none; | |
| transition: border-color .15s; | |
| } | |
| select:focus, textarea:focus { | |
| border-color: var(--accent2); | |
| } | |
| select { | |
| padding: 7px 10px; | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 10px center; | |
| } | |
| textarea { | |
| padding: 8px 10px; | |
| resize: none; | |
| line-height: 1.5; | |
| } | |
| textarea.error { | |
| border-color: var(--danger); | |
| box-shadow: 0 0 8px var(--danger); | |
| animation: shake .3s ease; | |
| } | |
| @keyframes shake { | |
| 0%,100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| /* Intensity slider */ | |
| .slider-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| height: 4px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| border: none; | |
| cursor: pointer; | |
| flex: 1; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; height: 14px; | |
| border-radius: 50%; | |
| background: var(--accent2); | |
| box-shadow: 0 0 6px var(--accent2); | |
| cursor: pointer; | |
| } | |
| .slider-val { | |
| min-width: 32px; | |
| text-align: right; | |
| color: var(--accent2); | |
| font-size: 12px; | |
| } | |
| /* ── Buttons ─────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 1px; | |
| border-radius: var(--radius); | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| transition: all .15s; | |
| text-transform: uppercase; | |
| } | |
| .btn:disabled { opacity: 0.35; cursor: not-allowed; } | |
| .btn-primary { | |
| background: transparent; | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .btn-primary:not(:disabled):hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| box-shadow: 0 0 14px var(--accent); | |
| } | |
| .btn-danger { | |
| background: transparent; | |
| border-color: var(--danger); | |
| color: var(--danger); | |
| } | |
| .btn-danger:not(:disabled):hover { | |
| background: var(--danger); | |
| color: #fff; | |
| box-shadow: 0 0 14px var(--danger); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| border-color: var(--border); | |
| color: var(--txt-mute); | |
| } | |
| .btn-secondary:not(:disabled):hover { | |
| border-color: var(--accent2); | |
| color: var(--accent2); | |
| } | |
| .btn-full { width: 100%; } | |
| /* ── Conversation ────────────────────────────────────────── */ | |
| #conversation { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .empty-state { | |
| margin: auto; | |
| text-align: center; | |
| color: var(--txt-dim); | |
| line-height: 2; | |
| } | |
| .empty-state .big { font-size: 32px; margin-bottom: 10px; } | |
| .msg { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| max-width: 88%; | |
| animation: fadeIn .2s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .msg.attacker { align-self: flex-end; } | |
| .msg.defender { align-self: flex-start; } | |
| .msg.system { align-self: center; max-width: 100%; } | |
| .msg-label { | |
| font-size: 10px; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| } | |
| .msg.attacker .msg-label { color: var(--danger); text-align: right; } | |
| .msg.defender .msg-label { color: var(--accent2); } | |
| .msg.system .msg-label { color: var(--txt-dim); text-align: center; } | |
| .msg-bubble { | |
| padding: 9px 13px; | |
| border-radius: var(--radius); | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .msg.attacker .msg-bubble { | |
| background: #1a0a12; | |
| border: 1px solid #3d1020; | |
| color: #f5c6d0; | |
| border-radius: var(--radius) 0 var(--radius) var(--radius); | |
| } | |
| .msg.defender .msg-bubble { | |
| background: #071620; | |
| border: 1px solid #0d3050; | |
| color: #a8d8ea; | |
| border-radius: 0 var(--radius) var(--radius) var(--radius); | |
| } | |
| .msg.system .msg-bubble { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| color: var(--txt-dim); | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .msg-meta { | |
| font-size: 10px; | |
| color: var(--txt-dim); | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .msg.attacker .msg-meta { justify-content: flex-end; } | |
| .meta-chip { | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| } | |
| /* ── Metrics panel ───────────────────────────────────────── */ | |
| .metric-block { display: flex; flex-direction: column; gap: 4px; } | |
| .metric-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| } | |
| .metric-name { | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| color: var(--txt-dim); | |
| text-transform: uppercase; | |
| } | |
| .metric-val { | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .bar-track { | |
| height: 5px; | |
| background: var(--bg3); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .bar-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width .4s ease; | |
| } | |
| .bar-fill.attack { background: var(--danger); box-shadow: 0 0 6px var(--danger); } | |
| .bar-fill.defense { background: var(--accent); box-shadow: 0 0 6px var(--accent); } | |
| .bar-fill.novelty { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); } | |
| .bar-fill.reward { background: var(--warn); box-shadow: 0 0 6px var(--warn); } | |
| .divider { | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .big-stat { | |
| text-align: center; | |
| padding: 6px 0; | |
| } | |
| .big-stat .num { | |
| font-size: 28px; | |
| font-weight: bold; | |
| color: var(--accent2); | |
| text-shadow: 0 0 10px var(--accent2); | |
| } | |
| .big-stat .lbl { | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| color: var(--txt-dim); | |
| text-transform: uppercase; | |
| } | |
| /* History table */ | |
| .hist-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 10px; | |
| } | |
| .hist-table th { | |
| color: var(--txt-dim); | |
| text-align: left; | |
| padding: 3px 4px; | |
| border-bottom: 1px solid var(--border); | |
| text-transform: uppercase; | |
| letter-spacing: .5px; | |
| } | |
| .hist-table td { | |
| padding: 4px 4px; | |
| border-bottom: 1px solid #1a2030; | |
| color: var(--txt-mute); | |
| vertical-align: middle; | |
| } | |
| .hist-table tr:last-child td { border-bottom: none; } | |
| .mini-bar { | |
| display: inline-block; | |
| height: 3px; | |
| background: var(--accent); | |
| border-radius: 2px; | |
| vertical-align: middle; | |
| } | |
| /* ── Grade modal ─────────────────────────────────────────── */ | |
| #grade-overlay { | |
| position: fixed; inset: 0; | |
| background: rgba(8,11,16,.85); | |
| backdrop-filter: blur(4px); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| } | |
| #grade-overlay.show { display: flex; } | |
| .grade-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 28px 32px; | |
| min-width: 340px; | |
| max-width: 440px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .grade-title { | |
| font-size: 12px; | |
| letter-spacing: 3px; | |
| color: var(--txt-dim); | |
| text-transform: uppercase; | |
| } | |
| .grade-letter { | |
| font-size: 72px; | |
| font-weight: bold; | |
| text-align: center; | |
| line-height: 1; | |
| } | |
| .grade-A { color: var(--accent); text-shadow: 0 0 20px var(--accent); } | |
| .grade-B { color: var(--accent2); text-shadow: 0 0 20px var(--accent2); } | |
| .grade-C { color: var(--warn); text-shadow: 0 0 20px var(--warn); } | |
| .grade-D, .grade-F { color: var(--danger); text-shadow: 0 0 20px var(--danger); } | |
| .grade-score { | |
| text-align: center; | |
| font-size: 14px; | |
| color: var(--txt-mute); | |
| } | |
| .grade-metrics { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .grade-metric-row { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: var(--txt-mute); | |
| } | |
| .grade-metric-row span:last-child { color: var(--accent2); } | |
| /* ── Feedback bar ────────────────────────────────────────── */ | |
| #feedback-bar { | |
| padding: 6px 18px; | |
| background: var(--bg2); | |
| border-top: 1px solid var(--border); | |
| font-size: 11px; | |
| color: var(--txt-dim); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| flex-shrink: 0; | |
| } | |
| #feedback-bar .fb-label { | |
| color: var(--accent); | |
| margin-right: 8px; | |
| letter-spacing: 1px; | |
| } | |
| /* ── Loading spinner ─────────────────────────────────────── */ | |
| .spinner { | |
| display: inline-block; | |
| width: 12px; height: 12px; | |
| border: 2px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin .6s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ── Toast ───────────────────────────────────────────────── */ | |
| #toast { | |
| position: fixed; | |
| bottom: 40px; left: 50%; | |
| transform: translateX(-50%) translateY(20px); | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| color: var(--txt); | |
| padding: 9px 18px; | |
| border-radius: var(--radius); | |
| font-size: 12px; | |
| opacity: 0; | |
| transition: all .3s ease; | |
| z-index: 200; | |
| pointer-events: none; | |
| } | |
| #toast.show { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ── Header ─────────────────────────────────────────────────── --> | |
| <header> | |
| <div class="logo">BREACH<span>-0S</span></div> | |
| <div class="pill"> | |
| <div class="dot" id="status-dot"></div> | |
| <span id="status-txt">IDLE</span> | |
| </div> | |
| <div class="pill"> | |
| Turn <span id="turn-disp" style="color:var(--accent2);margin-left:4px">—</span> | |
| / | |
| <span id="max-turns-disp">—</span> | |
| </div> | |
| <div class="header-right"> | |
| EP <span id="ep-id">—</span> | |
| </div> | |
| </header> | |
| <!-- ── Main ───────────────────────────────────────────────────── --> | |
| <main> | |
| <!-- LEFT: Controls --> | |
| <aside class="panel"> | |
| <div class="panel-title">// Attack Config</div> | |
| <div class="panel-body"> | |
| <div> | |
| <label>Strategy</label> | |
| <select id="strategy"> | |
| <option value="roleplay">Roleplay</option> | |
| <option value="hypothetical">Hypothetical</option> | |
| <option value="injection">Injection</option> | |
| <option value="persona_switch">Persona Switch</option> | |
| <option value="authority_claim">Authority Claim</option> | |
| <option value="encoding">Encoding</option> | |
| <option value="multi_turn">Multi-Turn</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label>Target Category</label> | |
| <select id="category"> | |
| <option value="privacy">Privacy</option> | |
| <option value="misinformation">Misinformation</option> | |
| <option value="harmful_instructions">Harmful Instructions</option> | |
| <option value="manipulation">Manipulation</option> | |
| <option value="illegal_activity">Illegal Activity</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label>Intensity</label> | |
| <div class="slider-row"> | |
| <input type="range" id="intensity" min="0" max="1" step="0.05" value="0.5" /> | |
| <span class="slider-val" id="intensity-val">0.50</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label>Framing <span style="color:var(--danger)">*</span> <span style="color:var(--txt-dim)">(max 500)</span></label> | |
| <textarea id="framing" rows="6" placeholder="Type your attack message here, then click Execute Attack…"></textarea> | |
| </div> | |
| <button class="btn btn-primary btn-full" id="btn-step" disabled> | |
| ▶ Execute Attack | |
| </button> | |
| <button class="btn btn-secondary btn-full" id="btn-auto-attack" disabled style="margin-top: 10px;"> | |
| ⚙ Automated Attack | |
| </button> | |
| <div class="divider"></div> | |
| <button class="btn btn-secondary btn-full" id="btn-reset"> | |
| ↺ New Episode | |
| </button> | |
| <button class="btn btn-danger btn-full" id="btn-grade" disabled> | |
| ★ Grade Episode | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- CENTER: Conversation --> | |
| <section class="panel" style="border-right:1px solid var(--border)"> | |
| <div class="panel-title">// Conversation Feed</div> | |
| <div id="conversation"> | |
| <div class="empty-state"> | |
| <div class="big">⚡</div> | |
| <div>Start a new episode to begin<br/>red-teaming the defender.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- RIGHT: Metrics --> | |
| <aside class="panel" style="border-right:none"> | |
| <div class="panel-title">// Live Metrics</div> | |
| <div class="panel-body"> | |
| <div class="big-stat"> | |
| <div class="num" id="m-turn">0</div> | |
| <div class="lbl">Turn</div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="metric-block"> | |
| <div class="metric-header"> | |
| <span class="metric-name">Attack Success</span> | |
| <span class="metric-val" id="m-attack" style="color:var(--danger)">—</span> | |
| </div> | |
| <div class="bar-track"><div class="bar-fill attack" id="bar-attack" style="width:0%"></div></div> | |
| </div> | |
| <div class="metric-block"> | |
| <div class="metric-header"> | |
| <span class="metric-name">Defense Score</span> | |
| <span class="metric-val" id="m-defense" style="color:var(--accent)">—</span> | |
| </div> | |
| <div class="bar-track"><div class="bar-fill defense" id="bar-defense" style="width:0%"></div></div> | |
| </div> | |
| <div class="metric-block"> | |
| <div class="metric-header"> | |
| <span class="metric-name">Novelty</span> | |
| <span class="metric-val" id="m-novelty" style="color:var(--accent2)">—</span> | |
| </div> | |
| <div class="bar-track"><div class="bar-fill novelty" id="bar-novelty" style="width:0%"></div></div> | |
| </div> | |
| <div class="metric-block"> | |
| <div class="metric-header"> | |
| <span class="metric-name">Reward</span> | |
| <span class="metric-val" id="m-reward" style="color:var(--warn)">—</span> | |
| </div> | |
| <div class="bar-track"><div class="bar-fill reward" id="bar-reward" style="width:0%"></div></div> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="metric-name" style="margin-bottom:6px">Turn History</div> | |
| <div style="overflow-x:auto"> | |
| <table class="hist-table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Atk</th> | |
| <th>Def</th> | |
| <th>Nov</th> | |
| </tr> | |
| </thead> | |
| <tbody id="hist-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- ── Feedback bar ────────────────────────────────────────────── --> | |
| <div id="feedback-bar"> | |
| <span class="fb-label">SYS</span> | |
| <span id="feedback-txt">Waiting for episode…</span> | |
| </div> | |
| <!-- ── Grade overlay ──────────────────────────────────────────── --> | |
| <div id="grade-overlay"> | |
| <div class="grade-card"> | |
| <div class="grade-title">// Episode Grade</div> | |
| <div class="grade-letter" id="grade-letter">—</div> | |
| <div class="grade-score" id="grade-score"></div> | |
| <div class="grade-metrics" id="grade-metrics"></div> | |
| <button class="btn btn-secondary btn-full" onclick="closeGrade()">Close</button> | |
| </div> | |
| </div> | |
| <!-- ── Toast ──────────────────────────────────────────────────── --> | |
| <div id="toast"></div> | |
| <script> | |
| /* ── Config ──────────────────────────────────────────────── */ | |
| const API = ''; // same origin; change to e.g. 'http://localhost:8000' for dev | |
| /* ── State ───────────────────────────────────────────────── */ | |
| let episodeActive = false; | |
| let episodeDone = false; | |
| /* ── DOM refs ────────────────────────────────────────────── */ | |
| const conv = document.getElementById('conversation'); | |
| const btnStep = document.getElementById('btn-step'); | |
| const btnAutoAttack = document.getElementById('btn-auto-attack'); | |
| const btnReset = document.getElementById('btn-reset'); | |
| const btnGrade = document.getElementById('btn-grade'); | |
| const statusDot = document.getElementById('status-dot'); | |
| const statusTxt = document.getElementById('status-txt'); | |
| const intensityIn = document.getElementById('intensity'); | |
| const intensityVal= document.getElementById('intensity-val'); | |
| const histBody = document.getElementById('hist-body'); | |
| const feedbackTxt = document.getElementById('feedback-txt'); | |
| /* ── Intensity live label ────────────────────────────────── */ | |
| intensityIn.addEventListener('input', () => { | |
| intensityVal.textContent = parseFloat(intensityIn.value).toFixed(2); | |
| }); | |
| /* ── API helpers ─────────────────────────────────────────── */ | |
| async function api(method, path, body) { | |
| const opts = { method, headers: { 'Content-Type': 'application/json' } }; | |
| if (body) opts.body = JSON.stringify(body); | |
| const res = await fetch(API + path, opts); | |
| if (!res.ok) { | |
| const err = await res.json().catch(() => ({ detail: res.statusText })); | |
| throw new Error(err.detail || res.statusText); | |
| } | |
| return res.json(); | |
| } | |
| /* ── Status indicator ────────────────────────────────────── */ | |
| function setStatus(state) { | |
| statusDot.className = 'dot ' + state; | |
| statusTxt.textContent = state === 'active' ? 'ACTIVE' | |
| : state === 'done' ? 'DONE' | |
| : 'IDLE'; | |
| } | |
| /* ── Header updates ──────────────────────────────────────── */ | |
| function updateHeader(obs, maxTurns) { | |
| document.getElementById('ep-id').textContent = obs.episode_id.slice(0, 8) + '…'; | |
| document.getElementById('turn-disp').textContent = obs.turn; | |
| if (maxTurns) document.getElementById('max-turns-disp').textContent = maxTurns; | |
| } | |
| /* ── Metrics panel ───────────────────────────────────────── */ | |
| function updateMetrics(obs, reward) { | |
| const fmt = v => (v * 100).toFixed(0) + '%'; | |
| document.getElementById('m-turn').textContent = obs.turn; | |
| document.getElementById('m-attack').textContent = fmt(obs.attack_success_estimate); | |
| document.getElementById('m-defense').textContent = fmt(obs.defense_score); | |
| document.getElementById('m-novelty').textContent = fmt(obs.novelty_score); | |
| document.getElementById('m-reward').textContent = (reward ?? 0).toFixed(3); | |
| document.getElementById('bar-attack').style.width = (obs.attack_success_estimate * 100) + '%'; | |
| document.getElementById('bar-defense').style.width = (obs.defense_score * 100) + '%'; | |
| document.getElementById('bar-novelty').style.width = (obs.novelty_score * 100) + '%'; | |
| // Normalize reward: assume it lives in roughly [-1, 1] → map to 0-100% | |
| const rNorm = Math.max(0, Math.min(1, (reward + 1) / 2)); | |
| document.getElementById('bar-reward').style.width = (rNorm * 100) + '%'; | |
| feedbackTxt.textContent = obs.feedback || '—'; | |
| // Append history row | |
| const tr = document.createElement('tr'); | |
| tr.innerHTML = ` | |
| <td style="color:var(--txt-mute)">${obs.turn}</td> | |
| <td><span class="mini-bar" style="width:${(obs.attack_success_estimate*40).toFixed(0)}px;background:var(--danger)"></span></td> | |
| <td><span class="mini-bar" style="width:${(obs.defense_score*40).toFixed(0)}px;background:var(--accent)"></span></td> | |
| <td><span class="mini-bar" style="width:${(obs.novelty_score*40).toFixed(0)}px;background:var(--accent2)"></span></td> | |
| `; | |
| histBody.appendChild(tr); | |
| } | |
| /* ── Conversation helpers ────────────────────────────────── */ | |
| function clearConversation() { | |
| conv.innerHTML = ''; | |
| } | |
| function appendSystemMsg(text) { | |
| const el = document.createElement('div'); | |
| el.className = 'msg system'; | |
| el.innerHTML = `<div class="msg-bubble">${escHtml(text)}</div>`; | |
| conv.appendChild(el); | |
| conv.scrollTop = conv.scrollHeight; | |
| } | |
| function appendAttackerMsg(framing, strategy, category, intensity) { | |
| const el = document.createElement('div'); | |
| el.className = 'msg attacker'; | |
| el.innerHTML = ` | |
| <div class="msg-label">ATTACKER</div> | |
| <div class="msg-bubble">${escHtml(framing)}</div> | |
| <div class="msg-meta"> | |
| <span class="meta-chip">${strategy}</span> | |
| <span class="meta-chip">${category}</span> | |
| <span class="meta-chip">⚡ ${intensity}</span> | |
| </div>`; | |
| conv.appendChild(el); | |
| conv.scrollTop = conv.scrollHeight; | |
| } | |
| function appendDefenderMsg(text, attackScore, defenseScore) { | |
| const el = document.createElement('div'); | |
| el.className = 'msg defender'; | |
| el.innerHTML = ` | |
| <div class="msg-label">DEFENDER</div> | |
| <div class="msg-bubble">${escHtml(text)}</div> | |
| <div class="msg-meta"> | |
| <span class="meta-chip" style="color:var(--danger)">atk ${(attackScore*100).toFixed(0)}%</span> | |
| <span class="meta-chip" style="color:var(--accent)">def ${(defenseScore*100).toFixed(0)}%</span> | |
| </div>`; | |
| conv.appendChild(el); | |
| conv.scrollTop = conv.scrollHeight; | |
| } | |
| function escHtml(str) { | |
| return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') | |
| .replace(/"/g,'"').replace(/'/g,'''); | |
| } | |
| /* ── Reset episode ───────────────────────────────────────── */ | |
| btnReset.addEventListener('click', resetEpisode); | |
| async function resetEpisode() { | |
| setLoading(btnReset, true); | |
| try { | |
| const data = await api('POST', '/reset'); | |
| const obs = data.observation; | |
| clearConversation(); | |
| histBody.innerHTML = ''; | |
| document.getElementById('hist-body').innerHTML = ''; | |
| // Reset metrics display | |
| ['m-attack','m-defense','m-novelty','m-reward'].forEach(id => { | |
| document.getElementById(id).textContent = '—'; | |
| }); | |
| ['bar-attack','bar-defense','bar-novelty','bar-reward'].forEach(id => { | |
| document.getElementById(id).style.width = '0%'; | |
| }); | |
| document.getElementById('m-turn').textContent = '0'; | |
| updateHeader(obs, null); | |
| // Fetch max_turns from /state | |
| const state = await api('GET', '/state'); | |
| document.getElementById('max-turns-disp').textContent = state.max_turns; | |
| episodeActive = true; | |
| episodeDone = false; | |
| setStatus('active'); | |
| btnStep.disabled = false; | |
| btnAutoAttack.disabled = false; | |
| btnGrade.disabled = true; | |
| appendSystemMsg(`Episode ${obs.episode_id.slice(0,8)}… started. ${state.max_turns} turns max.`); | |
| feedbackTxt.textContent = 'Episode initialized. Type your attack in the Framing box and click Execute Attack.'; | |
| document.getElementById('framing').focus(); | |
| toast('New episode started — type your attack in the Framing box'); | |
| } catch (e) { | |
| toast('Error: ' + e.message, true); | |
| } finally { | |
| setLoading(btnReset, false); | |
| } | |
| } | |
| /* ── Execute attack step ─────────────────────────────────── */ | |
| async function executeStep(calledFromAuto = false) { | |
| const framingEl = document.getElementById('framing'); | |
| const framing = framingEl.value.trim(); | |
| if (!framing) { | |
| framingEl.classList.add('error'); | |
| framingEl.focus(); | |
| toast('Type your attack message in the Framing box first', true); | |
| setTimeout(() => framingEl.classList.remove('error'), 600); | |
| return; | |
| } | |
| if (framing.length > 500) { toast('Framing too long (max 500)', true); return; } | |
| const action = { | |
| strategy_type: document.getElementById('strategy').value, | |
| target_category: document.getElementById('category').value, | |
| intensity: parseFloat(intensityIn.value), | |
| framing, | |
| }; | |
| appendAttackerMsg(framing, action.strategy_type, action.target_category, action.intensity.toFixed(2)); | |
| if (!calledFromAuto) { | |
| setLoading(btnStep, true); | |
| btnStep.disabled = true; | |
| } | |
| try { | |
| const data = await api('POST', '/step', action); | |
| const obs = data.observation; | |
| const rw = data.reward; | |
| appendDefenderMsg(obs.defender_response, obs.attack_success_estimate, obs.defense_score); | |
| updateMetrics(obs, rw); | |
| updateHeader(obs, null); | |
| document.getElementById('framing').value = ''; | |
| if (obs.episode_done) { | |
| episodeDone = true; | |
| episodeActive = false; | |
| setStatus('done'); | |
| btnStep.disabled = true; | |
| btnAutoAttack.disabled = true; | |
| btnGrade.disabled = false; | |
| appendSystemMsg('Episode complete. Grade your performance.'); | |
| feedbackTxt.textContent = obs.feedback; | |
| } | |
| } catch (e) { | |
| toast('Error: ' + e.message, true); | |
| if (!calledFromAuto) btnStep.disabled = false; | |
| } finally { | |
| if (!calledFromAuto) { | |
| setLoading(btnStep, false); | |
| if (episodeDone) btnStep.disabled = true; | |
| } | |
| } | |
| } | |
| btnStep.addEventListener('click', () => executeStep(false)); | |
| /* ── Execute auto attack ─────────────────────────────────── */ | |
| btnAutoAttack.addEventListener('click', executeAutoAttack); | |
| async function executeAutoAttack() { | |
| const strategy = document.getElementById('strategy').value; | |
| const category = document.getElementById('category').value; | |
| setLoading(btnAutoAttack, true); | |
| btnStep.disabled = true; | |
| btnAutoAttack.disabled = true; | |
| try { | |
| const data = await api('POST', '/auto-attack', { strategy_type: strategy, target_category: category }); | |
| document.getElementById('framing').value = data.framing; | |
| await executeStep(true); | |
| } catch (e) { | |
| toast('Error generating attack: ' + e.message, true); | |
| } finally { | |
| setLoading(btnAutoAttack, false); | |
| if (!episodeDone) { | |
| btnStep.disabled = false; | |
| btnAutoAttack.disabled = false; | |
| } | |
| } | |
| } | |
| /* ── Grade episode ───────────────────────────────────────── */ | |
| btnGrade.addEventListener('click', gradeEpisode); | |
| async function gradeEpisode() { | |
| setLoading(btnGrade, true); | |
| try { | |
| const data = await api('POST', '/grade'); | |
| showGrade(data); | |
| } catch (e) { | |
| toast('Error: ' + e.message, true); | |
| } finally { | |
| setLoading(btnGrade, false); | |
| } | |
| } | |
| function showGrade(data) { | |
| const letter = data.letter_grade || '?'; | |
| const score = data.overall_score ?? 0; | |
| const letterEl = document.getElementById('grade-letter'); | |
| letterEl.textContent = letter; | |
| letterEl.className = 'grade-letter grade-' + letter[0]; | |
| document.getElementById('grade-score').textContent = | |
| `Score: ${(score * 100).toFixed(1)}% · ${data.summary || ''}`; | |
| const metricsEl = document.getElementById('grade-metrics'); | |
| metricsEl.innerHTML = ''; | |
| const m = data.metrics || {}; | |
| const displayKeys = { | |
| easy: 'Easy Score', | |
| medium: 'Medium Score', | |
| hard: 'Hard Score', | |
| turns: 'Turns Completed', | |
| unique_strategies: 'Unique Strategies', | |
| unique_categories: 'Unique Categories', | |
| }; | |
| for (const [key, label] of Object.entries(displayKeys)) { | |
| if (m[key] !== undefined) { | |
| const val = typeof m[key] === 'number' && m[key] <= 1 | |
| ? (m[key] * 100).toFixed(1) + '%' | |
| : m[key]; | |
| const row = document.createElement('div'); | |
| row.className = 'grade-metric-row'; | |
| row.innerHTML = `<span>${label}</span><span>${val}</span>`; | |
| metricsEl.appendChild(row); | |
| } | |
| } | |
| document.getElementById('grade-overlay').classList.add('show'); | |
| } | |
| function closeGrade() { | |
| document.getElementById('grade-overlay').classList.remove('show'); | |
| } | |
| // Close overlay on background click | |
| document.getElementById('grade-overlay').addEventListener('click', e => { | |
| if (e.target === e.currentTarget) closeGrade(); | |
| }); | |
| /* ── Loading state helper ────────────────────────────────── */ | |
| function setLoading(btn, loading) { | |
| if (loading) { | |
| btn._origHTML = btn.innerHTML; | |
| btn.innerHTML = '<span class="spinner"></span>'; | |
| btn.disabled = true; | |
| } else { | |
| btn.innerHTML = btn._origHTML || btn.innerHTML; | |
| btn.disabled = false; | |
| } | |
| } | |
| /* ── Toast ───────────────────────────────────────────────── */ | |
| let toastTimer; | |
| function toast(msg, isErr = false) { | |
| const el = document.getElementById('toast'); | |
| el.textContent = msg; | |
| el.style.borderColor = isErr ? 'var(--danger)' : 'var(--accent)'; | |
| el.classList.add('show'); | |
| clearTimeout(toastTimer); | |
| toastTimer = setTimeout(() => el.classList.remove('show'), 2800); | |
| } | |
| /* ── On load: check health ───────────────────────────────── */ | |
| (async () => { | |
| try { | |
| await api('GET', '/health'); | |
| toast('API connected'); | |
| } catch { | |
| toast('Cannot reach API — is the server running?', true); | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |