Spaces:

cjerzak
/

asa-api

Running

App Files Files Community

cjerzak commited on Mar 4

Commit

c169203

verified ·

1 Parent(s): 52d49dd

Create www/index.html

Browse files

Files changed (1) hide show

www/index.html +368 -0

www/index.html ADDED Viewed

	@@ -0,0 +1,368 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ASA API Query Console</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-a: #f4efe4;
+      --bg-b: #d4e5ef;
+      --ink: #10222e;
+      --panel: rgba(255, 255, 255, 0.85);
+      --line: rgba(16, 34, 46, 0.18);
+      --accent: #0f6d85;
+      --accent-strong: #0a5062;
+      --ok: #1f7a3a;
+      --err: #9a1f3c;
+      --shadow: 0 18px 45px rgba(16, 34, 46, 0.14);
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 85% 15%, rgba(15, 109, 133, 0.15) 0 18%, transparent 19%),
+        radial-gradient(circle at 12% 90%, rgba(239, 135, 82, 0.18) 0 16%, transparent 17%),
+        linear-gradient(130deg, var(--bg-a), var(--bg-b));
+      font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+      animation: bg-shift 1.4s ease-out both;
+      padding: 28px 18px;
+    }
+    @keyframes bg-shift {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .shell {
+      max-width: 860px;
+      margin: 0 auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      backdrop-filter: blur(3px);
+      box-shadow: var(--shadow);
+      border-radius: 18px;
+      overflow: hidden;
+    }
+    .hero {
+      padding: 26px 28px 18px;
+      border-bottom: 1px solid var(--line);
+      background: linear-gradient(135deg, rgba(15, 109, 133, 0.08), rgba(255, 255, 255, 0));
+    }
+    .eyebrow {
+      margin: 0;
+      text-transform: uppercase;
+      letter-spacing: 0.14em;
+      font-size: 11px;
+      color: rgba(16, 34, 46, 0.62);
+      font-family: "IBM Plex Mono", monospace;
+    }
+    h1 {
+      margin: 8px 0 0;
+      font-family: "Archivo Narrow", sans-serif;
+      font-size: clamp(1.8rem, 4vw, 2.35rem);
+      line-height: 1.08;
+      letter-spacing: 0.01em;
+    }
+    .subtext {
+      margin: 8px 0 0;
+      font-size: 0.97rem;
+      color: rgba(16, 34, 46, 0.78);
+      max-width: 68ch;
+    }
+    .content {
+      padding: 22px 28px 28px;
+      display: grid;
+      gap: 14px;
+    }
+    label {
+      display: block;
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+    input,
+    textarea,
+    select,
+    button {
+      font: inherit;
+    }
+    input,
+    textarea,
+    select {
+      width: 100%;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      background: #ffffff;
+      color: var(--ink);
+      padding: 11px 12px;
+      transition: border-color 0.16s ease, box-shadow 0.16s ease;
+    }
+    input:focus,
+    textarea:focus,
+    select:focus {
+      outline: none;
+      border-color: rgba(15, 109, 133, 0.66);
+      box-shadow: 0 0 0 3px rgba(15, 109, 133, 0.13);
+    }
+    textarea {
+      min-height: 150px;
+      resize: vertical;
+      line-height: 1.45;
+    }
+    .row {
+      display: grid;
+      gap: 12px;
+      grid-template-columns: 1fr;
+    }
+    @media (min-width: 760px) {
+      .row {
+        grid-template-columns: 1fr 180px;
+      }
+    }
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    button {
+      background: linear-gradient(160deg, var(--accent), var(--accent-strong));
+      color: #fff;
+      border: none;
+      border-radius: 10px;
+      padding: 10px 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.13s ease, box-shadow 0.13s ease, opacity 0.2s ease;
+      box-shadow: 0 6px 16px rgba(10, 80, 98, 0.28);
+    }
+    button:hover {
+      transform: translateY(-1px);
+    }
+    button:disabled {
+      opacity: 0.65;
+      cursor: default;
+      transform: none;
+      box-shadow: none;
+    }
+    .status {
+      font-size: 0.9rem;
+      font-family: "IBM Plex Mono", monospace;
+    }
+    .status.ok {
+      color: var(--ok);
+    }
+    .status.err {
+      color: var(--err);
+    }
+    .output-wrap {
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.93);
+      overflow: hidden;
+      animation: reveal 0.35s ease both;
+    }
+    @keyframes reveal {
+      from {
+        opacity: 0;
+        transform: translateY(5px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .output-head {
+      border-bottom: 1px solid var(--line);
+      font-family: "IBM Plex Mono", monospace;
+      font-size: 12px;
+      padding: 8px 12px;
+      letter-spacing: 0.02em;
+      background: rgba(16, 34, 46, 0.04);
+    }
+    pre {
+      margin: 0;
+      max-height: 380px;
+      overflow: auto;
+      padding: 14px;
+      font-size: 0.88rem;
+      line-height: 1.45;
+      font-family: "IBM Plex Mono", monospace;
+      color: #0f2832;
+      background: rgba(255, 255, 255, 0.9);
+    }
+    .hint {
+      margin-top: 6px;
+      font-size: 0.83rem;
+      color: rgba(16, 34, 46, 0.66);
+    }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <section class="hero">
+      <p class="eyebrow">Hugging Face Space / ASA API</p>
+      <h1>Query Console</h1>
+      <p class="subtext">
+        Enter the GUI password and send a prompt to the ASA backend.
+        This page calls <code>/gui/query</code> and returns the same message/parsed output structure as the API.
+      </p>
+    </section>
+    <section class="content">
+      <div class="row">
+        <div>
+          <label for="password">GUI Password</label>
+          <input id="password" type="password" placeholder="Enter GUI_PASSWORD" autocomplete="current-password" />
+        </div>
+        <div>
+          <label for="output-format">Output Format</label>
+          <select id="output-format">
+            <option value="text">text</option>
+            <option value="json">json</option>
+            <option value="raw">raw</option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <label for="prompt">Prompt</label>
+        <textarea id="prompt" placeholder="Ask your question here..."></textarea>
+      </div>
+      <div class="actions">
+        <button id="submit-btn" type="button">Run Query</button>
+        <span id="status" class="status"></span>
+      </div>
+      <div class="output-wrap">
+        <div class="output-head">Response</div>
+        <pre id="output">Awaiting request...</pre>
+      </div>
+      <p class="hint">
+        API key auth does not apply to this GUI endpoint. Password is checked against <code>GUI_PASSWORD</code> (default <code>999</code> if unset).
+      </p>
+    </section>
+  </main>
+  <script>
+    const submitBtn = document.getElementById("submit-btn");
+    const passwordInput = document.getElementById("password");
+    const promptInput = document.getElementById("prompt");
+    const outputFormatInput = document.getElementById("output-format");
+    const outputPre = document.getElementById("output");
+    const statusEl = document.getElementById("status");
+    function setStatus(text, type) {
+      statusEl.textContent = text || "";
+      statusEl.className = "status" + (type ? " " + type : "");
+    }
+    function setBusy(busy) {
+      submitBtn.disabled = !!busy;
+      submitBtn.textContent = busy ? "Running..." : "Run Query";
+    }
+    async function runQuery() {
+      const password = passwordInput.value || "";
+      const prompt = promptInput.value || "";
+      const outputFormat = outputFormatInput.value || "text";
+      if (!password.trim()) {
+        setStatus("Password required.", "err");
+        return;
+      }
+      if (!prompt.trim()) {
+        setStatus("Prompt required.", "err");
+        return;
+      }
+      setBusy(true);
+      setStatus("Sending request...", "");
+      outputPre.textContent = "Working...";
+      try {
+        const response = await fetch("/gui/query", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            password,
+            prompt,
+            run: {
+              output_format: outputFormat
+            }
+          })
+        });
+        const data = await response.json();
+        outputPre.textContent = JSON.stringify(data, null, 2);
+        if (!response.ok || data.status === "error") {
+          const errorMessage = data.error || "Request failed.";
+          setStatus(errorMessage, "err");
+        } else {
+          setStatus("Success", "ok");
+        }
+      } catch (error) {
+        outputPre.textContent = JSON.stringify({
+          status: "error",
+          error: String(error)
+        }, null, 2);
+        setStatus("Network or server error.", "err");
+      } finally {
+        setBusy(false);
+      }
+    }
+    submitBtn.addEventListener("click", runQuery);
+    promptInput.addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        runQuery();
+      }
+    });
+  </script>
+</body>
+</html>