Improve footer styling

app.py

@@ -24,10 +24,10 @@ from detectron2.utils.visualizer import Visualizer, ColorMode
 from detectron2.data import Metadata
 
 from python_utils import load_model, apply_nms
+
 # Load data and compute static values
 app_dir = Path(__file__).parent
 
-
 # Load the prediction model
 predictor = load_model()
 app_ui = ui.page_fluid(
@@ -36,30 +36,30 @@ app_ui = ui.page_fluid(
     ui.div(
         ui.row(
             ui.column(6,
-                ui.panel_title(ui.div("Orchid TZ Viability Analyzer", class_="navbar-title"))
-            ),
+                      ui.panel_title(ui.div("Orchid TZ Viability Analyzer", class_="navbar-title"))
+                      ),
         ),
         class_="nav-bar"
     ),
 
     ui.div(
-            ui.p(
-                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut laoreet placerat, urna purus rhoncus nisi, vel facilisis magna sem sed tellus."
-            ),
-        class_="body-bar"
+        ui.p(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut laoreet placerat, urna purus rhoncus nisi, vel facilisis magna sem sed tellus."
         ),
+        class_="body-bar"
+    ),
 
     ui.div(
         ui.layout_sidebar(
             ui.sidebar(
                 ui.input_file("upload", "Upload Images",
-                             multiple=True,
-                             accept=[".png", ".jpg", ".jpeg"]),
+                              multiple=True,
+                              accept=[".png", ".jpg", ".jpeg"]),
                 ui.input_slider("threshold", "Threshold", 0, 1.0, 0.8),
                 ui.input_action_button("analyze", "Analyze", class_="btn-success"),
                 # ui.input_switch("mask", "Mask", False),
-                ui.column(4,ui.download_button("download", "Download Results", class_="btn-primary")),
-                width =300
+                ui.column(4, ui.download_button("download", "Download Results", class_="btn-primary")),
+                width=300
 
             ),
             ui.output_ui("results_container"),
@@ -69,12 +69,11 @@ app_ui = ui.page_fluid(
     ),
     ui.div(
         ui.layout_column_wrap(
-            ui.output_image("rbg_kew",  height='100px', fill=True),
-            ui.output_image("bloomberg",  height='100px', fill=True),
-            ui.output_image("brin",  height='100px', fill=True),
-            ui.output_image("abg",  height='100px', fill=True),
-        )
-        # class_="footer"
+            ui.output_image("rbg_kew", height='100%', fill=True),
+            ui.output_image("bloomberg", height='100%', fill=True),
+            ui.output_image("brin", height='100%', fill=True),
+            ui.output_image("abg", height='100%', fill=True),
+        ), class_="footer"
     )
 )
 
@@ -87,9 +86,9 @@ def plot_ui():
         opacity_slider
     )
 
+
 @module.server
 def plot_server(input, output, session, r):
-
     @render.plot
     def plot_prediction():
         plt.ioff()
@@ -105,20 +104,21 @@ def plot_server(input, output, session, r):
         colours = []
         for cls in r["instances"].pred_classes:
             if cls == 0:
-                colours.append([1,0,0])
+                colours.append([1, 0, 0])
             elif cls == 1:
-                colours.append([1,1,0])
+                colours.append([1, 1, 0])
             elif cls == 2:
-                colours.append([0,0,0])
+                colours.append([0, 0, 0])
 
-        out = v.overlay_instances(masks = r["instances"].pred_masks.to("cpu"),
-                                  assigned_colors = colours,
-                                  alpha = input.opacity_slider())
+        out = v.overlay_instances(masks=r["instances"].pred_masks.to("cpu"),
+                                  assigned_colors=colours,
+                                  alpha=input.opacity_slider())
 
         ax.imshow(cv2.cvtColor(out.get_image()[:, :, ::-1], cv2.COLOR_BGR2RGB))
         fig.canvas.draw()
         fig.canvas.flush_events()
 
+
 def server(input, output, session: Session):
     @render.image
     def rbg_kew():
@@ -140,7 +140,6 @@ def server(input, output, session: Session):
         img = {"src": "assets/abg.png"}
         return img
 
-
     analysis_results = reactive.Value([])
 
     @reactive.Effect
@@ -196,7 +195,6 @@ def server(input, output, session: Session):
 
         ui_output = []
         for idx, r in enumerate(results):
-
             plot_server(f"plot_{idx}", r=r)
 
             ui_output.append(
@@ -238,8 +236,6 @@ def server(input, output, session: Session):
 
 app = App(app_ui, server)
 
-
-
 # --------------------------------------------------------
 # Reactive calculations and effects
 # --------------------------------------------------------

styles.css

@@ -38,6 +38,11 @@ body {
     text-align: left;
 }
 
+.footer {
+    border-top: 2px solid #ddd;
+    background: white;
+}
+
 /* Sidebar styling */
 .card.shiny-input-container {
     background-color: #ffffff;
@@ -98,7 +103,7 @@ img {
     max-height: 300px;
     width: 100%;
     margin: 10px 0;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);*/
 }
 
 /* Results text styling */