WIP: self-adaption side blocks

ChuanhuChatbot.py

@@ -95,39 +95,38 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
             with gr.Row(elem_id="chuanhu-func-nav"):
                 gr.HTML(get_html("func_nav.html"))
 
-        with gr.Column(scale=5, elem_id="chatbot-area"):
-            with gr.Row():
-                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700)
-            with gr.Row():
-                with gr.Column(min_width=225, scale=12):
-                    user_input = gr.Textbox(
-                        elem_id="user-input-tb",
-                        show_label=False, placeholder=i18n("在这里输入"),
-                        container=False
-                    )
-                with gr.Column(min_width=42, scale=1):
-                    submitBtn = gr.Button(value="", variant="primary", elem_id="submit-btn")
-                    cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel-btn")
-            with gr.Row(elem_id="chatbot-buttons"):
-                with gr.Column(min_width=120, scale=1):
-                    emptyBtn = gr.Button(
-                        i18n("🧹 新的对话"), elem_id="empty-btn"
-                    )
-                with gr.Column(min_width=120, scale=1):
-                    retryBtn = gr.Button(i18n("🔄 重新生成"))
-                with gr.Column(min_width=120, scale=1):
-                    delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
-                with gr.Column(min_width=120, scale=1):
-                    delLastBtn = gr.Button(i18n("🗑️ 删除最新对话"))
-                with gr.Row(visible=False) as like_dislike_area:
-                    with gr.Column(min_width=20, scale=1):
-                        likeBtn = gr.Button(i18n("👍"))
-                    with gr.Column(min_width=20, scale=1):
-                        dislikeBtn = gr.Button(i18n("👎"))
-
-        with gr.Column(elem_id="toolbox-area"):
-            with gr.Column(min_width=50, scale=1):
-
+        with gr.Column(elem_id="chuanhu-area", scale=5):
+            with gr.Column(scale=5, elem_id="chatbot-area"):
+                with gr.Row():
+                    chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700)
+                with gr.Row():
+                    with gr.Column(min_width=225, scale=12):
+                        user_input = gr.Textbox(
+                            elem_id="user-input-tb",
+                            show_label=False, placeholder=i18n("在这里输入"),
+                            container=False
+                        )
+                    with gr.Column(min_width=42, scale=1):
+                        submitBtn = gr.Button(value="", variant="primary", elem_id="submit-btn")
+                        cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel-btn")
+                with gr.Row(elem_id="chatbot-buttons"):
+                    with gr.Column(min_width=120, scale=1):
+                        emptyBtn = gr.Button(
+                            i18n("🧹 新的对话"), elem_id="empty-btn"
+                        )
+                    with gr.Column(min_width=120, scale=1):
+                        retryBtn = gr.Button(i18n("🔄 重新生成"))
+                    with gr.Column(min_width=120, scale=1):
+                        delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
+                    with gr.Column(min_width=120, scale=1):
+                        delLastBtn = gr.Button(i18n("🗑️ 删除最新对话"))
+                    with gr.Row(visible=False) as like_dislike_area:
+                        with gr.Column(min_width=20, scale=1):
+                            likeBtn = gr.Button(i18n("👍"))
+                        with gr.Column(min_width=20, scale=1):
+                            dislikeBtn = gr.Button(i18n("👎"))
+
+            with gr.Column(elem_id="toolbox-area", min_width=50, scale=1):
                 with gr.Accordion(label="Prompt", open=True):
                     systemPromptTxt = gr.Textbox(
                         show_label=True,
@@ -320,6 +319,9 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                 elem_classes="view-only-textbox no-container",
                             )
 
+                    with gr.Tab(label=i18n("关于")):
+                        gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
+
             with gr.Box(elem_id="chuanhu-training"):
                 with gr.Row():
                     gr.Markdown("## Training")
@@ -345,7 +347,6 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                             add_to_models_btn = gr.Button(i18n("添加训练好的模型到模型列表"), interactive=False)
 
 
-    gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
     gr.HTML(get_html("footer.html").format(versions=versions_html()), elem_id="footer")
 
     # https://github.com/gradio-app/gradio/pull/3296

web_assets/javascript/webui.js

@@ -25,6 +25,65 @@ function showMask() {
     });
 }
 
+
+function showSideMask() {
+    const oldSideMask = gradioApp().querySelector('.chuanhu-side-mask');
+    if (oldSideMask) {
+        showOrHideSideMask(oldSideMask);
+        return;
+    }
+    
+    function showOrHideSideMask(sideMask) {
+        const windowWidth = window.innerWidth;
+        if (document.querySelector('.showSide')) {
+
+            if (windowWidth < 1024) {
+                if (gradioApp().querySelector('#menu-area').classList.contains('showSide') && gradioApp().querySelector('#toolbox-area').classList.contains('showSide')) {
+                    gradioApp().querySelector('#toolbox-area').classList.remove('showSide');
+                    // if both menu and toolbox are open, close toolbox...
+                }
+            }
+            // console.log("test in showSide")
+            if (windowWidth <= 768) {
+                document.body.classList.add('popup-open');
+                // sideMask.style.opacity = '0';
+                if (document.querySelector('.chuanhu-side-mask')) {
+                    sideMask.style.display = 'block';
+                    setTimeout(() => {sideMask.style.opacity = '0.5'; }, 200);
+                } else {
+                    sideMask.style.opacity = '0.5';
+                }
+                // sideMask.style.display = 'block';
+                // // sideMask.style.opacity = '0.5';
+                // setTimeout(() => {sideMask.style.opacity = '0.5'; }, 100);
+
+                // sideMask.style.display = 'block';
+            } else {
+                // sideMask.style.display = 'none';
+                document.body.classList.remove('popup-open');
+                sideMask.style.opacity = '0';
+                // sideMask.style.display = 'none';
+                // note: 动画卡，气死我了
+                setTimeout(() => {sideMask.style.display = 'none'; }, 100);
+            }
+        }
+    }
+
+    const sideMask = document.createElement('div');
+    sideMask.classList.add('chuanhu-side-mask');
+    window.addEventListener('resize', () => {
+        showOrHideSideMask(sideMask);
+    });
+
+    gradioApp().appendChild(sideMask);
+    showOrHideSideMask(sideMask);
+    
+
+    sideMask.addEventListener('click', () => {
+        closeSide();
+    });
+}
+
 function closeBox() {
     chuanhuPopup.classList.remove('showBox');
     popupWrapper.classList.remove('showBox');
@@ -34,17 +93,38 @@ function closeBox() {
     document.body.classList.remove('popup-open');
 }
 
+function closeSide() {
+    
+    document.querySelector('.chuanhu-side-mask').style.opacity = '0';
+    setTimeout(() => {document.querySelector('.chuanhu-side-mask').remove();}, 300);
+    document.body.classList.remove('popup-open');
+
+    gradioApp().querySelector('#menu-area').classList.remove('showSide');
+    gradioApp().querySelector('#toolbox-area').classList.remove('showSide');
+
+}
+
 function menuClick() {
     var menu = gradioApp().querySelector('#menu-area');
     // var menuBtn = gradioApp().querySelector('.menu-btn');
-    if (menu.classList.contains('hideSide')) {
-        menu.classList.remove('hideSide');
-        // menuBtn.classList.add('active');
+    if (menu.classList.contains('showSide')) {
+        menu.classList.remove('showSide');
+        closeSide();
+    } else {
+        menu.classList.add('showSide');
+        showSideMask();
+    }
+}
+
+function toolboxClick() {
+    var toolbox = gradioApp().querySelector('#toolbox-area');
+    if (toolbox.classList.contains('showSide')) {
+        toolbox.classList.remove('showSide');
+        closeSide();
     } else {
-        menu.classList.add('hideSide');
-        // menuBtn.classList.remove('active');
+        toolbox.classList.add('showSide');
+        showSideMask();
     }
-    setChatAreaWidth();
 }
 
 function setHistroyPanel() {

web_assets/stylesheet/ChuanhuChat.css

@@ -9,6 +9,9 @@
     --message-bot-background-color-dark: #2C2C2C;
     --switch-checkbox-color-light: #e5e7eb;
     --switch-checkbox-color-dark: #515151;
+
+    --menu-width: 300px;
+    --toolbox-width: 280px;
 }
 
 body.popup-open {
@@ -117,25 +120,30 @@ body.popup-open {
     white-space: nowrap;
 }
 
-.chuanhu-mask {
+.chuanhu-mask, .chuanhu-side-mask {
     background-color: gray;
-    opacity: 50%;
+    transition: opacity 0.3s ease;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 214748368;
+    z-index: 999;
     /* background-color: transparent; */
 }
-
+.chuanhu-mask {
+    opacity: 0.5;
+}
+.chuanhu-side-mask {
+    opacity: 0;
+}
 #popup-wrapper {
     display: none;
     position: fixed;
     overflow: auto;
     top: 0;
     left: 0;
-    z-index: 2147483689;
+    z-index: 99999;
 }
 #popup-wrapper.showBox {
     display: grid;
@@ -144,7 +152,7 @@ body.popup-open {
 
 #chuanhu-popup {
     display: none;
-    z-index: 2147483689;
+    z-index: 99999;
     width: 680px;
     height: 400px;
     padding: 0;
@@ -160,32 +168,86 @@ body.popup-open {
     display: none;
 }
 
-.hideSide {
-    width: 0 !important;
-    /* flex-basis: 0 !important; */
-    display: none !important;
-}
 
-#chatbot-area {
-    transition: flex-basis 0.5s ease;
+
+#chuanhu-body {
+    flex-wrap: nowrap;
+    gap: 0;
+    overflow: hidden;
+    display: inline-flex;
+    /* height: calc(100vh - 72px); */
 }
-#chatbot-area, #menu-area, #toolbox-area {
-    /* flex: none;
-    flex-grow: unset !important;
-    width: auto;
+
+/* default invisible */
+#menu-area, #toolbox-area {
+    height: 0;
+    width: 0;
+    transition: width 0.3s ease;
+    visibility: hidden;
+    flex: unset;
     min-width: unset !important;
-    transition: flex-basis 0.5s ease; */
+    display: flex;
+    flex-shrink: 0;
+    overflow: hidden;
+    flex-wrap: nowrap;
 }
-#chatbot-area {
-
+#menu-area > div {
+    width: var(--menu-width);
+}
+#toolbox-area > div {
+    width: var(--toolbox-width);
+}
+#menu-area.showSide {
+    width: var(--menu-width);
+    height: 100%;
+    visibility: visible;
+    margin-right: 16px;
 }
-#menu-area {
 
+#toolbox-area.showSide {
+    width: var(--toolbox-width);
+    height: 100%;
+    visibility: visible;
+    margin-left: 16px;
 }
-#toolbox-area {
 
+#chuanhu-area {
+    flex: unset;
+    width: 100%;
+    flex-wrap: nowrap;
+    gap: 0;
+    justify-content: center;
+    overflow: hidden;
+    flex-direction: row;
+    padding-bottom: 6px;
 }
 
+@media screen and (max-width: 767px) {
+    #menu-area {
+        position: absolute;
+        transition: left 0.3s ease, visibility 0.1s ease;
+        left: calc(0px - var(--menu-width));
+        z-index: 9999;
+        overflow: unset;
+    }
+    #menu-area.showSide {
+        left: 0;
+        margin-left: -16px;
+    }
+    #toolbox-area {
+        position: absolute;
+        transition: right 0.3s ease, visibility 0.1s ease;
+        right: calc(0px - var(--toolbox-width));
+        z-index: 9999;
+        overflow: unset;
+    }
+    #toolbox-area.showSide {
+        right: 0;
+    }
+    /* #menu-area.showSide, #toolbox-area.showSide {
+        z-index: 9999;
+    } */
+}
 
 /* .chuanhu-history-panel ul.options {
     position: relative;
@@ -254,7 +316,7 @@ body.popup-open {
 
 
 #history-select-wrap {
-    height: 400px;
+    height: 300px;
     overflow: auto;
     overflow-x: hidden;
 }