Polish Space landing page with live demo UI

server/app.py

@@ -29,46 +29,453 @@ def root() -> HTMLResponse:
             <meta name="viewport" content="width=device-width, initial-scale=1" />
             <title>CleanOps OpenEnv</title>
             <style>
+              :root {
+                color-scheme: light;
+                --bg: #f5f7fb;
+                --panel: #ffffff;
+                --panel-2: #eef4ff;
+                --text: #111827;
+                --muted: #5b6472;
+                --line: #d8e1ef;
+                --accent: #2563eb;
+                --accent-2: #0f766e;
+                --danger: #b91c1c;
+                --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+              }
               body {
-                font-family: Arial, sans-serif;
-                max-width: 900px;
-                margin: 40px auto;
-                padding: 0 20px;
-                line-height: 1.5;
-                color: #111827;
+                font-family: Inter, Arial, sans-serif;
+                margin: 0;
+                background:
+                  radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28%),
+                  radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 24%),
+                  var(--bg);
+                color: var(--text);
               }
-              code, pre {
-                background: #f3f4f6;
-                border-radius: 6px;
+              .shell {
+                max-width: 1080px;
+                margin: 0 auto;
+                padding: 40px 20px 56px;
               }
-              code { padding: 2px 6px; }
-              pre {
+              .hero {
+                background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(15, 118, 110, 0.94));
+                border-radius: 24px;
+                padding: 30px;
+                color: white;
+                box-shadow: var(--shadow);
+                display: grid;
+                grid-template-columns: 1.2fr 0.8fr;
+                gap: 24px;
+                align-items: stretch;
+              }
+              .badge-row {
+                display: flex;
+                gap: 10px;
+                flex-wrap: wrap;
+                margin-bottom: 16px;
+              }
+              .badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                font-size: 13px;
+                padding: 7px 12px;
+                border-radius: 999px;
+                background: rgba(255, 255, 255, 0.16);
+                border: 1px solid rgba(255, 255, 255, 0.18);
+              }
+              h1 {
+                margin: 0 0 12px;
+                font-size: 36px;
+                line-height: 1.1;
+              }
+              .hero p {
+                margin: 0;
+                font-size: 16px;
+                color: rgba(255, 255, 255, 0.92);
+                max-width: 60ch;
+              }
+              .hero-card {
+                background: rgba(255, 255, 255, 0.12);
+                border: 1px solid rgba(255, 255, 255, 0.18);
+                border-radius: 18px;
+                padding: 18px;
+                display: flex;
+                flex-direction: column;
+                gap: 14px;
+              }
+              .hero-card h2 {
+                margin: 0;
+                font-size: 16px;
+              }
+              .hero-card p {
+                font-size: 14px;
+              }
+              .pill-grid {
+                display: grid;
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+                gap: 10px;
+              }
+              .pill {
+                background: rgba(255, 255, 255, 0.13);
+                border: 1px solid rgba(255, 255, 255, 0.18);
+                border-radius: 14px;
+                padding: 12px;
+              }
+              .pill strong {
+                display: block;
+                font-size: 14px;
+                margin-bottom: 4px;
+              }
+              .grid {
+                display: grid;
+                grid-template-columns: 1.1fr 0.9fr;
+                gap: 22px;
+                margin-top: 22px;
+              }
+              .panel {
+                background: var(--panel);
+                border: 1px solid var(--line);
+                border-radius: 20px;
+                box-shadow: var(--shadow);
+                padding: 22px;
+              }
+              .panel h2 {
+                margin: 0 0 10px;
+                font-size: 20px;
+              }
+              .panel p {
+                margin: 0 0 14px;
+                color: var(--muted);
+              }
+              .button-row {
+                display: flex;
+                gap: 10px;
+                flex-wrap: wrap;
+                margin: 18px 0 16px;
+              }
+              button,
+              .link-btn {
+                appearance: none;
+                border: none;
+                border-radius: 12px;
+                padding: 11px 15px;
+                font-size: 14px;
+                font-weight: 600;
+                cursor: pointer;
+                text-decoration: none;
+                transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+              }
+              button:hover,
+              .link-btn:hover {
+                transform: translateY(-1px);
+              }
+              .primary {
+                background: var(--accent);
+                color: white;
+                box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
+              }
+              .secondary {
+                background: var(--panel-2);
+                color: var(--accent);
+                border: 1px solid #cfe0ff;
+              }
+              .status {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                background: #ecfdf5;
+                color: #065f46;
+                border: 1px solid #bbf7d0;
+                padding: 10px 12px;
+                border-radius: 12px;
+                font-size: 14px;
+                font-weight: 600;
+              }
+              .status.error {
+                background: #fef2f2;
+                color: var(--danger);
+                border-color: #fecaca;
+              }
+              .kpis {
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: 12px;
+                margin-top: 16px;
+              }
+              .kpi {
+                background: #f8fafc;
+                border: 1px solid var(--line);
+                border-radius: 14px;
                 padding: 14px;
+              }
+              .kpi span {
+                display: block;
+                font-size: 12px;
+                color: var(--muted);
+                margin-bottom: 6px;
+              }
+              .kpi strong {
+                font-size: 22px;
+              }
+              pre {
+                margin: 0;
+                background: #0f172a;
+                color: #e2e8f0;
+                border-radius: 16px;
+                padding: 16px;
                 overflow-x: auto;
+                font-size: 13px;
+                line-height: 1.5;
+              }
+              code {
+                background: #eef2ff;
+                color: #3730a3;
+                border-radius: 8px;
+                padding: 2px 7px;
+              }
+              .endpoint-list {
+                display: grid;
+                gap: 10px;
+              }
+              .endpoint {
+                display: flex;
+                justify-content: space-between;
+                gap: 10px;
+                align-items: center;
+                background: #f8fafc;
+                border: 1px solid var(--line);
+                border-radius: 14px;
+                padding: 12px 14px;
+              }
+              .endpoint small {
+                color: var(--muted);
+              }
+              a {
+                color: var(--accent);
+              }
+              .footer {
+                margin-top: 20px;
+                color: var(--muted);
+                font-size: 13px;
+              }
+              @media (max-width: 860px) {
+                .hero,
+                .grid {
+                  grid-template-columns: 1fr;
+                }
+                .kpis,
+                .pill-grid {
+                  grid-template-columns: 1fr;
+                }
+                h1 {
+                  font-size: 30px;
+                }
               }
-              a { color: #2563eb; }
             </style>
           </head>
           <body>
-            <h1>CleanOps OpenEnv is running</h1>
-            <p>
-              This Hugging Face Space hosts the CleanOps OpenEnv benchmark for
-              operational data cleaning tasks.
-            </p>
-            <p>
-              The competition validator uses the API endpoints below rather than
-              this browser page.
-            </p>
-            <ul>
-              <li><a href="/health">GET /health</a></li>
-              <li><a href="/schema">GET /schema</a></li>
-              <li><a href="/docs">GET /docs</a></li>
-              <li><code>POST /reset</code></li>
-              <li><code>POST /step</code></li>
-              <li><code>GET /state</code></li>
-            </ul>
-            <p>Example:</p>
-            <pre>curl -X POST /reset -H "Content-Type: application/json" -d '{"task_id":"customer_contacts_easy","seed":7}'</pre>
+            <div class="shell">
+              <section class="hero">
+                <div>
+                  <div class="badge-row">
+                    <div class="badge">OpenEnv Benchmark</div>
+                    <div class="badge">Real-world Data Cleaning</div>
+                    <div class="badge">3 Graded Tasks</div>
+                  </div>
+                  <h1>CleanOps OpenEnv</h1>
+                  <p>
+                    A hosted benchmark for operational data cleaning tasks across
+                    CRM, orders, subscriptions, and payments. This Space exposes
+                    the OpenEnv API and a live demo so reviewers can see that the
+                    environment is actually working.
+                  </p>
+                </div>
+                <div class="hero-card">
+                  <h2>What this Space demonstrates</h2>
+                  <div class="pill-grid">
+                    <div class="pill">
+                      <strong>Easy</strong>
+                      Customer contact cleanup
+                    </div>
+                    <div class="pill">
+                      <strong>Medium</strong>
+                      Order reconciliation
+                    </div>
+                    <div class="pill">
+                      <strong>Hard</strong>
+                      CRM migration repair
+                    </div>
+                    <div class="pill">
+                      <strong>API-ready</strong>
+                      <code>/reset</code>, <code>/step</code>, <code>/state</code>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              <section class="grid">
+                <div class="panel">
+                  <h2>Live Demo</h2>
+                  <p>
+                    Run one of the benchmark tasks below. This sends a real
+                    <code>POST /reset</code> request and renders a summary from the
+                    returned observation.
+                  </p>
+
+                  <div id="health" class="status">Checking API health...</div>
+
+                  <div class="button-row">
+                    <button class="primary" data-task="customer_contacts_easy">Run Easy Task</button>
+                    <button class="primary" data-task="orders_reconciliation_medium">Run Medium Task</button>
+                    <button class="primary" data-task="crm_migration_hard">Run Hard Task</button>
+                    <a class="link-btn secondary" href="/docs">Open API Docs</a>
+                  </div>
+
+                  <div class="kpis">
+                    <div class="kpi">
+                      <span>Task</span>
+                      <strong id="taskId">-</strong>
+                    </div>
+                    <div class="kpi">
+                      <span>Initial Score</span>
+                      <strong id="score">-</strong>
+                    </div>
+                    <div class="kpi">
+                      <span>Validation Issues</span>
+                      <strong id="issues">-</strong>
+                    </div>
+                  </div>
+
+                  <div style="margin-top: 18px;">
+                    <pre id="output">Click one of the task buttons to fetch a live observation from /reset.</pre>
+                  </div>
+                </div>
+
+                <div class="panel">
+                  <h2>Endpoints</h2>
+                  <p>
+                    The competition validator checks the API, not just the page UI.
+                  </p>
+                  <div class="endpoint-list">
+                    <div class="endpoint">
+                      <div>
+                        <strong>GET /health</strong><br />
+                        <small>Service liveness check</small>
+                      </div>
+                      <a href="/health">Open</a>
+                    </div>
+                    <div class="endpoint">
+                      <div>
+                        <strong>GET /schema</strong><br />
+                        <small>Typed OpenEnv schema</small>
+                      </div>
+                      <a href="/schema">Open</a>
+                    </div>
+                    <div class="endpoint">
+                      <div>
+                        <strong>GET /docs</strong><br />
+                        <small>Interactive FastAPI docs</small>
+                      </div>
+                      <a href="/docs">Open</a>
+                    </div>
+                    <div class="endpoint">
+                      <div>
+                        <strong>POST /reset</strong><br />
+                        <small>Start a task episode</small>
+                      </div>
+                      <code>API</code>
+                    </div>
+                    <div class="endpoint">
+                      <div>
+                        <strong>POST /step</strong><br />
+                        <small>Apply a typed action</small>
+                      </div>
+                      <code>API</code>
+                    </div>
+                    <div class="endpoint">
+                      <div>
+                        <strong>GET /state</strong><br />
+                        <small>Inspect current environment state</small>
+                      </div>
+                      <code>API</code>
+                    </div>
+                  </div>
+
+                  <div style="margin-top: 18px;">
+                    <pre>curl -X POST /reset -H "Content-Type: application/json" -d '{"task_id":"customer_contacts_easy","seed":7}'</pre>
+                  </div>
+
+                  <div class="footer">
+                    This Space hosts a deterministic OpenEnv benchmark with fixed
+                    tasks and graders for reproducible evaluation.
+                  </div>
+                </div>
+              </section>
+            </div>
+
+            <script>
+              const healthEl = document.getElementById("health");
+              const outputEl = document.getElementById("output");
+              const taskEl = document.getElementById("taskId");
+              const scoreEl = document.getElementById("score");
+              const issuesEl = document.getElementById("issues");
+
+              async function loadHealth() {
+                try {
+                  const response = await fetch("/health");
+                  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                  const data = await response.json();
+                  healthEl.textContent = `API healthy: ${data.status}`;
+                  healthEl.className = "status";
+                } catch (error) {
+                  healthEl.textContent = `API check failed: ${error.message}`;
+                  healthEl.className = "status error";
+                }
+              }
+
+              async function runTask(taskId) {
+                outputEl.textContent = "Loading...";
+                try {
+                  const response = await fetch("/reset", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ task_id: taskId, seed: 7 }),
+                  });
+                  if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                  }
+                  const payload = await response.json();
+                  const observation = payload.observation || {};
+                  taskEl.textContent = observation.task_id || taskId;
+                  scoreEl.textContent = String(observation.quality_score ?? "-");
+                  issuesEl.textContent = String((observation.validation_issues || []).length);
+                  outputEl.textContent = JSON.stringify(
+                    {
+                      task_id: observation.task_id,
+                      difficulty: observation.difficulty,
+                      objective: observation.objective,
+                      quality_score: observation.quality_score,
+                      remaining_steps: observation.remaining_steps,
+                      validation_issue_count: (observation.validation_issues || []).length,
+                      available_operations: (observation.available_operations || []).map((item) => item.operation_id),
+                    },
+                    null,
+                    2
+                  );
+                } catch (error) {
+                  outputEl.textContent = `Request failed: ${error.message}`;
+                }
+              }
+
+              document.querySelectorAll("button[data-task]").forEach((button) => {
+                button.addEventListener("click", () => runTask(button.dataset.task));
+              });
+
+              loadHealth();
+            </script>
           </body>
         </html>
         """