regression 4.18->4.19 gallery component loading breaks

[thiswillbeyourgithub]

Describe the bug

Hi, I unfortunately don't have the time to produce a full reproduction but when I upgraded from 4.18.0 to 4.19.0 I noticed that my gallery components that loads from a pickle value seemed broken.

Changing the version back and forth toggle completely the bug. There are nothing in the logs.

4.18:

4.19:
Loads the correct number of images in the gallery but they are broken:

Looking at the changelog I thought that maybe it was because I tend to set postprocess=False to my events but actually no events are even triggered yet, it's just the value at component instantiation.

Replacing the value of the gallery (using my already existing buttons to load an image from clipboard) works fine and the image displays correctly. But I have code that should save the new image and re load them at startup and this is not working (the new image is broken on startup too)

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr

Screenshot

No response

Logs

No response

System Info

gradio 4.18
python 3.11.7


I can't update gradio while this isn't fixed

Severity

Blocking usage of gradio

[abidlabs]

Hi @thiswillbeyourgithub I just tested the latest version of the gr.Gallery component with images loaded from pickle format, and they seemed to work fine for me. Here's the code that I tried:

import pickle
from PIL import Image
import io

def pickle_image(image_path, pickle_path):
    with Image.open(image_path) as image:
        img_byte_arr = io.BytesIO()
        image.save(img_byte_arr, format=image.format)
        img_byte_arr = img_byte_arr.getvalue()
    
    with open(pickle_path, 'wb') as pickle_file:
        pickle.dump(img_byte_arr, pickle_file)

def unpickle_image(pickle_path):
    with open(pickle_path, 'rb') as pickle_file:
        img_byte_arr = pickle.load(pickle_file)
    image = Image.open(io.BytesIO(img_byte_arr))
    return image

# Paths
image_path = 'cheetah.jpg'
pickle_path = 'image.pickle'

pickle_image(image_path, pickle_path)
unpickled_image = unpickle_image(pickle_path)

with gr.Blocks() as demo:
    gr.Gallery([unpickled_image]*10)
demo.launch()

Awaiting your repro!

[thiswillbeyourgithub]

Thanks for the quick reply!

I checked again and noticed a message in the chromium log: Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

Indeed I'm using a self signed certificate so I tried turning off the ssl the image loads fine in chromium.

Turning the ssl on breaks the image in chromium but not in firefox.

I'm guessing this is due to #7411

So should I change my browser setup or was this an unintentional bug?

[abidlabs]

Can you provide a step-by-step repro? Seems like an unintentional bug, though its very strange that you're seeing different behavior per browser?

[thiswillbeyourgithub]

Progress! I managed to reproduce with your example.

The image load fine in chromium with SSL on if I leave server_name=None but I get the issue if I set server_name="0.0.0.0"

I've always been connecting to gradio using chromium with address 127.0.0.1 when I'm on the same computer. I decided to always set server_name to 0.0.0.0 because I also work on mobile.

My chromium version is Version 121.0.6167.160 (Official Build) snap (64-bit)

The self signed certificate was created using (I think) this command: openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 365 -nodes. I left any field that could be left blank to the default value.

My repro code:

import gradio as gr
import pickle
from PIL import Image
import io

def pickle_image(image_path, pickle_path):
    with Image.open(image_path) as image:
        img_byte_arr = io.BytesIO()
        image.save(img_byte_arr, format=image.format)
        img_byte_arr = img_byte_arr.getvalue()
    
    with open(pickle_path, 'wb') as pickle_file:
        pickle.dump(img_byte_arr, pickle_file)

def unpickle_image(pickle_path):
    with open(pickle_path, 'rb') as pickle_file:
        img_byte_arr = pickle.load(pickle_file)
    image = Image.open(io.BytesIO(img_byte_arr))
    return image

# Paths
image_path = 'cheetah.png'
pickle_path = 'image.pickle'

pickle_image(image_path, pickle_path)
unpickled_image = unpickle_image(pickle_path)

with gr.Blocks() as demo:
    gr.Gallery([unpickled_image]*10)
ssl_args = {
    "ssl_keyfile": "./ssl/key.pem",
    "ssl_certfile": "./ssl/cert.pem",
    "ssl_keyfile_password": "THEPASSWORD",
    "ssl_verify": False,  # allow self signed
    # "server_name": "127.0.0.1",  # image load fine but can only connect on local
    "server_name": "0.0.0.0",  # image don't load 
    }

demo.launch(**ssl_args)

[riogesulgon]

Hi,

I am having the same issue loading images on startup. Using developer tools I found that the gradio is trying to load the images using http://localhost:7861

[freddyaboulton]

Can you please share your repro @riogesulgon ?

[riogesulgon]

You can check out this repository to reproduce the issue.

Using gradio==4.19.2

[freddyaboulton]

Hi @riogesulgon ! Looks like this is fixed in the main branch of gradio. Which will be released in a couple of days maximum.

Will close for now. Please let us know if the future release does not fix this issue and we can reopen! Thanks.