Paste Image From Clipboard

[omerXfaruq]

Is your feature request related to a problem? Please describe.
I think uploading images from the clipboard could make uploading images from web much more easier.
I used these kind of components before as a user and it was a nice UX. I will share it here if I can find an example

When you click select a file you either paste from clipboard or select a file from your computer.

[abidlabs]

It would really slick if we could a user could paste an image from the clipboard using CTRL-V / CMD-V. However, this would require us to have the concept of an image component being "in focus".

[omerXfaruq]

I could not find an example of this in the web since then, WDYT about this currently @abidlabs, @dawoodkhan82, @pngwn, @gary149? Shall we put effort in this? Using the image component would be much more easier via this.

[gary149]

I could not find an example of this in the web since then, WDYT about this currently @abidlabs, @dawoodkhan82, @pngwn, @gary149? Shall we put effort in this? Using the image component would be much more easier via this.

I use it all the time in Slack but I agree with @abidlabs that having no element being in focus like in Slack makes it hard. Also not a fan of hijacking the "select a file". Having a visible paste button icon that you need to click (on the image component) could be a solution but will probably be confusing to users so I'm not sure it's worth the effort of implementing.

[abidlabs]

Yeah it's not going to be easily possible with the way that the UI components are currently laid out. We'd have to develop a way to "focus" on a particular component, so it would have to involve a UI/UX redesign. It's a nice idea, but IMO too costly to implement

[omerXfaruq]

Ok then, instead of closing this issue I would like to remove the milestone and keep it in low priority.

[codedealer]

Having a visible paste button icon that you need to click (on the image component) could be a solution

This is exactly the way, @gary149! Providing an unobtrusive option to paste from the clipboard into the Image component would go a long way in terms of streamlining the workflow process without impeding user experience since drag-n-drop and file select interface will not suffer from a small icon at the corner.
Bonus points if the icon is only active when there is a vaild image in the clipboard.

The idea with focusable elements will never work here in my opinion because the design goal of Gradio is different from something like Slack. In a messenger there is only one primary element — message box — so it makes sense to direct all user's input there. In a Gradio app we can have a dozen Image components on the page, it makes no sense hitting tab between them to focus on the right one when the intuitive thing to do is just click/tap on the button. Plus as mentioned "focusable" components are costly to implement.

I'd very much like to see "paste from clipboard" icon implemented 🙏

[AaronCWacker]

Could you do it the same way in html5 via javascript similar to URL parameter functions within gradio? I notice there you have window.location referenced and the JS portions run as functions within the DOM as shown here: https://huggingface.co/spaces/awacke1/Web-URL-HTTP-Parameters-Get-Set.

Here is the DOM based code to handle the image paste:

document.addEventListener('paste', function (evt) {
// Get the data of clipboard
const clipboardItems = evt.clipboardData.items;
const items = [].slice.call(clipboardItems).filter(function (item) {
// Filter the image items only
return item.type.indexOf('image') !== -1;
});
if (items.length === 0) {
return;
}

const item = items[0];
// Get the blob of image
const blob = item.getAsFile();

});

--Aaron

[CoffeeVampir3]

From some discussions on the huggingface discord, I'd like to continue the feature request here. My proposal would be to add a button to the image component similar to the existing text box copy-to-clipboard button, but instead an optional copy-from-clipboard button which you could add in the same fashion. Buttons seem to be the most reliable option browser-to-browser, and this requires a relatively minimal engineering investment to add.

Cheers,
Z.

[MakingMadness]

Want this so much! I'd even be happy with a hacky solution. Getting more agility when moving images around an image-centric gradio interface like Automatic1111's webui would cut out so many steps in a lot of advanced workflows.

[thiswillbeyourgithub]

Sharing my hacky solution for @MakingMadness :

I've been using pyclip to get the image from clipboard. The trick is that gradio is using bgr and cv2 is using rgb or something like that so I ended up reconverting the images several times otherwise blue are turned to yellow etc.

The function get_image is called by a button click that takes as input the gallery and outputs to the gallery.

Let me know if something's not clear:

import pyclip
import numpy as np
import cv2

def rgb_to_bgr(image):
    """gradio is turning cv2's BGR colorspace into RGB, so
    I need to convert it again"""
    return cv2.cvtColor(image, cv2.COLOR_RGB2BGR)


def get_image(gallery):
    print("Getting image from clipboard")
    try:
        # load from clipboard
        pasted = pyclip.paste()
        decoded = cv2.imdecode(np.frombuffer(pasted, np.uint8), flags=1)
        decoded = rgb_to_bgr(decoded)

        if decoded is None:
            print("Image from clipboard was Nonetype")
            return gallery

        if gallery is None:
            return [decoded]

        if isinstance(gallery, list):
            out = []
            for im in gallery:
                out.append(
                        rgb_to_bgr(
                            cv2.imread(
                                im["name"],
                                flags=1)
                            )
                        )
            out += [decoded]

            print("Loaded image from clipboard.")
            return out

        else:
            print(f'gallery is not list or None but {type(gallery)}')
            return None

    except Exception as err:
        print(f"Error: {err}")
        return None

[abidlabs]

This is now supported in the new Image component, thanks @pngwn!

[thiswillbeyourgithub]

@abidlabs is it planned to add copy from clipboard to the gallery component? I didn't expect to find it in Image but not in Gallery.