Upload 2 files

static/script.js

@@ -0,0 +1,36 @@
+document.getElementById("get-answer").addEventListener("click", async () => {
+  const context = document.getElementById("context").value.trim();
+  const questions = document.getElementById("questions").value.trim();
+  const output = document.getElementById("answer-box");
+  const history = document.getElementById("history-list");
+
+  output.textContent = "⏳ Generating answers...";
+
+  const res = await fetch("/get_answer", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({ context, questions })
+  });
+
+  const data = await res.json();
+
+  if (data.error) {
+    output.textContent = "⚠️ " + data.error;
+    return;
+  }
+
+  let text = "";
+  data.results.forEach((r, i) => {
+    text += `Q${i + 1}: ${r.question}\nAnswer: ${r.answer}\nConfidence: ${r.score}\n${"-".repeat(50)}\n`;
+  });
+  output.textContent = text;
+
+  // Add to history
+  const li = document.createElement("li");
+  li.textContent = questions.replace(/\n/g, " | ");
+  history.prepend(li);
+});
+
+document.getElementById("toggle-dark").addEventListener("click", () => {
+  document.body.classList.toggle("dark-mode");
+});

static/style.css

@@ -0,0 +1,101 @@
+body {
+  font-family: "Segoe UI", Roboto, sans-serif;
+  background-color: #f8f9fc;
+  color: #222;
+  margin: 0;
+  padding: 0;
+  transition: background 0.4s, color 0.4s;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #4f46e5;
+  color: white;
+  padding: 12px 30px;
+  font-size: 18px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+}
+
+.navbar a {
+  color: white;
+  margin-left: 20px;
+  text-decoration: none;
+}
+
+.container {
+  max-width: 900px;
+  margin: 40px auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 5px 25px rgba(0,0,0,0.1);
+  padding: 30px;
+}
+
+.card h2 {
+  text-align: center;
+  color: #4f46e5;
+}
+
+label {
+  font-weight: bold;
+  display: block;
+  margin-top: 20px;
+}
+
+textarea {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 10px;
+  font-size: 16px;
+  margin-top: 8px;
+  resize: vertical;
+  min-height: 100px;
+}
+
+button {
+  display: block;
+  margin: 20px auto;
+  background: #4f46e5;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  padding: 12px 30px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+button:hover {
+  background: #4338ca;
+}
+
+pre {
+  background: #f1f5f9;
+  padding: 15px;
+  border-radius: 10px;
+  overflow-x: auto;
+}
+
+.dark-mode {
+  background-color: #181818;
+  color: #f1f1f1;
+}
+
+.dark-mode .card {
+  background-color: #242424;
+}
+
+.dark-mode pre {
+  background-color: #333;
+}
+
+.dark-mode .navbar {
+  background-color: #2e2e2e;
+}