Merge pull request #35 from andreped/gui

Improved UI; Moved CSS to its own file
raidionics · Oct 31, 2023 · 1376c66 · 1376c66
2 parents 805a691 + 7c7ec80
commit 1376c66
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 28 deletions.
diff --git a/demo/src/css_style.py b/demo/src/css_style.py
@@ -0,0 +1,27 @@
+css = """
+#model-3d {
+height: 512px;
+}
+#model-2d {
+height: 512px;
+margin: auto;
+}
+#upload {
+height: 110px;
+}
+#run-button {
+height: 110px;
+width: 150px;
+}
+#toggle-button {
+height: 47px;
+width: 150px;
+}
+#logs-button {
+height: 47px;
+width: 150px;
+}
+#logs {
+height: auto
+}
+"""
diff --git a/demo/src/gui.py b/demo/src/gui.py
@@ -2,6 +2,7 @@
 
 import gradio as gr
 
+from .css_style import css
 from .inference import run_model
 from .logger import flush_logs
 from .logger import read_logs
@@ -107,34 +108,39 @@ def toggle_sidebar(self, state):
         return gr.update(visible=state), state
 
     def run(self):
-        css = """
-        #model-3d {
-        height: 512px;
-        }
-        #model-2d {
-        height: 512px;
-        margin: auto;
-        }
-        #upload {
-        height: 160px;
-        }
-        """
         with gr.Blocks(css=css) as demo:
             with gr.Row():
                 with gr.Column(visible=True, scale=0.2) as sidebar_left:
                     # gr.Markdown("SideBar Left")
                     logs = gr.Textbox(
+                        placeholder="\n" * 16,
                         label="Logs",
                         info="Verbose from inference will be displayed below.",
-                        max_lines=16,
+                        lines=38,
+                        max_lines=38,
                         autoscroll=True,
                         elem_id="logs",
                         show_copy_button=True,
+                        scroll_to_output=False,
+                        container=True,
                     )
                     demo.load(read_logs, None, logs, every=1)
 
                 with gr.Column():
                     with gr.Row():
+                        with gr.Column(scale=0.2, min_width=150):
+                            sidebar_state = gr.State(True)
+
+                            btn_toggle_sidebar = gr.Button("Toggle Sidebar", elem_id="toggle-button")
+                            btn_toggle_sidebar.click(
+                                self.toggle_sidebar,
+                                [sidebar_state],
+                                [sidebar_left, sidebar_state],
+                            )
+
+                            btn_clear_logs = gr.Button("Clear logs", elem_id="logs-button")
+                            btn_clear_logs.click(flush_logs, [], [])
+
                         file_output = gr.File(
                             file_count="single", elem_id="upload"
                         )
@@ -155,28 +161,16 @@ def run(self):
                             outputs=None,
                         )
 
-                        with gr.Column():
-                            run_btn = gr.Button("Run analysis").style(
-                                full_width=False, size="lg"
+                        with gr.Column(scale=0.2, min_width=150):
+                            run_btn = gr.Button("Run analysis", variant="primary", elem_id="run-button").style(
+                                full_width=False, size="lg",
                             )
                             run_btn.click(
                                 fn=lambda x: self.process(x),
                                 inputs=file_output,
                                 outputs=self.volume_renderer,
                             )
 
-                            sidebar_state = gr.State(True)
-
-                            btn_toggle_sidebar = gr.Button("Toggle Sidebar")
-                            btn_toggle_sidebar.click(
-                                self.toggle_sidebar,
-                                [sidebar_state],
-                                [sidebar_left, sidebar_state],
-                            )
-
-                            btn_clear_logs = gr.Button("Clear logs")
-                            btn_clear_logs.click(flush_logs, [], [])
-
                     with gr.Row():
                         gr.Examples(
                             examples=[