Spaces:

MedhaCodes
/

Question-answering-APP

Sleeping

App Files Files Community

MedhaCodes commited on Oct 9, 2025

Commit

4f13eaf

verified ·

1 Parent(s): 19502b9

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +128 -85

templates/index.html CHANGED Viewed

@@ -14,83 +14,149 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1rem;
     }
-    /* Smooth scrollbars */
-    #answer-box::-webkit-scrollbar, #history-list::-webkit-scrollbar {
-      width: 8px;
     }
-    #answer-box::-webkit-scrollbar-thumb, #history-list::-webkit-scrollbar-thumb {
-      background-color: rgba(99, 102, 241, 0.7);
-      border-radius: 5px;
     }
-    /* Typing animation */
-    .typing {
-      border-right: 3px solid #6366f1;
-      white-space: nowrap;
-      overflow: hidden;
-      animation: typing 3s steps(40, end), blink 0.8s infinite;
     }
-    @keyframes typing {
-      from { width: 0; }
-      to { width: 100%; }
     }
-    @keyframes blink {
-      50% { border-color: transparent; }
     }
-    /* Shimmer loading */
-    .shimmer {
-      background: linear-gradient(
-        100deg,
-        rgba(255,255,255,0) 20%,
-        rgba(255,255,255,0.6) 50%,
-        rgba(255,255,255,0) 80%
-      );
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
     }
-    @keyframes shimmer {
-      100% { background-position: -200% 0; }
     }
   </style>
 </head>
 <body>
-  <div class="w-full max-w-lg bg-white/90 rounded-[35px] shadow-2xl p-6 md:p-8 border border-indigo-100 backdrop-blur-md space-y-5">
-    <h1 class="text-center text-3xl md:text-4xl font-extrabold text-indigo-700">💬 Ask Your Doubts</h1>
     <div>
-      <label class="block text-lg font-semibold text-gray-700">📘 Context</label>
-      <textarea id="context"
-        placeholder="Paste your passage or background information here..."
-        class="w-full mt-2 rounded-3xl border border-blue-200 bg-blue-50 p-5 text-gray-800 text-base md:text-lg shadow-inner focus:ring-4 focus:ring-blue-400 min-h-[150px] resize-y transition"></textarea>
     </div>
-    <div>
-      <label class="block text-lg font-semibold text-gray-700">❓ Question(s)</label>
-      <textarea id="question"
-        placeholder="Write one or more questions (each on a new line)..."
-        class="w-full mt-2 rounded-3xl border border-indigo-200 bg-indigo-50 p-5 text-gray-800 text-base md:text-lg shadow-inner focus:ring-4 focus:ring-indigo-400 min-h-[120px] resize-y transition"></textarea>
     </div>
-    <button id="submit-btn"
-      class="w-full py-4 text-lg font-bold text-white rounded-3xl shadow-lg bg-gradient-to-r from-blue-600 via-indigo-500 to-purple-500 hover:scale-[1.03] transition-all duration-300">
-      🚀 Ask Question
-    </button>
-    <div>
-      <h2 class="text-2xl font-bold text-blue-700 mb-3">💡 Answers</h2>
-      <div id="answer-box"
-        class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-3xl p-5 text-gray-900 text-lg min-h-[150px] max-h-[350px] overflow-y-auto shadow-inner">
-      </div>
     </div>
-    <div>
-      <h2 class="text-2xl font-bold text-indigo-700 mb-3">📜 History</h2>
-      <ul id="history-list" class="space-y-3 text-gray-800 text-base max-h-[200px] overflow-y-auto"></ul>
     </div>
   </div>
@@ -102,64 +168,41 @@
     btn.addEventListener("click", async () => {
       const context = document.getElementById("context").value.trim();
       const question = document.getElementById("question").value.trim();
       if (!context || !question) {
         answerBox.textContent = "⚠️ Please provide both context and question(s).";
         return;
       }
-      answerBox.innerHTML = `
-        <div class="shimmer bg-indigo-100 w-full h-24 rounded-2xl mb-2"></div>
-        <div class="shimmer bg-indigo-100 w-11/12 h-24 rounded-2xl"></div>
-      `;
       try {
         const res = await fetch("/predict", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ context, question })
         });
         const data = await res.json();
         if (data.error) {
           answerBox.textContent = "⚠️ " + data.error;
           return;
         }
         answerBox.innerHTML = "";
-        for (let i = 0; i < data.results.length; i++) {
-          const r = data.results[i];
           const qaDiv = document.createElement("div");
-          qaDiv.className = "mb-4 p-4 bg-gradient-to-br from-indigo-100 to-blue-100 rounded-2xl shadow transition";
-          const qElem = document.createElement("p");
-          qElem.innerHTML = `<strong>Q${i + 1}:</strong> ${r.question}`;
-          qElem.className = "font-semibold text-blue-800";
-          const aElem = document.createElement("p");
-          aElem.className = "text-gray-900 typing";
-          aElem.innerHTML = `<strong>Answer:</strong> ${r.answer}`;
-          const sElem = document.createElement("p");
-          sElem.innerHTML = `<strong>Confidence:</strong> ${r.score}`;
-          sElem.className = "text-gray-700 text-sm";
-          qaDiv.appendChild(qElem);
-          qaDiv.appendChild(aElem);
-          qaDiv.appendChild(sElem);
           answerBox.appendChild(qaDiv);
-        }
         const li = document.createElement("li");
         li.textContent = question.replace(/\n/g, " | ");
-        li.className = "bg-gradient-to-r from-indigo-100 to-purple-100 px-4 py-3 rounded-xl shadow cursor-pointer hover:scale-[1.02] transition";
         li.addEventListener("click", () => {
           document.getElementById("question").value = question;
           document.getElementById("question").scrollIntoView({ behavior: "smooth" });
         });
         historyList.prepend(li);
       } catch (err) {
         answerBox.textContent = "❌ Error: Unable to get response from server.";
       }

       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 2rem;
     }
+    .container {
+      width: 90%;
+      max-width: 900px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 40px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+      padding: 2.5rem;
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(147, 197, 253, 0.3);
     }
+    textarea {
+      border-radius: 30px;
+      border: 1px solid #c7d2fe;
+      background-color: #eef2ff;
+      padding: 1.25rem 1.5rem;
+      font-size: 1.15rem;
+      color: #1e293b;
+      width: 100%;
+      min-height: 180px;
+      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
+      resize: vertical;
+      transition: all 0.25s ease;
     }
+    textarea:focus {
+      outline: none;
+      border-color: #6366f1;
+      background-color: #e0e7ff;
+      box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
     }
+    button {
+      font-weight: 700;
+      border: none;
+      border-radius: 30px;
+      background: linear-gradient(90deg, #2563eb, #7c3aed, #9333ea);
+      color: white;
+      padding: 1.25rem;
+      width: 100%;
+      font-size: 1.25rem;
+      letter-spacing: 0.5px;
+      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
+      transition: all 0.3s ease;
     }
+    button:hover {
+      transform: scale(1.03);
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6, #a855f7);
+      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
+    }
+    #answer-box {
+      background: linear-gradient(to bottom right, #eef2ff, #e0f2fe);
+      border: 1px solid #c7d2fe;
+      border-radius: 30px;
+      padding: 1.5rem;
+      font-size: 1.1rem;
+      color: #1e293b;
+      max-height: 500px;
+      overflow-y: auto;
+      box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
+    }
+    #history-list {
+      max-height: 250px;
+      overflow-y: auto;
+      font-size: 1.05rem;
+    }
+    #history-list li {
+      background: linear-gradient(to right, #e0e7ff, #f3e8ff);
+      padding: 1rem 1.25rem;
+      border-radius: 20px;
+      cursor: pointer;
+      transition: all 0.25s ease;
+      font-weight: 500;
     }
+    #history-list li:hover {
+      transform: scale(1.03);
+      background: linear-gradient(to right, #c7d2fe, #ddd6fe);
     }
+    h1 {
+      font-size: 2.8rem;
+      text-align: center;
+      color: #4f46e5;
+      font-weight: 800;
+      margin-bottom: 1.5rem;
+    }
+    h2 {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #4338ca;
+      margin-bottom: 1rem;
+    }
+    @media (max-width: 640px) {
+      .container {
+        padding: 1.5rem;
+      }
+      textarea, button {
+        font-size: 1.05rem;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      h2 {
+        font-size: 1.4rem;
+      }
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <h1>💬 Ask Your Doubts</h1>
     <div>
+      <label class="block text-lg font-semibold text-gray-700 mb-2">📘 Context</label>
+      <textarea id="context" placeholder="Paste your passage or background information here..."></textarea>
     </div>
+    <div class="mt-6">
+      <label class="block text-lg font-semibold text-gray-700 mb-2">❓ Question(s)</label>
+      <textarea id="question" placeholder="Write one or more questions (each on a new line)..."></textarea>
     </div>
+    <button id="submit-btn" class="mt-8">🚀 Ask Question</button>
+    <div class="mt-8">
+      <h2>💡 Answers</h2>
+      <div id="answer-box"></div>
     </div>
+    <div class="mt-8">
+      <h2>📜 History</h2>
+      <ul id="history-list"></ul>
     </div>
   </div>
     btn.addEventListener("click", async () => {
       const context = document.getElementById("context").value.trim();
       const question = document.getElementById("question").value.trim();
       if (!context || !question) {
         answerBox.textContent = "⚠️ Please provide both context and question(s).";
         return;
       }
+      answerBox.innerHTML = "<p class='text-indigo-500 font-semibold'>⏳ Fetching answer...</p>";
       try {
         const res = await fetch("/predict", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ context, question })
         });
         const data = await res.json();
         if (data.error) {
           answerBox.textContent = "⚠️ " + data.error;
           return;
         }
         answerBox.innerHTML = "";
+        data.results.forEach((r, i) => {
           const qaDiv = document.createElement("div");
+          qaDiv.className = "mb-5 p-5 bg-gradient-to-br from-indigo-100 to-blue-100 rounded-2xl shadow";
+          qaDiv.innerHTML = `
+            <p class="font-semibold text-blue-800 text-lg"><strong>Q${i + 1}:</strong> ${r.question}</p>
+            <p class="mt-2 text-gray-900 text-base"><strong>Answer:</strong> ${r.answer}</p>
+            <p class="text-sm text-gray-600 mt-1"><strong>Confidence:</strong> ${r.score}</p>
+          `;
           answerBox.appendChild(qaDiv);
+        });
         const li = document.createElement("li");
         li.textContent = question.replace(/\n/g, " | ");
         li.addEventListener("click", () => {
           document.getElementById("question").value = question;
           document.getElementById("question").scrollIntoView({ behavior: "smooth" });
         });
         historyList.prepend(li);
       } catch (err) {
         answerBox.textContent = "❌ Error: Unable to get response from server.";
       }