implementing_feedback (#3)

- Add legend for image colours. (8ab132714ce8220cec09e2161b2c083d226eecbd)

app.py

@@ -154,7 +154,7 @@ app_ui = ui.page_fluid(
                 ui.a("GitHub", href=protocol_url, target="_blank", **{'aria-label': 'Image taking protocols'}),
                 ". The protocol will shortly be available in English, Indonesian, Thai, French, Spanish, Portuguese, Arabic, Mandarin, Malagasy and Japanese."),
             ui.p(
-                "To use this app, upload images and click 'Analyse'."
+                "To use this app, upload images* and click 'Analyse'."
                 " Segmented images will be displayed in the right-hand panel, showing viable seeds in red, non-viable in yellow and empty in black."
                 " An opacity slider can be used to adjust the transparency of the segmentation masks."
                 " The counts will also be displayed as text and results can be downloaded using the 'Download Results' button, providing a data "
@@ -175,6 +175,7 @@ app_ui = ui.page_fluid(
                  ui.a("HuggingFace Space", href=discussion_url, target="_blank", **{'aria-label': 'Project discussion space'}), '.'
                  ),
             ui.p(disclaimer_text),
+            ui.p("* Images are stored temporarily on HuggingFace servers and deleted and the end of your session."),
 
             class_="body-bar"
 
@@ -370,9 +371,13 @@ def server(input, output, session: Session):
                 ui.div(
                     ui.h5(r['filename'], style="margin-top: 15px;"),
                     ui.div(
-                        ui.span(f"Viable = {r.get('viable', '? ')}", style="margin: 0 15px;"),
-                        ui.span(f"Non-Viable = {r.get('non-viable', '? ')}", style="margin: 0 15px;"),
-                        ui.span(f"Empty = {r.get('empty', '? ')}", style="margin: 0 15px;"),
+                        ui.span(f"Viable ",
+                                ui.HTML('(<span style="color: rgba(255,0,0,1); font-weight:bold;">&#9632</span>)'),
+                                f" = {r.get('viable', '? ')}", style="margin: 0 15px;"),
+                        ui.span(f"Non-Viable ", ui.HTML('(<span style="color: rgba(220,220,0,1); font-weight:bold">&#9632</span>)'),
+                                f" = {r.get('non-viable', '? ')}", style="margin: 0 15px;"),
+                        ui.span(f"Empty ", ui.HTML('(<span style="color: rgba(0,0,0,0.5); font-weight:bold">&#9632</span>)'),
+                                f" = {r.get('empty', '? ')}", style="margin: 0 15px;"),
                         ui.span(f"Total = {r.get('total', '? ')}", style="margin: 0 15px;"),
                         class_="results-text"
                     ),

styles.css

@@ -96,7 +96,7 @@ position: sticky;
 
 /* Upload button styling */
 .btn-file {
-    background-color: #357abd;
+    background-color: #2F6BA7;
     color: white !important;
     border-radius: 8px;
     padding: 10px 20px;
@@ -109,7 +109,7 @@ position: sticky;
 
 /* Analyze button styling */
 .btn-success {
-    background-color: #357abd !important;
+    background-color: #2F6BA7 !important;
     border: none;
     border-radius: 8px;
     padding: 12px 25px;