feat: add avatars to bot and user messages (#867)

* add avatars to bot and user messages
* set default avatar for user and chatbot and fix a bug

ChuanhuChatbot.py

@@ -36,12 +36,13 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
     current_model = gr.State(create_new_model)
 
     topic = gr.State(i18n("未命名对话历史记录"))
-
+    
     with gr.Row():
         gr.HTML(CHUANHU_TITLE, elem_id="app-title")
         status_display = gr.Markdown(get_geoip(), elem_id="status-display")
     with gr.Row(elem_id="float-display"):
         user_info = gr.Markdown(value="getting user info...", elem_id="user-info")
+        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")
         update_info = gr.HTML(get_html("update.html").format(
             current_version=repo_tag_html(),
             version_time=version_time(),
@@ -300,6 +301,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
                         updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
 
+    
     gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
     gr.HTML(get_html("footer.html").format(versions=versions_html()), elem_id="footer")
 
@@ -381,7 +383,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         inputs=[current_model],
         outputs=[chatbot, status_display],
         show_progress=True,
-        _js='clearHistoryHtml',
+        _js='clearChatbot',
     )
 
     retryBtn.click(**start_outputing_args).then(

config_example.json

@@ -24,6 +24,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"（不显示头像）
 
     //== API 用量 ==
     "show_api_billing": false, //是否显示OpenAI API用量（启用需要填写sensitive_id）

modules/config.py

@@ -261,3 +261,7 @@ except ValueError:
     pass
 
 share = config.get("share", False)
+
+# avatar
+bot_avatar = config.get("bot_avatar", "default")
+user_avatar = config.get("user_avatar", "default")

web_assets/html/config_info.html

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

web_assets/javascript/ChuanhuChat.js

@@ -25,7 +25,6 @@ var sliders = null;
 var updateChuanhuBtn = null;
 var statusDisplay = null;
 
-
 var isInIframe = (window.self !== window.top);
 var currentTime = new Date().getTime();
 var initialized = false;
@@ -82,6 +81,7 @@ function initialize() {
         setChatbotHeight();
         setChatbotScroll();
         setSlider();
+        setAvatar();
         if (!historyLoaded) loadHistoryHtml();
         if (!usernameGotten) getUserInfo();
         chatbotObserver.observe(chatbotIndicator, { attributes: true });
@@ -221,19 +221,49 @@ 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();
+}
 
 function chatbotContentChanged(attempt = 1) {
     for (var i = 0; i < attempt; i++) {
         setTimeout(() => {
             saveHistoryHtml();
             disableSendBtn();
-            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+            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)});
         }, i === 0 ? 0 : 500);
     }
     // 理论上是不需要多次尝试执行的，可惜gradio的bug导致message可能没有渲染完毕，所以尝试500ms后再次执行
 }
 
 var chatbotObserver = new MutationObserver(() => {
+    chatbotContentChanged(1);
     if (chatbotIndicator.classList.contains('hide')) {
         chatbotContentChanged(2);
     }

web_assets/javascript/avatar.js

@@ -0,0 +1,48 @@
+
+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/utils.js

@@ -21,6 +21,22 @@ function transEventListeners(target, source, events) {
 }
 
 
+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;
+}
+
+
 /* NOTE: These reload functions are not used in the current version of the code.
  *       From stable-diffusion-webui
  */

web_assets/stylesheet/chatbot.css

@@ -84,13 +84,13 @@ hr.append-display {
     min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
 }
 [data-testid = "bot"] {
-    max-width: 85%;
-    border-bottom-left-radius: 0 !important;
+    max-width: calc(85% - 38px);
+    border-top-left-radius: 0 !important;
 }
 [data-testid = "user"] {
-    max-width: 85%;
+    max-width: calc(85% - 38px);
     width: auto !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0 !important;
 }
 
 /* 屏幕宽度大于等于500px的设备 */
@@ -112,7 +112,10 @@ hr.append-display {
         max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     }
     [data-testid = "bot"] {
-        max-width: 95% !important;
+        max-width: calc(98% - 20px) !important;
+    }
+    .chatbot-avatar {
+        display: none;
     }
     #app-title h1{
         letter-spacing: -1px; font-size: 22px;
@@ -201,7 +204,7 @@ hr.append-display {
 
 /* history message */
 .wrapper>.wrap>.history-message {
-    padding: 10px !important;
+    padding-bottom: 10px !important;
 }
 .history-message {
     /* padding: 0 !important; */
@@ -239,4 +242,37 @@ hr.append-display {
 /* #chuanhu-chatbot {
     transition: height 0.3s ease;
     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;
+}
+.chatbot-avatar {
+    width: 32px;
+    height: 32px;
+    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: fill;
+    max-width: 100%;
+    max-height: 100%;
+}

web_assets/stylesheet/markdown.css

@@ -1,5 +1,5 @@
 
-.message-wrap>div img{
+.md-message img{
     border-radius: 10px !important;
 }