Merge branch 'main' into UI-new

.gitignore

@@ -145,3 +145,4 @@ lora/
 .idea
 templates/*
 files/
+tmp/

ChuanhuChatbot.py

@@ -44,7 +44,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         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")
-        config_info = gr.HTML(get_html("config_info.html").format(bot_avatar=config.bot_avatar, user_avatar=config.user_avatar), visible=False, elem_id="config-info")
+        config_info = gr.HTML(get_html("config_info.html").format(), visible=False, elem_id="config-info")
         update_info = gr.HTML(get_html("update.html").format(
             current_version=repo_tag_html(),
             version_time=version_time(),
@@ -98,7 +98,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         with gr.Column(elem_id="chuanhu-area", scale=5):
             with gr.Column(scale=5, elem_id="chatbot-area"):
                 with gr.Row():
-                    chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700)
+                    chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700, avatar_images=[config.user_avatar, config.bot_avatar])
                 with gr.Row():
                     with gr.Column(min_width=225, scale=12):
                         user_input = gr.Textbox(

config_example.json

@@ -7,6 +7,11 @@
     "xmchat_api_key": "", // 你的 xmchat API Key，用于 XMChat 对话模型
     "minimax_api_key": "", // 你的 MiniMax API Key，用于 MiniMax 对话模型
     "minimax_group_id": "", // 你的 MiniMax Group ID，用于 MiniMax 对话模型
+    "midjourney_proxy_api_base": "https://xxx/mj", // 你的 https://github.com/novicezk/midjourney-proxy 代理地址
+    "midjourney_proxy_api_secret": "", // 你的 MidJourney Proxy API Secret，用于鉴权访问 api，可选
+    "midjourney_discord_proxy_url": "", // 你的 MidJourney Discord Proxy URL，用于对生成对图进行反代，可选
+    "midjourney_temp_folder": "./tmp", // 你的 MidJourney 临时文件夹，用于存放生成的图片，填空则关闭自动下载切图（直接显示MJ的四宫格图）
+
 
     //== Azure ==
     "openai_api_type": "openai", // 可选项：azure, openai
@@ -24,8 +29,8 @@
     "hide_history_when_not_logged_in": false, //未登录情况下是否不展示对话历史
     "check_update": true, //是否启用检查更新
     "default_model": "gpt-3.5-turbo", // 默认模型
-    "bot_avatar": "default", // 机器人头像，可填写图片链接、Data URL (base64)，或者"none"（不显示头像）
-    "user_avatar": "default", // 用户头像，可填写图片链接、Data URL (base64)，或者"none"（不显示头像）
+    "bot_avatar": "default", // 机器人头像，可填写本地或网络图片链接，或者"none"（不显示头像）
+    "user_avatar": "default", // 用户头像，可填写本地或网络图片链接，或者"none"（不显示头像）
 
     //== API 用量 ==
     "show_api_billing": false, //是否显示OpenAI API用量（启用需要填写sensitive_id）

modules/config.py

@@ -114,6 +114,15 @@ os.environ["MINIMAX_API_KEY"] = minimax_api_key
 minimax_group_id = config.get("minimax_group_id", "")
 os.environ["MINIMAX_GROUP_ID"] = minimax_group_id
 
+midjourney_proxy_api_base = config.get("midjourney_proxy_api_base", "")
+os.environ["MIDJOURNEY_PROXY_API_BASE"] = midjourney_proxy_api_base
+midjourney_proxy_api_secret = config.get("midjourney_proxy_api_secret", "")
+os.environ["MIDJOURNEY_PROXY_API_SECRET"] = midjourney_proxy_api_secret
+midjourney_discord_proxy_url = config.get("midjourney_discord_proxy_url", "")
+os.environ["MIDJOURNEY_DISCORD_PROXY_URL"] = midjourney_discord_proxy_url
+midjourney_temp_folder = config.get("midjourney_temp_folder", "")
+os.environ["MIDJOURNEY_TEMP_FOLDER"] = midjourney_temp_folder
+
 load_config_to_environ(["openai_api_type", "azure_openai_api_key", "azure_openai_api_base_url",
                        "azure_openai_api_version", "azure_deployment_name", "azure_embedding_deployment_name", "azure_embedding_model_name"])
 
@@ -268,4 +277,12 @@ share = config.get("share", False)
 
 # avatar
 bot_avatar = config.get("bot_avatar", "default")
-user_avatar = config.get("user_avatar", "default")
+user_avatar = config.get("user_avatar", "default")
+if bot_avatar == "" or bot_avatar == "none" or bot_avatar is None:
+    bot_avatar = None
+elif bot_avatar == "default":
+    bot_avatar = "web_assets/chatbot.png"
+if user_avatar == "" or user_avatar == "none" or user_avatar is None:
+    user_avatar = None
+elif user_avatar == "default":
+    user_avatar = "web_assets/user.png"

modules/models/base_model.py

@@ -141,6 +141,7 @@ class ModelType(Enum):
     ChuanhuAgent = 8
     GooglePaLM = 9
     LangchainChat = 10
+    Midjourney = 11
 
     @classmethod
     def get_type(cls, model_name: str):
@@ -166,7 +167,9 @@ class ModelType(Enum):
             model_type = ModelType.ChuanhuAgent
         elif "palm" in model_name_lower:
             model_type = ModelType.GooglePaLM
-        elif "azure" or "api" in model_name_lower:
+        elif "midjourney" in model_name_lower:
+            model_type = ModelType.Midjourney
+        elif "azure" in model_name_lower or "api" in model_name_lower:
             model_type = ModelType.LangchainChat
         else:
             model_type = ModelType.Unknown

modules/models/midjourney.py

@@ -0,0 +1,385 @@
+import base64
+import io
+import json
+import logging
+import pathlib
+import time
+import tempfile
+import os
+
+from datetime import datetime
+
+import requests
+import tiktoken
+from PIL import Image
+
+from modules.config import retrieve_proxy
+from modules.models.models import XMChat
+
+mj_proxy_api_base = os.getenv("MIDJOURNEY_PROXY_API_BASE")
+mj_discord_proxy_url = os.getenv("MIDJOURNEY_DISCORD_PROXY_URL")
+mj_temp_folder = os.getenv("MIDJOURNEY_TEMP_FOLDER")
+
+
+class Midjourney_Client(XMChat):
+
+    class FetchDataPack:
+        """
+        A class to store data for current fetching data from Midjourney API
+        """
+
+        action: str  # current action, e.g. "IMAGINE", "UPSCALE", "VARIATION"
+        prefix_content: str  # prefix content, task description and process hint
+        task_id: str  # task id
+        start_time: float  # task start timestamp
+        timeout: int  # task timeout in seconds
+        finished: bool  # whether the task is finished
+        prompt: str  # prompt for the task
+
+        def __init__(self, action, prefix_content, task_id, timeout=900):
+            self.action = action
+            self.prefix_content = prefix_content
+            self.task_id = task_id
+            self.start_time = time.time()
+            self.timeout = timeout
+            self.finished = False
+
+    def __init__(self, model_name, api_key, user_name=""):
+        super().__init__(api_key, user_name)
+        self.model_name = model_name
+        self.history = []
+        self.api_key = api_key
+        self.headers = {
+            "Content-Type": "application/json",
+            "mj-api-secret": f"{api_key}"
+        }
+        self.proxy_url = mj_proxy_api_base
+        self.command_splitter = "::"
+
+        if mj_temp_folder:
+            temp = "./tmp"
+            if user_name:
+                temp = os.path.join(temp, user_name)
+            if not os.path.exists(temp):
+                os.makedirs(temp)
+            self.temp_path = tempfile.mkdtemp(dir=temp)
+            logging.info("mj temp folder: " + self.temp_path)
+        else:
+            self.temp_path = None
+
+    def use_mj_self_proxy_url(self, img_url):
+        """
+        replace discord cdn url with mj self proxy url
+        """
+        return img_url.replace(
+            "https://cdn.discordapp.com/",
+            mj_discord_proxy_url and mj_discord_proxy_url or "https://cdn.discordapp.com/"
+        )
+
+    def split_image(self, image_url):
+        """
+        when enabling temp dir, split image into 4 parts
+        """
+        with retrieve_proxy():
+            image_bytes = requests.get(image_url).content
+        img = Image.open(io.BytesIO(image_bytes))
+        width, height = img.size
+        # calculate half width and height
+        half_width = width // 2
+        half_height = height // 2
+        # create coordinates (top-left x, top-left y, bottom-right x, bottom-right y)
+        coordinates = [(0, 0, half_width, half_height),
+                       (half_width, 0, width, half_height),
+                       (0, half_height, half_width, height),
+                       (half_width, half_height, width, height)]
+
+        images = [img.crop(c) for c in coordinates]
+        return images
+
+    def auth_mj(self):
+        """
+        auth midjourney api
+        """
+        # TODO: check if secret is valid
+        return {'status': 'ok'}
+
+    def request_mj(self, path: str, action: str, data: str, retries=3):
+        """
+        request midjourney api
+        """
+        mj_proxy_url = self.proxy_url
+        if mj_proxy_url is None or not (mj_proxy_url.startswith("http://") or mj_proxy_url.startswith("https://")):
+            raise Exception('please set MIDJOURNEY_PROXY_API_BASE in ENV or in config.json')
+
+        auth_ = self.auth_mj()
+        if auth_.get('error'):
+            raise Exception('auth not set')
+
+        fetch_url = f"{mj_proxy_url}/{path}"
+        # logging.info(f"[MJ Proxy] {action} {fetch_url} params: {data}")
+
+        for _ in range(retries):
+            try:
+                with retrieve_proxy():
+                    res = requests.request(method=action, url=fetch_url, headers=self.headers, data=data)
+                break
+            except Exception as e:
+                print(e)
+
+        if res.status_code != 200:
+            raise Exception(f'{res.status_code} - {res.content}')
+
+        return res
+
+    def fetch_status(self, fetch_data: FetchDataPack):
+        """
+        fetch status of current task
+        """
+        if fetch_data.start_time + fetch_data.timeout < time.time():
+            fetch_data.finished = True
+            return "任务超时，请检查 dc 输出。描述：" + fetch_data.prompt
+
+        time.sleep(3)
+        status_res = self.request_mj(f"task/{fetch_data.task_id}/fetch", "GET", '')
+        status_res_json = status_res.json()
+        if not (200 <= status_res.status_code < 300):
+            raise Exception("任务状态获取失败：" + status_res_json.get(
+                'error') or status_res_json.get('description') or '未知错误')
+        else:
+            fetch_data.finished = False
+            if status_res_json['status'] == "SUCCESS":
+                content = status_res_json['imageUrl']
+                fetch_data.finished = True
+            elif status_res_json['status'] == "FAILED":
+                content = status_res_json['failReason'] or '未知原因'
+                fetch_data.finished = True
+            elif status_res_json['status'] == "NOT_START":
+                content = f'任务未开始，已等待 {time.time() - fetch_data.start_time:.2f} 秒'
+            elif status_res_json['status'] == "IN_PROGRESS":
+                content = '任务正在运行'
+                if status_res_json.get('progress'):
+                    content += f"，进度：{status_res_json['progress']}"
+            elif status_res_json['status'] == "SUBMITTED":
+                content = '任务已提交处理'
+            elif status_res_json['status'] == "FAILURE":
+                fetch_data.finished = True
+                return "任务处理失败，原因：" + status_res_json['failReason'] or '未知原因'
+            else:
+                content = status_res_json['status']
+            if fetch_data.finished:
+                img_url = self.use_mj_self_proxy_url(status_res_json['imageUrl'])
+                if fetch_data.action == "DESCRIBE":
+                    return f"\n{status_res_json['prompt']}"
+                time_cost_str = f"\n\n{fetch_data.action} 花费时间：{time.time() - fetch_data.start_time:.2f} 秒"
+                upscale_str = ""
+                variation_str = ""
+                if fetch_data.action in ["IMAGINE", "UPSCALE", "VARIATION"]:
+                    upscale = [f'/mj UPSCALE{self.command_splitter}{i+1}{self.command_splitter}{fetch_data.task_id}'
+                               for i in range(4)]
+                    upscale_str = '\n放大图片：\n\n' + '\n\n'.join(upscale)
+                    variation = [f'/mj VARIATION{self.command_splitter}{i+1}{self.command_splitter}{fetch_data.task_id}'
+                                 for i in range(4)]
+                    variation_str = '\n图片变体：\n\n' + '\n\n'.join(variation)
+                if self.temp_path and fetch_data.action in ["IMAGINE", "VARIATION"]:
+                    try:
+                        images = self.split_image(img_url)
+                        # save images to temp path
+                        for i in range(4):
+                            images[i].save(pathlib.Path(self.temp_path) / f"{fetch_data.task_id}_{i}.png")
+                        img_str = '\n'.join(
+                            [f"![{fetch_data.task_id}](/file={self.temp_path}/{fetch_data.task_id}_{i}.png)"
+                             for i in range(4)])
+                        return fetch_data.prefix_content + f"{time_cost_str}\n\n{img_str}{upscale_str}{variation_str}"
+                    except Exception as e:
+                        logging.error(e)
+                return fetch_data.prefix_content + \
+                    f"{time_cost_str}[![{fetch_data.task_id}]({img_url})]({img_url}){upscale_str}{variation_str}"
+            else:
+                content = f"**任务状态:** [{(datetime.now()).strftime('%Y-%m-%d %H:%M:%S')}] - {content}"
+                content += f"\n\n花费时间：{time.time() - fetch_data.start_time:.2f} 秒"
+                if status_res_json['status'] == 'IN_PROGRESS' and status_res_json.get('imageUrl'):
+                    img_url = status_res_json.get('imageUrl')
+                    return f"{content}\n[![{fetch_data.task_id}]({img_url})]({img_url})"
+                return content
+        return None
+
+    def handle_file_upload(self, files, chatbot, language):
+        """
+        handle file upload
+        """
+        if files:
+            for file in files:
+                if file.name:
+                    logging.info(f"尝试读取图像: {file.name}")
+                    self.try_read_image(file.name)
+            if self.image_path is not None:
+                chatbot = chatbot + [((self.image_path,), None)]
+            if self.image_bytes is not None:
+                logging.info("使用图片作为输入")
+        return None, chatbot, None
+
+    def reset(self):
+        self.image_bytes = None
+        self.image_path = None
+        return [], "已重置"
+
+    def get_answer_at_once(self):
+        content = self.history[-1]['content']
+        answer = self.get_help()
+
+        if not content.lower().startswith("/mj"):
+            return answer, len(content)
+
+        prompt = content[3:].strip()
+        action = "IMAGINE"
+        first_split_index = prompt.find(self.command_splitter)
+        if first_split_index > 0:
+            action = prompt[:first_split_index]
+        if action not in ["IMAGINE", "DESCRIBE", "UPSCALE",
+                          # "VARIATION", "BLEND", "REROLL"
+                          ]:
+            raise Exception("任务提交失败：未知的任务类型")
+        else:
+            action_index = None
+            action_use_task_id = None
+            if action in ["VARIATION", "UPSCALE", "REROLL"]:
+                action_index = int(prompt[first_split_index + 2:first_split_index + 3])
+                action_use_task_id = prompt[first_split_index + 5:]
+
+            try:
+                res = None
+                if action == "IMAGINE":
+                    data = {
+                        "prompt": prompt
+                    }
+                    if self.image_bytes is not None:
+                        data["base64"] = 'data:image/png;base64,' + self.image_bytes
+                    res = self.request_mj("submit/imagine", "POST",
+                                          json.dumps(data))
+                elif action == "DESCRIBE":
+                    res = self.request_mj("submit/describe", "POST",
+                                          json.dumps({"base64": 'data:image/png;base64,' + self.image_bytes}))
+                elif action == "BLEND":
+                    res = self.request_mj("submit/blend", "POST", json.dumps(
+                        {"base64Array": [self.image_bytes, self.image_bytes]}))
+                elif action in ["UPSCALE", "VARIATION", "REROLL"]:
+                    res = self.request_mj(
+                        "submit/change", "POST",
+                        json.dumps({"action": action, "index": action_index, "taskId": action_use_task_id}))
+                res_json = res.json()
+                if not (200 <= res.status_code < 300) or (res_json['code'] not in [1, 22]):
+                    answer = "任务提交失败：" + res_json.get('error', res_json.get('description', '未知错误'))
+                else:
+                    task_id = res_json['result']
+                    prefix_content = f"**画面描述:** {prompt}\n**任务ID:** {task_id}\n"
+
+                    fetch_data = Midjourney_Client.FetchDataPack(
+                        action=action,
+                        prefix_content=prefix_content,
+                        task_id=task_id,
+                    )
+                    fetch_data.prompt = prompt
+                    while not fetch_data.finished:
+                        answer = self.fetch_status(fetch_data)
+            except Exception as e:
+                logging.error("submit failed", e)
+                answer = "任务提交错误：" + str(e.args[0]) if e.args else '未知错误'
+
+        return answer, tiktoken.get_encoding("cl100k_base").encode(content)
+
+    def get_answer_stream_iter(self):
+        content = self.history[-1]['content']
+        answer = self.get_help()
+
+        if not content.lower().startswith("/mj"):
+            yield answer
+            return
+
+        prompt = content[3:].strip()
+        action = "IMAGINE"
+        first_split_index = prompt.find(self.command_splitter)
+        if first_split_index > 0:
+            action = prompt[:first_split_index]
+        if action not in ["IMAGINE", "DESCRIBE", "UPSCALE",
+                          "VARIATION", "BLEND", "REROLL"
+                          ]:
+            yield "任务提交失败：未知的任务类型"
+            return
+
+        action_index = None
+        action_use_task_id = None
+        if action in ["VARIATION", "UPSCALE", "REROLL"]:
+            action_index = int(prompt[first_split_index + 2:first_split_index + 3])
+            action_use_task_id = prompt[first_split_index + 5:]
+
+        try:
+            res = None
+            if action == "IMAGINE":
+                data = {
+                    "prompt": prompt
+                }
+                if self.image_bytes is not None:
+                    data["base64"] = 'data:image/png;base64,' + self.image_bytes
+                res = self.request_mj("submit/imagine", "POST",
+                                      json.dumps(data))
+            elif action == "DESCRIBE":
+                res = self.request_mj("submit/describe", "POST", json.dumps(
+                    {"base64": 'data:image/png;base64,' + self.image_bytes}))
+            elif action == "BLEND":
+                res = self.request_mj("submit/blend", "POST", json.dumps(
+                    {"base64Array": [self.image_bytes, self.image_bytes]}))
+            elif action in ["UPSCALE", "VARIATION", "REROLL"]:
+                res = self.request_mj(
+                    "submit/change", "POST",
+                    json.dumps({"action": action, "index": action_index, "taskId": action_use_task_id}))
+            res_json = res.json()
+            if not (200 <= res.status_code < 300) or (res_json['code'] not in [1, 22]):
+                yield "任务提交失败：" + res_json.get('error', res_json.get('description', '未知错误'))
+            else:
+                task_id = res_json['result']
+                prefix_content = f"**画面描述:** {prompt}\n**任务ID:** {task_id}\n"
+                content = f"[{(datetime.now()).strftime('%Y-%m-%d %H:%M:%S')}] - 任务提交成功：" + \
+                    res_json.get('description') or '请稍等片刻'
+                yield content
+
+                fetch_data = Midjourney_Client.FetchDataPack(
+                    action=action,
+                    prefix_content=prefix_content,
+                    task_id=task_id,
+                )
+                while not fetch_data.finished:
+                    yield self.fetch_status(fetch_data)
+        except Exception as e:
+            logging.error('submit failed', e)
+            yield "任务提交错误：" + str(e.args[0]) if e.args else '未知错误'
+
+    def get_help(self):
+        return """```
+【绘图帮助】
+所有命令都需要以 /mj 开头，如：/mj a dog
+IMAGINE - 绘图，可以省略该命令，后面跟上绘图内容
+    /mj a dog
+    /mj IMAGINE::a cat
+DESCRIBE - 描述图片，需要在右下角上传需要描述的图片内容
+    /mj DESCRIBE::
+UPSCALE - 确认后放大图片，第一个数值为需要放大的图片（1~4），第二参数为任务ID
+    /mj UPSCALE::1::123456789
+    请使用SD进行UPSCALE
+VARIATION - 图片变体，第一个数值为需要放大的图片（1~4），第二参数为任务ID
+    /mj VARIATION::1::123456789
+    
+【绘图参数】
+所有命令默认会带上参数--v 5.2
+其他参数参照 https://docs.midjourney.com/docs/parameter-list
+长宽比 --aspect/--ar
+    --ar 1:2
+    --ar 16:9
+负面tag --no
+    --no plants
+    --no hands
+随机种子 --seed
+    --seed 1
+生成动漫风格（NijiJourney） --niji
+    --niji
+```
+"""

modules/models/models.py

@@ -621,6 +621,10 @@ def get_model(
         elif model_type == ModelType.LangchainChat:
             from .azure import Azure_OpenAI_Client
             model = Azure_OpenAI_Client(model_name, user_name=user_name)
+        elif model_type == ModelType.Midjourney:
+            from .midjourney import Midjourney_Client
+            mj_proxy_api_secret = os.getenv("MIDJOURNEY_PROXY_API_SECRET")
+            model = Midjourney_Client(model_name, mj_proxy_api_secret, user_name=user_name)
         elif model_type == ModelType.Unknown:
             raise ValueError(f"未知模型: {model_name}")
         logging.info(msg)

modules/presets.py

@@ -69,6 +69,7 @@ ONLINE_MODELS = [
     "yuanai-1.0-rhythm_poems",
     "minimax-abab4-chat",
     "minimax-abab5-chat",
+    "midjourney"
 ]
 
 LOCAL_MODELS = [
@@ -242,6 +243,7 @@ small_and_beautiful_theme = gr.themes.Soft(
         block_title_background_fill_dark="*primary_900",
         block_label_background_fill_dark="*primary_900",
         input_background_fill="#F6F6F6",
-        chatbot_code_background_color="*neutral_950",
+        # chatbot_code_background_color="*neutral_950",
+        # gradio 会把这个几个chatbot打头的变量应用到其他md渲染的地方，鬼晓得怎么想的。。。
         chatbot_code_background_color_dark="*neutral_950",
     )

modules/train_func.py

@@ -138,7 +138,7 @@ def add_to_models():
     extra_models = [job["fine_tuned_model"] for job in succeeded_jobs]
     for i in extra_models:
         if i not in presets.MODELS:
-            presets.MODELS.append(extra_models)
+            presets.MODELS.append(i)
 
     with open('config.json', 'r') as f:
         data = commentjson.load(f)

requirements.txt

@@ -1,5 +1,5 @@
-gradio==3.40.0
-gradio_client==0.4.0
+gradio==3.41.2
+gradio_client==0.5.0
 pypinyin
 tiktoken
 socksio
@@ -7,7 +7,7 @@ tqdm
 colorama
 googlesearch-python
 Pygments
-langchain==0.0.173
+langchain==0.0.276
 markdown
 PyPDF2
 pdfplumber

web_assets/html/config_info.html

@@ -1,2 +1,2 @@
-<div id="config-bot-avatar-url">{bot_avatar}</div>
-<div id="config-user-avatar-url">{user_avatar}</div>
+
+<!-- removed -->

web_assets/javascript/ChuanhuChat.js

@@ -37,26 +37,28 @@ var toolbox = null;
 
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
-var initialized = false;
 
 let windowWidth = window.innerWidth; // 初始窗口宽度
 
-// gradio 页面加载好了么??? 我能动你的元素了么??
-function gradioLoaded(mutations) {
-    for (var i = 0; i < mutations.length; i++) {
-        if (mutations[i].addedNodes.length) {
-            if (initialized) {
-                observer.disconnect(); // 停止监听
-                return;
-            }
-            initialize();
+function addInit() {
+    var needInit = {chatbotIndicator};
+    
+    chatbotIndicator = gradioApp().querySelector('#chuanhu-chatbot > div.wrap');
+
+    for (let elem in needInit) {
+        if (needInit[elem] == null) {
+            // addInited = false;
+            return false;
         }
     }
+
+    chatbotObserver.observe(chatbotIndicator, { attributes: true });
+
+    return true;
 }
 
 function initialize() {
-    var needInit = {gradioContainer, apSwitch, user_input_tb, userInfoDiv, appTitleDiv, chatbot, chatbotIndicator, chatbotWrap, statusDisplay, sliders, updateChuanhuBtn, chuanhuPopup};
-    initialized = true;
+    gradioObserver.observe(gradioApp(), { childList: true, subtree: true });
 
     loginUserForm = gradioApp().querySelector(".gradio-container > .main > .wrap > .panel > .form")
     gradioContainer = gradioApp().querySelector(".gradio-container");
@@ -64,7 +66,6 @@ function initialize() {
     userInfoDiv = gradioApp().getElementById("user-info");
     appTitleDiv = gradioApp().getElementById("app-title");
     chatbot = gradioApp().querySelector('#chuanhu-chatbot');
-    chatbotIndicator = gradioApp().querySelector('#chuanhu-chatbot>div.wrap');
     chatbotWrap = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap');
     apSwitch = gradioApp().querySelector('.apSwitch input[type="checkbox"]');
     updateToast = gradioApp().querySelector("#toast-update");
@@ -89,38 +90,29 @@ function initialize() {
         userLogged = true;
     }
 
-    for (let elem in needInit) {
-        if (needInit[elem] == null) {
-            initialized = false;
-            return;
-        }
-    }
+    adjustDarkMode();
+    selectHistory();
+    setTimeout(showOrHideUserInfo(), 2000);
+    setChatbotHeight();
+    setChatbotScroll();
+    setPopupBoxPosition();
+    setChatAreaWidth();
+    setSlider();
 
-    if (initialized) {
-        adjustDarkMode();
-        selectHistory();
-        setTimeout(showOrHideUserInfo(), 2000);
-        setChatbotHeight();
-        setChatbotScroll();
-        setPopupBoxPosition();
-        setChatAreaWidth();
-        setSlider();
-        setAvatar();
-        if (!historyLoaded) loadHistoryHtml();
-        if (!usernameGotten) getUserInfo();
-        chatbotObserver.observe(chatbotIndicator, { attributes: true });
-
-        const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
-        const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
-        if (longTimeNoCheck && !updateInfoGotten && !isLatestVersion || isLatestVersion && !updateInfoGotten) {
-            updateLatestVersion();
-        }
+    if (!historyLoaded) loadHistoryHtml();
+    if (!usernameGotten) getUserInfo();
 
-        // setHistroyPanel();
-        settingBox.classList.add('hideBox');
-        trainingBox.classList.add('hideBox');
-        // trainBody.classList.add('hide-body');
+    const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
+    const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
+    if (longTimeNoCheck && !updateInfoGotten && !isLatestVersion || isLatestVersion && !updateInfoGotten) {
+        updateLatestVersion();
     }
+
+    // setHistroyPanel();
+    settingBox.classList.add('hideBox');
+    trainingBox.classList.add('hideBox');
+    // trainBody.classList.add('hide-body');
+    return true;
 }
 
 function gradioApp() {
@@ -283,42 +275,19 @@ function setChatbotScroll() {
     chatbotWrap.scrollTo(0,scrollHeight)
 }
 
-var botAvatarUrl = "";
-var userAvatarUrl = "";
-function setAvatar() {
-    var botAvatar = gradioApp().getElementById("config-bot-avatar-url").innerText;
-    var userAvatar = gradioApp().getElementById("config-user-avatar-url").innerText;
-
-    if (botAvatar == "none") {
-        botAvatarUrl = "";
-    } else if (isImgUrl(botAvatar)) {
-        botAvatarUrl = botAvatar;
-    } else {
-        // botAvatarUrl = "https://github.com/GaiZhenbiao/ChuanhuChatGPT/assets/70903329/aca3a7ec-4f1d-4667-890c-a6f47bf08f63";
-        botAvatarUrl = "/file=web_assets/chatbot.png"
-    }
-
-    if (userAvatar == "none") {
-        userAvatarUrl = "";
-    } else if (isImgUrl(userAvatar)) {
-        userAvatarUrl = userAvatar;
-    } else {
-        userAvatarUrl = "data:image/svg+xml,%3Csvg width='32px' height='32px' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect fill-opacity='0.5' fill='%23bbbbbb' x='0' y='0' width='32' height='32'%3E%3C/rect%3E%3Cg transform='translate(5, 4)' fill='%23999999' fill-opacity='0.8' fill-rule='nonzero'%3E%3Cpath d='M2.29372246,24 L19.7187739,24 C20.4277609,24 20.985212,23.8373915 21.3911272,23.5121746 C21.7970424,23.1869576 22,22.7418004 22,22.1767029 C22,21.3161536 21.7458721,20.4130827 21.2376163,19.4674902 C20.7293605,18.5218977 19.9956681,17.6371184 19.036539,16.8131524 C18.07741,15.9891863 16.9210688,15.3177115 15.5675154,14.798728 C14.2139621,14.2797445 12.6914569,14.0202527 11,14.0202527 C9.30854307,14.0202527 7.78603793,14.2797445 6.43248458,14.798728 C5.07893122,15.3177115 3.92259002,15.9891863 2.96346097,16.8131524 C2.00433193,17.6371184 1.27063951,18.5218977 0.762383704,19.4674902 C0.254127901,20.4130827 0,21.3161536 0,22.1767029 C0,22.7418004 0.202957595,23.1869576 0.608872784,23.5121746 C1.01478797,23.8373915 1.57640453,24 2.29372246,24 Z M11.0124963,11.6521659 C11.9498645,11.6521659 12.8155943,11.3906214 13.6096856,10.8675324 C14.403777,10.3444433 15.042131,9.63605539 15.5247478,8.74236856 C16.0073646,7.84868174 16.248673,6.84722464 16.248673,5.73799727 C16.248673,4.65135034 16.0071492,3.67452644 15.5241015,2.80752559 C15.0410538,1.94052474 14.4024842,1.25585359 13.6083929,0.753512156 C12.8143016,0.251170719 11.9490027,0 11.0124963,0 C10.0759899,0 9.20860836,0.255422879 8.41035158,0.766268638 C7.6120948,1.2771144 6.97352528,1.96622098 6.49464303,2.8335884 C6.01576078,3.70095582 5.77631966,4.67803631 5.77631966,5.76482987 C5.77631966,6.86452653 6.01554533,7.85912886 6.49399667,8.74863683 C6.97244801,9.63814481 7.60871935,10.3444433 8.40281069,10.8675324 C9.19690203,11.3906214 10.0667972,11.6521659 11.0124963,11.6521659 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
-    }
-}
-
 function clearChatbot() {
     clearHistoryHtml();
-    clearMessageRows();
+    // clearMessageRows();
 }
 
 function chatbotContentChanged(attempt = 1) {
     for (var i = 0; i < attempt; i++) {
         setTimeout(() => {
+            // clearMessageRows();
             saveHistoryHtml();
             disableSendBtn();
-            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.user').forEach((userElement) => {addAvatars(userElement, 'user')});
-            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach((botElement) => {addAvatars(botElement, 'bot'); addChuanhuButton(botElement)});
+            // gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.user').forEach((userElement) => {addAvatars(userElement, 'user')});
+            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
         }, i === 0 ? 0 : 500);
     }
     // 理论上是不需要多次尝试执行的，可惜gradio的bug导致message可能没有渲染完毕，所以尝试500ms后再次执行
@@ -332,14 +301,21 @@ var chatbotObserver = new MutationObserver(() => {
 });
 
 // 监视页面内部 DOM 变动
-var observer = new MutationObserver(function (mutations) {
-    gradioLoaded(mutations);
+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");
-    observer.observe(ga[0], { childList: true, subtree: true });
+    // const ga = document.getElementsByTagName("gradio-app");
+    gradioApp().addEventListener("render", initialize);
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
 });

web_assets/javascript/avatar.js

@@ -1,48 +0,0 @@
-
-function addAvatars(messageElement, role='user'||'bot') {
-    if (messageElement.classList.contains('avatar-added') || messageElement.classList.contains('hide')) {
-        return;
-    }
-    if (role === 'bot' && botAvatarUrl === "" || role === 'user' && userAvatarUrl === "") {
-        messageElement.classList.add('avatar-added');
-        return;
-    }
-
-
-    const messageRow = document.createElement('div');
-    messageRow.classList.add('message-row');
-    messageElement.classList.add('avatar-added');
-
-    if (role === 'bot') {
-        messageRow.classList.add('bot-message-row');
-    } else if (role === 'user') {
-        messageRow.classList.add('user-message-row');
-    }
-
-    const avatarDiv = document.createElement('div');
-    avatarDiv.classList.add('chatbot-avatar');
-    if (role === 'bot') {
-        avatarDiv.classList.add('bot-avatar');
-        avatarDiv.innerHTML = `<img src="${botAvatarUrl}" alt="bot-avatar" />`;
-    } else if (role === 'user') {
-        avatarDiv.classList.add('user-avatar');
-        avatarDiv.innerHTML = `<img src="${userAvatarUrl}" alt="user-avatar" />`;
-    }
-
-    messageElement.parentNode.replaceChild(messageRow, messageElement);
-
-    if (role === 'bot') {
-        messageRow.appendChild(avatarDiv);
-        messageRow.appendChild(messageElement);
-    } else  if (role === 'user') {
-        messageRow.appendChild(messageElement);
-        messageRow.appendChild(avatarDiv);
-    }
-}
-
-function clearMessageRows() {
-    const messageRows = chatbotWrap.querySelectorAll('.message-row');
-    messageRows.forEach((messageRow) => {
-        messageRow.parentNode.removeChild(messageRow);
-    });
-}

web_assets/javascript/chat-history.js

@@ -25,6 +25,12 @@ function loadHistoryHtml() {
         return; // logged in, 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 fakeHistory = document.createElement('div');
         fakeHistory.classList.add('history-message');
         fakeHistory.innerHTML = tempDiv.innerHTML;

web_assets/stylesheet/ChuanhuChat.css

@@ -47,6 +47,7 @@ body.popup-open {
 }
 
 #netsetting-warning hr {
+    margin-top: 0.5em;
     margin-bottom: 1em;
 }
 

web_assets/stylesheet/chatbot.css

@@ -84,13 +84,16 @@ hr.append-display {
     min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
 }
 [data-testid = "bot"] {
-    max-width: calc(85% - 38px);
-    border-top-left-radius: 0 !important;
+    max-width: calc(85% - 40px);
+    border-bottom-left-radius: 0 !important;
 }
 [data-testid = "user"] {
-    max-width: calc(85% - 38px);
+    max-width: calc(85% - 40px);
     width: auto !important;
-    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+.message-row.user-row {
+    justify-content: flex-end;
 }
 
 /* 屏幕宽度大于等于500px的设备 */
@@ -200,6 +203,10 @@ hr.append-display {
 .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 */
@@ -244,35 +251,12 @@ hr.append-display {
     note: find it better without transition animation...;
 } */
 
-
-.message-row {
-    flex-direction: row;
-    display: flex;
-    gap: 8px;
-    width: 100%;
-}
-.bot-message-row {
-    justify-content: flex-start;
-}
-.user-message-row {
-    justify-content: flex-end;
+img.avatar-image {
+    border-radius: 5px !important;
 }
-.chatbot-avatar {
-    width: 32px;
-    height: 32px;
+.avatar-container {
+    width: 32px !important;
+    height: 32px !important;
     background-color: transparent;
     background-size: cover;
-    border-radius: 5px !important;
 }
-.chatbot-avatar.bot-avatar {
-    margin-left: 5px;
-}
-.chatbot-avatar.user-avatar {
-    margin-right: 10px;
-}
-.chatbot-avatar img {
-    border-radius: 5px !important;
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-}

web_assets/stylesheet/markdown.css

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

web_assets/stylesheet/override-gradio.css

@@ -15,14 +15,15 @@ footer {
 }
 
 /* 覆盖 gradio 丑陋的复制按钮样式 */
-.message pre button[title="copy"] {
-    border-radius: 5px;
+.message .code_wrap button[title="copy"] {
+    border-radius: 5px !important;
     transition: background-color .2s ease;
+    color: white;
 }
-.message pre button[title="copy"]:hover {
+.message .code_wrap button[title="copy"]:hover {
     background-color: #333232;
 }
-.message pre button .check {
+.message .code_wrap button .check {
     color: #fff !important;
     background: var(--neutral-950) !important;
 }