Labeling bug fix, components reposition and styling

app.py

@@ -28,7 +28,6 @@ for user in usersIndexes:
             for notUser in notUsersImages:
                 examples.append([userImage, notUser, 1])
 
-#%%
 def predict(input1, input2, label=None):
     img1_PIL = Image.open(f'data/{input1}')
     img2_PIL = Image.open(f'data/{input2}')
@@ -36,11 +35,11 @@ def predict(input1, input2, label=None):
     img2 = transforms.ToTensor()(img2_PIL).unsqueeze(0)
 
     for el in examples:
-        if input1 == input2:
-            label = 0
+        if input1 == el[0] and input2 == el[1] and el[2] == 0:
+            label = 'Scans of the same finger'
             break
-        if input1 in el and input2 in el:
-            label = el[2]        
+        if input1 == el[0] and input2 == el[1] and el[2] == 1:
+            label = 'Scans of different fingers'        
     
     with torch.no_grad():
         out1, out2 = model(img1, img2)
@@ -49,33 +48,83 @@ def predict(input1, input2, label=None):
             decision = f'Access granted, confidence: {pred.item():4f}'
         else:
             decision = f'Access denied, confidence: {pred.item():4f}'
-        return img1_PIL, img2_PIL, decision, label 
-
+    
+    return img1_PIL, img2_PIL, decision, label 
 #%%
+css = """
+.gradio-container {
+    height: 100vh;
+    max-width: 1024px !important;
+}
+
+.my_img {
+    max-height: 288px !important;
+    object-fit: cover !important;
+}
+
+#res div h2 { color: #07ef03; }
+"""
+
+js = """
+() => {
+    label = document.querySelector("#res div h2");
+    txt = label.textContent.split(",")[0]
+    if (txt === 'Access granted') {
+        label.style.color = "#07ef03";
+        }
+    if (txt === 'Access denied') {
+        label.style.color = "red";
+        }
+    }
+"""
 
 img_PIL = Image.open(f'data/{file_list[0]}')
 
-with gr.Blocks() as demo:
-    drop1 =  gr.Dropdown(
-    value=file_list[0],
-    choices=file_list,
-    label='First image',
-    scale=0
-    )
-    drop2 = gr.Dropdown(
-    value=file_list[0],
-    choices=file_list,
-    label='Second image',
-    scale=0     
-    )
+with gr.Blocks(css=css, elem_classes=['container']) as demo:
     with gr.Row():
-        img1 = gr.Image(value=img_PIL, height=153, width=136, interactive=False, scale=0, label='image1')
-        img2 = gr.Image(value=img_PIL, height=153, width=136, interactive=False, scale=0, label='image2')
-        label = gr.Label(value=0, label='0 means images represent the same fingerprint')
-    output = gr.Label(value=predict(*examples[0])[2], label='Prediction, the closer to 0, the more similar')
+        
+        with gr.Row():
+            drop1 =  gr.Dropdown(value=None,
+                                choices=file_list,
+                                label='Select first image',
+                                scale=1,
+                                
+            )
+            
+            drop2 = gr.Dropdown(value=None,
+                                choices=file_list,
+                                label='Select second image',
+                                scale=1,
+                                
+            )
+            label = gr.Label(value='Scans of the same finger', show_label=False)        
+                                
+            
+            
+        with gr.Row():
+            img1 = gr.Image(value=img_PIL, 
+                            height=288, 
+                            width=256, 
+                            interactive=False, 
+                            scale=1, 
+                            label='first image', 
+                            show_download_button=False,
+                            elem_classes=['my-img'])
+             
+            img2 = gr.Image(value=img_PIL, 
+                            height=288, 
+                            width=256, 
+                            interactive=False, 
+                            scale=1, 
+                            label='second image',
+                            show_download_button=False,
+                            elem_classes=['my-img'])
+                     
+    output = gr.Label(value=predict(*examples[0])[2], elem_id='res', show_label=False)
 
     drop1.change(fn=predict, inputs=[drop1, drop2], outputs=[img1, img2, output, label])
     drop2.change(fn=predict, inputs=[drop1, drop2], outputs=[img1, img2, output, label])
-    demo.launch()
+    output.change(fn=None, inputs=None, js=js)
+demo.launch()
 
 # %%