Hugging Face's logo

Spaces:
warnacc
/
SearchDemo
Runtime error

App Files Community
demoPOC commited on
Commit
911004f
·
1 Parent(s): ef76505

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +189 -187
index.html CHANGED
@@ -1,203 +1,205 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <title>AI Assist</title>
5
- <link rel="icon" type="image/png" />
6
- <link rel="apple-touch-icon" type="image/png" />
7
- <style>
8
- body {
9
- background-color: #ECE5DD;
10
- font-family: Arial, sans-serif;
11
- font-size: 14px;
12
- padding: 20px;
13
- }
14
- .container {
15
- display: flex;
16
- flex-direction: column;
17
- height: 700px;
18
- max-width: 700px;
19
- margin: 0 auto;
20
- background-color: #fff;
21
- border-radius: 10px;
22
- box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
23
- overflow: hidden;
24
- }
25
- .header {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- height: 60px;
30
- background-color:#0f3cc9 ;
31
- /* #075E54 */
32
- color: #fff;
33
- font-weight: bold;
34
- font-size: 20px;
35
- }
36
- .chat-area {
37
- flex-grow: 1;
38
- padding: 20px;
39
- overflow-y: auto;
40
- }
41
- .chat-area p {
42
- margin: 5px 0;
43
- }
44
- .message-box {
45
- display: flex;
46
- align-items: center;
47
- background-color: #F4F4F4;
48
- padding: 10px;
49
- border-top: 1px solid #ccc;
50
- }
51
- .message-box input {
52
- flex-grow: 1;
53
- border: none;
54
- padding: 10px;
55
- font-size: 14px;
56
- border-radius: 5px;
57
- background-color: #fff;
58
- margin-right: 10px;
59
- }
60
- .message-box button {
61
- background-color:#0f3cc9 ;
62
- /* #075E54 */
63
- color: #fff;
64
- border: none;
65
- padding: 10px;
66
- font-size: 14px;
67
- font-weight: bold;
68
- border-radius: 5px;
69
- cursor: pointer;
70
- }
71
- .user-message {
72
- display: flex;
73
- flex-direction: row-reverse;
74
- align-items: center;
75
- margin-bottom: 10px;
76
- }
77
- .bot-message {
78
- display: flex;
79
- align-items: center;
80
- margin-bottom: 10px;
81
- }
82
- .user-message p, .bot-message p {
83
- background-color:#ccd6f2;
84
- /* #DCF8C6; */
85
- color: #000;
86
- padding: 10px;
87
- border-radius: 10px;
88
- max-width: 60%;
89
- word-wrap: break-word;
90
- }
91
- .user-message p {
92
- margin-right: 10px;
93
- }
94
- .bot-message p {
95
- margin-left: 10px;
96
- }
97
 
98
- .logoClass
99
- {
100
- width: 50px;
101
- height: 40px;
102
- align-self: center;
103
- margin-right: 10px;
104
- gap: 20px 20px;
105
- background-repeat: no-repeat;
106
- background-size: cover;
107
- /* background-image: url({{url_for('static',filename='.png')}}); */
108
- }
109
- </style>
110
- </head>
111
- <body>
112
- <div class="container">
113
- <div class="header">
114
- <div> </div>
115
- <div>AI Assist - Powered by J-GPT</div>
116
- </div>
117
- <div class="chat-area">
118
- <div class="bot-message">
119
- <p>Hello! How can I assist you today?</p>
120
- </div>
121
- </div>
122
- <div class="message-box">
123
- <input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)">
124
- <button id="send-button" onclick="sendMessage()">Send</button>
125
- </div>
126
- </div>
127
 
128
- <script>
 
 
 
 
 
 
 
 
 
 
129
 
130
- function searchKeyPress(event) {
131
- event.preventDefault();
132
- if (event.keyCode === 13) {
133
- document.getElementById("send-button").click();
134
- }
135
- };
136
 
137
- async function sendMessage() {
138
- var response="";
139
- // Get the user input
140
- var userInput = document.getElementById("user-input").value;
141
 
142
- // Create a new user message and add it to the chat area
143
- var userMessage = document.createElement("div");
144
- userMessage.classList.add("user-message");
145
- userMessage.innerHTML = '<p>' + userInput + '</p>';
146
- document.querySelector(".chat-area").appendChild(userMessage);
 
 
147
 
148
- // Clear the input field
149
- document.getElementById("user-input").value = "";
 
 
 
 
 
 
 
150
 
151
-
 
 
 
 
 
 
 
 
 
 
152
 
153
- // Generate a bot response
154
- var botResponse = await generateBotResponse(userInput);
 
 
 
 
155
 
156
-
157
- }
 
 
 
158
 
159
- async function generateBotResponse(userInput) {
160
- // Make a POST request to the chatbot API endpoint
161
- // response = await fetch('http://127.0.0.1:1111/post_json', {
162
- // method: 'POST',
163
- // headers: {
164
- // 'Content-Type': 'application/json'
165
- // },
166
- // body: JSON.stringify({
167
- // query: userInput
168
- // })
169
- // });
170
 
171
- var xhr = new XMLHttpRequest();
172
- xhr.open("POST", '/agent/chat/suggestion', true);
173
- xhr.setRequestHeader('Content-Type', 'application/json');
174
- xhr.send(JSON.stringify({
175
- query: userInput
176
- }));
177
 
178
- xhr.onload = function() {
179
-
180
- console.log(this.responseText);
181
- var response = JSON.parse(this.responseText);
182
- console.log(response);
183
 
184
- // Create a new bot message and add it to the chat area
185
- var botMessage = document.createElement("div");
186
- botMessage.classList.add("bot-message");
187
- botMessage.innerHTML = '<p>' + response.botMessage + '</p>';
188
- document.querySelector(".chat-area").appendChild(botMessage);
189
-
190
- // Scroll to the bottom of the chat area
191
- document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight;
192
- return response.botMessage;
193
- }
194
-
195
- // Parse the response JSON and return the bot message
196
- //console.log(data);
197
- //var data = await response.json();
198
-
199
- //return response.botMessage;
200
- }
201
- </script>
202
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Jio AI Assist</title>
5
+ <link rel="icon" type="image/png" href="../static/Jio-Logo.png" />
6
+ <link rel="apple-touch-icon" type="image/png" href="../static/Jio-Logo.png" />
7
+ <style>
8
+ body {
9
+ background-color: #ECE5DD;
10
+ font-family: Arial, sans-serif;
11
+ font-size: 14px;
12
+ padding: 20px;
13
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
+ .container {
16
+ display: flex;
17
+ flex-direction: column;
18
+ height: 700px;
19
+ max-width: 700px;
20
+ margin: 0 auto;
21
+ background-color: #fff;
22
+ border-radius: 10px;
23
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
24
+ overflow: hidden;
25
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
 
27
+ .header {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ height: 60px;
32
+ background-color: #0f3cc9;
33
+ /* #075E54 */
34
+ color: #fff;
35
+ font-weight: bold;
36
+ font-size: 20px;
37
+ }
38
 
39
+ .chat-area {
40
+ flex-grow: 1;
41
+ padding: 20px;
42
+ overflow-y: auto;
43
+ }
 
44
 
45
+ .chat-area p {
46
+ margin: 5px 0;
47
+ }
 
48
 
49
+ .message-box {
50
+ display: flex;
51
+ align-items: center;
52
+ background-color: #F4F4F4;
53
+ padding: 10px;
54
+ border-top: 1px solid #ccc;
55
+ }
56
 
57
+ .message-box input {
58
+ flex-grow: 1;
59
+ border: none;
60
+ padding: 10px;
61
+ font-size: 14px;
62
+ border-radius: 5px;
63
+ background-color: #fff;
64
+ margin-right: 10px;
65
+ }
66
 
67
+ .message-box button {
68
+ background-color: #0f3cc9;
69
+ /* #075E54 */
70
+ color: #fff;
71
+ border: none;
72
+ padding: 10px;
73
+ font-size: 14px;
74
+ font-weight: bold;
75
+ border-radius: 5px;
76
+ cursor: pointer;
77
+ }
78
 
79
+ .user-message {
80
+ display: flex;
81
+ flex-direction: row-reverse;
82
+ align-items: center;
83
+ margin-bottom: 10px;
84
+ }
85
 
86
+ .bot-message {
87
+ display: flex;
88
+ align-items: center;
89
+ margin-bottom: 10px;
90
+ }
91
 
92
+ .user-message p,
93
+ .bot-message p {
94
+ background-color: #ccd6f2;
95
+ /* #DCF8C6; */
96
+ color: #000;
97
+ padding: 10px;
98
+ border-radius: 10px;
99
+ max-width: 60%;
100
+ word-wrap: break-word;
101
+ }
 
102
 
103
+ .user-message p {
104
+ margin-right: 10px;
105
+ }
 
 
 
106
 
107
+ .bot-message p {
108
+ margin-left: 10px;
109
+ }
 
 
110
 
111
+ .logoClass {
112
+ width: 50px;
113
+ height: 40px;
114
+ align-self: center;
115
+ margin-right: 10px;
116
+ gap: 20px 20px;
117
+ background-repeat: no-repeat;
118
+ background-size: cover;
119
+ /* background-image: url({{url_for('static',filename='Jio-Logo.png')}}); */
120
+ }
121
+ </style>
122
+ </head>
123
+ <body>
124
+ <div class="container">
125
+ <div class="header">
126
+ <div>
127
+ <img class="logoClass" src="../static/Jio-Logo.png" alt="Jio Logo" />
128
+ </div>
129
+ <div>AI Assist Powered by JioGPT</div>
130
+ </div>
131
+ <div class="chat-area">
132
+ <div class="bot-message">
133
+ <p>Hello! How can I assist you today?</p>
134
+ </div>
135
+ </div>
136
+ <div class="message-box">
137
+ <input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)">
138
+ <button id="send-button" onclick="sendMessage()">Send</button>
139
+ </div>
140
+ </div>
141
+ <script>
142
+ function searchKeyPress(event) {
143
+ event.preventDefault();
144
+ if (event.keyCode === 13) {
145
+ document.getElementById("send-button").click();
146
+ }
147
+ };
148
+ async function sendMessage() {
149
+ var response = "";
150
+ // Get the user input
151
+ var userInput = document.getElementById("user-input").value;
152
+ // Create a new user message and add it to the chat area
153
+ var userMessage = document.createElement("div");
154
+ userMessage.classList.add("user-message");
155
+ userMessage.innerHTML = '<p>' + userInput + '</p>';
156
+ document.querySelector(".chat-area").appendChild(userMessage);
157
+ // Clear the input field
158
+ document.getElementById("user-input").value = "";
159
+ // Generate a bot response
160
+ var botResponse = await generateBotResponse(userInput);
161
+ }
162
+ async function generateBotResponse(userInput) {
163
+ // Make a POST request to the chatbot API endpoint
164
+ // response = await fetch('http://127.0.0.1:1111/post_json', {
165
+ // method: 'POST',
166
+ // headers: {
167
+ // 'Content-Type': 'application/json'
168
+ // },
169
+ // body: JSON.stringify({
170
+ // query: userInput
171
+ // })
172
+ // });
173
+ var xhr = new XMLHttpRequest();
174
+ //xhr.open("POST", 'http://127.0.0.1:1111/post_json', true);
175
+ //xhr.open("POST", '/post_json', true);
176
+ xhr.open("POST", '/agent/chat/suggestion', true);
177
+ xhr.setRequestHeader('Content-Type', 'application/json');
178
+ xhr.send(JSON.stringify({
179
+ message: [userInput],
180
+ "custDetails": {
181
+ "cName": "Mohit Srivastava",
182
+ "cDistrict": "Lucknow"
183
+ }
184
+ }));
185
+ xhr.onload = function() {
186
+ console.log(this.responseText);
187
+ var response = JSON.parse(this.responseText);
188
+ console.log(response);
189
+ // Create a new bot message and add it to the chat area
190
+ var botMessage = document.createElement("div");
191
+ botMessage.classList.add("bot-message");
192
+ botMessage.innerHTML = '<p>' + response.suggestions[0]['message'] + '</p>';
193
+ document.querySelector(".chat-area").appendChild(botMessage);
194
+ // Scroll to the bottom of the chat area
195
+ document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight;
196
+ return response.suggestions[0]['message'];
197
+ }
198
+ // Parse the response JSON and return the bot message
199
+ //console.log(data);
200
+ //var data = await response.json();
201
+ //return response.botMessage;
202
+ }
203
+ </script>
204
+ </body>
205
  </html>