Add example logo and make fixes for tabbing accesibility

app.py

@@ -29,27 +29,11 @@ from python_utils import load_model, apply_nms
 app_dir = Path(__file__).parent
 
 protocol_url = 'https://pgomba.github.io/orchid_protocol/'
+discussion_url = 'https://huggingface.co/spaces/TZProject/TZSeedApp/discussions'
 
 # Load the prediction model
 predictor = load_model()
 main_app = ui.page_fluid(
-    ui.div(
-        ui.row(
-            ui.column(6,
-                      ui.panel_title(ui.div("Orchid TZ Viability Analyzer", class_="navbar-title"))
-                      ),
-        ),
-        class_="nav-bar"
-    ),
-
-    ui.div(
-        ui.p(
-            "The protocol is here:", ui.a("Image Taking Protocol", href=protocol_url, target="_blank"), " "
-            "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(
@@ -57,9 +41,12 @@ main_app = ui.page_fluid(
                 ui.input_file("upload", "Upload Images",
                               multiple=True,
                               accept=[".png", ".jpg", ".jpeg"]),
+
                 ui.input_slider("threshold", "Threshold for Discarding Overlapping Segmentations"
                                              " (ADD a more descriptive label, and explain in text above).", 0, 1.0, 0.8),
-                ui.tags.style("""
+
+
+                ui.tags.style(""" 
                     .irs.irs--shiny .irs-single { /* square with number */
                         background-color: #357abd;
                         font-size: 1rem;
@@ -77,10 +64,37 @@ main_app = ui.page_fluid(
                     .irs-handle.single { /* circle */
                         background-color: #357abd;
                     }
-
-                    """
+                    .irs-handle.single:hover { /* circle */
+                        background-color: #2c3e50;
+                    }
+                    
+                    # .irs-handle.single:focus { /* circle */
+                    #     outline: 5px solid #ffab00 !important;       /* Highly visible gold/orange outline */
+                    #     outline-offset: 0px;
+                    #     box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);   /* Soft glow for extra contrast */
+                    #     z-index: 2;
+                    #     transition: outline-color 0.2s, box-shadow 0.2s;
+                    # }
+                    # 
+                    # .irs-handle.single:focus-visible { /* circle */
+                    #     outline: 5px solid #ffab00 !important;       /* Highly visible gold/orange outline */
+                    #     outline-offset: 0px;
+                    #     box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);   /* Soft glow for extra contrast */
+                    #     z-index: 2;
+                    #     transition: outline-color 0.2s, box-shadow 0.2s;
+                    # }
+                    # 
+                    # .irs-handle.single:focus-within { /* circle */
+                    #     outline: 5px solid #ffab00 !important;       /* Highly visible gold/orange outline */
+                    #     outline-offset: 0px;
+                    #     box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);   /* Soft glow for extra contrast */
+                    #     z-index: 2;
+                    #     transition: outline-color 0.2s, box-shadow 0.2s;
+                    # }
+
+                    """  # Style need adding here for slider for some reason
                               ),
-                ui.input_action_button("analyze", "Analyze", class_="btn-success"),
+                ui.input_action_button("analyse", "Analyse", class_="btn-success"),
                 # ui.input_switch("mask", "Mask", False),
                 ui.column(4, ui.download_button("download", "Download Results", class_="btn-success")),
                 width=300
@@ -95,6 +109,26 @@ main_app = ui.page_fluid(
 
 app_ui = ui.page_fluid(
     ui.include_css("styles.css"),
+    ui.div(
+        ui.row(
+            ui.column(5,
+                      ui.panel_title(ui.div("OrchAid", ui.output_image("logo_image", inline=True, width='100px'), class_="navbar-title"))
+                      )
+        ),
+        class_="nav-bar"
+    ),
+
+    ui.div(
+        ui.p(
+            "The protocol for taking images compatible with this model is available on ",
+            ui.a("GitHub", href=protocol_url, target="_blank"),
+            ". The protocol is available in English, Indonesian, Thai, French, Spanish, Portuguese, Arabic, Mandarin, Malagasy and Japanese.",
+            " If you have any feedback on the app, please start a discussion on ", ui.a("the HuggingFace space", href=protocol_url, target="_blank"),
+            ". 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"
+    ),
     main_app,
     # ui.page_navbar(
     #     ui.nav_panel("A", main_app),
@@ -176,10 +210,15 @@ def server(input, output, session: Session):
         img = {"src": "assets/abg.png"}
         return img
 
+    @render.image
+    def logo_image():
+        img = {"src": "assets/example_logo.png", "height": "100px", "width": "100px"}
+        return img
+
     analysis_results = reactive.Value([])
 
     @reactive.Effect
-    @reactive.event(input.analyze)
+    @reactive.event(input.analyse)
     async def process_images():
         files = input.upload()
         if not files:
@@ -226,7 +265,7 @@ def server(input, output, session: Session):
     def results_container():
         results = analysis_results.get()
         if not results:
-            return ui.div("No results yet. Upload images and click 'Analyze'.",
+            return ui.div("No results yet. Upload images and click 'Analyse'.",
                           class_="text-muted")
 
         ui_output = []

styles.css

@@ -5,8 +5,8 @@ body {
     background-color: white;
     font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 }
-/* Image display styling */
-img {
+/* Image display styling for footer images */
+.footer img {
     border-radius: 10px;
     object-fit: cover;
     max-height: 300px;
@@ -98,6 +98,9 @@ position: sticky;
     background-color: #2c3e50 !important;
 }
 
+
+
+
 /* Image cards styling */
 .card {
     background: white;
@@ -123,6 +126,56 @@ position: sticky;
     border-left: 4px solid #4a90e2;
 }
 
+/* Focus styling */
+/* High contrast focus ring for buttons */
+button:focus,
+.btn:focus,
+.btn-default:focus,
+.btn-file:focus,
+.form-control:focus,
+.irs-line:focus,
+.btn-success:focus,
+input[type="button"]:focus,
+input[type="submit"]:focus {
+    outline: 5px solid #ffab00 !important;       /* Highly visible gold/orange outline */
+    outline-offset: 1px;
+    box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);   /* Soft glow for extra contrast */
+    z-index: 2;
+    transition: outline-color 0.2s, box-shadow 0.2s;
+}
+
+/* Optionally, use :focus-visible for modern browsers only */
+button:focus-visible,
+.btn:focus-visible,
+.btn-default:focus-visible,
+.btn-file:focus-visible,
+.btn-success:focus-visible,
+.form-control:focus-visible,
+.irs-line:focus-visible,
+input[type="button"]:focus-visible,
+input[type="submit"]:focus-visible {
+    outline: 5px solid #ffab00 !important;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);
+    z-index: 2;
+}
+
+button:focus-within,
+.btn:focus-within,
+.btn-default:focus-within,
+.btn-file:focus-within,
+.btn-success:focus-within,
+.form-control:focus-within,
+.irs-line:focus-within,
+input[type="button"]:focus-within,
+input[type="submit"]:focus-within {
+    outline: 5px solid #ffab00 !important;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 6px rgba(255, 171, 0, 0.25);
+    z-index: 2;
+}
+
+
 /* Responsive design */
 @media (max-width: 768px) {
     .col-md-4 {