dynamic theme

config.py

@@ -46,7 +46,7 @@ DEFAULT_WORKER_NUM = 3
 # 色彩主题, 可选 ["Default", "Chuanhu-Small-and-Beautiful", "High-Contrast"]
 # 更多主题, 请查阅Gradio主题商店: https://huggingface.co/spaces/gradio/theme-gallery 可选 ["Gstaff/Xkcd", "NoCrypt/Miku", ...]
 THEME = "Default"
-
+AVAIL_THEMES = ["Default", "Chuanhu-Small-and-Beautiful", "High-Contrast", "Gstaff/Xkcd", "NoCrypt/Miku"]
 
 # 对话窗的高度 （仅在LAYOUT="TOP-DOWN"时生效）
 CHATBOT_HEIGHT = 1115

main.py

@@ -8,12 +8,13 @@ def main():
     # 建议您复制一个config_private.py放自己的秘密, 如API和代理网址, 避免不小心传github被别人看到
     proxies, WEB_PORT, LLM_MODEL, CONCURRENT_COUNT, AUTHENTICATION = get_conf('proxies', 'WEB_PORT', 'LLM_MODEL', 'CONCURRENT_COUNT', 'AUTHENTICATION')
     CHATBOT_HEIGHT, LAYOUT, AVAIL_LLM_MODELS, AUTO_CLEAR_TXT = get_conf('CHATBOT_HEIGHT', 'LAYOUT', 'AVAIL_LLM_MODELS', 'AUTO_CLEAR_TXT')
-    ENABLE_AUDIO, AUTO_CLEAR_TXT, PATH_LOGGING = get_conf('ENABLE_AUDIO', 'AUTO_CLEAR_TXT', 'PATH_LOGGING')
+    ENABLE_AUDIO, AUTO_CLEAR_TXT, PATH_LOGGING, AVAIL_THEMES, THEME = get_conf('ENABLE_AUDIO', 'AUTO_CLEAR_TXT', 'PATH_LOGGING', 'AVAIL_THEMES', 'THEME')
 
     # 如果WEB_PORT是-1, 则随机选取WEB端口
     PORT = find_free_port() if WEB_PORT <= 0 else WEB_PORT
     from check_proxy import get_current_version
-    from themes.theme import adjust_theme, advanced_css, theme_declaration
+    from themes.theme import adjust_theme, advanced_css, theme_declaration, load_dynamic_theme
+
     initial_prompt = "Serve me as a writing and programming assistant."
     title_html = f"<h1 align=\"center\">GPT 学术优化 {get_current_version()}</h1>{theme_declaration}"
     description =  "代码开源和更新[地址🚀](https://github.com/binary-husky/gpt_academic)，"
@@ -59,6 +60,7 @@ def main():
     cancel_handles = []
     with gr.Blocks(title="GPT 学术优化", theme=set_theme, analytics_enabled=False, css=advanced_css) as demo:
         gr.HTML(title_html)
+        secret_css, secret_font = gr.Textbox(visible=False), gr.Textbox(visible=False)
         cookies = gr.State(load_chat_cookies())
         with gr_L1():
             with gr_L2(scale=2, elem_id="gpt-chat"):
@@ -123,7 +125,7 @@ def main():
                     max_length_sl = gr.Slider(minimum=256, maximum=8192, value=4096, step=1, interactive=True, label="Local LLM MaxLength",)
                     checkboxes = gr.CheckboxGroup(["基础功能区", "函数插件区", "底部输入区", "输入清除键", "插件参数区"], value=["基础功能区", "函数插件区"], label="显示/隐藏功能区")
                     md_dropdown = gr.Dropdown(AVAIL_LLM_MODELS, value=LLM_MODEL, label="更换LLM模型/请求源").style(container=False)
-                    dark_mode_btn = gr.Button("Toggle Dark Mode ☀", variant="secondary").style(size="sm")
+                    dark_mode_btn = gr.Button("切换界面明暗 ☀", variant="secondary").style(size="sm")
                     dark_mode_btn.click(None, None, None, _js="""() => {
                             if (document.querySelectorAll('.dark').length) {
                                 document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
@@ -132,6 +134,7 @@ def main():
                             }
                         }""",
                     )
+                    theme_dropdown = gr.Dropdown(AVAIL_THEMES, value=THEME, label="更换主题").style(container=False)
                     gr.Markdown(description)
                 with gr.Accordion("备选输入区", open=True, visible=False, elem_id="input-panel2") as area_input_secondary:
                     with gr.Row():
@@ -197,9 +200,34 @@ def main():
                 ret.update({plugin_advanced_arg: gr.update(visible=False, label=f"插件[{k}]不需要高级参数。")})
             return ret
         dropdown.select(on_dropdown_changed, [dropdown], [switchy_bt, plugin_advanced_arg] )
+
         def on_md_dropdown_changed(k):
             return {chatbot: gr.update(label="当前模型："+k)}
         md_dropdown.select(on_md_dropdown_changed, [md_dropdown], [chatbot] )
+
+        def on_theme_dropdown_changed(theme, secret_css):
+            adjust_theme, css_part1, _ = load_dynamic_theme(theme)
+            css_part2 = adjust_theme()._get_theme_css()
+            return css_part2 + css_part1
+        
+        theme_handle = theme_dropdown.select(on_theme_dropdown_changed, [theme_dropdown, secret_css], [secret_css])
+        theme_handle.then(
+            None,
+            [secret_css],
+            None,
+            _js="""(css) => {
+                var existingStyles = document.querySelectorAll("style[data-loaded-css]");
+                for (var i = 0; i < existingStyles.length; i++) {
+                    var style = existingStyles[i];
+                    style.parentNode.removeChild(style);
+                }
+                var styleElement = document.createElement('style');
+                styleElement.setAttribute('data-loaded-css', css);
+                styleElement.innerHTML = css;
+                document.head.appendChild(styleElement);
+            }
+            """
+        )
         # 随变按钮的回调函数注册
         def route(request: gr.Request, k, *args, **kwargs):
             if k in [r"打开插件列表", r"请先从插件列表中选择"]: return

themes/theme.py

@@ -2,17 +2,19 @@ import gradio as gr
 from toolbox import get_conf
 THEME, = get_conf('THEME')
 
-if THEME == 'Chuanhu-Small-and-Beautiful':
+def load_dynamic_theme(THEME):
-    from .green import adjust_theme, advanced_css
+    if THEME == 'Chuanhu-Small-and-Beautiful':
-    theme_declaration = "<h2 align=\"center\"  class=\"small\">[Chuanhu-Small-and-Beautiful主题]</h2>"
+        from .green import adjust_theme, advanced_css
-elif THEME == 'High-Contrast':
+        theme_declaration = "<h2 align=\"center\"  class=\"small\">[Chuanhu-Small-and-Beautiful主题]</h2>"
-    from .contrast import adjust_theme, advanced_css
+    elif THEME == 'High-Contrast':
-    theme_declaration = ""
+        from .contrast import adjust_theme, advanced_css
-elif '/' in THEME:
+        theme_declaration = ""
-    from .gradios import adjust_theme, advanced_css
+    elif '/' in THEME:
-    theme_declaration = ""
+        from .gradios import adjust_theme, advanced_css
-else:
+        theme_declaration = ""
-    from .default import adjust_theme, advanced_css
+    else:
-    theme_declaration = ""
+        from .default import adjust_theme, advanced_css
-
+        theme_declaration = ""
+    return adjust_theme, advanced_css, theme_declaration
 
+adjust_theme, advanced_css, theme_declaration = load_dynamic_theme(THEME)