WIP: 弹出窗口后禁用body的滚动，增加弹出窗口超出Window超出部分滚动

ChuanhuChatbot.py

@@ -165,183 +165,184 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
                         historySelectBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="history-select-btn")
 
-    with gr.Box(elem_id="chuanhu-popup"):
-        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")
-            with gr.Tabs(elem_id="chuanhu-setting-tabs"):
-                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(elem_id="popup-wrapper"):
+        with gr.Box(elem_id="chuanhu-popup"):
+            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")
+                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],
                         )
-
-        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")
-            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)
+                        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"):
+                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/javascript/ChuanhuChat.js

@@ -29,6 +29,7 @@ var historySelector = null;
 var chuanhuPopup = null;
 var settingBox = null;
 var trainingBox = null;
+var popupWrapper = null;
 
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
@@ -71,6 +72,7 @@ function initialize() {
     chuanhuPopup = gradioApp().querySelector('#chuanhu-popup');
     settingBox = gradioApp().querySelector('#chuanhu-setting');
     trainingBox = gradioApp().querySelector('#chuanhu-training');
+    popupWrapper = gradioApp().querySelector('#popup-wrapper');
 
 
     if (loginUserForm) {
@@ -220,11 +222,12 @@ 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`;
+    popupWrapper.style.height = `${screenHeight}px`;
+    popupWrapper.style.width = `${screenWidth}px`;
+    // const popupBoxWidth = 680;
+    // const popupBoxHeight = 400;
+    // chuanhuPopup.style.left = `${(screenWidth - popupBoxWidth) / 2}px`;
+    // chuanhuPopup.style.top = `${(screenHeight - popupBoxHeight) / 2}px`;
 }
 
 function setChatbotHeight() {

web_assets/javascript/webui.js

@@ -1,5 +1,6 @@
 function openSettingBox() {
     chuanhuPopup.classList.add('showBox');
+    popupWrapper.classList.add('showBox');
     settingBox.classList.remove('hideBox');
     showMask();
 
@@ -7,6 +8,7 @@ function openSettingBox() {
 
 function openTrainingBox() {
     chuanhuPopup.classList.add('showBox');
+    popupWrapper.classList.add('showBox');
     trainingBox.classList.remove('hideBox');
     showMask();
 }
@@ -14,7 +16,8 @@ function openTrainingBox() {
 function showMask() {
     const mask = document.createElement('div');
     mask.classList.add('chuanhu-mask');
-    document.body.appendChild(mask);
+    popupWrapper.appendChild(mask);
+    document.body.classList.add('popup-open');
     mask.addEventListener('click', () => {
         closeBox();
     });
@@ -22,9 +25,11 @@ function showMask() {
 
 function closeBox() {
     chuanhuPopup.classList.remove('showBox');
+    popupWrapper.classList.remove('showBox');
     trainingBox.classList.add('hideBox');
     settingBox.classList.add('hideBox');
     document.querySelector('.chuanhu-mask')?.remove();
+    document.body.classList.remove('popup-open');
 }
 
 function menuClick() {

web_assets/stylesheet/ChuanhuChat.css

@@ -11,6 +11,10 @@
     --switch-checkbox-color-dark: #515151;
 }
 
+body.popup-open {
+    overflow: hidden;
+}
+
 .hideK {
     display: none;
 }
@@ -122,25 +126,29 @@
     width: 100%;
     height: 100%;
     z-index: 214748368;
+    /* background-color: transparent; */
+}
+
+#popup-wrapper {
+    display: none;
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    left: 0;
+    z-index: 2147483689;
+}
+#popup-wrapper.showBox {
+    display: grid;
+    place-items: center;
 }
+
 #chuanhu-popup {
     display: none;
     z-index: 2147483689;
-    position: fixed;
-    top: 20px;
-    left: 20px;
-/*     
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
- */
     width: 680px;
     height: 400px;
-/* overflow: hidden!important; */
-/* overflow-x: hidden !important; */
     padding: 0;
 }
-
 #chuanhu-popup.showBox {
     display: block;
 }