.

app.py

@@ -138,39 +138,41 @@ def main(args):
             "summary_diff_history": []
         })
 
-        gr.Markdown("# Adaptive Summarization")
-        gr.Markdown("AdaptSum stands for Adaptive Summarization. This project focuses on developing an LLM-powered system for dynamic summarization. Instead of generating entirely new summaries with each update, the system intelligently identifies and modifies only the necessary parts of the existing summary. This approach aims to create a more efficient and fluid summarization process within a continuous chat interaction with an LLM.")
-
-        with gr.Accordion("Adaptive Summary"):
-            with gr.Row(elem_id="view-toggle-btn-container"):
-                view_toggle_btn = gr.Radio(
-                    choices=["Diff", "Markdown"],
-                    value="Markdown",
-                    interactive=True,
-                    elem_id="view-toggle-btn"
+        with gr.Column():
+            gr.Markdown("# Adaptive Summarization")
+            gr.Markdown("AdaptSum stands for Adaptive Summarization. This project focuses on developing an LLM-powered system for dynamic summarization. Instead of generating entirely new summaries with each update, the system intelligently identifies and modifies only the necessary parts of the existing summary. This approach aims to create a more efficient and fluid summarization process within a continuous chat interaction with an LLM.")
+
+        with gr.Column():
+            with gr.Accordion("Adaptively Summarized Conversation", elem_id="adaptive-summary-accordion", open=False):
+                with gr.Row(elem_id="view-toggle-btn-container"):
+                    view_toggle_btn = gr.Radio(
+                        choices=["Diff", "Markdown"],
+                        value="Markdown",
+                        interactive=True,
+                        elem_id="view-toggle-btn"
+                    )
+
+                summary_diff = gr.HighlightedText(
+                    label="Summary so far",
+                    combine_adjacent=True,
+                    show_legend=True,
+                    color_map={"+": "red", "-": "green"},
+                    elem_classes=["summary-window"],
+                    visible=False
                 )
 
-            summary_diff = gr.HighlightedText(
-                label="Summary so far",
-                combine_adjacent=True,
-                show_legend=True,
-                color_map={"+": "red", "-": "green"},
-                elem_classes=["summary-window"],
-                visible=False
-            )
-
-            summary_md = gr.Markdown(
-                label="Summary so far",
-                elem_classes=["summary-window"],
-                visible=True
-            )
+                summary_md = gr.Markdown(
+                    label="Summary so far",
+                    elem_classes=["summary-window"],
+                    visible=True
+                )
 
-            summary_num = gr.Slider(label="summary history", minimum=1, maximum=1, step=1, show_reset_button=False, visible=False)
+                summary_num = gr.Slider(label="summary history", minimum=1, maximum=1, step=1, show_reset_button=False, visible=False)
 
             view_toggle_btn.change(change_view_toggle, inputs=[view_toggle_btn], outputs=[summary_diff, summary_md])
             summary_num.release(navigate_to_summary, inputs=[summary_num, state], outputs=[summary_diff, summary_md])
         
-        with gr.Column("chat-window"):
+        with gr.Column("chat-window", elem_id="chat-window"):
             gr.ChatInterface(
                 multimodal=True,
                 type="messages", 

statics/styles.css

@@ -1,9 +1,14 @@
 .summary-window {
-    height: 400px !important;
-    border: solid 1px red !important;
+    height: 550px !important;
+    border: dashed 1px #e0e0e0 !important;
+    border-radius: 10px !important;
     padding: 4px;
 }
 
+.summary-window > label {
+    display: none !important;
+}
+
 #view-toggle-btn-container > div {
     border: none !important;
 }
@@ -17,6 +22,20 @@
     width: fit-content !important;
 }
 
+#adaptive-summary-accordion {
+    position: absolute !important;
+    z-index: 100 !important;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+#chat-window {
+    margin-top: 40px !important;
+}
+
+#chat-window > div > div:nth-child(1) {
+    height: 600px !important;
+}
+
 .textfield {
     line-height: 1.7 !important;
 }