Keldos commited on
Commit
b996b77
·
1 Parent(s): 95cb94b

refactor: chatbot 适配 gradio 3.36.1

Browse files
Files changed (3) hide show
  1. assets/custom.css +11 -11
  2. assets/custom.js +36 -39
  3. assets/html/update.html +2 -2
assets/custom.css CHANGED
@@ -97,20 +97,20 @@ footer {
97
  display: none;
98
  }
99
  /* user_info */
100
- #user_info {
101
  white-space: nowrap;
102
- position: absolute; left: 8em; top: .2em;
103
  z-index: var(--layer-2);
104
  box-shadow: var(--block-shadow);
105
- border: none; border-radius: var(--block-label-radius);
106
  background: var(--color-accent);
107
  padding: var(--block-label-padding);
108
  font-size: var(--block-label-text-size); line-height: var(--line-sm);
109
- width: auto; min-height: 30px!important;
110
  opacity: 1;
111
  transition: opacity 0.3s ease-in-out;
112
  }
113
- #user_info .wrap {
114
  opacity: 0;
115
  }
116
  #user_info p {
@@ -341,7 +341,7 @@ ol:not(.options), ul:not(.options) {
341
  #chuanhu_chatbot {
342
  height: calc(100vh - 200px);
343
  }
344
- #chuanhu_chatbot .wrap {
345
  max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
346
  }
347
  }
@@ -350,7 +350,7 @@ ol:not(.options), ul:not(.options) {
350
  #chuanhu_chatbot {
351
  height: calc(100vh - 140px);
352
  }
353
- #chuanhu_chatbot .wrap {
354
  max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
355
  }
356
  [data-testid = "bot"] {
@@ -360,7 +360,7 @@ ol:not(.options), ul:not(.options) {
360
  letter-spacing: -1px; font-size: 22px;
361
  }
362
  }
363
- #chuanhu_chatbot .wrap {
364
  overflow-x: hidden;
365
  }
366
  /* 对话气泡 */
@@ -456,7 +456,7 @@ ol:not(.options), ul:not(.options) {
456
  }
457
 
458
  /* history message */
459
- .wrap>.history-message {
460
  padding: 10px !important;
461
  }
462
  .history-message {
@@ -475,7 +475,7 @@ ol:not(.options), ul:not(.options) {
475
  .history-message>.message {
476
  margin-bottom: 16px;
477
  }
478
- .wrap>.history-message::after {
479
  content: "";
480
  display: block;
481
  height: 2px;
@@ -484,7 +484,7 @@ ol:not(.options), ul:not(.options) {
484
  margin-top: -10px;
485
  clear: both;
486
  }
487
- .wrap>.history-message>:last-child::after {
488
  content: "仅供查看";
489
  display: block;
490
  text-align: center;
 
97
  display: none;
98
  }
99
  /* user_info */
100
+ #user_info.block {
101
  white-space: nowrap;
102
+ position: absolute; left: 8em; top: .8em;
103
  z-index: var(--layer-2);
104
  box-shadow: var(--block-shadow);
105
+ border: none!important; border-radius: var(--block-label-radius);
106
  background: var(--color-accent);
107
  padding: var(--block-label-padding);
108
  font-size: var(--block-label-text-size); line-height: var(--line-sm);
109
+ width: auto; max-height: 30px!important;
110
  opacity: 1;
111
  transition: opacity 0.3s ease-in-out;
112
  }
113
+ #user_info.block .wrap {
114
  opacity: 0;
115
  }
116
  #user_info p {
 
341
  #chuanhu_chatbot {
342
  height: calc(100vh - 200px);
343
  }
344
+ #chuanhu_chatbot>.wrapper>.wrap {
345
  max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
346
  }
347
  }
 
350
  #chuanhu_chatbot {
351
  height: calc(100vh - 140px);
352
  }
353
+ #chuanhu_chatbot>.wrapper>.wrap {
354
  max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
355
  }
356
  [data-testid = "bot"] {
 
360
  letter-spacing: -1px; font-size: 22px;
361
  }
362
  }
363
+ #chuanhu_chatbot>.wrapper>.wrap {
364
  overflow-x: hidden;
365
  }
366
  /* 对话气泡 */
 
456
  }
457
 
458
  /* history message */
459
+ .wrapper>.wrap>.history-message {
460
  padding: 10px !important;
461
  }
462
  .history-message {
 
475
  .history-message>.message {
476
  margin-bottom: 16px;
477
  }
478
+ .wrapper>.wrap>.history-message::after {
479
  content: "";
480
  display: block;
481
  height: 2px;
 
484
  margin-top: -10px;
485
  clear: both;
486
  }
487
+ .wrapper>.wrap>.history-message>:last-child::after {
488
  content: "仅供查看";
489
  display: block;
490
  text-align: center;
assets/custom.js CHANGED
@@ -20,6 +20,7 @@ var loginUserForm = null;
20
  var logginUser = null;
21
  var updateToast = null;
22
  var sendBtn = null;
 
23
 
24
  var userLogged = false;
25
  var usernameGotten = false;
@@ -70,10 +71,11 @@ function gradioLoaded(mutations) {
70
  userInfoDiv = document.getElementById("user_info");
71
  appTitleDiv = document.getElementById("app_title");
72
  chatbot = document.querySelector('#chuanhu_chatbot');
73
- chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
74
  apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
75
  updateToast = document.querySelector("#toast-update");
76
  sendBtn = document.getElementById("submit_btn");
 
77
 
78
  if (loginUserForm) {
79
  localStorage.setItem("userLogged", true);
@@ -100,6 +102,10 @@ function gradioLoaded(mutations) {
100
  loadHistoryHtml();
101
  }
102
  setChatbotScroll();
 
 
 
 
103
  }
104
  if (updateToast) {
105
  const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
@@ -117,7 +123,7 @@ function webLocale() {
117
  if (forView_i18n.hasOwnProperty(language)) {
118
  var forView = forView_i18n[language];
119
  var forViewStyle = document.createElement('style');
120
- forViewStyle.innerHTML = '.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
121
  document.head.appendChild(forViewStyle);
122
  }
123
  if (deleteConfirm_i18n_pref.hasOwnProperty(language)) {
@@ -313,22 +319,21 @@ function setChatbotHeight() {
313
  const screenWidth = window.innerWidth;
314
  const statusDisplay = document.querySelector('#status_display');
315
  const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
316
- const wrap = chatbot.querySelector('.wrap');
317
  const vh = window.innerHeight * 0.01;
318
  document.documentElement.style.setProperty('--vh', `${vh}px`);
319
  if (isInIframe) {
320
  chatbot.style.height = `700px`;
321
- wrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
322
  } else {
323
  if (screenWidth <= 320) {
324
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
325
- wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
326
  } else if (screenWidth <= 499) {
327
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
328
- wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
329
  } else {
330
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
331
- wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
332
  }
333
  }
334
  }
@@ -368,12 +373,12 @@ function addChuanhuButton(botElement) {
368
  }
369
  return;
370
  }
371
- var copyButton = null;
372
- var toggleButton = null;
373
- copyButton = botElement.querySelector('button.copy-bot-btn');
374
- toggleButton = botElement.querySelector('button.toggle-md-btn');
375
- if (copyButton) copyButton.remove();
376
- if (toggleButton) toggleButton.remove();
377
 
378
  // Copy bot button
379
  var copyButton = document.createElement('button');
@@ -383,7 +388,6 @@ function addChuanhuButton(botElement) {
383
  copyButton.innerHTML = copyIcon;
384
  copyButton.addEventListener('click', async () => {
385
  const textToCopy = rawMessage.innerText;
386
-
387
  try {
388
  if ("clipboard" in navigator) {
389
  await navigator.clipboard.writeText(textToCopy);
@@ -394,10 +398,8 @@ function addChuanhuButton(botElement) {
394
  } else {
395
  const textArea = document.createElement("textarea");
396
  textArea.value = textToCopy;
397
-
398
  document.body.appendChild(textArea);
399
  textArea.select();
400
-
401
  try {
402
  document.execCommand('copy');
403
  copyButton.innerHTML = copiedIcon;
@@ -407,7 +409,6 @@ function addChuanhuButton(botElement) {
407
  } catch (error) {
408
  console.error("Copy failed: ", error);
409
  }
410
-
411
  document.body.removeChild(textArea);
412
  }
413
  } catch (error) {
@@ -452,47 +453,43 @@ function removeMarkdownText(message) {
452
  let timeoutId;
453
  let isThrottled = false;
454
  var mmutation
455
- // 监听所有元素中 bot message 的变化,为 bot 消息添加复制按钮。
456
  var mObserver = new MutationObserver(function (mutationsList) {
457
  for (mmutation of mutationsList) {
458
  if (mmutation.type === 'childList') {
459
  for (var node of mmutation.addedNodes) {
460
- if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
461
  saveHistoryHtml();
462
  disableSendBtn();
463
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
464
- }
465
- if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
466
- setSlider();
467
  }
468
  }
469
  for (var node of mmutation.removedNodes) {
470
- if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
471
  saveHistoryHtml();
472
  disableSendBtn();
473
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
474
  }
475
  }
476
- } else if (mmutation.type === 'attributes') {
477
- if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
478
- if (isThrottled) break; // 为了防止重复不断疯狂渲染,加上等待_(:з」∠)_
479
- isThrottled = true;
480
- clearTimeout(timeoutId);
481
- timeoutId = setTimeout(() => {
482
- isThrottled = false;
483
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
484
- saveHistoryHtml();
485
- disableSendBtn();
486
- }, 500);
487
- }
488
  }
489
  }
490
  });
491
- mObserver.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
492
 
493
  var loadhistorytime = 0; // for debugging
494
  function saveHistoryHtml() {
495
- var historyHtml = document.querySelector('#chuanhu_chatbot > .wrap');
 
496
  localStorage.setItem('chatHistory', historyHtml.innerHTML);
497
  // console.log("History Saved")
498
  historyLoaded = false;
 
20
  var logginUser = null;
21
  var updateToast = null;
22
  var sendBtn = null;
23
+ var sliders = null;
24
 
25
  var userLogged = false;
26
  var usernameGotten = false;
 
71
  userInfoDiv = document.getElementById("user_info");
72
  appTitleDiv = document.getElementById("app_title");
73
  chatbot = document.querySelector('#chuanhu_chatbot');
74
+ chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrapper > .wrap');
75
  apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
76
  updateToast = document.querySelector("#toast-update");
77
  sendBtn = document.getElementById("submit_btn");
78
+ sliders = document.querySelectorAll('input[type="range"]');
79
 
80
  if (loginUserForm) {
81
  localStorage.setItem("userLogged", true);
 
102
  loadHistoryHtml();
103
  }
104
  setChatbotScroll();
105
+ mObserver.observe(chatbotWrap, { attributes: true, childList: true, subtree: true, characterData: true});
106
+ }
107
+ if (sliders) {
108
+ setSlider();
109
  }
110
  if (updateToast) {
111
  const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
 
123
  if (forView_i18n.hasOwnProperty(language)) {
124
  var forView = forView_i18n[language];
125
  var forViewStyle = document.createElement('style');
126
+ forViewStyle.innerHTML = '.wrapper>.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
127
  document.head.appendChild(forViewStyle);
128
  }
129
  if (deleteConfirm_i18n_pref.hasOwnProperty(language)) {
 
319
  const screenWidth = window.innerWidth;
320
  const statusDisplay = document.querySelector('#status_display');
321
  const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
 
322
  const vh = window.innerHeight * 0.01;
323
  document.documentElement.style.setProperty('--vh', `${vh}px`);
324
  if (isInIframe) {
325
  chatbot.style.height = `700px`;
326
+ chatbotWrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
327
  } else {
328
  if (screenWidth <= 320) {
329
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
330
+ chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
331
  } else if (screenWidth <= 499) {
332
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
333
+ chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
334
  } else {
335
  chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
336
+ chatbotWrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
337
  }
338
  }
339
  }
 
373
  }
374
  return;
375
  }
376
+ var oldCopyButton = null;
377
+ var oldToggleButton = null;
378
+ oldCopyButton = botElement.querySelector('button.copy-bot-btn');
379
+ oldToggleButton = botElement.querySelector('button.toggle-md-btn');
380
+ if (oldCopyButton) oldCopyButton.remove();
381
+ if (oldToggleButton) oldToggleButton.remove();
382
 
383
  // Copy bot button
384
  var copyButton = document.createElement('button');
 
388
  copyButton.innerHTML = copyIcon;
389
  copyButton.addEventListener('click', async () => {
390
  const textToCopy = rawMessage.innerText;
 
391
  try {
392
  if ("clipboard" in navigator) {
393
  await navigator.clipboard.writeText(textToCopy);
 
398
  } else {
399
  const textArea = document.createElement("textarea");
400
  textArea.value = textToCopy;
 
401
  document.body.appendChild(textArea);
402
  textArea.select();
 
403
  try {
404
  document.execCommand('copy');
405
  copyButton.innerHTML = copiedIcon;
 
409
  } catch (error) {
410
  console.error("Copy failed: ", error);
411
  }
 
412
  document.body.removeChild(textArea);
413
  }
414
  } catch (error) {
 
453
  let timeoutId;
454
  let isThrottled = false;
455
  var mmutation
456
+ // 监听所有gradio元素的变化,为 bot 消息添加复制按钮。
457
  var mObserver = new MutationObserver(function (mutationsList) {
458
  for (mmutation of mutationsList) {
459
  if (mmutation.type === 'childList') {
460
  for (var node of mmutation.addedNodes) {
461
+ if (node.nodeType === 1 && node.classList.contains('message')) {
462
  saveHistoryHtml();
463
  disableSendBtn();
464
+ document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
 
 
 
465
  }
466
  }
467
  for (var node of mmutation.removedNodes) {
468
+ if (node.nodeType === 1 && node.classList.contains('message')) {
469
  saveHistoryHtml();
470
  disableSendBtn();
471
+ document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
472
  }
473
  }
474
+ } else if (mmutation.type === 'attributes' || mmutation.type === 'characterData') {
475
+ if (isThrottled) break; // 为了防止重复不断疯狂渲染,加上等待_(:з」∠)_
476
+ isThrottled = true;
477
+ clearTimeout(timeoutId);
478
+ timeoutId = setTimeout(() => {
479
+ isThrottled = false;
480
+ document.querySelectorAll('#chuanhu_chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
481
+ saveHistoryHtml();
482
+ disableSendBtn();
483
+ }, 1500);
 
 
484
  }
485
  }
486
  });
487
+ // mObserver.observe(targetNode, { attributes: true, childList: true, subtree: true, characterData: true});
488
 
489
  var loadhistorytime = 0; // for debugging
490
  function saveHistoryHtml() {
491
+ var historyHtml = document.querySelector('#chuanhu_chatbot>.wrapper>.wrap');
492
+ if (!historyHtml) return; // no history, do nothing
493
  localStorage.setItem('chatHistory', historyHtml.innerHTML);
494
  // console.log("History Saved")
495
  historyLoaded = false;
assets/html/update.html CHANGED
@@ -18,8 +18,8 @@
18
  <button class="btn-update lg primary svelte-1ipelgc" id="update-button" onclick="getUpdate()">{update_btn}</button>
19
  </div>
20
  <div id="close-update-btn" class="btn-update-group hideK">
21
- <button class="btn-update lg secondary svelte-1ipelgc" id="update-button" onclick="getUpdate()">{seenew_btn}</button>
22
- <button class="btn-update lg primary svelte-1ipelgc" id="cancel-button" onclick="cancelUpdate()">{ok_btn}</button>
23
  </div>
24
  </div>
25
  </div>
 
18
  <button class="btn-update lg primary svelte-1ipelgc" id="update-button" onclick="getUpdate()">{update_btn}</button>
19
  </div>
20
  <div id="close-update-btn" class="btn-update-group hideK">
21
+ <button class="btn-update lg secondary svelte-1jrzxu" id="update-button" onclick="getUpdate()">{seenew_btn}</button>
22
+ <button class="btn-update lg primary svelte-1jrzxu" id="cancel-button" onclick="cancelUpdate()">{ok_btn}</button>
23
  </div>
24
  </div>
25
  </div>