Spaces:

rohitashva
/

HealthCare-Chatbot

Sleeping

App Files Files Community

rohitashva commited on Feb 22

Commit

54222a1

verified ·

1 Parent(s): 2afd06d

Update index.html

Browse files

Files changed (1) hide show

index.html +36 -37

index.html CHANGED Viewed

@@ -7,81 +7,80 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f2f6;
             text-align: center;
             padding: 20px;
         }
         .container {
             background: white;
             padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-            max-width: 500px;
             margin: auto;
         }
-        .query-input {
             width: 100%;
             padding: 10px;
             margin: 10px 0;
             border-radius: 5px;
             border: 1px solid #ccc;
         }
-        .response-box {
-            background-color: #e3f2fd;
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 10px;
-        }
         button {
-            padding: 10px 15px;
-            border: none;
-            background: #2E7D32;
             color: white;
-            border-radius: 5px;
             cursor: pointer;
         }
         button:hover {
-            background: #1b5e20;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🩺 Health Disease Chatbot</h1>
         <p>Enter a question related to health conditions, symptoms, or treatments.</p>
-        <input type="text" id="query" class="query-input" placeholder="Your health-related question...">
         <button onclick="getResponse()">Get Information</button>
-        <div id="response" class="response-box" style="display:none;"></div>
     </div>
     <script>
         async function getResponse() {
-            const query = document.getElementById('query').value;
             if (!query) {
-                alert("Please enter a query.");
                 return;
             }
-            const responseBox = document.getElementById('response');
-            responseBox.style.display = 'none';
-            responseBox.innerHTML = "Fetching response...";
             try {
-                const response = await fetch("http://127.0.0.1:5000/chat", {
                     method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify({ query })
                 });
-                const data = await response.json();
-                responseBox.innerHTML = `<b>Response:</b> <br>${data.response || data.error}`;
-                responseBox.style.display = 'block';
             } catch (error) {
-                responseBox.innerHTML = "Error fetching response.";
-                responseBox.style.display = 'block';
             }
         }
     </script>
 </body>
-</html>

     <style>
         body {
             font-family: Arial, sans-serif;
             text-align: center;
+            background-color: #f0f2f6;
             padding: 20px;
         }
         .container {
+            max-width: 600px;
             background: white;
             padding: 20px;
+            border-radius: 10px;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
             margin: auto;
         }
+        input {
             width: 100%;
             padding: 10px;
             margin: 10px 0;
             border-radius: 5px;
             border: 1px solid #ccc;
         }
         button {
+            padding: 10px 20px;
+            background-color: #2E7D32;
             color: white;
+            border: none;
             cursor: pointer;
+            border-radius: 5px;
         }
         button:hover {
+            background-color: #256a2c;
+        }
+        .response {
+            margin-top: 20px;
+            background: #ffffff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🩺 Health Disease Chatbot</h1>
         <p>Enter a question related to health conditions, symptoms, or treatments.</p>
+        <input type="text" id="query" placeholder="Enter your query...">
         <button onclick="getResponse()">Get Information</button>
+        <div id="response" class="response"></div>
     </div>
     <script>
         async function getResponse() {
+            let query = document.getElementById("query").value;
             if (!query) {
+                alert("Please enter a query!");
                 return;
             }
+            let responseDiv = document.getElementById("response");
+            responseDiv.innerHTML = "Processing...";
             try {
+                let response = await fetch("/query", {
                     method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ query: query })
                 });
+                let data = await response.json();
+                responseDiv.innerHTML = `<b>Response:</b><br> ${data.response}`;
             } catch (error) {
+                responseDiv.innerHTML = "Error fetching response.";
             }
         }
     </script>
 </body>
+</html>