From 8eaa7e9f0446a386129afae19fa27cbac151d190 Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Fri, 15 Mar 2024 04:05:04 +0000 Subject: [PATCH 1/4] Support dragdrop for URLs --- javascript/dragdrop.js | 21 +++++++++++++++++---- modules/images.py | 33 +++++++++++++++++++++++---------- modules/ui_toprow.py | 8 ++++++++ 3 files changed, 48 insertions(+), 14 deletions(-) diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index d680daf52..01ae6e4db 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -56,6 +56,10 @@ function eventHasFiles(e) { return false; } +function getEventUrl(e) { + return e?.dataTransfer?.getData('URL') || e?.dataTransfer?.getData('text/html')?.match(/(?:src|href)=["'](.*?)["']/)?.[1]; +} + function dragDropTargetIsPrompt(target) { if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true; if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true; @@ -76,21 +80,30 @@ window.document.addEventListener('dragover', e => { window.document.addEventListener('drop', e => { const target = e.composedPath()[0]; - if (!eventHasFiles(e)) return; + const url = getEventUrl(e); + if (!eventHasFiles(e) && !url) return; if (dragDropTargetIsPrompt(target)) { e.stopPropagation(); e.preventDefault(); - let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image"; + const isImg2img = get_tab_index('tabs') == 1; + let prompt_image_target = isImg2img ? "img2img_prompt_image" : "txt2img_prompt_image"; + let prompt_url_target = isImg2img ? "img2img_prompt_url" : "txt2img_prompt_url"; - const imgParent = gradioApp().getElementById(prompt_target); + const imgParent = gradioApp().getElementById(prompt_image_target); + const urlParent = gradioApp().getElementById(prompt_url_target); const files = e.dataTransfer.files; const fileInput = imgParent.querySelector('input[type="file"]'); - if (fileInput) { + const urlInput = urlParent.querySelector('textarea'); + if (files && fileInput) { fileInput.files = files; fileInput.dispatchEvent(new Event('change')); } + if (url && urlInput) { + urlInput.value = url; + urlInput.dispatchEvent(new Event('input')); + } } var targetImage = target.closest('[data-testid="image"]'); diff --git a/modules/images.py b/modules/images.py index c50b2455d..665dbc372 100644 --- a/modules/images.py +++ b/modules/images.py @@ -772,18 +772,31 @@ Steps: {json_info["steps"]}, Sampler: {sampler}, CFG scale: {json_info["scale"]} def image_data(data): import gradio as gr - try: - image = read(io.BytesIO(data)) - textinfo, _ = read_info_from_image(image) - return textinfo, None - except Exception: - pass + if not data: + return gr.update(), None - try: - text = data.decode('utf8') - assert len(text) < 10000 - return text, None + if isinstance(data, bytes): + try: + image = Image.open(io.BytesIO(data)) + textinfo, _ = read_info_from_image(image) + return textinfo, None + except Exception: + pass + try: + text = data.decode('utf8') + assert len(text) < 10000 + return text, None + except Exception: + pass + + import requests + try: + r = requests.get(data, timeout=5) + if r.status_code == 200: + image = Image.open(io.BytesIO(r.content)) + textinfo, _ = read_info_from_image(image) + return textinfo, None except Exception: pass diff --git a/modules/ui_toprow.py b/modules/ui_toprow.py index dc3c3aa38..bce93da95 100644 --- a/modules/ui_toprow.py +++ b/modules/ui_toprow.py @@ -82,6 +82,7 @@ class Toprow: with gr.Row(elem_id=f"{self.id_part}_prompt_row", elem_classes=["prompt-row"]): self.prompt = gr.Textbox(label="Prompt", elem_id=f"{self.id_part}_prompt", show_label=False, lines=3, placeholder="Prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"]) self.prompt_img = gr.File(label="", elem_id=f"{self.id_part}_prompt_image", file_count="single", type="binary", visible=False) + self.prompt_url = gr.Textbox(label="", elem_id=f"{self.id_part}_prompt_url", visible=False) with gr.Row(elem_id=f"{self.id_part}_neg_prompt_row", elem_classes=["prompt-row"]): self.negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{self.id_part}_neg_prompt", show_label=False, lines=3, placeholder="Negative prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"]) @@ -93,6 +94,13 @@ class Toprow: show_progress=False, ) + self.prompt_url.input( + fn=modules.images.image_data, + inputs=[self.prompt_url], + outputs=[self.prompt, self.prompt_url], + show_progress=False, + ) + def create_submit_box(self): with gr.Row(elem_id=f"{self.id_part}_generate_box", elem_classes=["generate-box"] + (["generate-box-compact"] if self.is_compact else []), render=not self.is_compact) as submit_box: self.submit_box = submit_box From 3da13f0cc912acb37052ff4416f238e714bd2a57 Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Sat, 16 Mar 2024 15:46:29 -0600 Subject: [PATCH 2/4] Fix dragging to/from firefox --- javascript/dragdrop.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index 01ae6e4db..bb7be89f9 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -57,7 +57,7 @@ function eventHasFiles(e) { } function getEventUrl(e) { - return e?.dataTransfer?.getData('URL') || e?.dataTransfer?.getData('text/html')?.match(/(?:src|href)=["'](.*?)["']/)?.[1]; + return e.dataTransfer?.getData('text/uri-list') || e.dataTransfer?.getData('text/plain'); } function dragDropTargetIsPrompt(target) { @@ -96,13 +96,12 @@ window.document.addEventListener('drop', e => { const files = e.dataTransfer.files; const fileInput = imgParent.querySelector('input[type="file"]'); const urlInput = urlParent.querySelector('textarea'); - if (files && fileInput) { - fileInput.files = files; - fileInput.dispatchEvent(new Event('change')); - } if (url && urlInput) { urlInput.value = url; urlInput.dispatchEvent(new Event('input')); + } else if (files && fileInput) { + fileInput.files = files; + fileInput.dispatchEvent(new Event('change')); } } From 83a9dd82db511f8f7545d953d6c6baf2c2c9a7a3 Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Sat, 16 Mar 2024 16:08:42 -0600 Subject: [PATCH 3/4] Download image client-side --- javascript/dragdrop.js | 22 +++++++++------------- modules/images.py | 35 +++++++++++------------------------ modules/ui_toprow.py | 8 -------- 3 files changed, 20 insertions(+), 45 deletions(-) diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index bb7be89f9..86591aa24 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -56,10 +56,6 @@ function eventHasFiles(e) { return false; } -function getEventUrl(e) { - return e.dataTransfer?.getData('text/uri-list') || e.dataTransfer?.getData('text/plain'); -} - function dragDropTargetIsPrompt(target) { if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true; if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true; @@ -78,9 +74,9 @@ window.document.addEventListener('dragover', e => { e.dataTransfer.dropEffect = 'copy'; }); -window.document.addEventListener('drop', e => { +window.document.addEventListener('drop', async e => { const target = e.composedPath()[0]; - const url = getEventUrl(e); + const url = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain'); if (!eventHasFiles(e) && !url) return; if (dragDropTargetIsPrompt(target)) { @@ -89,19 +85,19 @@ window.document.addEventListener('drop', e => { const isImg2img = get_tab_index('tabs') == 1; let prompt_image_target = isImg2img ? "img2img_prompt_image" : "txt2img_prompt_image"; - let prompt_url_target = isImg2img ? "img2img_prompt_url" : "txt2img_prompt_url"; const imgParent = gradioApp().getElementById(prompt_image_target); - const urlParent = gradioApp().getElementById(prompt_url_target); const files = e.dataTransfer.files; const fileInput = imgParent.querySelector('input[type="file"]'); - const urlInput = urlParent.querySelector('textarea'); - if (url && urlInput) { - urlInput.value = url; - urlInput.dispatchEvent(new Event('input')); - } else if (files && fileInput) { + if (eventHasFiles(e) && fileInput) { fileInput.files = files; fileInput.dispatchEvent(new Event('change')); + } else if (url) { + const request = await fetch(url); + const data = new DataTransfer(); + data.items.add(new File([await request.blob()], 'image.png')); + fileInput.files = data.files; + fileInput.dispatchEvent(new Event('change')); } } diff --git a/modules/images.py b/modules/images.py index 665dbc372..c50b2455d 100644 --- a/modules/images.py +++ b/modules/images.py @@ -772,31 +772,18 @@ Steps: {json_info["steps"]}, Sampler: {sampler}, CFG scale: {json_info["scale"]} def image_data(data): import gradio as gr - if not data: - return gr.update(), None - - if isinstance(data, bytes): - try: - image = Image.open(io.BytesIO(data)) - textinfo, _ = read_info_from_image(image) - return textinfo, None - except Exception: - pass - - try: - text = data.decode('utf8') - assert len(text) < 10000 - return text, None - except Exception: - pass - - import requests try: - r = requests.get(data, timeout=5) - if r.status_code == 200: - image = Image.open(io.BytesIO(r.content)) - textinfo, _ = read_info_from_image(image) - return textinfo, None + image = read(io.BytesIO(data)) + textinfo, _ = read_info_from_image(image) + return textinfo, None + except Exception: + pass + + try: + text = data.decode('utf8') + assert len(text) < 10000 + return text, None + except Exception: pass diff --git a/modules/ui_toprow.py b/modules/ui_toprow.py index bce93da95..dc3c3aa38 100644 --- a/modules/ui_toprow.py +++ b/modules/ui_toprow.py @@ -82,7 +82,6 @@ class Toprow: with gr.Row(elem_id=f"{self.id_part}_prompt_row", elem_classes=["prompt-row"]): self.prompt = gr.Textbox(label="Prompt", elem_id=f"{self.id_part}_prompt", show_label=False, lines=3, placeholder="Prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"]) self.prompt_img = gr.File(label="", elem_id=f"{self.id_part}_prompt_image", file_count="single", type="binary", visible=False) - self.prompt_url = gr.Textbox(label="", elem_id=f"{self.id_part}_prompt_url", visible=False) with gr.Row(elem_id=f"{self.id_part}_neg_prompt_row", elem_classes=["prompt-row"]): self.negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{self.id_part}_neg_prompt", show_label=False, lines=3, placeholder="Negative prompt\n(Press Ctrl+Enter to generate, Alt+Enter to skip, Esc to interrupt)", elem_classes=["prompt"]) @@ -94,13 +93,6 @@ class Toprow: show_progress=False, ) - self.prompt_url.input( - fn=modules.images.image_data, - inputs=[self.prompt_url], - outputs=[self.prompt, self.prompt_url], - show_progress=False, - ) - def create_submit_box(self): with gr.Row(elem_id=f"{self.id_part}_generate_box", elem_classes=["generate-box"] + (["generate-box-compact"] if self.is_compact else []), render=not self.is_compact) as submit_box: self.submit_box = submit_box From 446cd5a58b22b6771a35696f4dfe4063f4998ebe Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Sat, 16 Mar 2024 20:19:12 -0400 Subject: [PATCH 4/4] dragdrop: add error handling for URLs --- javascript/dragdrop.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index 86591aa24..0c0183564 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -93,11 +93,20 @@ window.document.addEventListener('drop', async e => { fileInput.files = files; fileInput.dispatchEvent(new Event('change')); } else if (url) { - const request = await fetch(url); - const data = new DataTransfer(); - data.items.add(new File([await request.blob()], 'image.png')); - fileInput.files = data.files; - fileInput.dispatchEvent(new Event('change')); + 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; + } } }