spatioscript-llm-spatial-biology/index.html at main · hackbio-ca/spatioscript-llm-spatial-biology · GitHub

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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>SpatioScript</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
  <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=Bitcount+Ink:wght@100..900&display=swap" rel="stylesheet">
</head>
<body class="bg-black min-h-screen flex items-center justify-center font-mono bg-[url('https://static.wixstatic.com/media/56775c_04058c41b3584204b7a2212119519d31~mv2.jpg/v1/fill/w_3000,h_1102,al_c,q_90,enc_avif,quality_auto/AdobeStock_478200128_edited.jpg')] bg-cover bg-center">
    <div class="w-full max-w-3xl p-6 rounded-lg shadow-lg border border-neutral-800 bg-black/40 backdrop-blur-md">
    <h1 style="font-family: 'Bitcount Ink'; font-size: x-large" class="text-xl font-bold text-green-400 mb-4">SpatioScript: </br> LLM-powered spatial biology query tool
    </h1>

    <!-- Input -->
    <div class="flex gap-2 mb-4">
      <input
        type="text"
        id="question"
        placeholder="> Enter query..."
        class="input input-bordered w-full bg-black text-green-400 placeholder:text-green-600 border-neutral-700 focus:border-green-500"
      />
      <button onclick="ask()" class="btn bg-green-400 border border-neutral-700 text-black hover:bg-neutral-800">Run</button>
    </div>

    <!-- Mockup Code Output -->
    <h2 class="text-lg text-green-400 mb-2">Response:</h2>
    <div class="mockup-code bg-black text-green-300 border border-neutral-800 h-80 overflow-y-auto p-4">
      <pre data-prefix="$"><code id="response">Waiting for input...</code></pre>
    </div>
    <div class="mt-4 flex gap-2">
      <button value="What immune cells are available in the database?" onclick="exampleQuery(this)" class="btn btn-sm bg-green-400 border border-neutral-700 text-black hover:bg-neutral-800">What immune cells are available in the database?</button>
  </div>

  <script>
    async function ask() {
      const question = document.getElementById("question").value;
      const responseElement = document.getElementById("response");

      responseElement.textContent = "Loading...";

      try {
        const res = await fetch("http://localhost:8000/ask", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ prompt: question })
        });
        const data = await res.json();
        responseElement.textContent = JSON.stringify(data, null, 2);
      } catch (err) {
        responseElement.textContent = "Error: " + err;
      }
    }
  </script>
  <script>
    async function exampleQuery(button){
      const query = button.value;
      const question = document.getElementById("question");
      question.value = query;
      ask();
    }
  </script>
</body>
</html>