Change UI

main.py

@@ -5,30 +5,29 @@ import gradio as gr
 import spaces
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
+CSS = """
+.m3d-auto-scroll > * {
+    overflow: auto;
+}
+
+#reasoning {
+    overflow: auto;
+    height: calc(100vh - 128px);
+    scroll-behavior: smooth;
+}
+"""
+
 JS = """
 () => {
     // auto scroll .auto-scroll elements when text has changed
+    const block = document.querySelector('#reasoning');
     const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            // find the parent element with .auto-scroll class and having the "overflow"
-            // style attribute to "auto"
-            let element = mutation.target;
-            while(element.parentElement !== null && element.parentElement.style.overflow !== "auto") {
-                element = element.parentElement;
-            }
-            if (element.parentElement === null) {
-                return;
-            }
-            element = element.parentElement;
-            element.scrollTop = element.scrollHeight;
-        });
+        block.scrollTop = block.scrollHeight;
     })
-    document.querySelectorAll('.auto-scroll > *').forEach((elem) => {
-        console.log("observing", elem)
-        observer.observe(elem, {
+    observer.observe(block, {
             childList: true,
             characterData: true,
-        })
+            subtree: true,
     });
 }
 """
@@ -121,17 +120,23 @@ chat_bot = gr.Chatbot(
 )
 
 
-with gr.Blocks(js=JS, fill_height=True, title="Reasoning model example") as demo:
+with gr.Blocks(
+    theme="davehornik/Tealy",
+    js=JS,
+    css=CSS,
+    fill_height=True,
+    title="Reasoning model example",
+) as demo:
     reasoning = gr.Markdown(
         "# Reasoning\n\nWhen the model will reasoning, its thoughts will be displayed here.",
         label="Reasoning",
         show_label=True,
         container=True,
-        elem_classes="auto-scroll",
+        elem_classes="m3d-auto-scroll",
         render=False,
     )
-    with gr.Row(equal_height=True, height="90vh"):
-        with gr.Column(scale=3):
+    with gr.Row(equal_height=True, variant="panel"):
+        with gr.Column(scale=3, variant="compact"):
             gr.ChatInterface(
                 chat,
                 type="messages",
@@ -148,19 +153,8 @@ with gr.Blocks(js=JS, fill_height=True, title="Reasoning model example") as demo
                 additional_outputs=[reasoning],
             )
 
-        with gr.Column(variant="compact", scale=1):
+        with gr.Column(variant="compact", elem_id="reasoning"):
             reasoning.render()
-            gr.Markdown(
-                "\n\n"
-                "Note that we are deliberately using a small model with 1.5B parameters. "
-                "In spite of this, the model's reasoning capability offers highly relevant "
-                "answer generation. This interface can run on a personal computer if you have 6GB of GPU memory."
-                "\n\n"
-                "See [The model page](https://huggingface.co/deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B) "
-                "for more information.",
-                container=True,
-                max_height="20%",
-            )
 
 
 if __name__ == "__main__":