Hugging Face's logo

Spaces:
demoPOC
/
JSearch
Runtime error

App Files Community
demoPOC commited on
Commit
835a718
·
1 Parent(s): 573f290

Update index.html

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