-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
425 lines (361 loc) · 29.2 KB
/
Copy pathindex.html
File metadata and controls
425 lines (361 loc) · 29.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="https://fonts.cdnfonts.com/css/chalkduster" rel="stylesheet">
<style>
@import url('https://fonts.cdnfonts.com/css/chalkduster');
</style>
<!-- <script src="./sm/assets/teaser-data.js"></script> -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Retrieval</title>
<link href="./prml_webpage/style.css" rel="stylesheet" type="text/css">
<meta name="description"
content="Project page for 'Composite Sketch+Text Queries for Retrieving Objects with Elusive Names and Complex Interactions.'">
<!-- <link rel="icon" href="./pics/wis_logo.jpg"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Retrieval</title>
<link href="./prml_webpage/style.css" rel="stylesheet" type="text/css">
<meta name="description"
content="Project page for 'Composite Sketch+Text Queries for Retrieving Objects with Elusive Names and Complex Interactions.'">
<meta charset="utf-8">
<meta name="description" content="Composite Sketch+Text Queries for Retrieving Objects with Elusive Names and Complex Interactions">
<meta name="keywords" content="sketch+text-based image retrieval, cross-modal retrieval, image retrieval, SBIR, CSTBIR;">
<meta name="author" content="Prajwal Gatti">
<title>Image Retrieval</title>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="[AAAI 2024] Composite Sketch+Text Queries for Retrieving Objects with Elusive Names and Complex Interactions" />
<meta name="twitter:description" content="[AAAI 2024] Composite Sketch+Text Queries for Retrieving Objects with Elusive Names and Complex Interactions" />
<meta name="twitter:image:alt" content="CSTBIR (AAAI 2024)" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p class="title">Image Retrieval</p>
<div style="text-align: center; font-size: 15pt; margin-bottom: 15px">
<span><a href="https://imageretrievalprml.streamlit.app/">CSL2050 Course Project 2025</a></span>
</div>
<p class="author">
<span class="author"><a href="https://github.com/varaiitj2527"> Vara Prasad Reddy</a></span> |
<span class="author"><a href="https://github.com/manideepiitj">Manideep</a></span> |
<span class="author"><a href="https://github.com/NeerajMansingh">Neeraj Mansingh</a></span> |
<span class="author"><a href="https://github.com/priyanshuiitj">Priyanshu</a></span> |
<span class="author"><a href="https://github.com/sky17092004">Karan</a></span> |
<span class="author"><a href="https://github.com/TejasKalkar">Tejas Prasad</a></span>
</p>
<table border="0" align="center" class="affiliations" width="700px">
<tbody align="center">
<tc>
<td style="text-align: center;">Indian Institute of Technology, Jodhpur</td>
</tc>
</tbody>
</table>
<table width="999" border="0" align="center" class="menu" style="margin-bottom: 8px;">
<tbody>
<tr>
<td align="center"><a href="https://drive.google.com/file/d/14zSJO-1rsjLrHyJO3qEhAat443VBmB5Z/view?usp=sharing">Report link</a> | <a href="https://github.com/varaiitj2527/PRMLProject">Github Link</a> | <a href="https://www.cs.toronto.edu/~kriz/cifar.html">Cifar-10 Dataset</a> | <a href="https://youtu.be/Lo91aS3M1cA?feature=shared">Youtube link </a> | <a href="https://docs.google.com/document/d/1TovvJlE6R2OcKX7Mt676dLIcteEXRXyE7j7QUWtcbcQ/edit?tab=t.0">Minutes of Meetings</a> | <a href="https://docs.google.com/presentation/d/1FiYXLY7A2EMq6MFgRXaqM6-4vZSZ8Kv97sJzi5EL5Oo/edit?usp=sharing">Presentation Link</a> </td>
</tr>
</tbody>
</table>
<div class="container">
<table width="1000" border="0" align="center">
<tbody>
<tr>
<div id="imageCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_3.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_5.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_6.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 teaser-img" src="./prml_webpage/carousel_img_7.jpg" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</tr>
<!-- <tr> <br /> </tr> -->
<tr align="center"></tr>
</tbody>
</table>
<div style="text-align: justify;text-justify: inter-word;">
<br>
<br>
<p class="section"><b>Abstract</b></p>
<p>"This project focuses on building an image retrieval system using the CIFAR-10 dataset, a widely used benchmark in computer vision. The main goal is to retrieve visually similar images from the dataset based on a given query image. To achieve this, we explore both traditional machine learning and deep learning techniques, applying them to understand and compare the visual content of images effectively. Feature extraction plays a key role in this process, helping the system represent each image in a meaningful way that captures its essential patterns and structures. This leads to more accurate and relevant retrieval results. Image retrieval has many real-world applications, such as visual product searches in e-commerce platforms and case-based comparisons in medical imaging, where finding similar images can assist with diagnosis and treatment planning."</p>
</div>
<!-- <div style="text-align: justify;text-justify: inter-word;">
<p><b>Keywords:</b> sketch+text-based image retrieval, cross-modal retrieval, image retrieval, SBIR, CSTBIR</p>
</div> -->
<p class="section"> </p>
<p class="section"><b>The Image Retrieval Problem</b></p>
<div style="text-align: center">
<img src="./images/image2image.png" alt="" width="700px" style="margin: auto" />
</div>
<div style="text-align: justify; text-justify: inter-word;">
<p>In today’s digital world, the amount of image data generated and shared across the internet is growing at an incredible rate. With millions of images being uploaded every day, efficiently retrieving relevant images based on user input has become a significant challenge. Traditional text-based search methods often fail to capture the visual similarity between images, especially when users want to search using an actual image instead of keywords. To address this, we focus on building an image retrieval system that takes an image as input and returns visually similar images from a dataset. This system relies on analyzing the visual content of images to understand patterns, shapes, and textures, enabling more accurate and meaningful results. Such systems are especially useful in real-world applications like fashion or product search, reverse image lookup, and even in medical fields where visual similarity can help identify related cases.</p>
</div>
<p class="section"> </p>
<!-- <p class="section"><b>Sketches in CSTBIR</b></p>
<div style="text-align: center">
<img src="./resources/supp_sketch_examples-min.png" alt="" width="700px" style="margin: auto" /><br>
<br><br><p>Examples of sketches.</p>
</div>
<p class="section"> </p> -->
<p class="section"><b>Youtube Video</b></p>
<centre>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Lo91aS3M1cA?feature=shared" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</centre>
<p class="section"> </p>
<div class="papers-list">
<p class="section" id="related-paper"><b>Pre-Processing Techniques</b></p>
<ul>
<li>
<h5>PCA (Principle Component Analysis)</h5> PCA is used to reduce the dimensionality of image data while retaining the most important features. On the CIFAR-10 dataset, which has relatively small 32x32 images, PCA helps compress the data by removing noise and redundancy, making further processing faster and more efficient. It is useful when combined with other techniques.
</li><br>
<li>
<h5>HoG (Histogram of Oriented Gradients)</h5>HoG captures edge directions and local shape information by analyzing gradients in small regions of the image. For CIFAR-10, HoG helps in extracting meaningful texture and shape features, which are useful in distinguishing between object categories like airplanes, cars, or animals.
</li><br>
<li>
<h5>HoG + PCA</h5>In this approach, we first extract detailed edge and shape features using HoG, which can result in a high-dimensional feature vector. We then apply PCA to reduce this vector into a more manageable size while retaining the most important patterns. This helps in balancing feature richness with speed and efficiency, especially when dealing with a large number of CIFAR-10 images for retrieval.
</li><br>
<li>
<h5>PCA + HoG</h5> This method reverses the previous order: we first apply PCA to reduce the raw image dimensions and remove noise, then use HoG on this compressed version to extract structural features. While it may lose some fine details compared to using HoG first, it still allows for effective shape-based feature extraction with lower processing cost.
</li><br>
<li>
<h5>ResNet</h5> ResNet is a powerful deep convolutional neural network known for its "skip connections," which help in training deeper models without performance degradation. Using a pretrained ResNet model, we extract deep features from CIFAR-10 images that capture complex patterns, textures, and high-level visual concepts. These features are much richer than those from traditional methods and significantly boost retrieval performance by understanding images at a more abstract level.
</li><br>
<li>
<h5>QuickNet</h5> QuickNet is a lightweight convolutional neural network designed for speed and efficiency, making it suitable for real-time or resource-constrained environments. On CIFAR-10, QuickNet can extract meaningful visual features faster than heavier models like ResNet, while still maintaining reasonable accuracy. It provides a good balance between performance and computational cost, especially useful for quick image retrieval tasks on limited hardware
</li><br>
</ul>
<p class="section" id="related-paper"><b>Our Approaches</b></p>
<ul>
<li>
<h5> Decision Tree (DT)</h5> We used Decision Trees to analyze how well different feature extraction methods perform. Since raw image pixels are too high-dimensional, we relied on compact features like those from PCA or CNNs. 5-fold cross-validation ensured more stable and generalizable results. DTs are interpretable and work well with meaningful feature inputs. The highest accuracy we got upon 5 fold cross validation is 36.45% when the image was preprocessed using HoG + PCA and GINI impurity was used.
</li><br>
<li>
<h5>Gaussian Naive Bayes (GNB)</h5>GNB assumes feature independence, which isn't ideal for images, but works reasonably well when using PCA-transformed features. It's a simple, fast classifier that provided a good baseline performance. The highest accuracy obtained was 80.25% on ResNet preprocessed images.
</li><br>
<li>
<h5>Gaussian Mixture Model (GMM)</h5>GMM models each class as a combination of multiple Gaussian distributions, allowing it to capture more complex patterns in image features. It provides soft class assignments, making it useful in cases with ambiguous image categories or overlapping features. The highest accuracy obtained was 54.24% on ResNet preprocessed images.
</li><br>
<li>
<h5>K-Nearest Neighbours (K-NN)</h5> K-NN classifies images based on similarity to their closest neighbors in the feature space. It clusters similar images together after feature extraction. Its performance heavily depends on the quality of the extracted features. The highest accuracy obtained was 86.58% when ResNet preprocessed images were used along with BrayCurtis distance metric.
</li><br>
<li>
<h5>Random Forest (RF)</h5> Random Forest combines several decision trees to reduce overfitting and boost accuracy. It works well with extracted features and handles non-linear relationships.The highest accuracy is 83.94% when the image was preprocessed using ResNet and GINI impurity was used.
</li><br>
<li>
<h5>XGBoost (XG)</h5> We implemented a GPU-accelerated version of XGBoost using the multi:softprob objective and monitored performance using the multi-class log loss (mlogloss) metric. To fine-tune model performance, we explored hyperparameter optimization through both GridSearchCV and Optuna, running over 30 trials. For HoG-PCA features, this tuning led to a notable +1.77% improvement in accuracy, indicating that XGBoost benefited from careful parameter selection in this setup. In contrast, ResNet-based features showed only a +0.18% gain, suggesting that the deep features already provided a near-optimal representation for this classifier. The maximum accuracy we recorded is 89.32 %.
</li><br>
<li>
<h5>Support Vector Machines (SVM)</h5> Different SVM kernels were tested on CIFAR-10 using features from HOG, QuickNet, and ResNet. Models with ResNet features performed the best, reaching up to 90.28% accuracy. QuickNet also gave decent results around 75%, while HOG features were less effective. Adding PCA helped speed things up but didn’t always improve accuracy.
</li><br>
<li>
<h5> Logistic Regression (LR)</h5>Logistic Regression was applied on top of features extracted using a pretrained ResNet model. Despite being a linear classifier, it performed remarkably well when paired with these deep features, reaching an accuracy of 88.80% on the CIFAR-10 dataset. This result reflects how powerful feature representations from deep networks can simplify the classification task, even for models that don’t capture complex patterns on their own.
</li><br>
<li>
<h5>Supervised Centroid-Based Classification</h5> This centroid-based method uses the mean vector of each class from the training data to represent class prototypes. At test time, predictions are made by assigning the input to the nearest centroid using Euclidean distance. When applied to features extracted via ResNet, the model achieved an accuracy of 77.84% on CIFAR-10.
</li><br>
<li>
<h5>Artificial Neural Network (ANN):</h5> We implemented a Multi-Layer Perceptron (MLP) on top of ResNet-extracted features to classify images from the CIFAR-10 dataset. The architecture included two hidden layers (256 and 128 units) with ReLU activation and dropout regularization, followed by a softmax output layer. Training incorporated early stopping and learning rate reduction for better convergence. After tuning over multiple trials, the best configuration was found in the 11th trial, achieving a validation accuracy of 89.48% and a validation loss of 0.3167. This indicates that the ResNet features are already well-structured, allowing even a shallow MLP to learn class boundaries effectively.
</li><br>
</ul>
</div>
<p class="section"> </p>
<div class="team">
<p class="section" id="team"><b>Team</b></p>
<div class="row justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/manideep_img_prml.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Manideep Kodakandla</h5>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/manideep-kodakandla-a896952a7/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/vara_img_prml.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Vara Prasad Reddy</h5>
<ul class="list-inline">
<li class="list-inline-item">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/vara-prasad-reddy-shasani-6b2937309/?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app">
<i class="fa fa-linkedin"></i>
</a>
</li>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/neeraj_prml_img.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Neeraj Mansingh</h5>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/neeraj-mansingh-a94042299/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/tejas_img_prml.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Tejas <br/> Kalkar</h5>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/tejas-kalkar-881250317/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/priyanshu_img_prml.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Priyanshu</h5>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/priyanshu-%E2%80%8E-820a24289/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2">
<div class="mainflip">
<div class="card">
<div class="card-body text-center card-no-padding">
<p><img src="./prml_webpage/karan_prml_img.png" alt="card image" height="130" width="100"></p>
<h5 class="card-title">Karan <br/>Yadav</h5>
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="https://www.linkedin.com/in/karan-yadav-0024712a9/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p class="section"> </p>
<p class="section"> </p>
<div class="papers-list">
<p class="section" id="related-paper"><b>Citations</b></p>
<ol>
<li>Scikitlearn website - <a href="https://scikit-learn.org/stable/">https://scikit-learn.org/stable/</a></li>
<li>Stack Overflow - <a href="https://stackoverflow.blog/machine-learning/">https://stackoverflow.blog/machine-learning/</a></li>
<li>KNN - <a href="https://globaljournals.org/item/3888-analysis-of-distance-measures-in-content-based-image-retrieval">https://globaljournals.org/item/3888-analysis-of-distance-measures-in-content-based-image-retrieval</a></li>
<li>XGBoost - <a href="https://youtu.be/GrJP9FLV3FE?si=SMZQtfrEpvGig4A5">https://youtu.be/GrJP9FLV3FE?si=SMZQtfrEpvGig4A5</a></li>
<li>Logistic Regression - <a href="https://youtube.com/playlist?list=PLblh5JKOoLUKxzEP5HA2d-Li7IJkHfXSe&si=KuSygPegbe-KYxv6">https://youtube.com/playlist?list=PLblh5JKOoLUKxzEP5HA2d-Li7IJkHfXSe&si=KuSygPegbe-KYxv6</a></li>
<li>Random Forests - <a href="https://youtu.be/J4Wdy0Wc_xQ?si=1IzPuh43HxeT3200">https://youtu.be/J4Wdy0Wc_xQ?si=1IzPuh43HxeT3200</a></li>
</ol>
</div>
<p class="section"> </p>
<p class="section"> </p>
<div class="ack">
<p class="section" id="ack"><b>Acknowledgment</b></p>
We are truly grateful to Dr. Anand Mishra for giving us the opportunity to work on this project. It allowed us to explore a wide range of techniques in image retrieval using the CIFAR-10 dataset, which not only helped us solidify our fundamentals but also introduced us to some advanced concepts. The hands-on experience we gained throughout the project was incredibly valuable and contributed a lot to our learning.
</div>
<p class="section"></p>
<p class="section"> </p>
<div class="contact">
<p class="section" id="related-paper"><b>Contact</b></p>
For questions, please contact <a href="https://www.linkedin.com/in/neeraj-mansingh-a94042299/" target="_blank">Neeraj Mansingh</a> or <a href="https://www.linkedin.com/in/vara-prasad-reddy-shasani-6b2937309/?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank">Vara Prasad Reddy</a> or raise an issue on <a class="publink" href="https://github.com/varaiitj2527/PRMLProject" target="_blank" style="text-decoration: none">GitHub</a>.
</div>
<p class="section"></p>
</body>
<script>
function prompt_on(prompt_element) {
prompt_element.classList.add("caption-active");
}
function prompt_off(prompt_element) {
prompt_element.classList.remove("caption-active");
}
function toggle_prompt(active_prompt_id, inactive_prompt_ids, result_id) {
let active_prompt = document.getElementById(active_prompt_id);
prompt_on(active_prompt);
for (let i = 0; i < inactive_prompt_ids.length; i++) {
let inactive_prompt = document.getElementById(inactive_prompt_ids[i]);
prompt_off(inactive_prompt);
}
let result = document.getElementById(result_id);
result.src = file_paths[active_prompt_id];
}
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<footer style="
background-color: white;
padding: 25px 0;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
color: #666;
border-top: 1px solid #e0e0e0;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
">
Webpage made by <strong>Neeraj Mansingh</strong>
</footer>
</html>