From 1b2ea5d3857109ef4e425120cc2c8988e0182fb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Pedersen?= <andrped94@gmail.com>
Date: Tue, 31 Oct 2023 12:33:57 +0100
Subject: [PATCH 1/2] Moved CSS to its own file

---
 demo/src/css_style.py | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 demo/src/css_style.py

diff --git a/demo/src/css_style.py b/demo/src/css_style.py
new file mode 100644
index 0000000..e21cbd1
--- /dev/null
+++ 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
+}
+"""
\ No newline at end of file

From 7c7ec808742bb5d78dcecf651e1d0985a3e7f35a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Pedersen?= <andrped94@gmail.com>
Date: Tue, 31 Oct 2023 12:34:09 +0100
Subject: [PATCH 2/2] Improved UI

---
 demo/src/gui.py | 50 ++++++++++++++++++++++---------------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/demo/src/gui.py b/demo/src/gui.py
index b4c1dcd..d653c8e 100644
--- 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,9 +161,9 @@ 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),
@@ -165,18 +171,6 @@ def run(self):
                                 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=[