🚀 Migrating to Gradio 5

[abidlabs]

👋 Hi Gradio community,

We’ve been hard at work over the past few months, and we are excited to announce today the stable release of Gradio 5! Here's some high-level information about using Gradio 5

Major Features

• ⚡ Performance: Whenever possible (and particularly on Hugging Face Spaces), Gradio 5 is now served via server-side rendering (SSR). Gradio apps served via SSR load much faster and have better SEO.
• 🎨 UI Refresh: We have redesigned many components in Gradio 5.0 to have a modern UI, with particular focus being on the following components: Button, Tab, Slider , JSON as well as on the high-level ChatInterface class for chatbot UIs. We’ve adjusted borders, shading, fonts, and dark-mode colors globally to provide a crisper and more modern look.
• 🎤 Streaming Media: Streaming audio, images, and video as input and output are now fully supported in Gradio. We have switched to using the HTTP Live Streaming protocol for streaming media, which provides a much better UX for streaming audio and video to end users. We’ve also provided more control to developers for streaming in media with intuitive parameters that let developers control the frequency of streams and how users should queue for streaming demos. Please see this guide for more details on output streaming and this guide for input streaming.
• 🔒 Security: Gradio 5 is intended to be a production-ready web framework for all kinds of machine learning applications, so we've also made significant improvements around security (including getting a 3rd-party audit of Gradio) -- more details coming soon!
• 🪄 AI Playground (Experimental): Gradio now includes an AI-assisted playground that allows you to generate Gradio apps from a prompt and view the results immediately in your browser. This AI playground is a great way to generate simple Gradio apps or make modifications to your Gradio application. Link is here: https://5-0-dev.gradio-website.pages.dev/playground. The AI Playground is still a work in progress and may sometimes output code that is incorrect or use libraries that are unsupported by Gradio Lite. We will continue to make it better over time.

Installation

Gradio 5 depends on Python 3.10 or higher, so if you are running Gradio locally, please ensure that you have Python 3.10 or higher, or download it here: https://www.python.org/downloads/

• Locally: If you are running gradio locally, simply install Gradio 5 with pip install gradio --upgrade
• Spaces: If you would like to update an existing gradio Space to use Gradio 5, you can simply update the sdk_version to be 5.0.0 in README.md.

In most cases, that’s all you have to do to run Gradio 5.0. If you start your Gradio application, you should see your Gradio app running, with a fresh new UI.

Server-Side Rendering (Optional)

Gradio 5 includes the capability to serve apps via server-side rendering (SSR), which includes SEO and performance improvements (e.g. much faster load times for the initial page — no more Gradio loading spinner!). To run in SSR mode, you’ll need to have Node 20+ installed. Please install it here: https://nodejs.org/en/download/package-manager. Node is not required to run Gradio, as Gradio will fall back on client-side rendering when Node is not found. You’ll need to also set the ssr_mode=True parameter in .launch() or set the environment variable: GRADIO_SSR_MODE="true".

SSR will automatically be enabled on Spaces for apps that run Gradio 5! If you would like to disable it, you can set ssr_mode=False in launch().

Breaking Changes

Gradio 5 is a major release and we've made some breaking changes in order for security, performance, or a more consistent developer experience across the library. Here is a complete list of breaking changes:

Component-Specific Changes

gr.Audio

1. Audio files are no longer converted to .wav automatically

Previously, the default value of the format in the [gr.Audio](http://gr.audio/) component was "wav" , meaning that audio files would be converted to the .wav format before being processed by a prediction function or being returned to the user. Now, the default value of format is None, which means any audio files that have an existing format are kept as is. We do not expect this change to affect most users, but if you want to recover the original behavior, please set format="wav" explicitly in gr.Audio.

gr.Code

2. Passing a tuple to gr.Code is not supported

Previously, passing a tuple to gr.Code would open the filepath corresponding to the first element of the tuple and display it in the front-end. For security reasons, this is no longer supported and the gr.Code component will only display strings of code starting in version 5.0. Instead, you should read the file and return its contents. E.g

import tempfile
import gradio as gr

def echo(placeholder_code):
    with tempfile.NamedTemporaryFile('w+', delete=False) as temp_file:
        temp_file.write(placeholder_code)
        temp_file.seek(0)
        return temp_file.read()

gr.Interface(echo, gr.Code(), gr.Code()).launch()

gr.FileExplorer

3. The root parameter in gr.FileExplorer has been removed

In Gradio 4, this parameter was already deprecated and was replaced with root_dir. In Gradio 5, this parameter has been removed altogether. Use root_dir instead.

gr.LoginButton and gr.LogoutButton

4. The signed_in_value parameter in gr.LoginButton has been removed

In Gradio 4, this parameter was already deprecated and was replaced with logout_value. In Gradio 5, this parameter has been removed altogether

5. The gr.LogoutButton component has been removed

This component is unnecessary as the gr.LoginButton now transforms into a logout button once a user logs in

gr.Image

6. SVGs are not accepted as input images into the gr.Image component unless type=filepath

Since SVGs cannot be converted to numpy arrays or PIL images natively, they could cause Gradio apps to break if they were passed as input images. Now, they are only accepted if type="filepath", otherwise an error is displayed to the user.

gr.DataFrame

7. The height parameter in gr.DataFrame has been renamed to max_height

The behavior of this parameter is exactly the same as before, but the new name better reflects its behavior, which is to set a maximum height before contents scroll.

8. The .change() event in gr.DataFrame is now also triggered when header values change

Previously, the .change() event would only be triggered if the cell values changed, but since the “value” of a gr.DataFrame includes its headers, the new behavior is more appropriate.

gr.Chatbot

9. The likeable parameter of gr.Chatbot has been removed. The chatbot will display like buttons whenever the like event is defined.

This was generally intended to be an internal parameter, now it is no longer needed and removed from the constructor.

10. By default, user messages are not like-able in the gr.Chatbot.

Previously, both bot messages and user messages could be liked; however, this led to a more cluttered UI. Now only bot messages are like-able by default. To display like buttons in the user message, set the user_like_button parameter of the .like() event to True.

gr.ChatInterface

11. The examples_per_page parameter of gr.ChatInterfacehas been removed.

Examples are now displayed within the chat interface window, and so there is no need for this parameter.

gr.Dropdown

12. The Dropdown component’s initial value will default to the first choice in the choices list

Previously, the gr.Dropdown would show an empty value as the default. However, this is not desirable, as user-defined functions may error out if a None value is passed in for the Dropdown. Nevertheless, if you would like the original behavior, set the value of the Dropdown component like this:

import gradio as gr

with gr.Blocks() as demo:
    gr.Dropdown(["apple", "banana"], value=lambda : None)

demo.launch()

gr.Row

13. The default value of the equal_height parameter has been set to False.

This means that components in a gr.Row will not be stretched to be of the equal height by default. To preserve this change, simply pass in equal_height=True in gr.Row().

Changes Affecting Multiple Components

1. The file_type parameter for various file-based input components (specifically, gr.File , gr.Gallery, gr.MultimodalTextbox, and gr.UploadButton is now enforced in the backend)

Previously, the file_type parameter was not enforced in the backend. Meaning that if a user was able to submit an invalid filetype through their browser (or by using the clients), it would get passed into the prediction function. Now, the backend will raise an exception instead.

2. The info parameter now accepts Markdown/HTML

Any string passed into the info parameter will be as Markdown and displayed accordingly, enabling developers to add links, emphasize text, etc.

3. Pressing “enter” will not submit a gr.Textbox or gr.MultimodalTextbox if they are empty

If there is no text in a gr.Textbox, a user will not be able to submit it by pressing enter. Likewise, if there is no text and no files in a gr.MultimodalTextbox, a user will not be able to submit it.

Security-related Changes

1. Only files in the current working directory or temp directory can be returned from your prediction function

In Gradio 4.x, you can return any file on your machine from a function and Gradio will post-process it and display it in the UI. Starting with version 5.0, only files in the current working directory or temp directory will be post-processed for security reasons.

As an example, let’s say you have a text-to-image application that’s running from the /app/text-to-image directory. In Gradio 4.0, saving images to the /img/ directory would work:

def text_to_image(prompt):
    img = diffusion_model(prompt)
    path = img.save('/img/image.png')
    return path

But in Gradio 5.0, you have to save the image in /app/text-to-image (or a subdirectory of it)

def text_to_image(prompt):
    img = diffusion_model(prompt)
    path = img.save('/app/text-to-image/generations/image.png')
    return path

We expect this change to impact a small number of applications but Gradio will output a helpful error message if you return an image outside the current working directory. If you have any questions on this change, please consult this [guil;de](https://307f1325.gradio-website.pages.dev/main/guides/file-access) first before reaching out on Github or Discord.

2. CORS settings in Gradio apps have been updated to reject the null origin by default

This change is unlikely to have any impact on your Gradio app unless you are using web components to embed your Gradio app and you are testing your Gradio app in a local file through your browser. If that is the case, you can set strict_cors=False in launch().

3. Files that Gradio serves will be downloaded rather than opened in-browser

With the exception of audio, image, video, json, and text files, which are displayed in-browser, all other files that Gradio serves (e.g. using the File component) will be downloaded rather than opened in browser to reduce XSS.

4. Gradio does not allow URLs that resolve to local files

To prevent SSRF attacks, Gradio does not allow URLs that serve to [localhost](http://localhost) paths as values for components. This means that if you pass in a URL like [http://127.0.0.1:7860/file=lion.jpg](http://127.0.0.1:7881/file=lion.jpg) to gr.Image, it will raise a ValueError.

Changes related to gr.Interface and gr.ChatInterface

1. The undo_btn, retry_btn and clear_btn parameters of gr.ChatInterface have been removed, and accepted types for submit_btn and stop_btn arguments have changed

The ChatInterface UI has been modernized! The row of buttons for undoing messages, retrying messages, or clearing the chat history has been removed entirely and instead these buttons are now built into the gr.Chatbot component. See below:

Additionally, the accepted type for submit_btn and stop_btn arguments has changed. Instead of specifying an instance of a gr.Button, these parameters now take a boolean or a string value. If False , the submit or stop buttons will not be displayed. If a string, that text will be displayed in the corresponding button.

2. The allow_flagging parameter in gr.Interface has been renamed to flagging_mode

Similarly, the environment variable GRADIO_ALLOW_FLAGGING has been renamed to GRADIO_FLAGGING_MODE

3. The additional_inputs_accordion_name parameter has been removed from gr.ChatInterface

You can set this by passing in a custom gr.Accordion object into gr.ChatInterface instead, e.g.

gr.ChatInterface(
	additional_inputs_accordion=gr.Accordion(label="Additional Inputs")
)

4. The thumbnail parameter has been removed from gr.Interface

In Gradio 4, this parameter was already deprecated and had no effect. In Gradio 5, this parameter has been removed altogether

5. **The css , js, and head parameters in gr.Interface, gr.ChatInterface, and gr.Blocks no longer accept filepaths.

Previously, you could provide either a code string or string filepaths in the  js and css  parameters and Gradio would try to determine if you meant a filepath or a code string. To avoid potential ambiguity and unexpected behavior, now str is only interpreted as code. If you would like to pass in a filepath, you can use new css_paths or head_paths parameters.

Miscellaneous Changes

1. The every parameter is no longer supported in event listeners

Previously, if you wanted to run an event “every” X seconds after a certain trigger, you could set every= in the event listener. This is no longer supported — if you see the following error: EventListener._setup.<locals>.event_trigger() got an unexpected keyword argument 'every' , you’ll need to do the following instead:

• create a gr.Timer component, and
• use the .tick() method to trigger the event.

E.g., replace something like this:

with gr.Blocks() as demo:
    a = gr.Textbox()
    b = gr.Textbox()
    btn = gr.Button("Start")
    btn.click(lambda x:x, a, b, every=1)

with:

with gr.Blocks() as demo:
    a = gr.Textbox()
    b = gr.Textbox()
    btn = gr.Button("Start")
    t = gr.Timer(1, active=False)
    t.tick(lambda x:x, a, b)
    btn.click(lambda: gr.Timer(active=True), None, t)

This makes it easy to configure the timer as well to change its frequency or stop the event, e.g.

   ...
   stop_btn = gr.Button("Stop")
	 stop_btn.click(lambda: gr.Timer(active=False), None, t) # deactivates timer
   fast_btn = gr.Button("Fast")
	 fast_btn.click(lambda: gr.Timer(0.1), None, t) # makes timer tick every 0.1s

2. The concurrency_count parameter has been removed from .queue()

In Gradio 4, this parameter was already deprecated and had no effect. In Gradio 5, this parameter has been removed altogether.

3. The gr.make_waveform method has been removed from the library

The gr.make_waveform helper method, which was used to convert an audio file to a waveform overlaid on top of an image, has been removed from gradio since the Audio component now supports waveforms natively. If you would like to use this method, you can find the source code here:

gradio/gradio/helpers.py

Line 1022 in 0978de8

def make_waveform(

4. The argument for lazy-caching examples has been changed

Previously, to lazy-cache examples, you would pass in “lazy” to the cache_examples parameter in Interface, Chatinterface , or Examples. Now, there is a separate cache_mode parameter, which governs whether caching should be "lazy" or (by default) "eager" . So if your code was previously:

chatbot = gr.ChatInterface(
	double, 
	examples=["hello", "hi"], 
	cache_examples="lazy"
)

Now, the code above your code should look like this:

chatbot = gr.ChatInterface(
    double,
    examples=["hello", "hi"],
    cache_examples=True,
    cache_mode="lazy",
)

5. The gr.load method now creates a ChatInterface for conversational models that are loaded from Hugging Face

Previously, e.g.

6. The alias parameter has been removed from gr.load.

To provide a title for your Gradio app constructed from gr.load, you can pass in a title instead since the gr.load accepts arbitrary kwargs which are passed into the constructor for the Gradio app.

7. The theme variables starting with button_shadow have each been replaced

These variables have been replaced with ones that start with button_primary_shadow and button_secondary_shadow. If your code sets button_shadow in themes explicitly, replace each of instances with these two.

8. Gradio API routes are now prefixed with the /gradio_api/ route.

All internal Gradio API routes are now prefixed with /gradio_api/. This is important if you directly reference static files in your Gradio app, e.g. in your gr.HTML component. Instead of accessing files using /file=, you should use /gradio_api/file=, like this:

import gradio as gr

with gr.Blocks() as demo:
    gr.HTML("<img src='/gradio_api/file=cat.jpg'>")

demo.launch(allowed_paths=["cat.jpg"])

9. Custom CSS and JS written for Gradio 4 apps may not work for Gradio 5

In general, custom css and js is not guaranteed to work across Gradio versions. Gradio 5 includes significant changes to the HTML for each component, and custom css/js may need to updated to reference the right query selectors, etc.

Custom Components

Custom components built with Gradio 5.0 should be compatible with Gradio 4.0.

If you built your custom component in Gradio 4.0 you will have to rebuild your component to be compatible with Gradio 5.0. Simply follow these steps:

1. Update the @gradio/preview package. cd into the frontend directory and run npx npm-check-updates -u and npm update.
2. Modify the exports in package.json and add a gradio key to . and ./example exports. For example:

".": {
	"gradio": "./index.ts",
},
"./example": {
	"gradio": "./Example.svelte",
},

3. Modify the dependencies key in pyproject.toml to pin the maximum allowed Gradio version at version 5, e.g. dependencies = ["gradio>=4.0,<6.0"].
4. Run the build and publish commands

What’s next for Gradio?

Many of the changes we’ve made in Gradio 5 are designed to enable new functionality that we will be shipping in the coming weeks. Stay tuned for:

• Multi-page Gradio apps, along with native navbars and sidebars
• Support for running Gradio apps on mobile using PWA and potentially native app support
• More media components to support emerging modalities around images and videos
• A richer DataFrame component with support for common spreadsheet-type operations
• One-line integrations with machine learning model and API providers
• Further improvements that will decrease the memory consumption of Gradio apps

And much more! With Gradio 5 providing a robust foundation to build web applications, we’re excited to really get started letting developers build all sorts of ML apps with Gradio.

Try Gradio 5 right now

Here are some Hugging Face Spaces that are running Gradio 5:

• https://huggingface.co/spaces/akhaliq/depth-pro
• https://huggingface.co/spaces/hf-audio/whisper-large-v3-turbo
• https://huggingface.co/spaces/gradio/chatbot_streaming_main
• https://huggingface.co/spaces/gradio/scatter_plot_demo_main

[blaisewf]

pip uninstall gradio

pip install gradio --pre (also tried with --no-cache-dir)

🤔 why i'm unable to download the new version?

seems that something is not okay

[abidlabs]

@blaisewf what version of Python are you running? Gradio 5 requires Python 3.10 or higher

[blaisewf]

@abidlabs ow, seems that i was using 3.9, i'll try with 3.10, thanks! do you know why 3.9 isn't supported now?

[abidlabs]

Hi @blaisewf we take advantage of certain typing features which were introduced in Python 3.10. Since Python 3.10 is about 3 years old at this point, we are asking users to upgrade to that version of Python.

[blaisewf]

@abidlabs nice, thanks for the info and the great job! if i can provide some feedback, the new design of sliders are very strange, without the background would be better

[abidlabs]

Thanks, it looks like that bug is specific to the soft theme in dark mode, but let me cc @hannahblair

[hannahblair]

ah good catch, thanks @blaisewf!

[elismasilva]

@abidlabs this new gradio version broken theme builder right? this fuction stuck on loading, and now my current theme that i made need be adjusted because somethings on css changed.

[abidlabs]

hmm I don't think so, @aliabid94 can you confirm?

[elismasilva]

So when i try to load with

import gradio as gr

demo = gr.themes.builder


if __name__ == "__main__":
    demo()

stuck on this screen:

So my theme in Gradio 4 is like this:

And on Gradio 5 is like this:

[aliabid94]

Yep I'm seeing issues too, taking a look

[abus-aikorea]

Congratulations on the release of gradio 5.0.
However, my project is still stuck on version 4.43.0.
Now my project has become outdated.
I should diligently update it as well.

I have created a web-ui using gradio.
It provides features such as multilingual subtitle addition, real-time translation, background noise removal, and automatic subtitle generation.
Development was made possible thanks to excellent tools like gradio.
I offer my deep trust and gratitude.

https://github.com/abus-aikorea/voice-pro

[elismasilva]

@aliabid94 i am facing some problems with themes after last update to gradio 5, problems with theme classes not being applied correctly, i opened a new issue for this. #9671

[kexul]

Dear @abidlabs , is it possible to use the old theme in gradio 4 with the theme setting? I myself really miss the old raised button style, the new style is too flat for me.

[avan06]

Below are the issues I encountered when migrating the Gradio version from 3.50.2 to 5.0.2:

1. TypeError: State.init() got an unexpected keyword argument 'elem_id'
   This error was quite tricky and took some time to find the solution.

   In the old version, you could write it like this:

   xxxInput = gr.State(value="xxx", elem_id="xxxInput")

   In the new version, it must be changed to:

   xxxInput = gr.State(value="xxx")
   xxxInput.elem_id = "xxxInput"

2. TypeError: Audio.init() got an unexpected keyword argument 'source'
   This one is simple—just a syntax change.

   In the old version, you could write it like this:

   gr.Audio(source="microphone", type="filepath", label="Microphone Input", elem_id="microphoneData")

   In the new version, it must be changed to:

   gr.Audio(sources=["microphone"], type="filepath", label="Microphone Input", elem_id="microphoneData")

3. TypeError: Blocks.queue() got an unexpected keyword argument 'concurrency_count'
   This is also straightforward—the parameter name in Blocks changed, but it took some time to realize it became default_concurrency_limit.

   In the old version, you could write it like this:

   demo.queue(concurrency_count=app_config.queue_concurrency_count)

   In the new version, it must be changed to:

   demo.queue(default_concurrency_limit=app_config.queue_concurrency_count)

4. AttributeError: type object 'Textbox' has no attribute 'update'
   The solution is intuitive, but there's no longer a way to update multiple attribute values in one line.

   In the old version, you could write it like this:

   logText = [gr.Text.update(visible=False)]
   if logVisible:
       logText = [gr.Text.update(visible=True, value=logs)]

   In the new version, it must be changed to:

   logText = [gr.Text(visible=False)]
   if logVisible:
       logText[0].visible = True
       logText[0].value = logs

5. Initial value for single selection in Dropdown
   In the old version, the default was an empty value, and no option would be selected.
   In the new version, the first value in the dropdown menu will be selected by default.

   If you need the old Dropdown behavior, you must set value to an empty list:

   gr.Dropdown(choices=["a", "b", "c", "d"], value=[])

   However, this will trigger the following UserWarning:

   gradio/components/dropdown.py:201: UserWarning: The value passed into gr.Dropdown() is not in the list of choices. Please update the list of choices to include: [] or set allow_custom_value=True.
   

6. Testing version 5.0.2 locally worked perfectly, but for some unknown reason, after upgrading Gradio to 5.0.2 on Huggingface spaces, the following error appeared:

ERROR: Exception in ASGI application

  + Exception Group Traceback (most recent call last):
  |   File "/usr/local/lib/python3.10/site-packages/starlette/_utils.py", line 76, in collapse_excgroups
  |     yield
  |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/base.py", line 186, in __call__
  |     async with anyio.create_task_group() as task_group:
  |   File "/usr/local/lib/python3.10/site-packages/anyio/_backends/_asyncio.py", line 736, in __aexit__
  |     raise BaseExceptionGroup(
  | exceptiongroup.ExceptionGroup: unhandled errors in a TaskGroup (1 sub-exception)
  +-+---------------- 1 ----------------
    | Traceback (most recent call last):
    |   File "/usr/local/lib/python3.10/site-packages/uvicorn/protocols/http/h11_impl.py", line 406, in run_asgi
    |     result = await app(  # type: ignore[func-returns-value]
    |   File "/usr/local/lib/python3.10/site-packages/uvicorn/middleware/proxy_headers.py", line 60, in __call__
    |     return await self.app(scope, receive, send)
    |   File "/usr/local/lib/python3.10/site-packages/fastapi/applications.py", line 1054, in __call__
    |     await super().__call__(scope, receive, send)
    |   File "/usr/local/lib/python3.10/site-packages/starlette/applications.py", line 113, in __call__
    |     await self.middleware_stack(scope, receive, send)
    |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 187, in __call__
    |     raise exc
    |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 165, in __call__
    |     await self.app(scope, receive, _send)
    |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/base.py", line 185, in __call__
    |     with collapse_excgroups():
    |   File "/usr/local/lib/python3.10/contextlib.py", line 153, in __exit__
    |     self.gen.throw(typ, value, traceback)
    |   File "/usr/local/lib/python3.10/site-packages/starlette/_utils.py", line 82, in collapse_excgroups
    |     raise exc
    |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/base.py", line 188, in __call__
    |     await response(scope, wrapped_receive, send)
    |   File "/usr/local/lib/python3.10/site-packages/starlette/responses.py", line 155, in __call__
    |     await send({"type": prefix + "http.response.body", "body": self.body})
    |   File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 162, in _send
    |     await send(message)
    |   File "/usr/local/lib/python3.10/site-packages/uvicorn/protocols/http/h11_impl.py", line 503, in send
    |     output = self.conn.send(event=h11.Data(data=data))
    |   File "/usr/local/lib/python3.10/site-packages/h11/_connection.py", line 512, in send
    |     data_list = self.send_with_data_passthrough(event)
    |   File "/usr/local/lib/python3.10/site-packages/h11/_connection.py", line 545, in send_with_data_passthrough
    |     writer(event, data_list.append)
    |   File "/usr/local/lib/python3.10/site-packages/h11/_writers.py", line 65, in __call__
    |     self.send_data(event.data, write)
    |   File "/usr/local/lib/python3.10/site-packages/h11/_writers.py", line 91, in send_data
    |     raise LocalProtocolError("Too much data for declared Content-Length")
    | h11._util.LocalProtocolError: Too much data for declared Content-Length
    +------------------------------------

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/local/lib/python3.10/site-packages/uvicorn/protocols/http/h11_impl.py", line 406, in run_asgi
    result = await app(  # type: ignore[func-returns-value]
  File "/usr/local/lib/python3.10/site-packages/uvicorn/middleware/proxy_headers.py", line 60, in __call__
    return await self.app(scope, receive, send)
  File "/usr/local/lib/python3.10/site-packages/fastapi/applications.py", line 1054, in __call__
    await super().__call__(scope, receive, send)
  File "/usr/local/lib/python3.10/site-packages/starlette/applications.py", line 113, in __call__
    await self.middleware_stack(scope, receive, send)
  File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 187, in __call__
    raise exc
  File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 165, in __call__
    await self.app(scope, receive, _send)
  File "/usr/local/lib/python3.10/site-packages/starlette/middleware/base.py", line 185, in __call__
    with collapse_excgroups():
  File "/usr/local/lib/python3.10/contextlib.py", line 153, in __exit__
    self.gen.throw(typ, value, traceback)
  File "/usr/local/lib/python3.10/site-packages/starlette/_utils.py", line 82, in collapse_excgroups
    raise exc
  File "/usr/local/lib/python3.10/site-packages/starlette/middleware/base.py", line 188, in __call__
    await response(scope, wrapped_receive, send)
  File "/usr/local/lib/python3.10/site-packages/starlette/responses.py", line 155, in __call__
    await send({"type": prefix + "http.response.body", "body": self.body})
  File "/usr/local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 162, in _send
    await send(message)
  File "/usr/local/lib/python3.10/site-packages/uvicorn/protocols/http/h11_impl.py", line 503, in send
    output = self.conn.send(event=h11.Data(data=data))
  File "/usr/local/lib/python3.10/site-packages/h11/_connection.py", line 512, in send
    data_list = self.send_with_data_passthrough(event)
  File "/usr/local/lib/python3.10/site-packages/h11/_connection.py", line 545, in send_with_data_passthrough
    writer(event, data_list.append)
  File "/usr/local/lib/python3.10/site-packages/h11/_writers.py", line 65, in __call__
    self.send_data(event.data, write)
  File "/usr/local/lib/python3.10/site-packages/h11/_writers.py", line 91, in send_data
    raise LocalProtocolError("Too much data for declared Content-Length")
h11._util.LocalProtocolError: Too much data for declared Content-Length

In the end, I had to downgrade to version 4.44.1 to get everything working again...

[abidlabs]

Dear @abidlabs , is it possible to use the old theme in gradio 4 with the theme setting? I myself really miss the old raised button style, the new style is too flat for me.

Try setting theme="origin", its the closest to Gradio 4 styling

[kexul]

Dear @abidlabs , is it possible to use the old theme in gradio 4 with the theme setting? I myself really miss the old raised button style, the new style is too flat for me.

Try setting theme="origin", its the closest to Gradio 4 styling

Thank you so much!

[abidlabs]

Thanks @avan06 for the detailed feedback. We're looking into fixing these issues. Just to understand a few things

TypeError: State.init() got an unexpected keyword argument 'elem_id'

Why do you need to assign an elem_id to gr.State? This property is mainly meant as a way to assign custom css and javascript, which doesn't apply to gr.State.

AttributeError: type object 'Textbox' has no attribute 'update'

You can just do gr.Textbox(visible=True, value=logs) to update multiple attribute values in one line

Initial value for single selection in Dropdown

Yes, this is an intentional breaking change. See above:

The Dropdown component’s initial value will default to the first choice in the choices list
Previously, the gr.Dropdown would show an empty value as the default. However, this is not desirable, as user-defined functions may error out if a None value is passed in for the Dropdown. Nevertheless, if you would like the original behavior, set the value of the Dropdown component like this:

import gradio as gr

with gr.Blocks() as demo:
gr.Dropdown(["apple", "banana"], value=lambda : None)

demo.launch()

Finally, you mention that 5.0.2 did not work for you on Spaces. Can you please link the Space here so we can take a look?

[avan06]

Thank you, @abidlabs, for your response and explanation.

I set the elem_id in the State so that I could easily access the value of that State in the submit button's function. The inputs of the submit button store a Dict that contains the State.

...
translateInput = gr.State(value="...")
sourceInput = gr.State(value="...")
translateInput.elem_id = "translateInput"
sourceInput.elem_id = "sourceInput"
...

inputDict.update({translateInput, sourceInput})
submitBtn.click(fn=ui.transcribe_entry_progress, inputs=inputDict, outputs=outputs)

def transcribe_entry_progress(self, data: dict, progress=gr.Progress()):
    dataDict = {}
    for key, value in data.items():
        dataDict.update({key.elem_id: value})
        
    return self.transcribe_webui(dataDict, progress=progress)

Below is the link to my spaces (currently downgraded to version 4.44.1):
https://huggingface.co/spaces/avans06/whisper-webui-translate

[AdithyanI]

@abidlabs I have a problem. Not sure if it's only me or if it's been reported by others too. I am seeing a minor issue.

Basically, when I click submit in my app, I earlier had a progress bar that showed how long it takes. It showed the progress or something of those sorts, so my users know they had to wait.

After I updated to Gradio 5, I see that the app starts and processing happens in the background. However, I don't see any progress in the GUI itself. After I click submit, there is no feedback on the GUI. There is no feedback on the progress. Although when the app finishes running, it shows the appropriate output though. It is the during the processing stage where I have the problem.

[MomenSirri]

Hi @abidlabs,

Congratulations on the great update to Gradio 5!

I have an important question: some custom components, especially the Gradio ImageSlider, broke after the upgrade. I use this component in almost all my projects, and it's essential for me.

Is there a plan to add an ImageSlider component directly in Gradio, or should I contact the creator of the ImageSlider to update it for Gradio 5 compatibility?

[abidlabs]

Hi @MomenSirri, yes @pngwn (who is the developer of the ImageSlider custom component) will be rebuilding the custom component for Gradio 5. Should be out this week I believe, but if you need it sooner, you can also clone the files of the custom component and follow these steps to make it Gradio 5-compatible:

[sajjadmosaheb]

Hi @abidlabs, in gradio 5 the authentication not working and keep reload and write incorrect credential while the app in gradio 4 is running right and nothing has changed to this version

[peeter2]

For some reason Gradio now adds "gradio_api" to the URLs of all files that it reads in temp. Is there any way to get rid of this?
/gradio_api/file=/temp/...

Also, the predictions api does not work anymore with blob files as the input images anymore. The old version of Gradio automatically extracted the images out of the blob files and saved them in another directory in the temp folder and used them for the predictions but in version 5 it is not working anymore.

[KingMahmud]

SSR will automatically be enabled on Spaces for apps that run Gradio 5! If you would like to disable it, you can set ssr_mode=False in launch().

@abidlabs, This broke some real stuff.

Testing version 5.0.2 locally worked perfectly**, but for some unknown reason, after upgrading Gradio to 5.0.2 on Huggingface spaces, the following error appeared:
ERROR: Exception in ASGI application
In the end, I had to downgrade to version 4.44.1 to get everything working again...

@avan06, I have faced the same issue after bumping to Gradio 5.x.x and have figured out a temporary but costly workaround.
Workaround :
After doing all migration to Gradio 5.x.x,
Make sure you pass ssr_mode=False to .launch().

[avan06]

@avan06, I have faced the same issue after bumping to Gradio 5.x.x and have figured out a temporary but costly workaround. Workaround : After doing all migration to Gradio 5.x.x, Make sure you pass ssr_mode=False to .launch().

@KingMahmud, you saved me! The information you provided was spot on, and after testing, I've successfully bumped to version 5.4.0. Thank you so much!

[KingMahmud]

@avan06, I have faced the same issue after bumping to Gradio 5.x.x and have figured out a temporary but costly workaround. Workaround : After doing all migration to Gradio 5.x.x, Make sure you pass ssr_mode=False to .launch().

@KingMahmud, you saved me! The information you provided was spot on, and after testing, I've successfully bumped to version 5.4.0. Thank you so much!

You are welcome.
Alhamdulilah, it took me one day and one night to figure this thing out.
People around the internet are giving the solution about this around "requirements.txt" maybe about fastapi or pydantic which might also be the root cause but didn't work for me.
I was thinking this problem occurs in gradio 5 only and the issue was network / http related. Was looking around what with "network / http" changed in gradio 5. The only thing i was regarding this was, this ssr_mode thing. So thought to give it a try. Alhamdulilah, on my surprise, this was the problem and temporarily disabling this SSR works around the problem. But, the cost is we are unable to take fast loading advantages of SSR.

[elismasilva]

@abidlabs @aliabid94 Guys, since the release of gradio 5 I haven't had much success running my application in this new version, so I think it's more appropriate for me to stay on version 4.44.1, I wanted to launch my new webui in the new version but I think it will be shot in the foot. However I am also working with dynamic components in version 4.44.1 and have reported some bugs about these components so that you can fix them (I noticed that few people use this feature, but I think you may have the opportunity for a real case to act on these bugs) I believe they could be happening in version 5 as well but as I wasn't able to run version 5 I can't confirm it yet.

[abidlabs]

Hi @elismasilva because of our team’s limited bandwidth, we are not planning on issuing patches for 4.x. We are looking into the issues around dynamically rendered components, but the patches will be released as part of 5.x. We are happy to help you migrate to Gradio 5, please feel free to create issues based on the problems that you are seeing upgrading

[hypoechoic]

Waiting for PWA! This will be a game changer. Gradio could be used to make apps for all platforms!