dev (refactor): 适配gradio3.41.0的avatar

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(),
@@ -57,7 +57,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
     with gr.Row(equal_height=True):
         with gr.Column(scale=5):
             with gr.Row():
-                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700)
+                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700, avatar_images=[config.user_avatar, config.bot_avatar])
             with gr.Row():
                 with gr.Column(min_width=225, scale=12):
                     user_input = gr.Textbox(

modules/config.py

@@ -277,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 = "NEED TO ADD"

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

@@ -27,24 +27,27 @@ var statusDisplay = null;
 
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
-var initialized = false;
 
-// 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};
-    initialized = true;
+    gradioObserver.observe(gradioApp(), { childList: true, subtree: true });
 
     loginUserForm = gradioApp().querySelector(".gradio-container > .main > .wrap > .panel > .form")
     gradioContainer = gradioApp().querySelector(".gradio-container");
@@ -52,7 +55,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");
@@ -67,31 +69,22 @@ function initialize() {
         userLogged = true;
     }
 
-    for (let elem in needInit) {
-        if (needInit[elem] == null) {
-            initialized = false;
-            return;
-        }
-    }
+    adjustDarkMode();
+    selectHistory();
+    setTimeout(showOrHideUserInfo(), 2000);
+    setChatbotHeight();
+    setChatbotScroll();
+    setSlider();
 
-    if (initialized) {
-        adjustDarkMode();
-        selectHistory();
-        setTimeout(showOrHideUserInfo(), 2000);
-        setChatbotHeight();
-        setChatbotScroll();
-        setSlider();
-        setAvatar();
-        if (!historyLoaded) loadHistoryHtml();
-        if (!usernameGotten) getUserInfo();
-        chatbotObserver.observe(chatbotIndicator, { attributes: true });
+    if (!historyLoaded) loadHistoryHtml();
+    if (!usernameGotten) getUserInfo();
 
-        const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
-        const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
-        if (longTimeNoCheck && !updateInfoGotten && !isLatestVersion || isLatestVersion && !updateInfoGotten) {
-            updateLatestVersion();
-        }
+    const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
+    const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
+    if (longTimeNoCheck && !updateInfoGotten && !isLatestVersion || isLatestVersion && !updateInfoGotten) {
+        updateLatestVersion();
     }
+    return true;
 }
 
 function gradioApp() {
@@ -221,33 +214,9 @@ 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) {
@@ -256,15 +225,14 @@ function chatbotContentChanged(attempt = 1) {
             // 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后再次执行
 }
 
 var chatbotObserver = new MutationObserver(() => {
-    clearMessageRows();
     chatbotContentChanged(1);
     if (chatbotIndicator.classList.contains('hide')) {
         chatbotContentChanged(2);
@@ -272,14 +240,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,53 +0,0 @@
-
-function addAvatars(messageElement, role='user'||'bot') {
-    if(messageElement.innerHTML === '') {
-        return;
-    }
-    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) => {
-        if (messageRow.innerText === '') {
-            messageRow.parentNode.removeChild(messageRow);
-        }
-    });
-}

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的设备 */
@@ -245,7 +248,7 @@ hr.append-display {
 } */
 
 
-.message-row {
+/* .message-row {
     flex-direction: row;
     display: flex;
     gap: 8px;
@@ -275,4 +278,4 @@ hr.append-display {
     object-fit: cover;
     width: 100%;
     height: 100%;
-}
+} */