Merge pull request #7 from sdsc-ordes/chore-aesthetics

.gitignore

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

app/dead.py

@@ -2,8 +2,9 @@ import gradio as gr
 from top_section import create_top_section, create_dropdown
 from followup_events import create_followup_section
 
+
 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

@@ -5,24 +5,25 @@ from wounded import show_section_wounded
 from dropdowns import *
 from maps import get_location
 from style import *
+from theme import theme, css
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme=theme, css=css) as demo:
     # ---------------------------------------------------------
     # Intro Text
     with gr.Row():
         with gr.Column(scale=1):
             title = gr.Markdown("# Welcome to Digiwild", label="Title")
-            description = gr.Markdown("Lorem ipsum", label="description")
+            description = gr.Markdown("Please record your wildlife observations here !", label="description")
 
     # ---------------------------------------------------------
     # Camera
     with gr.Row():
-        with gr.Column(scale=1):
-            camera = gr.Image()
+        #with gr.Column(scale=1):
+        camera = gr.Image(elem_id="image")
             
     # ---------------------------------------------------------
     # Location
-    with gr.Row():
+    #with gr.Row():
         with gr.Column(scale=1):
             location = gr.Textbox(visible=True, interactive=True, label="Location of Sighting")
             #display location processing
@@ -30,23 +31,20 @@ with gr.Blocks() 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, scale=1
                                                 )
                 clear_location.click()
                 #to submit it
-                submit_location = gr.Button("Submit", visible=True, interactive=True)
+                submit_location = gr.Button("Get GPS Coordinates", visible=True, interactive=True, scale=3)
                 submit_location.click(get_location, inputs=[location], outputs=[identified_location])
-            
 
     # ---------------------------------------------------------
     # Dead and Wounded Buttons
     with gr.Row() as block_form:
         with gr.Column(scale=1):
-            butt_dead = gr.Button("Dead")
-
+            butt_wounded = gr.Button("Wounded", elem_id="wounded")
         with gr.Column(scale=1):
-            butt_wounded = gr.Button("Wounded")
+            butt_dead = gr.Button("Dead", elem_id="dead")
 
     # ---------------------------------------------------------
     # Initiate sections
@@ -103,8 +101,8 @@ with gr.Blocks() 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 YOUR OBSERVATION TO ORNITHO", elem_id="submit")
+        output_message = gr.Markdown("Thank you, you are a champion of biodiversity conservation !")
 
     
 

app/theme.py

@@ -0,0 +1,17 @@
+import gradio as gr
+
+css = """
+.gradio-container {background: url(https://openclipart.org/image/2000px/279687)}
+#image {background-color: #73b9ae}
+#dead {background-color: #333333}
+#wounded {background-color: #5e0724}
+#buttons-conditions {background-color: #b3b3b3}
+#dropdown-conditions {background-color: #b3b3b3}
+#submit {background-color: #91ccb0}
+"""
+#wound old: #2d5543
+#submit:#13422f
+
+
+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,27 +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)
+                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):
     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=False, 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
 from followup_events import create_followup_section
 
 def show_section_wounded(visible):
-    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.")