feat: colored sections

.gitignore

@@ -5,6 +5,9 @@ __pycache__/
 *.py[cod]
 *$py.class
 
+#Data 
+test/data/**
+
 # C extensions
 *.so
 

app/dead.py

@@ -3,7 +3,7 @@ from top_section import create_top_section, create_dropdown
 
 
 def show_section_dead(visible):
-    with gr.Column(visible=visible) as section_dead:
+    with gr.Column(visible=visible, elem_id="dead") as section_dead:
         gr.Markdown("# Dead Animal")
         gr.Markdown("Please describe the cause of death")
         

app/main.py

@@ -19,7 +19,7 @@ with gr.Blocks(theme=theme, css=css) as demo:
     # Camera
     with gr.Row():
         with gr.Column(scale=1):
-            camera = gr.Image()
+            camera = gr.Image(elem_id="image")
             
     # ---------------------------------------------------------
     # Location
@@ -31,8 +31,7 @@ with gr.Blocks(theme=theme, css=css) as demo:
                                             label="Identified GPS Location")
             with gr.Row():
                 #to clear it
-                clear_location = gr.ClearButton(components=[location], visible=True, interactive=True, 
-                                                #elem_classes=["custom-button"]
+                clear_location = gr.ClearButton(components=[location], visible=True, interactive=True
                                                 )
                 clear_location.click()
                 #to submit it
@@ -44,10 +43,10 @@ with gr.Blocks(theme=theme, css=css) as demo:
     # Dead and Wounded Buttons
     with gr.Row() as block_form:
         with gr.Column(scale=1):
-            butt_dead = gr.Button("Dead")
+            butt_dead = gr.Button("Dead", elem_id="dead")
 
         with gr.Column(scale=1):
-            butt_wounded = gr.Button("Wounded")
+            butt_wounded = gr.Button("Wounded", elem_id="wounded")
 
     # ---------------------------------------------------------
     # Initiate sections
@@ -101,8 +100,8 @@ with gr.Blocks(theme=theme, css=css) as demo:
     # ---------------------------------------------------------
     #Submit Button
     with gr.Column(scale=1):
-        subbutt = gr.Button("Submit")
-        output_message = gr.Markdown("Thank you, you didn't save this one but you could save the next")
+        subbutt = gr.Button("Submit", elem_id="submit")
+        output_message = gr.Markdown("Thank you, you are a champion of biodiversity conservation !")
 
     
 

app/theme.py

@@ -2,9 +2,14 @@ import gradio as gr
 
 css = """
 .gradio-container {background: url(https://openclipart.org/image/2000px/279687)}
-#warning {background-color: #FFCCCB}
-.feedback textarea {font-size: 24px !important}
+#image {background-color: #73b9ae}
+#dead {background-color: #13422f}
+#wounded {background-color: #2d5543}
+#buttons-conditions {background-color: #5f7d6e}
+#dropdown-conditions {background-color: #92a69c}
+#submit {background-color: #333333}
 """
 
+
 theme = gr.themes.Soft(primary_hue="teal", secondary_hue="teal", neutral_hue="emerald",
                          font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])

app/top_section.py

@@ -7,28 +7,27 @@ def create_top_section(visible):
     with gr.Row() as image_row:
             with gr.Column(scale=1, min_width="50px"):
                 img1 = gr.Image(value=PATH + '/assets/logos/van.png', show_download_button=False, show_label=False, height="150px")
-                button_collision = gr.Button("Collision with a means of transport", visible=visible, elem_id="warning", elem_classes=".feedback")
+                button_collision = gr.Button("Collision with a means of transport", visible=visible, elem_id="buttons-conditions")
                 
             with gr.Column(scale=1, min_width="50px"):
                 img2 = gr.Image(value=PATH + '/assets/logos/destruction.png', show_download_button=False, show_label=False, height="150px")
-                button_deliberate_destruction = gr.Button("Destruction / Deliberatly removed", visible=visible)
+                button_deliberate_destruction = gr.Button("Destruction / Deliberatly removed", visible=visible, elem_id="buttons-conditions")
  
             with gr.Column(scale=1, min_width="50px"):
                 img3 = gr.Image(value=PATH + '/assets/logos/indirect.png', show_download_button=False, show_label=False, height="150px")
-                button_indirect_destruction = gr.Button("Indirect destruction", visible=visible)
+                button_indirect_destruction = gr.Button("Indirect destruction", visible=visible, elem_id="buttons-conditions")
 
             with gr.Column(scale=1, min_width="50px"):
                 img4 = gr.Image(value=PATH + '/assets/logos/natural.png', show_download_button=False, show_label=False, height="150px")
-                button_natural_cause = gr.Button("Natural cause", visible=visible)
+                button_natural_cause = gr.Button("Natural cause", visible=visible, elem_id="buttons-conditions")
     return image_row, button_collision, button_deliberate_destruction, button_indirect_destruction, button_natural_cause
 
 def create_dropdown(visible):
-    print(visible)
     with gr.Row() as dropdown_row:
-        dropdown = gr.Dropdown(choices=[], label="Dropdown", interactive=True, visible=visible)
-    openfield_level2 = gr.Textbox(visible=False)
-    dropdown_level2 = gr.Dropdown(choices=[], visible=False)
-    dropdown_extra_level2 = gr.Dropdown(choices=[], visible=False)
+        dropdown = gr.Dropdown(choices=[], interactive=True, visible=visible, elem_id="dropdown-conditions")
+    openfield_level2 = gr.Textbox(visible=False, elem_id="dropdown-conditions")
+    dropdown_level2 = gr.Dropdown(choices=[], visible=False, elem_id="dropdown-conditions")
+    dropdown_extra_level2 = gr.Dropdown(choices=[], visible=False, elem_id="dropdown-conditions")
     return dropdown_row, dropdown, dropdown_level2, openfield_level2, dropdown_extra_level2
 
 

app/wounded.py

@@ -3,7 +3,7 @@ from top_section import create_top_section, create_dropdown
 
 def show_section_wounded(visible):
     #with gr.Tab("Wounded Information"):
-    with gr.Column(visible=visible) as wounded_section:
+    with gr.Column(visible=visible, elem_id="wounded") as wounded_section:
         gr.Markdown("# Wounded Animal")
         gr.Markdown("Please describe the wound's cause.")