Skip to content

Commit

Permalink
feat: drag file to chatbot to upload 拖动以上传文件 (#1396)
Browse files Browse the repository at this point in the history 
* feat: 拖动以上传文件

* 上传文件过程中转圈圈

* fix: 解决仅在第一次上传时才有上传动画的问题

---------

Co-authored-by: 505030475 <[email protected]>
  • Loading branch information
@Keldos-Li @binary-husky
Keldos-Li and binary-husky authored Dec 21, 2023
1 parent f7588d4 commit 2b90302
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 48 deletions.
2 changes: 2 additions & 0 deletions main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,9 @@ def fn_area_visibility_2(a):
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();}")
# 函数插件-固定按钮区
for k in plugins:
if not plugins[k].get("AsButton", True): continue
Expand Down
191 changes: 143 additions & 48 deletions themes/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function gradioApp() {
const elems = document.getElementsByTagName('gradio-app');
const elem = elems.length == 0 ? document : elems[0];
if (elem !== document) {
elem.getElementById = function(id) {
elem.getElementById = function (id) {
return document.getElementById(id);
};
}
Expand All @@ -12,31 +12,31 @@ function gradioApp() {

function setCookie(name, value, days) {
var expires = "";

if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}

document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
var decodedCookie = decodeURIComponent(document.cookie);
var cookies = decodedCookie.split(';');

for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
var cookie = cookies[i].trim();

if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}

return null;
}
}

function addCopyButton(botElement) {
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
// Copy bot button
Expand All @@ -49,7 +49,7 @@ function addCopyButton(botElement) {
// messageBtnColumnElement.remove();
return;
}

var copyButton = document.createElement('button');
copyButton.classList.add('copy-bot-btn');
copyButton.setAttribute('aria-label', 'Copy');
Expand Down Expand Up @@ -98,40 +98,38 @@ function chatbotContentChanged(attempt = 1, force = false) {
}
}

function chatbotAutoHeight(){
function chatbotAutoHeight() {
// 自动调整高度
function update_height(){
function update_height() {
var { panel_height_target, chatbot_height, chatbot } = get_elements(true);
if (panel_height_target!=chatbot_height)
{
if (panel_height_target != chatbot_height) {
var pixelString = panel_height_target.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
}
}

function update_height_slow(){
function update_height_slow() {
var { panel_height_target, chatbot_height, chatbot } = get_elements();
if (panel_height_target!=chatbot_height)
{
new_panel_height = (panel_height_target - chatbot_height)*0.5 + chatbot_height;
if (Math.abs(new_panel_height - panel_height_target) < 10){
if (panel_height_target != chatbot_height) {
new_panel_height = (panel_height_target - chatbot_height) * 0.5 + chatbot_height;
if (Math.abs(new_panel_height - panel_height_target) < 10) {
new_panel_height = panel_height_target;
}
// console.log(chatbot_height, panel_height_target, new_panel_height);
var pixelString = new_panel_height.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
}
}
monitoring_input_box()
update_height();
setInterval(function() {
setInterval(function () {
update_height_slow()
}, 50); // 每100毫秒执行一次
}



function get_elements(consider_state_panel=false) {
function get_elements(consider_state_panel = false) {
var chatbot = document.querySelector('#gpt-chatbot > div.wrap.svelte-18telvq');
if (!chatbot) {
chatbot = document.querySelector('#gpt-chatbot');
Expand All @@ -142,13 +140,13 @@ function get_elements(consider_state_panel=false) {
// const panel4 = document.querySelector('#interact-panel').getBoundingClientRect();
const panel5 = document.querySelector('#input-panel2').getBoundingClientRect();
const panel_active = document.querySelector('#state-panel').getBoundingClientRect();
if (consider_state_panel || panel_active.height < 25){
if (consider_state_panel || panel_active.height < 25) {
document.state_panel_height = panel_active.height;
}
// 25 是chatbot的label高度, 16 是右侧的gap
var panel_height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16*2;
var panel_height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16 * 2;
// 禁止动态的state-panel高度影响
panel_height_target = panel_height_target + (document.state_panel_height-panel_active.height)
panel_height_target = panel_height_target + (document.state_panel_height - panel_active.height)
var panel_height_target = parseInt(panel_height_target);
var chatbot_height = chatbot.style.height;
var chatbot_height = parseInt(chatbot_height);
Expand All @@ -173,7 +171,7 @@ function add_func_paste(input) {
}
if (paste_files.length > 0) {
// 按照文件列表执行批量上传逻辑
await paste_upload_files(paste_files);
await upload_files(paste_files);
paste_files = []

}
Expand All @@ -182,8 +180,42 @@ function add_func_paste(input) {
}
}

function add_func_drag(elem) {
if (elem) {
const dragEvents = ["dragover", "dragenter"];
const leaveEvents = ["dragleave", "dragend", "drop"];

const onDrag = function (e) {
e.preventDefault();
e.stopPropagation();
if (elem_upload_float.querySelector("input[type=file]")) {
toast_push('释放以上传文件', 50)
} else {
toast_push('⚠️请先删除上传区中的历史文件，再尝试上传。', 50)
}
};

const onLeave = function (e) {
e.preventDefault();
e.stopPropagation();
};

dragEvents.forEach(event => {
elem.addEventListener(event, onDrag);
});

leaveEvents.forEach(event => {
elem.addEventListener(event, onLeave);
});

async function paste_upload_files(files) {
elem.addEventListener("drop", async function (e) {
const files = e.dataTransfer.files;
await upload_files(files);
});
}
}

async function upload_files(files) {
const uploadInputElement = elem_upload_float.querySelector("input[type=file]");
let totalSizeMb = 0
if (files && files.length > 0) {
Expand All @@ -195,19 +227,20 @@ async function paste_upload_files(files) {
}
// 检查文件总大小是否超过20MB
if (totalSizeMb > 20) {
toast_push('⚠️文件夹大于20MB 🚀上传文件中', 2000)
toast_push('⚠️文件夹大于 20MB 🚀上传文件中', 3000)
// return; // 如果超过了指定大小, 可以不进行后续上传操作
}
// 监听change事件， 原生Gradio可以实现
// 监听change事件， 原生Gradio可以实现
// uploadInputElement.addEventListener('change', function(){replace_input_string()});
let event = new Event("change");
Object.defineProperty(event, "target", {value: uploadInputElement, enumerable: true});
Object.defineProperty(event, "currentTarget", {value: uploadInputElement, enumerable: true});
Object.defineProperty(uploadInputElement, "files", {value: files, enumerable: true});
Object.defineProperty(event, "target", { value: uploadInputElement, enumerable: true });
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('⚠️请先删除上传区中的历史文件，再尝试粘贴。', 2000)
toast_push('⚠️请先删除上传区中的历史文件，再尝试上传。', 3000)
}
}
}
Expand All @@ -231,23 +264,85 @@ 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
var loader = document.createElement('div');
loader.id = 'Js_File_Loading';
loader.style.position = "absolute";
loader.style.top = "50%";
loader.style.left = "50%";
loader.style.width = "60px";
loader.style.height = "60px";
loader.style.border = "16px solid #f3f3f3";
loader.style.borderTop = "16px solid #3498db";
loader.style.borderRadius = "50%";
loader.style.animation = "spin 2s linear infinite";
loader.style.transform = "translate(-50%, -50%)";
document.body.appendChild(loader); // Add the loader to the body
// Set the CSS animation keyframes
var styleSheet = document.createElement('style');
// styleSheet.type = 'text/css';
styleSheet.id = 'Js_File_Loading_Style'
styleSheet.innerText = `
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}`;
document.head.appendChild(styleSheet);
}
function cancel_loading_status() {
var loadingElement = document.getElementById('Js_File_Loading');
if (loadingElement) {
document.body.removeChild(loadingElement); // remove the loader from the body
}
var loadingStyle = document.getElementById('Js_File_Loading_Style');
if (loadingStyle) {
document.head.removeChild(loadingStyle);
}
let clearButton = document.querySelectorAll('div[id*="elem_upload"] button[aria-label="Clear"]');
for (let button of clearButton) {
button.addEventListener('click', function () {
setTimeout(function () {
register_upload_event();
}, 50);
});
}
}
function register_upload_event() {
elem_upload_float = document.getElementById('elem_upload_float')
const upload_component = elem_upload_float.querySelector("input[type=file]");
if (upload_component) {
upload_component.addEventListener('change', function (event) {
toast_push('正在上传中，请稍等。', 2000);
begin_loading_status();
});
}
}
function monitoring_input_box() {
register_upload_event();

elem_upload = document.getElementById('elem_upload')
elem_upload_float = document.getElementById('elem_upload_float')
elem_input_main = document.getElementById('user_input_main')
elem_input_float = document.getElementById('user_input_float')

if (elem_input_main) {
if (elem_input_main.querySelector("textarea")) {
add_func_paste(elem_input_main.querySelector("textarea"))
}
}
if (elem_input_float) {
if (elem_input_float.querySelector("textarea")){
if (elem_input_float.querySelector("textarea")) {
add_func_paste(elem_input_float.querySelector("textarea"))
}
}
gptChatbot = document.getElementById('gpt-chatbot')
if (gptChatbot) {
add_func_drag(gptChatbot)
}
}


Expand All @@ -259,28 +354,28 @@ window.addEventListener("DOMContentLoaded", function () {

function audio_fn_init() {
let audio_component = document.getElementById('elem_audio');
if (audio_component){
if (audio_component) {
let buttonElement = audio_component.querySelector('button');
let specificElement = audio_component.querySelector('.hide.sr-only');
specificElement.remove();

buttonElement.childNodes[1].nodeValue = '启动麦克风';
buttonElement.addEventListener('click', function(event) {
buttonElement.addEventListener('click', function (event) {
event.stopPropagation();
toast_push('您启动了麦克风!下一步请点击“实时语音对话”启动语音对话。');
});

// 查找语音插件按钮
let buttons = document.querySelectorAll('button');
let audio_button = null;
for(let button of buttons){
if (button.textContent.includes('语音')){
for (let button of buttons) {
if (button.textContent.includes('语音')) {
audio_button = button;
break;
}
}
if (audio_button){
audio_button.addEventListener('click', function() {
if (audio_button) {
audio_button.addEventListener('click', function () {
toast_push('您点击了“实时语音对话”启动语音对话。');
});
let parent_element = audio_component.parentElement; // 将buttonElement移动到audio_button的内部
Expand All @@ -300,5 +395,5 @@ function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") {
chatbotContentChanged(1);
});
chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
if (LAYOUT === "LEFT-RIGHT") {chatbotAutoHeight();}
if (LAYOUT === "LEFT-RIGHT") { chatbotAutoHeight(); }
}

0 comments on commit 2b90302

Please sign in to comment.