gradio/CHANGELOG.md
Abubakar Abid c9b8a0c484
A few small fixes to docs / demos (#3611)
* fixes

* remove binaries

* doc

* changelog

* typing

* run on windows

* cancels

* added clarifications
2023-03-24 16:28:38 -07:00

157 KiB

Upcoming Release

New Features:

Bug Fixes:

  • Fixed bug where text for altair plots was not legible in dark mode by @freddyaboulton in PR 3555
  • Fixes Chatbot and Image components so that files passed during processing are added to a directory where they can be served from, by @abidlabs in PR 3523
  • Use Gradio API server to send telemetry using huggingface_hub @dawoodkhan82 in PR 3488
  • Fixes an an issue where if the Blocks scope was not exited, then State could be shared across sessions, by @abidlabs in PR 3600
  • Fixed bug where "or" was not being localized in file upload text by @freddyaboulton in PR 3599

Documentation Changes:

  • Makes some fixes to the Theme Guide related to naming of variables, by @abidlabs in PR 3561
  • Makes some additions to documentation of Audio and State components, and fixes the pictionary demo by @abidlabs in PR 3611

Testing and Infrastructure Changes:

  • Removed heavily-mocked tests related to comet_ml, wandb, and mlflow as they added a significant amount of test dependencies that prevented installation of test dependencies on Windows environemnts. By @abidlabs in PR 3608

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

3.23.0

New Features:

Theme Sharing!

Once you have created a theme, you can upload it to the HuggingFace Hub to let others view it, use it, and build off of it! You can also download, reuse, and remix other peoples' themes. See https://gradio.app/theming-guide/ for more details.

By @freddyaboulton in PR 3428

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Fix rendering of dropdowns to take more space, and related bugs, by @aliabid94 in PR 3549

Contributors Shoutout:

No changes to highlight.

3.22.1

New Features:

No changes to highlight.

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

3.22.0

New Features:

Official Theme release

Gradio now supports a new theme system, which allows you to customize the look and feel of your app. You can now use the theme= kwarg to pass in a prebuilt theme, or customize your own! See https://gradio.app/theming-guide/ for more details. By @aliabid94 in PR 3470 and PR 3497

elem_classes

Add keyword argument elem_classes to Components to control class names of components, in the same manner as existing elem_id. By @aliabid94 in PR 3466

Bug Fixes:

  • Fixes the File.upload() event trigger which broke as part of the change in how we uploaded files by @abidlabs in PR 3462
  • Fixed issue with gr.Request object failing to handle dictionaries when nested keys couldn't be converted to variable names #3454 by @radames in PR 3459
  • Fixed bug where css and client api was not working properly when mounted in a subpath by @freddyaboulton in PR 3482

Documentation Changes:

Testing and Infrastructure Changes:

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

3.21.0

New Features:

Theme Sharing 🎨 🤝

You can now share your gradio themes with the world!

After creating a theme, you can upload it to the HuggingFace Hub to let others view it, use it, and build off of it!

Uploading

There are two ways to upload a theme, via the theme class instance or the command line.

  1. Via the class instance
my_theme.push_to_hub(repo_name="my_theme",
                     version="0.2.0",
                     hf_token="...")
  1. Via the command line

First save the theme to disk

my_theme.dump(filename="my_theme.json")

Then use the upload_theme command:

upload_theme\
"my_theme.json"\
"my_theme"\
"0.2.0"\
"<hf-token>"

The version must be a valid semantic version string.

This creates a space on the huggingface hub to host the theme files and show potential users a preview of your theme.

An example theme space is here: https://huggingface.co/spaces/freddyaboulton/dracula_revamped

Downloading

To use a theme from the hub, use the from_hub method on the ThemeClass and pass it to your app:

my_theme = gr.Theme.from_hub("freddyaboulton/my_theme")

with gr.Blocks(theme=my_theme) as demo:
    ....

You can also pass the theme string directly to Blocks or Interface (gr.Blocks(theme="freddyaboulton/my_theme"))

You can pin your app to an upstream theme version by using semantic versioning expressions.

For example, the following would ensure the theme we load from the my_theme repo was between versions 0.1.0 and 0.2.0:

with gr.Blocks(theme="freddyaboulton/my_theme@>=0.1.0,<0.2.0") as demo:
    ....

by @freddyaboulton in PR 3428

Code component 🦾

New code component allows you to enter, edit and display code with full syntax highlighting by @pngwn in PR 3421

The Chatbot component now supports audio, video, and images

The Chatbot component now supports audio, video, and images with a simple syntax: simply pass in a tuple with the URL or filepath (the second optional element of the tuple is alt text), and the image/audio/video will be displayed:

gr.Chatbot([
    (("driving.mp4",), "cool video"),
    (("cantina.wav",), "cool audio"),
    (("lion.jpg", "A lion"), "cool pic"),
]).style(height=800)
image

Note: images were previously supported via Markdown syntax and that is still supported for backwards compatibility. By @dawoodkhan82 in PR 3413

  • Allow consecutive function triggers with .then and .success by @aliabid94 in PR 3430

  • New code component allows you to enter, edit and display code with full syntax highlighting by @pngwn in PR 3421

  • Added the .select() event listener, which also includes event data that can be passed as an argument to a function with type hint gr.SelectData. The following components support the .select() event listener: Chatbot, CheckboxGroup, Dataframe, Dropdown, File, Gallery, HighlightedText, Label, Radio, TabItem, Tab, Textbox. Example usage:
import gradio as gr

with gr.Blocks() as demo:
    gallery = gr.Gallery(["images/1.jpg", "images/2.jpg", "images/3.jpg"])
    selected_index = gr.Textbox()

    def on_select(evt: gr.SelectData):
        return evt.index
    
    gallery.select(on_select, None, selected_index)

By @aliabid94 in PR 3399

Bug Fixes:

  • Use huggingface_hub to send telemetry on interface and blocks; eventually to replace segment by @dawoodkhan82 in PR 3342
  • Ensure load events created by components (randomize for slider, callable values) are never queued unless every is passed by @freddyaboulton in PR 3391
  • Prevent in-place updates of generic_update by shallow copying by @gitgithan in PR 3405 to fix #3282
  • Fix bug caused by not importing BlockContext in utils.py by @freddyaboulton in PR 3424
  • Ensure dropdown does not highlight partial matches by @pngwn in PR 3421
  • Fix mic button display by @aliabid94 in PR 3456

Documentation Changes:

Testing and Infrastructure Changes:

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

3.20.1

New Features:

chatbot = gr.Chatbot().style(height=500)

Bug Fixes:

  • Ensure uploaded images are always shown in the sketch tool by @pngwn in PR 3386
  • Fixes bug where when if fn is a non-static class member, then self should be ignored as the first param of the fn by @or25 in PR #3227

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

3.20.0

New Features:

Release event for Slider

Now you can trigger your python function to run when the slider is released as opposed to every slider change value!

Simply use the release method on the slider

slider.release(function, inputs=[...], outputs=[...], api_name="predict")

By @freddyaboulton in PR 3353

Dropdown Component Updates

The standard dropdown component now supports searching for choices. Also when multiselect is True, you can specify max_choices to set the maximum number of choices you want the user to be able to select from the dropdown component.

gr.Dropdown(label="Choose your favorite colors", choices=["red", "blue", "green", "yellow", "orange"], multiselect=True, max_choices=2)

by @dawoodkhan82 in PR 3211

Download button for images 🖼️

Output images will now automatically have a download button displayed to make it easier to save and share the results of Machine Learning art models.

download_sketch

By @freddyaboulton in PR 3297

  • Updated image upload component to accept all image formats, including lossless formats like .webp by @fienestar in PR 3225
  • Adds a disabled mode to the gr.Button component by setting interactive=False by @abidlabs in PR 3266 and PR 3288
  • Adds visual feedback to the when the Flag button is clicked, by @abidlabs in PR 3289
  • Adds ability to set flagging_options display text and saved flag separately by @abidlabs in PR 3289
  • Allow the setting of brush_radius for the Image component both as a default and via Image.update() by @pngwn in PR 3277
  • Added info= argument to form components to enable extra context provided to users, by @aliabid94 in PR 3291
  • Allow developers to access the username of a logged-in user from the gr.Request() object using the .username attribute by @abidlabs in PR 3296
  • Add preview option to Gallery.style that launches the gallery in preview mode when first loaded by @freddyaboulton in PR 3345

Bug Fixes:

  • Ensure mirror_webcam is always respected by @pngwn in PR 3245
  • Fix issue where updated markdown links were not being opened in a new tab by @gante in PR 3236
  • API Docs Fixes by @aliabd in PR 3287
  • Added a timeout to queue messages as some demos were experiencing infinitely growing queues from active jobs waiting forever for clients to respond by @freddyaboulton in PR 3196
  • Fixes the height of rendered LaTeX images so that they match the height of surrounding text by @abidlabs in PR 3258 and in PR 3276
  • Fix bug where matplotlib images where always too small on the front end by @freddyaboulton in PR 3274
  • Remove embed's initial_height when loading is complete so the embed finds its natural height once it is loaded @pngwn in PR 3292
  • Prevent Sketch from crashing when a default image is provided by @pngwn in PR 3277
  • Respect the shape argument on the front end when creating Image Sketches by @pngwn in PR 3277
  • Fix infinite loop caused by setting Dropdown's value to be [] and adding a change event on the dropdown by @freddyaboulton in PR 3295
  • Fix change event listed twice in image docs by @aliabd in PR 3318
  • Fix bug that cause UI to be vertically centered at all times by @pngwn in PR 3336
  • Fix bug where height set in Gallery.style was not respected by the front-end by @freddyaboulton in PR 3343
  • Ensure markdown lists are rendered correctly by @pngwn in PR 3341
  • Ensure that the initial empty value for gr.Dropdown(Multiselect=True) is an empty list and the initial value for gr.Dropdown(Multiselect=False) is an empty string by @pngwn in PR 3338
  • Ensure uploaded images respect the shape property when the canvas is also enabled by @pngwn in PR 3351
  • Ensure that Google Analytics works correctly when gradio apps are created with analytics_enabled=True by @abidlabs in PR 3349
  • Fix bug where files were being re-uploaded after updates by @freddyaboulton in PR 3375
  • Fix error when using backen_fn and custom js at the same time by @jialeicui in PR 3358
  • Support new embeds for huggingface spaces subdomains by @pngwn in PR 3367

Documentation Changes:

Testing and Infrastructure Changes:

Breaking Changes:

  • Chatbot bubble colors can no longer be set by chatbot.style(color_map=) by [@aliabid94] in PR 3370

Full Changelog:

  • Fixed comment typo in components.py by @eltociear in PR 3235
  • Cleaned up chatbot ui look and feel by [@aliabid94] in PR 3370

Contributors Shoutout:

No changes to highlight.

3.19.1

New Features:

No changes to highlight.

Bug Fixes:

  • UI fixes including footer and API docs by @aliabid94 in PR 3242
  • Updated image upload component to accept all image formats, including lossless formats like .webp by @fienestar in PR 3225

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Added backend support for themes by @aliabid94 in PR 2931
  • Added support for button sizes "lg" (default) and "sm".

Contributors Shoutout:

No changes to highlight.

3.19.0

New Features:

Improved embedding experience

When embedding a spaces-hosted gradio app as a web component, you now get an improved UI linking back to the original space, better error handling and more intelligent load performance. No changes are required to your code to benefit from this enhanced experience; simply upgrade your gradio SDK to the latest version.

This behaviour is configurable. You can disable the info panel at the bottom by passing info="false". You can disable the container entirely by passing container="false".

Error statuses are reported in the UI with an easy way for end-users to report problems to the original space author via the community tab of that Hugginface space:

By default, gradio apps are lazy loaded, vastly improving performance when there are several demos on the page. Metadata is loaded ahead of time, but the space will only be loaded and rendered when it is in view.

This behaviour is configurable. You can pass eager="true" to load and render the space regardless of whether or not it is currently on the screen.

by @pngwn in PR 3205

New gr.BarPlot component! 📊

Create interactive bar plots from a high-level interface with gr.BarPlot. No need to remember matplotlib syntax anymore!

Example usage:

import gradio as gr
import pandas as pd

simple = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

with gr.Blocks() as demo:
    gr.BarPlot(
        simple,
        x="a",
        y="b",
        title="Simple Bar Plot with made up data",
        tooltip=['a', 'b'],
    )

demo.launch()

By @freddyaboulton in PR 3157

Bokeh plots are back! 🌠

Fixed a bug that prevented bokeh plots from being displayed on the front end and extended support for both 2.x and 3.x versions of bokeh!

image

By @freddyaboulton in PR 3212

Bug Fixes:

  • Adds ability to add a single message from the bot or user side. Ex: specify None as the second value in the tuple, to add a single message in the chatbot from the "bot" side.
gr.Chatbot([("Hi, I'm DialoGPT. Try asking me a question.", None)])

By @dawoodkhan82 in PR 3165

  • Fixes gr.utils.delete_none to only remove props whose values are None from the config by @abidlabs in PR 3188
  • Fix bug where embedded demos were not loading files properly by @freddyaboulton in PR 3177
  • The change event is now triggered when users click the 'Clear All' button of the multiselect DropDown component by @freddyaboulton in PR 3195
  • Stops File component from freezing when a large file is uploaded by @aliabid94 in PR 3191
  • Support Chinese pinyin in Dataframe by @aliabid94 in PR 3206
  • The clear event is now triggered when images are cleared by @freddyaboulton in PR 3218
  • Fix bug where auth cookies where not sent when connecting to an app via http by @freddyaboulton in PR 3223
  • Ensure latext CSS is always applied in light and dark mode by @pngwn in PR 3233

Documentation Changes:

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Fix demos page css and add close demos button by @aliabd in PR 3151
  • Caches temp files from base64 input data by giving them a deterministic path based on the contents of data by @abidlabs in PR 3197
  • Better warnings (when there is a mismatch between the number of output components and values returned by a function, or when the File component or UploadButton component includes a file_types parameter along with file_count=="dir") by @abidlabs in PR 3194
  • Raises a gr.Error instead of a regular Python error when you use gr.Interface.load() to load a model and there's an error querying the HF API by @abidlabs in PR 3194
  • Fixed gradio share links so that they are persistent and do not reset if network connection is disrupted by by XciD, Wauplin, and @abidlabs in PR 3149 and a follow-up to allow it to work for users upgrading from a previous Gradio version in PR 3221

Contributors Shoutout:

No changes to highlight.

Version 3.18.0

New Features:

Revamped Stop Button for Interfaces 🛑

If your Interface function is a generator, there used to be a separate Stop button displayed next to the Submit button.

We've revamed the Submit button so that it turns into a Stop button during the generation process. Clicking on the Stop button will cancel the generation and turn it back to a Submit button. The Stop button will automatically turn back to a Submit button at the end of the generation if you don't use it!

By @freddyaboulton in PR 3124

Queue now works with reload mode!

You can now call queue on your demo outside of the if __name__ == "__main__" block and run the script in reload mode with the gradio command.

Any changes to the app.py file will be reflected in the webpage automatically and the queue will work properly!

By @freddyaboulton in PR 3089

Allow serving files from additional directories

demo = gr.Interface(...)
demo.launch(
  file_directories=["/var/lib/demo/path/to/resources"]
)

By @maxaudron in PR 3075

Bug Fixes:

  • Fixes URL resolution on Windows by @abidlabs in PR 3108
  • Example caching now works with components without a label attribute (e.g. Column) by @abidlabs in PR 3123
  • Ensure the Video component correctly resets the UI state whe a new video source is loaded and reduce choppiness of UI by @pngwn in PR 3117
  • Fixes loading private Spaces by @abidlabs in PR 3068
  • Added a warning when attempting to launch an Interface via the %%blocks jupyter notebook magic command by @freddyaboulton in PR 3126
  • Fixes bug where interactive output image cannot be set when in edit mode by @dawoodkhan82 in PR 3135
  • A share link will automatically be created when running on Sagemaker notebooks so that the front-end is properly displayed by @abidlabs in PR 3137
  • Fixes a few dropdown component issues; hide checkmark next to options as expected, and keyboard hover is visible by @dawoodkhan82 in [PR 3145]https://github.com/gradio-app/gradio/pull/3145)
  • Fixed bug where example pagination buttons were not visible in dark mode or displayed under the examples table. By @freddyaboulton in PR 3144
  • Fixed bug where the font color of axis labels and titles for native plots did not respond to dark mode preferences. By @freddyaboulton in PR 3146

Documentation Changes:

  • Added a guide on the 4 kinds of Gradio Interfaces by @yvrjsharma and @abidlabs in PR 3003
  • Explained that the parameters in launch will not be respected when using reload mode, e.g. gradio command by @freddyaboulton in PR 3089
  • Added a demo to show how to set up variable numbers of outputs in Gradio by @abidlabs in PR 3127
  • Updated docs to reflect that the equal_height parameter should be passed to the .style() method of gr.Row() by @freddyaboulton in PR 3125

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.17.1

New Features:

iOS image rotation fixed 🔄

Previously photos uploaded via iOS would be rotated after processing. This has been fixed by @freddyaboulton in PR 3089

Before

image

After

image

Run on Kaggle kernels 🧪

A share link will automatically be created when running on Kaggle kernels (notebooks) so that the front-end is properly displayed.

image

By @freddyaboulton in PR 3101

Bug Fixes:

  • Fix bug where examples were not rendered correctly for demos created with Blocks api that had multiple input compinents by @freddyaboulton in PR 3090
  • Fix change event listener for JSON, HighlightedText, Chatbot by @aliabid94 in PR 3095
  • Fixes bug where video and file change event not working @tomchang25 in PR 3098
  • Fixes bug where static_video play and pause event not working @tomchang25 in PR 3098
  • Fixed Gallery.style(grid=...) by by @aliabd in PR 3107

Documentation Changes:

  • Update chatbot guide to include blocks demo and markdown support section by @dawoodkhan82 in PR 3023

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Set minimum markdown-it-py version to 2.0.0 so that the dollar math plugin is compatible by @freddyaboulton in PR 3102

Contributors Shoutout:

No changes to highlight.

Version 3.17.0

New Features:

Extended support for Interface.load! 🏗️

You can now load image-to-text and conversational pipelines from the hub!

Image-to-text Demo

io = gr.Interface.load("models/nlpconnect/vit-gpt2-image-captioning",
                       api_key="<optional-api-key>")
io.launch()
image

conversational Demo

chatbot = gr.Interface.load("models/microsoft/DialoGPT-medium",
                           api_key="<optional-api-key>")
chatbot.launch()

chatbot_load

By @freddyaboulton in PR 3011

Download Button added to Model3D Output Component 📥

No need for an additional file output component to enable model3d file downloads anymore. We now added a download button to the model3d component itself.

Screenshot 2023-01-18 at 3 52 45 PM

By @dawoodkhan82 in PR 3014

Fixing Auth on Spaces 🔑

Authentication on spaces works now! Third party cookies must be enabled on your browser to be able to log in. Some browsers disable third party cookies by default (Safari, Chrome Incognito).

auth_spaces

Bug Fixes:

  • Fixes bug where interpretation event was not configured correctly by @freddyaboulton in PR 2993
  • Fix relative import bug in reload mode by @freddyaboulton in PR 2992
  • Fixes bug where png files were not being recognized when uploading images by @abidlabs in PR 3002
  • Fixes bug where external Spaces could not be loaded and used as functions if they returned files by @abidlabs in PR 3004
  • Fix bug where file serialization output was not JSON serializable by @freddyaboulton in PR 2999
  • Fixes bug where png files were not being recognized when uploading images by @abidlabs in PR 3002
  • Fixes bug where temporary uploaded files were not being added to temp sets by @abidlabs in PR 3005
  • Fixes issue where markdown support in chatbot breaks older demos @dawoodkhan82 in PR 3006
  • Fixes the /file/ route that was broken in a recent change in PR 3010
  • Fix bug where the Image component could not serialize image urls by @freddyaboulton in PR 2957
  • Fix forwarding for guides after SEO renaming by @aliabd in PR 3017
  • Switch all pages on the website to use latest stable gradio by @aliabd in PR 3016
  • Fix bug related to deprecated parameters in huggingface_hub for the HuggingFaceDatasetSaver in PR 3025
  • Added better support for symlinks in the way absolute paths are resolved by @abidlabs in PR 3037
  • Fix several minor frontend bugs (loading animation, examples as gallery) frontend @aliabid94 in PR 2961.
  • Fixes bug that the chatbot sample code does not work with certain input value by @petrov826 in PR 3039.
  • Fix shadows for form element and ensure focus styles more visible in dark mode @pngwn in PR 3042.
  • Fixed bug where the Checkbox and Dropdown change events were not triggered in response to other component changes by @freddyaboulton in PR 3045
  • Fix bug where the queue was not properly restarted after launching a closed app by @freddyaboulton in PR 3022
  • Adding missing embedded components on docs by @aliabd in PR 3027
  • Fixes bug where app would crash if the file_types parameter of gr.File or gr.UploadButton was not a list by @freddyaboulton in PR 3048
  • Ensure CSS mounts correctly regardless of how many Gradio instances are on the page @pngwn in PR 3059.
  • Fix bug where input component was not hidden in the frontend for UploadButton by @freddyaboulton in PR 3053
  • Fixes issue where after clicking submit or undo, the sketch output wouldn't clear. @dawoodkhan82 in PR 3047
  • Ensure spaces embedded via the web component always use the correct URLs for server requests and change ports for testing to avoid strange collisions when users are working with embedded apps locally by @pngwn in PR 3065
  • Preserve selected image of Gallery through updated by @freddyaboulton in PR 3061
  • Fix bug where auth was not respected on HF spaces by @freddyaboulton and @aliabid94 in PR 3049
  • Fixes bug where tabs selected attribute not working if manually change tab by @tomchang25 in 3055
  • Change chatbot to show dots on progress, and fix bug where chatbot would not stick to bottom in the case of images by @aliabid94 in PR 3067

Documentation Changes:

Testing and Infrastructure Changes:

  • Adds a GitHub action to test if any large files (> 5MB) are present by @abidlabs in PR 3013

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Rewrote frontend using CSS variables for themes by @pngwn in PR 2840
  • Moved telemetry requests to run on background threads by @abidlabs in PR 3054

Contributors Shoutout:

No changes to highlight.

Version 3.16.2

New Features:

No changes to highlight.

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

Version 3.16.1

New Features:

No changes to highlight.

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

Version 3.16.0

New Features:

Send custom progress updates by adding a gr.Progress argument after the input arguments to any function. Example:

def reverse(word, progress=gr.Progress()):
    progress(0, desc="Starting")
    time.sleep(1)
    new_string = ""
    for letter in progress.tqdm(word, desc="Reversing"):
        time.sleep(0.25)
        new_string = letter + new_string
    return new_string

demo = gr.Interface(reverse, gr.Text(), gr.Text())

Progress indicator bar by @aliabid94 in PR 2750.

  • Added title argument to TabbedInterface by @MohamedAliRashad in #2888
  • Add support for specifying file extensions for gr.File and gr.UploadButton, using file_types parameter (e.g gr.File(file_count="multiple", file_types=["text", ".json", ".csv"])) by @dawoodkhan82 in #2901
  • Added multiselect option to Dropdown by @dawoodkhan82 in #2871

With multiselect set to true a user can now select multiple options from the gr.Dropdown component.

gr.Dropdown(["angola", "pakistan", "canada"], multiselect=True, value=["angola"])
Screenshot 2023-01-03 at 4 14 36 PM

Bug Fixes:

  • Fixed bug where an error opening an audio file led to a crash by @FelixDombek in PR 2898
  • Fixed bug where setting default_enabled=False made it so that the entire queue did not start by @freddyaboulton in PR 2876
  • Fixed bug where csv preview for DataFrame examples would show filename instead of file contents by @freddyaboulton in PR 2877
  • Fixed bug where an error raised after yielding iterative output would not be displayed in the browser by @JaySmithWpg in PR 2889
  • Fixed bug in blocks_style demo that was preventing it from launching by @freddyaboulton in PR 2890
  • Fixed bug where files could not be downloaded by @freddyaboulton in PR 2926
  • Fixed bug where cached examples were not displaying properly by @a-rogalska in PR 2974

Documentation Changes:

  • Added a Guide on using Google Sheets to create a real-time dashboard with Gradio's DataFrame and LinePlot component, by @abidlabs in PR 2816
  • Add a components - events matrix on the docs by @aliabd in PR 2921

Testing and Infrastructure Changes:

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

  • @JaySmithWpg for making their first contribution to gradio!
  • @MohamedAliRashad for making their first contribution to gradio!

Version 3.15.0

New Features:

Gradio's newest plotting component gr.LinePlot! 📈

With this component you can easily create time series visualizations with customizable appearance for your demos and dashboards ... all without having to know an external plotting library.

For an example of the api see below:

gr.LinePlot(stocks,
            x="date",
            y="price",
            color="symbol",
            color_legend_position="bottom",
            width=600, height=400, title="Stock Prices")

image

By @freddyaboulton in PR 2807

Bug Fixes:

  • Fixed bug where the examples_per_page parameter of the Examples component was not passed to the internal Dataset component by @freddyaboulton in PR 2861
  • Fixes loading Spaces that have components with default values by @abidlabs in PR 2855
  • Fixes flagging when allow_flagging="auto" in gr.Interface() by @abidlabs in PR 2695
  • Fixed bug where passing a non-list value to gr.CheckboxGroup would crash the entire app by @freddyaboulton in PR 2866

Documentation Changes:

  • Added a Guide on using BigQuery with Gradio's DataFrame and ScatterPlot component, by @abidlabs in PR 2794

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Fixed importing gradio can cause PIL.Image.registered_extensions() to break by [@aliencaocao](https://github.com/aliencaocao) in [PR 2846](https://github.com/gradio-app/gradio/pull/2846)
  • Fix css glitch and navigation in docs by @aliabd in PR 2856
  • Added the ability to set x_lim, y_lim and legend positions for gr.ScatterPlot by @freddyaboulton in PR 2807
  • Remove footers and min-height the correct way by @aliabd in PR 2860

Contributors Shoutout:

No changes to highlight.

Version 3.14.0

New Features:

Add Waveform Visual Support to Audio

Adds a gr.make_waveform() function that creates a waveform video by combining an audio and an optional background image by @dawoodkhan82 and @aliabid94 in [PR 2706](https://github.com/gradio-app/gradio/pull/2706. Helpful for making audio outputs much more shareable.

waveform screenrecording

Allows Every Component to Accept an every Parameter

When a component's initial value is a function, the every parameter re-runs the function every every seconds. By @abidlabs in PR 2806. Here's a code example:

import gradio as gr

with gr.Blocks() as demo:
    df = gr.DataFrame(run_query, every=60*60)

demo.queue().launch()

Bug Fixes:

  • Fixed issue where too many temporary files were created, all with randomly generated filepaths. Now fewer temporary files are created and are assigned a path that is a hash based on the file contents by @abidlabs in PR 2758

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

Version 3.13.2

New Features:

No changes to highlight.

Bug Fixes:

*No changes to highlight.

Documentation Changes:

  • Improves documentation of several queuing-related parameters by @abidlabs in PR 2825

Testing and Infrastructure Changes:

  • Remove h11 pinning by @ecederstrand in PR 2820

Breaking Changes:

No changes to highlight.

Full Changelog:

No changes to highlight.

Contributors Shoutout:

No changes to highlight.

Version 3.13.1

New Features:

Replaces tunneling logic based on ssh port-forwarding to that based on frp by XciD and Wauplin in PR 2509

You don't need to do anything differently, but when you set share=True in launch(), you'll get this message and a public link that look a little bit different:

Setting up a public link... we have recently upgraded the way public links are generated. If you encounter any problems, please downgrade to gradio version 3.13.0
.
Running on public URL: https://bec81a83-5b5c-471e.gradio.live

These links are a more secure and scalable way to create shareable demos!

Bug Fixes:

  • Allows gr.Dataframe() to take a pandas.DataFrame that includes numpy array and other types as its initial value, by @abidlabs in PR 2804
  • Add altair to requirements.txt by @freddyaboulton in PR 2811
  • Added aria-labels to icon buttons that are built into UI components by @emilyuhde in PR 2791

Documentation Changes:

Testing and Infrastructure Changes:

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Fixed typo in parameter visible in classes in templates.py by @abidlabs in PR 2805
  • Switched external service for getting IP address from https://api.ipify.org to https://checkip.amazonaws.com/ by @abidlabs in PR 2810

Contributors Shoutout:

No changes to highlight.

  • Fixed typo in parameter visible in classes in templates.py by @abidlabs in PR 2805
  • Switched external service for getting IP address from https://api.ipify.org to https://checkip.amazonaws.com/ by @abidlabs in PR 2810

Version 3.13.0

New Features:

Scatter plot component

It is now possible to create a scatter plot natively in Gradio!

The gr.ScatterPlot component accepts a pandas dataframe and some optional configuration parameters and will automatically create a plot for you!

This is the first of many native plotting components in Gradio!

For an example of how to use gr.ScatterPlot see below:

import gradio as gr
from vega_datasets import data

cars = data.cars()

with gr.Blocks() as demo:
    gr.ScatterPlot(show_label=False,
                   value=cars,
                   x="Horsepower",
                   y="Miles_per_Gallon",
                   color="Origin",
                   tooltip="Name",
                   title="Car Data",
                   y_title="Miles per Gallon",
                   color_legend_title="Origin of Car").style(container=False)

demo.launch()
image

By @freddyaboulton in PR 2764

Support for altair plots

The Plot component can now accept altair plots as values! Simply return an altair plot from your event listener and gradio will display it in the front-end. See the example below:

import gradio as gr
import altair as alt
from vega_datasets import data

cars = data.cars()
chart = (
    alt.Chart(cars)
    .mark_point()
    .encode(
        x="Horsepower",
        y="Miles_per_Gallon",
        color="Origin",
    )
)

with gr.Blocks() as demo:
    gr.Plot(value=chart)
demo.launch()
image

By @freddyaboulton in PR 2741

Set the background color of a Label component

The Label component now accepts a color argument by @freddyaboulton in PR 2736. The color argument should either be a valid css color name or hexadecimal string. You can update the color with gr.Label.update!

This lets you create Alert and Warning boxes with the Label component. See below:

import gradio as gr
import random

def update_color(value):
    if value < 0:
        # This is bad so use red
        return "#FF0000"
    elif 0 <= value <= 20:
        # Ok but pay attention (use orange)
        return "#ff9966"
    else:
        # Nothing to worry about
        return None

def update_value():
    choice = random.choice(['good', 'bad', 'so-so'])
    color = update_color(choice)
    return gr.Label.update(value=choice, color=color)


with gr.Blocks() as demo:
    label = gr.Label(value=-10)
    demo.load(lambda: update_value(), inputs=None, outputs=[label], every=1)
demo.queue().launch()

label_bg_color_update

Add Brazilian Portuguese translation

Add Brazilian Portuguese translation (pt-BR.json) by @pstwh in PR 2753:

image

Bug Fixes:

  • Fixed issue where image thumbnails were not showing when an example directory was provided by @abidlabs in PR 2745
  • Fixed bug loading audio input models from the hub by @freddyaboulton in PR 2779.
  • Fixed issue where entities were not merged when highlighted text was generated from the dictionary inputs @payoto in PR 2767
  • Fixed bug where generating events did not finish running even if the websocket connection was closed by @freddyaboulton in PR 2783.

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.12.0

New Features:

The Chatbot component now supports a subset of Markdown (including bold, italics, code, images)

You can now pass in some Markdown to the Chatbot component and it will show up, meaning that you can pass in images as well! by @abidlabs in PR 2731

Here's a simple example that references a local image lion.jpg that is in the same folder as the Python script:

import gradio as gr

with gr.Blocks() as demo:
    gr.Chatbot([("hi", "hello **abubakar**"), ("![](/file=lion.jpg)", "cool pic")])

demo.launch()

Alt text

To see a more realistic example, see the new demo /demo/chatbot_multimodal/run.py.

Latex support

Added mathtext (a subset of latex) support to gr.Markdown. Added by @kashif and @aliabid94 in PR 2696.

Example of how it can be used:

gr.Markdown(
    r"""
    # Hello World! $\frac{\sqrt{x + y}}{4}$ is today's lesson.
    """)

Update Accordion properties from the backend

You can now update the Accordion label and open status with gr.Accordion.update by @freddyaboulton in PR 2690

import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion(label="Open for greeting", open=False) as accordion:
        gr.Textbox("Hello!")
    open_btn = gr.Button(value="Open Accordion")
    close_btn = gr.Button(value="Close Accordion")
    open_btn.click(
        lambda: gr.Accordion.update(open=True, label="Open Accordion"),
        inputs=None,
        outputs=[accordion],
    )
    close_btn.click(
        lambda: gr.Accordion.update(open=False, label="Closed Accordion"),
        inputs=None,
        outputs=[accordion],
    )
demo.launch()

update_accordion

Bug Fixes:

  • Fixed bug where requests timeout is missing from utils.version_check() by @yujiehecs in PR 2729
  • Fixed bug where so that the File component can properly preprocess files to "binary" byte-string format by CoffeeVampir3 in PR 2727
  • Fixed bug to ensure that filenames are less than 200 characters even for non-English languages by @SkyTNT in PR 2685

Documentation Changes:

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Make try examples button more prominent by @aliabd in PR 2705
  • Fix id clashes in docs by @aliabd in PR 2713
  • Fix typos in guide docs by @andridns in PR 2722
  • Add option to include_audio in Video component. When True, for source="webcam" this will record audio and video, for source="upload" this will retain the audio in an uploaded video by @mandargogate in PR 2721

Contributors Shoutout:

Version 3.11.0

New Features:

Upload Button

There is now a new component called the UploadButton which is a file upload component but in button form! You can also specify what file types it should accept in the form of a list (ex: image, video, audio, text, or generic file). Added by @dawoodkhan82 in PR 2591.

Example of how it can be used:

import gradio as gr

def upload_file(files):
    file_paths = [file.name for file in files]
    return file_paths

with gr.Blocks() as demo:
    file_output = gr.File()
    upload_button = gr.UploadButton("Click to Upload a File", file_types=["image", "video"], file_count="multiple")
    upload_button.upload(upload_file, upload_button, file_output)

demo.launch()

Revamped API documentation page

New API Docs page with in-browser playground and updated aesthetics. @gary149 in PR 2652

Revamped Login page

Previously our login page had its own CSS, had no dark mode, and had an ugly json message on the wrong credentials. Made the page more aesthetically consistent, added dark mode support, and a nicer error message. @aliabid94 in PR 2684

Accessing the Requests Object Directly

You can now access the Request object directly in your Python function by @abidlabs in PR 2641. This means that you can access request headers, the client IP address, and so on. In order to use it, add a parameter to your function and set its type hint to be gr.Request. Here's a simple example:

import gradio as gr

def echo(name, request: gr.Request):
    if request:
        print("Request headers dictionary:", request.headers)
        print("IP address:", request.client.host)
    return name

io = gr.Interface(echo, "textbox", "textbox").launch()

Bug Fixes:

  • Fixed bug that limited files from being sent over websockets to 16MB. The new limit is now 1GB by @abidlabs in PR 2709

Documentation Changes:

  • Updated documentation for embedding Gradio demos on Spaces as web components by @julien-c in PR 2698
  • Updated IFrames in Guides to use the host URL instead of the Space name to be consistent with the new method for embedding Spaces, by @julien-c in PR 2692
  • Colab buttons on every demo in the website! Just click open in colab, and run the demo there.

https://user-images.githubusercontent.com/9021060/202878400-cb16ed47-f4dd-4cb0-b2f0-102a9ff64135.mov

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Better warnings and error messages for gr.Interface.load() by @abidlabs in PR 2694
  • Add open in colab buttons to demos in docs and /demos by @aliabd in PR 2608
  • Apply different formatting for the types in component docstrings by @aliabd in PR 2707

Contributors Shoutout:

No changes to highlight.

Version 3.10.1

New Features:

No changes to highlight.

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.10.0

  • Add support for 'password' and 'email' types to Textbox. @pngwn in PR 2653
  • gr.Textbox component will now raise an exception if type is not "text", "email", or "password" @pngwn in PR 2653. This will cause demos using the deprecated gr.Textbox(type="number") to raise an exception.

Bug Fixes:

  • Updated the minimum FastApi used in tests to version 0.87 by @freddyaboulton in PR 2647
  • Fixed bug where interfaces with examples could not be loaded with gr.Interface.load by @freddyaboulton PR 2640
  • Fixed bug where the interactive property of a component could not be updated by @freddyaboulton in PR 2639
  • Fixed bug where some URLs were not being recognized as valid URLs and thus were not loading correctly in various components by @abidlabs in PR 2659

Documentation Changes:

  • Fix some typos in the embedded demo names in "05_using_blocks_like_functions.md" by @freddyaboulton in PR 2656

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Add support for 'password' and 'email' types to Textbox. @pngwn in PR 2653

Contributors Shoutout:

No changes to highlight.

Version 3.9.1

New Features:

No changes to highlight.

Bug Fixes:

  • Only set a min height on md and html when loading by @pngwn in PR 2623

Documentation Changes:

  • See docs for the latest gradio commit to main as well the latest pip release:

main-vs-pip

  • Modified the "Connecting To a Database Guide" to use pd.read_sql as opposed to low-level postgres connector by @freddyaboulton in PR 2604

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Dropdown for seeing docs as latest or main by @aliabd in PR 2544
  • Allow gr.Templates to accept parameters to override the defaults by @abidlabs in PR 2600
  • Components now throw a ValueError() if constructed with invalid parameters for type or source (for components that take those parameters) in PR 2610
  • Allow auth with using queue by @GLGDLY in PR 2611

Contributors Shoutout:

No changes to highlight.

Version 3.9

New Features:

  • Gradio is now embedded directly in colab without requiring the share link by @aliabid94 in PR 2455

Calling functions by api_name in loaded apps

When you load an upstream app with gr.Blocks.load, you can now specify which fn to call with the api_name parameter.

import gradio as gr
english_translator = gr.Blocks.load(name="spaces/gradio/english-translator")
german = english_translator("My name is Freddy", api_name='translate-to-german')

The api_name parameter will take precendence over the fn_index parameter.

Bug Fixes:

Documentation Changes:

  • Added a Guide on how to configure the queue for maximum performance by @abidlabs in PR 2558

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.8.2

Bug Fixes:

  • Ensure gradio apps embedded via spaces use the correct endpoint for predictions. @pngwn in PR 2567
  • Ensure gradio apps embedded via spaces use the correct websocket protocol. @pngwn in PR 2571

New Features:

Running Events Continuously

Gradio now supports the ability to run an event continuously on a fixed schedule. To use this feature, pass every=# of seconds to the event definition. This will run the event every given number of seconds!

This can be used to:

  • Create live visualizations that show the most up to date data
  • Refresh the state of the frontend automatically in response to changes in the backend

Here is an example of a live plot that refreshes every half second:

import math
import gradio as gr
import plotly.express as px
import numpy as np


plot_end = 2 * math.pi


def get_plot(period=1):
    global plot_end
    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)
    y = np.sin(2*math.pi*period * x)
    fig = px.line(x=x, y=y)
    plot_end += 2 * math.pi
    return fig


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            gr.Markdown("Change the value of the slider to automatically update the plot")
            period = gr.Slider(label="Period of plot", value=1, minimum=0, maximum=10, step=1)
            plot = gr.Plot(label="Plot (updates every half second)")

    dep = demo.load(get_plot, None, plot, every=0.5)
    period.change(get_plot, period, plot, every=0.5, cancels=[dep])

demo.queue().launch()

live_demo

Bug Fixes:

No changes to highlight.

Documentation Changes:

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Allows loading private Spaces by passing an an api_key to gr.Interface.load() by @abidlabs in PR 2568

Contributors Shoutout:

No changes to highlight.

Version 3.8

New Features:

  • Allows event listeners to accept a single dictionary as its argument, where the keys are the components and the values are the component values. This is set by passing the input components in the event listener as a set instead of a list. @aliabid94 in PR 2550

Bug Fixes:

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.7

New Features:

Batched Functions

Gradio now supports the ability to pass batched functions. Batched functions are just functions which take in a list of inputs and return a list of predictions.

For example, here is a batched function that takes in two lists of inputs (a list of words and a list of ints), and returns a list of trimmed words as output:

import time

def trim_words(words, lens):
    trimmed_words = []
    time.sleep(5)
    for w, l in zip(words, lens):
        trimmed_words.append(w[:l])
    return [trimmed_words]

The advantage of using batched functions is that if you enable queuing, the Gradio server can automatically batch incoming requests and process them in parallel, potentially speeding up your demo. Here's what the Gradio code looks like (notice the batch=True and max_batch_size=16 -- both of these parameters can be passed into event triggers or into the Interface class)

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        word = gr.Textbox(label="word", value="abc")
        leng = gr.Number(label="leng", precision=0, value=1)
        output = gr.Textbox(label="Output")
    with gr.Row():
        run = gr.Button()

    event = run.click(trim_words, [word, leng], output, batch=True, max_batch_size=16)

demo.queue()
demo.launch()

In the example above, 16 requests could be processed in parallel (for a total inference time of 5 seconds), instead of each request being processed separately (for a total inference time of 80 seconds).

Upload Event

Video, Audio, Image, and File components now support a upload() event that is triggered when a user uploads a file into any of these components.

Example usage:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        input_video = gr.Video()
        output_video = gr.Video()

     # Clears the output video when an input video is uploaded
    input_video.upload(lambda : None, None, output_video)

Bug Fixes:

  • Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. @dawoodkhan82 in PR 2486
  • Prevent requests to the /api endpoint from skipping the queue if the queue is enabled for that event by @freddyaboulton in PR 2493
  • Fixes a bug with cancels in event triggers so that it works properly if multiple Blocks are rendered by @abidlabs in PR 2530
  • Prevent invalid targets of events from crashing the whole application. @pngwn in PR 2534
  • Properly dequeue cancelled events when multiple apps are rendered by @freddyaboulton in PR 2540

Documentation Changes:

  • Added an example interactive dashboard to the "Tabular & Plots" section of the Demos page by @freddyaboulton in PR 2508

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

  • Fixes the error message if a user builds Gradio locally and tries to use share=True by @abidlabs in PR 2502
  • Allows the render() function to return self by @Raul9595 in PR 2514
  • Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. @dawoodkhan82 in PR 2486
  • Gradio now supports batched functions by @abidlabs in PR 2218
  • Add upload event for Video, Audio, Image, and File components @dawoodkhan82 in PR 2448
  • Changes websocket path for Spaces as it is no longer necessary to have a different URL for websocket connections on Spaces by @abidlabs in PR 2528
  • Clearer error message when events are defined outside of a Blocks scope, and a warning if you try to use Series or Parallel with Blocks by @abidlabs in PR 2543
  • Adds support for audio samples that are in float64, float16, or uint16 formats by @abidlabs in PR 2545

Contributors Shoutout:

No changes to highlight.

Version 3.6

New Features:

Cancelling Running Events

Running events can be cancelled when other events are triggered! To test this feature, pass the cancels parameter to the event listener. For this feature to work, the queue must be enabled.

cancel_on_change_rl

Code:

import time
import gradio as gr

def fake_diffusion(steps):
    for i in range(steps):
        time.sleep(1)
        yield str(i)

def long_prediction(*args, **kwargs):
    time.sleep(10)
    return 42


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            n = gr.Slider(1, 10, value=9, step=1, label="Number Steps")
            run = gr.Button()
            output = gr.Textbox(label="Iterative Output")
            stop = gr.Button(value="Stop Iterating")
        with gr.Column():
            prediction = gr.Number(label="Expensive Calculation")
            run_pred = gr.Button(value="Run Expensive Calculation")
        with gr.Column():
            cancel_on_change = gr.Textbox(label="Cancel Iteration and Expensive Calculation on Change")

    click_event = run.click(fake_diffusion, n, output)
    stop.click(fn=None, inputs=None, outputs=None, cancels=[click_event])
    pred_event = run_pred.click(fn=long_prediction, inputs=None, outputs=prediction)

    cancel_on_change.change(None, None, None, cancels=[click_event, pred_event])


demo.queue(concurrency_count=1, max_size=20).launch()

For interfaces, a stop button will be added automatically if the function uses a yield statement.

import gradio as gr
import time

def iteration(steps):
    for i in range(steps):
       time.sleep(0.5)
       yield i

gr.Interface(iteration,
             inputs=gr.Slider(minimum=1, maximum=10, step=1, value=5),
             outputs=gr.Number()).queue().launch()

stop_interface_rl

Bug Fixes:

  • Add loading status tracker UI to HTML and Markdown components. @pngwn in PR 2474
  • Fixed videos being mirrored in the front-end if source is not webcam by @freddyaboulton in PR 2475
  • Add clear button for timeseries component @dawoodkhan82 in PR 2487
  • Removes special characters from temporary filenames so that the files can be served by components @abidlabs in PR 2480
  • Fixed infinite reload loop when mounting gradio as a sub application by @freddyaboulton in PR 2477

Documentation Changes:

  • Adds a demo to show how a sound alert can be played upon completion of a prediction by @abidlabs in PR 2478

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.5

Bug Fixes:

  • Ensure that Gradio does not take control of the HTML page title when embedding a gradio app as a web component, this behaviour flipped by adding control_page_title="true" to the webcomponent. @pngwn in PR 2400

  • Decreased latency in iterative-output demos by making the iteration asynchronous @freddyaboulton in PR 2409

  • Fixed queue getting stuck under very high load by @freddyaboulton in PR 2374

  • Ensure that components always behave as if interactive=True were set when the following conditions are true:

    • no default value is provided,
    • they are not set as the input or output of an event,
    • interactive kwarg is not set.

    @pngwn in PR 2459

New Features:

  • When an Image component is set to source="upload", it is now possible to drag and drop and image to replace a previously uploaded image by @pngwn in PR 1711
  • The gr.Dataset component now accepts HTML and Markdown components by @abidlabs in PR 2437

Documentation Changes:

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

  • The Carousel component is officially deprecated. Since gradio 3.0, code containing the Carousel component would throw warnings. As of the next release, the Carousel component will raise an exception.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.4.1

New Features:

1. See Past and Upcoming Changes in the Release History 👀

You can now see gradio's release history directly on the website, and also keep track of upcoming changes. Just go here.

release-history

Bug Fixes:

  1. Fix typo in guide image path by @freddyaboulton in PR 2357
  2. Raise error if Blocks has duplicate component with same IDs by @abidlabs in PR 2359
  3. Catch the permission exception on the audio component by @Ian-GL in PR 2330
  4. Fix image_classifier_interface_load demo by @freddyaboulton in PR 2365
  5. Fix combining adjacent components without gaps by introducing gr.Row(variant="compact") by @aliabid94 in PR 2291 This comes with deprecation of the following arguments for Component.style: round, margin, border.
  6. Fix audio streaming, which was previously choppy in PR 2351. Big thanks to @yannickfunk for the proposed solution.
  7. Fix bug where new typeable slider doesn't respect the minimum and maximum values @dawoodkhan82 in PR 2380

Documentation Changes:

  1. New Guide: Connecting to a Database 🗄️

    A new guide by @freddyaboulton that explains how you can use Gradio to connect your app to a database. Read more here.

  2. New Guide: Running Background Tasks 🥷

    A new guide by @freddyaboulton that explains how you can run background tasks from your gradio app. Read more here.

  3. Small fixes to docs for Image component by @abidlabs in PR 2372

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

No changes to highlight.

Version 3.4

New Features:

You can now pass captions to images in the Gallery component. To do so you need to pass a {List} of (image, {str} caption) tuples. This is optional and the component also accepts just a list of the images.

Here's an example:

import gradio as gr

images_with_captions = [
    ("https://images.unsplash.com/photo-1551969014-7d2c4cddf0b6", "Cheetah by David Groves"),
    ("https://images.unsplash.com/photo-1546182990-dffeafbe841d", "Lion by Francesco"),
    ("https://images.unsplash.com/photo-1561731216-c3a4d99437d5", "Tiger by Mike Marrah")
    ]

with gr.Blocks() as demo:
    gr.Gallery(value=images_with_captions)

demo.launch()
gallery_captions

2. Type Values into the Slider 🔢

You can now type values directly on the Slider component! Here's what it looks like:

type-slider

3. Better Sketching and Inpainting 🎨

We've made a lot of changes to our Image component so that it can support better sketching and inpainting.

Now supports:

  • A standalone black-and-white sketch
import gradio as gr
demo = gr.Interface(lambda x: x, gr.Sketchpad(), gr.Image())
demo.launch()

bw

  • A standalone color sketch
import gradio as gr
demo = gr.Interface(lambda x: x, gr.Paint(), gr.Image())
demo.launch()

color-sketch

  • An uploadable image with black-and-white or color sketching
import gradio as gr
demo = gr.Interface(lambda x: x, gr.Image(source='upload', tool='color-sketch'), gr.Image()) # for black and white, tool = 'sketch'
demo.launch()

sketch-new

  • Webcam with black-and-white or color sketching
import gradio as gr
demo = gr.Interface(lambda x: x, gr.Image(source='webcam', tool='color-sketch'), gr.Image()) # for black and white, tool = 'sketch'
demo.launch()

webcam-sketch

As well as other fixes

Bug Fixes:

  1. Fix bug where max concurrency count is not respected in queue by @freddyaboulton in PR 2286
  2. fix : queue could be blocked by @SkyTNT in PR 2288
  3. Supports gr.update() in example caching by @abidlabs in PR 2309
  4. Clipboard fix for iframes by @abidlabs in PR 2321
  5. Fix: Dataframe column headers are reset when you add a new column by @dawoodkhan82 in PR 2318
  6. Added support for URLs for Video, Audio, and Image by @abidlabs in PR 2256
  7. Add documentation about how to create and use the Gradio FastAPI app by @abidlabs in PR 2263

Documentation Changes:

  1. Adding a Playground Tab to the Website by @aliabd in PR 1860
  2. Gradio for Tabular Data Science Workflows Guide by @merveenoyan in PR 2199
  3. Promotes postprocess and preprocess to documented parameters by @abidlabs in PR 2293
  4. Update 2)key_features.md by @voidxd in PR 2326
  5. Add docs to blocks context postprocessing function by @Ian-GL in PR 2332

Testing and Infrastructure Changes

  1. Website fixes and refactoring by @aliabd in PR 2280
  2. Don't deploy to spaces on release by @freddyaboulton in PR 2313

Full Changelog:

Contributors Shoutout:

Version 3.3

New Features:

1. Iterative Outputs

You can now create an iterative output simply by having your function return a generator!

Here's (part of) an example that was used to generate the interface below it. See full code.

def predict(steps, seed):
    generator = torch.manual_seed(seed)
    for i in range(1,steps):
        yield pipeline(generator=generator, num_inference_steps=i)["sample"][0]

example

2. Accordion Layout 🆕

This version of Gradio introduces a new layout component to Blocks: the Accordion. Wrap your elements in a neat, expandable layout that allows users to toggle them as needed.

Usage: (Read the docs)

with gr.Accordion("open up"):
# components here

accordion

3. Skops Integration 📈

Our new integration with skops allows you to load tabular classification and regression models directly from the hub.

Here's a classification example showing how quick it is to set up an interface for a model.

import gradio as gr
gr.Interface.load("models/scikit-learn/tabular-playground").launch()

187936493-5c90c01d-a6dd-400f-aa42-833a096156a1

Bug Fixes:

No changes to highlight.

Documentation Changes:

No changes to highlight.

Testing and Infrastructure Changes:

No changes to highlight.

Breaking Changes:

No changes to highlight.

Full Changelog:

Contributors Shoutout:

Version 3.2

New Features:

1. Improvements to Queuing 🥇

We've implemented a brand new queuing system based on web sockets instead of HTTP long polling. Among other things, this allows us to manage queue sizes better on Hugging Face Spaces. There are also additional queue-related parameters you can add:

  • Now supports concurrent workers (parallelization)
demo = gr.Interface(...)
demo.queue(concurrency_count=3)
demo.launch()
  • Configure a maximum queue size
demo = gr.Interface(...)
demo.queue(max_size=100)
demo.launch()
  • If a user closes their tab / browser, they leave the queue, which means the demo will run faster for everyone else

2. Fixes to Examples

  • Dataframe examples will render properly, and look much clearer in the UI: (thanks to PR #2125)

Screen Shot 2022-08-30 at 8 29 58 PM

  • Image and Video thumbnails are cropped to look neater and more uniform: (thanks to PR #2109)

Screen Shot 2022-08-30 at 8 32 15 PM

  • Other fixes in PR #2131 and #2064 make it easier to design and use Examples

3. Component Fixes 🧱

  • Specify the width and height of an image in its style tag (thanks to PR #2133)
components.Image().style(height=260, width=300)
  • Automatic conversion of videos so they are playable in the browser (thanks to PR #2003). Gradio will check if a video's format is playable in the browser and, if it isn't, will automatically convert it to a format that is (mp4).
  • Pass in a json filepath to the Label component (thanks to PR #2083)
  • Randomize the default value of a Slider (thanks to PR #1935)

slider-random

  • Improvements to State in PR #2100

4. Ability to Randomize Input Sliders and Reload Data whenever the Page Loads

  • In some cases, you want to be able to show a different set of input data to every user as they load the page app. For example, you might want to randomize the value of a "seed" Slider input. Or you might want to show a Textbox with the current date. We now supporting passing functions as the default value in input components. When you pass in a function, it gets re-evaluated every time someone loads the demo, allowing you to reload / change data for different users.

Here's an example loading the current date time into an input Textbox:

import gradio as gr
import datetime

with gr.Blocks() as demo:
    gr.Textbox(datetime.datetime.now)

demo.launch()

Note that we don't evaluate the function -- datetime.datetime.now() -- we pass in the function itself to get this behavior -- datetime.datetime.now

Because randomizing the initial value of Slider is a common use case, we've added a randomize keyword argument you can use to randomize its initial value:

import gradio as gr
demo = gr.Interface(lambda x:x, gr.Slider(0, 10, randomize=True), "number")
demo.launch()

5. New Guide 🖊️

Full Changelog:

Contributors Shoutout:

Version 3.1

New Features:

1. Embedding Demos on Any Website 💻

With PR #1444, Gradio is now distributed as a web component. This means demos can be natively embedded on websites. You'll just need to add two lines: one to load the gradio javascript, and one to link to the demos backend.

Here's a simple example that embeds the demo from a Hugging Face space:

<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/3.0.18/gradio.js"
></script>
<gradio-app space="abidlabs/pytorch-image-classifier"></gradio-app>

But you can also embed demos that are running anywhere, you just need to link the demo to src instead of space. In fact, all the demos on the gradio website are embedded this way:

Screen Shot 2022-07-14 at 2 41 44 PM

Read more in the Embedding Gradio Demos guide.

2. Reload Mode 👨‍💻

Reload mode helps developers create gradio demos faster by automatically reloading the demo whenever the code changes. It can support development on Python IDEs (VS Code, PyCharm, etc), the terminal, as well as Jupyter notebooks.

If your demo code is in a script named app.py, instead of running python app.py you can now run gradio app.py and that will launch the demo in reload mode:

Launching in reload mode on: http://127.0.0.1:7860 (Press CTRL+C to quit)
Watching...
WARNING: The --reload flag should not be used in production on Windows.

If you're working from a Jupyter or Colab Notebook, use these magic commands instead: %load_ext gradio when you import gradio, and %%blocks in the top of the cell with the demo code. Here's an example that shows how much faster the development becomes:

Blocks

3. Inpainting Support on gr.Image() 🎨

We updated the Image component to add support for inpainting demos. It works by adding tool="sketch" as a parameter, that passes both an image and a sketchable mask to your prediction function.

Here's an example from the LAMA space:

FXApVlFVsAALSD-

4. Markdown and HTML support in Dataframes 🔢

We upgraded the Dataframe component in PR #1684 to support rendering Markdown and HTML inside the cells.

This means you can build Dataframes that look like the following:

image (8)

5. gr.Examples() for Blocks 🧱

We've added the gr.Examples component helper to allow you to add examples to any Blocks demo. This class is a wrapper over the gr.Dataset component.

Screen Shot 2022-07-14 at 2 23 50 PM

gr.Examples takes two required parameters:

  • examples which takes in a nested list
  • inputs which takes in a component or list of components

You can read more in the Examples docs or the Adding Examples to your Demos guide.

6. Fixes to Audio Streaming

With PR 1828 we now hide the status loading animation, as well as remove the echo in streaming. Check out the stream_audio demo for more or read through our Real Time Speech Recognition guide.

Screen Shot 2022-07-19 at 6 02 35 PM

Full Changelog:

Contributors Shoutout:

Version 3.0

🔥 Gradio 3.0 is the biggest update to the library, ever.

New Features:

1. Blocks 🧱

Blocks is a new, low-level API that allows you to have full control over the data flows and layout of your application. It allows you to build very complex, multi-step applications. For example, you might want to:

  • Group together related demos as multiple tabs in one web app
  • Change the layout of your demo instead of just having all of the inputs on the left and outputs on the right
  • Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general
  • Change a component's properties (for example, the choices in a Dropdown) or its visibility based on user input

Here's a simple example that creates the demo below it:

import gradio as gr

def update(name):
    return f"Welcome to Gradio, {name}!"

demo = gr.Blocks()

with demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()

    inp.change(fn=update,
               inputs=inp,
               outputs=out)

demo.launch()

hello-blocks

Read our Introduction to Blocks guide for more, and join the 🎈 Gradio Blocks Party!

2. Our Revamped Design 🎨

We've upgraded our design across the entire library: from components, and layouts all the way to dark mode.

kitchen_sink

3. A New Website 💻

We've upgraded gradio.app to make it cleaner, faster and easier to use. Our docs now come with components and demos embedded directly on the page. So you can quickly get up to speed with what you're looking for.

website

4. New Components: Model3D, Dataset, and More..

We've introduced a lot of new components in 3.0, including Model3D, Dataset, Markdown, Button and Gallery. You can find all the components and play around with them here.

Model3d

Full Changelog:

Contributors Shoutout: