WIP: new ui

ChuanhuChatbot.py

@@ -39,8 +39,8 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
 
     topic = gr.State(i18n("未命名对话历史记录"))
 
-    with gr.Row():
-        gr.HTML(CHUANHU_TITLE, elem_id="app-title")
+    with gr.Row(elem_id="chuanhu-header"):
+        gr.HTML(get_html("header_title.html").format(app_title=CHUANHU_TITLE), elem_id="app-title")
         status_display = gr.Markdown(get_geoip(), elem_id="status-display")
     with gr.Row(elem_id="float-display"):
         user_info = gr.Markdown(value="getting user info...", elem_id="user-info")
@@ -54,8 +54,48 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
             ok_btn=i18n("好"),
             ), visible=check_update)
 
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=5):
+    with gr.Row(equal_height=True, elem_id="chuanhu-body"):
+
+        with gr.Column(elem_id="menu-area"):
+            with gr.Row(elem_id="chuanhu-history"):
+                with gr.Accordion(label=i18n("保存/加载对话历史记录"), open=True):
+                    with gr.Column():
+                        with gr.Row():
+                            with gr.Column(scale=6, elem_id="history-select-wrap"):
+                                historyFileSelectDropdown = gr.Radio(
+                                    label=i18n("从列表中加载对话"),
+                                    choices=get_history_names(plain=True),
+                                    multiselect=False,
+                                    container=False,
+                                    elem_id="history-select-dropdown"
+                                )
+                            with gr.Row():
+                                with gr.Column(min_width=42, scale=1):
+                                    historyRefreshBtn = gr.Button(i18n("🔄 刷新"))
+                                with gr.Column(min_width=42, scale=1):
+                                    historyDeleteBtn = gr.Button(i18n("🗑️ 删除"))
+                        with gr.Row():
+                            with gr.Column(scale=6):
+                                saveFileName = gr.Textbox(
+                                    show_label=True,
+                                    placeholder=i18n("设置文件名: 默认为.json，可选为.md"),
+                                    label=i18n("设置保存文件名"),
+                                    value=i18n("对话历史记录"),
+                                    elem_classes="no-container"
+                                    # container=False,
+                                )
+                            with gr.Column(scale=1):
+                                saveHistoryBtn = gr.Button(i18n("💾 保存对话"))
+                                exportMarkdownBtn = gr.Button(i18n("📝 导出为Markdown"))
+                                gr.Markdown(i18n("默认保存于history文件夹"))
+                        with gr.Row():
+                            with gr.Column():
+                                downloadFile = gr.File(interactive=True)
+
+            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():
@@ -85,43 +125,10 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                     with gr.Column(min_width=20, scale=1):
                         dislikeBtn = gr.Button(i18n("👎"))
 
-        with gr.Column():
+        with gr.Column(elem_id="toolbox-area"):
             with gr.Column(min_width=50, scale=1):
-                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="Prompt"):
+                with gr.Accordion(label="Prompt", open=True):
                     systemPromptTxt = gr.Textbox(
                         show_label=True,
                         placeholder=i18n("在这里输入System Prompt..."),
@@ -153,174 +160,182 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                         container=False,
                                     )
 
-                with gr.Tab(label=i18n("保存/加载")):
-                    with gr.Accordion(label=i18n("保存/加载对话历史记录"), open=True):
-                        with gr.Column():
-                            with gr.Row():
-                                with gr.Column(scale=6):
-                                    historyFileSelectDropdown = gr.Dropdown(
-                                        label=i18n("从列表中加载对话"),
-                                        choices=get_history_names(plain=True),
-                                        multiselect=False,
-                                        container=False,
-                                    )
-                                with gr.Row():
-                                    with gr.Column(min_width=42, scale=1):
-                                        historyRefreshBtn = gr.Button(i18n("🔄 刷新"))
-                                    with gr.Column(min_width=42, scale=1):
-                                        historyDeleteBtn = gr.Button(i18n("🗑️ 删除"))
-                            with gr.Row():
-                                with gr.Column(scale=6):
-                                    saveFileName = gr.Textbox(
-                                        show_label=True,
-                                        placeholder=i18n("设置文件名: 默认为.json，可选为.md"),
-                                        label=i18n("设置保存文件名"),
-                                        value=i18n("对话历史记录"),
-                                        elem_classes="no-container"
-                                        # container=False,
-                                    )
-                                with gr.Column(scale=1):
-                                    saveHistoryBtn = gr.Button(i18n("💾 保存对话"))
-                                    exportMarkdownBtn = gr.Button(i18n("📝 导出为Markdown"))
-                                    gr.Markdown(i18n("默认保存于history文件夹"))
-                            with gr.Row():
-                                with gr.Column():
-                                    downloadFile = gr.File(interactive=True)
-
-                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.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",
-                        )
+
                         # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
                         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"):
+            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(
+                        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)
 
 
     gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
@@ -542,6 +557,12 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         [status_display],
         show_progress=True,
     )
+    historySelectBtn.click(
+        fn=load_chat_history,
+        inputs=[current_model, historyFileSelectDropdown, user_name],
+        outputs=[saveFileName, systemPromptTxt, chatbot],
+        _js='(a,b,c)=>{return bgSelectHistory(a,b,c);}'
+    )
 
 logging.info(
     colorama.Back.GREEN

web_assets/html/func_nav.html

@@ -0,0 +1,11 @@
+<button id="chuanhu-setting-btn" onclick="openSettingBox()" style="width: 60px; height: 60px;">
+setting(暂无图标)
+</button>
+
+<button id="chuanhu-training-btn" onclick="openTrainingBox()" style="width: 60px; height: 60px;">
+    training(暂无图标)
+    </button>
+
+<button id="" onclick="" style="width: 60px; height: 60px;">
+darklight switch(暂无图标)
+</button>

web_assets/html/header_title.html

@@ -0,0 +1,22 @@
+<div class="gb_hd gb_7c gb_8c"
+    style="display:inline-flex;">
+    <buttom id="chuanhu-menu-btn" onclick='menuClick()' class="gb_Ec" aria-expanded="false" aria-label="Main menu" role="button" tabindex="0"
+        style="visibility: visible; width:32px; height:32px; margin-right:5px;"><svg focusable="false" viewBox="0 0 24 24">
+            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+        </svg>
+    </div>
+    <!-- <buttom class="gb_Ec gb_Ic gb_p" aria-label="Go back" title="Go back" role="button" tabindex="0">
+        <svg focusable="false" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
+        </svg>
+    </buttom>
+    <div class="gb_Ec gb_Jc gb_p" aria-label="Close" role="button" tabindex="0"><svg viewBox="0 0 24 24">
+            <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z">
+            </path>
+        </svg></div> -->
+    <div class="gb_xc">
+        <div class="gb_yc">{app_title}
+        </div>
+    </div>
+    <div class="gb_hd gb_p gb_5c gb_6c"><span class="gb_9c" aria-level="1" role="heading"></span></div>
+</div>

web_assets/javascript/ChuanhuChat.js

@@ -25,6 +25,11 @@ var sliders = null;
 var updateChuanhuBtn = null;
 var statusDisplay = null;
 
+var historySelector = null;
+var chuanhuPopup = null;
+var settingBox = null;
+var trainingBox = null;
+
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
 var initialized = false;
@@ -62,6 +67,12 @@ function initialize() {
     updateChuanhuBtn = gradioApp().getElementById("update-chuanhu-btn");
     statusDisplay = gradioApp().querySelector('#status-display');
 
+    historySelector = gradioApp().querySelector('#history-select-dropdown');
+    chuanhuPopup = gradioApp().querySelector('#chuanhu-popup');
+    settingBox = gradioApp().querySelector('#chuanhu-setting');
+    trainingBox = gradioApp().querySelector('#chuanhu-training');
+
+
     if (loginUserForm) {
         localStorage.setItem("userLogged", true);
         userLogged = true;
@@ -91,6 +102,10 @@ function initialize() {
         if (longTimeNoCheck && !updateInfoGotten && !isLatestVersion || isLatestVersion && !updateInfoGotten) {
             updateLatestVersion();
         }
+
+        // setHistroyPanel();
+        settingBox.classList.add('hideBox');
+        trainingBox.classList.add('hideBox');
     }
 }
 
@@ -194,6 +209,13 @@ function adjustDarkMode() {
     });
 }
 
+function setChatAreaWidth() {
+    const screenWidth = window.innerWidth;
+    const menuWidth = gradioApp().querySelector('.menu').offsetWidth;
+    const chatAreaWidth = chatArea.offsetWidth
+
+}
+
 function setChatbotHeight() {
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status-display');

web_assets/javascript/webui.js

@@ -0,0 +1,78 @@
+function openSettingBox() {
+    chuanhuPopup.classList.add('showBox');
+    settingBox.classList.remove('hideBox');
+    showMask();
+
+}
+
+function openTrainingBox() {
+    chuanhuPopup.classList.add('showBox');
+    trainingBox.classList.remove('hideBox');
+    showMask();
+}
+
+function showMask() {
+    const mask = document.createElement('div');
+    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();
+    });
+}
+
+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');
+    } else {
+        menu.classList.add('hideSide');
+        // menuBtn.classList.remove('active');
+    }
+}
+
+function setHistroyPanel() {
+    const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+    const historyPanel = document.createElement('div');
+    historyPanel.classList.add('chuanhu-history-panel');
+    historySelector.parentNode.insertBefore(historyPanel, historySelector);
+    var historyList=null;
+
+    historySelectorInput.addEventListener('click', (e) => {
+        e.stopPropagation();
+        historyList = gradioApp().querySelector('#history-select-dropdown ul.options');
+
+        if (historyList) {
+            // gradioApp().querySelector('.chuanhu-history-panel')?.remove();
+            historyPanel.innerHTML = '';
+            let historyListClone = historyList.cloneNode(true);
+            historyListClone.removeAttribute('style');
+            // historyList.classList.add('hidden');
+            historyList.classList.add('hideK');
+            historyPanel.appendChild(historyListClone);
+            addHistoryPanelListener(historyPanel);
+            // historySelector.parentNode.insertBefore(historyPanel, historySelector);
+        }
+    });
+}
+
+// function addHistoryPanelListener(historyPanel){
+//     historyPanel.querySelectorAll('ul.options > li').forEach((historyItem) => {
+//         historyItem.addEventListener('click', (e) => {
+//             const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+//             const historySelectBtn = gradioApp().querySelector('#history-select-btn');
+//             historySelectorInput.value = historyItem.innerText;
+//             historySelectBtn.click();
+//         });
+//     });
+// }
+
+// function bgSelectHistory(a,b,c){
+//     const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+//     let file = historySelectorInput.value;
+//     return [a,file,c]
+// }

web_assets/stylesheet/ChuanhuChat.css

@@ -22,6 +22,8 @@
     text-align: left;
     margin-top: 6px;
     white-space: nowrap;
+    flex-direction: row;
+    display: inline-flex;
 }
 #description {
     text-align: center;
@@ -109,4 +111,56 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+.chuanhu-mask {
+    background-color: gray;
+    opacity: 50%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 214748368;
+}
+#chuanhu-popup {
+    display: none;
+    z-index: 2147483689;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    height: 80%;
+    overflow: auto !important;
+    overflow-x: hidden !important;
+}
+
+#chuanhu-popup.showBox {
+    display: block;
+}
+
+.hideBox {
+    display: none;
+}
+.hideSide {
+    width: 0 !important;
+    display: none !important;
+}
+
+#chatbot-area {
+    transition: width 0.3s ease-in-out;
+}
+.chuanhu-history-panel ul.options {
+    position: relative;
+    box-shadow: unset;
+    overflow: hidden;
+}
+.chuanhu-history-panel {
+    height: 500px;
+    overflow: auto;
+    box-shadow: var(--shadow-drop-lg);
+}
+#chuanhu-popup ul.options {
+
 }