position sticky

llama_lora/ui/inference_ui.py

@@ -285,22 +285,23 @@ def inference_ui():
                         stop_btn = gr.Button(
                             "Stop", variant="stop", label="Stop Iterating", elem_id="inference_stop_btn")
 
-            with gr.Column():
-                inference_output = gr.Textbox(
-                    lines=12, label="Output", elem_id="inference_output")
-                inference_output.style(show_copy_button=True)
-                with gr.Accordion(
-                        "Raw Output",
-                        open=not default_show_raw,
-                        visible=default_show_raw,
-                        elem_id="inference_inference_raw_output_accordion"
-                ) as raw_output_group:
-                    inference_raw_output = gr.Code(
-                        label="Raw Output",
-                        show_label=False,
-                        language="json",
-                        interactive=False,
-                        elem_id="inference_raw_output")
+            with gr.Column(elem_id="inference_output_group_container"):
+                with gr.Column(elem_id="inference_output_group"):
+                    inference_output = gr.Textbox(
+                        lines=12, label="Output", elem_id="inference_output")
+                    inference_output.style(show_copy_button=True)
+                    with gr.Accordion(
+                            "Raw Output",
+                            open=not default_show_raw,
+                            visible=default_show_raw,
+                            elem_id="inference_inference_raw_output_accordion"
+                    ) as raw_output_group:
+                        inference_raw_output = gr.Code(
+                            label="Raw Output",
+                            show_label=False,
+                            language="json",
+                            interactive=False,
+                            elem_id="inference_raw_output")
 
         show_raw.change(
             fn=lambda show_raw: gr.Accordion.update(visible=show_raw),

llama_lora/ui/main_page.py

@@ -77,6 +77,12 @@ def get_page_title():
 
 def main_page_custom_css():
     css = """
+    /* to make position stick work */
+    .gradio-container {
+        overflow-x: initial !important;
+        overflow-y: clip !important;
+    }
+
     .app_title_text {
         display: inline-block;
         margin-right: 0.5em !important;
@@ -177,6 +183,17 @@ def main_page_custom_css():
         pointer-events: none;
     }
 
+    /* position sticky */
+    #inference_output_group_container {
+        display: block;
+    }
+    #inference_output_group {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 16px;
+        bottom: 16px;
+    }
+
     #dataset_plain_text_input_variables_separator textarea,
     #dataset_plain_text_input_and_output_separator textarea,
     #dataset_plain_text_data_separator textarea {