Initial image load bug fix

app.py

@@ -11,7 +11,8 @@ weights = torch.load('trained_model', map_location=torch.device('cpu'))
 model.load_state_dict(weights)
 model.eval()
 
-file_list = os.listdir('data')
+file_list = os.listdir("data")
+
 examples = []
 usersIndexes = []
 for x in file_list:
@@ -77,47 +78,46 @@ js = """
         }
     }
 """
-
-img_PIL = Image.open(f'data/{file_list[0]}')
+def refresh():
+    image = Image.open(f'data/{file_list[0]}')
+    return image, image
 
 with gr.Blocks(css=css, elem_classes=['container']) as demo:
     with gr.Row():
         
         with gr.Row():
-            drop1 =  gr.Dropdown(value=None,
+            drop1 =  gr.Dropdown(value=file_list[0],
                                 choices=file_list,
                                 label='Select first image',
                                 scale=1,
                                 
             )
             
-            drop2 = gr.Dropdown(value=None,
+            drop2 = gr.Dropdown(value=file_list[0],
                                 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, 
+            img1 = gr.Image(height=288, # unfortunately value doesn't work properly
                             width=256, 
                             interactive=False, 
                             scale=1, 
                             label='first image', 
                             show_download_button=False,
+                            show_share_button=False,
                             elem_classes=['my-img'])
              
-            img2 = gr.Image(value=img_PIL, 
-                            height=288, 
+            img2 = gr.Image(height=288, 
                             width=256, 
                             interactive=False, 
                             scale=1, 
                             label='second image',
                             show_download_button=False,
+                            show_share_button=False,
                             elem_classes=['my-img'])
                      
     output = gr.Label(value=predict(*examples[0])[2], elem_id='res', show_label=False)
@@ -125,6 +125,8 @@ with gr.Blocks(css=css, elem_classes=['container']) as demo:
     drop1.change(fn=predict, inputs=[drop1, drop2], outputs=[img1, img2, output, label])
     drop2.change(fn=predict, inputs=[drop1, drop2], outputs=[img1, img2, output, label])
     output.change(fn=None, inputs=None, js=js)
+    # initial img load workaround
+    demo.load(fn=refresh, inputs=None, outputs=[img1, img2])
 demo.launch()
 
 # %%