WIP: 一些界面调整与样式调整

ChuanhuChatbot.py

@@ -125,7 +125,11 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                 with gr.Row(elem_id="chatbot-footer"):
                     with gr.Box(elem_id="chatbot-input-box"):
                         with gr.Row(elem_id="chatbot-input-row"):
-                            gr.HTML(get_html("chatbot_more.html"))
+                            gr.HTML(get_html("chatbot_more.html").format(
+                                single_turn_label=i18n("单轮对话"),
+                                websearch_label=i18n("在线搜索"),
+                                upload_file_label=i18n("上传文件"),
+                            ))
                             with gr.Row(elem_id="chatbot-input-tb-row"):
                                 with gr.Column(min_width=225, scale=12):
                                     user_input = gr.Textbox(
@@ -162,38 +166,47 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                     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():
-                                with gr.Row():
-                                    with gr.Column(scale=6):
-                                        templateFileSelectDropdown = gr.Dropdown(
-                                            label=i18n("选择Prompt模板集合文件"),
-                                            choices=get_template_names(),
-                                            multiselect=False,
-                                            value=get_template_names()[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()[0], mode=1
-                                            ),
-                                            multiselect=False,
-                                            container=False,
-                                        )
+                    with gr.Tab(label=i18n("对话")):
+                        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(),
+                                                multiselect=False,
+                                                value=get_template_names()[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()[0], mode=1
+                                                ),
+                                                multiselect=False,
+                                                container=False,
+                                            )
+                        gr.Markdown("---", elem_classes="hr-line")
+                        with gr.Accordion(label=i18n("索引"), open=True):
+                            use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox", elem_id="gr-websearch-cb", visible=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("Parameters")):
                         gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️"), elem_id="advanced-warning")
                         with gr.Accordion(i18n("参数"), open=True):
@@ -275,7 +288,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                 lines=1,
                             )
                     with gr.Tab(label=i18n("Extensions")):
-                        gr.Markdown("Will be here soon...\n(We hope)\nAnd we hope you can help us to make more extensions!")
+                        gr.Markdown("Will be here soon...\n(We hope)\n\nAnd we hope you can help us to make more extensions!")
 
                     # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
 
@@ -306,28 +319,23 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         #     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", elem_id="gr-single-session-cb")
-                        use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox", elem_id="gr-websearch-cb")
+                        
                         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", visible=False)
                         use_streaming_checkbox = gr.Checkbox(
                                 label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION, elem_classes="switch-checkbox"
                             )
+                        single_turn_checkbox = gr.Checkbox(label=i18n("单轮对话"), value=False, elem_classes="switch-checkbox", elem_id="gr-single-session-cb")
                         # checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
 
-                    with gr.Tab(i18n("网络参数")):
+                    with gr.Tab(i18n("网络")):
                         gr.Markdown(i18n("⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"), elem_id="netsetting-warning")
                         default_btn = gr.Button(i18n("🔙 恢复默认网络设置"))
                         # 网络代理

web_assets/html/chatbot_more.html

@@ -4,14 +4,14 @@
             <div class="switch-checkbox">
                 <label>
                     <input type="checkbox" name="single-session-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
-                    <span class="chatbot-input-more-span">单轮对话</span>
+                    <span class="chatbot-input-more-span">{single_turn_label}</span>
                 </label>
             </div>
         
             <div class="switch-checkbox">
                 <label>
                     <input type="checkbox" name="online-search-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
-                    <span class="chatbot-input-more-span">在线搜索</span>
+                    <span class="chatbot-input-more-span">{websearch_label}</span>
                 </label>
             </div>
         </span>
@@ -20,7 +20,7 @@
             <div class="chatbot-input-more-btn last-btn">
                 <label>
                     <button id="upload-files-btn">
-                        <span class="chatbot-input-more-span">上传文件</span>
+                        <span class="chatbot-input-more-span">{upload_file_label}</span>
                         <span class="chatbot-input-more-icon">
                             <svg width="17.6625708px" height="22px" viewBox="0 0 17.6625708 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

web_assets/stylesheet/ChuanhuChat.css

@@ -13,7 +13,7 @@
     --switch-checkbox-color-dark: #515151;
 
     --chatbot-blur-background-color: #F3F3F366;
-    --chatbot-input-background-color: rgba(255, 255, 255, 0.32);
+    --chatbot-input-background-color: rgba(255, 255, 255, 0.64);
     --chatbot-input-more-background-color: #FFFFFF;
     --chatbot-input-more-background-fullwidth-hover: #FFFFFF88;
     --chatbot-input-more-background-mobilewidth-hover: #F6F6F6;
@@ -544,7 +544,7 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     visibility: visible;
     /* margin-right: 16px; */
     border-right: 0.5px solid var(--border-color-primary);
-    box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.1) inset;
+    /* box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.1) inset; */
 }
 
 #toolbox-area > div {
@@ -850,10 +850,17 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     理论上不该是0，但这里考虑内部gradio有好多container有padding了 
 } 
 */
-#toolbox-area > .gradio-box > .gradio-tabs > div.tabitem > div > .gradio-markdown {
+#toolbox-area .tabitem > div > .gradio-markdown {
     padding: 12px;
 }
 
+#toolbox-area .tabitem > div > .gradio-accordion > .label-wrap > span {
+    font-weight: bold;
+}
+#toolbox-area .tabitem > div {
+    gap: 0 !important;
+}
+
 /* #chuanhu-popup ul.options {
     transform: translate(-50%, -50%);
 } */

web_assets/stylesheet/custom-components.css

@@ -261,3 +261,8 @@ input:checked + .apSlider::before {
     box-shadow: -6px 0 10px rgba(0, 0, 0, 0.36);
     z-index: 1;
 } */
+
+
+.hr-line hr{
+    margin: 0 !important;
+}