Hugging Face's logo

Spaces:
Souravdanyal
/
code-debug-env
Running

App Files Community
Souravdanyal commited on
Commit
c94b185
·
1 Parent(s): 0944271

Add homepage UI

Browse files
Files changed (1) hide show
  1. server/static/index.html +138 -0
server/static/index.html ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Code Debug Environment</title>
7
+ <style>
8
+ * { box-sizing: border-box; margin: 0; padding: 0; }
9
+ body { font-family: system-ui, sans-serif; background: #0f1117; color: #e0e0e0; min-height: 100vh; padding: 2rem 1rem; }
10
+ .container { max-width: 800px; margin: 0 auto; }
11
+ .header { text-align: center; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid #2a2a3a; }
12
+ .badge { display: inline-block; background: #1e3a5f; color: #60a5fa; font-size: 12px; padding: 4px 12px; border-radius: 20px; margin-bottom: 1rem; }
13
+ h1 { font-size: 2rem; font-weight: 600; color: #ffffff; margin-bottom: 0.5rem; }
14
+ .subtitle { color: #9ca3af; font-size: 1rem; }
15
+ .status-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1rem; }
16
+ .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
17
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
18
+ .status-text { font-size: 13px; color: #22c55e; }
19
+ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 2rem; }
20
+ .stat { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 10px; padding: 1.2rem; text-align: center; }
21
+ .stat-value { font-size: 1.8rem; font-weight: 700; color: #60a5fa; }
22
+ .stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; }
23
+ .section-title { font-size: 13px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
24
+ .endpoints { display: flex; flex-direction: column; gap: 10px; margin-bottom: 2rem; }
25
+ .endpoint { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 10px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: border-color 0.2s; }
26
+ .endpoint:hover { border-color: #3b82f6; }
27
+ .method { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; min-width: 42px; text-align: center; }
28
+ .get { background: #0d3321; color: #22c55e; }
29
+ .post { background: #1e3a5f; color: #60a5fa; }
30
+ .endpoint-info { flex: 1; }
31
+ .endpoint-path { font-size: 14px; font-weight: 500; color: #e0e0e0; font-family: monospace; }
32
+ .endpoint-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }
33
+ .arrow { color: #4b5563; font-size: 14px; }
34
+ .difficulties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 2rem; }
35
+ .diff { background: #1a1a2e; border: 1px solid #2a2a3a; border-radius: 10px; padding: 1rem; text-align: center; }
36
+ .diff-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
37
+ .diff-name.easy { color: #22c55e; }
38
+ .diff-name.medium { color: #f59e0b; }
39
+ .diff-name.hard { color: #ef4444; }
40
+ .diff-detail { font-size: 12px; color: #6b7280; line-height: 1.5; }
41
+ .footer { text-align: center; padding-top: 1.5rem; border-top: 1px solid #2a2a3a; }
42
+ .docs-btn { display: inline-block; background: #1e3a5f; color: #60a5fa; padding: 10px 24px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.2s; }
43
+ .docs-btn:hover { background: #2a4a7f; }
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <div class="container">
48
+ <div class="header">
49
+ <div class="badge">OpenEnv Compatible</div>
50
+ <h1>Code Debug Environment</h1>
51
+ <p class="subtitle">An RL environment where LLM agents diagnose and fix buggy Python code</p>
52
+ <div class="status-bar">
53
+ <div class="dot"></div>
54
+ <span class="status-text">Live & Running</span>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="stats">
59
+ <div class="stat">
60
+ <div class="stat-value">45</div>
61
+ <div class="stat-label">Total Tasks</div>
62
+ </div>
63
+ <div class="stat">
64
+ <div class="stat-value">3</div>
65
+ <div class="stat-label">Difficulty Levels</div>
66
+ </div>
67
+ <div class="stat">
68
+ <div class="stat-value">0–1.0</div>
69
+ <div class="stat-label">Reward Range</div>
70
+ </div>
71
+ </div>
72
+
73
+ <div class="section-title">API Endpoints</div>
74
+ <div class="endpoints">
75
+ <a class="endpoint" href="/health">
76
+ <span class="method get">GET</span>
77
+ <div class="endpoint-info">
78
+ <div class="endpoint-path">/health</div>
79
+ <div class="endpoint-desc">Health check — returns status ok</div>
80
+ </div>
81
+ <span class="arrow">→</span>
82
+ </a>
83
+ <a class="endpoint" href="/docs#/default/reset_reset_post">
84
+ <span class="method post">POST</span>
85
+ <div class="endpoint-info">
86
+ <div class="endpoint-path">/reset</div>
87
+ <div class="endpoint-desc">Start a new episode — pass difficulty: easy | medium | hard</div>
88
+ </div>
89
+ <span class="arrow">→</span>
90
+ </a>
91
+ <a class="endpoint" href="/docs#/default/step_step_post">
92
+ <span class="method post">POST</span>
93
+ <div class="endpoint-info">
94
+ <div class="endpoint-path">/step</div>
95
+ <div class="endpoint-desc">Submit fixed code — returns reward (0.0–1.0) and feedback</div>
96
+ </div>
97
+ <span class="arrow">→</span>
98
+ </a>
99
+ <a class="endpoint" href="/state">
100
+ <span class="method get">GET</span>
101
+ <div class="endpoint-info">
102
+ <div class="endpoint-path">/state</div>
103
+ <div class="endpoint-desc">Current episode state — step count, reward, done flag</div>
104
+ </div>
105
+ <span class="arrow">→</span>
106
+ </a>
107
+ <a class="endpoint" href="/tasks">
108
+ <span class="method get">GET</span>
109
+ <div class="endpoint-info">
110
+ <div class="endpoint-path">/tasks</div>
111
+ <div class="endpoint-desc">List all 45 task IDs across all difficulty levels</div>
112
+ </div>
113
+ <span class="arrow">→</span>
114
+ </a>
115
+ </div>
116
+
117
+ <div class="section-title">Difficulty Levels</div>
118
+ <div class="difficulties">
119
+ <div class="diff">
120
+ <div class="diff-name easy">Easy</div>
121
+ <div class="diff-detail">15 tasks<br>1 bug per task<br>reward = tests passed / 3</div>
122
+ </div>
123
+ <div class="diff">
124
+ <div class="diff-name medium">Medium</div>
125
+ <div class="diff-detail">15 tasks<br>2 bugs per task<br>reward = tests passed / 3</div>
126
+ </div>
127
+ <div class="diff">
128
+ <div class="diff-name hard">Hard</div>
129
+ <div class="diff-detail">15 tasks<br>algorithmic bug<br>reward = 0.7×code + 0.3×explanation</div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="footer">
134
+ <a class="docs-btn" href="/docs">Open Interactive API Docs</a>
135
+ </div>
136
+ </div>
137
+ </body>
138
+ </html>