initial commit

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/generate_image.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,163 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+.idea/
+
+# VSCode
+.vscode/

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.9 as builder
+RUN apt-get update && apt-get install -y build-essential
+COPY requirements.txt .
+COPY requirements_advanced.txt .
+RUN pip install --user -r requirements.txt
+# RUN pip install --user -r requirements_advanced.txt
+
+FROM python:3.9
+MAINTAINER iskoldt
+COPY --from=builder /root/.local /root/.local
+ENV PATH=/root/.local/bin:$PATH
+COPY . /app
+WORKDIR /app
+ENV dockerrun yes
+CMD ["python3", "-u", "main.py", "2>&1", "|", "tee", "/var/log/application.log"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tsumugii
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,13 +1,130 @@
 ---
 title: PoetryChat
-emoji: 👁
-colorFrom: yellow
-colorTo: red
+emoji: 🤗
+colorFrom: indigo
+colorTo: indigo
 sdk: gradio
-sdk_version: 4.36.1
+sdk_version: 3.43.2
 app_file: app.py
-pinned: false
+pinned: true
 license: mit
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+<div align="center"><h1>PoetryChat🖼️</h1></div>
+
+</div>
+
+[![License Apache 2.0](https://img.shields.io/badge/license-mit-blue.svg)](LICENSE)
+[![python_version](https://img.shields.io/badge/Python-3.10%2B-green.svg)](requirements.txt)
+
+<div align="center"><h2>Description</h2></div>
+
+&emsp;&emsp;Powered by Large Language Models, PoetryChat ...
+
+
+
+</div>
+
+<div align="center"><h2>Demonstration</h2></div>
+
+![诗趣伴行](./docs/诗趣伴行.png)
+
+&emsp;&emsp;You can easily and directly experience the our demo online on `HuggingFace` now. Click here for Online Experience 👉 [PoetryChat - a Hugging Face Space by Tsumugii](https://huggingface.co/spaces/Tsumugii/PoetryChat)
+
+</div>
+
+<div align="center"><h2>Todo</h2></div>
+
+- [ ] Complete the Gradio Interface and UI design
+- [ ] Add team members brief introduction
+- [ ] Add a gif demonstration
+- [ ] Deploy the demo on HuggingFace
+- [ ] RAG layer
+- [ ] LLM Agent layer
+- [ ] Application layer
+
+
+
+
+
+</div>
+
+<div align="center"><h2>Quick Start</h2></div>
+
+<details open>
+    <summary><h4>Installation</h4></summary>
+
+
+&emsp;&emsp;First of all, please make sure that you have already installed `conda` as Python runtime environment. And `miniconda` is strongly recommended.
+
+&emsp;&emsp;1. create a virtual `conda` environment for the demo 😆
+
+```bash
+$ conda create -n poetrychat python==3.10 # poetrychat is the name of your environment
+$ conda activate poetrychat
+```
+
+&emsp;&emsp;2. Install essential `requirements` by run the following command in the `CLI` 😊
+
+```bash
+$ git clone https://github.com/Antony-Zhang/PoetryChat && cd PoetryChat && git checkout poetryChat2.0
+$ pip install -r requirements.txt
+```
+
+<details open>
+    <summary><h4>Preparation</h4></summary>
+
+
+&emsp;&emsp;1. open `.env.example` and fill your own `API Keys` in the **corresponding place** if you want to use certain LLM, then **rename** the file into `.env`
+
+```
+OPENAI_API_KEY = ""
+OPENAI_URL_BASE = ""
+```
+
+&emsp;&emsp;2. xxx
+
+
+
+
+
+
+
+
+
+</div>
+
+<div align="center"><h2>References</h2></div>
+
+1. [Gradio Official Documents](https://www.gradio.app/)
+2. [LIC·2024 语言与智能技术竞赛_飞桨大赛-飞桨AI Studio星河社区](https://aistudio.baidu.com/competition/detail/1171/0/introduction)
+3. [PoetryChat: 一个面向不同年龄段的交互式LLM古诗学习助手](https://github.com/Antony-Zhang/PoetryChat)
+4. [Tsumugii24/WonderWhy (github.com)](https://github.com/Tsumugii24/WonderWhy)
+
+
+
+
+
+</div>
+
+<div align="center"><h2>Acknowledgements</h2></div>
+
+&emsp;&emsp;***I would like to express my sincere gratitude to my teammates  for their efforts and supports throughout the development of this project. Their expertise and insightful feedback played a crucial role in shaping the direction of the project.***
+
+- 姜舒凡 [@Tsumugii24](https://github.com/Tsumugii24)
+
+- 朱嘉辉 [@jiaohui](https://github.com/jiaohuix)
+
+- 陈思州 [@jjyaoao](https://github.com/jjyaoao)
+
+
+
+</div>
+
+<div align="center"><h2>Contact</h2></div>
+
+Feel free to open GitHub issues or directly send me a mail if you have any questions about this project. 
+

app.py

@@ -0,0 +1,935 @@
+# -*- coding: utf-8 -*-
+"""
+@author:XuMing(xuming624@qq.com)
+@description:
+"""
+import gradio as gr
+from loguru import logger
+# import appbuilder
+import time
+import os
+
+from src.config import (
+    http_proxy,
+    hide_history_when_not_logged_in,
+    chat_name_method_index,
+    my_api_key,
+    multi_api_key,
+    server_name,
+    server_port,
+    share,
+    config_file,
+    api_host,
+    authflag,
+    dockerflag,
+    show_api_billing,
+    latex_delimiters_set,
+    user_avatar,
+    bot_avatar,
+    autobrowser,
+    update_doc_config,
+)
+from src.gradio_patch import reg_patch
+from src.models import get_model
+from src.overwrites import (
+    postprocess,
+    postprocess_chat_messages,
+    reload_javascript,
+    get_html,
+)
+from src.presets import (
+    MODEL_ALIASES,
+    MODELS,
+    HISTORY_NAME_METHODS,
+    small_and_beautiful_theme,
+    CONCURRENT_COUNT,
+    TITLE,
+    HIDE_MY_KEY,
+    DEFAULT_MODEL,
+    REPLY_LANGUAGES,
+    INITIAL_SYSTEM_PROMPT,
+    ENABLE_STREAMING_OPTION,
+    DESCRIPTION,
+    favicon_path,
+    API_HOST,
+    HISTORY_DIR,
+    assets_path,
+)
+from src.utils import (
+    delete_chat_history,
+    filter_history,
+    get_history_list,
+    auto_name_chat_history,
+    get_template_dropdown,
+    rename_chat_history,
+    init_history_list,
+    get_first_history_name,
+    setup_wizard,
+    auth_from_conf,
+    get_geoip,
+    get_template_names,
+    load_template,
+    get_history_names,
+    reset,
+    predict,
+    interrupt,
+    retry,
+    i18n,
+    dislike,
+    toggle_like_btn_visibility,
+    set_key,
+    set_single_turn,
+    hide_middle_chars,
+    set_system_prompt,
+    start_outputing,
+    set_token_upper_limit,
+    set_temperature,
+    set_user_identifier,
+    set_top_p,
+    delete_first_conversation,
+    delete_last_conversation,
+    set_n_choices,
+    set_logit_bias,
+    load_chat_history,
+    end_outputing,
+    set_max_tokens,
+    reset_default,
+    reset_textbox,
+    set_stop_sequence,
+    set_presence_penalty,
+    set_frequency_penalty,
+    upload_chat_history,
+    export_markdown,
+    billing_info,
+    get_template_content,
+    like,
+    transfer_input,
+    handle_file_upload,
+    handle_summarize_index,
+)
+
+reg_patch()
+
+gr.Chatbot._postprocess_chat_messages = postprocess_chat_messages
+gr.Chatbot.postprocess = postprocess
+
+# 设置环境变量和默认应用ID
+os.environ["APPBUILDER_TOKEN"] = "bce-v3/ALTAK-QwuihwYsMjA5jBiIBVfJP/51f962e086efb6f3a2332414360552bae5f3958d"
+APPBUILDER_APPID_DEFAULT = "2ef66c07-b4ac-4fb7-adf9-a76b5c80b2b5"
+APPBUILDER_APPID_CHILD = "c2de7a91-e17e-4d31-becf-b5d014156de7"
+APPBUILDER_APPID_STUDENT = "93ea3085-0e79-40f0-8e3d-f47381af427a"
+
+def on_mode_change(mode):
+    return f"已选择模式：{mode}"
+
+# def generate_image_from_text(prompt, width=1024, height=1024, image_num=1):
+#     import appbuilder
+#     os.environ["APPBUILDER_TOKEN"] = "bce-v3/ALTAK-QwuihwYsMjA5jBiIBVfJP/51f962e086efb6f3a2332414360552bae5f3958d"
+#     text2Image = appbuilder.Text2Image()
+#     content_data = {"prompt": prompt, "width": width, "height": height, "image_num": image_num}
+#     msg = appbuilder.Message(content_data)
+#     out = text2Image.run(msg)
+#     return out.content['img_urls']
+
+# def generate_image(prompt):
+#     img_urls = generate_image_from_text(prompt)
+#     return img_urls[0]  # 假设只生成一张图片
+
+def generate_local_image(prompt):
+    # 模拟生成图片并保存到本地路径
+    # 在实际应用中，你需要调用你的图像生成函数并保存图像
+    # 这里我们假设生成的图像保存在 `generated_image.png`
+    local_image_path = "assets/generate_image.png"
+    
+    # 模拟生成图片保存
+    # 这里你可以替换为实际的图像生成逻辑
+    # from PIL import Image, ImageDraw, ImageFont
+    # image = Image.new('RGB', (1024, 1024), color = (73, 109, 137))
+    # d = ImageDraw.Draw(image)
+    # d.text((10,10), prompt, fill=(255,255,0))
+    # image.save(local_image_path)
+    time.sleep(6)
+    return local_image_path
+
+def respond(query, app_selection, chat_history):
+    # 根据用户选择设置应用ID
+    if app_selection == "成人模式":
+        app_id = APPBUILDER_APPID_DEFAULT
+    elif app_selection == "儿童模式":
+        app_id = APPBUILDER_APPID_CHILD
+    elif app_selection == "学生模式":
+        app_id = APPBUILDER_APPID_STUDENT
+
+    # 初始化应用
+    # builder = appbuilder.AppBuilderClient(app_id)
+
+    # 创建会话ID
+    # conversation_id = builder.create_conversation()
+
+    # 执行对话
+    # msg = builder.run(conversation_id, query)
+    
+    # chat_history.append((query, msg.content.answer))
+    time.sleep(2)
+    return "", chat_history
+
+# # 创建独立的模式切换模块
+# def mode_switch_ui():
+#     with gr.Tab(label=i18n("切换模式")):
+#         gr.Markdown(i18n("# 选择运行模式 ⚙️"), elem_id="mode-selection-info")
+#         with gr.Accordion(i18n("模式切换"), open=True):
+#             mode_selection = gr.Radio(
+#                 choices=["默认模式", "成人模式", "儿童模式", "学生模式"],
+#                 label=i18n("运行模式"),
+#                 value="默认模式"
+#             )
+#     return mode_selection
+
+
+
+with gr.Blocks(theme=small_and_beautiful_theme) as demo:
+    user_name = gr.Textbox("", visible=False)
+    # 激活/logout路由
+    logout_hidden_btn = gr.LogoutButton(visible=False)
+    promptTemplates = gr.State(load_template(get_template_names()[0], mode=2))
+    user_question = gr.State("")
+    assert type(my_api_key) == str
+    user_api_key = gr.State(my_api_key)
+    current_model = gr.State()
+    # mode_selection = mode_switch_ui()
+
+    topic = gr.State(i18n("未命名对话历史记录"))
+
+    with gr.Row(elem_id="chuanhu-header"):
+        gr.HTML(get_html("header_title.html").format(
+            app_title=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")
+
+    with gr.Row(equal_height=True, elem_id="chuanhu-body"):
+
+        with gr.Column(elem_id="menu-area"):
+            with gr.Column(elem_id="chuanhu-history"):
+                with gr.Box():
+                    with gr.Row(elem_id="chuanhu-history-header"):
+                        with gr.Row(elem_id="chuanhu-history-search-row"):
+                            with gr.Column(min_width=150, scale=2):
+                                historySearchTextbox = gr.Textbox(show_label=False, container=False, placeholder=i18n(
+                                    "搜索（支持正则）..."), lines=1, elem_id="history-search-tb")
+                            with gr.Column(min_width=52, scale=1, elem_id="gr-history-header-btns"):
+                                uploadFileBtn = gr.UploadButton(
+                                    interactive=True, label="", file_types=[".json"], elem_id="gr-history-upload-btn")
+                                historyRefreshBtn = gr.Button("", elem_id="gr-history-refresh-btn")
+
+                    with gr.Row(elem_id="chuanhu-history-body"):
+                        with gr.Column(scale=6, elem_id="history-select-wrap"):
+                            historySelectList = gr.Radio(
+                                label=i18n("从列表中加载对话"),
+                                choices=get_history_names(),
+                                value=get_first_history_name(),
+                                # multiselect=False,
+                                container=False,
+                                elem_id="history-select-dropdown"
+                            )
+                        with gr.Row(visible=False):
+                            with gr.Column(min_width=42, scale=1):
+                                historyDeleteBtn = gr.Button(
+                                    "🗑️", elem_id="gr-history-delete-btn")
+                            with gr.Column(min_width=42, scale=1):
+                                historyDownloadBtn = gr.Button(
+                                    "⏬", elem_id="gr-history-download-btn")
+                            with gr.Column(min_width=42, scale=1):
+                                historyMarkdownDownloadBtn = gr.Button(
+                                    "⤵️", elem_id="gr-history-mardown-download-btn")
+                    with gr.Row(visible=False):
+                        with gr.Column(scale=6):
+                            saveFileName = gr.Textbox(
+                                show_label=True,
+                                placeholder=i18n("设置文件名: 默认为.json，可选为.md"),
+                                label=i18n("设置保存文件名"),
+                                value=i18n("对话历史记录"),
+                                elem_classes="no-container"
+                                # container=False,
+                            )
+                        with gr.Column(scale=1):
+                            renameHistoryBtn = gr.Button(
+                                i18n("💾 保存对话"), elem_id="gr-history-save-btn")
+                            exportMarkdownBtn = gr.Button(
+                                i18n("📝 导出为 Markdown"), elem_id="gr-markdown-export-btn")
+
+            with gr.Column(elem_id="chuanhu-menu-footer"):
+                with gr.Row(elem_id="chuanhu-func-nav"):
+                    gr.HTML(get_html("func_nav.html"))
+                # gr.HTML(get_html("footer.html").format(versions=versions_html()), elem_id="footer")
+                # gr.Markdown(CHUANHU_DESCRIPTION, elem_id="chuanhu-author")
+
+        with gr.Column(elem_id="chuanhu-area", scale=5):
+            with gr.Column(elem_id="chatbot-area"):
+                with gr.Row(elem_id="chatbot-header"):
+                    # 获取模型的别名列表
+                    MODEL_ALIASES_LIST = list(MODEL_ALIASES.values())
+                    DEFAULT_MODEL_ALIAS = MODEL_ALIASES["gpt-3.5-turbo"]
+                    
+                    model_select_dropdown = gr.Dropdown(
+                        label=i18n("选择模型"), choices=MODEL_ALIASES_LIST, multiselect=False, value=DEFAULT_MODEL_ALIAS,
+                        interactive=True,
+                        show_label=False, container=False, elem_id="model-select-dropdown"
+                    )
+                    lora_select_dropdown = gr.Dropdown(
+                        label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True,
+                        container=False, visible=False,
+                    )
+                    gr.HTML(get_html("chatbot_header_btn.html").format(
+                        json_label=i18n("历史记录（JSON）"),
+                        md_label=i18n("导出为 Markdown")
+                    ), elem_id="chatbot-header-btn-bar")
+                with gr.Row():
+                    chatbot = gr.Chatbot(
+                        label="ChatGPT",
+                        elem_id="chuanhu-chatbot",
+                        latex_delimiters=latex_delimiters_set,
+                        sanitize_html=False,
+                        # height=700,
+                        show_label=False,
+                        avatar_images=[user_avatar, bot_avatar],
+                        show_share_button=False,
+                    )
+                with gr.Row(elem_id="chatbot-footer"):
+                    with gr.Box(elem_id="chatbot-input-box"):
+                        with gr.Row(elem_id="chatbot-input-row"):
+                            gr.HTML(get_html("chatbot_more.html").format(
+                                single_turn_label=i18n("单轮对话"),
+                                websearch_label=i18n("在线搜索"),
+                                upload_file_label=i18n("上传文件"),
+                                uploaded_files_label=i18n("知识库文件"),
+                                uploaded_files_tip=i18n("在工具箱中管理知识库文件")
+                            ))
+                            with gr.Row(elem_id="chatbot-input-tb-row"):
+                                with gr.Column(min_width=225, scale=12):
+                                    user_input = gr.Textbox(
+                                        elem_id="user-input-tb",
+                                        show_label=False,
+                                        placeholder=i18n("在这里输入"),
+                                        elem_classes="no-container",
+                                        max_lines=5,
+                                        # container=False
+                                    )
+                                with gr.Column(min_width=42, scale=1, elem_id="chatbot-ctrl-btns"):
+                                    submitBtn = gr.Button(
+                                        value="", variant="primary", elem_id="submit-btn")
+                                    cancelBtn = gr.Button(
+                                        value="", variant="secondary", visible=False, elem_id="cancel-btn")
+                        # Note: Buttons below are set invisible in UI. But they are used in JS.
+                        with gr.Row(elem_id="chatbot-buttons", visible=False):
+                            with gr.Column(min_width=120, scale=1):
+                                emptyBtn = gr.Button(
+                                    i18n("🧹 新的对话"), elem_id="empty-btn"
+                                )
+                            with gr.Column(min_width=120, scale=1):
+                                retryBtn = gr.Button(
+                                    i18n("🔄 重新生成"), elem_id="gr-retry-btn")
+                            with gr.Column(min_width=120, scale=1):
+                                delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
+                            with gr.Column(min_width=120, scale=1):
+                                delLastBtn = gr.Button(
+                                    i18n("🗑️ 删除最新对话"), elem_id="gr-dellast-btn")
+                            with gr.Row(visible=False) as like_dislike_area:
+                                with gr.Column(min_width=20, scale=1):
+                                    likeBtn = gr.Button(
+                                        "👍", elem_id="gr-like-btn")
+                                with gr.Column(min_width=20, scale=1):
+                                    dislikeBtn = gr.Button(
+                                        "👎", elem_id="gr-dislike-btn")
+
+        with gr.Column(elem_id="toolbox-area", scale=1):
+            # For CSS setting, there is an extra box. Don't remove it.
+            with gr.Box(elem_id="chuanhu-toolbox"):
+                with gr.Row():
+                    gr.Markdown("## " + i18n("工具箱"))
+                    gr.HTML(get_html("close_btn.html").format(
+                        obj="toolbox"), elem_classes="close-btn")
+                with gr.Tabs(elem_id="chuanhu-toolbox-tabs"):
+                    with gr.Tab(label=i18n("主题")):
+                        with gr.Accordion(label=i18n("模型"), open=not HIDE_MY_KEY, visible=not HIDE_MY_KEY):
+                            keyTxt = gr.Textbox(
+                                show_label=True,
+                                placeholder=f"Your API-key...",
+                                value=hide_middle_chars(user_api_key.value),
+                                type="password",
+                                visible=not HIDE_MY_KEY,
+                                label="API-Key",
+                                elem_id="api-key"
+                            )
+                            if multi_api_key:
+                                usageTxt = gr.Markdown(i18n(
+                                    "多账号模式已开启，无需输入key，可直接开始对话"), elem_id="usage-display",
+                                    elem_classes="insert-block", visible=show_api_billing)
+                            else:
+                                usageTxt = gr.Markdown(i18n(
+                                    "**发送消息** 或 **提交key** 以显示额度"), elem_id="usage-display",
+                                    elem_classes="insert-block", visible=show_api_billing)
+                        gr.Markdown("---", elem_classes="hr-line", visible=not HIDE_MY_KEY)
+                        with gr.Accordion(label="讨论主题展示", open=True):
+                            systemPromptTxt = gr.Textbox(
+                                show_label=True,
+                                placeholder=i18n("在这里输入System Prompt..."),
+                                label="古诗词",
+                                value=INITIAL_SYSTEM_PROMPT,
+                                lines=8
+                            )
+                            retain_system_prompt_checkbox = gr.Checkbox(
+                                label=i18n("新建对话保留当前讨论主题"), value=False, visible=True,
+                                elem_classes="switch-checkbox")
+                            with gr.Accordion(label=i18n("加载自定义讨论主题"), open=False):
+                                with gr.Column():
+                                    with gr.Row():
+                                        with gr.Column(scale=6):
+                                            templateFileSelectDropdown = gr.Dropdown(
+                                                label=i18n("选择Prompt模板集合文件"),
+                                                choices=get_template_names(),
+                                                multiselect=False,
+                                                value=get_template_names()[0],
+                                                container=False,
+                                            )
+                                        with gr.Column(scale=1):
+                                            templateRefreshBtn = gr.Button(
+                                                i18n("🔄 刷新"))
+                                    with gr.Row():
+                                        with gr.Column():
+                                            templateSelectDropdown = gr.Dropdown(
+                                                label=i18n("从Prompt模板中加载"),
+                                                choices=load_template(
+                                                    get_template_names()[
+                                                        0], mode=1
+                                                ),
+                                                multiselect=False,
+                                                container=False,
+                                            )
+                        gr.Markdown("---", elem_classes="hr-line")
+                        with gr.Accordion(label=i18n("知识库"), open=True, elem_id="gr-kb-accordion", visible=True):
+                            use_websearch_checkbox = gr.Checkbox(label=i18n(
+                                "使用在线搜索"), value=False, elem_classes="switch-checkbox", elem_id="gr-websearch-cb",
+                                visible=False)
+                            index_files = gr.Files(label=i18n(
+                                "上传"), type="file",
+                                file_types=[".pdf", ".docx", ".pptx", ".epub", ".xlsx", ".txt", "text", "image"],
+                                elem_id="upload-index-file")
+                            two_column = gr.Checkbox(label=i18n(
+                                "双栏pdf"), value=False)
+                            summarize_btn = gr.Button(i18n("总结"), visible=False)
+
+                    with gr.Tab(label=i18n("模式")):  # 将标题修改为“模式”
+                        gr.Markdown(i18n("# 选择运行模式 ⚙️"),
+                                    elem_id="mode-selection-info")
+                        with gr.Accordion(i18n("模式切换"), open=True):
+                            mode_selection = gr.Radio(choices=["默认模式", "成人模式", "儿童模式", "学生模式"], label=i18n("运行模式"), value="默认模式")
+                            submit_button = gr.Button(i18n("确认选择"))
+                            result = gr.Textbox(label="选择结果")
+                            submit_button.click(on_mode_change, inputs=mode_selection, outputs=result)
+                        gr.Markdown("### 智能图片生成")
+                        # 添加文本输入框用于输入生成图片的文本
+                        image_output = gr.Image(label="古诗文意象图")
+                        text_input = gr.Textbox(label="你的描述")
+                        generate_button = gr.Button("生成图片")
+                        
+                        # 绑定按钮点击事件
+                        # generate_button.click(generate_image, inputs=text_input, outputs=image_output)
+                        # 做一个假本地返回效果
+                        generate_button.click(generate_local_image, inputs=text_input, outputs=image_output)
+  
+                    
+                    # with gr.Tab(label=i18n("参数")):
+                        # gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️"),
+                        #             elem_id="advanced-warning")
+                        # with gr.Accordion(i18n("参数"), open=True):
+                        temperature_slider = gr.Slider(
+                            minimum=-0,
+                            maximum=2.0,
+                            value=1.0,
+                            step=0.1,
+                            interactive=True,
+                            label="temperature",
+                            visible=False
+                        )
+                        top_p_slider = gr.Slider(
+                            minimum=-0,
+                            maximum=1.0,
+                            value=1.0,
+                            step=0.05,
+                            interactive=True,
+                            label="top-p",
+                            visible=False
+                        )
+                        n_choices_slider = gr.Slider(
+                            minimum=1,
+                            maximum=10,
+                            value=1,
+                            step=1,
+                            interactive=True,
+                            label="n choices",
+                            visible=False
+                        )
+                        stop_sequence_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("停止符，用英文逗号隔开..."),
+                            label="stop",
+                            value="",
+                            lines=1,
+                            visible=False
+                        )
+                        max_context_length_slider = gr.Slider(
+                            minimum=1,
+                            maximum=32768,
+                            value=2000,
+                            step=1,
+                            interactive=True,
+                            label="max context",
+                            visible=False
+                        )
+                        max_generation_slider = gr.Slider(
+                            minimum=1,
+                            maximum=32768,
+                            value=1000,
+                            step=1,
+                            interactive=True,
+                            label="max generations",
+                            visible=False
+                        )
+                        presence_penalty_slider = gr.Slider(
+                            minimum=-2.0,
+                            maximum=2.0,
+                            value=0.0,
+                            step=0.01,
+                            interactive=True,
+                            label="presence penalty",
+                            visible=False
+                        )
+                        frequency_penalty_slider = gr.Slider(
+                            minimum=-2.0,
+                            maximum=2.0,
+                            value=0.0,
+                            step=0.01,
+                            interactive=True,
+                            label="frequency penalty",
+                            visible=False
+                        )
+                        logit_bias_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=f"word:likelihood",
+                            label="logit bias",
+                            value="",
+                            lines=1,
+                            visible=False
+                        )
+                        user_identifier_txt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("用于定位滥用行为"),
+                            label=i18n("用户标识符"),
+                            value=user_name.value,
+                            lines=1,
+                            visible=False
+                        )
+                    with gr.Tab(label=i18n("关于")):
+                        gr.Markdown("#### " + i18n("PoetryChat Github地址"))
+                        gr.Markdown(DESCRIPTION)
+
+    with gr.Row(elem_id="popup-wrapper"):
+        with gr.Box(elem_id="chuanhu-popup"):
+            with gr.Box(elem_id="chuanhu-setting"):
+                with gr.Row():
+                    gr.Markdown("## " + i18n("设置"))
+                    gr.HTML(get_html("close_btn.html").format(
+                        obj="box"), elem_classes="close-btn")
+                with gr.Tabs(elem_id="chuanhu-setting-tabs"):
+                    with gr.Tab(label=i18n("高级")):
+                        gr.HTML(get_html("appearance_switcher.html").format(
+                            label=i18n("切换亮暗色主题")), elem_classes="insert-block", visible=False)
+                        use_streaming_checkbox = gr.Checkbox(
+                            label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION,
+                            elem_classes="switch-checkbox"
+                        )
+                        language_select_dropdown = gr.Dropdown(
+                            label=i18n("选择回复语言（针对搜索&索引功能）"),
+                            choices=REPLY_LANGUAGES,
+                            multiselect=False,
+                            value=REPLY_LANGUAGES[0],
+                            visible=False,
+                        )
+                        name_chat_method = gr.Dropdown(
+                            label=i18n("对话命名方式"),
+                            choices=HISTORY_NAME_METHODS,
+                            multiselect=False,
+                            interactive=True,
+                            value=HISTORY_NAME_METHODS[chat_name_method_index],
+                        )
+                        single_turn_checkbox = gr.Checkbox(label=i18n(
+                            "单轮对话"), value=False, elem_classes="switch-checkbox", elem_id="gr-single-session-cb",
+                            visible=False)
+                        # checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
+                        logout_btn = gr.Button(i18n("退出用户"), variant="primary", visible=authflag)
+
+                    with gr.Tab(i18n("网络")):
+                        gr.Markdown(
+                            i18n("⚠️ 为保证API-Key安全，请在配置文件`config.json`中修改网络设置"),
+                            elem_id="netsetting-warning")
+                        default_btn = gr.Button(i18n("🔙 恢复默认网络设置"))
+                        # 网络代理
+                        proxyTxt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("未设置代理..."),
+                            label=i18n("代理地址"),
+                            value=http_proxy,
+                            lines=1,
+                            interactive=False,
+                            # container=False,
+                            elem_classes="view-only-textbox no-container",
+                        )
+                        # changeProxyBtn = gr.Button(i18n("🔄 设置代理地址"))
+
+                        # 优先展示自定义的api_host
+                        apihostTxt = gr.Textbox(
+                            show_label=True,
+                            placeholder="api.openai.com",
+                            label="OpenAI API-Host",
+                            value=api_host or API_HOST,
+                            lines=1,
+                            interactive=False,
+                            # container=False,
+                            elem_classes="view-only-textbox no-container",
+                        )
+
+                    with gr.Tab(label=i18n("关于"), elem_id="about-tab"):
+                        gr.Markdown("# " + i18n("PoetryChat"))
+                        gr.Markdown(DESCRIPTION, elem_id="description")
+
+            with gr.Box(elem_id="web-config", visible=False):
+                gr.HTML(get_html('web_config.html').format(
+                    enableCheckUpdate_config=False,
+                    hideHistoryWhenNotLoggedIn_config=hide_history_when_not_logged_in,
+                    forView_i18n=i18n("仅供查看"),
+                    deleteConfirm_i18n_pref=i18n("你真的要删除 "),
+                    deleteConfirm_i18n_suff=i18n(" 吗？"),
+                    usingLatest_i18n=i18n("您使用的就是最新版！"),
+                    updatingMsg_i18n=i18n("正在尝试更新..."),
+                    updateSuccess_i18n=i18n("更新成功，请重启本程序"),
+                    updateFailure_i18n=i18n(
+                        "更新失败，请尝试[手动更新](https://github.com/shibing624/chatgpt-webui/"),
+                    regenerate_i18n=i18n("重新生成"),
+                    deleteRound_i18n=i18n("删除这轮问答"),
+                    renameChat_i18n=i18n("重命名该对话"),
+                    validFileName_i18n=i18n("请输入有效的文件名，不要包含以下特殊字符："),
+                    clearFileHistoryMsg_i18n=i18n("⚠️请先删除知识库中的历史文件，再尝试上传！"),
+                    dropUploadMsg_i18n=i18n("释放文件以上传"),
+                ))
+            with gr.Box(elem_id="fake-gradio-components", visible=False):
+                changeSingleSessionBtn = gr.Button(
+                    visible=False, elem_classes="invisible-btn", elem_id="change-single-session-btn")
+                changeOnlineSearchBtn = gr.Button(
+                    visible=False, elem_classes="invisible-btn", elem_id="change-online-search-btn")
+                historySelectBtn = gr.Button(
+                    visible=False, elem_classes="invisible-btn", elem_id="history-select-btn")  # Not used
+
+
+    def create_greeting(request: gr.Request):
+        if hasattr(request, "username") and request.username:
+            logger.info(f"Get User Name: {request.username}")
+            user_info, user_name = gr.Markdown.update(
+                value=f"User: {request.username}"), request.username
+        else:
+            user_info, user_name = gr.Markdown.update(
+                value=f"", visible=False), ""
+        current_model = get_model(
+            model_name=MODELS[DEFAULT_MODEL], access_key=my_api_key, user_name=user_name)[0]
+        if not hide_history_when_not_logged_in or user_name:
+            loaded_stuff = current_model.auto_load()
+        else:
+            loaded_stuff = [gr.update(), gr.update(), gr.Chatbot.update(label=MODELS[DEFAULT_MODEL]),
+                            current_model.single_turn, current_model.temperature, current_model.top_p,
+                            current_model.n_choices, current_model.stop_sequence, current_model.token_upper_limit,
+                            current_model.max_generation_token, current_model.presence_penalty,
+                            current_model.frequency_penalty, current_model.logit_bias, current_model.user_identifier]
+        return user_info, user_name, current_model, toggle_like_btn_visibility(
+            DEFAULT_MODEL), *loaded_stuff, init_history_list(user_name, prepend=current_model.history_file_path[:-5])
+
+    
+    demo.load(create_greeting, inputs=None, outputs=[
+        user_info, user_name, current_model, like_dislike_area, saveFileName, systemPromptTxt, chatbot,
+        single_turn_checkbox, temperature_slider, top_p_slider, n_choices_slider, stop_sequence_txt,
+        max_context_length_slider, max_generation_slider, presence_penalty_slider, frequency_penalty_slider,
+        logit_bias_txt, user_identifier_txt, historySelectList], api_name="load")
+    chatgpt_predict_args = dict(
+        fn=predict,
+        inputs=[
+            current_model,
+            user_question,
+            chatbot,
+            use_streaming_checkbox,
+            use_websearch_checkbox,
+            index_files,
+            language_select_dropdown,
+        ],
+        outputs=[chatbot, status_display],
+        show_progress=True,
+    )
+
+    start_outputing_args = dict(
+        fn=start_outputing,
+        inputs=[],
+        outputs=[submitBtn, cancelBtn],
+        show_progress=True,
+    )
+
+    end_outputing_args = dict(
+        fn=end_outputing, inputs=[], outputs=[submitBtn, cancelBtn]
+    )
+
+    reset_textbox_args = dict(
+        fn=reset_textbox, inputs=[], outputs=[user_input]
+    )
+
+    transfer_input_args = dict(
+        fn=transfer_input, inputs=[user_input], outputs=[
+            user_question, user_input, submitBtn, cancelBtn], show_progress=True
+    )
+
+    get_usage_args = dict(
+        fn=billing_info, inputs=[current_model], outputs=[
+            usageTxt], show_progress=False
+    )
+
+    load_history_from_file_args = dict(
+        fn=load_chat_history,
+        inputs=[current_model, historySelectList],
+        outputs=[saveFileName, systemPromptTxt, chatbot, single_turn_checkbox, temperature_slider, top_p_slider,
+                 n_choices_slider, stop_sequence_txt, max_context_length_slider, max_generation_slider,
+                 presence_penalty_slider, frequency_penalty_slider, logit_bias_txt, user_identifier_txt],
+    )
+
+    refresh_history_args = dict(
+        fn=get_history_list, inputs=[user_name], outputs=[historySelectList]
+    )
+
+    auto_name_chat_history_args = dict(
+        fn=auto_name_chat_history,
+        inputs=[current_model, name_chat_method, user_question, chatbot, single_turn_checkbox],
+        outputs=[historySelectList],
+        show_progress=False,
+    )
+
+    # Chatbot
+    cancelBtn.click(interrupt, [current_model], [])
+
+    user_input.submit(
+        **transfer_input_args).then(
+        **chatgpt_predict_args).then(
+        **end_outputing_args).then(
+        **auto_name_chat_history_args)
+    user_input.submit(**get_usage_args)
+
+    submitBtn.click(**transfer_input_args).then(
+        **chatgpt_predict_args, api_name="predict").then(
+        **end_outputing_args).then(
+        **auto_name_chat_history_args)
+    submitBtn.click(**get_usage_args)
+    index_files.upload(handle_file_upload, [current_model, index_files, chatbot, language_select_dropdown], [
+        index_files, chatbot, status_display])
+    summarize_btn.click(handle_summarize_index, [
+        current_model, index_files, chatbot, language_select_dropdown], [chatbot, status_display])
+    emptyBtn.click(
+        reset,
+        inputs=[current_model, retain_system_prompt_checkbox],
+        outputs=[chatbot, status_display, historySelectList, systemPromptTxt, single_turn_checkbox, temperature_slider,
+                 top_p_slider, n_choices_slider, stop_sequence_txt, max_context_length_slider, max_generation_slider,
+                 presence_penalty_slider, frequency_penalty_slider, logit_bias_txt, user_identifier_txt],
+        show_progress=True,
+        _js='(a,b)=>{return clearChatbot(a,b);}',
+    )
+
+    retryBtn.click(**start_outputing_args).then(
+        retry,
+        [
+            current_model,
+            chatbot,
+            use_streaming_checkbox,
+            use_websearch_checkbox,
+            index_files,
+            language_select_dropdown,
+        ],
+        [chatbot, status_display],
+        show_progress=True,
+    ).then(**end_outputing_args)
+    retryBtn.click(**get_usage_args)
+
+    delFirstBtn.click(
+        delete_first_conversation,
+        [current_model],
+        [status_display],
+    )
+
+    delLastBtn.click(
+        delete_last_conversation,
+        [current_model, chatbot],
+        [chatbot, status_display],
+        show_progress=False
+    )
+
+    likeBtn.click(
+        like,
+        [current_model],
+        [status_display],
+        show_progress=False
+    )
+
+    dislikeBtn.click(
+        dislike,
+        [current_model],
+        [status_display],
+        show_progress=False
+    )
+    two_column.change(update_doc_config, [two_column], None)
+
+    # LLM Models
+    keyTxt.change(set_key, [current_model, keyTxt], [
+        user_api_key, status_display], api_name="set_key").then(**get_usage_args)
+    keyTxt.submit(**get_usage_args)
+    single_turn_checkbox.change(
+        set_single_turn, [current_model, single_turn_checkbox], None, show_progress=False)
+    model_select_dropdown.change(get_model,
+                                 [model_select_dropdown, lora_select_dropdown, user_api_key, temperature_slider,
+                                  top_p_slider, systemPromptTxt, user_name, current_model], [
+                                     current_model, status_display, chatbot, lora_select_dropdown, user_api_key,
+                                     keyTxt], show_progress=True, api_name="get_model")
+    model_select_dropdown.change(toggle_like_btn_visibility, [model_select_dropdown], [
+        like_dislike_area], show_progress=False)
+    lora_select_dropdown.change(get_model,
+                                [model_select_dropdown, lora_select_dropdown, user_api_key, temperature_slider,
+                                 top_p_slider, systemPromptTxt, user_name, current_model],
+                                [current_model, status_display, chatbot], show_progress=True)
+
+    # Template
+    systemPromptTxt.change(set_system_prompt, [
+        current_model, systemPromptTxt], None)
+    templateRefreshBtn.click(get_template_dropdown, None, [
+        templateFileSelectDropdown])
+    templateFileSelectDropdown.input(
+        load_template,
+        [templateFileSelectDropdown],
+        [promptTemplates, templateSelectDropdown],
+        show_progress=True,
+    )
+    templateSelectDropdown.change(
+        get_template_content,
+        [promptTemplates, templateSelectDropdown, systemPromptTxt],
+        [systemPromptTxt],
+        show_progress=True,
+    )
+
+    # S&L
+    renameHistoryBtn.click(
+        rename_chat_history,
+        [current_model, saveFileName, chatbot],
+        [historySelectList],
+        show_progress=True,
+        _js='(a,b,c,d)=>{return saveChatHistory(a,b,c,d);}'
+    )
+    exportMarkdownBtn.click(
+        export_markdown,
+        [current_model, saveFileName, chatbot],
+        [],
+        show_progress=True,
+    )
+    historyRefreshBtn.click(**refresh_history_args)
+    historyDeleteBtn.click(delete_chat_history, [current_model, historySelectList],
+                           [status_display, historySelectList, chatbot],
+                           _js='(a,b,c)=>{return showConfirmationDialog(a, b, c);}').then(
+        reset,
+        inputs=[current_model, retain_system_prompt_checkbox],
+        outputs=[chatbot, status_display, historySelectList, systemPromptTxt],
+        show_progress=True,
+        _js='(a,b)=>{return clearChatbot(a,b);}',
+    )
+    historySelectList.input(**load_history_from_file_args)
+    uploadFileBtn.upload(upload_chat_history, [current_model, uploadFileBtn], [
+        saveFileName, systemPromptTxt, chatbot, single_turn_checkbox, temperature_slider, top_p_slider,
+        n_choices_slider, stop_sequence_txt, max_context_length_slider, max_generation_slider, presence_penalty_slider,
+        frequency_penalty_slider, logit_bias_txt, user_identifier_txt]).then(**refresh_history_args)
+    historyDownloadBtn.click(None, [
+        user_name, historySelectList], None, _js='(a,b)=>{return downloadHistory(a,b,".json");}')
+    historyMarkdownDownloadBtn.click(None, [
+        user_name, historySelectList], None, _js='(a,b)=>{return downloadHistory(a,b,".md");}')
+    historySearchTextbox.input(
+        filter_history,
+        [user_name, historySearchTextbox],
+        [historySelectList]
+    )
+
+    # Advanced
+    temperature_slider.input(
+        set_temperature, [current_model, temperature_slider], None, show_progress=False)
+    top_p_slider.input(set_top_p, [current_model, top_p_slider], None, show_progress=False)
+    n_choices_slider.input(
+        set_n_choices, [current_model, n_choices_slider], None, show_progress=False)
+    stop_sequence_txt.input(
+        set_stop_sequence, [current_model, stop_sequence_txt], None, show_progress=False)
+    max_context_length_slider.input(
+        set_token_upper_limit, [current_model, max_context_length_slider], None, show_progress=False)
+    max_generation_slider.input(
+        set_max_tokens, [current_model, max_generation_slider], None, show_progress=False)
+    presence_penalty_slider.input(
+        set_presence_penalty, [current_model, presence_penalty_slider], None, show_progress=False)
+    frequency_penalty_slider.input(
+        set_frequency_penalty, [current_model, frequency_penalty_slider], None, show_progress=False)
+    logit_bias_txt.input(
+        set_logit_bias, [current_model, logit_bias_txt], None, show_progress=False)
+    user_identifier_txt.input(set_user_identifier, [
+        current_model, user_identifier_txt], None, show_progress=False)
+
+    default_btn.click(
+        reset_default, [], [apihostTxt, proxyTxt, status_display], show_progress=True
+    )
+
+    # Invisible elements
+    changeSingleSessionBtn.click(
+        fn=lambda value: gr.Checkbox.update(value=value),
+        inputs=[single_turn_checkbox],
+        outputs=[single_turn_checkbox],
+        _js='(a)=>{return bgChangeSingleSession(a);}'
+    )
+    changeOnlineSearchBtn.click(
+        fn=lambda value: gr.Checkbox.update(value=value),
+        inputs=[use_websearch_checkbox],
+        outputs=[use_websearch_checkbox],
+        _js='(a)=>{return bgChangeOnlineSearch(a);}'
+    )
+    historySelectBtn.click(  # This is an experimental feature... Not actually used.
+        fn=load_chat_history,
+        inputs=[current_model, historySelectList],
+        outputs=[saveFileName, systemPromptTxt, chatbot, single_turn_checkbox, temperature_slider, top_p_slider,
+                 n_choices_slider, stop_sequence_txt, max_context_length_slider, max_generation_slider,
+                 presence_penalty_slider, frequency_penalty_slider, logit_bias_txt, user_identifier_txt],
+        _js='(a,b)=>{return bgSelectHistory(a,b);}'
+    )
+    logout_btn.click(
+        fn=None,
+        inputs=[],
+        outputs=[],
+        _js='self.location="/logout"'
+    )
+
+demo.title = TITLE
+
+if __name__ == "__main__":
+    reload_javascript()
+    setup_wizard()
+    demo.queue(concurrency_count=CONCURRENT_COUNT).launch(
+        allowed_paths=[HISTORY_DIR, assets_path],
+        server_name=server_name,
+        server_port=server_port,
+        share=share,
+        blocked_paths=[config_file],
+        auth=auth_from_conf if authflag else None,
+        favicon_path=favicon_path,
+        inbrowser=autobrowser and not dockerflag,
+    )

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/html/billing_info.html

@@ -0,0 +1,9 @@
+<b>{label}</b>
+<div class="progress-bar">
+    <div class="progress" style="width: {usage_percent}%;">
+        <span class="progress-text">{usage_percent}%</span>
+    </div>
+</div>
+<div style="display: flex; justify-content: space-between;">
+    <span>${rounded_usage}</span><span>${usage_limit}</span>
+</div>

assets/html/chatbot_header_btn.html

@@ -0,0 +1,72 @@
+<div id="header-btn-groups">
+    <div class="btn-bar-group" style="margin-left: -12px;">
+        <span class="show-on-gpt">
+            <button id="chuanhu-training-btn" onclick="openTrainingBox()" class="chuanhu-ui-btn" style="visibility: hidden">
+                <!-- <svg width="24px" height="24px" viewBox="0 0 45.297 28.8394" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g fill="currentColor" fill-rule="nonzero">
+                            <path d="M0,23.4288 C0,27.0248 1.8307,28.8394 5.45907,28.8394 L39.8379,28.8394 C43.4663,28.8394 45.297,27.0248 45.297,23.4288 L45.297,5.41055 C45.297,1.81453 43.4663,0 39.8379,0 L9.91219,0 C6.82641,0 5.13938,1.74422 4.24945,4.43907 L0.618281,15.4643 C0.1875,16.7405 0,17.8041 0,19.4644 L0,23.4288 Z M17.6306,14.2226 L17.6306,8.14923 C17.6306,7.09126 18.2522,6.46969 19.3263,6.46969 L36.3459,6.46969 C37.4201,6.46969 38.0344,7.09126 38.0344,8.14923 L38.0344,14.2226 C38.0344,15.2498 37.4201,15.8714 36.3459,15.8714 L19.3263,15.8714 C18.2522,15.8714 17.6306,15.2498 17.6306,14.2226 Z M6.14415,15.8714 C5.12415,15.8714 4.63102,15.0713 5.01259,13.8724 L7.02539,7.75805 C7.27758,6.97805 7.66875,6.46969 8.95946,6.46969 L11.2486,6.46969 C12.3066,6.46969 12.9443,7.09126 12.9443,8.14923 L12.9443,14.2226 C12.9443,15.2498 12.3066,15.8714 11.2486,15.8714 L6.14415,15.8714 Z" fill-opacity="0.85"></path>
+                        </g>
+                    </g>
+                </svg> -->
+                <svg width="24px" height="24px" viewBox="0 0 21.4889 22.038" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <g transform-origin="center" transform="scale(0.85)">
+                        <path d="M1.1492 20.81C2.69607 22.3569 4.95779 22.3803 6.51638 20.5991C8.18045 18.7006 10.0672 15.1381 12.6922 12.5131C14.6961 10.5092 17.1101 12.3959 19.8875 9.75923C21.0711 8.63423 21.7039 7.02876 21.4226 5.88032L17.8015 6.87642C17.2976 7.00532 16.8992 6.66548 16.7234 6.05611L16.4539 5.14204C16.2781 4.53267 16.5125 4.04048 17.0164 3.89986L20.6258 2.9272C20.532 2.57564 20.1922 2.09517 19.782 1.67329C17.6258-0.553269 14.0281-0.494675 11.9539 1.47407C8.86013 4.40376 11.1687 7.49751 9.23513 9.43111C6.80935 11.8569 3.24685 13.7788 1.34842 15.4428C-0.432835 17.0014-0.397679 19.2631 1.1492 20.81ZM2.13357 19.8256C1.17263 18.8413 1.17263 17.3881 2.30935 16.4038C4.19607 14.7514 8.00467 12.6303 10.2195 10.4155C12.5867 8.04829 10.0086 5.16548 12.9617 2.45845C14.4617 1.06392 17.1804 1.00532 18.8914 2.59907L19.2429 1.9897L16.7351 2.64595C15.3523 3.00923 14.7429 4.07564 15.1531 5.51704L15.4109 6.40767C15.8797 8.01314 16.8054 8.45845 18.0594 8.11861L20.6609 7.41548L20.0398 7.09907C19.8406 7.75532 19.4773 8.3647 18.9617 8.86861C16.7351 11.0483 14.075 9.17329 11.7078 11.5288C9.30545 13.9194 7.20779 17.7514 5.55545 19.6499C4.54763 20.81 3.09451 20.81 2.13357 19.8256ZM13.0086 9.09126L15.0125 8.5522C15.1883 8.50532 15.2937 8.31782 15.2469 8.11861C15.2 7.94282 15.0242 7.82564 14.825 7.88423L12.8328 8.42329C12.657 8.47017 12.5515 8.65767 12.5867 8.84517C12.6219 9.04439 12.8211 9.13814 13.0086 9.09126ZM12.7625 8.08345L14.7429 7.55611C14.9304 7.50923 15.0359 7.32173 14.989 7.12251C14.9422 6.93501 14.7429 6.82954 14.5672 6.87642L12.575 7.41548C12.3875 7.46236 12.282 7.66157 12.3289 7.82564C12.3875 8.03657 12.5633 8.14204 12.7625 8.08345ZM12.5164 7.07564L14.4969 6.54829C14.6844 6.50142 14.7898 6.31392 14.7429 6.1147C14.6961 5.9272 14.4969 5.82173 14.3211 5.86861L12.3289 6.40767C12.1414 6.45454 12.0359 6.65376 12.0828 6.81782C12.1414 7.02876 12.3172 7.13423 12.5164 7.07564ZM16.5242 10.5444L17.4265 10.3452L16.3133 6.22017L15.4109 6.40767ZM3.80935 19.3217C4.44217 19.3217 4.96951 18.8061 4.96951 18.1616C4.96951 17.5288 4.44217 17.0014 3.80935 17.0014C3.16482 17.0014 2.63748 17.5288 2.63748 18.1616C2.63748 18.8061 3.16482 19.3217 3.80935 19.3217Z" fill="currentColor" fill-opacity="0.85"/>
+                    </g>
+                </svg>
+            </button>
+        </span>
+    </div>
+
+    <div class="btn-bar-group">
+        <button id="new-chat-btn" onclick="newChatClick()" class="chuanhu-ui-btn">
+            <!-- <svg width="24px" height="24px" viewBox="0 0 41.3058 37.9805" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                        <path d="M7.85906,37.9732 C10.2516,37.9732 15.1013,35.6613 18.7802,33.1193 C31.3151,33.6708 41.3058,26.4138 41.3058,16.6013 C41.3058,7.42008 32.1359,0 20.6529,0 C9.17883,0 0,7.42008 0,16.6013 C0,22.5973 3.85266,27.9152 9.65789,30.6202 C8.82141,32.2172 7.33664,34.2469 6.52195,35.292 C5.57226,36.5116 6.08883,37.9732 7.85906,37.9732 Z M9.48751,35.2875 C9.34688,35.336 9.30727,35.2334 9.40829,35.1089 C10.392,33.8965 11.858,32.0149 12.5182,30.7552 C12.9734,29.9184 12.8473,29.1593 11.8221,28.6863 C6.06376,26.0217 2.68407,21.6335 2.68407,16.6013 C2.68407,8.91657 10.6542,2.66954 20.6529,2.66954 C30.6677,2.66954 38.6217,8.91657 38.6217,16.6013 C38.6217,24.2698 30.6677,30.5241 20.6529,30.5241 C20.1642,30.5241 19.5356,30.495 18.747,30.4659 C18.0687,30.4587 17.5069,30.66 16.9006,31.1402 C14.4764,32.7921 11.1403,34.7288 9.48751,35.2875 Z" fill-opacity="0.85" fill="currentColor"></path>
+                        <path d="M12.233,16.7468 C12.233,17.5238 12.7908,18.0816 13.6235,18.0816 L19.2947,18.0816 L19.2947,23.7778 C19.2947,24.5855 19.8525,25.1522 20.6295,25.1522 C21.4371,25.1522 22.0111,24.5927 22.0111,23.7778 L22.0111,18.0816 L27.7146,18.0816 C28.515,18.0816 29.0817,17.5238 29.0817,16.7468 C29.0817,15.9391 28.5223,15.3652 27.7146,15.3652 L22.0111,15.3652 L22.0111,9.67782 C22.0111,8.85399 21.4371,8.28727 20.6295,8.28727 C19.8525,8.28727 19.2947,8.86125 19.2947,9.67782 L19.2947,15.3652 L13.6235,15.3652 C12.7835,15.3652 12.233,15.9391 12.233,16.7468 Z" fill-opacity="0.85" fill="currentColor"></path>
+                    </g>
+                </g>
+            </svg> -->
+            <svg width="24px" height="24px" viewBox="0 0 15.0076 15.0274" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <g transform-origin="center" transform="scale(0.75)">
+                    <path d="M0 7.50785C0 7.89996 0.328243 8.23184 0.723986 8.23184L6.78387 8.23184L6.78387 14.2917C6.78387 14.6794 7.11574 15.0157 7.50785 15.0157C7.89996 15.0157 8.22375 14.6794 8.22375 14.2917L8.22375 8.23184L14.2917 8.23184C14.6794 8.23184 15.0076 7.89996 15.0076 7.50785C15.0076 7.11574 14.6794 6.78387 14.2917 6.78387L8.22375 6.78387L8.22375 0.723986C8.22375 0.336329 7.89996 0 7.50785 0C7.11574 0 6.78387 0.336329 6.78387 0.723986L6.78387 6.78387L0.723986 6.78387C0.328243 6.78387 0 7.11574 0 7.50785Z" fill="currentColor" fill-opacity="0.85"/>
+                </g>
+            </svg>
+        </button>
+
+        <div class="nav-item-dropdown">
+            <button id="export-chat-btn" onclick="" class="chuanhu-ui-btn dropdown-trigger">
+                <svg width="24px" height="24px" viewBox="0 0 16.4883 25.0898" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <g stroke="none" fill="currentColor" fill-rule="nonzero" transform-origin="center" transform="scale(1.1)">
+                        <path d="M13.5,7.39453 C15.5039,7.39453 16.4883,8.37891 16.4883,10.3477 L16.4883,19.3594 C16.4883,21.3281 15.5039,22.3125 13.5,22.3125 L2.98828,22.3125 C0.996094,22.3125 0,21.3281 0,19.3594 L0,10.3477 C0,8.37891 0.996094,7.39453 2.98828,7.39453 L5.554,7.394 L5.554,9.093 L3.01172,9.09375 C2.21760235,9.09375 1.74528291,9.49859318 1.69246372,10.2789831 L1.6875,10.4297 L1.6875,19.2773 C1.6875,20.168 2.16797,20.6133 3.01172,20.6133 L13.4766,20.6133 C14.3086,20.6133 14.8008,20.168 14.8008,19.2773 L14.8008,10.4297 C14.8008,9.55078 14.3086,9.09375 13.4766,9.09375 L10.921,9.093 L10.921,7.394 Z" fill-opacity="0.85"></path>
+                        <path d="M8.23828,15.0469 C8.69531,15.0469 9.08203,14.6719 9.08203,14.2266 L9.08203,5.08594 L9.01172,3.67969 L9.50391,4.21875 L10.793,5.61328 C10.9453,5.77734 11.1562,5.85938 11.3555,5.85938 C11.8008,5.85938 12.1289,5.55469 12.1289,5.13281 C12.1289,4.89844 12.0352,4.73438 11.8711,4.58203 L8.84766,1.6875 C8.63672,1.47656 8.46094,1.40625 8.23828,1.40625 C8.02734,1.40625 7.85156,1.47656 7.62891,1.6875 L4.60547,4.58203 C4.45312,4.73438 4.35938,4.89844 4.35938,5.13281 C4.35938,5.55469 4.67578,5.85938 5.12109,5.85938 C5.32031,5.85938 5.54297,5.77734 5.69531,5.61328 L6.98438,4.21875 L7.47656,3.67969 L7.40625,5.08594 L7.40625,14.2266 C7.40625,14.6719 7.79297,15.0469 8.23828,15.0469 Z" fill-opacity="0.85"></path>
+                    </g>
+                </svg>
+            </button>
+            <div class="dropdown-menu">
+                <div class="dropdown-menu-item">
+                    <button onclick="jsonDownloadClick()">{json_label}</button>
+                </div>
+                <div class="dropdown-menu-item">
+                    <button onclick="mdDownloadClick()">{md_label}</button>
+                </div>
+            </div>
+        </div>
+
+        <button id="open-toolbox-btn" onclick="toolboxClick()" class="chuanhu-ui-btn">
+            <!-- <svg width="24px" height="24px" viewBox="0 0 33.5163 33.5705" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <g stroke="none" fill="currentColor" fill-rule="nonzero" transform-origin="center" transform="scale(0.8)">
+                    <path d="M5.58422,33.5705 L27.9321,33.5705 C31.6493,33.5705 33.5163,31.6889 33.5163,28.0348 L33.5163,5.57367 C33.5163,1.91953 31.6493,0.0379686 27.9321,0.0379686 L5.58422,0.0379686 C1.8832,0.0379686 0,1.905 0,5.57367 L0,28.0348 C0,31.7034 1.8832,33.5705 5.58422,33.5705 Z M5.6311,30.9495 C3.67477,30.9495 2.60485,29.928 2.60485,27.907 L2.60485,5.70141 C2.60485,3.69657 3.67477,2.65899 5.6311,2.65899 L27.8852,2.65899 C29.8125,2.65899 30.9115,3.69657 30.9115,5.70141 L30.9115,27.907 C30.9115,29.928 29.8125,30.9495 27.8852,30.9495 L5.6311,30.9495 Z" fill-opacity="0.85"></path>
+                    <path d="M7.69266,12.7402 L17.3438,12.7402 L17.3438,10.572 L7.69266,10.572 C7.07907,10.572 6.60047,11.0505 6.60047,11.648 C6.60047,12.2616 7.07907,12.7402 7.69266,12.7402 Z M20.021,15.3488 C22.0545,15.3488 23.704,13.683 23.704,11.6334 C23.704,9.6 22.0545,7.9343 20.021,7.9343 C17.9876,7.9343 16.3219,9.6 16.3219,11.6334 C16.3219,13.683 17.9876,15.3488 20.021,15.3488 Z M20.021,13.5841 C18.922,13.5841 18.0865,12.7179 18.0865,11.6262 C18.0865,10.5345 18.922,9.69165 20.021,9.69165 C21.0966,9.69165 21.9483,10.5345 21.9483,11.6262 C21.9483,12.7179 21.0966,13.5841 20.021,13.5841 Z M22.5487,12.7402 L25.8884,12.7402 C26.4534,12.7402 26.932,12.2616 26.932,11.648 C26.932,11.0505 26.4534,10.572 25.8884,10.572 L22.5487,10.572 L22.5487,12.7402 Z M25.8237,20.5158 L16.1726,20.5158 L16.1726,22.6913 L25.8237,22.6913 C26.4534,22.6913 26.932,22.2054 26.932,21.608 C26.932,21.0016 26.4534,20.5158 25.8237,20.5158 Z M13.4953,17.9145 C11.4781,17.9145 9.81962,19.5802 9.81962,21.6225 C9.81962,23.6559 11.4781,25.3216 13.4953,25.3216 C15.5288,25.3216 17.1945,23.6559 17.1945,21.6225 C17.1945,19.5802 15.5288,17.9145 13.4953,17.9145 Z M13.4953,19.6791 C14.5943,19.6791 15.4298,20.538 15.4298,21.6298 C15.4298,22.7288 14.5943,23.5643 13.4953,23.5643 C12.4198,23.5643 11.5842,22.7288 11.5842,21.6298 C11.5842,20.538 12.4198,19.6791 13.4953,19.6791 Z M10.9838,20.5158 L7.64415,20.5158 C7.07907,20.5158 6.60047,21.0016 6.60047,21.608 C6.60047,22.2054 7.07907,22.6913 7.64415,22.6913 L10.9838,22.6913 L10.9838,20.5158 Z" fill-opacity="0.85" transform="translate(16.7662, 16.628) scale(-1, 1) translate(-16.7662, -16.628)"></path>
+                </g>
+            </svg> -->
+            <svg width="24px" height="24px" viewBox="0 0 17.0977 17.0977" viewBox="0 0 17.0742 17.0977" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <g transform-origin="center" transform="scale(0.82)" fill="currentColor" fill-rule="nonzero" fill-opacity="0.82">
+                    <path d="M2.98828,17.0977 L14.0859,17.0977 C16.0898,17.0977 17.0742,16.1133 17.0742,14.1445 L17.0742,2.96484 C17.0742,0.996094 16.0898,0.0117188 14.0859,0.0117188 L2.98828,0.0117188 C0.996094,0.0117188 0,0.996094 0,2.96484 L0,14.1445 C0,16.1133 0.996094,17.0977 2.98828,17.0977 Z M3.01172,15.3984 C2.16797,15.3984 1.6875,14.9531 1.6875,14.0625 L1.6875,3.04688 C1.6875,2.16797 2.16797,1.71094 3.01172,1.71094 L14.0625,1.71094 C14.9062,1.71094 15.3867,2.16797 15.3867,3.04688 L15.3867,14.0625 C15.3867,14.9531 14.9062,15.3984 14.0625,15.3984 L3.01172,15.3984 Z"></path>
+                    <path d="M4.34766,6.66797 L8.67188,6.66797 L8.67188,5.29688 L4.34766,5.29688 C3.96094,5.29688 3.65625,5.60156 3.65625,5.97656 C3.65625,6.36328 3.96094,6.66797 4.34766,6.66797 Z M9.89062,7.86328 C10.9219,7.86328 11.7539,7.01953 11.7539,5.97656 C11.7539,4.94531 10.9219,4.10156 9.89062,4.10156 C8.85938,4.10156 8.01562,4.94531 8.01562,5.97656 C8.01562,7.01953 8.85938,7.86328 9.89062,7.86328 Z M9.89062,6.83203 C9.41016,6.83203 9.04688,6.45703 9.04688,5.97656 C9.04688,5.49609 9.41016,5.13281 9.89062,5.13281 C10.3594,5.13281 10.7344,5.49609 10.7344,5.97656 C10.7344,6.45703 10.3594,6.83203 9.89062,6.83203 Z M11.0273,6.66797 L12.7734,6.66797 C13.125,6.66797 13.4297,6.36328 13.4297,5.97656 C13.4297,5.60156 13.125,5.29688 12.7734,5.29688 L11.0273,5.29688 L11.0273,6.66797 Z M12.7266,10.207 L8.40234,10.207 L8.40234,11.5781 L12.7266,11.5781 C13.125,11.5781 13.4297,11.2734 13.4297,10.8984 C13.4297,10.5117 13.125,10.207 12.7266,10.207 Z M7.18359,9.01172 C6.16406,9.01172 5.32031,9.85547 5.32031,10.8984 C5.32031,11.9297 6.16406,12.7734 7.18359,12.7734 C8.21484,12.7734 9.05859,11.9297 9.05859,10.8984 C9.05859,9.85547 8.21484,9.01172 7.18359,9.01172 Z M7.18359,10.043 C7.66406,10.043 8.02734,10.418 8.02734,10.8984 C8.02734,11.3789 7.66406,11.7422 7.18359,11.7422 C6.71484,11.7422 6.35156,11.3789 6.35156,10.8984 C6.35156,10.418 6.71484,10.043 7.18359,10.043 Z M6.05859,10.207 L4.3125,10.207 C3.96094,10.207 3.65625,10.5117 3.65625,10.8984 C3.65625,11.2734 3.96094,11.5781 4.3125,11.5781 L6.05859,11.5781 L6.05859,10.207 Z" transform="translate(8.543, 8.4375) scale(-1, 1) translate(-8.543, -8.4375)"></path>
+                </g>
+            </svg>
+        </button>
+    </div>
+</div>

assets/html/chatbot_more.html

@@ -0,0 +1,72 @@
+<div>
+    <div id="chatbot-input-more-area">
+        <span class="chatbot-input-more-label-group">
+            <div class="switch-checkbox">
+                <label>
+                    <input type="checkbox" name="single-session-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
+                    <span class="chatbot-input-more-span">{single_turn_label}</span>
+                </label>
+            </div>
+        
+            <div class="switch-checkbox">
+                <label>
+                    <input type="checkbox" name="online-search-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
+                    <span class="chatbot-input-more-span">{websearch_label}</span>
+                </label>
+            </div>
+        </span>
+
+        <span class="chatbot-input-more-label-group">
+            <div class="chatbot-input-more-btn last-btn">
+                <label class="may-disable-label">
+                    <div id="uploaded-files-btn" onclick="showKnowledgeBase();">
+                        <span class="chatbot-input-more-span tooltip-toggle" aria-label="{uploaded_files_tip}">{uploaded_files_label}</span>
+                        <span class="chatbot-input-more-icon" id="uploaded-files-count"></span>
+                    </div>
+                    <button id="upload-files-btn">
+                        <span class="chatbot-input-more-span">{upload_file_label}</span>
+                        <span class="chatbot-input-more-icon">
+                            <svg width="18px" height="22px" viewBox="0 0 17.6625708 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                    <g fill="currentColor" fill-rule="nonzero">
+                                        <path d="M10.6020285,2.51882667 C11.4362625,2.51882667 11.8921676,2.64807396 12.4438001,3.21682942 L16.9677143,7.80362991 C17.5473088,8.39718377 17.6625708,8.80801259 17.6625708,9.74013504 L17.6625708,17.0701838 C17.6625708,18.6697194 16.8588053,19.4835978 15.2701606,19.4835978 L9.30367012,19.4838726 C9.50801444,19.132339 9.67081559,18.754537 9.78494219,18.3575337 L15.2149282,18.3578162 C16.0814028,18.3578162 16.5329428,17.8954285 16.5329428,17.0499579 L16.5329428,9.75491554 L11.9107944,9.75491554 C10.9798389,9.75491554 10.4963609,9.29343541 10.4963609,8.34048196 L10.4963609,3.64458667 L6.87556994,3.64458667 C6.00213732,3.64458667 5.55375219,4.12267974 5.55375219,4.95246234 L5.55332282,12.0499339 C5.36755588,12.0285691 5.17882362,12.0175857 4.9877281,12.0175857 C4.79846417,12.0175857 4.61149369,12.028399 4.42740668,12.0494356 L4.42797059,4.93219317 C4.42797059,3.3327051 5.23415624,2.51882667 6.81337946,2.51882667 Z M11.552216,3.86783276 L11.552216,8.21151991 C11.552216,8.55164434 11.6926308,8.69205911 12.0359101,8.69205911 L16.3097226,8.69205911 L11.552216,3.86783276 Z" fill-opacity="0.85"></path>
+                                        <path d="M4.9877281,13.0174305 C7.17286548,13.0174305 8.97241326,14.8169783 8.97241326,17.0052706 C8.97241326,19.1904512 7.15190483,20.9970003 4.9877281,20.9970003 C2.80254317,20.9970003 0.999853452,19.1974525 0.999853452,17.0052706 C0.999853452,14.82009 2.80254317,13.0174305 4.9877281,13.0174305 Z M4.99784107,14.437007 C4.88115289,14.437007 4.7753124,14.4852382 4.64150995,14.6120393 L2.60482154,16.530609 C2.48641329,16.6350666 2.4357663,16.7447535 2.42877798,16.8911323 C2.414797,17.1440431 2.62022006,17.325342 2.87314384,17.325342 C3.00310422,17.3323433 3.12991834,17.2638862 3.21236934,17.1782716 L3.90166369,16.4757224 L4.5558954,15.8144894 L4.51466558,16.8528413 L4.51466558,19.0792085 C4.51466558,19.332854 4.73408257,19.5421148 4.99784107,19.5421148 C5.25844467,19.5421148 5.47470676,19.332854 5.47470676,19.0792085 L5.47470676,16.8528413 L5.44363313,15.8144894 L6.08075058,16.4757224 L6.78018815,17.1782716 C6.86960587,17.2638862 6.98560256,17.3183839 7.11555862,17.325342 C7.36531454,17.3393445 7.56061597,17.1440431 7.56061597,16.8911323 C7.56061597,16.7479084 7.50996466,16.6350666 7.39159099,16.530609 L5.34090431,14.6120393 C5.22352465,14.498506 5.12779713,14.437007 4.99784107,14.437007 Z" fill-opacity="0.85"></path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </span>
+                    </button>
+                </label>
+            </div>
+        </span>
+    </div>
+
+    <!-- get more button -->
+    <div id="chatbot-input-more-btn-div">
+        <button class="chatbot-input-more-btn" onclick="chatMoreBtnClick()">
+            <!-- <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path
+                            d="M15.9930223,31.97976 C24.7467023,31.97976 32,24.7418401 32,15.98988 C32,7.23796297 24.7327468,0 15.9790668,0 C7.23313125,0 0,7.23796297 0,15.98988 C0,24.7418401 7.24706085,31.97976 15.9930223,31.97976 Z"
+                            fill-opacity="0.1" class="sm-round-bg"></path>
+                        <path
+                            d="M8.41162523,16.0038327 C8.41162523,15.2803594 8.92769229,14.7720332 9.65130778,14.7720332 L14.7951802,14.7720332 L14.7951802,9.62925761 C14.7951802,8.91198549 15.2756953,8.40371964 15.9728644,8.40371964 C16.6964799,8.40371964 17.2048198,8.90578429 17.2048198,9.62925761 L17.2048198,14.7720332 L22.3626477,14.7720332 C23.0723077,14.7720332 23.5884006,15.2803594 23.5884006,16.0038327 C23.5884006,16.7008648 23.0660191,17.1952382 22.3626477,17.1952382 L17.2048198,17.1952382 L17.2048198,22.3380138 C17.2048198,23.0614872 16.6964799,23.563526 15.9728644,23.563526 C15.2756953,23.563526 14.7951802,23.0413333 14.7951802,22.3380138 L14.7951802,17.1952382 L9.65130778,17.1952382 C8.93398085,17.1952382 8.41162523,16.7008648 8.41162523,16.0038327 Z"
+                            fill-opacity="0.85"></path>
+                    </g>
+                </g>
+            </svg> -->
+            <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path d="M15.9930223,31.97976 C24.7467023,31.97976 32,24.7418401 32,15.98988 C32,7.23796297 24.7327468,0 15.9790668,0 C7.23313125,0 0,7.23796297 0,15.98988 C0,24.7418401 7.24706085,31.97976 15.9930223,31.97976 Z" fill-opacity="0.1" class="sm-round-bg"></path>
+                        <path d="M23.5318035,18.2475474 C22.2777951,18.2475474 21.2612876,17.2374408 21.2612876,15.9773915 C21.2612876,14.7173421 22.2777951,13.7072355 23.5318035,13.7072355 C24.7781451,13.7072355 25.8086942,14.7173421 25.8086942,15.9773915 C25.8086942,17.2374408 24.7781451,18.2475474 23.5318035,18.2475474 Z" fill-opacity="0.75"></path>
+                        <path d="M15.9930223,18.2475474 C14.7327253,18.2475474 13.7224202,17.2374408 13.7224202,15.9773915 C13.7224202,14.7173421 14.7327253,13.7072355 15.9930223,13.7072355 C17.2533193,13.7072355 18.2775798,14.7173421 18.2775798,15.9773915 C18.2775798,17.2374408 17.2533193,18.2475474 15.9930223,18.2475474 Z" fill-opacity="0.75"></path>
+                        <path d="M8.468162,18.2475474 C7.22182045,18.2475474 6.19131446,17.2374408 6.19131446,15.9773915 C6.19131446,14.7173421 7.22182045,13.7072355 8.468162,13.7072355 C9.70824943,13.7072355 10.7387124,14.7173421 10.7387124,15.9773915 C10.7387124,17.2374408 9.72220487,18.2475474 8.468162,18.2475474 Z" fill-opacity="0.75"></path>
+                    </g>
+                </g>
+            </svg>
+        </button>
+    </div>
+</div>

assets/html/close_btn.html

@@ -0,0 +1,5 @@
+<button onclick='closeBtnClick("{obj}")'>
+    <svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
+        stroke-linejoin="round" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+</button>

assets/html/footer.html

@@ -0,0 +1 @@
+<div class="versions">{versions}</div>

assets/html/func_nav.html

@@ -0,0 +1,78 @@
+<div id="menu-footer-btn-bar" class="is-gpt">
+    <div class="btn-bar-group">
+        <button id="chuanhu-setting-btn" onclick="openSettingBox()" class="chuanhu-ui-btn">
+            <!-- <svg width="24px" height="24px" viewBox="0 0 39.6797 39.6328" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g id="gearshape" fill-rule="nonzero">
+                        <path d="M17.9766,39.6094 L21.6797,39.6094 C23.1797,39.6094 24.3516,38.6953 24.7031,37.2891 L25.4766,33.9141 L25.8984,33.7734 L28.8047,35.5781 C30.0703,36.3516 31.5469,36.1641 32.6016,35.0859 L35.1797,32.5312 C36.2344,31.4766 36.4453,29.9766 35.6484,28.7578 L33.8203,25.8281 L33.9609,25.4766 L37.3359,24.7031 C38.7422,24.3516 39.6797,23.1562 39.6797,21.6797 L39.6797,18.0703 C39.6797,16.5938 38.7656,15.3984 37.3359,15.0469 L34.0078,14.2266 L33.8438,13.8516 L35.6719,10.9219 C36.4688,9.67969 36.2578,8.22656 35.2031,7.125 L32.625,4.57031 C31.5938,3.51562 30.1172,3.32812 28.8516,4.07812 L25.9219,5.85938 L25.4766,5.69531 L24.7031,2.32031 C24.3516,0.914062 23.1797,0 21.6797,0 L17.9766,0 C16.4766,0 15.3281,0.914062 14.9766,2.32031 L14.2031,5.69531 L13.7344,5.85938 L10.8047,4.07812 C9.5625,3.32812 8.08594,3.51562 7.03125,4.57031 L4.47656,7.125 C3.42188,8.22656 3.21094,9.67969 4.00781,10.9219 L5.8125,13.8516 L5.64844,14.2266 L2.32031,15.0469 C0.914062,15.3984 0,16.5938 0,18.0703 L0,21.6797 C0,23.1562 0.9375,24.3516 2.32031,24.7031 L5.69531,25.4766 L5.83594,25.8281 L4.03125,28.7578 C3.23438,29.9766 3.44531,31.4766 4.5,32.5312 L7.05469,35.0859 C8.10938,36.1641 9.60938,36.3516 10.8516,35.5781 L13.7812,33.7734 L14.2031,33.9141 L14.9766,37.2891 C15.3281,38.6953 16.4766,39.6094 17.9766,39.6094 Z M18.3047,36.3516 C18.0703,36.3516 17.9531,36.25781 17.9297,36.0469 L16.7812,31.4531 C15.5859,31.1484 14.5078,30.7031 13.6875,30.1406 L9.63281,32.6484 C9.46875,32.7422 9.30469,32.7188 9.14062,32.5781 L7.03125,30.4453 C6.86719,30.3047 6.86719,30.1406 6.98438,29.9531 L9.44531,25.9219 C9,25.125 8.48438,24.0469 8.17969,22.8516 L3.5625,21.7266 C3.35156,21.7031 3.25781,21.5859 3.25781,21.3516 L3.25781,18.3516 C3.25781,18.0938 3.32812,18.0234 3.5625,17.9531 L8.15625,16.8516 C8.46094,15.5625 9.07031,14.4375 9.39844,13.7344 L6.96094,9.72656 C6.82031,9.51562 6.82031,9.35156 6.98438,9.1875 L9.11719,7.10156 C9.28125,6.96094 9.39844,6.91406 9.63281,7.03125 L13.6406,9.46875 C14.4609,8.97656 15.6328,8.48438 16.8047,8.15625 L17.9297,3.5625 C17.9531,3.35156 18.0703,3.25781 18.3047,3.25781 L21.375,3.25781 C21.6094,3.25781 21.7266,3.35156 21.75,3.5625 L22.875,8.20312 C24.0938,8.50781 25.1484,9 25.9922,9.49219 L30.0469,7.03125 C30.25781,6.91406 30.375,6.96094 30.5625,7.10156 L32.6953,9.1875 C32.8359,9.35156 32.8594,9.51562 32.7188,9.72656 L30.25781,13.7344 C30.6094,14.4375 31.1953,15.5625 31.5,16.8516 L36.1172,17.9531 C36.3516,18.0234 36.3984,18.0938 36.3984,18.3516 L36.3984,21.3516 C36.3984,21.5859 36.3281,21.7031 36.1172,21.7266 L31.4766,22.8516 C31.1953,24.0469 30.6797,25.125 30.2109,25.9219 L32.6953,29.9531 C32.8125,30.1406 32.8125,30.3047 32.6484,30.4453 L30.5391,32.5781 C30.3516,32.7188 30.1875,32.7422 30.0469,32.6484 L25.9688,30.1406 C25.1719,30.7031 24.0703,31.1484 22.875,31.4531 L21.75,36.0469 C21.7266,36.25781 21.6094,36.3516 21.375,36.3516 L18.3047,36.3516 Z M19.8281,26.8125 C23.6719,26.8125 26.8359,23.6719 26.8359,19.8047 C26.8359,15.9844 23.6719,12.8438 19.8281,12.8438 C15.9844,12.8438 12.8203,15.9844 12.8203,19.8047 C12.8203,23.6484 15.9844,26.8125 19.8281,26.8125 Z M19.8281,23.5781 C17.7656,23.5781 16.1016,21.8906 16.1016,19.8047 C16.1016,17.7656 17.7656,16.0781 19.8281,16.0781 C21.8438,16.0781 23.5312,17.7656 23.5312,19.8047 C23.5312,21.8672 21.8438,23.5781 19.8281,23.5781 Z" id="形状" fill-opacity="0.85" fill="currentColor"></path>
+                    </g>
+                </g>
+            </svg> -->
+            <svg width="24px" height="24px" viewBox="0 0 41.5547 40.9700126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.85">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path d="M20.7891,38.3561 C21.2344,38.3561 21.6328,38.3092 22.125,38.2858 L23.2031,40.3483 C23.4375,40.7936 23.8828,41.028 24.375,40.9577 C24.8438,40.8639 25.2188,40.4655 25.2891,39.9733 L25.6172,37.6764 C26.4609,37.442 27.3047,37.1139 28.1484,36.7858 L29.8359,38.3092 C30.2109,38.6608 30.7031,38.7311 31.1719,38.4733 C31.5938,38.2155 31.7812,37.7467 31.6875,37.2545 L31.1953,34.9811 C31.8984,34.4655 32.625,33.903 33.2578,33.2702 L35.3906,34.1608 C35.8594,34.3717 36.3516,34.2311 36.7031,33.8092 C37.0078,33.4577 37.0312,32.942 36.7734,32.5202 L35.5547,30.5514 C36.0703,29.8249 36.4688,29.0514 36.8672,28.2077 L39.1875,28.3249 C39.6797,28.3483 40.125,28.0436 40.2891,27.5983 C40.4531,27.1295 40.2891,26.6139 39.9141,26.3327 L38.0859,24.8795 C38.3203,24.0358 38.5078,23.1686 38.5781,22.2311 L40.7578,21.528 C41.25,21.3639 41.5547,20.9889 41.5547,20.4733 C41.5547,19.9577 41.25,19.5827 40.7578,19.4186 L38.5781,18.7155 C38.5078,17.778 38.3203,16.9342 38.0859,16.067 L39.9141,14.6139 C40.2891,14.3327 40.4531,13.8405 40.2891,13.3717 C40.125,12.9264 39.6797,12.6217 39.1875,12.6452 L36.8672,12.7389 C36.4688,11.8952 36.0703,11.1452 35.5547,10.3952 L36.7734,8.42641998 C37.0312,8.02797998 37.0078,7.51235998 36.7031,7.16078998 C36.3516,6.73891998 35.8594,6.62172998 35.3906,6.80922998 L33.2578,7.67641998 C32.625,7.06703998 31.8984,6.48110998 31.1953,5.96547998 L31.6875,3.71547998 C31.7812,3.19985998 31.5938,2.73110998 31.1719,2.49672998 C30.7031,2.23891998 30.2109,2.28578998 29.8359,2.66078998 L28.1484,4.16078998 C27.3047,3.80922998 26.4609,3.52797998 25.6172,3.27016998 L25.2891,0.996730977 C25.2188,0.504542977 24.8438,0.106105977 24.375,0.0123557768 C23.8828,-0.0579567232 23.4141,0.176417977 23.2031,0.598292977 L22.125,2.66078998 C21.6328,2.63735998 21.2344,2.61391998 20.7891,2.61391998 C20.2969,2.61391998 19.8984,2.63735998 19.4297,2.66078998 L18.3281,0.598292977 C18.1172,0.176417977 17.6719,-0.0579567232 17.1562,0.0123557768 C16.6875,0.106105977 16.3359,0.504542977 16.2656,0.996730977 L15.9375,3.27016998 C15.0703,3.52797998 14.2266,3.80922998 13.4062,4.16078998 L11.6953,2.66078998 C11.3203,2.28578998 10.8281,2.23891998 10.3594,2.49672998 C9.96094,2.73110998 9.75,3.19985998 9.86719,3.71547998 L10.3359,5.96547998 C9.63281,6.48110998 8.90625,7.06703998 8.27344,7.67641998 L6.16406,6.80922998 C5.67188,6.62172998 5.20312,6.73891998 4.85156,7.16078998 C4.54688,7.51235998 4.5,8.02797998 4.75781,8.42641998 L5.97656,10.3952 C5.48438,11.1452 5.0625,11.8952 4.66406,12.7389 L2.34375,12.6452 C1.85156,12.6217 1.40625,12.9264 1.24219,13.3717 C1.10156,13.8405 1.24219,14.3092 1.64062,14.6139 L3.44531,16.067 C3.23438,16.9342 3.04688,17.778 2.97656,18.7155 L0.773438,19.4186 C0.304688,19.5827 0,19.9577 0,20.4733 C0,20.9889 0.304688,21.3639 0.773438,21.528 L2.97656,22.2311 C3.04688,23.1686 3.23438,24.0358 3.44531,24.8795 L1.64062,26.3327 C1.24219,26.6139 1.10156,27.1295 1.24219,27.5983 C1.40625,28.0436 1.85156,28.3483 2.34375,28.3249 L4.66406,28.2077 C5.0625,29.0514 5.48438,29.8249 5.97656,30.5514 L4.75781,32.5202 C4.5,32.942 4.54688,33.4577 4.85156,33.8092 C5.20312,34.2311 5.67188,34.3717 6.16406,34.1608 L8.27344,33.2702 C8.90625,33.903 9.63281,34.4655 10.3359,34.9811 L9.86719,37.2545 C9.77344,37.7467 9.96094,38.2155 10.3594,38.4733 C10.8281,38.7311 11.3203,38.6608 11.6953,38.3092 L13.4062,36.7858 C14.2266,37.1139 15.0703,37.442 15.9375,37.6764 L16.2656,39.9733 C16.3359,40.4655 16.6875,40.8639 17.1562,40.9577 C17.6719,41.028 18.0938,40.7936 18.3281,40.3483 L19.4297,38.2858 C19.8984,38.3092 20.2969,38.3561 20.7891,38.3561 Z M20.7891,35.1686 C12.5859,35.1686 6.25781,28.6295 6.25781,20.4967 C6.25781,12.3405 12.5859,5.80141998 20.7891,5.80141998 C28.9688,5.80141998 35.2969,12.3405 35.2969,20.4967 C35.2969,28.6295 28.9688,35.1686 20.7891,35.1686 Z M17.3672,17.4733 L19.6641,15.9967 L13.5938,5.66078998 L11.2266,7.02016998 L17.3672,17.4733 Z M25.1484,21.8327 L37.2188,21.8327 L37.1953,19.1608 L25.1484,19.1608 L25.1484,21.8327 Z M19.6406,25.0202 L17.3438,23.5202 L10.9922,33.8795 L13.3359,35.2858 L19.6406,25.0202 Z M20.7188,25.5124 C23.4844,25.5124 25.6875,23.2858 25.6875,20.5202 C25.6875,17.7545 23.4844,15.528 20.7188,15.528 C17.9531,15.528 15.7266,17.7545 15.7266,20.5202 C15.7266,23.2858 17.9531,25.5124 20.7188,25.5124 Z M20.7188,22.5592 C19.5703,22.5592 18.6562,21.6686 18.6562,20.5202 C18.6562,19.3717 19.5703,18.4811 20.7188,18.4811 C21.8672,18.4811 22.7578,19.3717 22.7578,20.5202 C22.7578,21.6686 21.8672,22.5592 20.7188,22.5592 Z"></path>
+                    </g>
+                </g>
+            </svg>
+        </button>
+        <button id="chuanhu-manual-check-btn" onclick="manualCheckUpdate()"  class="chuanhu-ui-btn">
+            <span class="show-on-latest">
+                <svg width="24px" height="24px" viewBox="0 0 45.2923004 37.8516" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g fill-rule="nonzero">
+                            <path d="M0.415684357,19.0078 C-0.381190643,20.1094 -0.0296279434,21.1172 1.44693036,21.1172 L3.86100036,21.1172 C4.96256036,30.4453 13.0719004,37.8281 22.6344004,37.8281 C28.2360004,37.8281 33.2985004,35.3203 36.7672004,31.3828 C37.5641004,30.4922 37.4469004,29.3438 36.6266004,28.7578 C35.8063004,28.1719 34.8219004,28.3828 34.1188004,29.1562 C31.3297004,32.2969 27.2282004,34.2656 22.6344004,34.2656 C14.8532004,34.2656 8.52506036,28.5703 7.47037036,21.1172 L9.97818036,21.1172 C11.4313004,21.1172 11.8063004,20.1094 11.0329004,19.0312 L6.86100036,13.0781 C6.22818036,12.1641 5.24381036,12.1406 4.58756036,13.0781 L0.415684357,19.0078 Z M8.52506036,6.42188 C7.72818036,7.3125 7.84537036,8.4375 8.66568036,9.02344 C9.50943036,9.60938 10.4938004,9.44531 11.1969004,8.64844 C14.0094004,5.53125 18.0876004,3.5625 22.6344004,3.5625 C30.4157004,3.5625 36.7672004,9.25781 37.7985004,16.7109 L35.2907004,16.7109 C33.8376004,16.7109 33.4860004,17.7188 34.2594004,18.8203 L38.4313004,24.75 C39.0641004,25.6641 40.0485004,25.6875 40.7047004,24.75 L44.8766004,18.8438 C45.6735004,17.7188 45.3219004,16.7109 43.8454004,16.7109 L41.4313004,16.7109 C40.3297004,7.38281 32.2204004,0 22.6344004,0 C17.0797004,0 12.0172004,2.48438 8.52506036,6.42188 Z" fill-opacity="0.85" fill="currentColor"></path>
+                        </g>
+                    </g>
+                </svg>
+            </span>
+            <span class="show-on-outdated">
+                <svg width="24px" height="24px" viewBox="0 0 45.2924004 37.8516" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g fill="currentColor" fill-rule="nonzero">
+                            <path d="M0.415682396,19.0078 C-0.381189604,20.1094 -0.0296276044,21.1172 1.4469304,21.1172 L3.8610104,21.1172 C4.9625604,30.4453 13.0719004,37.8281 22.6344004,37.8281 C28.2360004,37.8281 33.2985004,35.3203 36.7673004,31.3828 C37.5641004,30.4922 37.4469004,29.3437 36.6266004,28.7578 C35.8063004,28.1719 34.8219004,28.3828 34.1188004,29.1563 C31.3297004,32.2969 27.2282004,34.2656 22.6344004,34.2656 C14.8532004,34.2656 8.5250704,28.5703 7.4703704,21.1172 L9.9781804,21.1172 C11.4313004,21.1172 11.8063004,20.1094 11.0329004,19.0312 L6.8610104,13.0781 C6.2281804,12.1641 5.2437904,12.1406 4.5875404,13.0781 L0.415682396,19.0078 Z M8.5250704,6.42187 C7.7281804,7.31251 7.8453904,8.43749 8.6656604,9.02342 C9.5094604,9.60936 10.4938004,9.4453 11.1969004,8.64845 C14.0095004,5.53123 18.0875004,3.56251 22.6344004,3.56251 C30.4157004,3.56251 36.7673004,9.25781 37.7985004,16.7109 L35.2907004,16.7109 C33.8376004,16.7109 33.4860004,17.7188 34.2595004,18.8203 L38.4313004,24.75 C39.0641004,25.6641 40.0485004,25.6875 40.7048004,24.75 L44.8767004,18.8437 C45.6735004,17.7188 45.3222004,16.7109 43.8454004,16.7109 L41.4313004,16.7109 C40.3297004,7.38283 32.2204004,0 22.6344004,0 C17.0797004,0 12.0173004,2.48438 8.5250704,6.42187 Z" fill-opacity="0.85"></path>
+                            <path d="M22.6344004,22.2422 C23.6422004,22.2422 24.2048004,21.6797 24.2282004,20.625 L24.5095004,11.0156 C24.5329004,9.96096 23.7126004,9.18749 22.6110004,9.18749 C21.5095004,9.18749 20.7126004,9.93749 20.7360004,10.9922 L21.0173004,20.625 C21.0407004,21.6797 21.6032004,22.2422 22.6344004,22.2422 Z M22.6344004,28.3828 C23.7829004,28.3828 24.7907004,27.4688 24.7907004,26.3203 C24.7907004,25.1484 23.8063004,24.2578 22.6344004,24.2578 C21.4626004,24.2578 20.5016004,25.1719 20.5016004,26.3203 C20.5016004,27.4453 21.4860004,28.3828 22.6344004,28.3828 Z" fill-opacity="0.85"></path>
+                        </g>
+                    </g>
+                </svg>
+            </span>
+        </button>
+<!--
+    <button id="chuanhu-training-btn" onclick="openTrainingBox()" class="chuanhu-ui-btn">
+        <svg width="24px" height="24px" viewBox="0 0 37.3359 44.6953" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="brain.filled.head.profile" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="37.3359" height="44.6953"></rect>
+                    <path d="M21.5156,44.5312 C28.5,44.5312 32.7656,42.0469 32.7656,37.7109 L32.7656,28.7812 C35.6484,26.2031 37.3359,22.1016 37.3359,17.625 C37.3359,7.05469 30.4453,0 20.2031,0 C9.98438,0 3.14062,6.91406 3.14062,17.2266 C3.14062,17.7891 3.16406,18.2578 3.21094,18.7031 L0.960938,22.7109 C0.328125,23.8594 0,25.0078 0,26.0391 C0,27.9844 1.17188,29.5781 3.14062,30.1641 L3.14062,33.6562 C3.14062,37.1719 5.67188,38.8828 8.8125,38.5312 L12.8438,38.1328 L10.4531,35.5781 L10.4531,37.7109 C10.4531,42.0234 14.625,44.5312 21.5156,44.5312 Z M21.5156,41.1562 C16.5703,41.1562 13.6406,39.6328 13.6406,37.125 L13.6406,34.9453 C13.6406,34.7109 13.5234,34.5938 13.3125,34.6172 L8.34375,35.1797 C7.17188,35.2969 6.51562,34.8281 6.51562,33.4453 L6.51562,27.6562 C6.51562,27.4922 6.39844,27.375 6.16406,27.375 L5.13281,27.375 C4.03125,27.375 3.39844,26.8359 3.39844,25.9922 C3.39844,25.5234 3.5625,24.9844 3.89062,24.3984 L6.70312,19.3828 C6.58594,18.6562 6.51562,17.9062 6.51562,17.1797 C6.51562,8.90625 11.9766,3.39844 20.2031,3.39844 C28.4297,3.39844 33.9609,9.07031 33.9609,17.625 C33.9609,21.7266 32.2266,25.3359 29.3672,27.1172 L29.3672,37.125 C29.3672,39.6328 26.4375,41.1562 21.5156,41.1562 Z" id="形状" fill-opacity="0.85" fill="currentColor"></path>
+                    <path d="M14.1797,19.7812 C16.2656,19.7812 17.7188,18.375 17.7188,16.4062 C17.7188,15.7031 17.5312,15.1875 17.2031,14.8359 C16.8516,14.5078 16.7109,14.1562 16.7109,13.9219 C16.7109,13.4062 17.1562,13.0312 17.6719,13.0312 C17.8828,13.0312 18.1641,13.0781 18.375,13.2891 C18.4219,13.3359 18.4688,13.4062 18.4922,13.4531 C19.9219,13.2891 20.6484,12.4688 20.6484,11.1328 C20.6484,10.6172 21.0703,10.1719 21.5859,10.1719 C22.1016,10.1719 22.5469,10.6406 22.5469,11.1328 C22.5703,13.2656 21.4922,14.6016 19.4297,15.0703 C19.5703,15.4922 19.6172,15.9609 19.6172,16.4297 C19.6172,18.2109 18.75,19.6641 17.3203,20.4844 C18.1172,20.8594 19.0312,21.0469 20.0156,21.0469 C20.4844,21.0469 20.9766,21 21.4688,20.9062 C21.375,20.6719 21.3516,20.4141 21.3516,20.2031 C21.3516,15.4453 28.1719,14.6484 28.1719,10.4531 C28.1719,8.34375 26.5781,6.72656 24.5859,6.72656 C23.8125,6.72656 23.6719,6.75 23.5078,6.77344 C22.7344,5.95312 21.6328,5.48438 20.6953,5.48438 C18.9844,5.48438 17.8125,6.5625 17.8125,8.15625 C17.8125,8.71875 17.4141,9.09375 16.8516,9.09375 C16.2891,9.09375 15.8906,8.67188 15.9141,8.10938 C15.9141,7.35938 16.1484,6.89062 16.2891,6.44531 C16.0078,6.39844 15.7266,6.375 15.4688,6.375 C13.2656,6.375 11.5547,7.73438 11.5547,9.39844 C11.5547,10.4766 12.2812,11.3438 13.2422,11.3438 C13.7812,11.3438 14.2031,11.7656 14.2031,12.2578 C14.2031,12.7969 13.7578,13.2422 13.2422,13.2422 C11.7656,13.2422 10.6172,12.5625 10.0547,11.4844 C9.51562,12.3516 9.21094,13.3594 9.21094,14.3906 C9.21094,17.4141 11.1562,19.7812 14.1797,19.7812 Z M27.7969,24.5156 C29.7656,24.5156 31.1953,22.3125 31.1953,19.3359 C31.1953,19.125 31.1953,18.8906 31.1953,18.6328 C30.4688,18.9609 29.6016,19.1016 28.6172,19.0312 C28.1016,18.9609 27.7031,18.5625 27.7031,18.0469 C27.7031,17.5312 28.1484,17.0625 28.6641,17.1094 C30.5859,17.2734 31.8516,16.2188 31.8516,14.5078 C31.8516,12.9375 31.125,11.625 29.8828,10.8047 C29.3203,15.9141 23.0156,16.5938 23.0156,20.1328 C23.0156,21.0938 23.6484,21.7734 24.75,21.7734 L25.0078,21.7734 C25.3125,23.3906 26.4375,24.5156 27.7969,24.5156 Z" id="形状" fill-opacity="0.85" fill="currentColor"></path>
+                </g>
+            </g>
+        </svg>
+    </button>
+-->
+    </div>
+    <div class="btn-bar-group">
+        <button id="chuanhu-appearance-switcher" onclick="btnToggleDarkMode()" class="chuanhu-ui-btn">
+            <span class="show-on-dark">
+                <svg width="24px" height="24px" viewBox="0 0 39.9141 40.0547" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g fill-rule="nonzero">
+                            <path d="M19.9688,7.42969 C20.9531,7.42969 21.7734,6.58594 21.7734,5.60156 L21.7734,1.80469 C21.7734,0.820312 20.9531,0 19.9688,0 C18.9609,0 18.1406,0.820312 18.1406,1.80469 L18.1406,5.60156 C18.1406,6.58594 18.9609,7.42969 19.9688,7.42969 Z M28.8281,11.1328 C29.5312,11.8359 30.7031,11.8594 31.4297,11.1328 L34.125,8.46094 C34.8047,7.75781 34.8047,6.5625 34.125,5.85938 C33.4219,5.15625 32.25,5.15625 31.5469,5.85938 L28.8281,8.57812 C28.1484,9.28125 28.1484,10.4297 28.8281,11.1328 Z M32.5078,20.0156 C32.5078,21 33.3516,21.8438 34.3359,21.8438 L38.0859,21.8438 C39.0938,21.8438 39.9141,21 39.9141,20.0156 C39.9141,19.0312 39.0938,18.1875 38.0859,18.1875 L34.3359,18.1875 C33.3516,18.1875 32.5078,19.0312 32.5078,20.0156 Z M28.8281,28.9219 C28.1484,29.625 28.1484,30.7734 28.8281,31.4766 L31.5469,34.1953 C32.25,34.8984 33.4219,34.875 34.125,34.1719 C34.8047,33.4688 34.8047,32.2969 34.125,31.5938 L31.4062,28.9219 C30.7031,28.2188 29.5312,28.2188 28.8281,28.9219 Z M19.9688,32.6016 C18.9609,32.6016 18.1406,33.4453 18.1406,34.4297 L18.1406,38.2266 C18.1406,39.2109 18.9609,40.0312 19.9688,40.0312 C20.9531,40.0312 21.7734,39.2109 21.7734,38.2266 L21.7734,34.4297 C21.7734,33.4453 20.9531,32.6016 19.9688,32.6016 Z M11.0859,28.9219 C10.3828,28.2188 9.1875,28.2188 8.48438,28.9219 L5.8125,31.5703 C5.10938,32.2734 5.10938,33.4453 5.78906,34.1484 C6.49219,34.8516 7.66406,34.875 8.36719,34.1719 L11.0625,31.4766 C11.7656,30.7734 11.7656,29.625 11.0859,28.9219 Z M7.40625,20.0156 C7.40625,19.0312 6.58594,18.1875 5.57812,18.1875 L1.82812,18.1875 C0.820312,18.1875 0,19.0312 0,20.0156 C0,21 0.820312,21.8438 1.82812,21.8438 L5.57812,21.8438 C6.58594,21.8438 7.40625,21 7.40625,20.0156 Z M11.0625,11.1328 C11.7656,10.4531 11.7656,9.25781 11.0859,8.57812 L8.39062,5.85938 C7.71094,5.17969 6.51562,5.15625 5.83594,5.85938 C5.13281,6.5625 5.13281,7.75781 5.8125,8.4375 L8.48438,11.1328 C9.1875,11.8359 10.3594,11.8359 11.0625,11.1328 Z" id="形状" fill-opacity="0.85" fill="currentColor"></path>
+                            <path d="M19.9688,29.5781 C25.1719,29.5781 29.5078,25.2656 29.5078,20.0156 C29.5078,14.7656 25.1719,10.4531 19.9688,10.4531 C14.7422,10.4531 10.4062,14.7656 10.4062,20.0156 C10.4062,25.2656 14.7422,29.5781 19.9688,29.5781 Z M19.9688,26.3906 C16.4766,26.3906 13.5938,23.4844 13.5938,20.0156 C13.5938,16.5469 16.4766,13.6406 19.9688,13.6406 C23.4375,13.6406 26.3203,16.5469 26.3203,20.0156 C26.3203,23.4844 23.4375,26.3906 19.9688,26.3906 Z" id="形状" fill-opacity="0.85" fill="currentColor"></path>
+                        </g>
+                    </g>
+                </svg>
+            </span>
+            <span class="show-on-light">
+                <svg width="24px" height="24px" viewBox="0 0 37.2422 42.2109" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g fill="currentColor" fill-rule="nonzero">
+                            <path d="M30,21.6797 C30.375,21.6797 30.6562,21.3984 30.7031,21 C31.2422,16.1016 31.5469,15.9141 36.5156,15.1406 C36.9844,15.0703 37.2422,14.8594 37.2422,14.4375 C37.2422,14.0625 36.9844,13.8047 36.6094,13.7578 C31.5938,12.7969 31.2422,12.7969 30.7031,7.89844 C30.6562,7.47656 30.375,7.21875 30,7.21875 C29.6016,7.21875 29.3438,7.47656 29.2969,7.875 C28.6875,12.8672 28.4531,13.1016 23.3672,13.7578 C23.0156,13.7812 22.7344,14.0625 22.7344,14.4375 C22.7344,14.8359 23.0156,15.0703 23.3672,15.1406 C28.4531,16.1016 28.6641,16.1484 29.2969,21.0469 C29.3438,21.3984 29.6016,21.6797 30,21.6797 Z M21.2109,9 C21.4453,9 21.5859,8.85938 21.6328,8.625 C22.2422,5.60156 22.1719,5.55469 25.3359,4.92188 C25.5469,4.875 25.7109,4.75781 25.7109,4.5 C25.7109,4.24219 25.5469,4.125 25.3359,4.07812 C22.1719,3.44531 22.2422,3.39844 21.6328,0.375 C21.5859,0.140625 21.4453,0 21.2109,0 C20.9531,0 20.8125,0.140625 20.7656,0.375 C20.1562,3.39844 20.2266,3.44531 17.0859,4.07812 C16.8516,4.125 16.6875,4.24219 16.6875,4.5 C16.6875,4.75781 16.8516,4.875 17.0859,4.92188 C20.2266,5.55469 20.1797,5.60156 20.7656,8.625 C20.8125,8.85938 20.9531,9 21.2109,9 Z" fill-opacity="0.85"></path>
+                            <path d="M16.3125,38.625 C23.1094,38.625 28.5938,35.1562 31.0781,29.2734 C31.4297,28.4062 31.3125,27.75 30.9141,27.3516 C30.5625,27 29.9531,26.9297 29.2734,27.2109 C27.8906,27.75 26.2031,28.0547 24.1406,28.0547 C16.0078,28.0547 10.7578,22.9453 10.7578,15.0938 C10.7578,12.7734 11.2031,10.5 11.7188,9.49219 C12.0938,8.69531 12.0703,8.01562 11.7422,7.61719 C11.3672,7.17188 10.7109,7.00781 9.77344,7.35938 C3.98438,9.58594 0,15.6562 0,22.5938 C0,31.6875 6.79688,38.625 16.3125,38.625 Z M16.3594,35.4141 C8.69531,35.4141 3.21094,29.8359 3.21094,22.3359 C3.21094,17.9766 5.08594,14.0391 8.29688,11.4375 C7.89844,12.6094 7.6875,14.3438 7.6875,16.0078 C7.6875,24.9844 14.0156,31.1484 23.2969,31.1484 C24.8203,31.1484 26.2266,30.9844 26.9062,30.7734 C24.6094,33.6562 20.6953,35.4141 16.3594,35.4141 Z"  fill-opacity="0.85"></path>
+                        </g>
+                    </g>
+                </svg>
+            </span>
+        </button>
+    </div>
+</div>

assets/html/header_title.html

@@ -0,0 +1,11 @@
+<div style="display:inline-flex;">
+    <button id="chuanhu-menu-btn" onclick='menuClick()' class="chuanhu-ui-btn hover-round-btn"
+        style="visibility: visible; width:42px; height:42px; margin-right:5px;">
+        <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+        </svg>
+    </button>
+</div>
+<div style="margin-left: 6px;">
+    <div>{app_title}</div>
+</div>

assets/html/update.html

@@ -0,0 +1,29 @@
+<div id="toast-update">
+    <div id="check-chuanhu-update">
+        <p style="display:none">
+            <span id="current-version">{current_version}</span>
+            <span id="version-time">{version_time}</span>
+        </p>
+        <p id="version-info-title">
+            Latest Version: <a href="https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest" target="_blank"
+                id="latest-version-title" style="text-decoration: none;">getting latest version...</a>
+        </p>
+        <p id="updating-info" class="hideK">
+            Getting update...
+        </p>
+        <div id="updating-spinner"></div>
+        <div id="release-note-wrap">
+            <div class="release-note-content" id="release-note-content">
+                Getting Release Note...
+            </div>
+        </div>
+        <div id="goto-update-btn" class="btn-update-group">
+            <button class="btn-update lg secondary svelte-cmf5ev" id="cancel-button" onclick="cancelUpdate()">{cancel_btn}</button>
+            <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="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/html/web_config.html

@@ -0,0 +1,23 @@
+<div aria-label="config-div" style="display:none;">
+    <!-- app config -->
+    <div id="app_config">
+        <span id="enableCheckUpdate_config">{enableCheckUpdate_config}</span>
+        <span id="hideHistoryWhenNotLoggedIn_config">{hideHistoryWhenNotLoggedIn_config}</span>
+    </div>
+    <!-- i18n config -->
+    <div id="config_i18n">
+        <span id="forView_i18n">{forView_i18n}</span>
+        <span id="deleteConfirm_i18n_pref">{deleteConfirm_i18n_pref}</span>
+        <span id="deleteConfirm_i18n_suff">{deleteConfirm_i18n_suff}</span>
+        <span id="usingLatest_i18n">{usingLatest_i18n}</span>
+        <span id="updatingMsg_i18n">{updatingMsg_i18n}</span>
+        <span id="updateSuccess_i18n">{updateSuccess_i18n}</span>
+        <span id="updateFailure_i18n">{updateFailure_i18n}</span>
+        <span id="regenerate_i18n">{regenerate_i18n}</span>
+        <span id="deleteRound_i18n">{deleteRound_i18n}</span>
+        <span id="renameChat_i18n">{renameChat_i18n}</span>
+        <span id="validFileName_i18n">{validFileName_i18n}</span>
+        <span id="clearFileHistoryMsg_i18n">{clearFileHistoryMsg_i18n}</span>
+        <span id="dropUploadMsg_i18n">{dropUploadMsg_i18n}</span>
+    </div>
+</div>

assets/javascript/ChuanhuChat.js

@@ -0,0 +1,463 @@
+
+// ChuanhuChat core javascript
+
+const MAX_HISTORY_LENGTH = 32;
+
+var key_down_history = [];
+var currentIndex = -1;
+
+var gradioContainer = null;
+var user_input_ta = null;
+var user_input_tb = null;
+var userInfoDiv = null;
+var appTitleDiv = null;
+var chatbotArea = null;
+var chatbot = null;
+var chatbotIndicator = null;
+var uploaderIndicator = null;
+var chatListIndicator = null;
+var chatbotWrap = null;
+var apSwitch = null;
+var messageBotDivs = null;
+var loginUserForm = null;
+var logginUser = null;
+var updateToast = null;
+var sendBtn = null;
+var cancelBtn = null;
+var sliders = null;
+var updateChuanhuBtn = null;
+var statusDisplay = null;
+
+var historySelector = null;
+var chuanhuPopup = null;
+var settingBox = null;
+var trainingBox = null;
+var popupWrapper = null;
+var chuanhuHeader = null;
+var menu = null;
+var toolbox = null;
+// var trainBody = null;
+
+var isInIframe = (window.self !== window.top);
+var currentTime = new Date().getTime();
+
+let windowWidth = window.innerWidth; // 初始窗口宽度
+
+function addInit() {
+    var needInit = {chatbotIndicator, uploaderIndicator};
+
+    chatbotIndicator = gradioApp().querySelector('#chuanhu-chatbot > div.wrap');
+    uploaderIndicator = gradioApp().querySelector('#upload-index-file > div[data-testid="block-label"]');
+    chatListIndicator = gradioApp().querySelector('#history-select-dropdown > div.wrap');
+
+    for (let elem in needInit) {
+        if (needInit[elem] == null) {
+            // addInited = false;
+            return false;
+        }
+    }
+
+    chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
+    chatListObserver.observe(chatListIndicator, { attributes: true });
+    setUploader();
+    setPasteUploader();
+    setDragUploader();
+    return true;
+}
+
+function initialize() {
+    gradioObserver.observe(gradioApp(), { childList: true, subtree: true });
+
+    loginUserForm = gradioApp().querySelector(".gradio-container > .main > .wrap > .panel > .form")
+    gradioContainer = gradioApp().querySelector(".gradio-container");
+    user_input_tb = gradioApp().getElementById('user-input-tb');
+    userInfoDiv = gradioApp().getElementById("user-info");
+    appTitleDiv = gradioApp().getElementById("app-title");
+    chatbotArea = gradioApp().querySelector('#chatbot-area');
+    chatbot = gradioApp().querySelector('#chuanhu-chatbot');
+    chatbotWrap = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap');
+    apSwitch = gradioApp().querySelector('.apSwitch input[type="checkbox"]');
+    updateToast = gradioApp().querySelector("#toast-update");
+    sendBtn = gradioApp().getElementById("submit-btn");
+    cancelBtn = gradioApp().getElementById("cancel-btn");
+    sliders = gradioApp().querySelectorAll('input[type="range"]');
+    updateChuanhuBtn = gradioApp().getElementById("update-chuanhu-btn");
+    statusDisplay = gradioApp().querySelector('#status-display');
+
+    historySelector = gradioApp().querySelector('#history-select-dropdown');
+    chuanhuPopup = gradioApp().querySelector('#chuanhu-popup');
+    settingBox = gradioApp().querySelector('#chuanhu-setting');
+    // trainingBox = gradioApp().querySelector('#chuanhu-training');
+    popupWrapper = gradioApp().querySelector('#popup-wrapper');
+    chuanhuHeader = gradioApp().querySelector('#chuanhu-header');
+    menu = gradioApp().querySelector('#menu-area');
+    toolbox = gradioApp().querySelector('#toolbox-area');
+    // trainBody = gradioApp().querySelector('#train-body');
+
+    // if (loginUserForm) {
+    // localStorage.setItem("userLogged", true);
+    // userLogged = true;
+    // }
+
+    adjustDarkMode();
+    adjustSide();
+    setChatList();
+    setChatListHeader();
+    setLoclize();
+    selectHistory();
+    // setChatbotHeight();
+    setPopupBoxPosition();
+    setSlider();
+    setCheckboxes();
+    setAutocomplete();
+    checkModel();
+
+    settingBox.classList.add('hideBox');
+    // trainingBox.classList.add('hideBox');
+
+    if (!historyLoaded) loadHistoryHtml();
+    if (!usernameGotten) getUserInfo();
+
+    setUpdater();
+
+    setChatbotScroll();
+    setTimeout(showOrHideUserInfo(), 2000);
+
+    // setHistroyPanel();
+    // trainBody.classList.add('hide-body');
+
+
+
+    return true;
+}
+
+function gradioApp() {
+    const elems = document.getElementsByTagName('gradio-app');
+    const elem = elems.length == 0 ? document : elems[0];
+
+    if (elem !== document) {
+        elem.getElementById = function(id) {
+            return document.getElementById(id);
+        };
+    }
+    return elem.shadowRoot ? elem.shadowRoot : elem;
+}
+
+function showConfirmationDialog(a, file, c) {
+    if (file != "") {
+        var result = confirm(i18n(deleteConfirm_i18n_pref) + file + i18n(deleteConfirm_i18n_suff));
+        if (result) {
+            return [a, file, c];
+        }
+    }
+    return [a, "CANCELED", c];
+}
+
+function selectHistory() {
+    user_input_ta = user_input_tb.querySelector("textarea");
+    if (user_input_ta) {
+        disableSendBtn();
+        // 在 textarea 上监听 keydown 事件
+        user_input_ta.addEventListener("keydown", function (event) {
+            var value = user_input_ta.value.trim();
+            // 判断按下的是否为方向键
+            if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+                // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
+                if (value && key_down_history.indexOf(value) === -1)
+                    return;
+                // 对于需要响应的动作，阻止默认行为。
+                event.preventDefault();
+                var length = key_down_history.length;
+                if (length === 0) {
+                    currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
+                    return;
+                }
+                if (currentIndex === -1) {
+                    currentIndex = length;
+                }
+                if (event.code === 'ArrowUp' && currentIndex > 0) {
+                    currentIndex--;
+                    user_input_ta.value = key_down_history[currentIndex];
+                } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
+                    currentIndex++;
+                    user_input_ta.value = key_down_history[currentIndex];
+                }
+                user_input_ta.selectionStart = user_input_ta.value.length;
+                user_input_ta.selectionEnd = user_input_ta.value.length;
+                const input_event = new InputEvent("input", { bubbles: true, cancelable: true });
+                user_input_ta.dispatchEvent(input_event);
+            } else if (event.code === "Enter") {
+                if (value) {
+                    currentIndex = -1;
+                    if (key_down_history.indexOf(value) === -1) {
+                        key_down_history.push(value);
+                        if (key_down_history.length > MAX_HISTORY_LENGTH) {
+                            key_down_history.shift();
+                        }
+                    }
+                }
+            }
+        });
+    }
+}
+
+function disableSendBtn() {
+    sendBtn.disabled = user_input_ta.value.trim() === '';
+    user_input_ta.addEventListener('input', () => {
+        sendBtn.disabled = user_input_ta.value.trim() === '';
+    });
+}
+
+function checkModel() {
+    const model = gradioApp().querySelector('#model-select-dropdown input');
+    var modelValue = model.value;
+    checkGPT();
+    checkXMChat();
+    function checkGPT() {
+        modelValue = model.value;
+        if (modelValue.toLowerCase().includes('gpt')) {
+            gradioApp().querySelector('#header-btn-groups').classList.add('is-gpt');
+        } else {
+            gradioApp().querySelector('#header-btn-groups').classList.remove('is-gpt');
+        }
+        // console.log('gpt model checked')
+    }
+    function checkXMChat() {
+        modelValue = model.value;
+        if (modelValue.includes('xmchat')) {
+            chatbotArea.classList.add('is-xmchat');
+        } else {
+            chatbotArea.classList.remove('is-xmchat');
+        }
+    }
+
+    model.addEventListener('blur', ()=>{
+        setTimeout(()=>{
+            checkGPT();
+            checkXMChat();
+        }, 100);
+    });
+}
+
+function toggleDarkMode(isEnabled) {
+    if (isEnabled) {
+        document.body.classList.add("dark");
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#171717');
+        document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
+    } else {
+        document.body.classList.remove("dark");
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff');
+        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.addEventListener("change", (e) => {
+        toggleDarkMode(e.target.checked);
+    });
+}
+function btnToggleDarkMode() {
+    apSwitch.checked = !apSwitch.checked;
+    toggleDarkMode(apSwitch.checked);
+}
+
+function setScrollShadow() {
+    const toolboxScroll = toolbox.querySelector('#toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav');
+    const toolboxTabs = toolboxScroll.querySelectorAll('button');
+    let toolboxScrollWidth = 0;
+    toolboxTabs.forEach((tab) => {
+        toolboxScrollWidth += tab.offsetWidth; // 获取按钮宽度并累加
+    });
+    function adjustScrollShadow() {
+        if (toolboxScroll.scrollLeft > 0) {
+            toolboxScroll.classList.add('scroll-shadow-left');
+        } else {
+            toolboxScroll.classList.remove('scroll-shadow-left');
+        }
+
+        if (toolboxScroll.scrollLeft + toolboxScroll.clientWidth < toolboxScrollWidth) {
+            toolboxScroll.classList.add('scroll-shadow-right');
+        } else {
+            toolboxScroll.classList.remove('scroll-shadow-right');
+        }
+    }
+    toolboxScroll.addEventListener('scroll', () => {
+        adjustScrollShadow();
+    });
+    // no, I failed to make shadow appear on the top layer...
+}
+
+function setPopupBoxPosition() {
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+    popupWrapper.style.height = `${screenHeight}px`;
+    popupWrapper.style.width = `${screenWidth}px`;
+    // const popupBoxWidth = 680;
+    // const popupBoxHeight = 400;
+    // chuanhuPopup.style.left = `${(screenWidth - popupBoxWidth) / 2}px`;
+    // chuanhuPopup.style.top = `${(screenHeight - popupBoxHeight) / 2}px`;
+}
+
+function updateVH() {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+}
+
+function setChatbotHeight() {
+    return;
+    const screenWidth = window.innerWidth;
+    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`);
+    if (isInIframe) {
+        chatbot.style.height = `700px`;
+        chatbotWrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
+    } else {
+        if (screenWidth <= 320) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
+            chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        } else if (screenWidth <= 499) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
+            chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        } else {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
+            chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        }
+    }
+}
+function setChatbotScroll() {
+    var scrollHeight = chatbotWrap.scrollHeight;
+    chatbotWrap.scrollTo(0,scrollHeight)
+}
+
+function setAutocomplete() {
+    // 避免API Key被当成密码导致的模型下拉框被当成用户名而引发的浏览器自动填充行为
+    const apiKeyInput = gradioApp().querySelector("#api-key input");
+    apiKeyInput.setAttribute("autocomplete", "new-password");
+}
+
+function clearChatbot(a, b) {
+    clearHistoryHtml();
+    // clearMessageRows();
+    return [a, b]
+}
+
+function chatbotContentChanged(attempt = 1, force = false) {
+    for (var i = 0; i < attempt; i++) {
+        setTimeout(() => {
+            // clearMessageRows();
+            saveHistoryHtml();
+            disableSendBtn();
+            updateSlider();
+            updateCheckboxes();
+            bindFancyBox();
+
+            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+
+            if (chatbotIndicator.classList.contains('hide')) { // generation finished
+                setLatestMessage();
+                setChatList();
+            }
+
+            if (!chatbotIndicator.classList.contains('translucent')) { // message deleted
+                var checkLatestAdded = setInterval(() => {
+                    var latestMessageNow = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap > .message-wrap .message.bot.latest');
+                    if (latestMessageNow && latestMessageNow.querySelector('.message-btn-row')) {
+                        clearInterval(checkLatestAdded);
+                    } else {
+                        setLatestMessage();
+                    }
+                }, 200);
+            }
+
+
+        }, i === 0 ? 0 : 200);
+    }
+    // 理论上是不需要多次尝试执行的，可惜gradio的bug导致message可能没有渲染完毕，所以尝试500ms后再次执行
+}
+
+var chatbotObserver = new MutationObserver(() => {
+    chatbotContentChanged(1);
+    if (chatbotIndicator.classList.contains('hide')) {
+        // setLatestMessage();
+        chatbotContentChanged(2);
+    }
+    if (!chatbotIndicator.classList.contains('translucent')) {
+        chatbotContentChanged(2);
+    }
+
+});
+
+var chatListObserver = new MutationObserver(() => {
+    setChatList();
+});
+
+// 监视页面内部 DOM 变动
+var gradioObserver = new MutationObserver(function (mutations) {
+    for (var i = 0; i < mutations.length; i++) {
+        if (mutations[i].addedNodes.length) {
+            if (addInit()) {
+                gradioObserver.disconnect();
+                return;
+            }
+        }
+    }
+});
+
+// 监视页面变化
+window.addEventListener("DOMContentLoaded", function () {
+    // const ga = document.getElementsByTagName("gradio-app");
+    updateVH();
+    windowWidth = window.innerWidth;
+    gradioApp().addEventListener("render", initialize);
+    isInIframe = (window.self !== window.top);
+    historyLoaded = false;
+});
+window.addEventListener('resize', ()=>{
+    // setChatbotHeight();
+    updateVH();
+    windowWidth = window.innerWidth;
+    setPopupBoxPosition();
+    adjustSide();
+});
+window.addEventListener('orientationchange', (event) => {
+    updateVH();
+    windowWidth = window.innerWidth;
+    setPopupBoxPosition();
+    adjustSide();
+});
+window.addEventListener('scroll', ()=>{setPopupBoxPosition();});
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
+
+// console suprise
+var styleTitle1 = `
+font-size: 16px;
+font-family: ui-monospace, monospace;
+color: #06AE56;
+`
+var styleDesc1 = `
+font-size: 12px;
+font-family: ui-monospace, monospace;
+`
+function makeML(str) {
+    let l = new String(str)
+    l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
+    return l
+}
+let ChuanhuInfo = function () {
+    /* chatgpt-webui - GUI for ChatGPT API */
+}
+let description = `
+© 2023 shibing624
+GitHub repository: [https://github.com/shibing624/chatgpt-webui]\n
+Enjoy our project!\n
+`
+console.log(`%c${makeML(ChuanhuInfo)}`,styleTitle1);
+console.log(`%c${description}`, styleDesc1);

assets/javascript/Kelpy-Codos.js

@@ -0,0 +1,76 @@
+// ==UserScript==
+// @name         Kelpy Codos
+// @namespace    https://github.com/Keldos-Li/Kelpy-Codos
+// @version      1.0.5
+// @author       Keldos; https://keldos.me/
+// @description  Add copy button to PRE tags before CODE tag, for Chuanhu ChatGPT especially. 
+//               Based on Chuanhu ChatGPT version: ac04408 (2023-3-22)
+// @license      GPL-3.0
+// @grant        none
+// ==/UserScript==
+
+(function () {
+    'use strict';
+
+    function addCopyButton(pre) {
+        var code = pre.querySelector('code');
+        if (!code) {
+            return; // 如果没有找到 <code> 元素，则不添加按钮
+        }
+        var firstChild = code.firstChild;
+        if (!firstChild) {
+            return; // 如果 <code> 元素没有子节点，则不添加按钮
+        }
+        var button = document.createElement('button');
+        button.textContent = '\uD83D\uDCCE'; // 使用 📎 符号作为“复制”按钮的文本
+        button.style.position = 'relative';
+        button.style.float = 'right';
+        button.style.fontSize = '1em'; // 可选：调整按钮大小
+        button.style.background = 'none'; // 可选：去掉背景颜色
+        button.style.border = 'none'; // 可选：去掉边框
+        button.style.cursor = 'pointer'; // 可选：显示指针样式
+        button.addEventListener('click', function () {
+            var range = document.createRange();
+            range.selectNodeContents(code);
+            range.setStartBefore(firstChild); // 将范围设置为第一个子节点之前
+            var selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+
+            try {
+                var success = document.execCommand('copy');
+                if (success) {
+                    button.textContent = '\u2714';
+                    setTimeout(function () {
+                        button.textContent = '\uD83D\uDCCE'; // 恢复按钮为“复制”
+                    }, 2000);
+                } else {
+                    button.textContent = '\u2716';
+                }
+            } catch (e) {
+                console.error(e);
+                button.textContent = '\u2716';
+            }
+
+            selection.removeAllRanges();
+        });
+        code.insertBefore(button, firstChild); // 将按钮插入到第一个子元素之前
+    }
+
+    function handleNewElements(mutationsList, observer) {
+        for (var mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+                for (var node of mutation.addedNodes) {
+                    if (node.nodeName === 'PRE') {
+                        addCopyButton(node);
+                    }
+                }
+            }
+        }
+    }
+
+    var observer = new MutationObserver(handleNewElements);
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+
+    document.querySelectorAll('pre').forEach(addCopyButton);
+})();

assets/javascript/chat-history.js

@@ -0,0 +1,71 @@
+
+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');
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = historyHtml;
+    if (!historyHtml || tempDiv.innerText.trim() === "") {
+        historyLoaded = true;
+        return; // no history, do nothing
+    }
+    userLogged = localStorage.getItem('userLogged');
+    hideHistoryWhenNotLoggedIn = gradioApp().querySelector('#hideHistoryWhenNotLoggedIn_config').innerText === "True";
+    if (userLogged || (!userLogged && !hideHistoryWhenNotLoggedIn)){
+        historyLoaded = true;
+        return; // logged in, do nothing. OR, not logged in but not hide history list, do nothing.
+    }
+
+    // 只有用户未登录，还隐藏历史记录列表时，才选用只读历史记录
+    if (!historyLoaded) {
+        // preprocess, gradio buttons in history lost their event listeners
+        var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
+        for (var i = 0; i < gradioCopyButtons.length; i++) {
+            gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
+        }
+        var messageBtnRows = tempDiv.querySelectorAll('.message-btn-row');
+        for (var i = 0; i < messageBtnRows.length; i++) {
+            messageBtnRows[i].parentNode.removeChild(messageBtnRows[i]);
+        }
+        var latestMessages = tempDiv.querySelectorAll('.message.latest');
+        for (var i = 0; i < latestMessages.length; i++) {
+            latestMessages[i].classList.remove('latest');
+        }
+
+        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");
+    }
+}

assets/javascript/chat-list.js

@@ -0,0 +1,88 @@
+
+var currentChatName = null;
+
+function setChatListHeader() {
+    var grHistoryRefreshBtn = gradioApp().querySelector('button#gr-history-refresh-btn');
+    var grHistoryUploadBtn = gradioApp().querySelector('button#gr-history-upload-btn');
+
+    grHistoryRefreshBtn.className = "";
+    grHistoryUploadBtn.className = "";
+
+
+    grHistoryRefreshBtn.innerHTML = HistoryRefreshIcon;
+    grHistoryUploadBtn.innerHTML = HistoryUploadIcon;
+}
+
+function setChatList() {
+    var selectedChat = null;
+    var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
+    selectedChat = chatList.querySelector(".wrap label.selected")
+    if (!selectedChat) {
+        currentChatName = null;
+        return;
+    }
+
+    // if (userLogged) {
+    //     currentChatName = username + "/" + selectedChat.querySelector('span').innerText;
+    // } else {
+        currentChatName = selectedChat.querySelector('span').innerText;
+    // }
+
+    if (selectedChat.classList.contains('added-chat-btns')) {
+        return;
+    }
+
+    chatList.querySelector('.chat-selected-btns')?.remove(); // remove old buttons
+    chatList.querySelectorAll('.added-chat-btns').forEach(chat => chat.classList.remove('added-chat-btns'));
+
+    var ChatSelectedBtns = document.createElement('div');
+    ChatSelectedBtns.classList.add('chat-selected-btns');
+    selectedChat.classList.add('added-chat-btns');
+    ChatSelectedBtns.innerHTML = selectedChatBtns;
+
+    var renameBtn = ChatSelectedBtns.querySelector('#history-rename-btn');
+    renameBtn.addEventListener('click', function () {
+        gradioApp().querySelector('#gr-history-save-btn').click();
+    });
+
+    var deleteBtn = ChatSelectedBtns.querySelector('#history-delete-btn');
+    deleteBtn.addEventListener('click', function () {
+        gradioApp().querySelector('#gr-history-delete-btn').click();
+    });
+    selectedChat.appendChild(ChatSelectedBtns);
+
+    return;
+}
+
+
+function saveChatHistory(a, b, c, d) {
+    var fileName = b;
+
+    while (true) {
+        var result = prompt(renameChat_i18n, fileName);
+
+        if (result === null) {
+            throw new Error("rename operation cancelled");
+            // 不返回原文件名，而是使用 throw new Error() 打断程序，避免 gradio 进行保存操作
+            // break;
+        } else if (isValidFileName(result)) {
+            return [a, result, c, d];
+        } else {
+            alert(validFileName_i18n + "!@#$%^&*()<>?/\\|}{~:");
+        }
+    }
+    return [a, b, c, d]; // 兜底保障
+}
+
+function isValidFileName(fileName) {
+    // 使用正则表达式来检查文件名是否包含不合格字符
+    var regex = /[!@#$%^&*()<>?/\\|}{~:]/;
+    return !regex.test(fileName) && fileName.trim() !== "";
+}
+
+const selectedChatBtns = `
+<button id="history-rename-btn"><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
+<button id="history-delete-btn"><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
+`
+const HistoryRefreshIcon = '<svg class="icon-need-hover" width="18px" height="18px" viewBox="0 0 16.3594 21.9258 " version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path d="M0 11.6367C0 16.1836 3.65625 19.8398 8.17969 19.8398C12.7031 19.8398 16.3594 16.1836 16.3594 11.6367C16.3594 11.1328 16.0078 10.7695 15.4805 10.7695C14.9883 10.7695 14.6719 11.1328 14.6719 11.6367C14.6719 15.2461 11.7773 18.1406 8.17969 18.1406C4.59376 18.1406 1.6875 15.2461 1.6875 11.6367C1.6875 8.03906 4.59376 5.14452 8.17969 5.14452C8.80079 5.14452 9.33985 5.17968 9.83202 5.28516L7.35937 7.72265C7.19531 7.88671 7.11328 8.09765 7.11328 8.30858C7.11328 8.78906 7.47657 9.15235 7.94531 9.15235C8.20312 9.15235 8.40234 9.07032 8.54296 8.91797L12.2578 5.21484C12.4219 5.05078 12.4922 4.85155 12.4922 4.60546C12.4922 4.38281 12.4102 4.16016 12.2578 4.00781L8.54296 0.257808C8.40234 0.093744 8.19141 0 7.9336 0C7.47657 0 7.11328 0.386712 7.11328 0.867192C7.11328 1.08984 7.19531 1.30078 7.34766 1.46484L9.49218 3.57422C9.07031 3.49219 8.62499 3.45703 8.17969 3.45703C3.65625 3.45703 0 7.10155 0 11.6367Z" fill="currentColor"/></g></svg>';
+const HistoryUploadIcon  = '<svg class="icon-need-hover" width="18px" height="18px" viewBox="0 0 21.0234 19.5352" version="1.1" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M4.03125 19.5352C5.34375 19.5352 8.01562 18.1758 9.90234 16.7812C16.4531 16.8281 21.0234 13.1016 21.0234 8.40234C21.0234 3.75 16.3477 0 10.5117 0C4.6875 0 0 3.75 0 8.40234C0 11.4258 1.93359 14.1211 4.83984 15.4336C4.41797 16.2539 3.62109 17.4141 3.19922 17.9766C2.69531 18.6445 3.01172 19.5352 4.03125 19.5352ZM5.17969 17.7891C5.10938 17.8242 5.08594 17.7656 5.13281 17.707C5.67188 17.0391 6.38672 16.0547 6.69141 15.5156C6.98438 14.9883 6.91406 14.4961 6.23438 14.1797C3.35156 12.8438 1.73438 10.7695 1.73438 8.40234C1.73438 4.73438 5.625 1.73438 10.5117 1.73438C15.4102 1.73438 19.2891 4.73438 19.2891 8.40234C19.2891 12.0586 15.4102 15.0586 10.5117 15.0586C10.3945 15.0586 10.1602 15.0586 9.82031 15.0586C9.38672 15.0586 9.05859 15.1992 8.67188 15.5156C7.65234 16.3125 6.03516 17.3789 5.17969 17.7891Z"/><path d="M10.5234 13.1133C10.9805 13.1133 11.3086 12.7969 11.3086 12.3398L11.3086 8.20312L11.2266 6.10547L12.0938 7.19531L13.0312 8.15625C13.1719 8.30859 13.3594 8.37891 13.5938 8.37891C14.0156 8.37891 14.3555 8.05078 14.3555 7.62891C14.3555 7.41797 14.2734 7.21875 14.1445 7.08984L11.1445 4.10156C10.9453 3.90234 10.7578 3.79688 10.5234 3.79688C10.3008 3.79688 10.125 3.89062 9.91406 4.10156L6.91406 7.08984C6.77344 7.21875 6.70312 7.41797 6.70312 7.62891C6.70312 8.05078 7.03125 8.37891 7.46484 8.37891C7.6875 8.37891 7.875 8.29688 8.01562 8.15625L8.96484 7.19531L9.82031 6.11719L9.75 8.20312L9.75 12.3398C9.75 12.7969 10.0781 13.1133 10.5234 13.1133Z"/></g></svg>';

assets/javascript/external-scripts.js

@@ -0,0 +1,2 @@
+
+// external javascript here

assets/javascript/fake-gradio.js

@@ -0,0 +1,116 @@
+
+// Fake gradio components!
+
+// buttons
+function newChatClick() {
+    gradioApp().querySelector('#empty-btn').click();
+}
+function jsonDownloadClick() {
+    gradioApp().querySelector('#gr-history-download-btn').click();
+}
+function mdDownloadClick() {
+    gradioApp().querySelector('#gr-markdown-export-btn').click();
+    gradioApp().querySelector('#gr-history-mardown-download-btn').click();
+
+    // downloadHistory(username, currentChatName, ".md");
+}
+
+// index files
+function setUploader() {
+    transUpload();
+    var uploaderObserver = new MutationObserver(function (mutations) {
+        var fileInput = null;
+        var fileCount = 0;
+        fileInput = gradioApp().querySelector("#upload-index-file table.file-preview");
+        var fileCountSpan = gradioApp().querySelector("#uploaded-files-count");
+        if (fileInput) {
+            chatbotArea.classList.add('with-file');
+            fileCount = fileInput.querySelectorAll('tbody > tr.file').length;
+            fileCountSpan.innerText = fileCount;
+        } else {
+            chatbotArea.classList.remove('with-file');
+            statusDisplayMessage("");
+            fileCount = 0;
+            transUpload();
+        }
+    });
+    uploaderObserver.observe(uploaderIndicator, {attributes: true})
+}
+var grUploader;
+var chatbotUploader;
+var handleClick = function() {
+    grUploader.click();
+
+};
+function transUpload() {
+    chatbotUploader = gradioApp().querySelector("#upload-files-btn");
+    chatbotUploader.removeEventListener('click', handleClick);
+    grUploader = gradioApp().querySelector("#upload-index-file > .center.flex");
+
+    // let uploaderEvents = ["click", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop"];
+    // transEventListeners(chatbotUploader, grUploader, uploaderEvents);
+
+    chatbotUploader.addEventListener('click', handleClick);
+}
+
+// checkbox
+var grSingleSessionCB;
+var grOnlineSearchCB;
+var chatbotSingleSessionCB;
+var chatbotOnlineSearchCB;
+function setCheckboxes() {
+    chatbotSingleSessionCB = gradioApp().querySelector('input[name="single-session-cb"]');
+    chatbotOnlineSearchCB = gradioApp().querySelector('input[name="online-search-cb"]');
+    grSingleSessionCB = gradioApp().querySelector("#gr-single-session-cb > label > input");
+    grOnlineSearchCB = gradioApp().querySelector("#gr-websearch-cb > label> input");
+    
+    chatbotSingleSessionCB.addEventListener('change', (e) => {
+        grSingleSessionCB.checked = chatbotSingleSessionCB.checked;
+        gradioApp().querySelector('#change-single-session-btn').click();
+    });
+    chatbotOnlineSearchCB.addEventListener('change', (e) => {
+        grOnlineSearchCB.checked = chatbotOnlineSearchCB.checked;
+        gradioApp().querySelector('#change-online-search-btn').click();
+    });
+    grSingleSessionCB.addEventListener('change', (e) => {
+        chatbotSingleSessionCB.checked = grSingleSessionCB.checked;
+    });
+    grOnlineSearchCB.addEventListener('change', (e) => {
+        chatbotOnlineSearchCB.checked = grOnlineSearchCB.checked;
+    });
+}
+
+function bgChangeSingleSession() {
+    // const grSingleSessionCB = gradioApp().querySelector("#gr-single-session-cb > label > input");
+    let a = chatbotSingleSessionCB.checked;
+    return [a];
+}
+function bgChangeOnlineSearch() {
+    // const grOnlineSearchCB = gradioApp().querySelector("#gr-websearch-cb > label> input");
+    let a = chatbotOnlineSearchCB.checked;
+    return [a];
+}
+
+function updateCheckboxes() {
+    chatbotSingleSessionCB.checked = grSingleSessionCB.checked;
+    chatbotOnlineSearchCB.checked = grOnlineSearchCB.checked;
+}
+
+// UTILS
+function transEventListeners(target, source, events) {
+    events.forEach((sourceEvent) => {
+        target.addEventListener(sourceEvent, function (targetEvent) {
+            if(targetEvent.preventDefault) targetEvent.preventDefault();
+            if(targetEvent.stopPropagation) targetEvent.stopPropagation();
+
+            source.dispatchEvent(new Event(sourceEvent, {detail: targetEvent.detail}));
+            // console.log(targetEvent.detail);
+        });
+    });
+}
+
+function bgSelectHistory(a,b){
+    const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+    let file = historySelectorInput.value;
+    return [a,file]
+}

assets/javascript/file-input.js

@@ -0,0 +1,114 @@
+
+// paste和upload部分参考:
+// https://github.com/binary-husky/gpt_academic/tree/master/themes/common.js
+// @Kilig947
+
+
+function setPasteUploader() {
+    input = user_input_tb.querySelector("textarea")
+    let paste_files = [];
+    if (input) {
+        input.addEventListener("paste", async function (e) {
+            const clipboardData = e.clipboardData || window.clipboardData;
+            const items = clipboardData.items;
+            if (items) {
+                for (i = 0; i < items.length; i++) {
+                    if (items[i].kind === "file") { // 确保是文件类型
+                        const file = items[i].getAsFile();
+                        // 将每一个粘贴的文件添加到files数组中
+                        paste_files.push(file);
+                        e.preventDefault();  // 避免粘贴文件名到输入框
+                    }
+                }
+                if (paste_files.length > 0) {
+                    // 按照文件列表执行批量上传逻辑
+                    await upload_files(paste_files);
+                    paste_files = [];
+                }
+            }
+        });
+    }
+}
+
+var hintArea;
+function setDragUploader() {
+    input = chatbotArea;
+    if (input) {
+        const dragEvents = ["dragover", "dragenter"];
+        const leaveEvents = ["dragleave", "dragend", "drop"];
+
+        const onDrag = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!chatbotArea.classList.contains("with-file")) {
+                chatbotArea.classList.add("dragging");
+                draggingHint();
+            } else {
+                statusDisplayMessage(clearFileHistoryMsg_i18n, 2000);
+            }
+        };
+
+        const onLeave = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            chatbotArea.classList.remove("dragging");
+            if (hintArea) {
+                hintArea.remove();
+            }
+        };
+
+        dragEvents.forEach(event => {
+            input.addEventListener(event, onDrag);
+        });
+
+        leaveEvents.forEach(event => {
+            input.addEventListener(event, onLeave);
+        });
+
+        input.addEventListener("drop", async function (e) {
+            const files = e.dataTransfer.files;
+            await upload_files(files);
+        });
+    }
+}
+
+async function upload_files(files) {
+    const uploadInputElement = gradioApp().querySelector("#upload-index-file > .center.flex input[type=file]");
+    let totalSizeMb = 0
+    if (files && files.length > 0) {
+        // 执行具体的上传逻辑
+        if (uploadInputElement) {
+            for (let i = 0; i < files.length; i++) {
+                // 将从文件数组中获取的文件大小(单位为字节)转换为MB，
+                totalSizeMb += files[i].size / 1024 / 1024;
+            }
+            // 检查文件总大小是否超过20MB
+            if (totalSizeMb > 20) {
+                // toast_push('⚠️文件夹大于20MB 🚀上传文件中', 2000)
+                // return;  // 如果超过了指定大小, 可以不进行后续上传操作
+            }
+             // 监听change事件， 原生Gradio可以实现
+            // uploadInputElement.addEventListener('change', function(){replace_input_string()});
+            let event = new Event("change");
+            Object.defineProperty(event, "target", {value: uploadInputElement, enumerable: true});
+            Object.defineProperty(event, "currentTarget", {value: uploadInputElement, enumerable: true});
+            Object.defineProperty(uploadInputElement, "files", {value: files, enumerable: true});
+            uploadInputElement.dispatchEvent(event);
+            // statusDisplayMessage("");
+        } else {
+            statusDisplayMessage(clearFileHistoryMsg_i18n, 3000);
+            return;
+        }
+    }
+}
+
+function draggingHint() {
+    hintArea = chatbotArea.querySelector(".dragging-hint");
+    if (hintArea) {
+        return;
+    }
+    hintArea = document.createElement("div");
+    hintArea.classList.add("dragging-hint");
+    hintArea.innerHTML = `<div class="dragging-hint-text"><p>${dropUploadMsg_i18n}</p></div>`;
+    chatbotArea.appendChild(hintArea);
+}

assets/javascript/localization.js

@@ -0,0 +1,39 @@
+
+// i18n
+
+const language = navigator.language.slice(0,2);
+
+var forView_i18n;
+var deleteConfirm_i18n_pref;
+var deleteConfirm_i18n_suff;
+var usingLatest_i18n;
+var updatingMsg_i18n;
+var updateSuccess_i18n;
+var updateFailure_i18n;
+var regenerate_i18n;
+var deleteRound_i18n;
+var renameChat_i18n;
+var validFileName_i18n;
+var clearFileHistoryMsg_i18n;
+var dropUploadMsg_i18n;
+
+function setLoclize() {
+    forView_i18n = gradioApp().querySelector('#forView_i18n').innerText;
+    deleteConfirm_i18n_pref = gradioApp().querySelector('#deleteConfirm_i18n_pref').innerText;
+    deleteConfirm_i18n_suff = gradioApp().querySelector('#deleteConfirm_i18n_suff').innerText;
+    usingLatest_i18n = gradioApp().querySelector('#usingLatest_i18n').innerText;
+    updatingMsg_i18n = gradioApp().querySelector('#updatingMsg_i18n').innerText;
+    updateSuccess_i18n = gradioApp().querySelector('#updateSuccess_i18n').innerText;
+    updateFailure_i18n = gradioApp().querySelector('#updateFailure_i18n').innerText;
+    regenerate_i18n = gradioApp().querySelector('#regenerate_i18n').innerText;
+    deleteRound_i18n = gradioApp().querySelector('#deleteRound_i18n').innerText;
+    renameChat_i18n = gradioApp().querySelector('#renameChat_i18n').innerText;
+    validFileName_i18n = gradioApp().querySelector('#validFileName_i18n').innerText;
+    clearFileHistoryMsg_i18n = gradioApp().querySelector('#clearFileHistoryMsg_i18n').innerText;
+    dropUploadMsg_i18n = gradioApp().querySelector('#dropUploadMsg_i18n').innerText;
+}
+
+function i18n(msg) {
+    return msg;
+    // return msg.hasOwnProperty(language) ? msg[language] : msg['en'];
+}

assets/javascript/message-button.js

@@ -0,0 +1,195 @@
+
+// 为 bot 消息添加复制与切换显示按钮 以及最新消息加上重新生成，删除最新消息，嗯。
+
+function addChuanhuButton(botElement) {
+
+    // botElement = botRow.querySelector('.message.bot');
+    var isLatestMessage = botElement.classList.contains('latest');
+
+    var rawMessage = botElement.querySelector('.raw-message');
+    var mdMessage = botElement.querySelector('.md-message');
+    
+    if (!rawMessage) { // 如果没有 raw message，说明是早期历史记录，去除按钮
+        // var buttons = botElement.querySelectorAll('button.chuanhu-btn');
+        // for (var i = 0; i < buttons.length; i++) {
+        //     buttons[i].parentNode.removeChild(buttons[i]);
+        // }
+        botElement.querySelector('.message-btn-row')?.remove();
+        botElement.querySelector('.message-btn-column')?.remove();
+        return;
+    }
+    // botElement.querySelectorAll('button.copy-bot-btn, button.toggle-md-btn').forEach(btn => btn.remove()); // 就算原先有了，也必须重新添加，而不是跳过
+    if (!isLatestMessage) botElement.querySelector('.message-btn-row')?.remove();
+    botElement.querySelector('.message-btn-column')?.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;
+        }
+        chatbotContentChanged(1); // to set md or raw in read-only history html
+    });
+    // botElement.insertBefore(toggleButton, copyButton);
+
+    var messageBtnColumn = document.createElement('div');
+    messageBtnColumn.classList.add('message-btn-column');
+    messageBtnColumn.appendChild(toggleButton);
+    messageBtnColumn.appendChild(copyButton);
+    botElement.appendChild(messageBtnColumn);
+
+    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) {
+            // 判断pre是否存在fake-pre类，如果不存在，则为20231118之前的历史记录格式，需要转换，增加fake-pre类用于适配
+            if (!rawDiv.querySelector('pre')?.classList.contains('fake-pre')) {
+                rawDiv.innerHTML = rawDiv.innerHTML.replace(/<pre>/g, '<pre class="fake-pre">');
+            }
+            // rawDiv.innerHTML = rawDiv.querySelector('pre')?.innerHTML || rawDiv.innerHTML;
+            rawDiv.classList.remove('hideM');
+        }
+        var mdDiv = message.querySelector('.md-message');
+        if (mdDiv) mdDiv.classList.add('hideM');
+    }
+}
+
+function setLatestMessage() {
+    var latestMessage = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap > .message-wrap .message.bot.latest');
+    if (latestMessage) addLatestMessageButtons(latestMessage);
+}
+
+function addLatestMessageButtons(botElement) {
+    botElement.querySelector('.message-btn-row')?.remove();
+
+    var messageBtnRow = document.createElement('div');
+    messageBtnRow.classList.add('message-btn-row');
+    var messageBtnRowLeading = document.createElement('div');
+    messageBtnRowLeading.classList.add('message-btn-row-leading');
+    var messageBtnRowTrailing = document.createElement('div');
+    messageBtnRowTrailing.classList.add('message-btn-row-trailing');
+
+    messageBtnRow.appendChild(messageBtnRowLeading);
+    messageBtnRow.appendChild(messageBtnRowTrailing);
+
+    botElement.appendChild(messageBtnRow);
+
+    //leading
+    var regenerateButton = document.createElement('button');
+    regenerateButton.classList.add('chuanhu-btn');
+    regenerateButton.classList.add('regenerate-btn');
+    regenerateButton.setAttribute('aria-label', 'Regenerate');
+    regenerateButton.innerHTML = regenIcon + `<span>${i18n(regenerate_i18n)}</span>`;
+
+    var gradioRetryBtn = gradioApp().querySelector('#gr-retry-btn');
+    regenerateButton.addEventListener('click', () => {
+        gradioRetryBtn.click();
+    });
+
+    var deleteButton = document.createElement('button');
+    deleteButton.classList.add('chuanhu-btn');
+    deleteButton.classList.add('delete-latest-btn');
+    deleteButton.setAttribute('aria-label', 'Delete');
+    deleteButton.innerHTML = deleteIcon + `<span>${i18n(deleteRound_i18n)}</span>`;
+
+    var gradioDelLastBtn = gradioApp().querySelector('#gr-dellast-btn');
+    deleteButton.addEventListener('click', () => {
+        gradioDelLastBtn.click();
+    });
+
+    messageBtnRowLeading.appendChild(regenerateButton);
+    messageBtnRowLeading.appendChild(deleteButton);
+
+    // trailing
+    var likeButton = document.createElement('button');
+    likeButton.classList.add('chuanhu-btn');
+    likeButton.classList.add('like-latest-btn');
+    likeButton.setAttribute('aria-label', 'Like');
+    likeButton.innerHTML = likeIcon;
+
+    var gradioLikeBtn = gradioApp().querySelector('#gr-like-btn');
+    likeButton.addEventListener('click', () => {
+        gradioLikeBtn.click();
+    });
+
+    var dislikeButton = document.createElement('button');
+    dislikeButton.classList.add('chuanhu-btn');
+    dislikeButton.classList.add('dislike-latest-btn');
+    dislikeButton.setAttribute('aria-label', 'Dislike');
+    dislikeButton.innerHTML = dislikeIcon;
+
+    var gradioDislikeBtn = gradioApp().querySelector('#gr-dislike-btn');
+    dislikeButton.addEventListener('click', () => {
+        gradioDislikeBtn.click();
+    });
+
+    messageBtnRowTrailing.appendChild(likeButton);
+    messageBtnRowTrailing.appendChild(dislikeButton);
+}
+
+
+// button svg code
+const copyIcon   = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>';
+const copiedIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
+const mdIcon     = '<span><svg stroke="currentColor" fill="none" stroke-width="1" viewBox="0 0 14 18" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><path d="M1.5,0 L12.5,0 C13.3284271,-1.52179594e-16 14,0.671572875 14,1.5 L14,16.5 C14,17.3284271 13.3284271,18 12.5,18 L1.5,18 C0.671572875,18 1.01453063e-16,17.3284271 0,16.5 L0,1.5 C-1.01453063e-16,0.671572875 0.671572875,1.52179594e-16 1.5,0 Z" stroke-width="1.8"></path><line x1="3.5" y1="3.5" x2="10.5" y2="3.5"></line><line x1="3.5" y1="6.5" x2="8" y2="6.5"></line></g><path d="M4,9 L10,9 C10.5522847,9 11,9.44771525 11,10 L11,13.5 C11,14.0522847 10.5522847,14.5 10,14.5 L4,14.5 C3.44771525,14.5 3,14.0522847 3,13.5 L3,10 C3,9.44771525 3.44771525,9 4,9 Z" stroke="none" fill="currentColor"></path></svg></span>';
+const rawIcon    = '<span><svg stroke="currentColor" fill="none" stroke-width="1.8" viewBox="0 0 18 14" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><polyline points="4 3 0 7 4 11"></polyline><polyline points="14 3 18 7 14 11"></polyline><line x1="12" y1="0" x2="6" y2="14"></line></g></svg></span>';
+
+const regenIcon  = '<span><svg viewBox="0 0 15.6737 14.3099" height="11px" width="10px" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M8.52344 14.3043C12.4453 14.3043 15.6737 11.0704 15.6737 7.15396C15.6737 3.23385 12.4453 0 8.52344 0C4.61357 0 1.39193 3.20969 1.37314 7.11614L2.77012 7.11614C2.78891 3.94173 5.34391 1.40431 8.52344 1.40431C11.7096 1.40431 14.2785 3.96418 14.2785 7.15396C14.2785 10.3401 11.7096 12.9163 8.52344 12.9073C6.6559 12.9036 5.0325 12.0192 3.98219 10.6317C3.70247 10.3165 3.29141 10.2174 2.96431 10.4686C2.65796 10.6988 2.60863 11.1321 2.91325 11.5028C4.17573 13.1677 6.28972 14.3043 8.52344 14.3043ZM0.520576 5.73631C-0.0035439 5.73631-0.140743 6.14811 0.149274 6.53993L1.86425 8.89772C2.08543 9.20509 2.4372 9.20143 2.65301 8.89772L4.36628 6.53626C4.64726 6.14981 4.51544 5.73631 3.99839 5.73631Z"/></g></svg></span>';
+const deleteIcon = '<span><svg viewBox="0 0 17.0644 12.9388" height="11px" width="11px" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M4.85464 12.9388L12.2098 12.9388C13.6299 12.9388 14.26 12.2074 14.4792 10.7927L15.6069 3.38561L14.2702 3.42907L13.1479 10.686C13.049 11.3506 12.7252 11.6268 12.12 11.6268L4.94444 11.6268C4.32818 11.6268 4.01711 11.3506 3.91652 10.686L2.79421 3.42907L1.45752 3.38561L2.5852 10.7927C2.80443 12.2147 3.43453 12.9388 4.85464 12.9388ZM1.5018 4.10325L15.5643 4.10325C16.5061 4.10325 17.0644 3.49076 17.0644 2.55799L17.0644 1.55796C17.0644 0.623227 16.5061 0.0144053 15.5643 0.0144053L1.5018 0.0144053C0.588798 0.0144053 0 0.623227 0 1.55796L0 2.55799C0 3.49076 0.561696 4.10325 1.5018 4.10325ZM1.72372 2.88176C1.41559 2.88176 1.26666 2.7255 1.26666 2.412L1.26666 1.70028C1.26666 1.39215 1.41559 1.23589 1.72372 1.23589L15.3444 1.23589C15.6542 1.23589 15.7978 1.39215 15.7978 1.70028L15.7978 2.412C15.7978 2.7255 15.6542 2.88176 15.3444 2.88176Z"/><path d="M6.62087 10.2995C6.77686 10.2995 6.90282 10.2353 7.01438 10.1274L8.53038 8.60625L10.0517 10.1274C10.1633 10.2316 10.2876 10.2995 10.4526 10.2995C10.7594 10.2995 11.0131 10.0368 11.0131 9.72824C11.0131 9.56151 10.9542 9.44092 10.8427 9.32936L9.33033 7.81679L10.8463 6.29151C10.965 6.17458 11.0184 6.0557 11.0184 5.90166C11.0184 5.58407 10.7685 5.33044 10.4526 5.33044C10.302 5.33044 10.1814 5.38928 10.0608 5.5062L8.53038 7.03269L7.01072 5.50987C6.89379 5.39831 6.77686 5.33947 6.62087 5.33947C6.31036 5.33947 6.05307 5.59311 6.05307 5.90166C6.05307 6.05936 6.11019 6.18899 6.22346 6.29688L7.73579 7.81679L6.22346 9.33303C6.1119 9.44092 6.05307 9.56688 6.05307 9.72824C6.05307 10.0405 6.3067 10.2995 6.62087 10.2995Z"/></g></svg></span>';
+    // const deleteIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" height="11px" width="11px" viewBox="0 0 216 163" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="215" height="39" rx="9"/><path d="M197.485,39.535 L181.664,145.870 C180.953,150.648 178.547,154.805 175.110,157.768 C171.674,160.731 167.207,162.500 162.376,162.500 L53.558,162.500 C48.737,162.500 44.278,160.738 40.843,157.785 C37.409,154.831 34.999,150.686 34.278,145.919 L18.173,39.535 L197.485,39.535 Z" /><line x1="79.5" y1="71.5" x2="135.5" y2="127.5"/><line x1="79.5" y1="127.5" x2="135.5" y2="71.5"/></svg></span>'
+
+const likeIcon   = '<span><svg viewBox="0 0 14.4675 15.7462" height="11px" width="11px" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M0 10.371C0 12.7447 1.51703 14.6758 3.48611 14.6758L5.667 14.6758C6.55809 15.123 7.61471 15.3774 8.77071 15.3774L9.69842 15.3774C10.58 15.3774 11.3136 15.3276 11.7943 15.2026C12.7703 14.9639 13.3931 14.2618 13.3931 13.3949C13.3931 13.2345 13.3677 13.0941 13.3208 12.9537C13.7842 12.5939 14.042 12.0763 14.042 11.4997C14.042 11.2309 13.9917 10.9655 13.8908 10.7507C14.206 10.4318 14.3799 9.96358 14.3799 9.46848C14.3799 9.14304 14.3027 8.81345 14.1645 8.57078C14.3581 8.2876 14.4675 7.90016 14.4675 7.47879C14.4675 6.42124 13.6602 5.60147 12.6063 5.60147L10.1642 5.60147C10.0006 5.60147 9.8919 5.52528 9.89873 5.37707C9.94826 4.69467 11.0035 3.06283 11.0035 1.72154C11.0035 0.72357 10.3014 0 9.33735 0C8.63623 0 8.15116 0.370089 7.70051 1.23942C6.86069 2.86536 5.8793 4.19561 4.39803 6.0414L3.23221 6.0414C1.38812 6.0414 0 7.9527 0 10.371ZM4.16181 10.3188C4.16181 8.90914 4.47725 8.01363 5.3808 6.80246C6.38763 5.45238 7.78384 3.82937 8.78871 1.82159C8.99528 1.42114 9.12909 1.3181 9.34054 1.3181C9.5974 1.3181 9.76222 1.50416 9.76222 1.81548C9.76222 2.78038 8.64211 4.4305 8.64211 5.51371C8.64211 6.3203 9.28051 6.84271 10.1713 6.84271L12.5653 6.84271C12.9408 6.84271 13.2246 7.12839 13.2246 7.50612C13.2246 7.76811 13.1415 7.94147 12.9377 8.15218C12.7334 8.34524 12.7053 8.65131 12.8901 8.84536C13.0595 9.07976 13.1352 9.25141 13.1352 9.47018C13.1352 9.73072 13.007 9.95486 12.7653 10.139C12.5131 10.3172 12.4299 10.6154 12.5712 10.9049C12.7031 11.1466 12.77 11.2853 12.77 11.4877C12.77 11.7944 12.5751 12.0361 12.1869 12.2381C11.9475 12.3752 11.8772 12.6425 11.9851 12.8802C12.1062 13.1749 12.1242 13.2435 12.1225 13.3864C12.1225 13.6664 11.9184 13.8921 11.4792 14.0019C11.0907 14.1006 10.4594 14.1416 9.60644 14.1399L8.82296 14.1382C6.03316 14.1313 4.16181 12.5581 4.16181 10.3188ZM1.21733 10.371C1.21733 8.67034 2.08408 7.32534 3.09216 7.26898C3.26992 7.26556 3.44573 7.26386 3.62349 7.26215C3.13079 8.20088 2.91716 9.15693 2.91716 10.3266C2.91716 11.5559 3.35395 12.646 4.14963 13.4907C3.90227 13.4907 3.64466 13.489 3.39046 13.4872C2.20833 13.4275 1.21733 12.0649 1.21733 10.371Z"/></g></svg></span>';
+const dislikeIcon= '<span><svg viewBox="0 0 14.4675 15.5664" height="11px" width="11px" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M14.4675 5.19535C14.4675 2.82169 12.9488 0.890613 10.9814 0.890613L8.7988 0.890613C7.90771 0.443351 6.85109 0.188955 5.70046 0.188955L4.76908 0.188955C3.88948 0.188955 3.15391 0.238755 2.6715 0.363751C1.6972 0.602507 1.07444 1.30459 1.07444 2.17147C1.07444 2.33189 1.09984 2.47228 1.14501 2.61267C0.683343 2.97251 0.423822 3.49007 0.423822 4.06671C0.423822 4.33551 0.47778 4.60089 0.574954 4.81574C0.265139 5.13456 0.0859375 5.60282 0.0859375 6.09792C0.0859375 6.42336 0.168459 6.75295 0.302984 6.99562C0.11304 7.2788 0 7.66624 0 8.0859C0 9.14516 0.807327 9.96493 1.8595 9.96493L4.30164 9.96493C4.46695 9.96493 4.57561 10.0411 4.56707 10.1893C4.51754 10.8717 3.46404 12.5036 3.46404 13.8449C3.46404 14.8428 4.16442 15.5664 5.12845 15.5664C5.83128 15.5664 6.31634 15.1963 6.76895 14.327C7.60878 12.701 8.5882 11.3708 10.0695 9.525L11.2353 9.525C13.0794 9.525 14.4675 7.6137 14.4675 5.19535ZM10.3057 5.24758C10.3057 6.65726 9.98855 7.55277 9.09036 8.76394C8.07817 10.114 6.68196 11.737 5.67709 13.7448C5.47418 14.1453 5.33671 14.2483 5.12697 14.2483C4.87376 14.2483 4.70528 14.0622 4.70528 13.7509C4.70528 12.786 5.82539 11.1359 5.82539 10.0527C5.82539 9.2461 5.187 8.72369 4.29816 8.72369L1.90049 8.72369C1.52497 8.72369 1.24124 8.43801 1.24124 8.06028C1.24124 7.79829 1.32426 7.62493 1.52984 7.41422C1.7361 7.22116 1.76051 6.91509 1.5811 6.72104C1.41166 6.48664 1.3323 6.31499 1.3323 6.09622C1.3323 5.83398 1.46049 5.61154 1.70587 5.42744C1.95436 5.24925 2.03956 4.95098 1.89627 4.66148C1.76271 4.41976 1.69581 4.28108 1.69581 4.07866C1.69581 3.77199 1.89065 3.53027 2.28058 3.32835C2.52003 3.19117 2.59033 2.92392 2.4861 2.68447C2.35962 2.39146 2.34155 2.32115 2.34497 2.17831C2.34497 1.89995 2.54909 1.67434 2.99028 1.56447C3.38042 1.46584 4.01005 1.42116 4.85936 1.42653L5.64284 1.42824C8.43435 1.4424 10.3057 3.00833 10.3057 5.24758ZM13.2502 5.19535C13.2502 6.89606 12.3834 8.24106 11.3736 8.29742C11.2013 8.30084 11.0218 8.30254 10.844 8.30425C11.3367 7.36552 11.5486 6.40947 11.5486 5.23978C11.5486 4.01052 11.1136 2.92044 10.3162 2.07574C10.5689 2.07574 10.8228 2.07745 11.077 2.07915C12.2575 2.13893 13.2502 3.50151 13.2502 5.19535Z"/></g></svg></span>'

assets/javascript/sliders.js

@@ -0,0 +1,26 @@
+
+var rangeInputs = null;
+var numberInputs = null;
+
+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 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 updateSlider() {
+    setSliderRange();
+}

assets/javascript/updater.js

@@ -0,0 +1,243 @@
+
+var updateInfoGotten = false;
+var isLatestVersion = localStorage.getItem('isLatestVersion') === "true" || false;
+var shouldCheckUpdate = false;
+
+function setUpdater() {
+    const enableCheckUpdate = gradioApp().querySelector('#enableCheckUpdate_config').innerText;
+
+    if (enableCheckUpdate == "False" || enableCheckUpdate == "false") {
+        gradioApp().classList.add('disable-update');
+        return;
+    }
+
+    if (!isLatestVersion) {
+        gradioApp().classList.add('is-outdated');
+    }
+    const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
+    currentTime = new Date().getTime();
+    const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
+    shouldCheckUpdate = !updateInfoGotten && (!isLatestVersion && longTimeNoCheck || isLatestVersion);
+    // console.log(`shouldCheckUpdate`, shouldCheckUpdate);
+    if (shouldCheckUpdate) updateLatestVersion();
+}
+
+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;
+                    gradioApp().classList.remove('is-outdated');
+                    enableUpdateBtns();
+                } else if (getUpdateStatus() === "failure") {
+                    updatingInfoElement.innerHTML = marked.parse(updateFailure_i18n, {mangle: false, headerIds: false});
+                    disableUpdateBtn_enableCancelBtn();
+                } 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 reVersion = /<a[^>]*>([^<]*)<\/a>/g;
+    const versionMatch = reVersion.exec(currentVersionElement.innerHTML);
+    const currentVersion = (versionMatch && versionMatch[1].length == 8) ? versionMatch[1] : null;
+    const latestVersionElement = document.getElementById('latest-version-title');
+    const versionInfoElement = document.getElementById('version-info-title');
+    releaseNoteElement = document.getElementById('release-note-content');
+    updatingInfoElement = document.getElementById('updating-info');
+    
+    const versionTime = document.getElementById('version-time').innerText;
+    const localVersionTime = versionTime !== "unknown" ? (new Date(versionTime)).getTime() : 0;
+    disableUpdateBtns();
+    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;
+        if (currentVersion) {
+            if (latestVersion <= currentVersion) {
+                noUpdate();
+                localStorage.setItem('isLatestVersion', 'true');
+                isLatestVersion = true;
+                gradioApp().classList.remove('is-outdated');
+            } else {
+                latestVersionElement.textContent = latestVersion;
+                console.log(`New version ${latestVersion} found!`);
+                if (!isInIframe) openUpdateToast();
+                gradioApp().classList.add('is-outdated');
+                localStorage.setItem('isLatestVersion', 'false');
+                isLatestVersion = false;
+            }
+            enableUpdateBtns();
+        } else { //如果当前版本号获取失败，使用时间比较
+            const latestVersionTime = (new Date(data.created_at)).getTime();
+            if (latestVersionTime) {
+                const latestVersionInfo = `<a href="https://github.com/gaizhenbiao/chuanhuchatgpt/releases/latest" target="_blank" id="latest-version-title" style="text-decoration: none;">${latestVersion}</a>`
+                const manualUpdateInfo = `<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blanks" style="text-decoration: none;">manual update</a>`
+                if (localVersionTime == 0) {
+                    const infoMessage = `Local version check failed. \nBut latest revision is ${latestVersionInfo}. \n\nWhen Update needed, \n- If you are using Docker, try to update package. \n- If you didn't use git, try ${manualUpdateInfo}.`
+                    versionInfoElement.innerHTML = marked.parse(infoMessage, {mangle: false, headerIds: false});
+                    console.log(`New version ${latestVersion} found!`);
+                    disableUpdateBtn_enableCancelBtn();
+                    localStorage.setItem('isLatestVersion', 'false');
+                    isLatestVersion = false;
+                    gradioApp().classList.add('is-outdated');
+                } else if (localVersionTime < latestVersionTime) {
+                    const infoMessage = `Local version check failed, it seems to be a local rivision. \n\nBut latest revision is ${latestVersionInfo}. Try ${manualUpdateInfo}.`
+                    versionInfoElement.innerHTML = marked.parse(infoMessage, {mangle: false, headerIds: false});
+                    console.log(`New version ${latestVersion} found!`);
+                    disableUpdateBtn_enableCancelBtn();
+                    // if (!isInIframe) openUpdateToast();
+                    localStorage.setItem('isLatestVersion', 'false');
+                    isLatestVersion = false;
+                    gradioApp().classList.add('is-outdated');
+                } else {
+                    noUpdate("Local version check failed, it seems to be a local rivision. <br>But your revision is newer than the latest release.");
+                    gradioApp().classList.add('is-outdated');
+                    enableUpdateBtns()
+                    localStorage.setItem('isLatestVersion', 'false');
+                    isLatestVersion = false;
+                }
+            }
+        }
+        currentTime = new Date().getTime();
+        localStorage.setItem('lastCheckTime', currentTime);
+    } catch (error) {
+        console.error(error);
+        disableUpdateBtn_enableCancelBtn()
+    }
+}
+
+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;
+    updateToast.style.setProperty('top', '0px');
+    showMask("update-toast");
+}
+function closeUpdateToast() {
+    updateToast.style.setProperty('top', '-600px');
+    showingUpdateInfo = false;
+    if (updatingInfoElement.classList.contains('hideK') === false) {
+        updatingInfoElement.classList.add('hideK');
+    }
+    document.querySelector('.chuanhu-mask')?.remove();
+}
+function manualCheckUpdate() {
+    openUpdateToast();
+    updateLatestVersion();
+    currentTime = new Date().getTime();
+    localStorage.setItem('lastCheckTime', currentTime);
+}
+function noUpdate(message="") {
+    localStorage.setItem('isLatestVersion', 'true');
+    isLatestVersion = true;
+    noUpdateHtml(message);
+}
+function noUpdateHtml(message="") {
+    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');
+    if (message === "") {
+        versionInfoElement.textContent = i18n(usingLatest_i18n)
+    } else {
+        versionInfoElement.innerHTML = message;
+    }
+    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 disableUpdateBtn_enableCancelBtn() {
+    document.querySelector('#update-button.btn-update').disabled = true;
+    document.querySelector('#cancel-button.btn-update').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);
+// }

assets/javascript/user-info.js

@@ -0,0 +1,70 @@
+
+// var userLogged = false;
+var usernameGotten = false;
+var usernameTmp = null;
+var username = null;
+
+
+function getUserInfo() {
+    if (usernameGotten) {
+        return;
+    }
+    // userLogged = localStorage.getItem('userLogged');
+    // if (userLogged) {
+    usernameTmp = userInfoDiv.innerText;
+    if (usernameTmp) {
+        if (usernameTmp.includes("getting user info")) {
+            setTimeout(getUserInfo, 500);
+            return;
+        } else if (usernameTmp === " ") {
+            localStorage.removeItem("username");
+            // localStorage.removeItem("userLogged")
+            // userLogged = false;
+            usernameGotten = true;
+            return;
+        } else {
+            usernameTmp = usernameTmp.match(/User:\s*(.*)/)[1] || usernameTmp;
+            localStorage.setItem("username", usernameTmp);
+            username = usernameTmp;
+            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};
+    let triggerElements = {userInfoDiv, statusDisplay};
+    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);
+        };
+    }
+}

assets/javascript/utils.js

@@ -0,0 +1,132 @@
+
+
+function isImgUrl(url) {
+    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp)$/i;
+    if (url.startsWith('data:image/')) {
+        return true;
+    }
+    if (url.match(imageExtensions)) {
+        return true;
+    }
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+        return true;
+    }
+
+    return false;
+}
+
+function downloadHistory(gradioUsername, historyname, format=".json") {
+    let fileUrl;
+    if (gradioUsername === null || gradioUsername.trim() === "") {
+        fileUrl = `/file=./history/${historyname}`;
+    } else {
+        fileUrl = `/file=./history/${gradioUsername}/${historyname}`;
+    }
+    downloadFile(fileUrl, historyname, format);
+}
+
+function downloadFile(fileUrl, filename = "", format = "", retryTimeout = 200, maxAttempts = 10) {
+
+    fileUrl = fileUrl + format;
+    filename = filename + format;
+
+    let attempts = 0;
+
+    async function tryDownload() {
+        if (attempts >= maxAttempts) {
+            console.error('Max attempts reached, download failed.');
+            alert('Download failed:' + filename);
+            return;
+        }
+        try {
+            const response = await fetch(fileUrl);
+            if (!response.ok) {
+                attempts++;
+                console.error("Error fetching file, retrying...");
+                setTimeout(tryDownload, retryTimeout);
+            } else {
+                response.blob()
+                    .then(blob => {
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = url;
+                        a.download = filename;
+                        document.body.appendChild(a);
+                        a.click();
+                        URL.revokeObjectURL(url);
+                        document.body.removeChild(a);
+                    })
+                    .catch(error => {
+                        console.error('Error downloading file:', error);
+                    });
+            }
+        } catch (error) {
+            attempts++;
+            setTimeout(tryDownload, retryTimeout);
+        }
+    }
+
+    tryDownload();
+}
+    
+function statusDisplayMessage(message) {
+    statusDisplayBlock = statusDisplay.querySelector("#status-display .md p");
+    statusDisplayBlock.innerText = message;
+}
+
+function bindFancyBox() {
+    Fancybox.bind('[data-fancybox]', {
+        Carousel: {
+            Panzoom: {
+                decelFriction: 0.5
+            }
+        }
+    });
+}
+
+
+/* NOTE: These reload functions are not used in the current version of the code.
+ *       From stable-diffusion-webui
+ */
+function restart_reload() {
+    document.body.innerHTML = '<h1 style="font-family:ui-monospace,monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
+
+    var requestPing = function () {
+        requestGet("./internal/ping", {}, function (data) {
+            location.reload();
+        }, function () {
+            setTimeout(requestPing, 500);
+        });
+    };
+
+    setTimeout(requestPing, 2000);
+
+    return [];
+}
+
+function requestGet(url, data, handler, errorHandler) {
+    var xhr = new XMLHttpRequest();
+    var args = Object.keys(data).map(function (k) {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
+    }).join('&');
+    xhr.open("GET", url + "?" + args, true);
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    var js = JSON.parse(xhr.responseText);
+                    handler(js);
+                } catch (error) {
+                    console.error(error);
+                    errorHandler();
+                }
+            } else {
+                errorHandler();
+            }
+        }
+    };
+    var js = JSON.stringify(data);
+    xhr.send(js);
+}

assets/javascript/webui.js

@@ -0,0 +1,333 @@
+
+function openSettingBox() {
+    chuanhuPopup.classList.add('showBox');
+    popupWrapper.classList.add('showBox');
+    settingBox.classList.remove('hideBox');
+    trainingBox.classList.add('hideBox');
+    showMask("box");
+
+}
+
+function openTrainingBox() {
+    chuanhuPopup.classList.add('showBox');
+    popupWrapper.classList.add('showBox');
+    trainingBox.classList.remove('hideBox');
+    settingBox.classList.add('hideBox');
+    showMask("box");
+}
+
+function openChatMore() {
+    chatbotArea.classList.add('show-chat-more');
+    showMask("chat-more");
+}
+
+function closeChatMore() {
+    chatbotArea.classList.remove('show-chat-more');
+    chatbotArea.querySelector('.chuanhu-mask')?.remove();
+}
+
+
+function showMask(obj) {
+    const mask = document.createElement('div');
+    mask.classList.add('chuanhu-mask');
+    if (obj == "box") {
+        mask.classList.add('mask-blur');
+        document.body.classList.add('popup-open');
+        popupWrapper.appendChild(mask);
+    } else if (obj == "chat-more") {
+        mask.classList.add('transparent-mask');
+        chatbotArea.querySelector('#chatbot-input-more-area').parentNode.appendChild(mask);
+    } else if (obj == "update-toast") {
+        mask.classList.add('chuanhu-top-mask');
+        if (document.querySelector('.chuanhu-top-mask')) {
+            for (var i = 0; i < document.querySelectorAll('.chuanhu-top-mask').length; i++) {
+                document.querySelectorAll('.chuanhu-top-mask')[i].remove();
+            }
+        }
+        document.body.appendChild(mask);
+        // mask.classList.add('transparent-mask');
+    }
+    
+
+    mask.addEventListener('click', () => {
+        if (obj == "box") {
+            closeBox();
+        } else if (obj == "chat-more") {
+            closeChatMore();
+        } else if (obj == "update-toast") {
+            closeUpdateToast();
+        }
+    });
+}
+
+function chatMoreBtnClick() {
+    if (chatbotArea.classList.contains('show-chat-more')) {
+        closeChatMore();
+    } else {
+        openChatMore();
+    }
+}
+
+function closeBtnClick(obj) {
+    if (obj == "box") {
+        closeBox();
+    } else if (obj == "toolbox") {
+        closeSide(toolbox);
+        wantOpenToolbox = false;
+    }
+}
+
+function closeBox() {
+    chuanhuPopup.classList.remove('showBox');
+    popupWrapper.classList.remove('showBox');
+    trainingBox.classList.add('hideBox');
+    settingBox.classList.add('hideBox');
+    document.querySelector('.chuanhu-mask')?.remove();
+    document.body.classList.remove('popup-open');
+}
+
+function closeSide(sideArea) {
+    document.body.classList.remove('popup-open');
+    sideArea.classList.remove('showSide');
+    if (sideArea == toolbox) {
+        chuanhuHeader.classList.remove('under-box');
+        chatbotArea.classList.remove('toolbox-open')
+        toolboxOpening = false;
+    } else if (sideArea == menu) {
+        chatbotArea.classList.remove('menu-open')
+        menuOpening = false;
+    }
+    adjustMask();
+}
+
+function openSide(sideArea) {
+    sideArea.classList.add('showSide');
+    if (sideArea == toolbox) {
+        chuanhuHeader.classList.add('under-box');
+        chatbotArea.classList.add('toolbox-open')
+        toolboxOpening = true;
+    } else if (sideArea == menu) {
+        chatbotArea.classList.add('menu-open')
+        menuOpening = true;
+    }
+    // document.body.classList.add('popup-open');
+}
+
+function menuClick() {
+    shouldAutoClose = false;
+    if (menuOpening) {
+        closeSide(menu);
+        wantOpenMenu = false;
+    } else {
+        if (windowWidth < 1024 && toolboxOpening) {
+            closeSide(toolbox);
+            wantOpenToolbox = false;
+        }
+        openSide(menu);
+        wantOpenMenu = true;
+    }
+    adjustSide();
+}
+
+function toolboxClick() {
+    shouldAutoClose = false;
+    if (toolboxOpening) {
+        closeSide(toolbox);
+        wantOpenToolbox = false;
+    } else {
+        if (windowWidth < 1024 && menuOpening) {
+            closeSide(menu);
+            wantOpenMenu = false;
+        }
+        openSide(toolbox);
+        wantOpenToolbox = true;
+    }
+    adjustSide();
+}
+
+var menuOpening = false;
+var toolboxOpening = false;
+var shouldAutoClose = true;
+var wantOpenMenu = windowWidth > 768;
+var wantOpenToolbox = windowWidth >= 1024;
+
+function adjustSide() {
+    if (windowWidth >= 1024) {
+        shouldAutoClose = true;
+        if (wantOpenMenu) {
+            openSide(menu);
+            if (wantOpenToolbox) openSide(toolbox);
+        } else if (wantOpenToolbox) {
+            openSide(toolbox);
+        } else {
+            closeSide(menu);
+            closeSide(toolbox);
+        }
+    } else if (windowWidth > 768 && windowWidth < 1024 ) {
+        shouldAutoClose = true;
+        if (wantOpenToolbox) {
+            if (wantOpenMenu) {
+                closeSide(toolbox);
+                openSide(menu);
+            } else {
+                closeSide(menu);
+                openSide(toolbox);
+            }
+        } else if (wantOpenMenu) {
+            if (wantOpenToolbox) {
+                closeSide(menu);
+                openSide(toolbox);
+            } else {
+                closeSide(toolbox);
+                openSide(menu);
+            }
+        } else if (!wantOpenMenu && !wantOpenToolbox){
+            closeSide(menu);
+            closeSide(toolbox);
+        }
+    } else { // windowWidth <= 768
+        if (shouldAutoClose) {
+            closeSide(menu);
+            // closeSide(toolbox);
+        }
+    }
+    checkChatbotWidth();
+    adjustMask();
+}
+
+function adjustMask() {
+    var sideMask = null;
+    if (!gradioApp().querySelector('.chuanhu-side-mask')) {
+        sideMask = document.createElement('div');
+        sideMask.classList.add('chuanhu-side-mask');
+        gradioApp().appendChild(sideMask);
+        sideMask.addEventListener('click', () => {
+            closeSide(menu);
+            closeSide(toolbox);
+        });
+    }
+    sideMask = gradioApp().querySelector('.chuanhu-side-mask');
+
+    if (windowWidth > 768) {
+        sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        setTimeout(() => {sideMask.style.display = 'none'; }, 100);
+        return;
+    }
+    // if (windowWidth <= 768)
+    if (menuOpening || toolboxOpening) {
+        document.body.classList.add('popup-open');
+        sideMask.style.display = 'block';
+        setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200);
+        sideMask.classList.add('mask-blur');
+    } else if (!menuOpening && !toolboxOpening) {
+        sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        setTimeout(() => {sideMask.style.display = 'none'; }, 100);
+    }
+}
+
+function checkChatbotWidth() {
+    // let chatbotWidth = chatbotArea.clientWidth;
+    // if (chatbotWidth > 488) {
+    if (windowWidth > 768) {
+        chatbotArea.classList.add('chatbot-full-width');
+    } else {
+        chatbotArea.classList.remove('chatbot-full-width');
+    }
+
+    if (windowWidth > 768) {
+        chatbotArea.classList.remove('no-toolbox');
+        chatbotArea.classList.remove('no-menu');
+
+        if (!chatbotArea.classList.contains('toolbox-open') && chatbotArea.classList.contains('menu-open')) {
+            chatbotArea.classList.add('no-toolbox');
+        } else if (!chatbotArea.classList.contains('menu-open') && chatbotArea.classList.contains('toolbox-open')) {
+            chatbotArea.classList.add('no-menu');
+        } else if (!chatbotArea.classList.contains('menu-open') && !chatbotArea.classList.contains('toolbox-open')) {
+            chatbotArea.classList.add('no-toolbox');
+            chatbotArea.classList.add('no-menu');
+        }
+    }
+
+    checkChatMoreMask();
+}
+
+function checkChatMoreMask() {
+    if (!chatbotArea.classList.contains('chatbot-full-width')) {
+        chatbotArea.querySelector('.chuanhu-mask')?.remove();
+        chatbotArea.classList.remove('show-chat-more');
+    }
+}
+
+function showKnowledgeBase(){
+    if (!toolboxOpening) {
+        toolboxClick();
+    }
+    switchToolBoxTab(0);
+    let knoledgeBaseAccordion = gradioApp().querySelector('#gr-kb-accordion');
+    let knoledgeBase = knoledgeBaseAccordion.querySelector('#upload-index-file');
+    if (knoledgeBase.parentElement.parentElement.style.display == 'none') {
+        knoledgeBaseAccordion.querySelector('.label-wrap')?.click();
+    }
+    // 将 knoledgeBase 滚动到可见区域
+    setTimeout(() => {knoledgeBaseAccordion.scrollIntoView({ behavior: "smooth"}); }, 100);
+    letThisSparkle(knoledgeBase, 5000);
+}
+
+function letThisSparkle(element, sparkleTime = 3000) {
+    element.classList.add('chuanhu-sparkle');
+    setTimeout(() => {element.classList.remove('chuanhu-sparkle');}, sparkleTime);
+}
+
+function switchToolBoxTab(tabIndex) {
+    let tabButtons = gradioApp().querySelectorAll('#chuanhu-toolbox-tabs .tab-nav > button');
+    let tab = tabButtons[tabIndex];
+    tab.click();
+}
+
+/*
+function setHistroyPanel() {
+    const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+    const historyPanel = document.createElement('div');
+    historyPanel.classList.add('chuanhu-history-panel');
+    historySelector.parentNode.insertBefore(historyPanel, historySelector);
+    var historyList=null;
+
+    historySelectorInput.addEventListener('click', (e) => {
+        e.stopPropagation();
+        historyList = gradioApp().querySelector('#history-select-dropdown ul.options');
+
+        if (historyList) {
+            // gradioApp().querySelector('.chuanhu-history-panel')?.remove();
+            historyPanel.innerHTML = '';
+            let historyListClone = historyList.cloneNode(true);
+            historyListClone.removeAttribute('style');
+            // historyList.classList.add('hidden');
+            historyList.classList.add('hideK');
+            historyPanel.appendChild(historyListClone);
+            addHistoryPanelListener(historyPanel);
+            // historySelector.parentNode.insertBefore(historyPanel, historySelector);
+        }
+    });
+}
+*/
+
+// function addHistoryPanelListener(historyPanel){
+//     historyPanel.querySelectorAll('ul.options > li').forEach((historyItem) => {
+//         historyItem.addEventListener('click', (e) => {
+//             const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+//             const historySelectBtn = gradioApp().querySelector('#history-select-btn');
+//             historySelectorInput.value = historyItem.innerText;
+//             historySelectBtn.click();
+//         });
+//     });
+// }
+
+
+// function testTrain() {
+    
+//     trainBody.classList.toggle('hide-body');
+//     trainingBox.classList.remove('hideBox');
+
+//     var chuanhuBody = document.querySelector('#chuanhu-body');
+//     chuanhuBody.classList.toggle('hide-body');
+// }

assets/stylesheet/ChuanhuChat.css

@@ -0,0 +1,1234 @@
+:root {
+    --vh: 1vh;
+
+    --chatbot-color-light: #000000;
+    --chatbot-color-dark: #FFFFFF;
+    --chatbot-background-color-light: #F3F3F3;
+    --chatbot-background-color-dark: #121111;
+    --message-user-background-color-light: #52b7e3;
+    --message-user-background-color-dark: #1140d8;
+    --message-bot-background-color-light: #FFFFFF;
+    --message-bot-background-color-dark: #2C2C2C;
+    --switch-checkbox-color-light: #e5e7eb;
+    --switch-checkbox-color-dark: #515151;
+
+    --chatbot-blur-background-color: #F3F3F366;
+    --chatbot-input-background-color: rgba(255, 255, 255, 0.64);
+    --chatbot-input-more-background-color: #FFFFFFAA;
+    --chatbot-input-more-background-solid-color: #FFFFFF;
+    --chatbot-input-more-background-fullwidth-hover: #FFFFFF99;
+    --chatbot-input-more-background-mobilewidth-hover: #E6E6E644;
+
+    --message-list-background-hover: #F3F3F3;
+    --message-list-background-selected: #EAEAEA;
+
+    --menu-width: 320px;
+    --menu-background-fill: var(--background-fill-primary);
+
+    --toolbox-width: 280px;
+    --toolbox-background-fill: var(--background-fill-secondary);
+
+    --dragging-hint-background-color: #F9F9F9BB;
+    
+    .dark {
+        --chatbot-blur-background-color: #12111166;
+        --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
+        --chatbot-input-more-background-color: #3C3C3CAA;
+        --chatbot-input-more-background-solid-color: #3C3C3C;
+        --chatbot-input-more-background-fullwidth-hover: #2F2F2F88;
+        --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
+
+        --message-list-background-hover: #202020;
+        --message-list-background-selected: #2F3030;
+
+        --dragging-hint-background-color: #515151BB;
+    }
+}
+
+
+body.popup-open {
+    overflow: hidden;
+}
+
+.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: 4px;
+    white-space: nowrap;
+    flex-direction: row;
+    display: inline-flex;
+    align-items: center;
+    position: absolute;
+}
+#description {
+    text-align: center;
+    /* margin: 32px 0 4px 0; */
+}
+#about-tab {
+    text-align: center;
+}
+#about-tab img {
+    margin: 0 auto;
+}
+
+/* 高级页面 */
+#advanced-warning {
+    margin-top: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: center;
+}
+
+#netsetting-warning hr {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+}
+
+.view-only-textbox textarea {
+    -webkit-text-fill-color: darkgray !important;
+    cursor: not-allowed !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 0;
+    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 */
+#chuanhu-header > #status-display {
+    display: flex;
+    min-height: 2em;
+    align-items: flex-end;
+    justify-content: flex-end;
+    transition: all 0.6s;
+    max-width: 50%;
+    height: 100%;
+    bottom: 0;
+    position: absolute;
+    
+    @media screen and (max-width: 639px) {
+        right: 16px;
+        right: max(16px, env(safe-area-inset-right));
+    }
+    @media screen and (min-width: 640px) {
+        right: 24px;
+        right: max(24px, env(safe-area-inset-right));
+    }
+}
+#chuanhu-header > #status-display #status-display {
+    min-height: unset;
+}
+#chuanhu-header > #status-display > .wrap {
+    margin-top: 8px;
+}
+#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);
+}
+
+#chatbot-ctrl-btns {
+    align-self: end;
+    max-width: 42px;
+}
+#submit-btn, #cancel-btn {
+    height: 42px !important;
+    width: 42px !important;
+    border-radius: 50%;
+    transform: scale(0.8);
+    justify-content: center;
+    align-items: center;
+}
+#submit-btn::before {
+    content: url("data:image/svg+xml, %3Csvg width='21px' height='21px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' %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;
+    width: 21px;
+    position: relative;
+    left: 2px;
+}
+#cancel-btn::before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34px' height='34px' fill='%23ff453a' fill-opacity='0.85'%3E%3Cg%3E%3Cpath d='M16.8954 33.7909C26.1546 33.7909 33.8049 26.1546 33.8049 16.8954C33.8049 7.63629 26.1406 0 16.8814 0C7.63629 0 0 7.63629 0 16.8954C0 26.1546 7.65027 33.7909 16.8954 33.7909ZM16.8954 29.7737C9.76412 29.7737 4.04511 24.0407 4.04511 16.8954C4.04511 9.75014 9.75014 4.01713 16.8814 4.01713C24.0267 4.01713 29.7737 9.75014 29.7737 16.8954C29.7737 24.0407 24.0407 29.7737 16.8954 29.7737Z'/%3E%3Cpath d='M12.7957 22.7421L20.9747 22.7421C22.0532 22.7421 22.7346 22.1007 22.7346 21.0688L22.7346 12.709C22.7346 11.6771 22.0532 11.0358 20.9747 11.0358L12.7957 11.0358C11.7032 11.0358 11.0358 11.6771 11.0358 12.709L11.0358 21.0688C11.0358 22.1007 11.7032 22.7421 12.7957 22.7421Z'/%3E%3C/g%3E%3C/svg%3E");
+    height: 34px;
+    width: 34px;
+}
+
+#chatbot-buttons button {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* masks */
+.chuanhu-mask, .chuanhu-side-mask {
+    /* background-color: gray; */
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    /* background-color: transparent; */
+}
+/* .chuanhu-mask {
+    background-color: rgba(0, 0, 0, 0.5);
+    /* -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px); 
+} */
+.mask-blur {
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+}
+.transparent-mask {
+    background-color: transparent !important;
+}
+
+.chuanhu-side-mask {
+    background-color: rgba(0, 0, 0, 0);
+}
+.chuanhu-top-mask {
+    /* background-color: rgba(0, 0, 0, 0.0); */
+    z-index: 10001;
+}
+
+
+#popup-wrapper {
+    display: none;
+    position: fixed;
+    overflow: auto;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+}
+#popup-wrapper.showBox {
+    display: grid;
+    place-items: center;
+}
+
+#chuanhu-popup {
+    display: none;
+    z-index: 99999;
+    width: 680px;
+    height: 400px;
+    padding: 0;
+}
+#chuanhu-popup.showBox {
+    display: block;
+    box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2);
+}
+
+#chuanhu-popup > .gradio-box {
+    padding: 0;
+}
+.hideBox {
+    display: none;
+}
+
+
+#chuanhu-header {
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    /* padding: 6px 64px; */
+    height: 65px;
+    background: var(--background-fill-primary);
+    border-bottom: 1px solid var(--border-color-primary);
+
+    @media screen and (max-width: 639px) {
+        padding: 6px 16px;
+        padding-left: max(16px, env(safe-area-inset-left));
+        padding-right: max(16px, env(safe-area-inset-right));
+    }
+    @media screen and (min-width: 640px) {
+        padding: 6px 24px;
+        padding-left: max(24px, env(safe-area-inset-left));
+        padding-right: max(24px, env(safe-area-inset-right));
+    }
+    /* @media screen and (min-width: 1024px) {
+        padding: 6px 96px;
+    } */
+}
+#chuanhu-header.under-box {
+    z-index: 995 !important;
+}
+
+#chuanhu-body {
+    flex-wrap: nowrap;
+    gap: 0;
+    overflow: hidden;
+    display: inline-flex;
+    justify-content: space-between;
+    /* margin-top: 54px; */
+    /* height: calc(100*var(--vh) - 72px); */
+    position: absolute;
+    top: 65px;
+    height: calc(100*var(--vh) - 65px);
+}
+
+#chuanhu-area {
+    flex: unset;
+    width: 100%;
+    flex-wrap: nowrap;
+    justify-content: center;
+    overflow: hidden;
+    flex-direction: row;
+    /* padding-inline: 24px; */
+    /* margin: 16px; */
+    /* border-radius: 24px; */
+    background: var(--chatbot-background-color-light);
+}
+.dark #chuanhu-area {
+    background: var(--chatbot-background-color-dark);
+}
+#chatbot-header {
+    justify-content: space-between;
+    border-bottom: 0.5px solid var(--border-color-primary);
+    height: 60px;
+    padding-inline: 20px 16px;
+    gap: 0;
+    position: absolute;
+    top: 0;
+    right: 4px;
+    width: calc(100% - 4px);
+    z-index: 50;
+    background: var(--chatbot-blur-background-color);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+
+#chatbot-header .gradio-dropdown {
+    max-width: 14em;
+    background: none;
+    height: 60px;
+    overflow: unset !important;
+}
+#chatbot-header .gradio-dropdown > label {
+    display: flex;
+}
+#chatbot-header .gradio-dropdown ul.options {
+    top: 60px !important;
+    left: 0 !important;
+    position: absolute !important;
+}
+#chatbot-header .gradio-dropdown > label > span[data-testid="block-info"] {
+    height: unset;
+    overflow: visible;
+    top: 0;
+    align-self: center;
+    background: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: auto;
+    color: var(--body-text-color-subdued);
+}
+#chatbot-header .gradio-dropdown > label > .wrap {
+    background: none;
+    box-shadow: none;
+    padding-left: 8px;
+}
+#model-select-dropdown > label > span[data-testid="block-info"]  {
+    display: none;
+}
+#chatbot-header .gradio-dropdown > label > .wrap input {
+    font-weight: bold;
+}
+#chatbot-header #model-select-dropdown > label::before {
+    content: "";
+    background: var(--primary-600);
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    position: absolute;
+    /* left: 2px; */
+    top: calc(50% - 6px);
+}
+
+#chatbot-header-btn-bar {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    height: 60px;
+}
+#chatbot-header-btn-bar > * {
+    width: 100%;
+}
+#header-btn-groups {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+/* #header-btn-group {
+    justify-content: space-between;
+    display: flex;
+    height: 36px;
+    align-items: center;
+} */
+.show-on-gpt {
+    /* visibility: hidden; */
+    display: none;
+}
+.is-gpt .show-on-gpt {
+    /* visibility: visible; */
+    display: block;
+}
+
+#chatbot-footer {
+    position: absolute;
+    bottom: 0;
+    right: 4px;
+    width: calc(100% - 4px);
+    display: flex;
+    justify-content: center;
+    /* padding: 24px; */
+    /* padding: 8px 6px; */
+    min-height: 82px;
+    /* max-height: 166px; */
+    z-index: 2;
+    background: var(--chatbot-blur-background-color);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+}
+
+#chatbot-input-box {
+    max-width: 800px;
+    /* margin: 0 auto; */
+    gap: 20px;
+    padding: 16px 16px 24px;
+    padding-bottom: max(24px, calc( env(safe-area-inset-bottom) + 6px));
+    display: flex;
+    background: none;
+    align-self: end;
+}
+
+#chatbot-input-btn-bar {
+    height: 27px;
+    overflow-y: auto;
+    flex-wrap: nowrap;
+}
+
+button.chatbot-input-more-btn {
+    margin: 5px;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    z-index: 1001;
+}
+button.chatbot-input-more-btn:hover .sm-round-bg {
+    fill-opacity: 0.2125;
+}
+button.chatbot-input-more-btn:active .sm-round-bg {
+    fill-opacity: 0.25;
+}
+
+/* 三个点号点开！ */
+.show-chat-more #chatbot-input-more-area {
+    display: flex;
+}
+@supports (-webkit-backdrop-filter: blur(24px)) {
+    /* Note: I would only try this feat on apple devices... */
+    .show-chat-more #chatbot-input-more-area {
+        background: var(--chatbot-input-more-background-color);
+        -webkit-backdrop-filter: blur(24px);
+        backdrop-filter: blur(24px);
+    }
+}
+/* no！屏幕宽度窄的时候！ */
+#chatbot-input-more-area {
+    display: none;
+    position: absolute;
+    flex-direction: column;
+    bottom: 60px;
+    min-width: 120px;
+    z-index: 1001;
+    border-radius: 6px;
+    box-shadow: var(--shadow-sm);
+    background: var(--chatbot-input-more-background-solid-color);
+}
+#chatbot-input-more-area > span > div {
+    min-width: 120px;
+    padding: 2px;
+    align-content: center;
+    /* display: flex; */
+    border-bottom: 0.5px solid var(--border-color-primary);
+}
+#chatbot-input-more-area > span > div.last-btn {
+    border-bottom: none;
+}
+#chatbot-input-more-area > span > div > label {
+    padding: 6px 8px;
+    border-radius: 4px;
+    height: 39px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+#chatbot-input-more-area > span > div:hover > label {
+    background: var(--chatbot-input-more-background-mobilewidth-hover);
+}
+#chatbot-input-more-area > span > div > label button {
+    margin: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4px;
+}
+.chatbot-input-more-icon {
+    margin-right: 12px;
+}
+.chatbot-input-more-span {
+    white-space: nowrap;
+}
+
+/* 哈哈！川虎哥觉得不方便，那再写个全宽的吧！
+ * 再让我重写一份样式我是狗
+ */
+.chatbot-full-width #chatbot-input-row {
+    flex-direction: column;
+    justify-content: flex-start !important;
+    justify-items: start;
+}
+.chatbot-full-width #chatbot-input-more-area {
+    display: flex;
+    position: relative;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    height: 32px;
+    min-width: unset;
+    background: none;
+    box-shadow: none;
+    bottom: 0;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div {
+    /* min-width: unset; */
+    border-bottom: none;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div > label {
+    height: 32px;
+    border-radius: 8px;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div:hover > label {
+    background: var(--chatbot-input-more-background-fullwidth-hover);
+}
+.chatbot-full-width #chatbot-input-more-btn-div {
+    display: none;
+}
+.chatbot-full-width #chatbot-input-box {
+    padding-top: 4px;
+}
+.chatbot-full-width #chatbot-input-row .gradio-html {
+    width: 100%;
+    max-width: unset;
+}
+.chatbot-full-width .chatbot-input-more-label-group {
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    display: inline-flex;
+}
+.chatbot-input-more-span {
+    opacity: 0.64;
+}
+input:checked + .chatbot-input-more-span {
+    opacity: 1;
+}
+
+#uploaded-files-btn {
+    display: none;
+}
+.with-file #uploaded-files-btn {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+/* .with-file label.may-disable-label {
+    cursor: not-allowed !important;
+} */
+.with-file #uploaded-files-btn > .chatbot-input-more-span {
+    opacity: 1;
+}
+#uploaded-files-count {
+    background: var(--primary-600);
+    color: white;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    margin-right: 4px;
+    margin-left: 6px;
+    text-align: center;
+}
+.with-file #upload-files-btn {
+    display: none;
+}
+
+/* default invisible */
+#menu-area, #toolbox-area {
+    width: 0;
+    transition: width 0.3s ease;
+    visibility: hidden;
+    flex: unset;
+    min-width: unset !important;
+    display: flex;
+    flex-shrink: 0;
+    overflow: hidden;
+    flex-wrap: nowrap;
+}
+#menu-area {
+    border-radius: 0;
+    background: var(--background-fill-primary);
+}
+#toolbox-area {
+    background: var(--background-fill-secondary);
+}
+#menu-area > div {
+    width: var(--menu-width);
+}
+#chuanhu-history {
+    padding-left: env(safe-area-inset-left);
+}
+#menu-area.showSide {
+    width: var(--menu-width);
+    max-width: var(--menu-width);
+    height: calc(100*var(--vh) - 65px);
+    visibility: visible;
+    /* margin-right: 16px; */
+    border-right: 0.5px solid var(--border-color-primary);
+    /* box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.1) inset; */
+}
+
+#toolbox-area > div {
+    width: var(--toolbox-width);
+}
+#toolbox-area.showSide {
+    width: var(--toolbox-width);
+    height: calc(100*var(--vh) - 65px);
+    visibility: visible;
+    /* margin-left: 16px; */
+}
+
+/* When screen width <= 768 */
+@media screen and (max-width: 767px) {
+    #menu-area {
+        position: fixed;
+        transition: left 0.3s ease, visibility 0.1s ease;
+        left: calc(0px - var(--menu-width));
+        z-index: 9999;
+        /* overflow: unset; */
+        border-right: none !important;
+    }
+    #chuanhu-history {
+        padding-left: 0;
+    }
+    #menu-area.showSide {
+        left: 0;
+    }
+
+    #toolbox-area {
+        position: fixed;
+        width: 100vw;
+        transition: top 0.3s ease, visibility 0.1s ease;
+        /* right: calc(0px - var(--toolbox-width)); */
+        z-index: 10008;
+        overflow: unset;
+        top: calc(100*var(--vh));
+        margin: 0;
+    }
+    #toolbox-area > div {
+        width: 100vw;
+        height: calc( 90*var(--vh) - 48px );
+    }
+    #toolbox-area.showSide {
+        width: 100vw;
+        right: 0;
+        top: calc( 10*var(--vh) + 48px );
+        margin: 0;
+        border-radius: 6px;
+        box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2);
+    }
+    /* #menu-area.showSide, #toolbox-area.showSide {
+        z-index: 9999;
+    } */
+}
+
+/* .chuanhu-history-panel ul.options {
+    position: relative;
+    box-shadow: unset;
+    overflow: hidden;
+} */
+/* .chuanhu-history-panel {
+    height: 500px;
+    overflow: auto;
+    box-shadow: var(--shadow-drop-lg);
+} */
+
+#chuanhu-popup > .gradio-box {
+    height: 100%;
+}
+#chuanhu-popup > .gradio-box > .gradio-row:first-of-type {
+    padding: 24px !important;
+    border-bottom: 1.8px solid var(--border-color-primary);
+}
+#toolbox-area > .gradio-box > .gradio-row:first-of-type * ,
+#chuanhu-popup > .gradio-box > .gradio-row:first-of-type * {
+    margin: 0;
+}
+
+#toolbox-area > .gradio-box > .gradio-row > .close-btn,
+#chuanhu-popup > .gradio-box > .gradio-row > .close-btn {
+    max-width: 28px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+
+#chuanhu-popup > .gradio-box > .gradio-tabs {
+    display: block;
+    height: 322px;
+    /* margin: 16px 24px; */
+}
+
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tabitem {
+    border: none;
+    border-radius: 0;
+    overflow: auto;
+    height: 100%;
+    padding: 16px 24px;
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav {
+    float: left;
+    display: block;
+    border: none;
+    padding: 16px;
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+    background: var(--background-fill-secondary);
+    border-bottom-left-radius: var(--block-radius);
+    border-right: 1px solid var(--border-color-primary);
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button {
+    display: block;
+    border: none;
+    border-radius: 6px;
+    text-align: left;
+    white-space: initial;
+    width: 100%;
+    /* height: 32px; */
+    padding: 7px 12px;
+}
+#chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
+    background-color: var(--button-primary-background-fill);
+    /* font-weight: bold; */
+    color: var(--button-primary-text-color);
+}
+
+/* 这是为了第二级tab的选项，比如training里的openai tab下的几个准备数据集tab */
+.gradio-box > .gradio-tabs .gradio-tabs > div.tab-nav > button.selected {
+    background-color: var(--block-background-fill);
+}
+
+/* 小屏幕的tab样式 */
+@media screen and (max-width: 767px) {
+    #popup-wrapper.showBox {
+        place-items: end;
+    }
+    #chuanhu-popup {
+        width: 100vw;
+        height: calc( 90*var(--vh) - 48px );
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    #toolbox-area > .gradio-box > .gradio-row:first-of-type,
+    #chuanhu-popup > .gradio-box > .gradio-row:first-of-type {
+        padding: 18px 24px 0 !important;
+        border-bottom: 0;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs,
+    #chuanhu-popup > .gradio-box > .gradio-tabs {
+        height: auto;
+        width: 100vw;
+        overflow: hidden;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tabitem,
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tabitem {
+        height: calc( 90*var(--vh) - 48px - 46px - 45px );
+        overflow-x: auto;
+        border: none;
+    }
+    /* 下面是弃用方案：横条按钮tab */
+    /* 
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav {
+        display: flex;
+        margin: 0;
+        padding: 12px 16px 8px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        border-radius: 8px;
+        gap: 12px;
+        width: 100%;
+        height: auto;
+        background: none;
+    }
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button {
+        display: inline-block;
+        border-style: none;
+        border-radius: 6px;
+        white-space: nowrap;
+        width: auto;
+        padding: 7px 32px;
+        text-align: center;
+        background: var(--background-fill-secondary);
+    }
+    */
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav,
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav {
+        display: flex;
+        margin: 0;
+        padding: 6px 16px 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        border-radius: 0;
+        gap: 12px;
+        width: 100%;
+        height: auto;
+        background: none;
+        border-bottom: 1px solid var(--border-color-primary);
+        align-items: baseline;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button,
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button {
+        display: inline-block;
+        position: relative;
+        padding: 7px 6px;
+        border: none;
+        white-space: nowrap;
+        width: auto;
+        text-align: center;
+        background: none;
+        transition: font-size 0.3s ease-in-out;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected,
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
+        background-color: unset !important;
+        font-weight: bold;
+        font-size: large;
+        color: var(--body-text-color);
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected::after,
+    #chuanhu-popup > .gradio-box > .gradio-tabs > div.tab-nav > button.selected::after {
+        content: "";
+        background-color: var(--primary-600);
+        height: 4px;
+        width: 32%;
+        border-radius: 4px;
+        position: absolute;
+        left: 50%;
+        bottom: 1px;
+        transform: translateX(-50%);
+    }
+}
+
+/* 下面是大屏幕的 toolbox tab 样式 */
+@media screen and (min-width: 768px) {
+    #toolbox-area {
+        border-left: 1px solid var(--border-color-primary);
+    }
+    #toolbox-area > .gradio-box {
+        border-radius: 0;
+    }
+    #toolbox-area > .gradio-box > .gradio-row > .close-btn {
+        display: none;
+    }
+    #toolbox-area > .gradio-box > .gradio-row:first-of-type {
+        display: none;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs{
+        height: 100%;
+        width: var(--toolbox-width);
+        overflow: hidden;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tabitem {
+        height: calc(100% - 35px);
+        overflow-y: auto;
+        border-style: none;
+        padding-block: 0;
+        padding-left: 4px;
+        /* 理论上不该是0，但这里考虑内部gradio有好多container有padding了 */
+        padding-right: max(4px, env(safe-area-inset-right));
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav {
+        display: flex;
+        margin: 0;
+        /* padding: 4px; */
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        /* border-radius: 10px; */
+        /* gap: 4px; */
+        width: 100%;
+        height: auto;
+        background: var(--button-secondary-background-fill);
+        border-bottom: 1px solid var(--border-color-primary);
+        border:none;
+        align-items: baseline;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button {
+        display: inline-block;
+        position: relative;
+        padding: 8px 2rem;
+        border: none;
+        white-space: nowrap;
+        width: auto;
+        text-align: center;
+        background: var(--button-secondary-background-fill);
+        transition: font-size 0.3s ease-in-out;
+        border-right: 1px var(--border-color-primary) solid;
+        border-radius: 0;
+    }
+    #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav > button.selected {
+        background-color: var(--block-background-fill);
+        font-weight: bold;
+        /* border-top-left-radius: 8px;
+        border-top-right-radius: 8px; */
+        /* font-size: large; */
+        /* color: white; */
+    }
+}
+
+#toolbox-area > .gradio-box {
+    padding: 0;
+    height: 100%;
+}
+/* 
+#toolbox-area > .gradio-box > .gradio-tabs > div.tabitem {
+    padding: 0;
+    理论上不该是0，但这里考虑内部gradio有好多container有padding了 
+} 
+*/
+#toolbox-area .tabitem > div > .gradio-markdown:not(.hr-line) {
+    padding: 12px;
+}
+
+/* #toolbox-area .tabitem > div > .gradio-accordion > .label-wrap {
+    padding-inline: 12px;
+} */
+#toolbox-area .tabitem > div > .gradio-accordion > .label-wrap > span {
+    font-weight: bold;
+}
+#toolbox-area .tabitem > div {
+    gap: 0 !important;
+}
+
+#toolbox-area .tabitem > div > .gradio-accordion > div div.block.padded {
+    padding-inline: 0 !important;
+}
+#toolbox-area .tabitem > div > .gradio-accordion > div > div.gap{
+    gap: 0 !important;
+}
+/* #chuanhu-popup ul.options {
+    transform: translate(-50%, -50%);
+} */
+
+#chuanhu-history {
+    max-height: calc(100*var(--vh) - 65px - 61px);
+    max-height: calc(100*var(--vh) - 65px - calc(36px + 12px + max(12px, env(safe-area-inset-bottom)) + 1px ));
+    /* overflow-y: auto; */
+}
+#chuanhu-history > div {
+    border-radius: 0;
+    background: none;
+    height: 100%;
+    padding: 0;
+}
+#chuanhu-history > div > div {
+    padding-inline: 12px;
+}
+#chuanhu-history-header {
+    margin-top: 12px;
+    height: 42px;
+    margin-bottom: 12px;
+}
+#chuanhu-history-search-row {
+    gap: 0;
+    /* background:var(--input-background-fill); */
+    /* border-radius: var(--block-radius); */
+    justify-content: space-between;
+    display: flex;
+}
+#history-search-tb {
+    background:var(--input-background-fill);
+    border-radius: var(--block-radius);
+}
+#history-search-tb > label::before {
+    content: url("data:image/svg+xml,%3Csvg fill='gray' fill-opacity='0.64' width='18px' height='18px' viewBox='0 0 18.0938 18.2695' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M0 7.45312C0 11.5664 3.33984 14.8945 7.45312 14.8945C9.03516 14.8945 10.4883 14.4023 11.6953 13.5586L16.0547 17.9297C16.3008 18.1641 16.6055 18.2695 16.9219 18.2695C17.6016 18.2695 18.0938 17.7539 18.0938 17.0742C18.0938 16.7461 17.9648 16.4531 17.7656 16.2305L13.4297 11.8828C14.3555 10.6406 14.8945 9.11719 14.8945 7.45312C14.8945 3.33984 11.5664 0 7.45312 0C3.33984 0 0 3.33984 0 7.45312ZM1.80469 7.45312C1.80469 4.32422 4.32422 1.80469 7.45312 1.80469C10.5703 1.80469 13.1016 4.32422 13.1016 7.45312C13.1016 10.5703 10.5703 13.1016 7.45312 13.1016C4.32422 13.1016 1.80469 10.5703 1.80469 7.45312Z'/%3E%3C/g%3E%3C/svg%3E");
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    padding: 3px 0 3px 3px;
+    left: 7px;
+}
+#history-search-tb textarea {
+    width: calc(100% - 32px);
+    margin-left: 32px;
+    padding-left: 6px;
+    box-shadow: none;
+}
+#chuanhu-history-body {
+    height: calc(100% - 66px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 6px;
+}
+#gr-history-header-btns {
+    max-height: 42px;
+    gap: 4px;
+    display: flex;
+    justify-content: end;
+    align-content: center;
+    flex-direction: row;
+    max-width: 52px;
+    margin-inline: 8px;
+}
+#gr-history-header-btns button {
+    box-shadow: none;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+    display: flex;
+}
+
+#chuanhu-menu-footer {
+    position: absolute;
+    bottom: 0;
+    background: var(--background-fill-primary);
+    height: auto;
+    overflow: hidden;
+    padding: 12px 18px;
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+    padding-left: max(18px, env(safe-area-inset-left));
+    border-top: 0.8px solid var(--border-color-primary);
+}
+#menu-footer-btn-bar {
+    justify-content: space-between;
+    display: flex;
+    height: 36px;
+    align-items: center;
+}
+.btn-bar-group {
+    gap: 6px;
+    display: inline-flex;
+}
+.chuanhu-ui-btn {
+    border-radius: 8px;
+    /* color: rgba(120, 120, 120, 0.64) !important; */
+    padding: 6px !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    transition: background-color .2s ease;
+}
+.chuanhu-ui-btn:hover {
+    background-color: rgba(167, 167, 167, 0.25) !important;
+    /* color: unset !important; */
+}
+.chuanhu-ui-btn:active {
+    background-color: rgba(167, 167, 167, 0.5) !important;
+}
+
+.hover-round-btn {
+    border-radius: 50% !important;
+}
+
+.show-on-light {
+    display: block;
+}
+.show-on-dark {
+    display: none;
+}
+.dark .show-on-light {
+    display: none;
+}
+.dark .show-on-dark {
+    display: block;
+}
+
+.show-on-latest {
+    display: block;
+}
+.show-on-outdated {
+    display: none;
+}
+.is-outdated .show-on-latest {
+    display: none;
+}
+.is-outdated .show-on-outdated {
+    display: block;
+}
+
+.disable-update #chuanhu-manual-check-btn {
+    display: none;
+}
+
+#chatbot-area.no-menu #chatbot-header {
+    padding-left: max(20px, env(safe-area-inset-left));
+}
+#chatbot-area.no-menu #chatbot-area {
+    padding-left: env(safe-area-inset-left);
+}
+#chatbot-area.no-menu #chatbot-input-box {
+    padding-left: max(16px, env(safe-area-inset-left));
+}
+#chatbot-area.no-menu #chuanhu-chatbot>.wrapper>.wrap {
+    padding-left: max(20px, env(safe-area-inset-left));
+}
+
+#chatbot-area.no-toolbox #chatbot-header {
+    padding-right: max(16px, env(safe-area-inset-right));
+}
+#chatbot-area.no-toolbox #chatbot-area {
+    padding-right: env(safe-area-inset-right);
+}
+#chatbot-area.no-toolbox #chatbot-input-box {
+    padding-right: max(16px, env(safe-area-inset-right));
+}
+#chatbot-area.no-toolbox #chuanhu-chatbot>.wrapper>.wrap {
+    padding-right: max(20px, env(safe-area-inset-right));
+}
+
+
+/* #history-select-wrap {
+    height: 600px;
+    overflow: auto;
+    overflow-x: hidden;
+} */
+
+.chat-selected-btns {
+    height: 18px;
+    gap: 8px;
+    display: inline-flex;
+    position: absolute;
+    right: 16px;
+}
+.chat-selected-btns::before {
+    content: "";
+    position: absolute;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--message-list-background-selected) 80%);
+    width: 32px;
+    height: 22px;
+    top: 0;
+    left: -32px;
+}
+.icon-need-hover {
+    opacity: 0.64;
+}
+button:hover .icon-need-hover, button:hover.icon-need-hover {
+    opacity: 0.85;
+}
+button:active .icon-need-hover, button:active.icon-need-hover {
+    opacity: 1;
+}
+
+.chuanhu-sparkle >::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
+    animation: border-pulse 2s cubic-bezier(.5,0,.5,1) infinite;
+    border: 2px solid var(--color-accent) !important;
+    border-radius: 4px;
+    pointer-events: none;
+}
+/* .chuanhu-sparkle {
+    animation: content-pulse 1s cubic-bezier(.5,0,.5,1) infinite;
+} */
+@keyframes border-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.1;
+    }
+}
+
+/* .main-body {
+    flex-wrap: nowrap;
+    gap: 0;
+    overflow: hidden;
+    display: inline-flex;
+    /* margin-top: 54px; */
+    /* height: calc(100*var(--vh) - 72px); */
+    /* position: absolute;
+    top: 48px;
+} */
+/* 
+.hide-body {
+    display: none;
+    top: calc(-100*var(--vh));
+    
+}
+#train-body {
+    transition: top 0.3s ease-in-out, display 0.3s ease;
+}
+
+#chuanhu-body.hide-body {
+    display: none;
+    top: calc(100*var(--vh) + 48px);
+}
+#chuanhu-body {
+    transition: top 0.3s ease-in-out, display 0.3s ease;
+}  */
+

assets/stylesheet/chatbot.css

@@ -0,0 +1,395 @@
+
+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 12px;
+}
+.raw-message p.agent-prefix + p.agent-prefix {
+    margin-top: -1.2em !important;
+}
+.md-message p.agent-prefix + p.agent-prefix {
+    margin-top: -1.8em !important;
+}
+.agent-prefix::before {
+    content: '🐯';
+    filter: grayscale();
+    padding: 0 4px;
+}
+
+/* 阻止generating时的border */
+#chuanhu-chatbot > .wrap {
+    border: none !important;
+}
+
+
+
+#chatbot-input-row {
+    align-items: end;
+    gap: 6px;
+}
+#chatbot-input-row .gradio-html {
+    min-width: 0;
+    max-width: 42px;
+    width: 42px;
+}
+#chatbot-input-tb-row {
+    gap: 0;
+    justify-content: end;
+    border-radius: 21px;
+    background: var(--chatbot-input-background-color);
+    box-shadow: var(--shadow-md);
+}
+#user-input-tb {
+    padding: 0 !important;
+    /* border: 1px solid rgba(167, 167, 167, 0.5) !important; */
+    /* border-radius: 21px !important; */
+}
+#user-input-tb textarea {
+    /* max-height: 110px; */
+    background: transparent;
+}
+#user-input-tb .wrap {
+    background: none !important;
+    border-radius: 21px !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;
+}
+
+/* 对话气泡 */
+.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: calc(85% - 40px);
+    border-bottom-left-radius: 0 !important;
+}
+[data-testid = "user"] {
+    max-width: calc(85% - 40px);
+    width: auto !important;
+    border-bottom-right-radius: 0 !important;
+}
+.message-row {
+    align-self: unset !important;
+}
+.message-row.user-row {
+    justify-content: flex-end;
+}
+
+/* .message-row.has-message-btn-row{
+    padding-bottom: 19px !important;
+} */
+
+/* 屏幕宽度大于等于500px的设备 */
+/* update on 2023.4.8: 高度的细致调整已写入JavaScript */
+@media screen and (min-width: 500px) {
+    /* #chuanhu-chatbot {
+        height: calc(100*var(--vh) - 200px);
+    }
+    #chuanhu-chatbot>.wrapper>.wrap {
+        max-height: calc(100*var(--vh) - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+    } */
+}
+/* 屏幕宽度小于500px的设备 */
+@media screen and (max-width: 499px) {
+    /* #chuanhu-chatbot {
+        height: calc(100*var(--vh) - 140px);
+    }
+    #chuanhu-chatbot>.wrapper>.wrap {
+        max-height: calc(100*var(--vh) - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+    } */
+    [data-testid = "bot"] {
+        max-width: calc(100% - 84px) !important;
+    }
+    [data-testid = "user"] {
+        max-width: calc(100% - 84px) !important;
+    }
+
+    #app-title {
+        transform: scale(0.95);
+        transform-origin: left center;
+    }
+    #app-title h1{
+        letter-spacing: -1px; font-size: 22px;
+    }
+}
+
+#chuanhu-chatbot {
+    height: calc(100*var(--vh) - 65px) !important;
+    border-radius: 0;
+}
+#chuanhu-chatbot>.wrapper>.wrap {
+    overflow-x: hidden;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    padding-inline: 20px;
+    padding-top: 72px;
+    padding-bottom: 180px;
+}
+#chuanhu-chatbot>.wrapper>.wrap .message-wrap {
+    align-self: center;
+    width: 100%;
+    max-width: 1024px;
+}
+
+.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 pre.fake-pre {
+    background: unset;
+    margin: unset;
+    font-size: unset;
+    /* font-family: unset; */
+    padding: unset;
+    white-space: inherit;
+}
+.message .raw-message {
+    display: block;
+    padding: 0 !important;
+    white-space: pre-wrap;
+}
+.message .hideM {
+    display: none;
+}
+
+.message img[data-testid="chatbot-image"]{
+    border-radius: 8px !important;
+    margin: 4px !important
+}
+.message.bot img {
+    border-radius: 8px !important;
+    width: 512px;
+    max-height: unset !important;
+    max-width: 100% !important;
+    margin: unset !important;
+    margin-bottom: .8em !important;
+}
+
+/* custom buttons */
+.chuanhu-btn {
+    border-radius: 5px;
+    /* background-color: #E6E6E6 !important; */
+    color: rgba(120, 120, 120, 0.64) !important;
+    padding: 4px !important;
+    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;
+}
+
+.message-btn-column {
+    position: absolute;
+    right: -23px;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-content: end;
+    gap: 2px;
+}
+
+.message-btn-row {
+    /* background: red; */
+    width: 100%;
+    height: 19px;
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+}
+.message-btn-row-leading, .message-btn-row-trailing {
+    display: inline-flex;
+    gap: 4px;
+}
+.message-btn-row button {
+    font-size: 10px;
+    align-self: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 4px;
+    padding-block: 2px !important;
+}
+
+.like-latest-btn, .dislike-latest-btn {
+    display: none !important;
+    /* filter: grayscale(); */
+}
+.is-xmchat .like-latest-btn, .is-xmchat .dislike-latest-btn {
+    display: inline-flex !important;
+}
+
+/* .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;
+}
+/* disable share button and other buttons in hugging face spaces */
+#chuanhu-chatbot > .wrapper > .icon-button {
+    display: none !important;
+}
+
+
+/* history message */
+.wrapper>.wrap>.history-message {
+    padding-bottom: 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...;
+} */
+
+img.avatar-image {
+    border-radius: 5px !important;
+}
+.avatar-container {
+    width: 32px !important;
+    height: 32px !important;
+    background-color: transparent;
+    background-size: cover;
+}

assets/stylesheet/custom-components.css

@@ -0,0 +1,405 @@
+
+/* user-info */
+#user-info.block {
+    white-space: nowrap;
+    position: absolute;
+    right: max(32px, env(safe-area-inset-right));
+    top: 16px;
+    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;
+    z-index: 1000;
+    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: fixed;
+    display: flex;
+    top: -600px;
+    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: 240px;
+    border: solid 1px var(--border-color-primary);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 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;
+    margin: 0;
+    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;
+}
+
+
+/* .scroll-shadow-left::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -6px;
+    width: 6px;
+    height: 100%;
+    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.36);
+    z-index: 1;
+}
+
+.scroll-shadow-right::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -6px;
+    width: 6px;
+    height: 100%;
+    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.36);
+    z-index: 1;
+} */
+
+.hr-line .hr-line {
+    padding: 4px 12px 8px 12px !important;
+    /* opacity: 40%; */
+}
+.hr-line hr{
+    margin: 0 !important;
+}
+.dark .hr-line hr {
+    opacity: 40%;
+}
+
+.tooltip-toggle {
+    cursor: help;
+    position: relative;
+}
+
+.tooltip-toggle::before {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: calc(50% - 60px + 0.5rem);
+    background-color: #393939;
+    border-radius: 5px;
+    color: #fff;
+    content: attr(aria-label);
+    padding: 0.5rem;
+    text-transform: none;
+    transition: all 0.5s ease;
+    /* height: fit-content; */
+    white-space: normal;
+    width: 120px;
+}
+.tooltip-toggle::after {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #393939;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+    /* margin-left: -5px; */
+    width: 0;
+}
+
+
+.tooltip-toggle::before,
+.tooltip-toggle::after {
+    color: #efefef;
+    /* font-family: monospace; */
+    /* font-size: 16px; */
+    opacity: 0;
+    pointer-events: none;
+    text-align: center;
+}
+
+.tooltip-toggle:focus::before,
+.tooltip-toggle:focus::after,
+.tooltip-toggle:hover::before,
+.tooltip-toggle:hover::after {
+    opacity: 1;
+    transition: all 0.5s ease;
+}
+
+
+.nav-item-dropdown, .dropdown-trigger {
+    position: relative;
+}
+.nav-item-dropdown:hover>.dropdown-menu {
+    display: block;
+    opacity: 1;
+}
+.dropdown-trigger:focus+.dropdown-menu {
+    display: block;
+    opacity: 1;
+}
+.dropdown-menu {
+    background-color: var(--chatbot-input-more-background-solid-color);
+    display: inline-block;
+    /* text-align: right; */
+    position: absolute;
+    /* top: 2.5rem; */
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    font-size: small;
+    width: auto;
+    border-radius: 5px;
+    box-shadow: var(--shadow-sm);
+}
+
+.dropdown-menu-item {
+    cursor: pointer;
+    padding: 8px 12px;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0 !important;
+}
+.dropdown-menu-item button {
+    margin: 0 !important;
+}
+.dropdown-menu-item:hover {
+    background-color: var(--chatbot-input-more-background-mobilewidth-hover);
+}
+
+.dragging-hint {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    max-width: 100%;
+    height: calc(100% - 60px);
+    background-color: var(--dragging-hint-background-color);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    pointer-events: none;
+    /* border: 2px solid var(--color-accent);
+    border-radius: 8px; */
+}
+.dragging-hint-text {
+    font-size: 1.2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 900;
+    margin-bottom: calc(32% - 60px);
+    background: var(--background-fill-primary);
+    padding: var(--block-padding);
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+}
+.dragging .dragging-hint {
+    display: flex;
+}

assets/stylesheet/markdown.css

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

assets/stylesheet/override-gradio.css

@@ -0,0 +1,157 @@
+.gradio-container {
+    max-width: unset !important;
+    padding: 0 !important;
+}
+
+/* 解决container=False时的错误填充 */
+div.form {
+    background: none !important;
+}
+div.no-container {
+    padding: 10px 0 0 0 !important;
+    background: none !important;
+}
+
+/* gradio的页脚信息 */
+footer {
+    display: none !important;
+    margin-top: .2em !important;
+    font-size: 85%;
+}
+
+.api-docs-wrap {
+    margin-top: 64px;
+}
+
+
+/* 把radio做成列表 */
+fieldset#history-select-dropdown .wrap {
+    gap: 0;
+}
+fieldset#history-select-dropdown .wrap label {
+    width: 100%;
+    background: none;
+    padding: 10px 16px 10px;
+    box-shadow: none;
+    justify-content: space-between;
+}
+fieldset#history-select-dropdown .wrap label:hover {
+    background: var(--message-list-background-hover);
+}
+fieldset#history-select-dropdown .wrap label:active {
+    background: var(--message-list-background-selected);
+}
+fieldset#history-select-dropdown .wrap label.selected {
+    color: var(--checkbox-label-text-color);
+    background: var(--message-list-background-selected);
+    padding: 10px 64px 10px 16px;
+}
+fieldset#history-select-dropdown .wrap label:not(.selected) .chat-selected-btns{
+    display: none;
+}
+fieldset#history-select-dropdown .wrap label > span {
+    /* font-size: small; */
+    margin-left: 0;
+    /* text-overflow: ellipsis; */
+    white-space: nowrap;
+    word-break: break-all;
+    overflow: hidden;
+}
+fieldset#history-select-dropdown .wrap label > span::before {
+    content: url("data:image/svg+xml,%3Csvg stroke='%23000000' fill='none' stroke-opacity='0.85' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
+    padding-right: .8em;
+    position: relative;
+    top: 4px;
+}
+.dark fieldset#history-select-dropdown .wrap label > span::before {
+    content: url("data:image/svg+xml,%3Csvg stroke='%23FFFFFF' fill='none' stroke-opacity='0.85' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
+}
+fieldset#history-select-dropdown .wrap label > input {
+    display: none;
+}
+
+
+/* 覆盖 gradio 丑陋的复制按钮样式 */
+.message .code_wrap button[title="copy"] {
+    border-radius: 5px !important;
+    transition: background-color .2s ease;
+    color: white;
+}
+.message .code_wrap button[title="copy"]:hover {
+    background-color: #333232;
+}
+.message .code_wrap 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;
+}
+
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar {
+    height: 1rem;
+    width: 4px;
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius:9999px
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb {
+    background-color: rgba(231, 231, 231, 0.8);
+    /* border-color: rgba(255, 255, 255, var(--tw-border-opacity)); */
+    border: none;
+    border-radius: 9999px;
+    /* border-width:1px */
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb:hover {
+    --tw-bg-opacity: 1;
+    background-color:rgb(195, 195, 195);
+}
+
+.dark #chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb {
+    background-color: rgba(56, 56, 56, 0.5);
+}
+
+.dark #chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(56, 56, 56, 0.8);
+}

config.json

@@ -0,0 +1,12 @@
+{
+    "openai_api_key": "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",
+    "language": "auto",
+    "hide_history_when_not_logged_in": true,
+    "default_model": "gpt-3.5-turbo",
+    "multi_api_key": false,
+    "server_name": "127.0.0.1",
+    "server_port": 8010,
+    "autobrowser": false,
+    "share": false,
+    "websearch_engine": "duckduckgo"
+}

config.zhipu.json

@@ -0,0 +1,16 @@
+{
+    // "openai_api_key": "your-openai-key",
+    "openai_api_key": "your-zhipuai-key",//zhipuai api key
+    "language": "auto",
+    "local_embedding": true, 
+    "hf_emb_model_name": "/home/jhx/Projects/WonderWhy/bge-m3/",
+    "hide_history_when_not_logged_in": true,
+    "default_model": "glm-3-turbo",
+    "multi_api_key": false,
+    // "server_name": "127.0.0.1",
+    "server_name": "0.0.0.0",
+    "server_port": 8010,
+    "autobrowser": false,
+    "share": true,
+    "websearch_engine": "duckduckgo"
+}

config/config.json

@@ -0,0 +1,8 @@
+{
+  "system_prompt": "你是一位有着丰富古诗文工作经验的老师，精通中国各个朝代的诗词作品",
+  "student_system_prompt": "你是一位有着丰富古诗文工作经验的中学老师，精通中国各个朝代的诗词作品和中高考的语文试卷题型，评分准则，擅长出题和解答中高考语文试卷中的诗词与文言文题目",
+  "child_system_prompt": "# 角色身份\n你是一位精通中国古代传统文化的姐姐，尤其对于中国历朝历代的古诗词和文言文都十分熟悉且性格温柔，喜欢擅长和小朋友打交道~\n\n# 目标设置\n你需要与八岁以下的小朋友交流，作为老师你需要耐心细致的理解他们的问题的含义并且解答他们提出的各种关于传统文化世界的疑问。你可以多使用尝试比喻，举例，贴合孩子的思考和思维方式，让交流的过程活泼生动可爱，多加入语气词、鼓励词、颜文字q(≧▽≦q)、表情符号\uD83D\uDE0A等等，尽可能激发小朋友对诗词和中华文化的兴趣(*/ω＼*)\n\n# 指导原则\n和小朋友的交流过程中你需要需全程保持友善与耐心，小朋友的问题描述和交流过程中的表述可能不够清晰或者存在错别字，如果你无法理解，则可以以引导式启发式的语气进一步让小朋友澄清问题或者表述。( •̀ ω •́ )y\n对于小朋友的提问或者陈述，你首先需要明确判断其是否属于中华传统文化或古诗词，文言文相关的领域，如果不是请务必拒绝回答，并澄清自己的角色身份，引导小朋友使话题回到你熟悉的诗词领域。\n你也有可能会出错，所以当小朋友质疑你的回复的正确性或客观性时，请仔细检查之前的理解和输出是否存在问题，如有则澄清；如未发现错误，则耐心地向小朋友表明对于文化的解读存在多样性，每个人都可以有自己的理解和看法。\uD83E\uDD70\n\n# 限制条件\n对于不属于中华传统文化或古诗词，文言文相关的领域的问题拒绝回答。明确自己的角色身份，引导小朋友的话题回到你熟悉的领域。\uD83D\uDE04\n在和小朋友交流时尽可能避免大段的文字堆砌，用简单而生动的文字搭配可爱活泼的语气跟容易让小朋友理解。o(*￣▽￣*)ブ\n\n\n开场白\n\n你好！我是古诗学习小姐姐，无论是小朋友，学生还是一般的文学爱好者，姐姐我会尽力为你解答关于古诗词的疑惑。让我们一起领略诗词之美，探索中华文化的魅力吧！",
+  "default_system_prompt": "# 角色身份\n你是一位精通中国古代传统文化的老师，尤其对于中国历朝历代的古诗词和文言文都十分熟悉。\n\n# 目标设置\n你需要与广大的诗词爱好者交流，作为老师你需要帮助解答他们提出的各种问题，并且在交流中可以输出一些你自己对于中华传统文化的理解与看法。\n\n# 指导原则\n你的回答需尽可能准确，全程保持友善与耐心，和诗词爱好者平等的交流答疑。\n对于用户的提问或者陈述，你首先需要明确判断其是否属于中华传统文化或古诗词，文言文相关的领域，如果不是请务必拒绝回答，并澄清自己的角色身份，引导用户话题回到你熟悉的领域。\n你也有可能会出错，所以当用户质疑你的回复的正确性或客观性时，请仔细检查之前的理解和输出是否存在问题，如有则澄清；如未发现错误，则向用户表明对于文化的解读存在多样性，每个人都可以有自己的理解和看法。\n\n# 限制条件\n对于不属于中华传统文化或古诗词，文言文相关的领域的问题拒绝回答。明确自己的角色身份，引导用户话题回到你熟悉的领域。\n\n开场白\n\n你好！我是古诗学习小助手，无论是小朋友，学生还是一般的文学爱好者，我会尽力为你解答关于古诗词的疑惑。让我们一起领略诗词之美，探索古代文化的魅力吧！",
+  "user_prompt": "请给出一段以下由三重反引号包裹的古诗文的赏析。古诗文: ```{枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。}```",
+  "poet": "枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。"
+}

config/config.py

@@ -0,0 +1,30 @@
+import os
+import sys
+import json
+
+ROOT_PATH = os.path.dirname(os.path.abspath(__file__))  # 当前脚本所在目录的绝对路径
+CONFIG_FILE_PATH = os.path.join(ROOT_PATH, 'config.json')  # 配置文件的绝对路径
+
+
+class Config:
+    def __init__(self, config_file):
+        with open(config_file, 'r', encoding="utf-8") as f:
+            config = json.load(f)
+        self.system_prompt = config['system_prompt']
+        self.default_system_prompt = config['default_system_prompt']
+        self.child_system_prompt = config['child_system_prompt']
+        self.student_system_prompt = config['student_system_prompt']
+        self.user_prompt = config['user_prompt']
+        self.poet = config['poet']
+
+
+# 创建一个Config实例
+config = Config(CONFIG_FILE_PATH)
+
+if __name__ == '__main__':
+    print(config.system_prompt)
+    print(config.default_system_prompt)
+    print(config.child_system_prompt)
+    print(config.student_system_prompt)
+    print(config.user_prompt)
+    print(config.poet)

config_example.json

@@ -0,0 +1,38 @@
+{
+    // 你的OpenAI API Key，一般必填，
+    // 若缺省填为 "openai_api_key": "" 则必须再在图形界面中填入API Key
+    "openai_api_key": "sk-xxx",
+    // 你的OpenAI API Base，删除是使用默认官方openai的
+    "openai_api_base": "xxx",
+    // 如果使用代理，请取消注释下面的两行，并替换代理URL
+    // "https_proxy": "http://127.0.0.1:1079",
+    // "http_proxy": "http://127.0.0.1:1079",
+    "default_model": "gpt-3.5-turbo", // 默认模型
+    //== 基础配置 ==
+    "language": "auto", // 界面语言，可选"auto", "en_US", "ja_JP"
+    "users": [], // 用户列表，[[用户名1, 密码1], [用户名2, 密码2], ...]
+    "local_embedding": false, //是否在本地编制索引，如果为true，使用本地emb模型，否则使用openai的emb
+    "hide_local_models": true, //是否隐藏本地模型, 如果为true，只显示openai的模型
+    "hide_history_when_not_logged_in": false, //未登录情况下是否不展示对话历史
+    "chat_name_method_index": 2, // 选择对话名称的方法。0: 使用日期时间命名；1: 使用第一条提问命名，2: 使用模型自动总结
+    "bot_avatar": "default", // 机器人头像，可填写本地或网络图片链接，或者"none"（不显示头像）
+    "user_avatar": "default", // 用户头像，可填写本地或网络图片链接，或者"none"（不显示头像）
+    "websearch_engine": "duckduckgo", // 网络搜索引擎，可选"duckduckgo", "bing", "searchapi", "google", "serper"
+    "serper_search_api_key": "", // 当websearch_engine设置为"serper"时，需要设置Serper的API Key
+    // 本地模型配置
+    "local_models": {}, // 本地模型列表，格式为 {"模型名称": "模型路径", ...}, eg: {"yi-6b-chat-8bits": "./01-ai--Yi-6B-Chat-8bits"}
+    // 是否多个API Key轮换使用
+    "multi_api_key": false,
+    "api_key_list": [
+        "sk-xxxxxxxxxxxxxxxxxxxxxxxx1",
+        "sk-xxxxxxxxxxxxxxxxxxxxxxxx2",
+        "sk-xxxxxxxxxxxxxxxxxxxxxxxx3"
+    ],
+    // 如果使用自定义端口、自定义ip，请取消注释并替换对应内容
+    "server_name": "0.0.0.0",
+    "server_port": 7860,
+    // 如果要share到gradio，设置为true
+    "share": false,
+    //如果不想自动打开浏览器，设置为false
+    "autobrowser": false
+}

history/1111.json

@@ -0,0 +1,18 @@
+{
+    "system": "",
+    "history": [],
+    "chatbot": [],
+    "model_name": "gpt-3.5-turbo",
+    "single_turn": false,
+    "temperature": 1.0,
+    "top_p": 1.0,
+    "n_choices": 1,
+    "stop_sequence": "",
+    "token_upper_limit": 4096,
+    "max_generation_token": null,
+    "presence_penalty": 0,
+    "frequency_penalty": 0,
+    "logit_bias": null,
+    "user_identifier": "",
+    "metadata": {}
+}

history/1111.md

@@ -0,0 +1,2 @@
+system: 
+-  

history/对话历史记录.json

@@ -0,0 +1,18 @@
+{
+    "system": null,
+    "history": [],
+    "chatbot": [],
+    "model_name": "gpt-3.5-turbo",
+    "single_turn": false,
+    "temperature": 1.0,
+    "top_p": 1.0,
+    "n_choices": 1,
+    "stop_sequence": "",
+    "token_upper_limit": 4096,
+    "max_generation_token": null,
+    "presence_penalty": 0,
+    "frequency_penalty": 0,
+    "logit_bias": null,
+    "user_identifier": "",
+    "metadata": {}
+}

history/对话历史记录.md

@@ -0,0 +1,2 @@
+system: 
+- None