Browser get Out of Memory when using Plotly for plotting.

[Reflux00]

Describe the bug

I used Gradio to create a page for monitoring an image that needs to be refreshed continuously. When I used Plotly for plotting and set the refresh rate to 10 Hz, the browser showed an "Out of Memory" error after running for less than 10 minutes.

I found that the issue is caused by the Plot.svelte file generating new CSS, which is then continuously duplicated by PlotlyPlot.svelte.

This problem can be resolved by making the following change in the Plot.svelte file:

Replace:

key += 1;
let type = value?.type;

With:

let type = value?.type;

if (type !== "plotly") {
    key += 1;
}

In other words, if the plot type is plotly, no new CSS will be generated.

Finally, I’m new to both Svelte and TypeScript, so some of my descriptions might not be entirely accurate, but this method does resolve the issue.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr
import numpy as np

from datetime import datetime
import plotly.express as px

def get_image(shape):
    # data = caget(pv)
    x = np.arange(0, shape[1])
    y = np.arange(0, shape[0])

    X, Y = np.meshgrid(x, y)
    xc = np.random.randint(0, shape[1])
    yc = np.random.randint(0, shape[0])
    data = np.exp(-((X - xc) ** 2 + (Y - yc) ** 2) / (2 * 100**2)) * 1000
    data = data.reshape(shape)

    return data


fig: None = px.imshow(
    get_image((1200, 1920)),
    color_continuous_scale="jet",
)

fig["layout"]["uirevision"] = 'constant'
# fig["config"]["plotGlPixelRatio"] = 1
# fig.update_traces(hovertemplate="x: %{x} <br> y: %{y} <br> z: %{z} <br> color: %{color}")
# fig.update_layout(coloraxis_showscale=False)
fig["layout"]['hovermode']=False
fig["layout"]["annotations"]=None

def make_plot(width, height):
    shape = (int(height), int(width))
    img = get_image(shape)

    ## image plot
    fig["data"][0].update(z=img)
    return fig


with gr.Blocks(delete_cache=(120, 180)) as demo:
    timer = gr.Timer(0.5, active=False)

    with gr.Row():
        with gr.Column(scale=1) as Column1:
            with gr.Row():
                shape_x = gr.Number(value=480, label="Width")
                shape_y = gr.Number(value=320, label="Height")

            with gr.Row():
                start_btn = gr.Button(value="Start")
                stop_btn = gr.Button(value="Stop")

        with gr.Column(scale=2):
            plot = gr.Plot(value=fig, label="Plot")

    timer.tick(make_plot, inputs=[shape_x, shape_y], outputs=[plot])

    stop_btn.click(
        lambda: gr.Timer(active=False),
        inputs=None,
        outputs=[timer],
    )

    start_btn.click(
        lambda: gr.Timer(0.1, active=True),
        inputs=None,
        outputs=[timer],
    )


if __name__ == "__main__":
    demo.queue(max_size=10, default_concurrency_limit=10)
    demo.launch(server_name="0.0.0.0", server_port=8080, share=False, max_threads=30)

Screenshot

Logs

No response

System Info

$ gradio environment
Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 5.9.1
gradio_client version: 1.5.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.6.2.post1
audioop-lts is not installed.
fastapi: 0.115.4
ffmpy: 0.4.0
gradio-client==1.5.2 is not installed.
httpx: 0.27.2
huggingface-hub: 0.26.2
jinja2: 3.1.4
markupsafe: 2.1.5
numpy: 2.0.2
orjson: 3.10.11
packaging: 24.2
pandas: 2.2.3
pillow: 11.0.0
pydantic: 2.9.2
pydub: 0.25.1
python-multipart: 0.0.20
pyyaml: 6.0.2
ruff: 0.7.2
safehttpx: 0.1.6
semantic-version: 2.10.0
starlette: 0.41.2
tomlkit: 0.12.0
typer: 0.12.5
typing-extensions: 4.11.0
urllib3: 2.2.3
uvicorn: 0.32.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.10.0
httpx: 0.27.2
huggingface-hub: 0.26.2
packaging: 24.2
typing-extensions: 4.11.0
websockets: 12.0

Severity

Blocking usage of gradio