From a0b69681650c456414fd76be32b05bf91fa15220 Mon Sep 17 00:00:00 2001
From: Keldos <hi@keldos.me>
Date: Sun, 5 May 2024 16:36:31 +0800
Subject: [PATCH] feat: model description move to chatbot header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复没desc也显示info的错误
---
 ChuanhuChatbot.py                           | 11 ++++--
 modules/models/base_model.py                |  4 +--
 modules/models/models.py                    |  5 +--
 web_assets/html/chatbot_header_btn.html     | 20 +++++++++--
 web_assets/javascript/ChuanhuChat.js        | 37 +++++++++++++++++----
 web_assets/stylesheet/ChuanhuChat.css       |  6 ++++
 web_assets/stylesheet/custom-components.css | 15 ++++++++-
 7 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/ChuanhuChatbot.py b/ChuanhuChatbot.py
index 45a88494..51f36df4 100644
--- a/ChuanhuChatbot.py
+++ b/ChuanhuChatbot.py
@@ -140,7 +140,7 @@ def create_new_model():
                         show_label=False,
                         avatar_images=[config.user_avatar, config.bot_avatar],
                         show_share_button=False,
-                        placeholder=i18n(MODEL_METADATA[MODELS[DEFAULT_MODEL]]["description"])
+                        # placeholder=i18n(MODEL_METADATA[MODELS[DEFAULT_MODEL]]["description"])
                     )
                 with gr.Row(elem_id="chatbot-footer"):
                     with gr.Column(elem_id="chatbot-input-box"):
@@ -199,6 +199,11 @@ def create_new_model():
                 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):
+                            modelDescription = gr.Markdown(
+                                elem_id="gr-model-description",
+                                value=i18n(MODEL_METADATA[MODELS[DEFAULT_MODEL]]["description"]),
+                                visible=False,
+                            )
                             keyTxt = gr.Textbox(
                                 show_label=True,
                                 placeholder=f"Your API-key...",
@@ -655,13 +660,13 @@ def create_greeting(request: gr.Request):
     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")
+                                 current_model, status_display, chatbot, lora_select_dropdown, user_api_key, keyTxt, modelDescription], show_progress=True, api_name="get_model")
     model_select_dropdown.change(toggle_like_btn_visibility, [model_select_dropdown], [
                                  like_dislike_area], show_progress=False)
     # model_select_dropdown.change(
     #     toggle_file_type, [model_select_dropdown], [index_files], 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)
+                                top_p_slider, systemPromptTxt, user_name, current_model], [current_model, status_display, chatbot, modelDescription], show_progress=True)
 
     # Template
     systemPromptTxt.change(set_system_prompt, [
diff --git a/modules/models/base_model.py b/modules/models/base_model.py
index 704c1e86..17d7b8fe 100644
--- a/modules/models/base_model.py
+++ b/modules/models/base_model.py
@@ -1052,7 +1052,7 @@ def load_chat_history(self, new_history_file_path=None):
             return (
                 os.path.basename(self.history_file_path)[:-5],
                 saved_json["system"],
-                gr.update(placeholder=i18n(self.description), value=saved_json["chatbot"]),
+                gr.update(value=saved_json["chatbot"]),
                 self.single_turn,
                 self.temperature,
                 self.top_p,
@@ -1072,7 +1072,7 @@ def load_chat_history(self, new_history_file_path=None):
             return (
                 os.path.basename(self.history_file_path),
                 self.system_prompt,
-                gr.update(placeholder=i18n(self.description), value=[]),
+                gr.update(value=[]),
                 self.single_turn,
                 self.temperature,
                 self.top_p,
diff --git a/modules/models/models.py b/modules/models/models.py
index f4731d18..e3131f45 100644
--- a/modules/models/models.py
+++ b/modules/models/models.py
@@ -151,15 +151,16 @@ def get_model(
         import traceback
         traceback.print_exc()
         msg = f"{STANDARD_ERROR_MSG}: {e}"
+    modelDescription = i18n(model.description)
     presudo_key = hide_middle_chars(access_key)
     if original_model is not None and model is not None:
         model.history = original_model.history
         model.history_file_path = original_model.history_file_path
         model.system_prompt = original_model.system_prompt
     if dont_change_lora_selector:
-        return model, msg, gr.update(label=model_name, placeholder=i18n(model.description)), gr.update(), access_key, presudo_key
+        return model, msg, gr.update(label=model_name), gr.update(), access_key, presudo_key, modelDescription
     else:
-        return model, msg, gr.update(label=model_name, placeholder=i18n(model.description)), gr.Dropdown(choices=lora_choices, visible=lora_selector_visibility), access_key, presudo_key
+        return model, msg, gr.update(label=model_name), gr.Dropdown(choices=lora_choices, visible=lora_selector_visibility), access_key, presudo_key, modelDescription
 
 
 if __name__ == "__main__":
diff --git a/web_assets/html/chatbot_header_btn.html b/web_assets/html/chatbot_header_btn.html
index 2dda88fd..bf76d696 100644
--- a/web_assets/html/chatbot_header_btn.html
+++ b/web_assets/html/chatbot_header_btn.html
@@ -1,5 +1,21 @@
 <div id="header-btn-groups">
-    <div class="btn-bar-group" style="margin-left: -12px;">
+    <div class="btn-bar-group" style="margin-left: -12px; transform: scale(0.85); transform-origin: left;">
+        <div class="nav-item-dropdown show-on-description">
+            <button id="model-description-btn" onclick="" class="chuanhu-ui-btn dropdown-trigger">
+                <svg width="24px" height="24px" viewBox="0 0 23.9038 23.9062" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <g transform-origin="center" transform="scale(0.85)">
+                        <path d="M11.9456 23.8912C18.4792 23.8912 23.9037 18.4792 23.9037 11.9456C23.9037 5.41207 18.4668 0 11.9332 0C5.40953 0-4.44089e-16 5.41207-4.44089e-16 11.9456C-4.44089e-16 18.4792 5.42197 23.8912 11.9456 23.8912ZM11.9456 21.907C6.429 21.907 2.00652 17.4746 2.00652 11.9456C2.00652 6.4166 6.41659 1.9842 11.9332 1.9842C17.4622 1.9842 21.9071 6.4166 21.9071 11.9456C21.9071 17.4746 17.4747 21.907 11.9456 21.907Z" fill="currentColor" fill-opacity="0.85"/>
+                        <path d="M9.89909 18.5091L14.6694 18.5091C15.1469 18.5091 15.5274 18.1633 15.5274 17.6759C15.5274 17.2159 15.1469 16.8552 14.6694 16.8552L13.2142 16.8552L13.2142 10.8905C13.2142 10.2565 12.8959 9.84616 12.3066 9.84616L10.093 9.84616C9.61546 9.84616 9.24744 10.2068 9.24744 10.657C9.24744 11.1419 9.61546 11.4902 10.093 11.4902L11.3542 11.4902L11.3542 16.8552L9.89909 16.8552C9.41902 16.8552 9.04109 17.2159 9.04109 17.6759C9.04109 18.1633 9.41902 18.5091 9.89909 18.5091ZM11.8463 7.89044C12.7022 7.89044 13.3741 7.21369 13.3741 6.35773C13.3741 5.5018 12.7022 4.82986 11.8463 4.82986C11.0027 4.82986 10.3184 5.5018 10.3184 6.35773C10.3184 7.21369 11.0027 7.89044 11.8463 7.89044Z" fill="currentColor" fill-opacity="0.85"/>
+                    </g>
+                </svg>
+            </button>
+            <div class="dropdown-menu dropdown-info">
+                <div id="model-description" class="dropdown-info-item">
+                    <p>No Description Found!</p>
+                </div>
+            </div>
+        </div>
+        
         <span class="show-on-gpt">
             <button id="chuanhu-training-btn" onclick="openTrainingBox()" class="chuanhu-ui-btn">
                 <!-- <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">
@@ -18,7 +34,7 @@
         </span>
     </div>
 
-    <div class="btn-bar-group">
+    <div class="btn-bar-group" style="transform: scale(0.85); transform-origin: right;">
         <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">
diff --git a/web_assets/javascript/ChuanhuChat.js b/web_assets/javascript/ChuanhuChat.js
index 4e8fbc5e..c3927b6e 100644
--- a/web_assets/javascript/ChuanhuChat.js
+++ b/web_assets/javascript/ChuanhuChat.js
@@ -17,6 +17,8 @@ var chatbotIndicator = null;
 var uploaderIndicator = null;
 var uploaderIndicator2 = null;
 var chatListIndicator = null;
+var modelSelectIndicator = null;
+
 var chatbotWrap = null;
 var apSwitch = null;
 var messageBotDivs = null;
@@ -29,6 +31,7 @@ var cancelBtn = null;
 var updateChuanhuBtn = null;
 var rebootChuanhuBtn = null;
 var statusDisplay = null;
+var grModelDescDiv = null;
 
 var historySelector = null;
 var chuanhuPopup = null;
@@ -52,6 +55,7 @@ function addInit() {
     uploaderIndicator = gradioApp().querySelector('#upload-index-file > div.wrap');
     uploaderIndicator2 = gradioApp().querySelector('#upload-index-file');
     chatListIndicator = gradioApp().querySelector('#history-select-dropdown > div.wrap');
+    modelSelectIndicator = gradioApp().querySelector('#gr-model-description > div.wrap');
 
     for (let elem in needInit) {
         if (needInit[elem] == null) {
@@ -62,6 +66,7 @@ function addInit() {
 
     chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
     chatListObserver.observe(chatListIndicator, { attributes: true });
+    modelSelectObserver.observe(modelSelectIndicator, { attributes: true });
     setUploader();
     setPasteUploader();
     setDragUploader();
@@ -96,6 +101,7 @@ function initialize() {
     chuanhuHeader = gradioApp().querySelector('#chuanhu-header');
     menu = gradioApp().querySelector('#menu-area');
     toolbox = gradioApp().querySelector('#toolbox-area');
+    grModelDescDiv = gradioApp().querySelector('#gr-model-description');
     // trainBody = gradioApp().querySelector('#train-body');
 
     // if (loginUserForm) {
@@ -217,6 +223,7 @@ function checkModel() {
     var modelValue = model.value;
     checkGPT();
     checkXMChat();
+    checkDescription();
     function checkGPT() {
         modelValue = model.value;
         if (modelValue.toLowerCase().includes('gpt')) {
@@ -234,13 +241,25 @@ function checkModel() {
             chatbotArea.classList.remove('is-xmchat');
         }
     }
-
-    model.addEventListener('blur', ()=>{
-        setTimeout(()=>{
-            checkGPT();
-            checkXMChat();
-        }, 100);
-    });
+    function checkDescription() {
+        modelValue = model.value;
+        let grModelDesc = grModelDescDiv.innerText;
+        let modelDesc = gradioApp().querySelector('#model-description p');
+        if (grModelDesc && !grModelDesc.includes('0.0s') && !grModelDesc.includes('processing') && grModelDesc.trim() !== "") {
+            chatbotArea.classList.add('has-description');
+            modelDesc.innerText = grModelDesc;
+        } else {
+            chatbotArea.classList.remove('has-description');
+            modelDesc.innerText = "No Description Found!";
+        }
+    }
+    // model.addEventListener('blur', ()=>{
+    //     setTimeout(()=>{
+    //         checkGPT();
+    //         checkXMChat();
+    //         checkDescription();
+    //     }, 100);
+    // });
 }
 
 function toggleDarkMode(isEnabled) {
@@ -404,6 +423,10 @@ var chatListObserver = new MutationObserver(() => {
     setChatList();
 });
 
+var modelSelectObserver = new MutationObserver(() => {
+    checkModel();
+});
+
 // 监视页面内部 DOM 变动
 var gradioObserver = new MutationObserver(function (mutations) {
     for (var i = 0; i < mutations.length; i++) {
diff --git a/web_assets/stylesheet/ChuanhuChat.css b/web_assets/stylesheet/ChuanhuChat.css
index d5ffc695..b35105b9 100644
--- a/web_assets/stylesheet/ChuanhuChat.css
+++ b/web_assets/stylesheet/ChuanhuChat.css
@@ -418,6 +418,12 @@ body.popup-open {
     /* visibility: visible; */
     display: block;
 }
+.show-on-description {
+    display: none;
+}
+.has-description .show-on-description {
+    display: block;
+}
 
 #chatbot-footer {
     position: absolute;
diff --git a/web_assets/stylesheet/custom-components.css b/web_assets/stylesheet/custom-components.css
index 8b0016e6..93d8244e 100644
--- a/web_assets/stylesheet/custom-components.css
+++ b/web_assets/stylesheet/custom-components.css
@@ -353,12 +353,25 @@ input:checked + .apSlider::before {
     display: none;
     opacity: 0;
     transition: opacity 0.5s ease;
-    font-size: small;
+    /* font-size: small; */
     width: auto;
     border-radius: 5px;
     box-shadow: var(--shadow-sm);
 }
 
+.dropdown-menu.dropdown-info {
+    top: 3rem;
+}
+
+.dropdown-info-item {
+    padding: 8px 12px;
+    text-align: start;
+    margin: 0 !important;
+    width: min(400px, 60dvw);
+}
+.dropdown-info-item p {
+    margin: 0 !important;
+}
 .dropdown-menu-item {
     cursor: pointer;
     padding: 8px 12px;