Hugging Face's logo

Spaces:
redfernstech
/
hotel
Build error

App Files Community
srinuksv commited on
Commit
59eea30
·
verified ·
1 Parent(s): 039a3ce

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +77 -30
static/index.html CHANGED
@@ -3,66 +3,111 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
6
  <style>
 
 
 
 
 
 
7
  #chat-container {
8
  max-width: 600px;
9
  margin: auto;
10
  padding: 20px;
11
- border: 1px solid #ccc;
12
- border-radius: 5px;
13
  background-color: #f9f9f9;
 
14
  }
15
-
16
  #chat-history {
17
  height: 400px;
18
  overflow-y: auto;
19
  margin-bottom: 10px;
20
  border: 1px solid #ddd;
21
- padding: 10px;
22
  background: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
-
25
  #user-input {
26
- width: calc(100% - 90px);
27
  }
28
-
29
- button {
30
- padding: 10px;
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
  </style>
33
  <title>Chat Interface</title>
34
  </head>
35
  <body>
36
- <div id="chat-container">
37
- <div id="chat-history"></div>
38
- <input type="text" id="user-input" placeholder="Type your message..." aria-label="Message input">
39
- <button id="send-button" aria-label="Send message">Send</button>
 
 
 
 
 
 
 
40
  </div>
41
  <script>
42
  document.getElementById("send-button").addEventListener("click", sendMessage);
43
  document.getElementById("user-input").addEventListener("keypress", function(event) {
44
  if (event.key === "Enter") {
45
- event.preventDefault(); // Prevent form submission
46
  sendMessage();
47
  }
48
  });
49
-
50
  async function sendMessage() {
51
  const input = document.getElementById("user-input");
52
  const message = input.value.trim();
53
-
54
  if (message === "") {
55
- return; // Do not send empty messages
56
  }
57
-
58
- // Add user message to chat history
59
- addMessage("User", message);
60
-
61
- // Clear input field
62
  input.value = "";
63
 
 
 
 
64
  try {
65
- // Send message to the backend
66
  const response = await fetch("/chat/", {
67
  method: "POST",
68
  headers: {
@@ -70,25 +115,27 @@
70
  },
71
  body: JSON.stringify({ message })
72
  });
73
-
74
  if (!response.ok) {
75
  throw new Error(`HTTP error! Status: ${response.status}`);
76
  }
77
-
78
  const data = await response.json();
79
- addMessage("Bot", data.response);
80
  } catch (error) {
81
  console.error('Error:', error);
82
- addMessage("Bot", "Sorry, something went wrong.");
 
 
 
83
  }
84
  }
85
-
86
- function addMessage(sender, message) {
87
  const chatHistory = document.getElementById("chat-history");
88
  const messageElement = document.createElement("div");
 
89
  messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
90
  chatHistory.appendChild(messageElement);
91
- chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to the bottom
92
  }
93
  </script>
94
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #eef1f5;
11
+ margin: 0;
12
+ padding: 20px;
13
+ }
14
  #chat-container {
15
  max-width: 600px;
16
  margin: auto;
17
  padding: 20px;
18
+ border-radius: 10px;
 
19
  background-color: #f9f9f9;
20
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21
  }
 
22
  #chat-history {
23
  height: 400px;
24
  overflow-y: auto;
25
  margin-bottom: 10px;
26
  border: 1px solid #ddd;
 
27
  background: white;
28
+ border-radius: 10px;
29
+ padding: 10px;
30
+ }
31
+ .message {
32
+ margin: 5px 0;
33
+ padding: 10px;
34
+ border-radius: 10px;
35
+ position: relative;
36
+ max-width: 80%;
37
+ }
38
+ .user-message {
39
+ background-color: #d1ecf1;
40
+ border: 1px solid #bee5eb;
41
+ color: #0c5460;
42
+ margin-left: auto;
43
+ }
44
+ .bot-message {
45
+ background-color: #f8d7da;
46
+ border: 1px solid #f5c6cb;
47
+ color: #721c24;
48
+ margin-right: auto;
49
+ }
50
+ #loading {
51
+ display: none;
52
+ margin: 10px 0;
53
+ text-align: center;
54
  }
 
55
  #user-input {
56
+ border: 1px solid #ccc;
57
  }
58
+ #user-input:focus {
59
+ border-color: #007bff;
60
+ outline: none;
61
+ }
62
+ .btn-send {
63
+ background-color: #007bff;
64
+ color: white;
65
+ }
66
+ .btn-send:hover {
67
+ background-color: #0056b3;
68
+ transform: scale(1.05);
69
+ }
70
+ .btn-send:active {
71
+ transform: scale(0.95);
72
  }
73
  </style>
74
  <title>Chat Interface</title>
75
  </head>
76
  <body>
77
+ <div id="chat-container" class="rounded p-4 shadow">
78
+ <div id="chat-history" class="mb-3"></div>
79
+ <div id="loading" class="spinner-border text-primary" role="status">
80
+ <span class="sr-only">Loading...</span>
81
+ </div>
82
+ <div class="input-group">
83
+ <input type="text" id="user-input" class="form-control" placeholder="Type your message..." aria-label="Message input">
84
+ <div class="input-group-append">
85
+ <button id="send-button" class="btn btn-send" aria-label="Send message">Send</button>
86
+ </div>
87
+ </div>
88
  </div>
89
  <script>
90
  document.getElementById("send-button").addEventListener("click", sendMessage);
91
  document.getElementById("user-input").addEventListener("keypress", function(event) {
92
  if (event.key === "Enter") {
93
+ event.preventDefault();
94
  sendMessage();
95
  }
96
  });
97
+
98
  async function sendMessage() {
99
  const input = document.getElementById("user-input");
100
  const message = input.value.trim();
 
101
  if (message === "") {
102
+ return;
103
  }
104
+ addMessage("User", message, "user-message");
 
 
 
 
105
  input.value = "";
106
 
107
+ // Show loading spinner
108
+ document.getElementById("loading").style.display = "block";
109
+
110
  try {
 
111
  const response = await fetch("/chat/", {
112
  method: "POST",
113
  headers: {
 
115
  },
116
  body: JSON.stringify({ message })
117
  });
 
118
  if (!response.ok) {
119
  throw new Error(`HTTP error! Status: ${response.status}`);
120
  }
 
121
  const data = await response.json();
122
+ addMessage("Bot", data.response, "bot-message");
123
  } catch (error) {
124
  console.error('Error:', error);
125
+ addMessage("Bot", "Sorry, something went wrong.", "bot-message");
126
+ } finally {
127
+ // Hide loading spinner
128
+ document.getElementById("loading").style.display = "none";
129
  }
130
  }
131
+
132
+ function addMessage(sender, message, className) {
133
  const chatHistory = document.getElementById("chat-history");
134
  const messageElement = document.createElement("div");
135
+ messageElement.className = `message ${className}`;
136
  messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
137
  chatHistory.appendChild(messageElement);
138
+ chatHistory.scrollTop = chatHistory.scrollHeight;
139
  }
140
  </script>
141
  </body>