Spaces:

Redhanuman
/

sabnock-docker-arena

Running

App Files Files Community

Redhanuman commited on 15 days ago

Commit

69b963a

verified ·

1 Parent(s): 3553d3d

Initial Sabnock Docker static arena

Browse files

Files changed (4) hide show

LICENSE +16 -0
README.md +8 -5
data/sabnock_docker_v1.json +0 -0
index.html +737 -17

LICENSE ADDED Viewed

	@@ -0,0 +1,16 @@

+Apache License
+Version 2.0, January 2004
+Copyright 2026 Redhanuman
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Sabnock Docker Arena
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Sabnock Docker Arena
 sdk: static
+license: apache-2.0
 ---
+# Sabnock Docker Arena
+Static browser dashboard for Sabnock Docker.
+This Space lets users browse the benchmark, filter tasks, inspect files/logs, view oracle patches, and score candidate unified-diff patches in the browser.
+It uses `sdk: static` so it can run on Hugging Face without paid Gradio hardware.

data/sabnock_docker_v1.json ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -1,19 +1,739 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Sabnock Docker Arena</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0b0d10;
+      --panel: #10141a;
+      --panel-2: #151a22;
+      --line: #27303b;
+      --text: #e7ecf3;
+      --muted: #95a0af;
+      --accent: #4fb3ff;
+      --ok: #48d597;
+      --bad: #ff6b6b;
+      --warn: #f0c36a;
+      --code: #080a0d;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      letter-spacing: 0;
+    }
+    button,
+    select,
+    textarea {
+      font: inherit;
+    }
+    .shell {
+      width: min(1500px, 100%);
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .hero {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 22px;
+      background: linear-gradient(135deg, #111820, #0c1015 58%, #11110d);
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: 32px;
+      line-height: 1.1;
+    }
+    .hero p {
+      margin: 0;
+      max-width: 980px;
+      color: var(--muted);
+      line-height: 1.55;
+    }
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 10px;
+      margin: 12px 0;
+    }
+    .metric {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 12px 14px;
+      background: var(--panel);
+    }
+    .metric span {
+      display: block;
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+    .metric strong {
+      display: block;
+      font-size: 26px;
+      margin-top: 4px;
+    }
+    .toolbar,
+    .tabs {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 12px 0;
+    }
+    .toolbar label {
+      color: var(--muted);
+      font-size: 13px;
+    }
+    select,
+    textarea {
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      color: var(--text);
+      background: var(--panel);
+    }
+    select {
+      min-width: 150px;
+      padding: 9px 10px;
+    }
+    button {
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      color: var(--text);
+      background: var(--panel-2);
+      padding: 9px 12px;
+      cursor: pointer;
+    }
+    button.active {
+      border-color: var(--accent);
+      background: #112338;
+    }
+    button.primary {
+      background: #0d3b5e;
+      border-color: #1b5f92;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(320px, 0.9fr) minmax(500px, 1.4fr);
+      gap: 12px;
+    }
+    .panel {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      min-width: 0;
+    }
+    .panel-head {
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--line);
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+      align-items: center;
+    }
+    .panel-head h2 {
+      margin: 0;
+      font-size: 15px;
+    }
+    .panel-body {
+      padding: 14px;
+    }
+    .task-list {
+      max-height: 560px;
+      overflow: auto;
+    }
+    .task-row {
+      width: 100%;
+      display: block;
+      text-align: left;
+      padding: 10px 12px;
+      border: 0;
+      border-bottom: 1px solid var(--line);
+      border-radius: 0;
+      background: transparent;
+    }
+    .task-row:hover,
+    .task-row.active {
+      background: #141b24;
+    }
+    .task-row strong {
+      display: block;
+      font-size: 13px;
+      margin-bottom: 4px;
+    }
+    .task-row span {
+      display: block;
+      color: var(--muted);
+      font-size: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .task-title {
+      margin: 0 0 8px;
+      font-size: 22px;
+    }
+    .summary {
+      color: var(--muted);
+      line-height: 1.55;
+      margin-bottom: 12px;
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 8px 0 12px;
+    }
+    .chip {
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      color: #cbd5e1;
+      background: #0b1118;
+      padding: 4px 8px;
+      font-size: 12px;
+    }
+    pre {
+      margin: 0;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      padding: 12px;
+      max-height: 360px;
+      overflow: auto;
+      background: var(--code);
+      color: #d7dee8;
+      line-height: 1.45;
+      font-size: 12px;
+      white-space: pre;
+    }
+    textarea {
+      width: 100%;
+      min-height: 280px;
+      padding: 12px;
+      resize: vertical;
+      background: var(--code);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.45;
+    }
+    .cols {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-top: 12px;
+    }
+    .score {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 12px;
+      background: var(--panel);
+      line-height: 1.5;
+    }
+    .score.pass {
+      border-color: #246b4d;
+    }
+    .score.fail {
+      border-color: #774042;
+    }
+    .score ul {
+      margin: 8px 0 0;
+      padding-left: 18px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+    th,
+    td {
+      border-bottom: 1px solid var(--line);
+      padding: 9px 10px;
+      text-align: left;
+      vertical-align: top;
+    }
+    th {
+      color: var(--muted);
+      font-weight: 600;
+    }
+    .hidden {
+      display: none;
+    }
+    @media (max-width: 960px) {
+      .metrics,
+      .grid,
+      .cols {
+        grid-template-columns: 1fr;
+      }
+      .shell {
+        padding: 12px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <section class="hero">
+      <h1>Sabnock Docker</h1>
+      <p>A benchmark for testing whether AI coding agents can repair Dockerfile, Compose, dependency, security, and container runtime failures. This static arena runs fully in the browser.</p>
+    </section>
+    <section class="metrics">
+      <div class="metric"><span>Tasks</span><strong id="metricTasks">0</strong></div>
+      <div class="metric"><span>Failure Types</span><strong id="metricFailures">0</strong></div>
+      <div class="metric"><span>Ecosystems</span><strong id="metricEcosystems">0</strong></div>
+      <div class="metric"><span>Challenge</span><strong id="metricChallenge">0</strong></div>
+    </section>
+    <nav class="tabs">
+      <button class="active" data-tab="browse">Benchmark</button>
+      <button data-tab="score">Patch Scorer</button>
+      <button data-tab="leaderboard">Leaderboard</button>
+    </nav>
+    <section id="browse" class="tab">
+      <div class="toolbar">
+        <label>Split <select id="splitFilter"></select></label>
+        <label>Ecosystem <select id="ecosystemFilter"></select></label>
+        <label>Difficulty <select id="difficultyFilter"></select></label>
+      </div>
+      <div class="grid">
+        <aside class="panel">
+          <div class="panel-head">
+            <h2>Tasks</h2>
+            <span id="taskCount" class="chip">0</span>
+          </div>
+          <div id="taskList" class="task-list"></div>
+        </aside>
+        <section class="panel">
+          <div class="panel-head">
+            <h2 id="taskHeading">Loading</h2>
+            <select id="fileSelect"></select>
+          </div>
+          <div class="panel-body">
+            <h3 id="taskTitle" class="task-title"></h3>
+            <div id="taskSummary" class="summary"></div>
+            <div id="taskChips" class="chips"></div>
+            <div class="cols">
+              <div>
+                <h3>Failure Log</h3>
+                <pre id="failureLog"></pre>
+              </div>
+              <div>
+                <h3>File</h3>
+                <pre id="fileContent"></pre>
+              </div>
+            </div>
+            <h3>Oracle Patch</h3>
+            <pre id="oraclePatch"></pre>
+          </div>
+        </section>
+      </div>
+    </section>
+    <section id="score" class="tab hidden">
+      <div class="panel">
+        <div class="panel-head">
+          <h2>Patch Scorer</h2>
+          <select id="scoreTaskSelect"></select>
+        </div>
+        <div class="panel-body">
+          <textarea id="patchInput" spellcheck="false" placeholder="Paste unified diff here"></textarea>
+          <div class="toolbar">
+            <button id="scoreButton" class="primary">Score Patch</button>
+            <button id="loadOracleButton">Load Oracle Patch</button>
+          </div>
+          <div id="scoreOutput" class="score">Paste a patch and score it.</div>
+        </div>
+      </div>
+    </section>
+    <section id="leaderboard" class="tab hidden">
+      <div class="panel">
+        <div class="panel-head">
+          <h2>Leaderboard Scaffold</h2>
+        </div>
+        <div class="panel-body">
+          <table>
+            <thead>
+              <tr><th>Agent</th><th>Type</th><th>Passed</th><th>Total</th><th>Rate</th><th>Notes</th></tr>
+            </thead>
+            <tbody>
+              <tr><td>Oracle patch</td><td>reference</td><td id="oraclePassed">0</td><td id="oracleTotal">0</td><td>100%</td><td>Upper bound. Every official patch applies and satisfies final-file checks.</td></tr>
+              <tr><td>No-op patch</td><td>baseline</td><td>0</td><td id="noopTotal">0</td><td>0%</td><td>Lower bound. Empty patch fails every task.</td></tr>
+              <tr><td>Public agents</td><td>coming soon</td><td>-</td><td id="publicTotal">0</td><td>-</td><td>Run agents locally, submit JSONL, rank pass@1, apply rate, runtime, and cost.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    const state = {
+      tasks: [],
+      filtered: [],
+      selectedId: null
+    };
+    const byId = (id) => document.getElementById(id);
+    const unique = (items) => Array.from(new Set(items)).sort();
+    function linesToText(lines) {
+      return (lines || []).join("\n");
+    }
+    function taskById(id) {
+      return state.tasks.find((task) => task.id === id);
+    }
+    function fillSelect(select, values) {
+      select.innerHTML = "";
+      for (const value of values) {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = value;
+        select.appendChild(option);
+      }
+    }
+    function initFilters() {
+      fillSelect(byId("splitFilter"), ["all", ...unique(state.tasks.map((task) => task.split))]);
+      fillSelect(byId("ecosystemFilter"), ["all", ...unique(state.tasks.map((task) => task.ecosystem))]);
+      fillSelect(byId("difficultyFilter"), ["all", "easy", "medium", "hard"]);
+      fillSelect(byId("scoreTaskSelect"), state.tasks.map((task) => `${task.id} | ${task.title}`));
+    }
+    function updateMetrics() {
+      byId("metricTasks").textContent = state.tasks.length;
+      byId("metricFailures").textContent = unique(state.tasks.map((task) => task.failure_type)).length;
+      byId("metricEcosystems").textContent = unique(state.tasks.map((task) => task.ecosystem)).length;
+      byId("metricChallenge").textContent = state.tasks.filter((task) => task.split === "challenge").length;
+      byId("oraclePassed").textContent = state.tasks.length;
+      byId("oracleTotal").textContent = state.tasks.length;
+      byId("noopTotal").textContent = state.tasks.length;
+      byId("publicTotal").textContent = state.tasks.length;
+    }
+    function applyFilters() {
+      const split = byId("splitFilter").value;
+      const ecosystem = byId("ecosystemFilter").value;
+      const difficulty = byId("difficultyFilter").value;
+      state.filtered = state.tasks.filter((task) => {
+        return (split === "all" || task.split === split) &&
+          (ecosystem === "all" || task.ecosystem === ecosystem) &&
+          (difficulty === "all" || task.difficulty === difficulty);
+      });
+      byId("taskCount").textContent = `${state.filtered.length} shown`;
+      renderTaskList();
+      if (!state.filtered.some((task) => task.id === state.selectedId)) {
+        selectTask(state.filtered[0] ? state.filtered[0].id : null);
+      }
+    }
+    function renderTaskList() {
+      const list = byId("taskList");
+      list.innerHTML = "";
+      for (const task of state.filtered) {
+        const row = document.createElement("button");
+        row.className = `task-row ${task.id === state.selectedId ? "active" : ""}`;
+        row.innerHTML = `<strong>${task.id} | ${escapeHtml(task.title)}</strong><span>${task.split} | ${task.ecosystem} | ${task.difficulty} | ${task.failure_type}</span>`;
+        row.addEventListener("click", () => selectTask(task.id));
+        list.appendChild(row);
+      }
+    }
+    function selectTask(taskId) {
+      state.selectedId = taskId;
+      renderTaskList();
+      const task = taskById(taskId);
+      if (!task) {
+        byId("taskHeading").textContent = "No task";
+        return;
+      }
+      byId("taskHeading").textContent = `${task.id}`;
+      byId("taskTitle").textContent = task.title;
+      byId("taskSummary").textContent = task.summary;
+      byId("failureLog").textContent = linesToText(task.failure_log);
+      byId("oraclePatch").textContent = linesToText(task.oracle_patch);
+      byId("taskChips").innerHTML = [
+        task.split,
+        task.ecosystem,
+        task.difficulty,
+        task.failure_type,
+        ...task.tags
+      ].map((tag) => `<span class="chip">${escapeHtml(tag)}</span>`).join("");
+      const fileSelect = byId("fileSelect");
+      fillSelect(fileSelect, task.files.map((file) => file.path));
+      fileSelect.onchange = () => showFile(task.id, fileSelect.value);
+      showFile(task.id, fileSelect.value);
+    }
+    function showFile(taskId, path) {
+      const task = taskById(taskId);
+      const file = task.files.find((item) => item.path === path);
+      byId("fileContent").textContent = file ? linesToText(file.content) : "";
+    }
+    function scoreSelectedPatch() {
+      const selectValue = byId("scoreTaskSelect").value;
+      const taskId = selectValue.split(" | ")[0];
+      const task = taskById(taskId);
+      const patch = byId("patchInput").value;
+      const result = scorePatch(task, patch);
+      const output = byId("scoreOutput");
+      output.className = `score ${result.passed ? "pass" : "fail"}`;
+      output.innerHTML = `<strong>${result.passed ? "PASS" : "FAIL"}</strong><br>Score: ${result.passedChecks}/${result.totalChecks} (${Math.round(result.score * 100)}%)<br>Patch applied: ${result.applied}<ul>${result.messages.map((msg) => `<li>${escapeHtml(msg)}</li>`).join("")}</ul>`;
+    }
+    function scorePatch(task, patchText) {
+      const messages = [];
+      let passedChecks = 0;
+      let totalChecks = 0;
+      const applyResult = applyPatch(task, patchText);
+      totalChecks += 1;
+      if (applyResult.ok) {
+        passedChecks += 1;
+        messages.push("PASS patch applies cleanly");
+      } else {
+        messages.push(`FAIL patch does not apply cleanly: ${applyResult.error}`);
+      }
+      const touched = touchedFiles(patchText);
+      const scoring = task.scoring || {};
+      for (const path of scoring.must_touch || []) {
+        totalChecks += 1;
+        if (touched.has(path)) {
+          passedChecks += 1;
+          messages.push(`PASS must touch ${path}`);
+        } else {
+          messages.push(`FAIL missing touched file ${path}`);
+        }
+      }
+      for (const rule of scoring.must_contain || []) {
+        totalChecks += 1;
+        const finalText = applyResult.files[rule.path] || "";
+        if (finalText.includes(rule.text)) {
+          passedChecks += 1;
+          messages.push(`PASS final ${rule.path} contains ${JSON.stringify(rule.text)}`);
+        } else {
+          messages.push(`FAIL final ${rule.path} missing ${JSON.stringify(rule.text)}`);
+        }
+      }
+      for (const rule of scoring.must_not_contain || []) {
+        totalChecks += 1;
+        const finalText = applyResult.files[rule.path] || "";
+        if (!finalText.includes(rule.text)) {
+          passedChecks += 1;
+          messages.push(`PASS final ${rule.path} does not contain ${JSON.stringify(rule.text)}`);
+        } else {
+          messages.push(`FAIL final ${rule.path} still contains ${JSON.stringify(rule.text)}`);
+        }
+      }
+      return {
+        applied: applyResult.ok,
+        passed: totalChecks > 0 && passedChecks === totalChecks,
+        passedChecks,
+        totalChecks,
+        score: totalChecks > 0 ? passedChecks / totalChecks : 0,
+        messages
+      };
+    }
+    function touchedFiles(patchText) {
+      const touched = new Set();
+      for (const line of patchText.split(/\r?\n/)) {
+        if (line.startsWith("+++ b/")) touched.add(line.slice(6));
+        if (line.startsWith("--- a/")) touched.add(line.slice(6));
+      }
+      touched.delete("/dev/null");
+      return touched;
+    }
+    function applyPatch(task, patchText) {
+      const files = {};
+      for (const file of task.files) files[file.path] = [...file.content];
+      const lines = patchText.split(/\r?\n/);
+      let i = 0;
+      try {
+        while (i < lines.length) {
+          if (!lines[i].startsWith("--- a/")) {
+            i += 1;
+            continue;
+          }
+          const oldPath = lines[i].slice(6);
+          i += 1;
+          if (i >= lines.length || !lines[i].startsWith("+++ b/")) {
+            throw new Error(`missing +++ line after ${oldPath}`);
+          }
+          const newPath = lines[i].slice(6);
+          const path = newPath === "/dev/null" ? oldPath : newPath;
+          const original = files[path] ? [...files[path]] : [];
+          const output = [];
+          let oldIndex = 0;
+          i += 1;
+          while (i < lines.length && !lines[i].startsWith("--- a/")) {
+            if (!lines[i].startsWith("@@")) {
+              i += 1;
+              continue;
+            }
+            const match = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(lines[i]);
+            if (!match) throw new Error(`bad hunk header: ${lines[i]}`);
+            const start = Number(match[1]) - 1;
+            while (oldIndex < start) {
+              output.push(original[oldIndex] || "");
+              oldIndex += 1;
+            }
+            i += 1;
+            while (i < lines.length && !lines[i].startsWith("@@") && !lines[i].startsWith("--- a/")) {
+              const line = lines[i];
+              if (line === "\") {
+                i += 1;
+                continue;
+              }
+              const marker = line[0];
+              const text = line.slice(1);
+              if (marker === " ") {
+                if ((original[oldIndex] || "") !== text) throw new Error(`context mismatch in ${path}`);
+                output.push(text);
+                oldIndex += 1;
+              } else if (marker === "-") {
+                if ((original[oldIndex] || "") !== text) throw new Error(`remove mismatch in ${path}`);
+                oldIndex += 1;
+              } else if (marker === "+") {
+                output.push(text);
+              } else if (line.length === 0) {
+                i += 1;
+                continue;
+              } else {
+                throw new Error(`bad patch line: ${line}`);
+              }
+              i += 1;
+            }
+          }
+          while (oldIndex < original.length) {
+            output.push(original[oldIndex] || "");
+            oldIndex += 1;
+          }
+          files[path] = output;
+        }
+        const finalFiles = {};
+        for (const [path, content] of Object.entries(files)) {
+          finalFiles[path] = content.join("\n") + "\n";
+        }
+        return { ok: true, files: finalFiles, error: null };
+      } catch (error) {
+        const finalFiles = {};
+        for (const [path, content] of Object.entries(files)) {
+          finalFiles[path] = content.join("\n") + "\n";
+        }
+        return { ok: false, files: finalFiles, error: error.message };
+      }
+    }
+    function loadOraclePatch() {
+      const taskId = byId("scoreTaskSelect").value.split(" | ")[0];
+      const task = taskById(taskId);
+      byId("patchInput").value = linesToText(task.oracle_patch);
+      scoreSelectedPatch();
+    }
+    function escapeHtml(value) {
+      return String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+    function initTabs() {
+      for (const button of document.querySelectorAll("[data-tab]")) {
+        button.addEventListener("click", () => {
+          for (const other of document.querySelectorAll("[data-tab]")) other.classList.remove("active");
+          for (const tab of document.querySelectorAll(".tab")) tab.classList.add("hidden");
+          button.classList.add("active");
+          byId(button.dataset.tab).classList.remove("hidden");
+        });
+      }
+    }
+    async function main() {
+      initTabs();
+      const response = await fetch("data/sabnock_docker_v1.json");
+      state.tasks = await response.json();
+      initFilters();
+      updateMetrics();
+      byId("splitFilter").addEventListener("change", applyFilters);
+      byId("ecosystemFilter").addEventListener("change", applyFilters);
+      byId("difficultyFilter").addEventListener("change", applyFilters);
+      byId("scoreButton").addEventListener("click", scoreSelectedPatch);
+      byId("loadOracleButton").addEventListener("click", loadOraclePatch);
+      applyFilters();
+    }
+    main().catch((error) => {
+      document.body.innerHTML = `<main class="shell"><section class="hero"><h1>Failed to load</h1><p>${escapeHtml(error.message)}</p></section></main>`;
+    });
+  </script>
+</body>
 </html>