diff --git a/main.py b/main.py index 4858cd7712..daf004476e 100644 --- a/main.py +++ b/main.py @@ -291,10 +291,8 @@ def fn_area_visibility_2(a): click_handle = btn.click(fn=ArgsGeneralWrapper(predict), inputs=[*input_combo, gr.State(True), gr.State(btn.value)], outputs=output_combo) cancel_handles.append(click_handle) # 文件上传区,接收文件后与chatbot的互动 - file_upload.upload(on_file_uploaded, [file_upload, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies]) - file_upload.upload(None, None, None, _js=r"()=>{toast_push('上传完毕, 请等待文件清单展现后继续操作 ...'); cancel_loading_status();}") - file_upload_2.upload(on_file_uploaded, [file_upload_2, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies]) - file_upload_2.upload(None, None, None, _js=r"()=>{toast_push('上传完毕, 请等待文件清单展现后继续操作 ...'); cancel_loading_status();}") + file_upload.upload(on_file_uploaded, [file_upload, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies]).then(None, None, None, _js=r"()=>{toast_push('上传完毕 ...'); cancel_loading_status();}") + file_upload_2.upload(on_file_uploaded, [file_upload_2, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies]).then(None, None, None, _js=r"()=>{toast_push('上传完毕 ...'); cancel_loading_status();}") # 函数插件-固定按钮区 for k in plugins: if not plugins[k].get("AsButton", True): continue diff --git a/themes/common.js b/themes/common.js index e569178efa..bbe0eb4965 100644 --- a/themes/common.js +++ b/themes/common.js @@ -1,3 +1,7 @@ +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 1 部分: 工具函数 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + function gradioApp() { // https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript const elems = document.getElementsByTagName('gradio-app'); @@ -37,6 +41,51 @@ function getCookie(name) { return null; } +let toastCount = 0; +function toast_push(msg, duration) { + duration = isNaN(duration) ? 3000 : duration; + const existingToasts = document.querySelectorAll('.toast'); + existingToasts.forEach(toast => { + toast.style.top = `${parseInt(toast.style.top, 10) - 70}px`; + }); + const m = document.createElement('div'); + m.innerHTML = msg; + m.classList.add('toast'); + m.style.cssText = `font-size: var(--text-md) !important; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.6); padding: 10px 15px; border-radius: 4px; position: fixed; top: ${50 + toastCount * 70}%; left: 50%; transform: translateX(-50%); width: auto; text-align: center; transition: top 0.3s;`; + document.body.appendChild(m); + setTimeout(function () { + m.style.opacity = '0'; + setTimeout(function () { + document.body.removeChild(m); + toastCount--; + }, 500); + }, duration); + toastCount++; +} + +function toast_up(msg) { + var m = document.getElementById('toast_up'); + if (m) { + document.body.removeChild(m); // remove the loader from the body + } + m = document.createElement('div'); + m.id = 'toast_up'; + m.innerHTML = msg; + m.style.cssText = "font-size: var(--text-md) !important; color: rgb(255, 255, 255); background-color: rgba(0, 0, 100, 0.6); padding: 10px 15px; margin: 0 0 0 -60px; border-radius: 4px; position: fixed; top: 50%; left: 50%; width: auto; text-align: center;"; + document.body.appendChild(m); +} +function toast_down() { + var m = document.getElementById('toast_up'); + if (m) { + document.body.removeChild(m); // remove the loader from the body + } +} + + +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 2 部分: 复制按钮 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + function addCopyButton(botElement) { // https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript // Copy bot button @@ -98,6 +147,12 @@ function chatbotContentChanged(attempt = 1, force = false) { } } + + +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 3 部分: chatbot动态高度调整 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + function chatbotAutoHeight() { // 自动调整高度 function update_height() { @@ -127,8 +182,6 @@ function chatbotAutoHeight() { }, 50); // 每100毫秒执行一次 } - - function get_elements(consider_state_panel = false) { var chatbot = document.querySelector('#gpt-chatbot > div.wrap.svelte-18telvq'); if (!chatbot) { @@ -154,6 +207,18 @@ function get_elements(consider_state_panel = false) { } + +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 4 部分: 粘贴、拖拽文件上传 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + +var elem_upload = null; +var elem_upload_float = null; +var elem_input_main = null; +var elem_input_float = null; +var elem_chatbot = null; +var exist_file_msg = '⚠️请先删除上传区(左上方)中的历史文件,再尝试上传。' + function add_func_paste(input) { let paste_files = []; if (input) { @@ -182,20 +247,21 @@ function add_func_paste(input) { function add_func_drag(elem) { if (elem) { - const dragEvents = ["dragover", "dragenter"]; + const dragEvents = ["dragover"]; const leaveEvents = ["dragleave", "dragend", "drop"]; const onDrag = function (e) { e.preventDefault(); e.stopPropagation(); if (elem_upload_float.querySelector("input[type=file]")) { - toast_push('释放以上传文件', 50) + toast_up('⚠️释放以上传文件') } else { - toast_push('⚠️请先删除上传区中的历史文件,再尝试上传。', 50) + toast_up(exist_file_msg) } }; const onLeave = function (e) { + toast_down(); e.preventDefault(); e.stopPropagation(); }; @@ -237,35 +303,11 @@ async function upload_files(files) { Object.defineProperty(event, "currentTarget", { value: uploadInputElement, enumerable: true }); Object.defineProperty(uploadInputElement, "files", { value: files, enumerable: true }); uploadInputElement.dispatchEvent(event); - - // toast_push('🎉上传文件成功', 2000) } else { - toast_push('⚠️请先删除上传区中的历史文件,再尝试上传。', 3000) + toast_push(exist_file_msg, 3000) } } } -//提示信息 封装 -function toast_push(msg, duration) { - duration = isNaN(duration) ? 3000 : duration; - const m = document.createElement('div'); - m.innerHTML = msg; - m.style.cssText = "font-size: var(--text-md) !important; color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed; top: 50%;left: 50%;width: auto; text-align: center;"; - document.body.appendChild(m); - setTimeout(function () { - var d = 0.5; - m.style.opacity = '0'; - setTimeout(function () { - document.body.removeChild(m) - }, d * 1000); - }, duration); -} - -var elem_upload = null; -var elem_upload_float = null; -var elem_input_main = null; -var elem_input_float = null; -var gptChatbot = null; - function begin_loading_status() { // Create the loader div and add styling @@ -293,6 +335,7 @@ function begin_loading_status() { }`; document.head.appendChild(styleSheet); } + function cancel_loading_status() { var loadingElement = document.getElementById('Js_File_Loading'); if (loadingElement) { @@ -311,6 +354,7 @@ function cancel_loading_status() { }); } } + function register_upload_event() { elem_upload_float = document.getElementById('elem_upload_float') const upload_component = elem_upload_float.querySelector("input[type=file]"); @@ -321,6 +365,7 @@ function register_upload_event() { }); } } + function monitoring_input_box() { register_upload_event(); @@ -328,6 +373,7 @@ function monitoring_input_box() { elem_upload_float = document.getElementById('elem_upload_float') elem_input_main = document.getElementById('user_input_main') elem_input_float = document.getElementById('user_input_float') + elem_chatbot = document.getElementById('gpt-chatbot') if (elem_input_main) { if (elem_input_main.querySelector("textarea")) { @@ -339,9 +385,8 @@ function monitoring_input_box() { add_func_paste(elem_input_float.querySelector("textarea")) } } - gptChatbot = document.getElementById('gpt-chatbot') - if (gptChatbot) { - add_func_drag(gptChatbot) + if (elem_chatbot) { + add_func_drag(elem_chatbot) } } @@ -352,6 +397,14 @@ window.addEventListener("DOMContentLoaded", function () { gradioApp().addEventListener("render", monitoring_input_box); }); + + + + +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 5 部分: 音频按钮样式变化 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + function audio_fn_init() { let audio_component = document.getElementById('elem_audio'); if (audio_component) { @@ -388,6 +441,13 @@ function audio_fn_init() { } } + + + +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= +// 第 6 部分: JS初始化函数 +// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") { audio_fn_init(); chatbotIndicator = gradioApp().querySelector('#gpt-chatbot > div.wrap');