diff --git a/__main__.py b/__main__.py index 33aa1ec..6e5a3b2 100644 --- a/__main__.py +++ b/__main__.py @@ -79,6 +79,7 @@ class ChatBot(ChatBotFrame): with gr.Box(elem_id='chat_box'): with gr.Row(): gr.Button(elem_classes='sm_btn').style(size='sm', full_width=False) + gr.HTML(func_box.get_html("appearance_switcher.html").format(label=""), elem_classes="insert_block") with gr.Row(): self.txt = gr.Textbox(show_label=False, placeholder="Input question here.", elem_classes='chat_input').style(container=False) self.input_copy = gr.State('') diff --git a/docs/assets/custom.css b/docs/assets/custom.css index ec232c0..6448286 100644 --- a/docs/assets/custom.css +++ b/docs/assets/custom.css @@ -96,6 +96,14 @@ mspace { .sm_btn { position: relative; bottom: 5px; + height: 10%; + border-radius: 20px!important; + min-width: min(10%,100%) !important; +} +/* usage_display */ +.insert_block { + position: relative; + bottom: 2px; min-width: min(110px,100%) !important; } @@ -277,20 +285,7 @@ textarea.svelte-1pie7s6 { font-size: 12px !important; } -/* usage_display */ -.insert_block { - position: relative; - margin: 0; - padding: .5em 1em; - box-shadow: var(--block-shadow); - border-width: var(--block-border-width); - border-color: var(--block-border-color); - border-radius: var(--block-radius); - background: var(--block-background-fill); - width: 100%; - line-height: var(--line-sm); - min-height: 2em; -} + #usage_display p, #usage_display span { margin: 0; font-size: .85em; diff --git a/docs/assets/custom.js b/docs/assets/custom.js index 826a785..84e0068 100644 --- a/docs/assets/custom.js +++ b/docs/assets/custom.js @@ -6,6 +6,7 @@ const MAX_HISTORY_LENGTH = 32; var key_down_history = []; var currentIndex = -1; var user_input_ta; + var gradioContainer = null; var user_input_ta = null; var chat_txt = null; @@ -70,17 +71,20 @@ function gradioLoaded(mutations) { adjustDarkMode(); } if (chat_txt) { // chat_txt 加载出来了没? + selectHistory(); } if (userInfoDiv && appTitleDiv) { // userInfoDiv 和 appTitleDiv 加载出来了没? if (!usernameGotten) { getUserInfo(); } + setTimeout(showOrHideUserInfo(), 2000); } if (chatbot) { // chatbot 加载出来了没? setChatbotHeight(); } if (chatbotWrap) { if (!historyLoaded) { + loadHistoryHtml(); } setChatbotScroll(); } @@ -112,6 +116,54 @@ function showConfirmationDialog(a, file, c) { return [a, "CANCELED", c]; } +function selectHistory() { + user_input_ta = chat_txt.querySelector("textarea"); + if (user_input_ta) { + observer.disconnect(); // 停止监听 + // 在 textarea 上监听 keydown 事件 + user_input_ta.addEventListener("keydown", function (event) { + var value = user_input_ta.value.trim(); + // 判断按下的是否为方向键 + if (event.code === 'ArrowUp' || event.code === 'ArrowDown') { + // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作 + if (value && key_down_history.indexOf(value) === -1) + return; + // 对于需要响应的动作，阻止默认行为。 + event.preventDefault(); + var length = key_down_history.length; + if (length === 0) { + currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置 + return; + } + if (currentIndex === -1) { + currentIndex = length; + } + if (event.code === 'ArrowUp' && currentIndex > 0) { + currentIndex--; + user_input_ta.value = key_down_history[currentIndex]; + } else if (event.code === 'ArrowDown' && currentIndex < length - 1) { + currentIndex++; + user_input_ta.value = key_down_history[currentIndex]; + } + user_input_ta.selectionStart = user_input_ta.value.length; + user_input_ta.selectionEnd = user_input_ta.value.length; + const input_event = new InputEvent("input", { bubbles: true, cancelable: true }); + user_input_ta.dispatchEvent(input_event); + } else if (event.code === "Enter") { + if (value) { + currentIndex = -1; + if (key_down_history.indexOf(value) === -1) { + key_down_history.push(value); + if (key_down_history.length > MAX_HISTORY_LENGTH) { + key_down_history.shift(); + } + } + } + } + }); + } +} + var username = null; function getUserInfo() { if (usernameGotten) { @@ -134,6 +186,7 @@ function getUserInfo() { username = username.match(/User:\s*(.*)/)[1] || username; localStorage.setItem("username", username); usernameGotten = true; + clearHistoryHtml(); } } } @@ -360,6 +413,7 @@ var mObserver = new MutationObserver(function (mutationsList) { if (mmutation.type === 'childList') { for (var node of mmutation.addedNodes) { if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') { + saveHistoryHtml(); document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton); } if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') { @@ -368,6 +422,7 @@ var mObserver = new MutationObserver(function (mutationsList) { } for (var node of mmutation.removedNodes) { if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') { + saveHistoryHtml(); document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton); } } @@ -379,6 +434,7 @@ var mObserver = new MutationObserver(function (mutationsList) { timeoutId = setTimeout(() => { isThrottled = false; document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton); + saveHistoryHtml(); }, 500); } } @@ -386,12 +442,71 @@ var mObserver = new MutationObserver(function (mutationsList) { }); mObserver.observe(document.documentElement, { attributes: true, childList: true, subtree: true }); +var loadhistorytime = 0; // for debugging +function saveHistoryHtml() { + var historyHtml = document.querySelector('#main_chatbot > .wrap'); + localStorage.setItem('chatHistory', historyHtml.innerHTML); + // console.log("History Saved") + historyLoaded = false; +} +function loadHistoryHtml() { + var historyHtml = localStorage.getItem('chatHistory'); + if (!historyHtml) { + historyLoaded = true; + return; // no history, do nothing + } + userLogged = localStorage.getItem('userLogged'); + if (userLogged){ + historyLoaded = true; + return; // logged in, do nothing + } + if (!historyLoaded) { + var tempDiv = document.createElement('div'); + tempDiv.innerHTML = historyHtml; + var buttons = tempDiv.querySelectorAll('button.chuanhu-btn'); + var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button'); + for (var i = 0; i < buttons.length; i++) { + buttons[i].parentNode.removeChild(buttons[i]); + } + for (var i = 0; i < gradioCopyButtons.length; i++) { + gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]); + } + var fakeHistory = document.createElement('div'); + fakeHistory.classList.add('history-message'); + fakeHistory.innerHTML = tempDiv.innerHTML; + webLocale(); + chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild); + // var fakeHistory = document.createElement('div'); + // fakeHistory.classList.add('history-message'); + // fakeHistory.innerHTML = historyHtml; + // chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild); + historyLoaded = true; + console.log("History Loaded"); + loadhistorytime += 1; // for debugging + } else { + historyLoaded = false; + } +} +function clearHistoryHtml() { + localStorage.removeItem("chatHistory"); + historyMessages = chatbotWrap.querySelector('.history-message'); + if (historyMessages) { + chatbotWrap.removeChild(historyMessages); + console.log("History Cleared"); + } +} + // 监视页面内部 DOM 变动 var observer = new MutationObserver(function (mutations) { gradioLoaded(mutations); }); observer.observe(targetNode, { childList: true, subtree: true }); +// 监视页面变化 +window.addEventListener("DOMContentLoaded", function () { + isInIframe = (window.self !== window.top); + historyLoaded = false; +}); window.addEventListener('resize', setChatbotHeight); window.addEventListener('scroll', setChatbotHeight); window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode); diff --git a/func_box.py b/func_box.py index f1150a4..6113e28 100644 --- a/func_box.py +++ b/func_box.py @@ -649,8 +649,12 @@ def update_txt(self, } -def txtx(f, q): - return f +def get_html(filename): + path = os.path.join(base_path, "docs/assets", "html", filename) + if os.path.exists(path): + with open(path, encoding="utf8") as file: + return file.read() + return "" def git_log_list():