WIP: make setting like box

ChuanhuChatbot.py

@@ -167,175 +167,181 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
 
     with gr.Box(elem_id="chuanhu-popup"):
         with gr.Box(elem_id="chuanhu-setting"):
-            gr.Markdown("## Setting")
-            with gr.Tab(label=i18n("模型")):
-                keyTxt = gr.Textbox(
-                    show_label=True,
-                    placeholder=f"Your API-key...",
-                    value=hide_middle_chars(user_api_key.value),
-                    type="password",
-                    visible=not HIDE_MY_KEY,
-                    label="API-Key",
-                )
-                if multi_api_key:
-                    usageTxt = gr.Markdown(i18n("多账号模式已开启，无需输入key，可直接开始对话"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
-                else:
-                    usageTxt = gr.Markdown(i18n("**发送消息** 或 **提交key** 以显示额度"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
-                model_select_dropdown = gr.Dropdown(
-                    label=i18n("选择模型"), choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True
-                )
-                lora_select_dropdown = gr.Dropdown(
-                    label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False
-                )
-                with gr.Row():
-                    single_turn_checkbox = gr.Checkbox(label=i18n("单轮对话"), value=False, elem_classes="switch-checkbox")
-                    use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox")
-                language_select_dropdown = gr.Dropdown(
-                    label=i18n("选择回复语言（针对搜索&索引功能）"),
-                    choices=REPLY_LANGUAGES,
-                    multiselect=False,
-                    value=REPLY_LANGUAGES[0],
-                )
-                index_files = gr.Files(label=i18n("上传"), type="file", elem_id="upload-index-file")
-                two_column = gr.Checkbox(label=i18n("双栏pdf"), value=advance_docs["pdf"].get("two_column", False))
-                summarize_btn = gr.Button(i18n("总结"))
-                # TODO: 公式ocr
-                # formula_ocr = gr.Checkbox(label=i18n("识别公式"), value=advance_docs["pdf"].get("formula_ocr", False))
-
-            with gr.Tab(label=i18n("高级")):
-                gr.HTML(get_html("appearance_switcher.html").format(label=i18n("切换亮暗色主题")), elem_classes="insert-block")
-                use_streaming_checkbox = gr.Checkbox(
-                        label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION, elem_classes="switch-checkbox"
-                    )
-                checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
-                gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️"), elem_id="advanced-warning")
-                with gr.Accordion(i18n("参数"), open=False):
-                    temperature_slider = gr.Slider(
-                        minimum=-0,
-                        maximum=2.0,
-                        value=1.0,
-                        step=0.1,
-                        interactive=True,
-                        label="temperature",
-                    )
-                    top_p_slider = gr.Slider(
-                        minimum=-0,
-                        maximum=1.0,
-                        value=1.0,
-                        step=0.05,
-                        interactive=True,
-                        label="top-p",
-                    )
-                    n_choices_slider = gr.Slider(
-                        minimum=1,
-                        maximum=10,
-                        value=1,
-                        step=1,
-                        interactive=True,
-                        label="n choices",
-                    )
-                    stop_sequence_txt = gr.Textbox(
-                        show_label=True,
-                        placeholder=i18n("停止符，用英文逗号隔开..."),
-                        label="stop",
-                        value="",
-                        lines=1,
-                    )
-                    max_context_length_slider = gr.Slider(
-                        minimum=1,
-                        maximum=32768,
-                        value=2000,
-                        step=1,
-                        interactive=True,
-                        label="max context",
-                    )
-                    max_generation_slider = gr.Slider(
-                        minimum=1,
-                        maximum=32768,
-                        value=1000,
-                        step=1,
-                        interactive=True,
-                        label="max generations",
-                    )
-                    presence_penalty_slider = gr.Slider(
-                        minimum=-2.0,
-                        maximum=2.0,
-                        value=0.0,
-                        step=0.01,
-                        interactive=True,
-                        label="presence penalty",
-                    )
-                    frequency_penalty_slider = gr.Slider(
-                        minimum=-2.0,
-                        maximum=2.0,
-                        value=0.0,
-                        step=0.01,
-                        interactive=True,
-                        label="frequency penalty",
-                    )
-                    logit_bias_txt = gr.Textbox(
+            with gr.Row():
+                gr.Markdown("## Settings")
+                gr.HTML(get_html("close_box_btn.html"),elem_classes="close-box-btn")
+            with gr.Tabs(elem_id="chuanhu-setting-tabs"):
+                with gr.Tab(label=i18n("模型")):
+                    keyTxt = gr.Textbox(
                         show_label=True,
-                        placeholder=f"word:likelihood",
-                        label="logit bias",
-                        value="",
-                        lines=1,
+                        placeholder=f"Your API-key...",
+                        value=hide_middle_chars(user_api_key.value),
+                        type="password",
+                        visible=not HIDE_MY_KEY,
+                        label="API-Key",
                     )
-                    user_identifier_txt = gr.Textbox(
-                        show_label=True,
-                        placeholder=i18n("用于定位滥用行为"),
-                        label=i18n("用户名"),
-                        value=user_name.value,
-                        lines=1,
+                    if multi_api_key:
+                        usageTxt = gr.Markdown(i18n("多账号模式已开启，无需输入key，可直接开始对话"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
+                    else:
+                        usageTxt = gr.Markdown(i18n("**发送消息** 或 **提交key** 以显示额度"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
+                    model_select_dropdown = gr.Dropdown(
+                        label=i18n("选择模型"), choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True
                     )
-
-                with gr.Accordion(i18n("网络参数"), open=False):
-                    gr.Markdown(i18n("---\n⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"), elem_id="netsetting-warning")
-                    default_btn = gr.Button(i18n("🔙 恢复默认网络设置"))
-                    # 网络代理
-                    proxyTxt = gr.Textbox(
-                        show_label=True,
-                        placeholder=i18n("未设置代理..."),
-                        label=i18n("代理地址"),
-                        value=config.http_proxy,
-                        lines=1,
-                        interactive=False,
-                        # container=False,
-                        elem_classes="view-only-textbox no-container",
+                    lora_select_dropdown = gr.Dropdown(
+                        label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False
                     )
-                    # changeProxyBtn = gr.Button(i18n("🔄 设置代理地址"))
-
-                    # 优先展示自定义的api_host
-                    apihostTxt = gr.Textbox(
-                        show_label=True,
-                        placeholder="api.openai.com",
-                        label="OpenAI API-Host",
-                        value=config.api_host or shared.API_HOST,
-                        lines=1,
-                        interactive=False,
-                        # container=False,
-                        elem_classes="view-only-textbox no-container",
+                    with gr.Row():
+                        single_turn_checkbox = gr.Checkbox(label=i18n("单轮对话"), value=False, elem_classes="switch-checkbox")
+                        use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox")
+                    language_select_dropdown = gr.Dropdown(
+                        label=i18n("选择回复语言（针对搜索&索引功能）"),
+                        choices=REPLY_LANGUAGES,
+                        multiselect=False,
+                        value=REPLY_LANGUAGES[0],
                     )
+                    index_files = gr.Files(label=i18n("上传"), type="file", elem_id="upload-index-file")
+                    two_column = gr.Checkbox(label=i18n("双栏pdf"), value=advance_docs["pdf"].get("two_column", False))
+                    summarize_btn = gr.Button(i18n("总结"))
+                    # TODO: 公式ocr
+                    # formula_ocr = gr.Checkbox(label=i18n("识别公式"), value=advance_docs["pdf"].get("formula_ocr", False))
+
+                with gr.Tab(label=i18n("高级")):
+                    gr.HTML(get_html("appearance_switcher.html").format(label=i18n("切换亮暗色主题")), elem_classes="insert-block")
+                    use_streaming_checkbox = gr.Checkbox(
+                            label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION, elem_classes="switch-checkbox"
+                        )
+                    checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
+                    gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️"), elem_id="advanced-warning")
+                    with gr.Accordion(i18n("参数"), open=False):
+                        temperature_slider = gr.Slider(
+                            minimum=-0,
+                            maximum=2.0,
+                            value=1.0,
+                            step=0.1,
+                            interactive=True,
+                            label="temperature",
+                        )
+                        top_p_slider = gr.Slider(
+                            minimum=-0,
+                            maximum=1.0,
+                            value=1.0,
+                            step=0.05,
+                            interactive=True,
+                            label="top-p",
+                        )
+                        n_choices_slider = gr.Slider(
+                            minimum=1,
+                            maximum=10,
+                            value=1,
+                            step=1,
+                            interactive=True,
+                            label="n choices",
+                        )
+                        stop_sequence_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("停止符，用英文逗号隔开..."),
+                            label="stop",
+                            value="",
+                            lines=1,
+                        )
+                        max_context_length_slider = gr.Slider(
+                            minimum=1,
+                            maximum=32768,
+                            value=2000,
+                            step=1,
+                            interactive=True,
+                            label="max context",
+                        )
+                        max_generation_slider = gr.Slider(
+                            minimum=1,
+                            maximum=32768,
+                            value=1000,
+                            step=1,
+                            interactive=True,
+                            label="max generations",
+                        )
+                        presence_penalty_slider = gr.Slider(
+                            minimum=-2.0,
+                            maximum=2.0,
+                            value=0.0,
+                            step=0.01,
+                            interactive=True,
+                            label="presence penalty",
+                        )
+                        frequency_penalty_slider = gr.Slider(
+                            minimum=-2.0,
+                            maximum=2.0,
+                            value=0.0,
+                            step=0.01,
+                            interactive=True,
+                            label="frequency penalty",
+                        )
+                        logit_bias_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=f"word:likelihood",
+                            label="logit bias",
+                            value="",
+                            lines=1,
+                        )
+                        user_identifier_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("用于定位滥用行为"),
+                            label=i18n("用户名"),
+                            value=user_name.value,
+                            lines=1,
+                        )
+
+                    with gr.Accordion(i18n("网络参数"), open=False):
+                        gr.Markdown(i18n("---\n⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"), elem_id="netsetting-warning")
+                        default_btn = gr.Button(i18n("🔙 恢复默认网络设置"))
+                        # 网络代理
+                        proxyTxt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("未设置代理..."),
+                            label=i18n("代理地址"),
+                            value=config.http_proxy,
+                            lines=1,
+                            interactive=False,
+                            # container=False,
+                            elem_classes="view-only-textbox no-container",
+                        )
+                        # changeProxyBtn = gr.Button(i18n("🔄 设置代理地址"))
+
+                        # 优先展示自定义的api_host
+                        apihostTxt = gr.Textbox(
+                            show_label=True,
+                            placeholder="api.openai.com",
+                            label="OpenAI API-Host",
+                            value=config.api_host or shared.API_HOST,
+                            lines=1,
+                            interactive=False,
+                            # container=False,
+                            elem_classes="view-only-textbox no-container",
+                        )
 
         with gr.Box(elem_id="chuanhu-training"):
-            gr.Markdown("## Training")
-            with gr.Tab(label=i18n("微调")):
-                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)"))
-
-                with gr.Tab(label=i18n("准备数据集")):
-                    dataset_preview_json = gr.JSON(label=i18n("数据集预览"), readonly=True)
-                    dataset_selection = gr.Files(label = i18n("选择数据集"), file_types=[".xlsx", ".jsonl"], file_count="single")
-                    upload_to_openai_btn = gr.Button(i18n("上传到OpenAI"), variant="primary", interactive=False)
-
-                with gr.Tab(label=i18n("训练")):
-                    openai_ft_file_id = gr.Textbox(label=i18n("文件ID"), value="", lines=1, placeholder=i18n("上传到 OpenAI 后自动填充"))
-                    openai_ft_suffix = gr.Textbox(label=i18n("模型名称后缀"), value="", lines=1, placeholder=i18n("可选，用于区分不同的模型"))
-                    openai_train_epoch_slider = gr.Slider(label=i18n("训练轮数（Epochs）"), minimum=1, maximum=100, value=3, step=1, interactive=True)
-                    openai_start_train_btn = gr.Button(i18n("开始训练"), variant="primary", interactive=False)
-
-                with gr.Tab(label=i18n("状态")):
-                    openai_status_refresh_btn = gr.Button(i18n("刷新状态"))
-                    openai_cancel_all_jobs_btn = gr.Button(i18n("取消所有任务"))
-                    add_to_models_btn = gr.Button(i18n("添加训练好的模型到模型列表"), interactive=False)
+            with gr.Row():
+                gr.Markdown("## Training")
+                gr.HTML(get_html("close_box_btn.html"),elem_classes="close-box-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)"))
+
+                    with gr.Tab(label=i18n("准备数据集")):
+                        dataset_preview_json = gr.JSON(label=i18n("数据集预览"), readonly=True)
+                        dataset_selection = gr.Files(label = i18n("选择数据集"), file_types=[".xlsx", ".jsonl"], file_count="single")
+                        upload_to_openai_btn = gr.Button(i18n("上传到OpenAI"), variant="primary", interactive=False)
+
+                    with gr.Tab(label=i18n("训练")):
+                        openai_ft_file_id = gr.Textbox(label=i18n("文件ID"), value="", lines=1, placeholder=i18n("上传到 OpenAI 后自动填充"))
+                        openai_ft_suffix = gr.Textbox(label=i18n("模型名称后缀"), value="", lines=1, placeholder=i18n("可选，用于区分不同的模型"))
+                        openai_train_epoch_slider = gr.Slider(label=i18n("训练轮数（Epochs）"), minimum=1, maximum=100, value=3, step=1, interactive=True)
+                        openai_start_train_btn = gr.Button(i18n("开始训练"), variant="primary", interactive=False)
+
+                    with gr.Tab(label=i18n("状态")):
+                        openai_status_refresh_btn = gr.Button(i18n("刷新状态"))
+                        openai_cancel_all_jobs_btn = gr.Button(i18n("取消所有任务"))
+                        add_to_models_btn = gr.Button(i18n("添加训练好的模型到模型列表"), interactive=False)
 
 
     gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")

web_assets/html/close_box_btn.html

@@ -0,0 +1,3 @@
+<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/javascript/ChuanhuChat.js

@@ -48,7 +48,7 @@ function gradioLoaded(mutations) {
 }
 
 function initialize() {
-    var needInit = {gradioContainer, apSwitch, user_input_tb, userInfoDiv, appTitleDiv, chatbot, chatbotIndicator, chatbotWrap, statusDisplay, sliders, updateChuanhuBtn};
+    var needInit = {gradioContainer, apSwitch, user_input_tb, userInfoDiv, appTitleDiv, chatbot, chatbotIndicator, chatbotWrap, statusDisplay, sliders, updateChuanhuBtn, chuanhuPopup};
     initialized = true;
 
     loginUserForm = gradioApp().querySelector(".gradio-container > .main > .wrap > .panel > .form")
@@ -91,6 +91,7 @@ function initialize() {
         setTimeout(showOrHideUserInfo(), 2000);
         setChatbotHeight();
         setChatbotScroll();
+        setPopupBoxPosition();
         setSlider();
         setAvatar();
         if (!historyLoaded) loadHistoryHtml();
@@ -216,6 +217,16 @@ function setChatAreaWidth() {
 
 }
 
+function setPopupBoxPosition() {
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+    
+    const popupBoxWidth = 680;
+    const popupBoxHeight = 400;
+    chuanhuPopup.style.left = `${(screenWidth - popupBoxWidth) / 2}px`;
+    chuanhuPopup.style.top = `${(screenHeight - popupBoxHeight) / 2}px`;
+}
+
 function setChatbotHeight() {
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status-display');
@@ -303,8 +314,8 @@ window.addEventListener("DOMContentLoaded", function () {
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
 });
-window.addEventListener('resize', setChatbotHeight);
-window.addEventListener('scroll', function(){setChatbotHeight(); setUpdateWindowHeight();});
+window.addEventListener('resize', ()=>{setChatbotHeight();setPopupBoxPosition()});
+window.addEventListener('scroll', ()=>{setChatbotHeight(); setUpdateWindowHeight();setPopupBoxPosition();});
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
 
 // console suprise

web_assets/javascript/webui.js

@@ -16,13 +16,17 @@ function showMask() {
     mask.classList.add('chuanhu-mask');
     document.body.appendChild(mask);
     mask.addEventListener('click', () => {
-        chuanhuPopup.classList.remove('showBox');
-        trainingBox.classList.add('hideBox');
-        settingBox.classList.add('hideBox');
-        mask.remove();
+        closeBox();
     });
 }
 
+function closeBox() {
+    chuanhuPopup.classList.remove('showBox');
+    trainingBox.classList.add('hideBox');
+    settingBox.classList.add('hideBox');
+    document.querySelector('.chuanhu-mask')?.remove();
+}
+
 function menuClick() {
     var menu = gradioApp().querySelector('#menu-area');
     // var menuBtn = gradioApp().querySelector('.menu-btn');

web_assets/stylesheet/ChuanhuChat.css

@@ -127,19 +127,27 @@
     display: none;
     z-index: 2147483689;
     position: fixed;
+    top: 20px;
+    left: 20px;
+/*     
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 800px;
-    height: 80%;
-    overflow: auto !important;
-    overflow-x: hidden !important;
+ */
+    width: 680px;
+    height: 400px;
+/* overflow: hidden!important; */
+/* overflow-x: hidden !important; */
+    padding: 0;
 }
 
 #chuanhu-popup.showBox {
     display: block;
 }
 
+#chuanhu-popup > .gradio-box {
+    padding: 0;
+}
 .hideBox {
     display: none;
 }
@@ -161,6 +169,64 @@
     overflow: auto;
     box-shadow: var(--shadow-drop-lg);
 }
-#chuanhu-popup ul.options {
 
+#chuanhu-popup > .gradio-box > .gradio-row:first-of-type {
+    padding: 24px !important;
+    border-bottom: 1.8px solid var(--border-color-primary);
+}
+#chuanhu-popup > .gradio-box > .gradio-row > .close-box-btn {
+    max-width: 28px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+#chuanhu-popup > .gradio-box > .gradio-tabs {
+    display: block;
+    height: 324px;
+    /* margin: 16px 24px; */
+}
+
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tabitem {
+    border: none;
+    border-radius: 0;
+    overflow: auto;
+    height: 100%;
+    padding: 16px 24px;
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav {
+    float: left;
+    display: block;
+    border: none;
+    padding: 16px;
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+    background: var(--background-fill-secondary);
+    border-bottom-left-radius: var(--block-radius);
+    border-right: 1px solid var(--border-color-primary);
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button {
+    display: block;
+    border: none;
+    border-radius: 6px;
+    text-align: left;
+    white-space: initial;
+    width: 100%;
+    /* height: 32px; */
+    padding: 7px 12px;
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
+    background-color: var(--button-primary-background-fill);
+    /* font-weight: bold; */
+    color: var(--button-primary-text-color);
+}
+/* #chuanhu-popup ul.options {
+    transform: translate(-50%, -50%);
+} */
+
+
+#history-select-wrap {
+    height: 400px;
+    overflow: auto;
+    overflow-x: hidden;
 }