updated layout and added example image

app.py

@@ -2,18 +2,40 @@ from shiny import App, reactive, render, ui
 from shiny.types import ImgData
 
 from gender_cnn.predict import predict_gender
+from gender_cnn.predict import get_backend
 
 app_ui = ui.page_fillable(
     ui.panel_title('Gender Classifier'),
-    ui.card(
-        ui.card_header('Input'),
-         ui.input_file('image', 'Upload image', accept=['.png', '.jpg', '.jpeg']),
-         ui.output_image('show_image')
-    ),
-    ui.card(
-        ui.card_header('Predict'),
-        ui.input_action_button('predict_gender', 'Make Prediction'),
-        ui.output_text('prediction')
+    ui.output_text('show_backend'),
+    ui.navset_pill_list(
+        ui.nav_panel(
+            "Input and Prediction",
+            ui.layout_columns(
+                ui.card(
+                    ui.card_header('Input'),
+                    ui.input_file('image', 'Upload image', accept=['.png', '.jpg', '.jpeg'])
+                ),
+                ui.card(
+                    ui.card_header('Example Image'),
+                    ui.output_image('show_example_image', fill=True)
+                )
+            ),
+            ui.card(
+                ui.card_header('Image'),
+                ui.output_image('show_image', fill=True)
+            ),
+            ui.layout_columns(
+                ui.card(
+                    ui.card_header('Predict'),
+                    ui.input_action_button('predict_gender', 'Make Prediction')
+                ),
+                ui.card(
+                    ui.card_header('Prediction'),
+                    ui.output_text('prediction')
+                )
+            )
+        ),
+        widths=(3, 9)
     )
 )
 
@@ -24,7 +46,13 @@ def server(input, output, session):
             return None
             
         image_path = input.image()[0]['datapath']
-        img: ImgData = {'src': image_path, 'height': '300px', 'width': '300px'}
+        img: ImgData = {'src': image_path, 'height': '100%'}
+        return img
+    
+    @render.image
+    def show_example_image():
+        image_path = 'images/Male/kratos.png'
+        img: ImgData = {'src': image_path, 'height': '100%'}
         return img
     
     @render.text
@@ -37,8 +65,11 @@ def server(input, output, session):
         output = predict_gender(image_path)
         prediction = output['prediction']
         weighting = output['weighting']
-        device = output['device']
 
-        return f'Prediction: {prediction}. Weighting: {str(round(weighting, 2))}. Device: {device}.'
+        return f'Prediction: {prediction}. Weighting: {str(round(weighting, 2))}.'
+    
+    @render.text
+    def show_backend():
+        return f'Using device: {get_backend()[1]}.'
 
 app = App(app_ui, server)

gender_cnn/predict.py

@@ -3,13 +3,7 @@ import torchvision.transforms as transforms
 from PIL import Image
 from .model import resnetModel_128
 
-def predict_gender(image_path: str):
-    # Constants
-    imsize = 128
-    classes = ('Female', 'Male')
-    model_name = 'resnetModel_128_epoch_2.pt'
-
-    # Set Backend
+def get_backend():
     if torch.backends.mps.is_available():
         device = torch.device('mps')
         device_name = 'Apple Silicon GPU'
@@ -20,6 +14,17 @@ def predict_gender(image_path: str):
         device = torch.device('cpu')
         device_name = 'CPU'
 
+    return [device, device_name]
+
+def predict_gender(image_path: str):
+    # Constants
+    imsize = 128
+    classes = ('Female', 'Male')
+    model_name = 'resnetModel_128_epoch_2.pt'
+
+    # Set Backend
+    device, device_name = get_backend()
+
     # Init model
     resnet = resnetModel_128().to(device)
     resnet.load_state_dict(torch.load(model_name, map_location=device))