Hugging Face's logo

Spaces:
bbektas25
/
travel
Runtime error

App Files Community
bbektas25 commited on
Commit
2449939
·
verified ·
1 Parent(s): fbd20b5

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +189 -0
index.html ADDED
@@ -0,0 +1,189 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Travel Assistant</title>
7
+ <style>
8
+ /* General Styles */
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #f4f4f9;
12
+ margin: 0;
13
+ padding: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 100vh;
18
+ }
19
+
20
+ /* Chat Container */
21
+ .chat-container {
22
+ width: 400px;
23
+ background-color: #fff;
24
+ border-radius: 10px;
25
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
26
+ overflow: hidden;
27
+ display: flex;
28
+ flex-direction: column;
29
+ }
30
+
31
+ /* Chat Header */
32
+ .chat-header {
33
+ background-color: #007bff;
34
+ color: #fff;
35
+ padding: 15px;
36
+ text-align: center;
37
+ font-size: 18px;
38
+ font-weight: bold;
39
+ }
40
+
41
+ /* Chat Box */
42
+ #chat-box {
43
+ flex: 1;
44
+ padding: 15px;
45
+ overflow-y: auto;
46
+ border-bottom: 1px solid #ddd;
47
+ background-color: #f9f9f9;
48
+ }
49
+
50
+ /* Message Styles */
51
+ .message {
52
+ margin-bottom: 15px;
53
+ display: flex;
54
+ flex-direction: column;
55
+ }
56
+
57
+ .message.user {
58
+ align-items: flex-end;
59
+ }
60
+
61
+ .message.bot {
62
+ align-items: flex-start;
63
+ }
64
+
65
+ .message p {
66
+ max-width: 70%;
67
+ padding: 10px;
68
+ border-radius: 10px;
69
+ margin: 0;
70
+ }
71
+
72
+ .message.user p {
73
+ background-color: #007bff;
74
+ color: #fff;
75
+ }
76
+
77
+ .message.bot p {
78
+ background-color: #e9ecef;
79
+ color: #333;
80
+ }
81
+
82
+ /* Input Container */
83
+ .input-container {
84
+ display: flex;
85
+ padding: 10px;
86
+ background-color: #fff;
87
+ }
88
+
89
+ #user-input {
90
+ flex: 1;
91
+ padding: 10px;
92
+ border: 1px solid #ddd;
93
+ border-radius: 5px;
94
+ outline: none;
95
+ }
96
+
97
+ #user-input:focus {
98
+ border-color: #007bff;
99
+ }
100
+
101
+ button {
102
+ margin-left: 10px;
103
+ padding: 10px 20px;
104
+ background-color: #007bff;
105
+ color: #fff;
106
+ border: none;
107
+ border-radius: 5px;
108
+ cursor: pointer;
109
+ }
110
+
111
+ button:hover {
112
+ background-color: #0056b3;
113
+ }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <div class="chat-container">
118
+ <!-- Chat Header -->
119
+ <div class="chat-header">
120
+ AI Travel Assistant
121
+ </div>
122
+
123
+ <!-- Chat Box -->
124
+ <div id="chat-box">
125
+ <!-- Chat messages will appear here -->
126
+ </div>
127
+
128
+ <!-- Input Container -->
129
+ <div class="input-container">
130
+ <input type="text" id="user-input" placeholder="Type your message here..." onkeypress="handleKeyPress(event)">
131
+ <button onclick="sendMessage()">Send</button>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ let chatHistoryIds = null;
137
+
138
+ // Function to handle Enter key press
139
+ function handleKeyPress(event) {
140
+ if (event.key === "Enter") {
141
+ sendMessage();
142
+ }
143
+ }
144
+
145
+ // Function to send a message
146
+ async function sendMessage() {
147
+ const userInput = document.getElementById("user-input").value;
148
+ if (!userInput) return;
149
+
150
+ // Add user message to chat box
151
+ const chatBox = document.getElementById("chat-box");
152
+ chatBox.innerHTML += `
153
+ <div class="message user">
154
+ <p>${userInput}</p>
155
+ </div>
156
+ `;
157
+
158
+ // Clear input
159
+ document.getElementById("user-input").value = "";
160
+
161
+ // Send message to Flask backend
162
+ const response = await fetch("http://127.0.0.1:5000/chat", {
163
+ method: "POST",
164
+ headers: {
165
+ "Content-Type": "application/json"
166
+ },
167
+ body: JSON.stringify({
168
+ message: userInput,
169
+ chat_history_ids: chatHistoryIds
170
+ })
171
+ });
172
+ const data = await response.json();
173
+
174
+ // Add bot response to chat box
175
+ chatBox.innerHTML += `
176
+ <div class="message bot">
177
+ <p>${data.response}</p>
178
+ </div>
179
+ `;
180
+
181
+ // Update chat history
182
+ chatHistoryIds = data.chat_history_ids;
183
+
184
+ // Scroll to bottom
185
+ chatBox.scrollTop = chatBox.scrollHeight;
186
+ }
187
+ </script>
188
+ </body>
189
+ </html>