diff --git a/Supportgpt/templates/index.html b/Supportgpt/templates/index.html
new file mode 100644
index 0000000..1317d43
--- /dev/null
+++ b/Supportgpt/templates/index.html
@@ -0,0 +1,219 @@
+<!-- <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Question Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .form-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+        }
+
+        input {
+            width: 100%;
+            padding: 8px;
+            margin-bottom: 16px;
+            box-sizing: border-box;
+        }
+
+        textarea {
+            width: 100%;
+            height: 100px;
+            padding: 8px;
+            margin-bottom: 16px;
+            box-sizing: border-box;
+        }
+
+        button {
+            padding: 8px 16px;
+            background-color: #3498db;
+            color: #fff;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #2980b9;
+        }
+
+        .output-container {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="form-container">
+        <form id="questionForm">
+            <label for="userId">User ID:</label>
+            <input type="text" id="userId" readonly>
+
+            <label for="question">Question:</label>
+            <textarea id="question" required></textarea>
+
+            <button type="button" onclick="handleSubmit()">Submit</button>
+        </form>
+
+        <div class="output-container">
+            <label for="output">Output:</label>
+            <textarea id="output" readonly></textarea>
+        </div>
+    </div>
+
+    <script>
+        function generateUserId() {
+            // Generate a random user ID
+            var userId = "User" + Math.floor(Math.random() * 10000);
+            document.getElementById("userId").value = userId;
+        }
+
+        function handleSubmit() {
+            // Get values from the form
+            var userId = document.getElementById("userId").value;
+            var question = document.getElementById("question").value;
+
+            // Make an AJAX request to the server
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "/user_input", true);
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Parse the JSON response
+                    var response = JSON.parse(xhr.responseText);
+
+                    // Update the output textarea with question and answer
+                    var output = "Question: " + question + "\nAnswer: " + response.output;
+                    document.getElementById("output").value = output;
+                }
+            };
+            
+            // Send the request with user ID and question
+            xhr.send("user_input=" + encodeURIComponent(question) + "&session_id=" + encodeURIComponent(userId));
+        }
+
+        // Generate user ID on page load
+        window.onload = generateUserId;
+    </script>
+</body>
+</html> -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Question Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .form-container {
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+        }
+
+        input {
+            width: 100%;
+            padding: 8px;
+            margin-bottom: 16px;
+            box-sizing: border-box;
+        }
+
+        textarea {
+            width: 100%;
+            height: 100px;
+            padding: 8px;
+            margin-bottom: 16px;
+            box-sizing: border-box;
+        }
+
+        button {
+            padding: 8px 16px;
+            background-color: #3498db;
+            color: #fff;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #2980b9;
+        }
+
+        .output-container {
+            margin-top: 20px;
+
+        }
+    </style>
+</head>
+<body>
+    <div class="form-container">
+        <form id="questionForm">
+            <label for="userId">User ID:</label>
+            <input type="text" id="userId" required>
+
+            <label for="question">Question:</label>
+            <textarea id="question" required></textarea>
+
+            <button type="button" onclick="handleSubmit()">Submit</button>
+        </form>
+
+        <div class="output-container">
+            <label for="output">Output:</label>
+            <textarea id="output" readonly></textarea>
+        </div>
+    </div>
+
+    <script>
+        function handleSubmit() {
+            // Get values from the form
+            var userId = document.getElementById("userId").value;
+            var question = document.getElementById("question").value;
+
+            // Make an AJAX request to the server
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "/user_input", true);
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Parse the JSON response
+                    var response = JSON.parse(xhr.responseText);
+
+                    // Update the output textarea with question and answer
+                    var output = "Question: " + question + "\nAnswer: " + response.output;
+                    document.getElementById("output").value = output;
+                }
+            };
+            
+            // Send the request with user ID and question
+            xhr.send("user_input=" + encodeURIComponent(question) + "&session_id=" + encodeURIComponent(userId));
+        }
+    </script>
+</body>
+</html>
+
