Add tab navigation

app.py

@@ -1,14 +1,3 @@
-# import detectron2
-# import torch
-#
-# # Check this in logs
-# try:
-#     print(f"Is CUDA available: {torch.cuda.is_available()}")
-#     # True
-#     print(f"CUDA device: {torch.cuda.get_device_name(torch.cuda.current_device())}")
-# except:
-#     print('Couldnt find CUDA device')
-
 import base64
 import tempfile
 from pathlib import Path
@@ -28,8 +17,13 @@ from python_utils import load_model, apply_nms, OPTIMAL_NMS_THRESHOLD, MODEL_VER
 app_dir = Path(__file__).parent
 
 protocol_url = 'https://pgomba.github.io/orchid_protocol/'
-acknowledgement_text = "The OrchAId TZ viability dataset used to develop the model was created by the Royal Botanic Gardens, Kew, Silo National des Graines Forestieres, Madagascar, the Ministry of Agriculture, Lands, Housing and Environment, Monsterrat, Instituto de Investigação Agrária de Moçambique, Mozambique, Departmento de Recursos Naturales y Ambientales, Puerto Rico & the National Parks Trust of the Virgin Islands."
-
+acknowledgement_text = ("The OrchAId TZ viability dataset used to develop the model was created by the Royal Botanic Gardens, Kew, Silo National des "
+                        "Graines Forestieres, Madagascar, the Ministry of Agriculture, Lands, Housing and Environment, Monsterrat, "
+                        "Instituto de Investigação Agrária de Moçambique, Mozambique, Departmento de Recursos Naturales y Ambientales, "
+                        "Puerto Rico & the National Parks Trust of the Virgin Islands.")
+disclaimer_text = ('Disclaimer: the evaluation of the model applies to our dataset and there are many factors that may influence performance of the '
+                   'model on new images.'
+                   ' We recommend visually inspecting at least a few images to ensure the model is performing as expected on your batch of images.')
 # Load the prediction model
 predictor = load_model()
 main_app = ui.page_fluid(
@@ -41,7 +35,8 @@ main_app = ui.page_fluid(
                               multiple=True,
                               accept=[".png", ".jpg", ".jpeg"]),
 
-                ui.input_slider("threshold", f"Threshold for Discarding Overlapping Segmentations (Default: {OPTIMAL_NMS_THRESHOLD})", 0, 1.0,
+                ui.input_slider("threshold", f"Threshold for Discarding Overlapping Segmentations (Default: {OPTIMAL_NMS_THRESHOLD})",
+                                0, 1.0,
                                 OPTIMAL_NMS_THRESHOLD),
 
                 ui.tags.style(""" 
@@ -115,51 +110,70 @@ app_ui = ui.page_fluid(
         ),
         class_="nav-bar"
     ),
-
-    ui.div(
-        ui.h4("Model Overview"),
-        ui.p(
-            "This app uses a computer vision model trained to analyse images of orchid tetrazolium chloride tests to count the number of viable, non-viable and empty seeds."
-            " Full details of the model, training process and evaluation can be found on the project ",
-            ui.a("GitHub repository", href=github_repo_url, target="_blank"),
-            "."),
-
-        ui.h5('Performance'),
-        ui.p('To briefly summarise model performance on our test dataset, '),
-        ui.p('Disclaimer: the evaluation of the model applies to our dataset and there are many factors that may influence performance of the model on new images.'
-            ' We recommend visually inspecting at least a few images to ensure the model is performing as expected on your batch of images.'),
-        ui.h4("Using this App"),
-        ui.p(
-            "This app is built for use with ", ui.HTML("<b>specific types of images</b>"),
-            " -- 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."),
-        ui.p(
-            "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."),
-
-        ui.p(
-            f"Before analysing images it is possible to change the threshold used to discard overlapping segmentations produced by the model. The default threshold is {OPTIMAL_NMS_THRESHOLD} as this was found to be optimal for our data, but you can adjust this value in the slider."
-            f" We recommend leaving this as the default, and only decreasing the value if you find that your images have many overlapping seeds and some of them are not being included in the output. Similarly, you can increase this value if your images have very few overlapping seeds and the output includes multiple segmentations of the same seed."),
-        ui.p(" If you have any feedback on the app, please start a discussion on the project ",
-             ui.a("HuggingFace space", href=discussion_url, target="_blank"), '.'
-             ),
-
-        class_="body-bar"
+    ui.navset_tab(
+        ui.nav_panel('App', main_app
+                     ),
+        ui.nav_panel('Instructions', ui.div(
+            ui.h4("Using this App"),
+            ui.p(
+                "This app uses a computer vision model trained to analyse images of orchid tetrazolium chloride tests to count the number of "
+                "viable, non-viable and empty orchid seeds. ",
+                disclaimer_text),
+            ui.p(
+                "The app is built for use with ", ui.HTML("<b>specific types of images</b>"),
+                " -- 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."),
+            ui.p(
+                "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 "
+                "table with the filename of each image and the counts of viable, non-viable and empty seeds."),
+
+            ui.p(
+                f"Before analysing images it is possible to change the threshold used to discard overlapping segmentations produced by the model. "
+                f"The default threshold is {OPTIMAL_NMS_THRESHOLD} as this was found to be optimal for our data, but you can adjust this value in "
+                f"the slider."
+                f" We recommend leaving this as the default, and only decreasing the value if you find that your images have many overlapping seeds "
+                f"and some of them are not being included in the output. Similarly, you can increase this value if your images have very few "
+                f"overlapping seeds and the output includes multiple segmentations of the same seed."),
+            ui.p(" If you have any feedback on the app, please start a discussion on the project ",
+                 ui.a("HuggingFace Space", href=discussion_url, target="_blank"), '.'
+                 ),
+
+            class_="body-bar"
+
+        )),
+        ui.nav_panel('Model Overview',
+                     ui.div(
+                         ui.p(
+                             "We developed "
+
+                             "You can find a project overview ", ui.a("here",
+                                                                      href='https://www.kew.org/science/our-science/projects/machine-learning-to-improve-orchid-viability-testing',
+                                                                      target="_blank"),'.'
+                             " Full details of the model, training process and evaluation can be found on the project ",
+                             ui.a("GitHub repository", href=github_repo_url, target="_blank"),
+                             "."),
+
+                         ui.h5('Data Summary'),
+                            ui.p('Note that the upper limit for the number of detected seeds in a single image is 800.'),
+                         ui.h5('Performance'),
+                         ui.p('To briefly summarise model performance on our test dataset, '),
+                         ui.p(disclaimer_text
+                         ),
+                         class_="body-bar"))
+        , id='tab'
     ),
-    main_app,
-    # ui.page_navbar(
-    #     ui.nav_panel("A", main_app),
-    #     ui.nav_panel("C", "Page C content"),
-    #     title="App with navbar",
-    #     id="page",
-    # ),
     ui.div(
         ui.h4("Acknowledgements"),
         ui.p(
             acknowledgement_text
-        ),
+        ), ui.p(
+            "The developers acknowledge Research Computing at the James Hutton Institute for providing computational resources and technical "
+            "support for the 'UK’s Crop Diversity Bioinformatics HPC' (BBSRC grants BB/S019669/1 and BB/X019683/1), use of which has contributed to "
+            "the development of the model used in this app."),
         class_="acknowledgement-bar"
     ),
     ui.div(