Spaces:
Sleeping
Sleeping
File size: 6,017 Bytes
0eb4f6f 6f90d54 0eb4f6f 6f90d54 0eb4f6f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 | """
FastAPI app for Container Port Environment.
"""
from __future__ import annotations
import os
import sys
from pathlib import Path
PROJECT_ROOT = Path(__file__).resolve().parents[1]
if str(PROJECT_ROOT) not in sys.path:
sys.path.insert(0, str(PROJECT_ROOT))
os.environ.setdefault("ENABLE_WEB_INTERFACE", "true")
from openenv.core.env_server import create_web_interface_app
from fastapi.responses import HTMLResponse
import uvicorn
from models import ContainerAction, ContainerObservation
from server.environment import ContainerYardEnvironment
app = create_web_interface_app(
ContainerYardEnvironment,
ContainerAction,
ContainerObservation,
env_name="container-port-env",
)
@app.get("/dashboard", response_class=HTMLResponse)
def dashboard() -> str:
return """
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Container Port Dashboard</title>
<style>
:root {
--bg: #f4f5ef;
--card: #ffffff;
--ink: #18211f;
--accent: #0b6e4f;
--muted: #5f6a66;
--line: #d7ddd7;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 24px;
background: radial-gradient(circle at 80% 20%, #dbeee5 0, var(--bg) 45%);
color: var(--ink);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.wrap { max-width: 980px; margin: 0 auto; }
h1 { margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--muted); }
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
select, input, button {
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
background: #fff;
color: var(--ink);
}
button {
cursor: pointer;
background: var(--accent);
color: #fff;
border-color: var(--accent);
font-weight: 600;
}
button.secondary {
background: #fff;
color: var(--ink);
border-color: var(--line);
font-weight: 500;
}
pre {
margin: 0;
background: #0e1a17;
color: #eaf8f1;
border-radius: 12px;
padding: 14px;
overflow: auto;
min-height: 220px;
font-size: 12px;
line-height: 1.35;
}
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
</style>
</head>
<body>
<div class="wrap">
<h1>Container Port Dashboard</h1>
<p>Pick a difficulty and step the environment manually.</p>
<div class="panel">
<div class="row">
<label for="difficulty">Difficulty</label>
<select id="difficulty">
<option value="easy">Easy</option>
<option value="medium" selected>Medium</option>
<option value="hard">Hard</option>
</select>
<button id="resetBtn">Reset</button>
<button id="stateBtn" class="secondary">State</button>
</div>
<div class="hint">Reset calls <code>/web/reset</code> with the selected mode.</div>
</div>
<div class="panel">
<div class="row">
<label for="stack">stack_index</label>
<input id="stack" type="number" min="0" step="1" value="0" />
<button id="stepBtn">Step</button>
</div>
<div class="hint">Step calls <code>/web/step</code> with action <code>{"stack_index": n}</code>.</div>
</div>
<div class="panel">
<pre id="out">Click Reset to start an episode.</pre>
</div>
</div>
<script>
const out = document.getElementById('out');
const difficulty = document.getElementById('difficulty');
const stack = document.getElementById('stack');
function show(data) {
out.textContent = JSON.stringify(data, null, 2);
}
async function postJson(url, payload) {
const res = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const data = await res.json();
show(data);
}
async function getJson(url) {
const res = await fetch(url);
const data = await res.json();
show(data);
}
document.getElementById('resetBtn').addEventListener('click', async () => {
try {
await postJson('/web/reset', { difficulty: difficulty.value });
} catch (err) {
show({ error: String(err) });
}
});
document.getElementById('stepBtn').addEventListener('click', async () => {
const idx = Number(stack.value);
try {
await postJson('/web/step', { action: { stack_index: idx } });
} catch (err) {
show({ error: String(err) });
}
});
document.getElementById('stateBtn').addEventListener('click', async () => {
try {
await getJson('/web/state');
} catch (err) {
show({ error: String(err) });
}
});
</script>
</body>
</html>
"""
def main() -> None:
uvicorn.run("server.app:app", host="0.0.0.0", port=7860)
if __name__ == "__main__":
main()
|