From 1c77fdca4cdfca5c636595a8aaaff3281b859d3a Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Sun, 26 Mar 2023 22:20:30 -0300
Subject: [PATCH] Change notebook mode appearance

---
 css/chat.css          |  6 ++++++
 css/main.css          | 10 ++++++++++
 css/main.js           |  2 +-
 modules/extensions.py |  4 ++--
 server.py             | 25 ++++++++++++++-----------
 5 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/css/chat.css b/css/chat.css
index 8d9d88a6..1e703530 100644
--- a/css/chat.css
+++ b/css/chat.css
@@ -23,3 +23,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 .pending.svelte-1ed2p3z {
     opacity: 1;
 }
+
+#extensions {
+  padding: 0;
+  padding: 0;
+}
+
diff --git a/css/main.css b/css/main.css
index 09f3b6a8..97879f01 100644
--- a/css/main.css
+++ b/css/main.css
@@ -54,3 +54,13 @@ ol li p, ul li p {
 .gradio-container-3-18-0 .prose * h1, h2, h3, h4 {
   color: white;
 }
+
+.gradio-container {
+  max-width: 100% !important;
+  padding-top: 0 !important;
+}
+
+#extensions {
+  padding: 15px;
+  padding: 15px;
+}
diff --git a/css/main.js b/css/main.js
index 9db3fe8b..029ecb62 100644
--- a/css/main.js
+++ b/css/main.js
@@ -11,7 +11,7 @@ let extensions = document.getElementById('extensions');
 main_parent.addEventListener('click', function(e) {
     // Check if the main element is visible
     if (main.offsetHeight > 0 && main.offsetWidth > 0) {
-        extensions.style.display = 'block';
+        extensions.style.display = 'flex';
     } else {
         extensions.style.display = 'none';
     }
diff --git a/modules/extensions.py b/modules/extensions.py
index c55dc978..c3cf4de4 100644
--- a/modules/extensions.py
+++ b/modules/extensions.py
@@ -63,8 +63,8 @@ def create_extensions_block():
 
     # Creating the extension ui elements
     if should_display_ui:
-        with gr.Box(elem_id="extensions"):
-            gr.Markdown("Extensions")
+        with gr.Column(elem_id="extensions"):
             for extension, name in iterator():
+                gr.Markdown(f"\n### {name}")
                 if hasattr(extension, "ui"):
                     extension.ui()
diff --git a/server.py b/server.py
index f1b95a5b..56bb499d 100644
--- a/server.py
+++ b/server.py
@@ -369,19 +369,22 @@ def create_interface():
 
         elif shared.args.notebook:
             with gr.Tab("Text generation", elem_id="main"):
-                with gr.Tab('Raw'):
-                    shared.gradio['textbox'] = gr.Textbox(value=default_text, lines=25)
-                with gr.Tab('Markdown'):
-                    shared.gradio['markdown'] = gr.Markdown()
-                with gr.Tab('HTML'):
-                    shared.gradio['html'] = gr.HTML()
-
                 with gr.Row():
-                    shared.gradio['Stop'] = gr.Button('Stop')
-                    shared.gradio['Generate'] = gr.Button('Generate')
-                shared.gradio['max_new_tokens'] = gr.Slider(minimum=shared.settings['max_new_tokens_min'], maximum=shared.settings['max_new_tokens_max'], step=1, label='max_new_tokens', value=shared.settings['max_new_tokens'])
+                    with gr.Column(scale=4):
+                        with gr.Tab('Raw'):
+                            shared.gradio['textbox'] = gr.Textbox(value=default_text, elem_id="textbox", lines=25)
+                        with gr.Tab('Markdown'):
+                            shared.gradio['markdown'] = gr.Markdown()
+                        with gr.Tab('HTML'):
+                            shared.gradio['html'] = gr.HTML()
 
-                create_model_and_preset_menus()
+                        with gr.Row():
+                            shared.gradio['Stop'] = gr.Button('Stop')
+                            shared.gradio['Generate'] = gr.Button('Generate')
+                    with gr.Column(scale=1):
+                        shared.gradio['max_new_tokens'] = gr.Slider(minimum=shared.settings['max_new_tokens_min'], maximum=shared.settings['max_new_tokens_max'], step=1, label='max_new_tokens', value=shared.settings['max_new_tokens'])
+
+                        create_model_and_preset_menus()
             with gr.Tab("Parameters", elem_id="parameters"):
                 create_settings_menus(default_preset)