Add desc header, styling dropdowns

app.py

@@ -63,11 +63,23 @@ css = """
     object-fit: cover !important;
 }
 
+.img-select div.secondary-wrap {
+    position: relative;
+}
+.img-select div.icon-wrap {
+    position: absolute;
+    pointer-events: none;
+    right: 0;
+}
+
+}
+
 #res div h2 { color: #07ef03; }
 """
 
 js = """
 () => {
+    
     label = document.querySelector("#res div h2");
     txt = label.textContent.split(",")[0]
     if (txt === 'Access granted') {
@@ -78,12 +90,30 @@ js = """
         }
     }
 """
+
+dropdowns = """
+() => {
+    input_el = document.querySelectorAll(".img-select input");
+    input_el[0].type = "button";
+    input_el[1].type = "button";
+    
+    /*
+    svg = document.querySelectorAll(".img-select div.icon-wrap");
+    ul = document.querySelectorAll(".img-select ul.options);
+    for (let i = 0; i < input_el.length; i++){
+        input_el[i].addEventListener("click", () => {
+            svg[i].style.transform = "rotate(180deg)";
+        })
+    }*/
+}
+"""
 def refresh():
     image = Image.open(f'data/{file_list[0]}')
     return image, image
 
-with gr.Blocks(css=css, elem_classes=['container']) as demo:
-    md = gr.Markdown(value="""- To check model performance choose first and second image from available examples.
+with gr.Blocks(css=css, js=dropdowns, elem_classes=['container']) as demo:
+    md = gr.Markdown(value="""# Follow the steps
+                - To check model performance choose first and second image from available examples.
                 - You can pair up images of the same or different fingerprints. The result from model will be automatically calculated.
                 - Additionally displayed confidence shows the similarity between images. The closer to 0, the more similar - more confident model
                 - Access is granted if value of confidence is below certain threshold found during model testing.""")
@@ -94,6 +124,8 @@ with gr.Blocks(css=css, elem_classes=['container']) as demo:
                                 choices=file_list,
                                 label='Select first image',
                                 scale=1,
+                                elem_classes='img-select',
+                                
                                 
             )
             
@@ -101,6 +133,7 @@ with gr.Blocks(css=css, elem_classes=['container']) as demo:
                                 choices=file_list,
                                 label='Select second image',
                                 scale=1,
+                                elem_classes='img-select',
                                 
             )
             label = gr.Label(value='Scans of the same finger', show_label=False)