Skip to content

Commit 43568b8

Browse files
binary-huskybinary-husky
committed
improve file upload notification
1 parent 2b90302 commit 43568b8

File tree

2 files changed

+95
-37
lines changed

2 files changed

+95
-37
lines changed

‎main.py

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -291,10 +291,8 @@ def fn_area_visibility_2(a):
291291
click_handle = btn.click(fn=ArgsGeneralWrapper(predict), inputs=[*input_combo, gr.State(True), gr.State(btn.value)], outputs=output_combo)
292292
cancel_handles.append(click_handle)
293293
# 文件上传区，接收文件后与chatbot的互动
294-
file_upload.upload(on_file_uploaded, [file_upload, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies])
295-
file_upload.upload(None, None, None, _js=r"()=>{toast_push('上传完毕, 请等待文件清单展现后继续操作 ...'); cancel_loading_status();}")
296-
file_upload_2.upload(on_file_uploaded, [file_upload_2, chatbot, txt, txt2, checkboxes, cookies], [chatbot, txt, txt2, cookies])
297-
file_upload_2.upload(None, None, None, _js=r"()=>{toast_push('上传完毕, 请等待文件清单展现后继续操作 ...'); cancel_loading_status();}")
294+
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();}")
295+
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();}")
298296
# 函数插件-固定按钮区
299297
for k in plugins:
300298
if not plugins[k].get("AsButton", True): continue

‎themes/common.js

Lines changed: 93 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
2+
// 第 1 部分: 工具函数
3+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
4+
15
function gradioApp() {
26
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
37
const elems = document.getElementsByTagName('gradio-app');
@@ -37,6 +41,51 @@ function getCookie(name) {
3741
return null;
3842
}
3943

44+
let toastCount = 0;
45+
function toast_push(msg, duration) {
46+
duration = isNaN(duration) ? 3000 : duration;
47+
const existingToasts = document.querySelectorAll('.toast');
48+
existingToasts.forEach(toast => {
49+
toast.style.top = `${parseInt(toast.style.top, 10) - 70}px`;
50+
});
51+
const m = document.createElement('div');
52+
m.innerHTML = msg;
53+
m.classList.add('toast');
54+
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;`;
55+
document.body.appendChild(m);
56+
setTimeout(function () {
57+
m.style.opacity = '0';
58+
setTimeout(function () {
59+
document.body.removeChild(m);
60+
toastCount--;
61+
}, 500);
62+
}, duration);
63+
toastCount++;
64+
}
65+
66+
function toast_up(msg) {
67+
var m = document.getElementById('toast_up');
68+
if (m) {
69+
document.body.removeChild(m); // remove the loader from the body
70+
}
71+
m = document.createElement('div');
72+
m.id = 'toast_up';
73+
m.innerHTML = msg;
74+
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;";
75+
document.body.appendChild(m);
76+
}
77+
function toast_down() {
78+
var m = document.getElementById('toast_up');
79+
if (m) {
80+
document.body.removeChild(m); // remove the loader from the body
81+
}
82+
}
83+
84+
85+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
86+
// 第 2 部分: 复制按钮
87+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
88+
4089
function addCopyButton(botElement) {
4190
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
4291
// Copy bot button
@@ -98,6 +147,12 @@ function chatbotContentChanged(attempt = 1, force = false) {
98147
}
99148
}
100149

150+
151+
152+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
153+
// 第 3 部分: chatbot动态高度调整
154+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
155+
101156
function chatbotAutoHeight() {
102157
// 自动调整高度
103158
function update_height() {
@@ -127,8 +182,6 @@ function chatbotAutoHeight() {
127182
}, 50); // 每100毫秒执行一次
128183
}
129184

130-
131-
132185
function get_elements(consider_state_panel = false) {
133186
var chatbot = document.querySelector('#gpt-chatbot > div.wrap.svelte-18telvq');
134187
if (!chatbot) {
@@ -154,6 +207,18 @@ function get_elements(consider_state_panel = false) {
154207
}
155208

156209

210+
211+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
212+
// 第 4 部分: 粘贴、拖拽文件上传
213+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
214+
215+
var elem_upload = null;
216+
var elem_upload_float = null;
217+
var elem_input_main = null;
218+
var elem_input_float = null;
219+
var elem_chatbot = null;
220+
var exist_file_msg = '⚠️请先删除上传区（左上方）中的历史文件，再尝试上传。'
221+
157222
function add_func_paste(input) {
158223
let paste_files = [];
159224
if (input) {
@@ -182,20 +247,21 @@ function add_func_paste(input) {
182247

183248
function add_func_drag(elem) {
184249
if (elem) {
185-
const dragEvents = ["dragover", "dragenter"];
250+
const dragEvents = ["dragover"];
186251
const leaveEvents = ["dragleave", "dragend", "drop"];
187252

188253
const onDrag = function (e) {
189254
e.preventDefault();
190255
e.stopPropagation();
191256
if (elem_upload_float.querySelector("input[type=file]")) {
192-
toast_push('释放以上传文件', 50)
257+
toast_up('⚠️释放以上传文件')
193258
} else {
194-
toast_push('⚠️请先删除上传区中的历史文件，再尝试上传。', 50)
259+
toast_up(exist_file_msg)
195260
}
196261
};
197262

198263
const onLeave = function (e) {
264+
toast_down();
199265
e.preventDefault();
200266
e.stopPropagation();
201267
};
@@ -237,35 +303,11 @@ async function upload_files(files) {
237303
Object.defineProperty(event, "currentTarget", { value: uploadInputElement, enumerable: true });
238304
Object.defineProperty(uploadInputElement, "files", { value: files, enumerable: true });
239305
uploadInputElement.dispatchEvent(event);
240-
241-
// toast_push('🎉上传文件成功', 2000)
242306
} else {
243-
toast_push('⚠️请先删除上传区中的历史文件，再尝试上传。', 3000)
307+
toast_push(exist_file_msg, 3000)
244308
}
245309
}
246310
}
247-
//提示信息 封装
248-
function toast_push(msg, duration) {
249-
duration = isNaN(duration) ? 3000 : duration;
250-
const m = document.createElement('div');
251-
m.innerHTML = msg;
252-
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;";
253-
document.body.appendChild(m);
254-
setTimeout(function () {
255-
var d = 0.5;
256-
m.style.opacity = '0';
257-
setTimeout(function () {
258-
document.body.removeChild(m)
259-
}, d * 1000);
260-
}, duration);
261-
}
262-
263-
var elem_upload = null;
264-
var elem_upload_float = null;
265-
var elem_input_main = null;
266-
var elem_input_float = null;
267-
var gptChatbot = null;
268-
269311

270312
function begin_loading_status() {
271313
// Create the loader div and add styling
@@ -293,6 +335,7 @@ function begin_loading_status() {
293335
}`;
294336
document.head.appendChild(styleSheet);
295337
}
338+
296339
function cancel_loading_status() {
297340
var loadingElement = document.getElementById('Js_File_Loading');
298341
if (loadingElement) {
@@ -311,6 +354,7 @@ function cancel_loading_status() {
311354
});
312355
}
313356
}
357+
314358
function register_upload_event() {
315359
elem_upload_float = document.getElementById('elem_upload_float')
316360
const upload_component = elem_upload_float.querySelector("input[type=file]");
@@ -321,13 +365,15 @@ function register_upload_event() {
321365
});
322366
}
323367
}
368+
324369
function monitoring_input_box() {
325370
register_upload_event();
326371

327372
elem_upload = document.getElementById('elem_upload')
328373
elem_upload_float = document.getElementById('elem_upload_float')
329374
elem_input_main = document.getElementById('user_input_main')
330375
elem_input_float = document.getElementById('user_input_float')
376+
elem_chatbot = document.getElementById('gpt-chatbot')
331377

332378
if (elem_input_main) {
333379
if (elem_input_main.querySelector("textarea")) {
@@ -339,9 +385,8 @@ function monitoring_input_box() {
339385
add_func_paste(elem_input_float.querySelector("textarea"))
340386
}
341387
}
342-
gptChatbot = document.getElementById('gpt-chatbot')
343-
if (gptChatbot) {
344-
add_func_drag(gptChatbot)
388+
if (elem_chatbot) {
389+
add_func_drag(elem_chatbot)
345390
}
346391
}
347392

@@ -352,6 +397,14 @@ window.addEventListener("DOMContentLoaded", function () {
352397
gradioApp().addEventListener("render", monitoring_input_box);
353398
});
354399

400+
401+
402+
403+
404+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
405+
// 第 5 部分: 音频按钮样式变化
406+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
407+
355408
function audio_fn_init() {
356409
let audio_component = document.getElementById('elem_audio');
357410
if (audio_component) {
@@ -388,6 +441,13 @@ function audio_fn_init() {
388441
}
389442
}
390443

444+
445+
446+
447+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
448+
// 第 6 部分: JS初始化函数
449+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
450+
391451
function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") {
392452
audio_fn_init();
393453
chatbotIndicator = gradioApp().querySelector('#gpt-chatbot > div.wrap');

0 commit comments

Comments
 (0)