Hugging Face's logo

Spaces:
InkeyDevelopment
/
Exelsys_Assistant_POC
Sleeping

App Files Community
InkeyDevelopment commited on
Commit
ae0d857
·
verified ·
1 Parent(s): 38ea2c4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +169 -147
templates/index.html CHANGED
@@ -1,147 +1,169 @@
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">
6
- <title>PDF Q&A Chatbot</title>
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
8
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
- <style>
10
- /* Full-Screen Styling */
11
- html, body {
12
- height: 100%;
13
- margin: 0;
14
- padding: 0;
15
- font-family: 'Arial', sans-serif;
16
- background-image: url('https://source.unsplash.com/1920x1080/?technology,abstract'); /* Change Background */
17
- background-size: cover;
18
- background-position: center;
19
- }
20
-
21
- .chat-container {
22
- display: flex;
23
- flex-direction: column;
24
- height: 100vh;
25
- justify-content: center;
26
- align-items: center;
27
- }
28
-
29
- .chat-box {
30
- width: 80%;
31
- max-width: 800px;
32
- height: 70vh;
33
- overflow-y: auto;
34
- background: rgba(255, 255, 255, 0.9);
35
- border-radius: 10px;
36
- padding: 20px;
37
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
38
- }
39
-
40
- .chat-header {
41
- text-align: center;
42
- font-size: 22px;
43
- font-weight: bold;
44
- color: #007bff;
45
- padding-bottom: 10px;
46
- border-bottom: 2px solid #007bff;
47
- margin-bottom: 10px;
48
- }
49
-
50
- .message-container {
51
- display: flex;
52
- flex-direction: column;
53
- }
54
-
55
- .user-message, .bot-message {
56
- margin: 10px 0;
57
- padding: 12px;
58
- border-radius: 10px;
59
- max-width: 80%;
60
- }
61
-
62
- .user-message {
63
- background-color: #007bff;
64
- color: white;
65
- align-self: flex-end;
66
- text-align: right;
67
- }
68
-
69
- .bot-message {
70
- background-color: #f1f1f1;
71
- align-self: flex-start;
72
- text-align: left;
73
- }
74
-
75
- .image-container img {
76
- max-width: 100%;
77
- border-radius: 5px;
78
- margin-top: 5px;
79
- }
80
-
81
- .input-group {
82
- position: fixed;
83
- bottom: 20px;
84
- width: 80%;
85
- max-width: 800px;
86
- }
87
-
88
- .form-control {
89
- height: 50px;
90
- font-size: 16px;
91
- }
92
-
93
- .btn {
94
- height: 50px;
95
- font-size: 16px;
96
- }
97
- </style>
98
- </head>
99
- <body>
100
-
101
- <div class="chat-container">
102
- <div class="chat-box" id="chat-box">
103
- <div class="chat-header">📜 PDF Q&A Chatbot</div>
104
- <div class="message-container"></div>
105
- </div>
106
-
107
- <div class="input-group">
108
- <input type="text" id="query" class="form-control" placeholder="Ask a question...">
109
- <button class="btn btn-primary" onclick="fetchAnswer()">Ask</button>
110
- </div>
111
- </div>
112
-
113
- <script>
114
- function fetchAnswer() {
115
- let query = $("#query").val();
116
- if (!query) return;
117
-
118
- let userMessage = `<div class="user-message">👤 ${query}</div>`;
119
- $("#chat-box .message-container").append(userMessage);
120
- $("#query").val("");
121
-
122
- $.ajax({
123
- url: "/query",
124
- type: "POST",
125
- contentType: "application/json",
126
- data: JSON.stringify({ query: query }),
127
- success: function(response) {
128
- let botMessage = `<div class="bot-message">🤖 ${response.text || "No answer found."}</div>`;
129
- $("#chat-box .message-container").append(botMessage);
130
-
131
- if (response.images) {
132
- let imageContainer = `<div class="image-container">`;
133
- response.images.forEach(img => {
134
- imageContainer += `<img src="${img}" class="img-fluid">`;
135
- });
136
- imageContainer += `</div>`;
137
- $("#chat-box .message-container").append(imageContainer);
138
- }
139
-
140
- $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
141
- }
142
- });
143
- }
144
- </script>
145
-
146
- </body>
147
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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" />
6
+ <title>PDF Q&A Chatbot</title>
7
+ <link
8
+ rel="stylesheet"
9
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
10
+ />
11
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
12
+ <style>
13
+ /* Full-Screen Styling */
14
+ html,
15
+ body {
16
+ height: 100%;
17
+ margin: 0;
18
+ padding: 0;
19
+ font-family: "Arial", sans-serif;
20
+ background-image: url("https://source.unsplash.com/1920x1080/?technology,abstract"); /* Change Background */
21
+ background-size: cover;
22
+ background-position: center;
23
+ }
24
+
25
+ .chat-container {
26
+ display: flex;
27
+ flex-direction: column;
28
+ height: 100vh;
29
+ justify-content: center;
30
+ align-items: center;
31
+ }
32
+
33
+ .chat-box {
34
+ width: 80%;
35
+ max-width: 800px;
36
+ height: 70vh;
37
+ overflow-y: auto;
38
+ background: rgba(255, 255, 255, 0.9);
39
+ border-radius: 10px;
40
+ padding: 20px;
41
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
42
+ }
43
+
44
+ .chat-header {
45
+ text-align: center;
46
+ font-size: 22px;
47
+ font-weight: bold;
48
+ color: #007bff;
49
+ padding-bottom: 10px;
50
+ border-bottom: 2px solid #007bff;
51
+ margin-bottom: 10px;
52
+ }
53
+
54
+ .message-container {
55
+ display: flex;
56
+ flex-direction: column;
57
+ }
58
+
59
+ .user-message,
60
+ .bot-message {
61
+ margin: 10px 0;
62
+ padding: 12px;
63
+ border-radius: 10px;
64
+ max-width: 80%;
65
+ }
66
+
67
+ .user-message {
68
+ background-color: #007bff;
69
+ color: white;
70
+ align-self: flex-end;
71
+ text-align: right;
72
+ }
73
+
74
+ .bot-message {
75
+ background-color: #f1f1f1;
76
+ align-self: flex-start;
77
+ text-align: left;
78
+ }
79
+
80
+ .image-container img {
81
+ max-width: 100%;
82
+ border-radius: 5px;
83
+ margin-top: 5px;
84
+ }
85
+
86
+ .input-group {
87
+ position: fixed;
88
+ bottom: 20px;
89
+ width: 80%;
90
+ max-width: 800px;
91
+ }
92
+
93
+ .form-control {
94
+ height: 50px;
95
+ font-size: 16px;
96
+ }
97
+
98
+ .btn {
99
+ height: 50px;
100
+ font-size: 16px;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <div class="chat-container">
106
+ <div class="chat-box" id="chat-box">
107
+ <div class="chat-header">📜 PDF Q&A Chatbot</div>
108
+ <div class="message-container"></div>
109
+ </div>
110
+
111
+ <div class="input-group">
112
+ <input
113
+ type="text"
114
+ id="query"
115
+ class="form-control"
116
+ placeholder="Ask a question..."
117
+ />
118
+ <button class="btn btn-primary" onclick="fetchAnswer()">Ask</button>
119
+ </div>
120
+ </div>
121
+
122
+ <script>
123
+ function fetchAnswer() {
124
+ let query = $("#query").val().trim();
125
+ if (!query) return;
126
+
127
+ let userMessage = `<div class="user-message">👤 ${query}</div>`;
128
+ $("#chat-box .message-container").append(userMessage);
129
+ $("#query").val("");
130
+
131
+ $.ajax({
132
+ url: "/query",
133
+ type: "POST",
134
+ contentType: "application/json",
135
+ data: JSON.stringify({ query: query }),
136
+ success: function (response) {
137
+ let botMessage = `<div class="bot-message">🤖 ${
138
+ response.text || "No answer found."
139
+ }</div>`;
140
+ let messageContainer = $("#chat-box .message-container");
141
+ messageContainer.append(botMessage);
142
+
143
+ // Append images if available
144
+ if (response.images && response.images.length > 0) {
145
+ let imageContainer = `<div class="image-container">`;
146
+ response.images.forEach((imgSrc) => {
147
+ imageContainer += `<img src="/${imgSrc}" class="img-fluid">`; // Prepend '/' to make it a valid URL
148
+ });
149
+ imageContainer += `</div>`;
150
+ messageContainer.append(imageContainer);
151
+ }
152
+
153
+ // Scroll to bottom
154
+ $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
155
+ },
156
+ });
157
+ }
158
+
159
+ // Enable 'Enter' key to submit query
160
+ $("#query").keypress(function (event) {
161
+ if (event.which === 13) {
162
+ // 13 is the Enter key
163
+ event.preventDefault(); // Prevent default form submission
164
+ fetchAnswer(); // Trigger the fetch function
165
+ }
166
+ });
167
+ </script>
168
+ </body>
169
+ </html>