Hugging Face's logo

Spaces:
Prathmesh48
/
Ai_Self_assesment
Sleeping

App Files Community
Prathmesh48 commited on
Commit
0725035
•
1 Parent(s): 0c47685

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +302 -0
templates/index.html ADDED
@@ -0,0 +1,302 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Product Search Form</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ background-color: #f4f4f9;
12
+ margin: 0;
13
+ padding: 0;
14
+ }
15
+
16
+ .container {
17
+ background-color: #fff;
18
+ padding: 20px 40px;
19
+ border-radius: 10px;
20
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
21
+ text-align: center;
22
+ width: 40vmax;
23
+ margin: auto;
24
+ }
25
+
26
+ h1 {
27
+ margin-bottom: 20px;
28
+ }
29
+
30
+ h2 {
31
+ text-align: center;
32
+ }
33
+
34
+ label {
35
+ width: 100%;
36
+ display: block;
37
+ margin: 10px 0 5px;
38
+ }
39
+
40
+ input[type="text"],
41
+ select {
42
+ box-sizing: border-box;
43
+ width: 100%;
44
+ padding: 10px;
45
+ margin-bottom: 20px;
46
+ border: 1px solid #ccc;
47
+ border-radius: 5px;
48
+ font-size: 16px;
49
+ }
50
+
51
+ button {
52
+ padding: 10px 20px;
53
+ background-color: #007bff;
54
+ color: white;
55
+ border: none;
56
+ border-radius: 5px;
57
+ cursor: pointer;
58
+ font-size: 16px;
59
+ }
60
+
61
+ button:hover {
62
+ background-color: #0056b3;
63
+ }
64
+
65
+ #display {
66
+ width: 95%;
67
+ margin: auto;
68
+ display: flex;
69
+ flex-direction: column;
70
+ background-color: white;
71
+ overflow-x: scroll;
72
+ }
73
+
74
+
75
+ #loading-container {
76
+ display: none;
77
+ height: 100vh;
78
+ background: white;
79
+ justify-content: center;
80
+ align-items: center;
81
+ }
82
+
83
+ .loading {
84
+ display: flex;
85
+ flex-direction: row;
86
+ }
87
+
88
+ .loading__letter {
89
+ font-size: 88px;
90
+ font-weight: normal;
91
+ letter-spacing: 4px;
92
+ text-transform: uppercase;
93
+ font-family: "Audiowide";
94
+ color: cyan;
95
+ animation-name: bounce;
96
+ animation-duration: 2s;
97
+ animation-iteration-count: infinite;
98
+ }
99
+
100
+ .loading__letter:nth-child(2) {
101
+ animation-delay: .1s;
102
+ }
103
+
104
+ .loading__letter:nth-child(3) {
105
+ animation-delay: .2s;
106
+ }
107
+
108
+ .loading__letter:nth-child(4) {
109
+ animation-delay: .3s;
110
+ }
111
+
112
+ .loading__letter:nth-child(5) {
113
+ animation-delay: .4s;
114
+ }
115
+
116
+ .loading__letter:nth-child(6) {
117
+ animation-delay: .5s;
118
+ }
119
+
120
+ .loading__letter:nth-child(7) {
121
+ animation-delay: .6s;
122
+ }
123
+
124
+ .loading__letter:nth-child(8) {
125
+ animation-delay: .8s;
126
+ }
127
+
128
+ .loading__letter:nth-child(9) {
129
+ animation-delay: 1s;
130
+ }
131
+
132
+ .loading__letter:nth-child(10) {
133
+ animation-delay: 1.2s;
134
+ }
135
+
136
+ @keyframes bounce {
137
+ 0% {
138
+ transform: translateY(0px)
139
+ }
140
+
141
+ 40% {
142
+ transform: translateY(-40px);
143
+ }
144
+
145
+ 80%,
146
+ 100% {
147
+ transform: translateY(0px);
148
+ }
149
+ }
150
+
151
+
152
+ @media (max-width: 700px) {
153
+ .loading__letter {
154
+ font-size: 50px;
155
+ }
156
+ }
157
+
158
+ @media (max-width: 340px) {
159
+ .loading__letter {
160
+ font-size: 40px;
161
+ }
162
+ }
163
+ </style>
164
+ </head>
165
+
166
+ <body>
167
+ <div class="container">
168
+ <h1>Product Search Form</h1>
169
+ <form onsubmit="handleSubmit(event)" method="post">
170
+ <label for="product">Product:</label>
171
+ <input type="text" id="product" name="product" placeholder="Enter product name" required>
172
+ <label for="searchEngine">Choose a Source:</label>
173
+ <select id="searchEngine" name="searchEngine" required>
174
+ <option value="all">All Sources (Will take time)</option>
175
+ <option value="google">Google</option>
176
+ <option value="duckduckgo">DuckDuckGo</option>
177
+ <option value="archive">Internet Archive</option>
178
+ <option value="github">Github</option>
179
+ </select>
180
+ <button type="submit">Search</button>
181
+ </form>
182
+ </div>
183
+ <h2>Results</h2>
184
+ <div id="loading-container">
185
+ <div class="loading">
186
+ <div class="loading__letter">S</div>
187
+ <div class="loading__letter">C</div>
188
+ <div class="loading__letter">R</div>
189
+ <div class="loading__letter">A</div>
190
+ <div class="loading__letter">P</div>
191
+ <div class="loading__letter">I</div>
192
+ <div class="loading__letter">N</div>
193
+ <div class="loading__letter">G</div>
194
+ <div class="loading__letter">.</div>
195
+ <div class="loading__letter">.</div>
196
+ <div class="loading__letter">.</div>
197
+ </div>
198
+ </div>
199
+ <div id="display"></div>
200
+
201
+ </body>
202
+
203
+ <script>
204
+
205
+ function fillData(data) {
206
+
207
+ // console.log(data)
208
+ const source = document.getElementById('searchEngine').text;
209
+ const parentDiv = document.getElementById('display');
210
+
211
+ for (const key in data) {
212
+ if (data.hasOwnProperty(key)) {
213
+ // Create a div for each object
214
+ const objectDiv = document.createElement('div');
215
+ objectDiv.className = 'object-div';
216
+
217
+ // Add the object name
218
+ const objectName = document.createElement('h2');
219
+ objectName.innerText = `Product: ${key}`;
220
+ objectDiv.appendChild(objectName);
221
+
222
+ // Add source titles and links
223
+ for (const item of data[key]) {
224
+ if (typeof item === 'string') {
225
+ // If it's a string (URL), create a link
226
+ const linkElement = document.createElement('a');
227
+ linkElement.href = item;
228
+ linkElement.innerText = item;
229
+ linkElement.target = '_blank'; // Open link in a new tab
230
+ const listItem = document.createElement('li');
231
+ listItem.appendChild(linkElement);
232
+ objectDiv.appendChild(listItem);
233
+ } else if (typeof item === 'object') {
234
+ // If it's an object, it contains nested sources
235
+ for (const source in item) {
236
+ const sourceTitle = document.createElement('h3');
237
+ sourceTitle.innerText = `${source}:`;
238
+ objectDiv.appendChild(sourceTitle);
239
+
240
+ const linksList = document.createElement('ul');
241
+ for (const link of item[source]) {
242
+ const linkElement = document.createElement('a');
243
+ linkElement.href = link;
244
+ linkElement.innerText = link;
245
+ linkElement.target = '_blank'; // Open link in a new tab
246
+ const listItem = document.createElement('li');
247
+ listItem.appendChild(linkElement);
248
+ linksList.appendChild(listItem);
249
+ }
250
+ objectDiv.appendChild(linksList);
251
+ }
252
+ }
253
+ }
254
+
255
+ parentDiv.appendChild(objectDiv);
256
+ }
257
+ }
258
+ }
259
+
260
+ async function handleSubmit(event) {
261
+ event.preventDefault();
262
+
263
+ const parentDiv = document.getElementById('display');
264
+ parentDiv.innerHTML = '';
265
+
266
+ let loading = document.getElementById('loading-container');
267
+ loading.style.display = 'flex';
268
+
269
+ const product = document.getElementById('product').value;
270
+ const source = document.getElementById('searchEngine').value;
271
+ const url = `http://127.0.0.1:8000/search/${source}`;
272
+
273
+ let final_result = '';
274
+
275
+ const data = {
276
+ API_KEY: "12345",
277
+ product: product,
278
+ };
279
+
280
+ let p = await fetch(url, {
281
+ method: "POST",
282
+ headers: {
283
+ "Content-Type": "application/json"
284
+ },
285
+ body: JSON.stringify(data)
286
+ })
287
+ .then(response => response.json())
288
+ .then(data => {
289
+ final_result = data
290
+ })
291
+ .catch((error) => {
292
+ console.log(error)
293
+ alert('Request failed');
294
+ });
295
+
296
+ loading.style.display = 'none';
297
+ fillData(final_result);
298
+ }
299
+
300
+ </script>
301
+
302
+ </html>