Spaces:

inmodel
/

code-review-env

Running

App Files Files Community

Nitish commited on 6 days ago

Commit

4e5e784

1 Parent(s): 2236518

feat: add interactive web dashboard for space

Browse files

Files changed (4) hide show

server/app.py +8 -0
static/index.html +124 -0
static/main.js +156 -0
static/style.css +305 -0

server/app.py CHANGED Viewed

@@ -2,6 +2,8 @@ import os
 import uvicorn
 from fastapi import FastAPI, HTTPException, Query
 from fastapi.middleware.cors import CORSMiddleware
 from .models import CodeReviewAction, CodeReviewState, StepResponse, ResetResponse
 from .environment import CodeReviewEnvironment
@@ -22,8 +24,14 @@ app.add_middleware(
     allow_headers=["*"],
 )
 env = CodeReviewEnvironment()
 @app.get("/health")
 def health():

 import uvicorn
 from fastapi import FastAPI, HTTPException, Query
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
 from .models import CodeReviewAction, CodeReviewState, StepResponse, ResetResponse
 from .environment import CodeReviewEnvironment
     allow_headers=["*"],
 )
+app.mount("/static", StaticFiles(directory="static"), name="static")
 env = CodeReviewEnvironment()
+@app.get("/")
+def read_index():
+    return FileResponse("static/index.html")
 @app.get("/health")
 def health():

static/index.html ADDED Viewed

	@@ -0,0 +1,124 @@

+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <!-- Include Highlight.js for code formatting -->
+    <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 class="glass-panel">
+            <h1>Code Security RL Environment</h1>
+            <p>Interactive baseline evaluation for AI Agents.</p>
+        </header>
+        <div class="dashboard">
+            <!-- Left Column: Environment Observation -->
+            <section class="glass-panel observation-panel" id="observation-section">
+                <div class="panel-header">
+                    <h2><span class="icon">👁️</span> 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>
+            <!-- Right Column: Agent Action Form -->
+            <section class="glass-panel action-panel" id="action-section">
+                <div class="panel-header">
+                    <h2><span class="icon">🛠️</span> 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>
+        <!-- Sticky Status Toast -->
+        <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">&times;</button>
+        </div>
+    </main>
+    <script src="/static/main.js"></script>
+</body>
+</html>

static/main.js ADDED Viewed

	@@ -0,0 +1,156 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const elements = {
+        badgeDifficulty: document.getElementById('badge-difficulty'),
+        badgeStep: document.getElementById('badge-step'),
+        taskDescription: document.getElementById('task-description'),
+        codeSnippet: document.getElementById('code-snippet'),
+        langBadge: document.getElementById('lang-badge'),
+        feedbackContainer: document.getElementById('feedback-container'),
+        previousFeedback: document.getElementById('previous-feedback'),
+        form: document.getElementById('action-form'),
+        submitBtn: document.getElementById('btn-submit-action'),
+        resetBtn: document.getElementById('btn-reset-env'),
+        toast: document.getElementById('reward-toast'),
+        toastTitle: document.getElementById('toast-title'),
+        toastMessage: document.getElementById('toast-message'),
+        toastClose: document.getElementById('toast-close'),
+        // Inputs
+        inputBugIdentified: document.getElementById('input-bug-identified'),
+        inputBugType: document.getElementById('input-bug-type'),
+        inputSeverity: document.getElementById('input-severity'),
+        inputBugLocation: document.getElementById('input-bug-location'),
+        inputBugDescription: document.getElementById('input-bug-description'),
+        inputSuggestedFix: document.getElementById('input-suggested-fix')
+    };
+    let isDone = false;
+    // Initialize Environment
+    async function resetEnvironment(difficulty = 'easy') {
+        elements.submitBtn.disabled = true;
+        elements.resetBtn.disabled = true;
+        isDone = false;
+        try {
+            const res = await fetch(`/reset?difficulty=${difficulty}`, { method: 'POST' });
+            if (!res.ok) throw new Error('Failed to reset environment');
+            const data = await res.json();
+            updateObservation(data.observation);
+            // clear form
+            elements.form.reset();
+            document.getElementById('observation-section').classList.remove('environment-done');
+            hideToast();
+        } catch (e) {
+            showToast('Error', e.message, true);
+        } finally {
+            elements.submitBtn.disabled = false;
+            elements.resetBtn.disabled = false;
+        }
+    }
+    function updateObservation(obs) {
+        elements.badgeDifficulty.textContent = obs.difficulty.toUpperCase();
+        elements.badgeStep.textContent = `Step ${obs.step_number}/${obs.max_steps}`;
+        elements.taskDescription.textContent = obs.task_description;
+        elements.langBadge.textContent = `Language: ${obs.language}`;
+        // Update code block and highlight
+        elements.codeSnippet.textContent = obs.code_snippet;
+        elements.codeSnippet.className = `language-${obs.language}`;
+        hljs.highlightElement(elements.codeSnippet);
+        if (obs.previous_feedback) {
+            elements.previousFeedback.textContent = obs.previous_feedback;
+            elements.feedbackContainer.classList.remove('hidden');
+        } else {
+            elements.feedbackContainer.classList.add('hidden');
+        }
+        if (obs.step_number >= obs.max_steps) {
+            isDone = true;
+        }
+    }
+    // Submit Step
+    elements.form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        if (isDone) {
+            showToast('Environment Finished', 'Please reset to start a new episode.', true);
+            return;
+        }
+        const action = {
+            bug_identified: elements.inputBugIdentified.value === 'true',
+            bug_location: elements.inputBugLocation.value,
+            bug_type: elements.inputBugType.value,
+            bug_description: elements.inputBugDescription.value,
+            severity: elements.inputSeverity.value,
+            suggested_fix: elements.inputSuggestedFix.value
+        };
+        elements.submitBtn.disabled = true;
+        elements.submitBtn.textContent = "Submitting...";
+        try {
+            const res = await fetch('/step', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(action)
+            });
+            if (!res.ok) {
+                const err = await res.json();
+                throw new Error(err.detail || 'Failed to submit action');
+            }
+            const data = await res.json();
+            updateObservation(data.observation);
+            if (data.done) {
+                isDone = true;
+                const totalScore = data.info?.total_score || data.reward;
+                showToast('Episode Completed!', `Final Score: ${totalScore.toFixed(2)}`, false);
+                document.getElementById('observation-section').classList.add('environment-done');
+            } else {
+                showToast('Step Evaluated', `Step Reward: ${data.reward.toFixed(2)}`, false);
+            }
+        } catch (e) {
+            showToast('Action Failed', e.message, true);
+        } finally {
+            elements.submitBtn.disabled = false;
+            elements.submitBtn.textContent = "Submit Action";
+        }
+    });
+    // Reset button
+    elements.resetBtn.addEventListener('click', () => {
+        const randomDifficulty = ['easy', 'medium', 'hard'][Math.floor(Math.random() * 3)];
+        resetEnvironment(randomDifficulty);
+    });
+    // Toast functionality
+    let toastTimeout;
+    function showToast(title, message, isError = false) {
+        elements.toastTitle.textContent = title;
+        elements.toastMessage.textContent = message;
+        elements.toastMessage.style.color = isError ? 'var(--error)' : 'var(--success)';
+        elements.toast.classList.remove('hidden');
+        clearTimeout(toastTimeout);
+        toastTimeout = setTimeout(hideToast, 4000);
+    }
+    function hideToast() {
+        elements.toast.classList.add('hidden');
+    }
+    elements.toastClose.addEventListener('click', hideToast);
+    // Initial Load
+    resetEnvironment();
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,305 @@

+:root {
+    --bg-primary: #0a0a0f;
+    --bg-card: rgba(20, 20, 30, 0.6);
+    --bg-glass: rgba(255, 255, 255, 0.03);
+    --border-glass: rgba(255, 255, 255, 0.08);
+    --accent-primary: #7c3aed;
+    --accent-glow: rgba(124, 58, 237, 0.5);
+    --accent-secondary: #0ea5e9;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --success: #10b981;
+    --error: #ef4444;
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: 'Outfit', sans-serif;
+    color: var(--text-main);
+    background-color: var(--bg-primary);
+    min-height: 100vh;
+    padding: 2rem;
+    position: relative;
+    overflow-x: hidden;
+}
+/* Background Gradients & Animation */
+#app-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 15% 50%, rgba(124, 58, 237, 0.15), transparent 25%),
+                radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.15), transparent 25%);
+    z-index: -2;
+    animation: pulseBg 10s ease-in-out infinite alternate;
+}
+@keyframes pulseBg {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.1); }
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+header {
+    margin-bottom: 2rem;
+    text-align: center;
+    padding: 2rem;
+}
+h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(to right, #a855f7, #38bdf8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+p {
+    color: var(--text-muted);
+}
+.glass-panel {
+    background: var(--bg-glass);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--border-glass);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+.dashboard {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
+}
+@media (max-width: 900px) {
+    .dashboard {
+        grid-template-columns: 1fr;
+    }
+}
+/* Common Panel Header */
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-glass);
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+}
+h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.badge-row {
+    display: flex;
+    gap: 0.5rem;
+}
+.badge {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+/* Observation Panel */
+.task-info {
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.feedback-info {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+}
+.hidden {
+    display: none !important;
+}
+.code-container {
+    background: #1a1b26;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--border-glass);
+}
+.code-header {
+    background: #16161e;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    border-bottom: 1px solid #292e42;
+    display: flex;
+    justify-content: flex-end;
+}
+pre {
+    margin: 0;
+    padding: 1rem;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.9rem;
+    overflow-x: auto;
+}
+/* Action Panel Form */
+.form-group {
+    margin-bottom: 1.25rem;
+}
+label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+input, select, textarea {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border-glass);
+    border-radius: 8px;
+    color: var(--text-main);
+    padding: 0.75rem 1rem;
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+input:focus, select:focus, textarea:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 2px var(--accent-glow);
+}
+select option {
+    background: var(--bg-primary);
+    color: var(--text-main);
+}
+button {
+    width: 100%;
+    padding: 0.875rem;
+    border: none;
+    border-radius: 8px;
+    font-family: inherit;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-bottom: 1rem;
+}
+.primary-btn {
+    background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
+    color: white;
+    box-shadow: 0 4px 15px var(--accent-glow);
+}
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px var(--accent-glow);
+}
+.secondary-btn {
+    background: transparent;
+    border: 1px solid var(--border-glass);
+    color: var(--text-main);
+}
+.secondary-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+/* Toast */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background: rgba(20, 20, 30, 0.9);
+    border: 1px solid var(--border-glass);
+    padding: 1rem;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+    transform: translateY(100px);
+    opacity: 0;
+    animation: slideUp 0.4s forwards;
+    z-index: 100;
+    min-width: 300px;
+}
+@keyframes slideUp {
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+.toast-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.toast-icon {
+    font-size: 1.5rem;
+}
+#toast-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.2rem;
+}
+#toast-message {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--success);
+}
+#toast-close {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    width: auto;
+    margin: 0;
+}
+.environment-done {
+    border-color: var(--success);
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
+}