WIP 暂存

ChuanhuChatbot.py

@@ -127,38 +127,49 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                             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,
-                        placeholder=i18n("在这里输入System Prompt..."),
-                        label="System prompt",
-                        value=INITIAL_SYSTEM_PROMPT,
-                        lines=10
-                    )
-                    with gr.Accordion(label=i18n("加载Prompt模板"), open=True):
-                        with gr.Column():
-                            with gr.Row():
-                                with gr.Column(scale=6):
-                                    templateFileSelectDropdown = gr.Dropdown(
-                                        label=i18n("选择Prompt模板集合文件"),
-                                        choices=get_template_names(plain=True),
-                                        multiselect=False,
-                                        value=get_template_names(plain=True)[0],
-                                        container=False,
-                                    )
-                                with gr.Column(scale=1):
-                                    templateRefreshBtn = gr.Button(i18n("🔄 刷新"))
-                            with gr.Row():
+                with gr.Box(elem_id="chuanhu-toolbox"):
+                    with gr.Row():
+                        gr.Markdown("## 🛠️ Toolbox")
+                        gr.HTML(get_html("close_btn.html").format(obj="toolbox"), elem_classes="close-btn")
+                    with gr.Tabs(elem_id="chuanhu-toolbox-tabs"):
+                        with gr.Tab(label=i18n("Prompt")):
+                        # with gr.Accordion(label="Prompt", open=True):
+                            systemPromptTxt = gr.Textbox(
+                                show_label=True,
+                                placeholder=i18n("在这里输入System Prompt..."),
+                                label="System prompt",
+                                value=INITIAL_SYSTEM_PROMPT,
+                                lines=10
+                            )
+                            with gr.Accordion(label=i18n("加载Prompt模板"), open=True):
                                 with gr.Column():
-                                    templateSelectDropdown = gr.Dropdown(
-                                        label=i18n("从Prompt模板中加载"),
-                                        choices=load_template(
-                                            get_template_names(plain=True)[0], mode=1
-                                        ),
-                                        multiselect=False,
-                                        container=False,
-                                    )
-
+                                    with gr.Row():
+                                        with gr.Column(scale=6):
+                                            templateFileSelectDropdown = gr.Dropdown(
+                                                label=i18n("选择Prompt模板集合文件"),
+                                                choices=get_template_names(plain=True),
+                                                multiselect=False,
+                                                value=get_template_names(plain=True)[0],
+                                                container=False,
+                                            )
+                                        with gr.Column(scale=1):
+                                            templateRefreshBtn = gr.Button(i18n("🔄 刷新"))
+                                    with gr.Row():
+                                        with gr.Column():
+                                            templateSelectDropdown = gr.Dropdown(
+                                                label=i18n("从Prompt模板中加载"),
+                                                choices=load_template(
+                                                    get_template_names(plain=True)[0], mode=1
+                                                ),
+                                                multiselect=False,
+                                                container=False,
+                                            )
+                        with gr.Tab(label=i18n("Parameters")):
+                            gr.Markdown("will be here soon...")
+                        with gr.Tab(label=i18n("Extensions")):
+                            gr.Markdown("no, not yet...")  
+                        with gr.Tab(label=i18n("不知道还有啥tab")):
+                            gr.Markdown("I am Keldos. Hello, world!")
 
                         # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
                         updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
@@ -169,7 +180,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
             with gr.Box(elem_id="chuanhu-setting"):
                 with gr.Row():
                     gr.Markdown("## Settings")
-                    gr.HTML(get_html("close_box_btn.html"),elem_classes="close-box-btn")
+                    gr.HTML(get_html("close_btn.html").format(obj="box"),elem_classes="close-btn")
                 with gr.Tabs(elem_id="chuanhu-setting-tabs"):
                     with gr.Tab(label=i18n("模型")):
                         keyTxt = gr.Textbox(
@@ -325,7 +336,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
             with gr.Box(elem_id="chuanhu-training"):
                 with gr.Row():
                     gr.Markdown("## Training")
-                    gr.HTML(get_html("close_box_btn.html"),elem_classes="close-box-btn")
+                    gr.HTML(get_html("close_btn.html").format(obj="box"),elem_classes="close-btn")
                 with gr.Tabs(elem_id="chuanhu-training-tabs"):
                     with gr.Tab(label=i18n("OpenAI 微调")):
                         openai_train_status = gr.Markdown(label=i18n("训练状态"), value=i18n("在这里[查看使用介绍](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B#%E5%BE%AE%E8%B0%83-gpt-35)"))

web_assets/html/close_box_btn.html

@@ -1,3 +0,0 @@
-<button class="text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-    onclick="closeBox()"
-    ><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>

web_assets/html/close_btn.html

@@ -0,0 +1,6 @@
+<button class="text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+    onclick='closeBtnClick("{obj}")'>
+    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
+        stroke-linejoin="round" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+</button>

web_assets/javascript/webui.js

@@ -50,9 +50,13 @@ function showSideMask() {
                 // sideMask.style.opacity = '0';
                 if (document.querySelector('.chuanhu-side-mask')) {
                     sideMask.style.display = 'block';
-                    setTimeout(() => {sideMask.style.opacity = '0.5'; }, 200);
+                    // setTimeout(() => {sideMask.style.opacity = '0.5'; }, 200);
+                    setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200);
+                    sideMask.classList.add('mask-blur');
                 } else {
-                    sideMask.style.opacity = '0.5';
+                    // sideMask.style.opacity = '0.5';
+                    sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+                    sideMask.classList.add('mask-blur');
                 }
                 // sideMask.style.display = 'block';
                 // // sideMask.style.opacity = '0.5';
@@ -62,7 +66,8 @@ function showSideMask() {
             } else {
                 // sideMask.style.display = 'none';
                 document.body.classList.remove('popup-open');
-                sideMask.style.opacity = '0';
+                // sideMask.style.opacity = '0';
+                sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
                 // sideMask.style.display = 'none';
                 // note: 动画卡，气死我了
                 setTimeout(() => {sideMask.style.display = 'none'; }, 100);
@@ -86,6 +91,14 @@ function showSideMask() {
     });
 }
 
+function closeBtnClick(obj) {
+    if (obj == "box") {
+        closeBox();
+    } else if (obj == "toolbox") {
+        closeSide(toolbox);
+    }
+}
+
 function closeBox() {
     chuanhuPopup.classList.remove('showBox');
     popupWrapper.classList.remove('showBox');

web_assets/stylesheet/ChuanhuChat.css

@@ -123,8 +123,9 @@ body.popup-open {
 
 /* masks */
 .chuanhu-mask, .chuanhu-side-mask {
-    background-color: gray;
-    transition: opacity 0.3s ease;
+    /* background-color: gray; */
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease;
     position: fixed;
     top: 0;
     left: 0;
@@ -134,14 +135,20 @@ body.popup-open {
     /* background-color: transparent; */
 }
 .chuanhu-mask {
-    opacity: 0.5;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+}
+.mask-blur {
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
 }
 
 .chuanhu-side-mask {
-    opacity: 0;
+    background-color: rgba(0, 0, 0, 0);
 }
 .chuanhu-top-mask {
-    opacity: 0;
+    /* background-color: rgba(0, 0, 0, 0.0); */
     z-index: 10001;
 }
 
@@ -168,6 +175,7 @@ body.popup-open {
 }
 #chuanhu-popup.showBox {
     display: block;
+    box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2);
 }
 
 #chuanhu-popup > .gradio-box {
@@ -186,6 +194,7 @@ body.popup-open {
     right: 0;
     /* padding: 6px 64px; */
     background: var(--background-fill-primary);
+    border-bottom: 1px solid var(--border-color-primary);
 
     @media screen and (max-width: 639px) {
         padding: 6px 24px;
@@ -211,6 +220,9 @@ body.popup-open {
     position: absolute;
     top: 48px;
 }
+.api-docs-wrap {
+    margin-top: 64px;
+}
 
 /* default invisible */
 #menu-area, #toolbox-area {
@@ -270,6 +282,7 @@ body.popup-open {
     }
     #menu-area.showSide {
         left: 0;
+        /* box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2); */
         /* margin-left: -16px; */
     }
 
@@ -292,6 +305,7 @@ body.popup-open {
         right: 0;
         top: calc( 10vh + 48px );
         margin: 0;
+        box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2);
     }
     /* #menu-area.showSide, #toolbox-area.showSide {
         z-index: 9999;
@@ -316,7 +330,9 @@ body.popup-open {
     padding: 24px !important;
     border-bottom: 1.8px solid var(--border-color-primary);
 }
-#chuanhu-popup > .gradio-box > .gradio-row > .close-box-btn {
+
+#toolbox-area > .gradio-box > .gradio-row > .close-btn,
+#chuanhu-popup > .gradio-box > .gradio-row > .close-btn {
     max-width: 28px;
     display: flex;
     justify-content: flex-end;
@@ -364,7 +380,7 @@ body.popup-open {
     color: var(--button-primary-text-color);
 }
 
-@media screen and (max-width: 499px) {
+@media screen and (max-width: 767px) {
     
     #popup-wrapper.showBox {
         place-items: end;
@@ -374,17 +390,22 @@ body.popup-open {
         height: calc( 90vh - 48px );
         border-radius: inherit inherit 0 0;
     }
+    #toolbox-area > .gradio-box > .gradio-row:first-of-type,
     #chuanhu-popup > .gradio-box > .gradio-row:first-of-type {
-        padding: 24px 24px 0 !important;
+        padding: 18px 24px 0 !important;
         border-bottom: 0;
     }
+    #toolbox-area > .gradio-box > .gradio-tabs,
     #chuanhu-popup > .gradio-box > .gradio-tabs {
-        height: calc( 90vh - 48px - 52px );
+        height: auto;
         width: 100vw;
         overflow: hidden;
     }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tabitem,
     #chuanhu-popup > .gradio-box > .gradio-tabs > div.tabitem {
-        height: calc( 90vh - 48px - 104px );
+        height: calc( 90vh - 48px - 46px - 45px );
+        overflow-x: auto;
+        border: none;
     }
     /* 下面是弃用方案：横条按钮tab */
     /* 
@@ -413,10 +434,11 @@ body.popup-open {
         background: var(--background-fill-secondary);
     }
     */
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav,
     #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav {
         display: flex;
         margin: 0;
-        padding: 10px 16px 0;
+        padding: 6px 16px 0;
         overflow-x: auto;
         overflow-y: hidden;
         flex-direction: row;
@@ -429,6 +451,7 @@ body.popup-open {
         border-bottom: 1px solid var(--border-color-primary);
         align-items: baseline;
     }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button,
     #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button {
         display: inline-block;
         position: relative;
@@ -440,12 +463,14 @@ body.popup-open {
         background: none;
         transition: font-size 0.3s ease-in-out;
     }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected,
     #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
         background-color: unset !important;
         font-weight: bold;
         font-size: large;
         color: var(--body-text-color);
     }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected::after,
     #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected::after {
         content: "";
         background-color: var(--primary-600);
@@ -458,8 +483,66 @@ body.popup-open {
         transform: translateX(-50%);
     }
 }
+/* 下面是大屏幕的 */
+@media screen and (min-width: 768px) {
+    #toolbox-area {
+        border-left: 1px solid var(--border-color-primary);
+    }
+    #toolbox-area > .gradio-box > .gradio-row > .close-btn {
+        display: none;
+    }
+    #toolbox-area > .gradio-box > .gradio-row:first-of-type {
+        display: none;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs{
+        height: auto;
+        width: var(--toolbox-width);
+        overflow: hidden;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tabitem {
+        height: calc( 90vh - 48px - 46px - 45px );
+        overflow-x: auto;
+        border: none;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav {
+        display: flex;
+        margin: 0;
+        padding: 4px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        border-radius: 10px;
+        gap: 4px;
+        width: 100%;
+        height: auto;
+        background: var(--button-secondary-background-fill);
+        border-bottom: 1px solid var(--border-color-primary);
+        border:none;
+        align-items: baseline;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button {
+        display: inline-block;
+        position: relative;
+        padding: 7px 12px;
+        border: none;
+        white-space: nowrap;
+        width: auto;
+        text-align: center;
+        background: var(--button-secondary-background-fill);
+        transition: font-size 0.3s ease-in-out;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
+        background-color: var(--primary-600);
+        font-weight: bold;
+        /* font-size: large; */
+        color: white;
+    }
+}
 
-
+#toolbox-area > .gradio-box {
+    padding: 0;
+}
 /* #chuanhu-popup ul.options {
     transform: translate(-50%, -50%);
 } */