dev: 适配gradio 3.41.2

dev: 适配 gradio 3.41.0

- 修改avatar样式
- 修复gradio升级带来的代码块样式问题

config_example.json

@@ -29,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

@@ -281,8 +281,8 @@ 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"
+    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 = "NEED TO ADD"
+    user_avatar = "web_assets/user.png"

modules/presets.py

@@ -243,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",
     )

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

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

@@ -37,6 +37,7 @@
 }
 
 #netsetting-warning hr {
+    margin-top: 0.5em;
     margin-bottom: 1em;
 }
 

web_assets/stylesheet/chatbot.css

@@ -247,35 +247,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;
 }