2022-09-18 14:00:06 +08:00
|
|
|
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
|
|
|
|
|
2022-09-18 03:09:47 +08:00
|
|
|
function isValidImageList(files) {
|
|
|
|
return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
|
|
|
|
}
|
|
|
|
|
|
|
|
function dropReplaceImage(imgWrap, files) {
|
|
|
|
if (!isValidImageList(files)) {
|
2022-09-08 03:58:11 +08:00
|
|
|
return;
|
|
|
|
}
|
2022-09-18 03:09:47 +08:00
|
|
|
|
2023-01-04 01:46:48 +08:00
|
|
|
const tmpFile = files[0];
|
|
|
|
|
2022-09-19 02:00:51 +08:00
|
|
|
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
|
2022-09-21 06:28:03 +08:00
|
|
|
const callback = () => {
|
2022-09-18 03:09:47 +08:00
|
|
|
const fileInput = imgWrap.querySelector('input[type="file"]');
|
|
|
|
if (fileInput) {
|
2023-01-04 01:46:48 +08:00
|
|
|
if (files.length === 0) {
|
|
|
|
files = new DataTransfer();
|
|
|
|
files.items.add(tmpFile);
|
|
|
|
fileInput.files = files.files;
|
|
|
|
} else {
|
|
|
|
fileInput.files = files;
|
|
|
|
}
|
2022-09-18 03:09:47 +08:00
|
|
|
fileInput.dispatchEvent(new Event('change'));
|
|
|
|
}
|
2022-09-21 06:28:03 +08:00
|
|
|
};
|
2023-05-17 20:46:58 +08:00
|
|
|
|
2022-09-21 06:28:03 +08:00
|
|
|
if (imgWrap.closest('#pnginfo_image')) {
|
|
|
|
// special treatment for PNG Info tab, wait for fetch request to finish
|
|
|
|
const oldFetch = window.fetch;
|
|
|
|
window.fetch = async(input, options) => {
|
|
|
|
const response = await oldFetch(input, options);
|
|
|
|
if ('api/predict/' === input) {
|
|
|
|
const content = await response.text();
|
|
|
|
window.fetch = oldFetch;
|
|
|
|
window.requestAnimationFrame(() => callback());
|
|
|
|
return new Response(content, {
|
|
|
|
status: response.status,
|
|
|
|
statusText: response.statusText,
|
|
|
|
headers: response.headers
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return response;
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
window.requestAnimationFrame(() => callback());
|
|
|
|
}
|
2022-09-18 03:09:47 +08:00
|
|
|
}
|
|
|
|
|
2023-05-22 14:49:51 +08:00
|
|
|
function eventHasFiles(e) {
|
|
|
|
if (!e.dataTransfer || !e.dataTransfer.files) return false;
|
|
|
|
if (e.dataTransfer.files.length > 0) return true;
|
|
|
|
if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2024-04-29 12:46:11 +08:00
|
|
|
function isURL(url) {
|
|
|
|
try {
|
|
|
|
const _ = new URL(url);
|
|
|
|
return true;
|
|
|
|
} catch {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-05-22 14:49:51 +08:00
|
|
|
function dragDropTargetIsPrompt(target) {
|
2023-05-22 20:40:10 +08:00
|
|
|
if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
|
|
|
|
if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
|
2023-05-22 14:49:51 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2022-09-18 03:09:47 +08:00
|
|
|
window.document.addEventListener('dragover', e => {
|
|
|
|
const target = e.composedPath()[0];
|
2023-05-22 14:49:51 +08:00
|
|
|
if (!eventHasFiles(e)) return;
|
|
|
|
|
|
|
|
var targetImage = target.closest('[data-testid="image"]');
|
|
|
|
if (!dragDropTargetIsPrompt(target) && !targetImage) return;
|
|
|
|
|
2022-09-18 03:09:47 +08:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2022-09-21 07:57:11 +08:00
|
|
|
e.dataTransfer.dropEffect = 'copy';
|
2022-09-18 03:09:47 +08:00
|
|
|
});
|
|
|
|
|
2024-03-17 06:08:42 +08:00
|
|
|
window.document.addEventListener('drop', async e => {
|
2022-09-18 03:09:47 +08:00
|
|
|
const target = e.composedPath()[0];
|
2024-03-17 06:08:42 +08:00
|
|
|
const url = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain');
|
2024-04-29 12:46:11 +08:00
|
|
|
if (!eventHasFiles(e) && !isURL(url)) return;
|
2023-05-22 14:49:51 +08:00
|
|
|
|
|
|
|
if (dragDropTargetIsPrompt(target)) {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
|
2024-03-15 12:05:04 +08:00
|
|
|
const isImg2img = get_tab_index('tabs') == 1;
|
|
|
|
let prompt_image_target = isImg2img ? "img2img_prompt_image" : "txt2img_prompt_image";
|
2023-05-22 14:49:51 +08:00
|
|
|
|
2024-03-15 12:05:04 +08:00
|
|
|
const imgParent = gradioApp().getElementById(prompt_image_target);
|
2023-05-22 14:49:51 +08:00
|
|
|
const files = e.dataTransfer.files;
|
|
|
|
const fileInput = imgParent.querySelector('input[type="file"]');
|
2024-03-17 06:08:42 +08:00
|
|
|
if (eventHasFiles(e) && fileInput) {
|
2024-03-17 05:46:29 +08:00
|
|
|
fileInput.files = files;
|
2024-03-17 06:08:42 +08:00
|
|
|
fileInput.dispatchEvent(new Event('change'));
|
|
|
|
} else if (url) {
|
2024-03-17 08:19:12 +08:00
|
|
|
try {
|
|
|
|
const request = await fetch(url);
|
|
|
|
if (!request.ok) {
|
|
|
|
console.error('Error fetching URL:', url, request.status);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const data = new DataTransfer();
|
|
|
|
data.items.add(new File([await request.blob()], 'image.png'));
|
|
|
|
fileInput.files = data.files;
|
|
|
|
fileInput.dispatchEvent(new Event('change'));
|
|
|
|
} catch (error) {
|
|
|
|
console.error('Error fetching URL:', url, error);
|
|
|
|
return;
|
|
|
|
}
|
2024-03-15 12:05:04 +08:00
|
|
|
}
|
2022-10-13 07:17:26 +08:00
|
|
|
}
|
2023-05-22 14:49:51 +08:00
|
|
|
|
|
|
|
var targetImage = target.closest('[data-testid="image"]');
|
|
|
|
if (targetImage) {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
const files = e.dataTransfer.files;
|
|
|
|
dropReplaceImage(targetImage, files);
|
2022-09-18 03:09:47 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
window.addEventListener('paste', e => {
|
|
|
|
const files = e.clipboardData.files;
|
|
|
|
if (!isValidImageList(files)) {
|
2022-09-08 03:58:11 +08:00
|
|
|
return;
|
|
|
|
}
|
2022-09-27 00:12:55 +08:00
|
|
|
|
|
|
|
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
|
2023-05-19 14:43:01 +08:00
|
|
|
.filter(el => uiElementIsVisible(el))
|
2023-05-19 14:54:55 +08:00
|
|
|
.sort((a, b) => uiElementInSight(b) - uiElementInSight(a));
|
2023-05-19 14:43:01 +08:00
|
|
|
|
|
|
|
|
2022-09-27 00:12:55 +08:00
|
|
|
if (!visibleImageFields.length) {
|
|
|
|
return;
|
|
|
|
}
|
2023-05-17 20:46:58 +08:00
|
|
|
|
2022-09-27 00:12:55 +08:00
|
|
|
const firstFreeImageField = visibleImageFields
|
2023-09-24 04:41:28 +08:00
|
|
|
.filter(el => !el.querySelector('img'))?.[0];
|
2022-09-27 00:12:55 +08:00
|
|
|
|
|
|
|
dropReplaceImage(
|
|
|
|
firstFreeImageField ?
|
|
|
|
firstFreeImageField :
|
|
|
|
visibleImageFields[visibleImageFields.length - 1]
|
|
|
|
, files
|
|
|
|
);
|
2022-09-08 03:58:11 +08:00
|
|
|
});
|