Spaces:
Sleeping
Sleeping
Keldos
commited on
Commit
·
b996b77
1
Parent(s):
95cb94b
refactor: chatbot 适配 gradio 3.36.1
Browse files- assets/custom.css +11 -11
- assets/custom.js +36 -39
- 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: .
|
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;
|
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
|
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
|
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
|
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 |
-
|
322 |
} else {
|
323 |
if (screenWidth <= 320) {
|
324 |
chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
|
325 |
-
|
326 |
} else if (screenWidth <= 499) {
|
327 |
chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
|
328 |
-
|
329 |
} else {
|
330 |
chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
|
331 |
-
|
332 |
}
|
333 |
}
|
334 |
}
|
@@ -368,12 +373,12 @@ function addChuanhuButton(botElement) {
|
|
368 |
}
|
369 |
return;
|
370 |
}
|
371 |
-
var
|
372 |
-
var
|
373 |
-
|
374 |
-
|
375 |
-
if (
|
376 |
-
if (
|
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 |
-
//
|
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')
|
461 |
saveHistoryHtml();
|
462 |
disableSendBtn();
|
463 |
-
document.querySelectorAll('#chuanhu_chatbot
|
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')
|
471 |
saveHistoryHtml();
|
472 |
disableSendBtn();
|
473 |
-
document.querySelectorAll('#chuanhu_chatbot
|
474 |
}
|
475 |
}
|
476 |
-
} else if (mmutation.type === 'attributes') {
|
477 |
-
if (
|
478 |
-
|
479 |
-
|
480 |
-
|
481 |
-
|
482 |
-
|
483 |
-
|
484 |
-
|
485 |
-
|
486 |
-
}, 500);
|
487 |
-
}
|
488 |
}
|
489 |
}
|
490 |
});
|
491 |
-
mObserver.observe(
|
492 |
|
493 |
var loadhistorytime = 0; // for debugging
|
494 |
function saveHistoryHtml() {
|
495 |
-
var historyHtml = document.querySelector('#chuanhu_chatbot
|
|
|
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-
|
22 |
-
<button class="btn-update lg primary svelte-
|
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>
|