BREAKING (refactor): 完全重构整理css和js

- 统一CSS class 与 id 变量使用 - 连接符命名
- 完全重写引入 js 与 css 方法，参考sd-webUI
- 分离 js 和 css 到不同文件

fix in merging

ChuanhuChatbot.py

@@ -12,6 +12,7 @@ from modules.config import *
 from modules.utils import *
 from modules.presets import *
 from modules.overwrites import *
+from modules.webui import *
 from modules.models.models import get_model
 
 logging.getLogger("httpx").setLevel(logging.WARNING)
@@ -19,13 +20,13 @@ logging.getLogger("httpx").setLevel(logging.WARNING)
 gr.Chatbot._postprocess_chat_messages = postprocess_chat_messages
 gr.Chatbot.postprocess = postprocess
 
-with open("assets/custom.css", "r", encoding="utf-8") as f:
-    customCSS = f.read()
+# with open("web_assets/css/ChuanhuChat.css", "r", encoding="utf-8") as f:
+#     ChuanhuChatCSS = f.read()
 
 def create_new_model():
     return get_model(model_name = MODELS[DEFAULT_MODEL], access_key = my_api_key)[0]
 
-with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
+with gr.Blocks(theme=small_and_beautiful_theme) as demo:
     user_name = gr.State("")
     promptTemplates = gr.State(load_template(get_template_names(plain=True)[0], mode=2))
     user_question = gr.State("")
@@ -36,10 +37,10 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
     topic = gr.State(i18n("未命名对话历史记录"))
 
     with gr.Row():
-        gr.HTML(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")
+        gr.HTML(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")
         update_info = gr.HTML(get_html("update.html").format(
             current_version=repo_html(),
             version_time=version_time(),
@@ -52,20 +53,20 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
     with gr.Row(equal_height=True):
         with gr.Column(scale=5):
             with gr.Row():
-                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu_chatbot", latex_delimiters=latex_delimiters_set, height=700)
+                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700)
             with gr.Row():
                 with gr.Column(min_width=225, scale=12):
                     user_input = gr.Textbox(
-                        elem_id="user_input_tb",
+                        elem_id="user-input-tb",
                         show_label=False, placeholder=i18n("在这里输入"),
                         container=False
                     )
                 with gr.Column(min_width=42, scale=1):
-                    submitBtn = gr.Button(value="", variant="primary", elem_id="submit_btn")
-                    cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel_btn")
+                    submitBtn = gr.Button(value="", variant="primary", elem_id="submit-btn")
+                    cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel-btn")
             with gr.Row():
                 emptyBtn = gr.Button(
-                    i18n("🧹 新的对话"), elem_id="empty_btn"
+                    i18n("🧹 新的对话"), elem_id="empty-btn"
                 )
                 retryBtn = gr.Button(i18n("🔄 重新生成"))
                 delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
@@ -88,9 +89,9 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         label="API-Key",
                     )
                     if multi_api_key:
-                        usageTxt = gr.Markdown(i18n("多账号模式已开启，无需输入key，可直接开始对话"), elem_id="usage_display", elem_classes="insert_block", visible=show_api_billing)
+                        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)
+                        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
                     )
@@ -98,8 +99,8 @@ with gr.Blocks(css=customCSS, 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")
-                        use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch_checkbox")
+                        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,
@@ -179,12 +180,12 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                                     downloadFile = gr.File(interactive=True)
 
                 with gr.Tab(label=i18n("高级")):
-                    gr.HTML(get_html("appearance_switcher.html").format(label=i18n("切换亮暗色主题")), elem_classes="insert_block")
+                    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"
+                            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")
+                    gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️"), elem_id="advanced-warning")
                     with gr.Accordion(i18n("参数"), open=False):
                         temperature_slider = gr.Slider(
                             minimum=-0,
@@ -265,7 +266,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         )
 
                     with gr.Accordion(i18n("网络参数"), open=False):
-                        gr.Markdown(i18n("---\n⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"), elem_id="netsetting_warning")
+                        gr.Markdown(i18n("---\n⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"), elem_id="netsetting-warning")
                         default_btn = gr.Button(i18n("🔙 恢复默认网络设置"))
                         # 网络代理
                         proxyTxt = gr.Textbox(
@@ -276,7 +277,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                             lines=1,
                             interactive=False,
                             container=False,
-                            elem_classes="view_only_textbox",
+                            elem_classes="view-only-textbox",
                         )
                         # changeProxyBtn = gr.Button(i18n("🔄 设置代理地址"))
 
@@ -289,11 +290,10 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                             lines=1,
                             interactive=False,
                             # container=False,
-                            elem_classes="view_only_textbox no-container",
+                            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")
+                        updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
 
     gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
     gr.HTML(get_html("footer.html").format(versions=versions_html()), elem_id="footer")
@@ -519,6 +519,6 @@ if __name__ == "__main__":
         server_port=server_port,
         share=share,
         auth=auth_from_conf if authflag else None,
-        favicon_path="./assets/favicon.ico",
+        favicon_path="./web_assets/favicon.ico",
         inbrowser=not dockerflag, # 禁止在docker下开启inbrowser
     )

assets/custom.css

@@ -1,699 +0,0 @@
-:root {
-    --chatbot-color-light: #000000;
-    --chatbot-color-dark: #FFFFFF;
-    --chatbot-background-color-light: #F3F3F3;
-    --chatbot-background-color-dark: #121111;
-    --message-user-background-color-light: #95EC69;
-    --message-user-background-color-dark: #26B561;
-    --message-bot-background-color-light: #FFFFFF;
-    --message-bot-background-color-dark: #2C2C2C;
-    --switch-checkbox-color-light: #e5e7eb;
-    --switch-checkbox-color-dark: #515151;
-}
-
-
-#app_title {
-    font-weight: var(--prose-header-text-weight);
-    font-size: var(--text-xxl);
-    line-height: 1.3;
-    text-align: left;
-    margin-top: 6px;
-    white-space: nowrap;
-}
-#description {
-    text-align: center;
-    margin: 32px 0 4px 0;
-}
-
-/* 解决container=False时的错误填充 */
-div.form {
-    background: none !important;
-}
-
-/* 高级页面 */
-#advanced_warning {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    align-content: center;
-}
-
-#netsetting_warning hr {
-    margin-bottom: 1em
-}
-
-.view_only_textbox textarea {
-    -webkit-text-fill-color: #b2b2b2 !important
-}
-
-/* gradio的页脚信息 */
-footer {
-    /* display: none !important; */
-    margin-top: .2em !important;
-    font-size: 85%;
-}
-#footer {
-    text-align: center;
-}
-#footer div {
-    display: inline-block;
-}
-#footer .versions{
-    font-size: 85%;
-    opacity: 0.60;
-}
-
-#float_display {
-    position: absolute;
-    max-height: 30px;
-}
-#toast-update {
-    position: absolute;
-    display: flex;
-    top: -500px;
-    width: 100%;
-    justify-content: center;
-    z-index: var(--layer-top);
-    transition: top 0.3s ease-out;
-}
-#check-chuanhu-update {
-    position: absolute;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: var(--size-6) var(--size-4);
-    box-shadow: var(--shadow-drop-lg);
-    border: 1px solid var(--block-label-border-color);
-    border-radius: var(--container-radius);
-    background: var(--background-fill-primary);
-    padding: var(--size-4) var(--size-6);
-    min-width: 360px;
-    max-width: 480px;
-    overflow: hidden;
-    pointer-events: auto;
-}
-#version-info-title {
-    font-size: 1.2em;
-    font-weight: bold;
-    text-align: start;
-    width: 100%;
-}
-#release-note-wrap {
-    width: 100%;
-    max-width: 400px;
-    height: 120px;
-    border: solid 1px var(--border-color-primary);
-    overflow: auto;
-    padding: 0 8px;
-}
-#release-note-wrap.hideK {
-    display: none;
-}
-.btn-update-group {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    width: 100%;
-    padding-top: 10px;
-}
-.btn-update-group.hideK {
-    display: none;
-}
-span.hideK {
-    display: none;
-}
-#updating-info.hideK {
-    display: none;
-}
-#updating-info {
-    margin: 16px 0px 24px;
-    text-align: start;
-    width: 100%;
-}
-
-/* user_info */
-#user_info.block {
-    white-space: nowrap;
-    position: absolute; left: 8em; top: .8em;
-    z-index: var(--layer-2);
-    box-shadow: var(--block-shadow);
-    border: none!important; border-radius: var(--block-label-radius);
-    background: var(--color-accent);
-    padding: var(--block-label-padding);
-    font-size: var(--block-label-text-size); line-height: var(--line-sm);
-    width: auto; max-height: 30px!important;
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-}
-#user_info.block .wrap {
-    opacity: 0;
-}
-#user_info p {
-    color: white;
-    font-weight: var(--block-label-text-weight);
-}
-#user_info.hideK {
-    opacity: 0;
-    transition: opacity 1s ease-in-out;
-}
-
-div.no-container {
-    padding: 10px 0 0 0 !important;
-}
-
-/* status_display */
-#status_display {
-    display: flex;
-    min-height: 2em;
-    align-items: flex-end;
-    justify-content: flex-end;
-}
-#status_display p {
-    font-size: .85em;
-    font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Microsoft Yahei UI", "Microsoft Yahei", monospace;
-    /* Windows下中文的monospace会fallback为新宋体，实在太丑，这里折中使用微软雅黑 */
-    color: var(--body-text-color-subdued);
-}
-
-#status_display {
-    transition: all 0.6s;
-}
-#chuanhu_chatbot {
-    transition: height 0.3s ease;
-}
-
-/* usage_display */
-.insert_block {
-    position: relative;
-    margin: 0;
-    padding: 8px 12px;
-    box-shadow: var(--block-shadow);
-    border-width: var(--block-border-width);
-    border-color: var(--block-border-color);
-    border-radius: var(--block-radius);
-    background: var(--block-background-fill);
-    width: 100%;
-    line-height: var(--line-sm);
-    min-height: 2em;
-}
-#usage_display p, #usage_display span {
-    margin: 0;
-    font-size: .85em;
-    color: var(--body-text-color-subdued);
-}
-.progress-bar {
-    background-color: var(--input-background-fill);;
-    margin: .5em 0 !important;
-    height: 20px;
-    border-radius: 10px;
-    overflow: hidden;
-}
-.progress {
-    background-color: var(--block-title-background-fill);
-    height: 100%;
-    border-radius: 10px;
-    text-align: right;
-    transition: width 0.5s ease-in-out;
-}
-.progress-text {
-    /* color: white; */
-    color: var(--color-accent) !important;
-    font-size: 1em !important;
-    font-weight: bold;
-    padding-right: 10px;
-    line-height: 20px;
-}
-
-/* 亮暗色模式切换 */
-#apSwitch input[type="checkbox"] {
-    margin: 0 !important;
-}
-#apSwitch label.apSwitch {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    color: var(--body-text-color);
-    font-weight: var(--checkbox-label-text-weight);
-    font-size: var(--checkbox-label-text-size);
-    line-height: var(--line-md);
-    margin: 2px 0 !important;
-}
-input[type="checkbox"]#apSwitch_checkbox::before {
-    background: none !important;
-    content: '🌞';
-    border: none !important;
-    box-shadow: none !important;
-    font-size: 22px;
-    top: -4.4px;
-    left: -1px;
-}
-input:checked[type="checkbox"]#apSwitch_checkbox::before {
-    content: '🌚';
-    left: 16px;
-}
-
-/* .apSwitch {
-    top: 2px;
-    display: inline-block;
-    height: 22px;
-    position: relative;
-    width: 40px;
-    border-radius: 11px;
-    box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.05), inset 0 0 2px 0 rgba(0,0,0,0.08) !important;
-}
-.apSwitch input {
-    display: none !important;
-}
-.apSlider {
-    background-color: var(--neutral-200);
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: .4s;
-    font-size: 22px;
-    border-radius: 11px;
-}
-.apSlider::before {
-    transform: scale(0.9);
-    position: absolute;
-    transition: .4s;
-    content: "🌞";
-}
-input:checked + .apSlider {
-    background-color: var(--primary-600);
-}
-input:checked + .apSlider::before {
-    transform: translateX(18px);
-    content:"🌚";
-} */
-
-.switch_checkbox label {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-}
-.switch_checkbox input[type="checkbox"] + span {
-    margin-left: 0 !important;
-}
-
-.switch_checkbox input[type="checkbox"] {
-    -moz-appearance: none;
-    appearance: none;
-    -webkit-appearance: none;
-    outline: none;
-}
-
-.switch_checkbox input[type="checkbox"] {
-    display: inline-block !important;
-    position: relative !important;
-    border: none !important;
-    outline: none;
-    width: 40px !important;
-    height: 22px !important;
-    border-radius: 11px !important;
-    background-image: none !important;
-    box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.05), inset 0 0 2px 0 rgba(0,0,0,0.08) !important;
-    background-image: none !important;
-    background-color: var(--switch-checkbox-color-light) !important;
-    transition: .2s ease background-color;
-}
-.dark .switch_checkbox input[type="checkbox"] {
-    background-color: var(--switch-checkbox-color-dark) !important;
-}
-.switch_checkbox input[type="checkbox"]::before {
-    content: "";
-    position: absolute;
-    width: 22px;
-    height: 22px;
-    top: 0;
-    left: 0;
-    background: #FFFFFF;
-    border: 0.5px solid rgba(0,0,0,0.02);
-    box-shadow: 0 0 0 0 rgba(0,0,0,0.15), 0 1px 0 0 rgba(0,0,0,0.05);
-    transform: scale(0.9);
-    border-radius: 11px !important;
-    transition: .4s ease all;
-    box-shadow: var(--input-shadow);
-}
-.switch_checkbox input:checked[type="checkbox"] {
-    background-color: var(--primary-600) !important;
-}
-.switch_checkbox input:checked[type="checkbox"]::before {
-    background-color: #fff;
-    left: 18px;
-}
-
-/* Override Slider Styles (for webkit browsers like Safari and Chrome)
- * 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
- * 进度滑块在各个平台还是太不统一了
- */
-input[type="range"] {
-    -webkit-appearance: none;
-    height: 4px;
-    background: var(--input-background-fill);
-    border-radius: 5px;
-    background-image: linear-gradient(var(--primary-500),var(--primary-500));
-    background-size: 0% 100%;
-    background-repeat: no-repeat;
-}
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    border: solid 0.5px #ddd;
-    background-color: white;
-    cursor: ew-resize;
-    box-shadow: var(--input-shadow);
-    transition: background-color .1s ease;
-}
-input[type="range"]::-webkit-slider-thumb:hover {
-    background: var(--neutral-50);
-}
-input[type=range]::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-    box-shadow: none;
-    border: none;
-    background: transparent;
-}
-
-hr.append-display {
-    margin: 8px 0;
-    border: none;
-    height: 1px;
-    border-top-width: 0;
-    background-image: linear-gradient(to right, rgba(50,50,50, 0.1), rgba(150, 150, 150, 0.8), rgba(50,50,50, 0.1));
-}
-.source-a {
-    font-size: 0.8em;
-    max-width: 100%;
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    /* background-color: #dddddd88; */
-    border-radius: 1.5rem;
-    padding: 0.2em;
-}
-.source-a a {
-    display: inline-block;
-    background-color: #aaaaaa50;
-    border-radius: 1rem;
-    padding: 0.5em;
-    text-align: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    min-width: 20%;
-    white-space: nowrap;
-    margin: 0.2rem 0.1rem;
-    text-decoration: none !important;
-    flex: 1;
-    transition: flex 0.5s;
-}
-.source-a a:hover {
-    background-color: #aaaaaa20;
-    flex: 2;
-}
-
-#submit_btn, #cancel_btn {
-    height: 40px !important;
-}
-#submit_btn::before {
-    content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
-    height: 21px;
-}
-#cancel_btn::before {
-    content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
-    height: 21px;
-}
-/* list */
-ol:not(.options), ul:not(.options) {
-    padding-inline-start: 2em !important;
-}
-
-/* 亮色（默认） */
-#chuanhu_chatbot {
-    background-color: var(--chatbot-background-color-light) !important;
-    color: var(--chatbot-color-light) !important;
-}
-[data-testid = "bot"] {
-    background-color: var(--message-bot-background-color-light) !important;
-}
-[data-testid = "user"] {
-    background-color: var(--message-user-background-color-light) !important;
-}
-/* 暗色 */
-.dark #chuanhu_chatbot {
-    background-color: var(--chatbot-background-color-dark) !important;
-    color: var(--chatbot-color-dark) !important;
-}
-.dark [data-testid = "bot"] {
-    background-color: var(--message-bot-background-color-dark) !important;
-}
-.dark [data-testid = "user"] {
-    background-color: var(--message-user-background-color-dark) !important;
-}
-
-/* 屏幕宽度大于等于500px的设备 */
-/* update on 2023.4.8: 高度的细致调整已写入JavaScript */
-@media screen and (min-width: 500px) {
-    #chuanhu_chatbot {
-        height: calc(100vh - 200px);
-    }
-    #chuanhu_chatbot>.wrapper>.wrap {
-        max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
-    }
-}
-/* 屏幕宽度小于500px的设备 */
-@media screen and (max-width: 499px) {
-    #chuanhu_chatbot {
-        height: calc(100vh - 140px);
-    }
-    #chuanhu_chatbot>.wrapper>.wrap {
-        max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
-    }
-    [data-testid = "bot"] {
-        max-width: 95% !important;
-    }
-    #app_title h1{
-        letter-spacing: -1px; font-size: 22px;
-    }
-}
-#chuanhu_chatbot>.wrapper>.wrap {
-    overflow-x: hidden;
-}
-/* 对话气泡 */
-.message {
-    border-radius: var(--radius-xl) !important;
-    border: none;
-    padding: var(--spacing-xl) !important;
-    font-size: var(--text-md) !important;
-    line-height: var(--line-md) !important;
-    min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
-    min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
-}
-[data-testid = "bot"] {
-    max-width: 85%;
-    border-bottom-left-radius: 0 !important;
-}
-[data-testid = "user"] {
-    max-width: 85%;
-    width: auto !important;
-    border-bottom-right-radius: 0 !important;
-}
-
-.message.user p {
-    white-space: pre-wrap;
-}
-.message .user-message {
-    display: block;
-    padding: 0 !important;
-    white-space: pre-wrap;
-}
-
-.message .md-message p {
-    margin-top: 0.6em !important;
-    margin-bottom: 0.6em !important;
-}
-.message .md-message p:first-child { margin-top: 0 !important; }
-.message .md-message p:last-of-type { margin-bottom: 0 !important; }
-
-.message .md-message {
-    display: block;
-    padding: 0 !important;
-}
-.message .raw-message p {
-    margin:0 !important;
-}
-.message .raw-message {
-    display: block;
-    padding: 0 !important;
-    white-space: pre-wrap;
-}
-.message .hideM {
-    display: none;
-}
-
-.message div.icon-button > button[title="copy"] {
-    display: none;
-}
-
-/* 川虎助理 */
-.agent-prefix {
-    font-size: smaller; 
-    opacity: 0.6;
-    padding: 6px 0 4px;
-}
-.agent-prefix::before {
-    content: '🐯';
-    filter: grayscale();
-    padding: 0 4px;
-}
-
-/* custom buttons */
-.chuanhu-btn {
-    border-radius: 5px;
-    /* background-color: #E6E6E6 !important; */
-    color: rgba(120, 120, 120, 0.64) !important;
-    padding: 4px !important;
-    position: absolute;
-    right: -22px;
-    cursor: pointer !important;
-    transition: color .2s ease, background-color .2s ease;
-}
-.chuanhu-btn:hover {
-    background-color: rgba(167, 167, 167, 0.25) !important;
-    color: unset !important;
-}
-.chuanhu-btn:active {
-    background-color: rgba(167, 167, 167, 0.5) !important;
-}
-.chuanhu-btn:focus {
-    outline: none;
-}
-.copy-bot-btn {
-    /* top: 18px; */
-    bottom: 0;
-}
-.toggle-md-btn {
-    /* top: 0; */
-    bottom: 20px;
-}
-.copy-code-btn {
-    position: relative;
-    float: right;
-    font-size: 1em;
-    cursor: pointer;
-}
-
-.message-wrap>div img{
-    border-radius: 10px !important;
-}
-
-/* history message */
-.wrapper>.wrap>.history-message {
-    padding: 10px !important;
-}
-.history-message {
-    /* padding: 0 !important; */
-    opacity: 80%;
-    display: flex;
-    flex-direction: column;
-}
-.history-message>.history-message {
-    padding: 0 !important;
-}
-.history-message>.message-wrap {
-    padding: 0 !important;
-    margin-bottom: 16px;
-}
-.history-message>.message {
-    margin-bottom: 16px;
-}
-.wrapper>.wrap>.history-message::after {
-    content: "";
-    display: block;
-    height: 2px;
-    background-color: var(--body-text-color-subdued);
-    margin-bottom: 10px;
-    margin-top: -10px;
-    clear: both;
-}
-.wrapper>.wrap>.history-message>:last-child::after {
-    content: "仅供查看";
-    display: block;
-    text-align: center;
-    color: var(--body-text-color-subdued);
-    font-size: 0.8em;
-}
-
-/* 表格 */
-table {
-    margin: 1em 0;
-    border-collapse: collapse;
-    empty-cells: show;
-}
-td,th {
-    border: 1.2px solid var(--border-color-primary) !important;
-    padding: 0.2em;
-}
-thead {
-    background-color: rgba(175,184,193,0.2);
-}
-thead th {
-    padding: .5em .2em;
-}
-/* 行内代码 */
-.message :not(pre) code {
-    display: inline;
-    white-space: break-spaces;
-    font-family: var(--font-mono);
-    border-radius: 6px;
-    margin: 0 2px 0 2px;
-    padding: .2em .4em .1em .4em;
-    background-color: rgba(175,184,193,0.2);
-}
-/* 代码块 */
-.message pre,
-.message pre[class*=language-] {
-    color: #fff;
-    overflow-x: auto;
-    overflow-y: hidden;
-    margin: .8em 1em 1em 0em !important;
-    padding: var(--spacing-xl) 1.2em !important;
-    border-radius: var(--radius-lg) !important;
-}
-.message pre code,
-.message pre code[class*=language-] {
-    color: #fff;
-    padding: 0;
-    margin: 0;
-    background-color: unset;
-    text-shadow: none;
-    font-family: var(--font-mono);
-}
-/* 覆盖 gradio 丑陋的复制按钮样式 */
-pre button[title="copy"] {
-    border-radius: 5px;
-    transition: background-color .2s ease;
-}
-pre button[title="copy"]:hover {
-    background-color: #333232;
-}
-pre button .check {
-    color: #fff !important;
-    background: var(--neutral-950) !important;
-}
-
-/* 覆盖prism.css */
-.language-css .token.string,
-.style .token.string,
-.token.entity,
-.token.operator,
-.token.url {
-    background: none !important;
-}

assets/html/appearance_switcher.html

@@ -1,6 +0,0 @@
-<div class="switch_checkbox" id="apSwitch">
-    <label class="apSwitch">
-        <input type="checkbox" id="apSwitch_checkbox" data-testid="checkbox" />
-        <span class="apSwitch_span">{label}</span>
-    </label>
-</div>

modules/overwrites.py

@@ -70,24 +70,3 @@ def postprocess_chat_messages(
             return chat_message
         else:
             raise ValueError(f"Invalid message for Chatbot component: {chat_message}")
-
-with open("./assets/custom.js", "r", encoding="utf-8") as f, \
-    open("./assets/external-scripts.js", "r", encoding="utf-8") as f1:
-    customJS = f.read()
-    externalScripts = f1.read()
-
-
-def reload_javascript():
-    print("Reloading javascript...")
-    js = f'<script>{customJS}</script><script async>{externalScripts}</script>'
-    js += '<script async src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
-    js += '<script async type="module" src="http://spin.js.org/spin.umd.js"></script><link type="text/css" href="https://spin.js.org/spin.css" rel="stylesheet" />'
-    def template_response(*args, **kwargs):
-        res = GradioTemplateResponseOriginal(*args, **kwargs)
-        res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))
-        res.init_headers()
-        return res
-
-    gr.routes.templates.TemplateResponse = template_response
-
-GradioTemplateResponseOriginal = gr.routes.templates.TemplateResponse

modules/shared.py

@@ -62,3 +62,4 @@ state = State()
 
 modules_path = os.path.dirname(os.path.realpath(__file__))
 chuanhu_path = os.path.dirname(modules_path)
+assets_path = os.path.join(chuanhu_path, "web_assets")

modules/utils.py

@@ -624,12 +624,6 @@ def update_chuanhu():
         status = '<span id="update-status" class="hideK">failure</span>'
         return gr.Markdown.update(value=i18n("更新失败，请尝试[手动更新](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新)")+status)
 
-def get_html(filename):
-    path = os.path.join(shared.chuanhu_path, "assets", "html", filename)
-    if os.path.exists(path):
-        with open(path, encoding="utf8") as file:
-            return file.read()
-    return ""
 
 def add_source_numbers(lst, source_name = "Source", use_source = True):
     if use_source:

modules/webui.py

@@ -0,0 +1,70 @@
+
+from collections import namedtuple
+import os
+import gradio as gr
+
+from . import shared
+
+# with open("./assets/ChuanhuChat.js", "r", encoding="utf-8") as f, \
+#     open("./assets/external-scripts.js", "r", encoding="utf-8") as f1:
+#     customJS = f.read()
+#     externalScripts = f1.read()
+
+
+def get_html(filename):
+    path = os.path.join(shared.chuanhu_path, "web_assets", "html", filename)
+    if os.path.exists(path):
+        with open(path, encoding="utf8") as file:
+            return file.read()
+    return ""
+
+def webpath(fn):
+    if fn.startswith(shared.assets_path):
+        web_path = os.path.relpath(fn, shared.chuanhu_path).replace('\\', '/')
+    else:
+        web_path = os.path.abspath(fn)
+    return f'file={web_path}?{os.path.getmtime(fn)}'
+
+ScriptFile = namedtuple("ScriptFile", ["basedir", "filename", "path"])
+
+def javascript_html():
+    head = ""
+    for script in list_scripts("javascript", ".js"):
+        head += f'<script type="text/javascript" src="{webpath(script.path)}"></script>\n'
+    for script in list_scripts("javascript", ".mjs"):
+        head += f'<script type="module" src="{webpath(script.path)}"></script>\n'
+    return head
+
+def css_html():
+    head = ""
+    for cssfile in list_scripts("stylesheet", ".css"):
+        head += f'<link rel="stylesheet" property="stylesheet" href="{webpath(cssfile.path)}">'
+    return head
+
+def list_scripts(scriptdirname, extension):
+    scripts_list = []
+    scripts_dir = os.path.join(shared.chuanhu_path, "web_assets", scriptdirname)
+    if os.path.exists(scripts_dir):
+        for filename in sorted(os.listdir(scripts_dir)):
+            scripts_list.append(ScriptFile(shared.assets_path, filename, os.path.join(scripts_dir, filename)))
+    scripts_list = [x for x in scripts_list if os.path.splitext(x.path)[1].lower() == extension and os.path.isfile(x.path)]
+    return scripts_list
+
+
+def reload_javascript():
+    js = javascript_html()
+    js += '<script async type="module" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
+    js += '<script async type="module" src="http://spin.js.org/spin.umd.js"></script><link type="text/css" href="https://spin.js.org/spin.css" rel="stylesheet" />'
+    
+    css = css_html()
+
+    def template_response(*args, **kwargs):
+        res = GradioTemplateResponseOriginal(*args, **kwargs)
+        res.body = res.body.replace(b'</head>', f'{js}</head>'.encode("utf8"))
+        res.body = res.body.replace(b'</body>', f'{css}</body>'.encode("utf8"))
+        res.init_headers()
+        return res
+
+    gr.routes.templates.TemplateResponse = template_response
+
+GradioTemplateResponseOriginal = gr.routes.templates.TemplateResponse

web_assets/html/appearance_switcher.html

@@ -0,0 +1,6 @@
+<div class="switch-checkbox" id="apSwitch">
+    <label class="apSwitch">
+        <input type="checkbox" id="apSwitch-checkbox" data-testid="checkbox" />
+        <span class="apSwitch-span">{label}</span>
+    </label>
+</div>

{assets → web_assets}/html/update.html

@@ -22,8 +22,8 @@
             <button class="btn-update lg primary svelte-cmf5ev" id="update-button" onclick="bgUpdateChuanhu()">{update_btn}</button>
         </div>
         <div id="close-update-btn" class="btn-update-group hideK">
-            <button class="btn-update lg secondary svelte-cmf5ev" id="update-button" onclick="getUpdateInfo()">{seenew_btn}</button>
-            <button class="btn-update lg primary svelte-cmf5ev" id="cancel-button" onclick="cancelUpdate()">{ok_btn}</button>
+            <button class="btn-update lg secondary svelte-cmf5ev" id="seenew-button" onclick="getUpdateInfo()">{seenew_btn}</button>
+            <button class="btn-update lg primary svelte-cmf5ev" id="ok-button" onclick="cancelUpdate()">{ok_btn}</button>
         </div>
     </div>
 </div>

assets/custom.js → web_assets/javascript/ChuanhuChat.js

@@ -1,5 +1,5 @@
 
-// custom javascript here
+// ChuanhuChat core javascript
 
 const MAX_HISTORY_LENGTH = 32;
 
@@ -25,75 +25,10 @@ var sliders = null;
 var updateChuanhuBtn = null;
 var statusDisplay = null;
 
-var userLogged = false;
-var usernameGotten = false;
-var historyLoaded = false;
-var updateInfoGotten = false;
-var isLatestVersion = localStorage.getItem('isLatestVersion') || false;
 
-var ga = document.getElementsByTagName("gradio-app");
-var targetNode = ga[0];
 var isInIframe = (window.self !== window.top);
-var language = navigator.language.slice(0,2);
 var currentTime = new Date().getTime();
 
-// i18n
-const forView_i18n = {
-    'zh': "仅供查看",
-    'en': "For viewing only",
-    'ja': "閲覧専用",
-    'ko': "읽기 전용",
-    'fr': "Pour consultation seulement",
-    'es': "Solo para visualización",
-    'sv': "Endast för visning",
-};
-
-const deleteConfirm_i18n_pref = {
-    'zh': "你真的要删除 ",
-    'en': "Are you sure you want to delete ",
-    'ja': "本当に ",
-    'ko': "정말로 ",
-    'sv': "Är du säker på att du vill ta bort "
-};
-const deleteConfirm_i18n_suff = {
-    'zh': " 吗？",
-    'en': " ?",
-    'ja': " を削除してもよろしいですか？",
-    'ko': " 을(를) 삭제하시겠습니까?",
-    'sv': " ?"
-};
-var deleteConfirm_msg_pref = "Are you sure you want to delete ";
-var deleteConfirm_msg_suff = " ?";
-
-const usingLatest_i18n = {
-    'zh': "您使用的就是最新版！",
-    'en': "You are using the latest version!",
-    'ja': "最新バージョンを使用しています！",
-    'ko': "최신 버전을 사용하고 있습니다!",
-    'sv': "Du använder den senaste versionen!"
-};
-
-const updatingMsg_i18n = {
-    'zh': "正在尝试更新...",
-    'en': "Trying to update...",
-    'ja': "更新を試みています...",
-    'ko': "업데이트를 시도 중...",
-    'sv': "Försöker uppdatera..."
-}
-const updateSuccess_i18n = {
-    'zh': "更新成功，请重启本程序。",
-    'en': "Updated successfully, please restart this program.",
-    'ja': "更新が成功しました、このプログラムを再起動してください。",
-    'ko': "업데이트 성공, 이 프로그램을 재시작 해주세요.",
-    'sv': "Uppdaterat framgångsrikt, starta om programmet."
-}
-const updateFailure_i18n = {
-    'zh': '更新失败，请尝试<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">手动更新</a>。',
-    'en': 'Update failed, please try <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">manually updating</a>.',
-    'ja': '更新に失敗しました、<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">手動での更新</a>をお試しください。',
-    'ko': '업데이트 실패, <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">수동 업데이트</a>를 시도하십시오.',
-    'sv': 'Uppdateringen misslyckades, prova att <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">uppdatera manuellt</a>.'
-}
 
 // gradio 页面加载好了么??? 我能动你的元素了么??
 function gradioLoaded(mutations) {
@@ -101,18 +36,18 @@ function gradioLoaded(mutations) {
         if (mutations[i].addedNodes.length) {
             loginUserForm = document.querySelector(".gradio-container > .main > .wrap > .panel > .form")
             gradioContainer = document.querySelector(".gradio-container");
-            user_input_tb = document.getElementById('user_input_tb');
-            userInfoDiv = document.getElementById("user_info");
-            appTitleDiv = document.getElementById("app_title");
-            chatbot = document.querySelector('#chuanhu_chatbot');
-            chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrapper > .wrap');
+            user_input_tb = document.getElementById('user-input-tb');
+            userInfoDiv = document.getElementById("user-info");
+            appTitleDiv = document.getElementById("app-title");
+            chatbot = document.querySelector('#chuanhu-chatbot');
+            chatbotWrap = document.querySelector('#chuanhu-chatbot > .wrapper > .wrap');
             apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
             updateToast = document.querySelector("#toast-update");
-            sendBtn = document.getElementById("submit_btn");
-            cancelBtn = document.getElementById("cancel_btn");
+            sendBtn = document.getElementById("submit-btn");
+            cancelBtn = document.getElementById("cancel-btn");
             sliders = document.querySelectorAll('input[type="range"]');
-            updateChuanhuBtn = document.getElementById("update_chuanhu_btn");
-            statusDisplay = document.querySelector('#status_display');
+            updateChuanhuBtn = document.getElementById("update-chuanhu-btn");
+            statusDisplay = document.querySelector('#status-display');
 
             if (loginUserForm) {
                 localStorage.setItem("userLogged", true);
@@ -161,23 +96,9 @@ function gradioLoaded(mutations) {
     }
 }
 
-function webLocale() {
-    // console.log("webLocale", language);
-    if (forView_i18n.hasOwnProperty(language)) {
-        var forView = forView_i18n[language];
-        var forViewStyle = document.createElement('style');
-        forViewStyle.innerHTML = '.wrapper>.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
-        document.head.appendChild(forViewStyle);
-    }
-    if (deleteConfirm_i18n_pref.hasOwnProperty(language)) {
-        deleteConfirm_msg_pref = deleteConfirm_i18n_pref[language];
-        deleteConfirm_msg_suff = deleteConfirm_i18n_suff[language];
-    }
-}
-
 function showConfirmationDialog(a, file, c) {
     if (file != "") {
-        var result = confirm(deleteConfirm_msg_pref + file + deleteConfirm_msg_suff);
+        var result = confirm(i18n(deleteConfirm_i18n_pref) + file + i18n(deleteConfirm_i18n_suff));
         if (result) {
             return [a, file, c];
         }
@@ -241,118 +162,24 @@ function disableSendBtn() {
     });
 }
 
-var username = null;
-function getUserInfo() {
-    if (usernameGotten) {
-        return;
-    }
-    userLogged = localStorage.getItem('userLogged');
-    if (userLogged) {
-        username = userInfoDiv.innerText;
-        if (username) {
-            if (username.includes("getting user info…")) {
-                setTimeout(getUserInfo, 500);
-                return;
-            } else if (username === " ") {
-                localStorage.removeItem("username");
-                localStorage.removeItem("userLogged")
-                userLogged = false;
-                usernameGotten = true;
-                return;
-            } else {
-                username = username.match(/User:\s*(.*)/)[1] || username;
-                localStorage.setItem("username", username);
-                usernameGotten = true;
-                clearHistoryHtml();
-            }
-        }
-    }
-}
-
-function toggleUserInfoVisibility(shouldHide) {
-    if (userInfoDiv) {
-        if (shouldHide) {
-            userInfoDiv.classList.add("hideK");
+function adjustDarkMode() {
+    function toggleDarkMode(isEnabled) {
+        if (isEnabled) {
+            document.body.classList.add("dark");
+            document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
         } else {
-            userInfoDiv.classList.remove("hideK");
+            document.body.classList.remove("dark");
+            document.body.style.backgroundColor = "";
         }
     }
-}
-function showOrHideUserInfo() {
-    // Bind mouse/touch events to show/hide user info
-    appTitleDiv.addEventListener("mouseenter", function () {
-        toggleUserInfoVisibility(false);
-    });
-    userInfoDiv.addEventListener("mouseenter", function () {
-        toggleUserInfoVisibility(false);
-    });
-    sendBtn.addEventListener("mouseenter", function () {
-        toggleUserInfoVisibility(false);
-    });
-
-    appTitleDiv.addEventListener("mouseleave", function () {
-        toggleUserInfoVisibility(true);
-    });
-    userInfoDiv.addEventListener("mouseleave", function () {
-        toggleUserInfoVisibility(true);
-    });
-    sendBtn.addEventListener("mouseleave", function () {
-        toggleUserInfoVisibility(true);
-    });
-
-    appTitleDiv.ontouchstart = function () {
-        toggleUserInfoVisibility(false);
-    };
-    userInfoDiv.ontouchstart = function () {
-        toggleUserInfoVisibility(false);
-    };
-    sendBtn.ontouchstart = function () {
-        toggleUserInfoVisibility(false);
-    };
-
-    appTitleDiv.ontouchend = function () {
-        setTimeout(function () {
-            toggleUserInfoVisibility(true);
-        }, 3000);
-    };
-    userInfoDiv.ontouchend = function () {
-        setTimeout(function () {
-            toggleUserInfoVisibility(true);
-        }, 3000);
-    };
-    sendBtn.ontouchend = function () {
-        setTimeout(function () {
-            toggleUserInfoVisibility(true);
-        }, 3000); // Delay 1 second to hide user info
-    };
-
-    // Hide user info after 2 second
-    setTimeout(function () {
-        toggleUserInfoVisibility(true);
-    }, 2000);
-}
-
-function toggleDarkMode(isEnabled) {
-    if (isEnabled) {
-        document.body.classList.add("dark");
-        document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
-    } else {
-        document.body.classList.remove("dark");
-        document.body.style.backgroundColor = "";
-    }
-}
-function adjustDarkMode() {
+    
     const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-    // 根据当前颜色模式设置初始状态
     apSwitch.checked = darkModeQuery.matches;
     toggleDarkMode(darkModeQuery.matches);
-    // 监听颜色模式变化
     darkModeQuery.addEventListener("change", (e) => {
         apSwitch.checked = e.matches;
         toggleDarkMode(e.matches);
     });
-    // apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
     apSwitch.addEventListener("change", (e) => {
         toggleDarkMode(e.target.checked);
     });
@@ -360,7 +187,7 @@ function adjustDarkMode() {
 
 function setChatbotHeight() {
     const screenWidth = window.innerWidth;
-    const statusDisplay = document.querySelector('#status_display');
+    const statusDisplay = document.querySelector('#status-display');
     const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
@@ -384,385 +211,27 @@ function setChatbotScroll() {
     var scrollHeight = chatbotWrap.scrollHeight;
     chatbotWrap.scrollTo(0,scrollHeight)
 }
-var rangeInputs = null;
-var numberInputs = null;
-function setSlider() {
-    rangeInputs = document.querySelectorAll('input[type="range"]');
-    numberInputs = document.querySelectorAll('input[type="number"]')
-    setSliderRange();
-    rangeInputs.forEach(rangeInput => {
-        rangeInput.addEventListener('input', setSliderRange);
-    });
-    numberInputs.forEach(numberInput => {
-        numberInput.addEventListener('input', setSliderRange);
-    })
-}
-function setSliderRange() {
-    var range = document.querySelectorAll('input[type="range"]');
-    range.forEach(range => {
-        range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
-    });
-}
-
-function addChuanhuButton(botElement) {
-    var rawMessage = botElement.querySelector('.raw-message');
-    var mdMessage = botElement.querySelector('.md-message');
-    // var gradioCopyMsgBtn = botElement.querySelector('div.icon-button>button[title="copy"]'); // 获取 gradio 的 copy button，它可以读取真正的原始 message
-    if (!rawMessage) {
-        var buttons = botElement.querySelectorAll('button.chuanhu-btn');
-        for (var i = 0; i < buttons.length; i++) {
-            buttons[i].parentNode.removeChild(buttons[i]);
-        }
-        return;
-    }
-    var oldCopyButton = null;
-    var oldToggleButton = null;
-    oldCopyButton = botElement.querySelector('button.copy-bot-btn');
-    oldToggleButton = botElement.querySelector('button.toggle-md-btn');
-    if (oldCopyButton) oldCopyButton.remove();
-    if (oldToggleButton) oldToggleButton.remove();
-
-    // Copy bot button
-    var copyButton = document.createElement('button');
-    copyButton.classList.add('chuanhu-btn');
-    copyButton.classList.add('copy-bot-btn');
-    copyButton.setAttribute('aria-label', 'Copy');
-    copyButton.innerHTML = copyIcon;
-
-    copyButton.addEventListener('click', async () => {
-        const textToCopy = rawMessage.innerText;
-        try {
-            if ("clipboard" in navigator) {
-                await navigator.clipboard.writeText(textToCopy);
-                copyButton.innerHTML = copiedIcon;
-                setTimeout(() => {
-                    copyButton.innerHTML = copyIcon;
-                }, 1500);
-            } else {
-                const textArea = document.createElement("textarea");
-                textArea.value = textToCopy;
-                document.body.appendChild(textArea);
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    copyButton.innerHTML = copiedIcon;
-                    setTimeout(() => {
-                        copyButton.innerHTML = copyIcon;
-                    }, 1500);
-                } catch (error) {
-                    console.error("Copy failed: ", error);
-                }
-                document.body.removeChild(textArea);
-            }
-        } catch (error) {
-            console.error("Copy failed: ", error);
-        }
-    });
-    botElement.appendChild(copyButton);
-
-    // Toggle button
-    var toggleButton = document.createElement('button');
-    toggleButton.classList.add('chuanhu-btn');
-    toggleButton.classList.add('toggle-md-btn');
-    toggleButton.setAttribute('aria-label', 'Toggle');
-    var renderMarkdown = mdMessage.classList.contains('hideM');
-    toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
-    toggleButton.addEventListener('click', () => {
-        renderMarkdown = mdMessage.classList.contains('hideM');
-        if (renderMarkdown){
-            renderMarkdownText(botElement);
-            toggleButton.innerHTML=rawIcon;
-        } else {
-            removeMarkdownText(botElement);
-            toggleButton.innerHTML=mdIcon;
-        }
-    });
-    botElement.insertBefore(toggleButton, copyButton);
-}
-
-function renderMarkdownText(message) {
-    var mdDiv = message.querySelector('.md-message');
-    if (mdDiv) mdDiv.classList.remove('hideM');
-    var rawDiv = message.querySelector('.raw-message');
-    if (rawDiv) rawDiv.classList.add('hideM');
-}
-function removeMarkdownText(message) {
-    var rawDiv = message.querySelector('.raw-message');
-    if (rawDiv) {
-        rawPre = rawDiv.querySelector('pre');
-        if (rawPre) rawDiv.innerHTML = rawPre.innerHTML;
-        rawDiv.classList.remove('hideM');
-    }
-    var mdDiv = message.querySelector('.md-message');
-    if (mdDiv) mdDiv.classList.add('hideM');
-}
 
-let timeoutId;
-let isThrottled = false;
-var mmutation
-// 监听chatWrap元素的变化，为 bot 消息添加复制按钮。
-var mObserver = new MutationObserver(function (mutationsList) {
-    for (mmutation of mutationsList) {
-        if (mmutation.type === 'childList') {
-            for (var node of mmutation.addedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message')) {
-                    saveHistoryHtml();
-                    disableSendBtn();
-                    document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                }
-            }
-            for (var node of mmutation.removedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message')) {
-                    saveHistoryHtml();
-                    disableSendBtn();
-                    document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                }
-            }
-        } else if (mmutation.type === 'attributes') {
-            if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
-            isThrottled = true;
-            clearTimeout(timeoutId);
-            timeoutId = setTimeout(() => {
-                isThrottled = false;
-                document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                saveHistoryHtml();
-                disableSendBtn();
-            }, 1500);
-        }
-    }
-});
-// mObserver.observe(targetNode, { attributes: true, childList: true, subtree: true, characterData: true});
 
 var submitObserver = new MutationObserver(function (mutationsList) {
-    document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
     saveHistoryHtml();
 });
 
-var statusObserver = new MutationObserver(function (mutationsList) {
-    for (const mutation of mutationsList) {
-        if (mutation.type === 'attributes' || mutation.type === 'childList') {
-            if (statusDisplay.innerHTML.includes('<span id="update-status"')) {
-                if (getUpdateStatus() === "success") {
-                    updatingInfoElement.innerText = updateSuccess_i18n.hasOwnProperty(language) ? updateSuccess_i18n[language] : updateSuccess_i18n['en'];
-                    noUpdateHtml();
-                    localStorage.setItem('isLatestVersion', 'true');
-                    isLatestVersion = true;
-                } else if (getUpdateStatus() === "failure") {
-                    updatingInfoElement.innerText = updateFailure_i18n.hasOwnProperty(language) ? updateFailure_i18n[language] : updateFailure_i18n['en'];
-                } else if (getUpdateStatus() != "") {
-                    updatingInfoElement.innerText = getUpdateStatus();
-                }
-                updateStatus.parentNode.removeChild(updateStatus);
-                enableUpdateBtns();
-                updateSpinner.stop();
-            }
-        }
-    }
-});
-
-var loadhistorytime = 0; // for debugging
-function saveHistoryHtml() {
-    var historyHtml = document.querySelector('#chuanhu_chatbot>.wrapper>.wrap');
-    if (!historyHtml) return;   // no history, do nothing
-    localStorage.setItem('chatHistory', historyHtml.innerHTML);
-    // console.log("History Saved")
-    historyLoaded = false;
-}
-function loadHistoryHtml() {
-    var historyHtml = localStorage.getItem('chatHistory');
-    if (!historyHtml) {
-        historyLoaded = true;
-        return; // no history, do nothing
-    }
-    userLogged = localStorage.getItem('userLogged');
-    if (userLogged){
-        historyLoaded = true;
-        return; // logged in, do nothing
-    }
-    if (!historyLoaded) {
-        var tempDiv = document.createElement('div');
-        tempDiv.innerHTML = historyHtml;
-        var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
-        var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
-        for (var i = 0; i < buttons.length; i++) {
-            buttons[i].parentNode.removeChild(buttons[i]);
-        }
-        for (var i = 0; i < gradioCopyButtons.length; i++) {
-            gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
-        }
-        var fakeHistory = document.createElement('div');
-        fakeHistory.classList.add('history-message');
-        fakeHistory.innerHTML = tempDiv.innerHTML;
-        webLocale();
-        chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
-        // var fakeHistory = document.createElement('div');
-        // fakeHistory.classList.add('history-message');
-        // fakeHistory.innerHTML = historyHtml;
-        // chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
-        historyLoaded = true;
-        console.log("History Loaded");
-        loadhistorytime += 1; // for debugging
-    } else {
-        historyLoaded = false;
-    }
-}
-function clearHistoryHtml() {
-    localStorage.removeItem("chatHistory");
-    historyMessages = chatbotWrap.querySelector('.history-message');
-    if (historyMessages) {
-        chatbotWrap.removeChild(historyMessages);
-        console.log("History Cleared");
-    }
-}
-
-var showingUpdateInfo = false;
-async function getLatestRelease() {
-    try {
-        const response = await fetch('https://api.github.com/repos/gaizhenbiao/chuanhuchatgpt/releases/latest');
-        if (!response.ok) {
-            console.log(`Error: ${response.status} - ${response.statusText}`);
-            updateInfoGotten = true;
-            return null;
-        }
-        const data = await response.json();
-        updateInfoGotten = true;
-        return data;
-    } catch (error) {
-        console.log(`Error: ${error}`);
-        updateInfoGotten = true;
-        return null;
-    }
-}
-
-var releaseNoteElement = document.getElementById('release-note-content');
-var updatingInfoElement = document.getElementById('updating-info');
-async function updateLatestVersion() {
-    const currentVersionElement = document.getElementById('current-version');
-    const latestVersionElement = document.getElementById('latest-version-title');
-    releaseNoteElement = document.getElementById('release-note-content');
-    updatingInfoElement = document.getElementById('updating-info');
-    const currentVersion = currentVersionElement.textContent;
-    const versionTime = document.getElementById('version-time').innerText;
-    const localVersionTime = versionTime !== "unknown" ? (new Date(versionTime)).getTime() : 0;
-    updateInfoGotten = true; //无论成功与否都只执行一次，否则容易api超限...
-    try {
-        const data = await getLatestRelease();
-        const releaseNote = data.body;
-        if (releaseNote) {
-            releaseNoteElement.innerHTML = marked.parse(releaseNote, {mangle: false, headerIds: false});
-        }
-        const latestVersion = data.tag_name;
-        const latestVersionTime = (new Date(data.created_at)).getTime();
-        if (latestVersionTime) {
-            if (localVersionTime < latestVersionTime) {
-                latestVersionElement.textContent = latestVersion;
-                console.log(`New version ${latestVersion} found!`);
-                if (!isInIframe) {openUpdateToast();}      
-            } else {
-                noUpdate();
-            }
-            currentTime = new Date().getTime();
-            localStorage.setItem('lastCheckTime', currentTime);
-        }
-    } catch (error) {
-        console.error(error);
-    }
-}
-function getUpdateInfo() {
-    window.open('https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest', '_blank');
-    closeUpdateToast();
-}
-var updateSpinner = null;
-function bgUpdateChuanhu() {
-    updateChuanhuBtn.click();
-    updatingInfoElement.innerText = updatingMsg_i18n.hasOwnProperty(language) ? updatingMsg_i18n[language] : updatingMsg_i18n['en'];
-    var updatingSpinner = document.getElementById('updating-spinner');
-    updateSpinner = new Spin.Spinner({color:'#06AE56',top:'45%',lines:9}).spin(updatingSpinner);
-    updatingInfoElement.classList.remove('hideK');
-    disableUpdateBtns();
-    const releaseNoteWrap = document.getElementById('release-note-wrap');
-    releaseNoteWrap.style.setProperty('display', 'none');
-    statusObserver.observe(statusDisplay, { childList: true, subtree: true, characterData: true});
-}
-function cancelUpdate() {
-    closeUpdateToast();
-}
-function openUpdateToast() {
-    showingUpdateInfo = true;
-    setUpdateWindowHeight();
-}
-function closeUpdateToast() {
-    updateToast.style.setProperty('top', '-500px');
-    showingUpdateInfo = false;
-    if (updatingInfoElement.classList.contains('hideK') === false) {
-        updatingInfoElement.classList.add('hideK');
-    }
-}
-function manualCheckUpdate() {
-    openUpdateToast();
-    updateLatestVersion();
-    currentTime = new Date().getTime();
-    localStorage.setItem('lastCheckTime', currentTime);
-}
-function noUpdate() {
-    localStorage.setItem('isLatestVersion', 'true');
-    isLatestVersion = true;
-    noUpdateHtml();
-}
-function noUpdateHtml() {
-    const versionInfoElement = document.getElementById('version-info-title');
-    const gotoUpdateBtn = document.getElementById('goto-update-btn');
-    const closeUpdateBtn = document.getElementById('close-update-btn');
-    const releaseNoteWrap = document.getElementById('release-note-wrap');
-    releaseNoteWrap.style.setProperty('display', 'none');
-    versionInfoElement.textContent = usingLatest_i18n.hasOwnProperty(language) ? usingLatest_i18n[language] : usingLatest_i18n['en'];
-    gotoUpdateBtn.classList.add('hideK');
-    closeUpdateBtn.classList.remove('hideK');
-}
-var updateStatus = null;
-function getUpdateStatus() {
-    updateStatus = statusDisplay.querySelector("#update-status");
-    if (updateStatus) {
-        return updateStatus.innerText;
-    } else {
-        return "unknown";
-    }
-}
-
-function disableUpdateBtns() {
-    const updatesButtons = document.querySelectorAll('.btn-update');
-    updatesButtons.forEach( function (btn) {
-        btn.disabled = true;
-    });
-}
-function enableUpdateBtns() {
-    const updatesButtons = document.querySelectorAll('.btn-update');
-    updatesButtons.forEach( function (btn) {
-        btn.disabled = false;
-    });
-}
-
-function setUpdateWindowHeight() {
-    if (!showingUpdateInfo) {return;}
-    const scrollPosition = window.scrollY;
-    // const originalTop = updateToast.style.getPropertyValue('top');
-    const resultTop = scrollPosition - 20 + 'px';
-    updateToast.style.setProperty('top', resultTop);
-}
-    
 // 监视页面内部 DOM 变动
 var observer = new MutationObserver(function (mutations) {
     gradioLoaded(mutations);
 });
-observer.observe(targetNode, { childList: true, subtree: true });
 
 // 监视页面变化
 window.addEventListener("DOMContentLoaded", function () {
+    const ga = document.getElementsByTagName("gradio-app");
+    observer.observe(ga[0], { childList: true, subtree: true });
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
 });
 window.addEventListener('resize', setChatbotHeight);
-window.addEventListener('scroll', function(){setChatbotHeight();setUpdateWindowHeight();});
+window.addEventListener('scroll', function(){setChatbotHeight(); setUpdateWindowHeight();});
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
 
 // console suprise

web_assets/javascript/chat-history.js

@@ -0,0 +1,62 @@
+
+var historyLoaded = false;
+var loadhistorytime = 0; // for debugging
+
+
+function saveHistoryHtml() {
+    var historyHtml = document.querySelector('#chuanhu-chatbot>.wrapper>.wrap');
+    if (!historyHtml) return;   // no history, do nothing
+    localStorage.setItem('chatHistory', historyHtml.innerHTML);
+    // console.log("History Saved")
+    historyLoaded = false;
+}
+
+function loadHistoryHtml() {
+    var historyHtml = localStorage.getItem('chatHistory');
+    if (!historyHtml) {
+        historyLoaded = true;
+        return; // no history, do nothing
+    }
+    userLogged = localStorage.getItem('userLogged');
+    if (userLogged){
+        historyLoaded = true;
+        return; // logged in, do nothing
+    }
+    if (!historyLoaded) {
+        var tempDiv = document.createElement('div');
+        tempDiv.innerHTML = historyHtml;
+        var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
+        var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].parentNode.removeChild(buttons[i]);
+        }
+        for (var i = 0; i < gradioCopyButtons.length; i++) {
+            gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
+        }
+        var fakeHistory = document.createElement('div');
+        fakeHistory.classList.add('history-message');
+        fakeHistory.innerHTML = tempDiv.innerHTML;
+        const forViewStyle = document.createElement('style');
+        forViewStyle.innerHTML = '.wrapper>.wrap>.history-message>:last-child::after { content: "' + i18n(forView_i18n) + '"!important; }';
+        document.head.appendChild(forViewStyle);
+        chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        // var fakeHistory = document.createElement('div');
+        // fakeHistory.classList.add('history-message');
+        // fakeHistory.innerHTML = historyHtml;
+        // chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        historyLoaded = true;
+        console.log("History Loaded");
+        loadhistorytime += 1; // for debugging
+    } else {
+        historyLoaded = false;
+    }
+}
+
+function clearHistoryHtml() {
+    localStorage.removeItem("chatHistory");
+    historyMessages = chatbotWrap.querySelector('.history-message');
+    if (historyMessages) {
+        chatbotWrap.removeChild(historyMessages);
+        console.log("History Cleared");
+    }
+}

web_assets/javascript/localization.js

@@ -0,0 +1,67 @@
+
+// i18n
+
+const language = navigator.language.slice(0,2);
+
+const forView_i18n = {
+    'zh': "仅供查看",
+    'en': "For viewing only",
+    'ja': "閲覧専用",
+    'ko': "읽기 전용",
+    'fr': "Pour consultation seulement",
+    'es': "Solo para visualización",
+    'sv': "Endast för visning",
+};
+
+const deleteConfirm_i18n_pref = {
+    'zh': "你真的要删除 ",
+    'en': "Are you sure you want to delete ",
+    'ja': "本当に ",
+    'ko': "정말로 ",
+    'sv': "Är du säker på att du vill ta bort "
+};
+
+const deleteConfirm_i18n_suff = {
+    'zh': " 吗？",
+    'en': " ?",
+    'ja': " を削除してもよろしいですか？",
+    'ko': " 을(를) 삭제하시겠습니까?",
+    'sv': " ?"
+};
+
+const usingLatest_i18n = {
+    'zh': "您使用的就是最新版！",
+    'en': "You are using the latest version!",
+    'ja': "最新バージョンを使用しています！",
+    'ko': "최신 버전을 사용하고 있습니다!",
+    'sv': "Du använder den senaste versionen!"
+};
+
+const updatingMsg_i18n = {
+    'zh': "正在尝试更新...",
+    'en': "Trying to update...",
+    'ja': "更新を試みています...",
+    'ko': "업데이트를 시도 중...",
+    'sv': "Försöker uppdatera..."
+}
+
+const updateSuccess_i18n = {
+    'zh': "更新成功，请重启本程序。",
+    'en': "Updated successfully, please restart this program.",
+    'ja': "更新が成功しました、このプログラムを再起動してください。",
+    'ko': "업데이트 성공, 이 프로그램을 재시작 해주세요.",
+    'sv': "Uppdaterat framgångsrikt, starta om programmet."
+}
+
+const updateFailure_i18n = {
+    'zh': '更新失败，请尝试<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">手动更新</a>。',
+    'en': 'Update failed, please try <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">manually updating</a>.',
+    'ja': '更新に失敗しました、<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">手動での更新</a>をお試しください。',
+    'ko': '업데이트 실패, <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">수동 업데이트</a>를 시도하십시오.',
+    'sv': 'Uppdateringen misslyckades, prova att <a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">uppdatera manuellt</a>.'
+}
+
+
+function i18n(msg) {
+    return msg.hasOwnProperty(language) ? msg[language] : msg['en'];
+}

web_assets/javascript/message-button.js

@@ -0,0 +1,130 @@
+
+// 为 bot 消息添加复制与切换显示按钮
+
+function addChuanhuButton(botElement) {
+    var rawMessage = botElement.querySelector('.raw-message');
+    var mdMessage = botElement.querySelector('.md-message');
+    // var gradioCopyMsgBtn = botElement.querySelector('div.icon-button>button[title="copy"]'); // 获取 gradio 的 copy button，它可以读取真正的原始 message
+    if (!rawMessage) {
+        var buttons = botElement.querySelectorAll('button.chuanhu-btn');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].parentNode.removeChild(buttons[i]);
+        }
+        return;
+    }
+    var oldCopyButton = null;
+    var oldToggleButton = null;
+    oldCopyButton = botElement.querySelector('button.copy-bot-btn');
+    oldToggleButton = botElement.querySelector('button.toggle-md-btn');
+    if (oldCopyButton) oldCopyButton.remove();
+    if (oldToggleButton) oldToggleButton.remove();
+
+    // Copy bot button
+    var copyButton = document.createElement('button');
+    copyButton.classList.add('chuanhu-btn');
+    copyButton.classList.add('copy-bot-btn');
+    copyButton.setAttribute('aria-label', 'Copy');
+    copyButton.innerHTML = copyIcon;
+
+    copyButton.addEventListener('click', async () => {
+        const textToCopy = rawMessage.innerText;
+        try {
+            if ("clipboard" in navigator) {
+                await navigator.clipboard.writeText(textToCopy);
+                copyButton.innerHTML = copiedIcon;
+                setTimeout(() => {
+                    copyButton.innerHTML = copyIcon;
+                }, 1500);
+            } else {
+                const textArea = document.createElement("textarea");
+                textArea.value = textToCopy;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    copyButton.innerHTML = copiedIcon;
+                    setTimeout(() => {
+                        copyButton.innerHTML = copyIcon;
+                    }, 1500);
+                } catch (error) {
+                    console.error("Copy failed: ", error);
+                }
+                document.body.removeChild(textArea);
+            }
+        } catch (error) {
+            console.error("Copy failed: ", error);
+        }
+    });
+    botElement.appendChild(copyButton);
+
+    // Toggle button
+    var toggleButton = document.createElement('button');
+    toggleButton.classList.add('chuanhu-btn');
+    toggleButton.classList.add('toggle-md-btn');
+    toggleButton.setAttribute('aria-label', 'Toggle');
+    var renderMarkdown = mdMessage.classList.contains('hideM');
+    toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
+    toggleButton.addEventListener('click', () => {
+        renderMarkdown = mdMessage.classList.contains('hideM');
+        if (renderMarkdown){
+            renderMarkdownText(botElement);
+            toggleButton.innerHTML=rawIcon;
+        } else {
+            removeMarkdownText(botElement);
+            toggleButton.innerHTML=mdIcon;
+        }
+    });
+    botElement.insertBefore(toggleButton, copyButton);
+
+    function renderMarkdownText(message) {
+        var mdDiv = message.querySelector('.md-message');
+        if (mdDiv) mdDiv.classList.remove('hideM');
+        var rawDiv = message.querySelector('.raw-message');
+        if (rawDiv) rawDiv.classList.add('hideM');
+    }
+    function removeMarkdownText(message) {
+        var rawDiv = message.querySelector('.raw-message');
+        if (rawDiv) {
+            rawPre = rawDiv.querySelector('pre');
+            if (rawPre) rawDiv.innerHTML = rawPre.innerHTML;
+            rawDiv.classList.remove('hideM');
+        }
+        var mdDiv = message.querySelector('.md-message');
+        if (mdDiv) mdDiv.classList.add('hideM');
+    }
+}
+
+
+let timeoutId;
+let isThrottled = false;
+// 监听chatWrap元素的变化，为 bot 消息添加复制按钮。
+var mObserver = new MutationObserver(function (mutationsList) {
+    for (const mmutation of mutationsList) {
+        if (mmutation.type === 'childList') {
+            for (var node of mmutation.addedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message')) {
+                    saveHistoryHtml();
+                    disableSendBtn();
+                    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+                }
+            }
+            for (var node of mmutation.removedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message')) {
+                    saveHistoryHtml();
+                    disableSendBtn();
+                    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+                }
+            }
+        } else if (mmutation.type === 'attributes') {
+            if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
+            isThrottled = true;
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                isThrottled = false;
+                document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+                saveHistoryHtml();
+                disableSendBtn();
+            }, 1500);
+        }
+    }
+});

web_assets/javascript/sliders.js

@@ -0,0 +1,22 @@
+
+var rangeInputs = null;
+var numberInputs = null;
+
+
+function setSlider() {
+    function setSliderRange() {
+        var range = document.querySelectorAll('input[type="range"]');
+        range.forEach(range => {
+            range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
+        });
+    }
+    rangeInputs = document.querySelectorAll('input[type="range"]');
+    numberInputs = document.querySelectorAll('input[type="number"]')
+    setSliderRange();
+    rangeInputs.forEach(rangeInput => {
+        rangeInput.addEventListener('input', setSliderRange);
+    });
+    numberInputs.forEach(numberInput => {
+        numberInput.addEventListener('input', setSliderRange);
+    })
+}

web_assets/javascript/updater.js

@@ -0,0 +1,172 @@
+
+var updateInfoGotten = false;
+var isLatestVersion = localStorage.getItem('isLatestVersion') || false;
+
+
+var statusObserver = new MutationObserver(function (mutationsList) {
+    for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' || mutation.type === 'childList') {
+            if (statusDisplay.innerHTML.includes('<span id="update-status"')) {
+                if (getUpdateStatus() === "success") {
+                    updatingInfoElement.innerText = i18n(updateSuccess_i18n);
+                    noUpdateHtml();
+                    localStorage.setItem('isLatestVersion', 'true');
+                    isLatestVersion = true;
+                    enableUpdateBtns();
+                } else if (getUpdateStatus() === "failure") {
+                    updatingInfoElement.innerHTML = i18n(updateFailure_i18n);
+                    document.querySelector('#update-button.btn-update').disabled = true;
+                    document.querySelector('#cancel-button.btn-update').disabled = false;
+                } else if (getUpdateStatus() != "") {
+                    updatingInfoElement.innerText = getUpdateStatus();
+                    enableUpdateBtns();
+                }
+                updateStatus.parentNode.removeChild(updateStatus);
+                if (updateSpinner) updateSpinner.stop();
+            }
+        }
+    }
+});
+
+var showingUpdateInfo = false;
+async function getLatestRelease() {
+    try {
+        const response = await fetch('https://api.github.com/repos/gaizhenbiao/chuanhuchatgpt/releases/latest');
+        if (!response.ok) {
+            console.log(`Error: ${response.status} - ${response.statusText}`);
+            updateInfoGotten = true;
+            return null;
+        }
+        const data = await response.json();
+        updateInfoGotten = true;
+        return data;
+    } catch (error) {
+        console.log(`Error: ${error}`);
+        updateInfoGotten = true;
+        return null;
+    }
+}
+
+var releaseNoteElement = document.getElementById('release-note-content');
+var updatingInfoElement = document.getElementById('updating-info');
+async function updateLatestVersion() {
+    const currentVersionElement = document.getElementById('current-version');
+    const latestVersionElement = document.getElementById('latest-version-title');
+    releaseNoteElement = document.getElementById('release-note-content');
+    updatingInfoElement = document.getElementById('updating-info');
+    const currentVersion = currentVersionElement.textContent;
+    const versionTime = document.getElementById('version-time').innerText;
+    const localVersionTime = versionTime !== "unknown" ? (new Date(versionTime)).getTime() : 0;
+    updateInfoGotten = true; //无论成功与否都只执行一次，否则容易api超限...
+    try {
+        const data = await getLatestRelease();
+        const releaseNote = data.body;
+        if (releaseNote) {
+            releaseNoteElement.innerHTML = marked.parse(releaseNote, {mangle: false, headerIds: false});
+        }
+        const latestVersion = data.tag_name;
+        const latestVersionTime = (new Date(data.created_at)).getTime();
+        if (latestVersionTime) {
+            if (localVersionTime < latestVersionTime) {
+                latestVersionElement.textContent = latestVersion;
+                console.log(`New version ${latestVersion} found!`);
+                if (!isInIframe) {openUpdateToast();}      
+            } else {
+                noUpdate();
+            }
+            currentTime = new Date().getTime();
+            localStorage.setItem('lastCheckTime', currentTime);
+        }
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+function getUpdateInfo() {
+    window.open('https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest', '_blank');
+    closeUpdateToast();
+}
+
+var updateSpinner = null;
+
+function bgUpdateChuanhu() {
+    updateChuanhuBtn.click();
+    updatingInfoElement.innerText = i18n(updatingMsg_i18n);
+    var updatingSpinner = document.getElementById('updating-spinner');
+    try {
+        updateSpinner = new Spin.Spinner({color:'#06AE56',top:'45%',lines:9}).spin(updatingSpinner);
+    } catch (error) {
+        console.error("Can't create spinner")
+    }
+    updatingInfoElement.classList.remove('hideK');
+    disableUpdateBtns();
+    const releaseNoteWrap = document.getElementById('release-note-wrap');
+    releaseNoteWrap.style.setProperty('display', 'none');
+    statusObserver.observe(statusDisplay, { childList: true, subtree: true, characterData: true});
+}
+function cancelUpdate() {
+    closeUpdateToast();
+}
+function openUpdateToast() {
+    showingUpdateInfo = true;
+    setUpdateWindowHeight();
+}
+function closeUpdateToast() {
+    updateToast.style.setProperty('top', '-500px');
+    showingUpdateInfo = false;
+    if (updatingInfoElement.classList.contains('hideK') === false) {
+        updatingInfoElement.classList.add('hideK');
+    }
+}
+function manualCheckUpdate() {
+    openUpdateToast();
+    updateLatestVersion();
+    currentTime = new Date().getTime();
+    localStorage.setItem('lastCheckTime', currentTime);
+}
+function noUpdate() {
+    localStorage.setItem('isLatestVersion', 'true');
+    isLatestVersion = true;
+    noUpdateHtml();
+}
+function noUpdateHtml() {
+    const versionInfoElement = document.getElementById('version-info-title');
+    const gotoUpdateBtn = document.getElementById('goto-update-btn');
+    const closeUpdateBtn = document.getElementById('close-update-btn');
+    const releaseNoteWrap = document.getElementById('release-note-wrap');
+    releaseNoteWrap.style.setProperty('display', 'none');
+    versionInfoElement.textContent = i18n(usingLatest_i18n)
+    gotoUpdateBtn.classList.add('hideK');
+    closeUpdateBtn.classList.remove('hideK');
+}
+
+var updateStatus = null;
+function getUpdateStatus() {
+    updateStatus = statusDisplay.querySelector("#update-status");
+    if (updateStatus) {
+        return updateStatus.innerText;
+    } else {
+        return "unknown";
+    }
+}
+
+function disableUpdateBtns() {
+    const updatesButtons = document.querySelectorAll('.btn-update');
+    updatesButtons.forEach( function (btn) {
+        btn.disabled = true;
+    });
+}
+function enableUpdateBtns() {
+    const updatesButtons = document.querySelectorAll('.btn-update');
+    updatesButtons.forEach( function (btn) {
+        btn.disabled = false;
+    });
+}
+
+function setUpdateWindowHeight() {
+    if (!showingUpdateInfo) {return;}
+    const scrollPosition = window.scrollY;
+    // const originalTop = updateToast.style.getPropertyValue('top');
+    const resultTop = scrollPosition - 20 + 'px';
+    updateToast.style.setProperty('top', resultTop);
+}

web_assets/javascript/user-info.js

@@ -0,0 +1,67 @@
+
+var userLogged = false;
+var usernameGotten = false;
+var username = null;
+
+
+function getUserInfo() {
+    if (usernameGotten) {
+        return;
+    }
+    userLogged = localStorage.getItem('userLogged');
+    if (userLogged) {
+        username = userInfoDiv.innerText;
+        if (username) {
+            if (username.includes("getting user info…")) {
+                setTimeout(getUserInfo, 500);
+                return;
+            } else if (username === " ") {
+                localStorage.removeItem("username");
+                localStorage.removeItem("userLogged")
+                userLogged = false;
+                usernameGotten = true;
+                return;
+            } else {
+                username = username.match(/User:\s*(.*)/)[1] || username;
+                localStorage.setItem("username", username);
+                usernameGotten = true;
+                clearHistoryHtml();
+            }
+        }
+    }
+}
+
+function showOrHideUserInfo() {
+    function toggleUserInfoVisibility(shouldHide) {
+        if (userInfoDiv) {
+            if (shouldHide) {
+                userInfoDiv.classList.add("info-transparent");
+            } else {
+                userInfoDiv.classList.remove("info-transparent");
+            }
+        }
+    }
+
+    // When webpage loaded, hide user info after 2 second
+    setTimeout(function () {
+        toggleUserInfoVisibility(true);
+    }, 2000);
+
+    let triggerElements = {appTitleDiv, userInfoDiv, sendBtn};
+    for (let elem in triggerElements) {
+        triggerElements[elem].addEventListener("mouseenter", function () {
+            toggleUserInfoVisibility(false);
+        });
+        triggerElements[elem].addEventListener("mouseleave", function () {
+            toggleUserInfoVisibility(true);
+        });
+        triggerElements[elem].ontouchstart = function () {
+            toggleUserInfoVisibility(false);
+        };
+        triggerElements[elem].ontouchend = function () {
+            setTimeout(function () {
+                toggleUserInfoVisibility(true);
+            }, 3000);
+        };
+    }
+}

web_assets/stylesheet/ChuanhuChat.css

@@ -0,0 +1,104 @@
+:root {
+    --chatbot-color-light: #000000;
+    --chatbot-color-dark: #FFFFFF;
+    --chatbot-background-color-light: #F3F3F3;
+    --chatbot-background-color-dark: #121111;
+    --message-user-background-color-light: #95EC69;
+    --message-user-background-color-dark: #26B561;
+    --message-bot-background-color-light: #FFFFFF;
+    --message-bot-background-color-dark: #2C2C2C;
+    --switch-checkbox-color-light: #e5e7eb;
+    --switch-checkbox-color-dark: #515151;
+}
+
+.hideK {
+    display: none;
+}
+
+#app-title {
+    font-weight: var(--prose-header-text-weight);
+    font-size: var(--text-xxl);
+    line-height: 1.3;
+    text-align: left;
+    margin-top: 6px;
+    white-space: nowrap;
+}
+#description {
+    text-align: center;
+    margin: 32px 0 4px 0;
+}
+
+/* 高级页面 */
+#advanced-warning {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: center;
+}
+
+#netsetting-warning hr {
+    margin-bottom: 1em
+}
+
+.view-only-textbox textarea {
+    -webkit-text-fill-color: #b2b2b2 !important
+}
+
+#footer {
+    text-align: center;
+}
+#footer div {
+    display: inline-block;
+}
+#footer .versions{
+    font-size: 85%;
+    opacity: 0.60;
+}
+
+
+#float-display {
+    position: absolute;
+    max-height: 30px;
+}
+
+.insert-block {
+    position: relative;
+    margin: 0;
+    padding: 8px 12px;
+    box-shadow: var(--block-shadow);
+    border-width: var(--block-border-width);
+    border-color: var(--block-border-color);
+    border-radius: var(--block-radius);
+    background: var(--block-background-fill);
+    width: 100%;
+    line-height: var(--line-sm);
+    min-height: 2em;
+}
+
+/* status-display */
+#status-display {
+    display: flex;
+    min-height: 2em;
+    align-items: flex-end;
+    justify-content: flex-end;
+    transition: all 0.6s;
+}
+#status-display p {
+    font-size: .85em;
+    font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Microsoft Yahei UI", "Microsoft Yahei", monospace;
+    /* Windows下中文的monospace会fallback为新宋体，实在太丑，这里折中使用微软雅黑 */
+    color: var(--body-text-color-subdued);
+}
+
+
+#submit-btn, #cancel-btn {
+    height: 40px !important;
+}
+#submit-btn::before {
+    content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
+    height: 21px;
+}
+#cancel-btn::before {
+    content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
+    height: 21px;
+}

web_assets/stylesheet/chatbot.css

@@ -0,0 +1,242 @@
+
+hr.append-display {
+    margin: 8px 0;
+    border: none;
+    height: 1px;
+    border-top-width: 0;
+    background-image: linear-gradient(to right, rgba(50,50,50, 0.1), rgba(150, 150, 150, 0.8), rgba(50,50,50, 0.1));
+}
+.source-a {
+    font-size: 0.8em;
+    max-width: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    /* background-color: #dddddd88; */
+    border-radius: 1.5rem;
+    padding: 0.2em;
+}
+.source-a a {
+    display: inline-block;
+    background-color: #aaaaaa50;
+    border-radius: 1rem;
+    padding: 0.5em;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    min-width: 20%;
+    white-space: nowrap;
+    margin: 0.2rem 0.1rem;
+    text-decoration: none !important;
+    flex: 1;
+    transition: flex 0.5s;
+}
+.source-a a:hover {
+    background-color: #aaaaaa20;
+    flex: 2;
+}
+
+/* 川虎助理 */
+.agent-prefix {
+    font-size: smaller; 
+    opacity: 0.6;
+    padding: 6px 0 4px;
+}
+.agent-prefix::before {
+    content: '🐯';
+    filter: grayscale();
+    padding: 0 4px;
+}
+
+/* 亮色（默认） */
+#chuanhu-chatbot {
+    background-color: var(--chatbot-background-color-light) !important;
+    color: var(--chatbot-color-light) !important;
+}
+[data-testid = "bot"] {
+    background-color: var(--message-bot-background-color-light) !important;
+}
+[data-testid = "user"] {
+    background-color: var(--message-user-background-color-light) !important;
+}
+/* 暗色 */
+.dark #chuanhu-chatbot {
+    background-color: var(--chatbot-background-color-dark) !important;
+    color: var(--chatbot-color-dark) !important;
+}
+.dark [data-testid = "bot"] {
+    background-color: var(--message-bot-background-color-dark) !important;
+}
+.dark [data-testid = "user"] {
+    background-color: var(--message-user-background-color-dark) !important;
+}
+
+/* 对话气泡 */
+.message {
+    border-radius: var(--radius-xl) !important;
+    border: none;
+    padding: var(--spacing-xl) !important;
+    font-size: var(--text-md) !important;
+    line-height: var(--line-md) !important;
+    min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
+    min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
+}
+[data-testid = "bot"] {
+    max-width: 85%;
+    border-bottom-left-radius: 0 !important;
+}
+[data-testid = "user"] {
+    max-width: 85%;
+    width: auto !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+/* 屏幕宽度大于等于500px的设备 */
+/* update on 2023.4.8: 高度的细致调整已写入JavaScript */
+@media screen and (min-width: 500px) {
+    #chuanhu-chatbot {
+        height: calc(100vh - 200px);
+    }
+    #chuanhu-chatbot>.wrapper>.wrap {
+        max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+    }
+}
+/* 屏幕宽度小于500px的设备 */
+@media screen and (max-width: 499px) {
+    #chuanhu-chatbot {
+        height: calc(100vh - 140px);
+    }
+    #chuanhu-chatbot>.wrapper>.wrap {
+        max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+    }
+    [data-testid = "bot"] {
+        max-width: 95% !important;
+    }
+    #app-title h1{
+        letter-spacing: -1px; font-size: 22px;
+    }
+}
+
+#chuanhu-chatbot>.wrapper>.wrap {
+    overflow-x: hidden;
+}
+
+.message.user p {
+    white-space: pre-wrap;
+}
+.message .user-message {
+    display: block;
+    padding: 0 !important;
+    white-space: pre-wrap;
+}
+
+.message .md-message p {
+    margin-top: 0.6em !important;
+    margin-bottom: 0.6em !important;
+}
+.message .md-message p:first-child { margin-top: 0 !important; }
+.message .md-message p:last-of-type { margin-bottom: 0 !important; }
+
+.message .md-message {
+    display: block;
+    padding: 0 !important;
+}
+.message .raw-message p {
+    margin:0 !important;
+}
+.message .raw-message {
+    display: block;
+    padding: 0 !important;
+    white-space: pre-wrap;
+}
+.message .hideM {
+    display: none;
+}
+
+/* custom buttons */
+.chuanhu-btn {
+    border-radius: 5px;
+    /* background-color: #E6E6E6 !important; */
+    color: rgba(120, 120, 120, 0.64) !important;
+    padding: 4px !important;
+    position: absolute;
+    right: -22px;
+    cursor: pointer !important;
+    transition: color .2s ease, background-color .2s ease;
+}
+.chuanhu-btn:hover {
+    background-color: rgba(167, 167, 167, 0.25) !important;
+    color: unset !important;
+}
+.chuanhu-btn:active {
+    background-color: rgba(167, 167, 167, 0.5) !important;
+}
+.chuanhu-btn:focus {
+    outline: none;
+}
+
+.copy-bot-btn {
+    /* top: 18px; */
+    bottom: 0;
+}
+.toggle-md-btn {
+    /* top: 0; */
+    bottom: 20px;
+}
+
+/* note: this is deprecated */
+.copy-code-btn {
+    position: relative;
+    float: right;
+    font-size: 1em;
+    cursor: pointer;
+}
+/* note: the button below disabled in chatbot.py */
+.message div.icon-button > button[title="copy"] {
+    display: none;
+}
+
+
+/* history message */
+.wrapper>.wrap>.history-message {
+    padding: 10px !important;
+}
+.history-message {
+    /* padding: 0 !important; */
+    opacity: 80%;
+    display: flex;
+    flex-direction: column;
+}
+.history-message>.history-message {
+    padding: 0 !important;
+}
+.history-message>.message-wrap {
+    padding: 0 !important;
+    margin-bottom: 16px;
+}
+.history-message>.message {
+    margin-bottom: 16px;
+}
+.wrapper>.wrap>.history-message::after {
+    content: "";
+    display: block;
+    height: 2px;
+    background-color: var(--body-text-color-subdued);
+    margin-bottom: 10px;
+    margin-top: -10px;
+    clear: both;
+}
+.wrapper>.wrap>.history-message>:last-child::after {
+    content: "仅供查看";
+    display: block;
+    text-align: center;
+    color: var(--body-text-color-subdued);
+    font-size: 0.8em;
+}
+
+/* #chuanhu-chatbot {
+    transition: height 0.3s ease;
+    note: find it better without transition animation...;
+} */

web_assets/stylesheet/custom-components.css

@@ -0,0 +1,240 @@
+
+/* user-info */
+#user-info.block {
+    white-space: nowrap;
+    position: absolute; left: 8em; top: .8em;
+    z-index: var(--layer-2);
+    box-shadow: var(--block-shadow);
+    border: none!important; border-radius: var(--block-label-radius);
+    background: var(--color-accent);
+    padding: var(--block-label-padding);
+    font-size: var(--block-label-text-size); line-height: var(--line-sm);
+    width: auto; max-height: 30px!important;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+#user-info.block .wrap {
+    opacity: 0;
+}
+#user-info p {
+    color: white;
+    font-weight: var(--block-label-text-weight);
+}
+#user-info.info-transparent {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+
+/* updater */
+#toast-update {
+    position: absolute;
+    display: flex;
+    top: -500px;
+    width: 100%;
+    justify-content: center;
+    z-index: var(--layer-top);
+    transition: top 0.3s ease-out;
+}
+#check-chuanhu-update {
+    position: absolute;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: var(--size-6) var(--size-4);
+    box-shadow: var(--shadow-drop-lg);
+    border: 1px solid var(--block-label-border-color);
+    border-radius: var(--container-radius);
+    background: var(--background-fill-primary);
+    padding: var(--size-4) var(--size-6);
+    min-width: 360px;
+    max-width: 480px;
+    overflow: hidden;
+    pointer-events: auto;
+}
+#version-info-title {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-align: start;
+    width: 100%;
+}
+#release-note-wrap {
+    width: 100%;
+    max-width: 400px;
+    height: 120px;
+    border: solid 1px var(--border-color-primary);
+    overflow: auto;
+    padding: 0 8px;
+}
+#release-note-wrap.hideK {
+    display: none;
+}
+.btn-update-group {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    padding-top: 10px;
+}
+.btn-update-group.hideK {
+    display: none;
+}
+#updating-info {
+    margin: 16px 0px 24px;
+    text-align: start;
+    width: 100%;
+}
+
+
+#usage-display p, #usage-display span {
+    margin: 0;
+    font-size: .85em;
+    color: var(--body-text-color-subdued);
+}
+.progress-bar {
+    background-color: var(--input-background-fill);;
+    margin: .5em 0 !important;
+    height: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.progress {
+    background-color: var(--block-title-background-fill);
+    height: 100%;
+    border-radius: 10px;
+    text-align: right;
+    transition: width 0.5s ease-in-out;
+}
+.progress-text {
+    /* color: white; */
+    color: var(--color-accent) !important;
+    font-size: 1em !important;
+    font-weight: bold;
+    padding-right: 10px;
+    line-height: 20px;
+}
+
+
+/* 亮暗色模式切换 */
+#apSwitch input[type="checkbox"] {
+    margin: 0 !important;
+}
+#apSwitch label.apSwitch {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--body-text-color);
+    font-weight: var(--checkbox-label-text-weight);
+    font-size: var(--checkbox-label-text-size);
+    line-height: var(--line-md);
+    margin: 2px 0 !important;
+}
+input[type="checkbox"]#apSwitch-checkbox::before {
+    background: none !important;
+    content: '🌞';
+    border: none !important;
+    box-shadow: none !important;
+    font-size: 22px;
+    top: -4.4px;
+    left: -1px;
+}
+input:checked[type="checkbox"]#apSwitch-checkbox::before {
+    content: '🌚';
+    left: 16px;
+}
+
+/* .apSwitch {
+    top: 2px;
+    display: inline-block;
+    height: 22px;
+    position: relative;
+    width: 40px;
+    border-radius: 11px;
+    box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.05), inset 0 0 2px 0 rgba(0,0,0,0.08) !important;
+}
+.apSwitch input {
+    display: none !important;
+}
+.apSlider {
+    background-color: var(--neutral-200);
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+    font-size: 22px;
+    border-radius: 11px;
+}
+.apSlider::before {
+    transform: scale(0.9);
+    position: absolute;
+    transition: .4s;
+    content: "🌞";
+}
+input:checked + .apSlider {
+    background-color: var(--primary-600);
+}
+input:checked + .apSlider::before {
+    transform: translateX(18px);
+    content:"🌚";
+} */
+
+/* switch-checkbox */
+.switch-checkbox label {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.switch-checkbox input[type="checkbox"] + span {
+    margin-left: 0 !important;
+}
+
+.switch-checkbox input[type="checkbox"] {
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+}
+
+.switch-checkbox input[type="checkbox"] {
+    display: inline-block !important;
+    position: relative !important;
+    border: none !important;
+    outline: none;
+    width: 40px !important;
+    height: 22px !important;
+    border-radius: 11px !important;
+    background-image: none !important;
+    box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.05), inset 0 0 2px 0 rgba(0,0,0,0.08) !important;
+    background-image: none !important;
+    background-color: var(--switch-checkbox-color-light) !important;
+    transition: .2s ease background-color;
+}
+.dark .switch-checkbox input[type="checkbox"] {
+    background-color: var(--switch-checkbox-color-dark) !important;
+}
+.switch-checkbox input[type="checkbox"]::before {
+    content: "";
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    top: 0;
+    left: 0;
+    background: #FFFFFF;
+    border: 0.5px solid rgba(0,0,0,0.02);
+    box-shadow: 0 0 0 0 rgba(0,0,0,0.15), 0 1px 0 0 rgba(0,0,0,0.05);
+    transform: scale(0.9);
+    border-radius: 11px !important;
+    transition: .4s ease all;
+    box-shadow: var(--input-shadow);
+}
+.switch-checkbox input:checked[type="checkbox"] {
+    background-color: var(--primary-600) !important;
+}
+.switch-checkbox input:checked[type="checkbox"]::before {
+    background-color: #fff;
+    left: 18px;
+}
+

web_assets/stylesheet/markdown.css

@@ -0,0 +1,61 @@
+
+.message-wrap>div img{
+    border-radius: 10px !important;
+}
+
+/* 表格 */
+.message table {
+    margin: 1em 0;
+    border-collapse: collapse;
+    empty-cells: show;
+}
+.message td, .message th {
+    border: 1.2px solid var(--border-color-primary) !important;
+    padding: 0.2em;
+}
+.message thead {
+    background-color: rgba(175,184,193,0.2);
+}
+.message thead th {
+    padding: .5em .2em;
+}
+
+/* 行内代码 */
+.message :not(pre) code {
+    display: inline;
+    white-space: break-spaces;
+    font-family: var(--font-mono);
+    border-radius: 6px;
+    margin: 0 2px 0 2px;
+    padding: .2em .4em .1em .4em;
+    background-color: rgba(175,184,193,0.2);
+}
+/* 代码块 */
+.message pre,
+.message pre[class*=language-] {
+    color: #fff;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: .8em 1em 1em 0em !important;
+    padding: var(--spacing-xl) 1.2em !important;
+    border-radius: var(--radius-lg) !important;
+}
+.message pre code,
+.message pre code[class*=language-] {
+    color: #fff;
+    padding: 0;
+    margin: 0;
+    background-color: unset;
+    text-shadow: none;
+    font-family: var(--font-mono);
+}
+
+
+/* 覆盖prism.css */
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+    background: none !important;
+}

web_assets/stylesheet/override-gradio.css

@@ -0,0 +1,67 @@
+
+/* 解决container=False时的错误填充 */
+div.form {
+    background: none !important;
+}
+div.no-container {
+    padding: 10px 0 0 0 !important;
+}
+
+/* gradio的页脚信息 */
+footer {
+    /* display: none !important; */
+    margin-top: .2em !important;
+    font-size: 85%;
+}
+
+/* 覆盖 gradio 丑陋的复制按钮样式 */
+.message pre button[title="copy"] {
+    border-radius: 5px;
+    transition: background-color .2s ease;
+}
+.message pre button[title="copy"]:hover {
+    background-color: #333232;
+}
+.message pre button .check {
+    color: #fff !important;
+    background: var(--neutral-950) !important;
+}
+
+
+
+
+/* Override Slider Styles (for webkit browsers like Safari and Chrome)
+ * 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
+ * 进度滑块在各个平台还是太不统一了
+**/
+
+input[type="range"] {
+    /* -webkit-appearance: none; */
+    appearance: none;
+    height: 4px;
+    background: var(--input-background-fill);
+    border-radius: 5px;
+    background-image: linear-gradient(var(--primary-500),var(--primary-500));
+    background-size: 0% 100%;
+    background-repeat: no-repeat;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: solid 0.5px #ddd;
+    background-color: white;
+    cursor: ew-resize;
+    box-shadow: var(--input-shadow);
+    transition: background-color .1s ease;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--neutral-50);
+}
+input[type=range]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+}