feat: model description move to chatbot header

修复没desc也显示info的错误

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, [

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,

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__":

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">

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++) {

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;

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;