hack2skill · codeprofile · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 7, 2023
diff --git a/README.md b/README.md
@@ -1,32 +1,31 @@
-# oneAPI-GenAI-Hackathon-2023 - Hack2Skill
+#### Team Name - TechnoTouch
+#### Problem Statement - Revolutionary AI-Infused Retail Platform
+#### Team Leader Email - [email protected]
 
-Welcome to the official repository for the oneAPI-GenAI-Hackathon-2023 organized by Hack2Skill!
+### A Brief of the Prototype: Image_Se_Image_Search
+<b> Problem statement:</b> The built models should be able to find database images that correspond to a given query image (i.e., the model should retrieve database images containing the same object as the query).  
 
-## Getting Started
+<b>Example:</b>
+    <ul>
+    <li><b><I>Query:</I></b> Consider you want to search images from your database which contains car .</li>
+    <li><b><i>Solution:</i></b> You provide an image of car then all images from database have car should be return.</li>
+    </ul>
+
+
+<b> <u>Screen 1 : Where user Uploads Image as a seach query and hit `Submit`.</u> </b> 
 
-To get started with the oneAPI-GenAI-Hackathon-2023 repository, follow these steps:
+<img src="https://user-images.githubusercontent.com/94001814/190883147-cf7a754f-fbcf-4c6f-96c5-7ebe8b675b4b.png">
+
+<b> <u>Screen 2 : Where response of similar images are presented.</u> </b> 
 
-### Submission Instruction:
-  1. Fork this repository
-  2. Create a folder with your Team Name
-  3. Upload all the code and necessary files in the created folder
-  4. Upload a **README.md** file in your folder with the below mentioned informations.
-  5. Generate a Pull Request with your Team Name. (Example: submission-XYZ_team)
-
-### README.md must consist of the following information:
-
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
-
-### A Brief of the Prototype:
-  This section must include UML Diagrams and prototype description
-
-### Tech Stack: 
-   List Down all technologies used to Build the prototype
-
-### Step-by-Step Code Execution Instructions:
-  This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
-
-### Future Scope:
-   Write about the scalability and futuristic aspects of the prototype developed
+<img src="https://user-images.githubusercontent.com/94001814/192099400-c69e8562-b5d4-41d6-a047-0e854b761741.png">
+<b>`Note` :</b> <i> images are displayed in their most to less similar images .</i>
+    <br/>
+    <br/>
+<b> <u>Steps to Run the Project :</u> </b>
+    <ul>
+        <li> git clone `https://github.com/codeprofile/MicrosoftHackathon` </li>
+        <li> cd `Image_Se_Image_Search` </li>
+        <li> pip install -r requirements.txt </li>
+        <li>  flask run </li>
+    </ul>
diff --git a/TechnoTouch/app.py b/TechnoTouch/app.py
@@ -0,0 +1,47 @@
+import os
+from PIL import Image
+from flask import Flask, request, render_template
+from datetime import datetime
+from image_feature_extraction import FeatureExtractor
+from pathlib import Path
+import numpy as np
+
+app = Flask(__name__)
+
+# Read image features
+fe = FeatureExtractor()
+features = []
+img_paths = []
+for feature_path in Path("./static/flipkart_feature").glob("*.npy"):
+    features.append(np.load(feature_path))
+    img_paths.append(Path("./static/flipkart_dataset") / (feature_path.stem + ".jpg"))
+features = np.array(features)
+
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        file = request.files['query_img']
+        # Save query image
+        img = Image.open(file.stream)  # PIL image
+        uploaded_img_path = "static/uploaded/" + datetime.now().isoformat().replace(":", ".") + "_" + file.filename
+        img.save(uploaded_img_path)
+
+        # Run search
+        fe = FeatureExtractor()
+        query = fe.extract(img)
+        dists = np.linalg.norm(features - query, axis=1)  # L2 distances to features
+        ids = np.argsort(dists)[:20]  # Top 10 results
+        scores = [(dists[id], img_paths[id]) for id in ids]
+        return render_template('index.html',
+                               query_path=uploaded_img_path,
+                               context=uploaded_img_path,
+                               scores=scores
+                               )
+    if request.method == 'GET':
+        return render_template('index.html')
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get('PORT', 5000))
+    app.run(host="0.0.0.0", port=port, debug=False)
diff --git a/TechnoTouch/db_dataset_feature_preparation.py b/TechnoTouch/db_dataset_feature_preparation.py
@@ -0,0 +1,13 @@
+from PIL import Image
+from Image_feature_extraction import FeatureExtractor
+from pathlib import Path
+import numpy as np
+
+if __name__ == '__main__':
+    fe = FeatureExtractor()
+
+    for img_path in sorted(Path("./static/dataset").glob("*.jpg")):
+        print(img_path)  # e.g., ./static/img/xxx.jpg
+        feature = fe.extract(img=Image.open(img_path))
+        feature_path = Path("./static/feature") / (img_path.stem + ".npy")  # e.g., ./static/feature/xxx.npy
+        np.save(feature_path, feature)
diff --git a/TechnoTouch/image_feature_extraction.py b/TechnoTouch/image_feature_extraction.py
@@ -0,0 +1,27 @@
+# Import the libraries
+from tensorflow.keras.preprocessing import image
+from tensorflow.keras.applications.vgg16 import VGG16, preprocess_input
+from tensorflow.keras.models import Model
+import numpy as np
+
+
+class FeatureExtractor:
+    def __init__(self):
+        # Use VGG-16 as the architecture and ImageNet for the weight
+        base_model = VGG16(weights='imagenet')
+        # Customize the model to return features from fully-connected layer
+        self.model = Model(inputs=base_model.input, outputs=base_model.get_layer('fc1').output)
+
+    def extract(self, img):
+        # Resize the image
+        img = img.resize((224, 224))
+        # Convert the image color space
+        img = img.convert('RGB')
+        # Reformat the image
+        x = image.img_to_array(img)
+        x = np.expand_dims(x, axis=0)
+        x = preprocess_input(x)
+        # Extract Features
+        feature = self.model.predict(x)[0]
+        return feature / np.linalg.norm(feature)
+
diff --git a/TechnoTouch/requirements.txt b/TechnoTouch/requirements.txt
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagf255fpcfzfnt.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagf255fpcfzfnt.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagf255mhuxmamt.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagf255mhuxmamt.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagf255tjygezzs.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagf255tjygezzs.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagfyy2zech5n6d-bb.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagfyy2zech5n6d-bb.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagfzhqz3hqsuza-bb.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagfzhqz3hqsuza-bb.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg4zgaacqnv8e.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg4zgaacqnv8e.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg4zjtvyagauu.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg4zjtvyagauu.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg5dtcfrzbcvb.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg5dtcfrzbcvb.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg5du4d4x4bxh.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg5du4d4x4bxh.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg5vxrfkg5mkm.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg5vxrfkg5mkm.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg6r9bpznrksf.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg6r9bpznrksf.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg6r9x7ej8x6t.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg6r9x7ej8x6t.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg6reznfbmjfe.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg6reznfbmjfe.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7enuhuzjbdg.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7enuhuzjbdg.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7syaf3btfue.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7syaf3btfue.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7syxx9wyfph.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7syxx9wyfph.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7szgcmfgauh.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7szgcmfgauh.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7szyxg63adu.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7szyxg63adu.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7t28r97yg4k.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7t28r97yg4k.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imagg7tfhygmmc7d.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imagg7tfhygmmc7d.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggcawm2bc7sbc.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggcawm2bc7sbc.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggcawtmxbuhzf.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggcawtmxbuhzf.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggcb3d6f4cxvu.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggcb3d6f4cxvu.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggcb3jdqyb6kc.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggcb3jdqyb6kc.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggcb3yyfn2hpz.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggcb3yyfn2hpz.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggdabmyshydgd.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggdabmyshydgd.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaggyuww7ahtp6c.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaggyuww7ahtp6c.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaghvb3gmh7t9zg.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaghvb3gmh7t9zg.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaghvb5zzszuy55.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaghvb5zzszuy55.jpeg
diff --git a/TechnoTouch/static/flipkart_dataset/-original-imaghvb7kkpy73vn.jpeg b/TechnoTouch/static/flipkart_dataset/-original-imaghvb7kkpy73vn.jpeg
diff --git a/...05nike-12-nike-anthracite-racer-blue-black-white-original-imagfyfuf7zmhft6.jpeg b/...05nike-12-nike-anthracite-racer-blue-black-white-original-imagfyfuf7zmhft6.jpeg
diff --git a/...dataset/11-gb2390-11-adidas-teconi-sabemt-seimor-original-imagg32xztvhdesm.jpeg b/...dataset/11-gb2390-11-adidas-teconi-sabemt-seimor-original-imagg32xztvhdesm.jpeg
diff --git a/...c/flipkart_dataset/11-rso187-redtape-black-white-original-imagg4cafq4xhwcz.jpeg b/...c/flipkart_dataset/11-rso187-redtape-black-white-original-imagg4cafq4xhwcz.jpeg
diff --git a/...c/flipkart_dataset/6-s70437-45-7-saucony-seafoam-original-imafzseuqjndjbkz.jpeg b/...c/flipkart_dataset/6-s70437-45-7-saucony-seafoam-original-imafzseuqjndjbkz.jpeg
diff --git a/...static/flipkart_dataset/7-22g-148-campus-wht-blk-original-imaghxhbeympvxgp.jpeg b/...static/flipkart_dataset/7-22g-148-campus-wht-blk-original-imaghxhbeympvxgp.jpeg
diff --git a/...c/flipkart_dataset/8-386922-8-puma-rhubarb-black-original-imag6y35z9yfrqcu.jpeg b/...c/flipkart_dataset/8-386922-8-puma-rhubarb-black-original-imag6y35z9yfrqcu.jpeg
diff --git a/...atic/flipkart_dataset/8-rso136-red-tape-white-original-imag9wgwasptcnd8-bb.jpeg b/...atic/flipkart_dataset/8-rso136-red-tape-white-original-imag9wgwasptcnd8-bb.jpeg
diff --git a/...ch/static/flipkart_dataset/9-sp7235-kraasa-white-original-imagdn4adzndtapz.jpeg b/...ch/static/flipkart_dataset/9-sp7235-kraasa-white-original-imagdn4adzndtapz.jpeg
diff --git a/...uch/static/flipkart_dataset/brd-343-abisto-black-original-imafvzgynd8aybhj.jpeg b/...uch/static/flipkart_dataset/brd-343-abisto-black-original-imafvzgynd8aybhj.jpeg
diff --git a/...Touch/static/flipkart_dataset/mrj1346-aadi-black-original-imafzad77kzz9w6w.jpeg b/...Touch/static/flipkart_dataset/mrj1346-aadi-black-original-imafzad77kzz9w6w.jpeg
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagf255fpcfzfnt.npy b/TechnoTouch/static/flipkart_feature/-original-imagf255fpcfzfnt.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagf255mhuxmamt.npy b/TechnoTouch/static/flipkart_feature/-original-imagf255mhuxmamt.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagf255tjygezzs.npy b/TechnoTouch/static/flipkart_feature/-original-imagf255tjygezzs.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagfyy2zech5n6d-bb.npy b/TechnoTouch/static/flipkart_feature/-original-imagfyy2zech5n6d-bb.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagfzhqz3hqsuza-bb.npy b/TechnoTouch/static/flipkart_feature/-original-imagfzhqz3hqsuza-bb.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg4zgaacqnv8e.npy b/TechnoTouch/static/flipkart_feature/-original-imagg4zgaacqnv8e.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg4zjtvyagauu.npy b/TechnoTouch/static/flipkart_feature/-original-imagg4zjtvyagauu.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg5dtcfrzbcvb.npy b/TechnoTouch/static/flipkart_feature/-original-imagg5dtcfrzbcvb.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg5du4d4x4bxh.npy b/TechnoTouch/static/flipkart_feature/-original-imagg5du4d4x4bxh.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg5vxrfkg5mkm.npy b/TechnoTouch/static/flipkart_feature/-original-imagg5vxrfkg5mkm.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg6r9bpznrksf.npy b/TechnoTouch/static/flipkart_feature/-original-imagg6r9bpznrksf.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg6r9x7ej8x6t.npy b/TechnoTouch/static/flipkart_feature/-original-imagg6r9x7ej8x6t.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg6reznfbmjfe.npy b/TechnoTouch/static/flipkart_feature/-original-imagg6reznfbmjfe.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7enuhuzjbdg.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7enuhuzjbdg.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7syaf3btfue.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7syaf3btfue.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7syxx9wyfph.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7syxx9wyfph.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7szgcmfgauh.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7szgcmfgauh.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7szyxg63adu.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7szyxg63adu.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7t28r97yg4k.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7t28r97yg4k.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imagg7tfhygmmc7d.npy b/TechnoTouch/static/flipkart_feature/-original-imagg7tfhygmmc7d.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggcawm2bc7sbc.npy b/TechnoTouch/static/flipkart_feature/-original-imaggcawm2bc7sbc.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggcawtmxbuhzf.npy b/TechnoTouch/static/flipkart_feature/-original-imaggcawtmxbuhzf.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggcb3d6f4cxvu.npy b/TechnoTouch/static/flipkart_feature/-original-imaggcb3d6f4cxvu.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggcb3jdqyb6kc.npy b/TechnoTouch/static/flipkart_feature/-original-imaggcb3jdqyb6kc.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggcb3yyfn2hpz.npy b/TechnoTouch/static/flipkart_feature/-original-imaggcb3yyfn2hpz.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggdabmyshydgd.npy b/TechnoTouch/static/flipkart_feature/-original-imaggdabmyshydgd.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaggyuww7ahtp6c.npy b/TechnoTouch/static/flipkart_feature/-original-imaggyuww7ahtp6c.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaghvb3gmh7t9zg.npy b/TechnoTouch/static/flipkart_feature/-original-imaghvb3gmh7t9zg.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaghvb5zzszuy55.npy b/TechnoTouch/static/flipkart_feature/-original-imaghvb5zzszuy55.npy
diff --git a/TechnoTouch/static/flipkart_feature/-original-imaghvb7kkpy73vn.npy b/TechnoTouch/static/flipkart_feature/-original-imaghvb7kkpy73vn.npy
diff --git a/...11-dd9293-005nike-12-nike-anthracite-racer-blue-black-white-original-imagfyfuf7zmhft6.npy b/...11-dd9293-005nike-12-nike-anthracite-racer-blue-black-white-original-imagfyfuf7zmhft6.npy
diff --git a/...c/flipkart_feature/11-gb2390-11-adidas-teconi-sabemt-seimor-original-imagg32xztvhdesm.npy b/...c/flipkart_feature/11-gb2390-11-adidas-teconi-sabemt-seimor-original-imagg32xztvhdesm.npy
diff --git a/...Touch/static/flipkart_feature/11-rso187-redtape-black-white-original-imagg4cafq4xhwcz.npy b/...Touch/static/flipkart_feature/11-rso187-redtape-black-white-original-imagg4cafq4xhwcz.npy
diff --git a/...Touch/static/flipkart_feature/6-s70437-45-7-saucony-seafoam-original-imafzseuqjndjbkz.npy b/...Touch/static/flipkart_feature/6-s70437-45-7-saucony-seafoam-original-imafzseuqjndjbkz.npy
diff --git a/TechnoTouch/static/flipkart_feature/7-22g-148-campus-wht-blk-original-imaghxhbeympvxgp.npy b/TechnoTouch/static/flipkart_feature/7-22g-148-campus-wht-blk-original-imaghxhbeympvxgp.npy
diff --git a/...Touch/static/flipkart_feature/8-386922-8-puma-rhubarb-black-original-imag6y35z9yfrqcu.npy b/...Touch/static/flipkart_feature/8-386922-8-puma-rhubarb-black-original-imag6y35z9yfrqcu.npy
diff --git a/TechnoTouch/static/flipkart_feature/8-rso136-red-tape-white-original-imag9wgwasptcnd8-bb.npy b/TechnoTouch/static/flipkart_feature/8-rso136-red-tape-white-original-imag9wgwasptcnd8-bb.npy
diff --git a/TechnoTouch/static/flipkart_feature/9-sp7235-kraasa-white-original-imagdn4adzndtapz.npy b/TechnoTouch/static/flipkart_feature/9-sp7235-kraasa-white-original-imagdn4adzndtapz.npy
diff --git a/TechnoTouch/static/flipkart_feature/brd-343-abisto-black-original-imafvzgynd8aybhj.npy b/TechnoTouch/static/flipkart_feature/brd-343-abisto-black-original-imafvzgynd8aybhj.npy
diff --git a/TechnoTouch/static/flipkart_feature/mrj1346-aadi-black-original-imafzad77kzz9w6w.npy b/TechnoTouch/static/flipkart_feature/mrj1346-aadi-black-original-imafzad77kzz9w6w.npy
diff --git a/TechnoTouch/static/main.css b/TechnoTouch/static/main.css
@@ -0,0 +1,24 @@
+/*
+*
+* ==========================================
+* FOR DEMO PURPOSE
+* ==========================================
+*
+*/
+
+body {
+  background: #f4f4f4;
+}
+
+.banner {
+  background: #a770ef;
+  background: -webkit-linear-gradient(to right, #a770ef, #cf8bf3, #fdb99b);
+  background: linear-gradient(to right, #a770ef, #cf8bf3, #fdb99b);
+}
+
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
diff --git a/TechnoTouch/templates/index.html b/TechnoTouch/templates/index.html
@@ -0,0 +1,68 @@
+<html>
+
+<head>
+
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='main.css') }}">
+</head>
+<div class="container-fluid">
+    <div class="px-lg-5">
+
+        <!-- For demo purpose -->
+        <div class="row py-5">
+            <div class="col-lg-12 mx-auto">
+                <div class="text-white p-5 shadow-sm rounded banner">
+                    <h1 class="display-4">Image2Image gallery</h1>
+                    <p class="lead">Upload Image For Search :</p>
+                    <div class="mb-3"><label for="formFileSm" class="form-label">Revelent Images with be displayed :
+                        </label>
+                        <form method="POST" enctype="multipart/form-data">
+                            <input class="form-control form-control-sm" id="formFileSm" type="file" name="query_img">
+                            </br>
+                            <input type="submit" class="btn btn-primary btn-lg btn-block">
+                        </form>
+                        {% if query_path %}
+                        <h2 style="text-align:center">Query:</h2>
+
+
+                        <img src="{{ query_path }}" class="center" width="300px" height="300px">{%endif%}
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <!-- End -->
+
+
+
+
+        <div class="row">
+            {% for score in scores %}
+            <!-- Gallery item -->
+            <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
+                <div class="bg-white rounded shadow-sm"><img src="{{ score[1] }}" height="200px" alt=""
+                        class="img-fluid card-img-top">
+                    <div class="p-4">
+                        <h5> <a href="#" class="text-dark">{{ score[0] }}</a></h5>
+                        <p class="small text-muted mb-0">Similarity Between query and DB match is considered.</p>
+                        <div
+                            class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
+                            <p class="small mb-0"><i class="fa fa-picture-o mr-2"></i><span
+                                    class="font-weight-bold">JPG</span></p>
+                            <div class="badge badge-danger px-3 rounded-pill font-weight-normal">Matching</div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+            {% endfor %}
+
+
+        </div>
+        <div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
+    </div>
+</div>
+
+</html>