Handle GIFs correctly in Image component

[AlicanAKCA]

Describe the bug

Hello, I had tried to upload GIF. I encountered an issue. I saw that when I wanted to split the GIF file frame by frame, it only took the first frame. This situation occurs in both local and embedded environments. Here's the code:

#fname is a filename giving by input. You can see the output below. 
 def GIF(fname,pixel_size):
    print(fname)
    gif = Image.open(fname)
    frames = []
    for i in range(gif.n_frames):
        gif.seek(i)
        frame = Image.new('RGB', gif.size)
        frame.paste(gif)
        frame = np.array(frame)
        frames.append(frame)
    print(len(frames))

inputs_tab1 = [gr.inputs.Image(type='file', label="Image"),
               gr.Slider(4, 100, value=12, step = 2, label="Pixel Size")]
outputs_tab1 = [gr.Image(type="file",label="Front")]

gr.Interface(fn = GIF,
                    inputs = inputs_tab1,
                    outputs = outputs_tab1).launch()

Output:

'C:\Users\alica\AppData\Local\Temp\tmpk4__6naz.gif' # print(fname)
1 # print(len(frames)) 

As you can see, there is only one frame of GIF file. I didn't encounter this issue when I wasn't using the Gradio. But, I want to implement this code on Gradio for GIF processing. Gradio just taking the first frame of GIF.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

You can try to upload GIF on Huggingface Space. But, It will not return anything. You have to check out the logs.

Screenshot

No response

Logs

To create a public link, set `share=True` in `launch()`.
/tmp/tmp4ze2data.gif
1

System Info

Gradio 3.1.0

Severity

annoying

[JunyaoHu]

hello, have you solved it?

[ThePyceIsRight]

I am also curious if you figured this out.

[AlicanAKCA]

No, I couldn't.

[ThePyceIsRight]

No, I couldn't.

@AlicanAKCA

What if instead of creating a new image (frame) and pasting the original, you did:

frame = img.seek(i)
frame.convert('RGBA')
frame = np.array(frame)

That's how I would do it. I still don't see why your method failed though.

Edit: please just ignore my comment - for some reason I was reading this for the PIL library, not Gradio

[ThePyceIsRight]

I am also experiencing this same issue. The only way I've found to upload a gif with all frames to Image component is to provide the path to a hard drive file. A less elegant workaround that I've been using is to use the File component to upload the gif and then save the gif to hard drive and then input the hard drive gif to an Image component.

Would be really nice if the Image component could just accept an animated gif via drag and drop and hold it for use in the code.

[dfl]

I'm guessing this is related to converting everything to PNG on the backend c.f. #7486