| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Code Security Review Environment</title> |
| <meta name="description" content="RL Environment for training AI agents to detect bugs and security vulnerabilities."> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/static/style.css"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/tokyo-night-dark.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> |
| </head> |
| <body> |
| <div id="app-background"></div> |
| <div id="particle-overlay"></div> |
|
|
| <main class="container"> |
| <header> |
| <h1>Code Security RL Environment</h1> |
| <p>Interactive baseline evaluation for AI Agents.</p> |
| </header> |
|
|
| <div class="mac-window"> |
| <div class="mac-title-bar"> |
| <div class="mac-dots"> |
| <span class="dot red"></span> |
| <span class="dot yellow"></span> |
| <span class="dot green"></span> |
| </div> |
| <div class="mac-tabs"> |
| <button class="mac-tab active" data-tab="playground">Playground</button> |
| <button class="mac-tab" data-tab="details">Model Details</button> |
| <button class="mac-tab" data-tab="specs">API Specs</button> |
| </div> |
| <button id="theme-toggle" class="theme-toggle" title="Toggle Theme"> |
| <svg id="sun-icon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg> |
| <svg id="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> |
| </button> |
| </div> |
|
|
| <div class="window-content"> |
| <div id="tab-playground" class="tab-pane active"> |
| <div class="dashboard"> |
| |
| <section class="panel observation-panel" id="observation-section"> |
| <div class="panel-header"> |
| <h2>Environment State</h2> |
| <div class="badge-row"> |
| <span id="badge-difficulty" class="badge">Loading...</span> |
| <span id="badge-step" class="badge">Step 0/0</span> |
| </div> |
| </div> |
|
|
| <div class="task-info"> |
| <strong>Task:</strong> <span id="task-description">Initializing environment...</span> |
| </div> |
|
|
| <div id="feedback-container" class="feedback-info hidden"> |
| <strong>Previous Feedback:</strong> <span id="previous-feedback"></span> |
| </div> |
|
|
| <div class="code-container"> |
| <div class="code-header"> |
| <span id="lang-badge">Language: Unknown</span> |
| </div> |
| <pre><code id="code-snippet" class="language-python"># Awaiting initialization...</code></pre> |
| </div> |
| </section> |
|
|
| |
| <section class="panel action-panel" id="action-section"> |
| <div class="panel-header"> |
| <h2>Agent Action</h2> |
| </div> |
|
|
| <form id="action-form"> |
| <div class="form-group toggle-group"> |
| <label for="input-bug-identified">Bug Identified</label> |
| <select id="input-bug-identified" required> |
| <option value="true" selected>Yes</option> |
| <option value="false">No</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="input-bug-type">Bug Type</label> |
| <select id="input-bug-type" required> |
| <option value="off-by-one">Off-by-one</option> |
| <option value="logic-error">Logic Error</option> |
| <option value="security-vulnerability">Security Vulnerability</option> |
| <option value="null-dereference">Null Dereference</option> |
| <option value="none">None</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="input-severity">Severity</label> |
| <select id="input-severity" required> |
| <option value="none">None</option> |
| <option value="low">Low</option> |
| <option value="medium">Medium</option> |
| <option value="high">High</option> |
| <option value="critical">Critical</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="input-bug-location">Bug Location</label> |
| <input type="text" id="input-bug-location" placeholder="e.g., fetch_records() line 4" required> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="input-bug-description">Description</label> |
| <textarea id="input-bug-description" rows="3" placeholder="Explain the vulnerability..." required></textarea> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="input-suggested-fix">Suggested Fix</label> |
| <textarea id="input-suggested-fix" rows="3" placeholder="Provide corrected code or explanation..." required></textarea> |
| </div> |
|
|
| <button type="submit" id="btn-submit-action" class="primary-btn">Submit Action</button> |
| <button type="button" id="btn-reset-env" class="secondary-btn">Reset Environment</button> |
| </form> |
| </section> |
| </div> |
| </div> |
|
|
| <div id="tab-details" class="tab-pane"> |
| <div class="panel"> |
| <h2>Model Details</h2> |
| <p style="margin-top: 1rem;">OpenEnv is an RL environment designed for security validation. This baseline uses standard reward signals to calibrate agents.</p> |
| <ul style="margin-top: 1rem; color: var(--text-muted); list-style-position: inside;"> |
| <li>Deterministic Reward Signals</li> |
| <li>Multi-step Episode Support</li> |
| <li>Security-focused Task Sets</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div id="tab-specs" class="tab-pane"> |
| <div class="panel"> |
| <h2>API Specifications</h2> |
| <pre style="margin-top: 1rem; background: #000; padding: 1rem; border-radius: 4px;">POST /reset?difficulty={easy|medium|hard} |
| POST /step {bug_identified, bug_type, ...} |
| GET /state</pre> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="reward-toast" class="toast hidden"> |
| <div class="toast-content"> |
| <span class="toast-icon">✨</span> |
| <div class="toast-text"> |
| <h3 id="toast-title">Reward Received</h3> |
| <p id="toast-message">Score: 0.0</p> |
| </div> |
| </div> |
| <button id="toast-close">×</button> |
| </div> |
| </main> |
|
|
| <script src="/static/main.js"></script> |
| </body> |
| </html> |
|
|
