mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
2777 Add restProps to IconButton … (#2791)
* 2777 Add restProps to IconButton and use it to pass aria-labels down to the button element where it's used in other UI components * 2777 Update per PR feedback, explicitly pass in label prop instead of using restProps * 2777 Fix mysterious linter error * Update changelog to fix PR number 2791 * Fix merge conflict * Update CHANGELOG.md Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
Emily Uhde
GitHub
parent
9c8fa8bf45
commit
ade918d0a2
180
CHANGELOG.md
180
CHANGELOG.md
@ -1,4 +1,4 @@
|
||||
# Upcoming Release
|
||||
# Upcoming Release
|
||||
|
||||
## New Features:
|
||||
|
||||
@ -31,8 +31,9 @@ These links are a more secure and scalable way to create shareable demos!
|
||||
No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Fixed typo in parameter `visible` in classes in `templates.py` by [@abidlabs](https://github.com/abidlabs) in [PR 2805](https://github.com/gradio-app/gradio/pull/2805)
|
||||
* Switched external service for getting IP address from `https://api.ipify.org` to `https://checkip.amazonaws.com/` by [@abidlabs](https://github.com/abidlabs) in [PR 2810](https://github.com/gradio-app/gradio/pull/2810)
|
||||
|
||||
* Fixed typo in parameter `visible` in classes in `templates.py` by [@abidlabs](https://github.com/abidlabs) in [PR 2805](https://github.com/gradio-app/gradio/pull/2805)
|
||||
* Switched external service for getting IP address from `https://api.ipify.org` to `https://checkip.amazonaws.com/` by [@abidlabs](https://github.com/abidlabs) in [PR 2810](https://github.com/gradio-app/gradio/pull/2810)
|
||||
|
||||
|
||||
## Contributors Shoutout:
|
||||
@ -78,11 +79,11 @@ demo.launch()
|
||||
|
||||
|
||||
By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2764](https://github.com/gradio-app/gradio/pull/2764)
|
||||
|
||||
|
||||
|
||||
### Support for altair plots
|
||||
|
||||
The `Plot` component can now accept altair plots as values!
|
||||
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:
|
||||
|
||||
@ -115,7 +116,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2741](https://git
|
||||
|
||||
The `Label` component now accepts a `color` argument by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2736](https://github.com/gradio-app/gradio/pull/2736).
|
||||
The `color` argument should either be a valid css color name or hexadecimal string.
|
||||
You can update the color with `gr.Label.update`!
|
||||
You can update the color with `gr.Label.update`!
|
||||
|
||||
This lets you create Alert and Warning boxes with the `Label` component. See below:
|
||||
|
||||
@ -138,8 +139,8 @@ 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)
|
||||
@ -148,7 +149,7 @@ demo.queue().launch()
|
||||
|
||||
|
||||
|
||||
### Add Brazilian Portuguese translation
|
||||
### Add Brazilian Portuguese translation
|
||||
|
||||
Add Brazilian Portuguese translation (pt-BR.json) by [@pstwh](http://github.com/pstwh) in [PR 2753](https://github.com/gradio-app/gradio/pull/2753):
|
||||
|
||||
@ -156,11 +157,12 @@ Add Brazilian Portuguese translation (pt-BR.json) by [@pstwh](http://github.com/
|
||||
|
||||
## Bug Fixes:
|
||||
* Fixed issue where image thumbnails were not showing when an example directory was provided
|
||||
by by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745)
|
||||
* Fixed bug loading audio input models from the hub by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2779](https://github.com/gradio-app/gradio/pull/2779).
|
||||
by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745)
|
||||
* Fixed bug loading audio input models from the hub by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2779](https://github.com/gradio-app/gradio/pull/2779).
|
||||
* Fixed issue where entities were not merged when highlighted text was generated from the
|
||||
dictionary inputs [@payoto](https://github.com/payoto) in [PR 2767](https://github.com/gradio-app/gradio/pull/2767)
|
||||
* Fixed bug where generating events did not finish running even if the websocket connection was closed by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2783](https://github.com/gradio-app/gradio/pull/2783).
|
||||
* Fixed bug where generating events did not finish running even if the websocket connection was closed by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2783](https://github.com/gradio-app/gradio/pull/2783).
|
||||
* Added aria-labels to icon buttons that are built into UI components by [@emilyuhde](http://github.com/emilyuhde) in [PR 2791](https://github.com/gradio-app/gradio/pull/2791)
|
||||
|
||||
## Documentation Changes:
|
||||
No changes to highlight.
|
||||
@ -172,8 +174,8 @@ No changes to highlight.
|
||||
No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Images in the chatbot component are now resized if they exceed a max width by [@abidlabs](https://github.com/abidlabs) in [PR 2748](https://github.com/gradio-app/gradio/pull/2748)
|
||||
* Missing parameters have been added to `gr.Blocks().load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2755](https://github.com/gradio-app/gradio/pull/2755)
|
||||
* Images in the chatbot component are now resized if they exceed a max width by [@abidlabs](https://github.com/abidlabs) in [PR 2748](https://github.com/gradio-app/gradio/pull/2748)
|
||||
* Missing parameters have been added to `gr.Blocks().load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2755](https://github.com/gradio-app/gradio/pull/2755)
|
||||
* Deindex share URLs from search by [@aliabd](https://github.com/aliabd) in [PR 2772](https://github.com/gradio-app/gradio/pull/2772)
|
||||
* Redirect old links and fix broken ones by [@aliabd](https://github.com/aliabd) in [PR 2774](https://github.com/gradio-app/gradio/pull/2774)
|
||||
|
||||
@ -186,8 +188,8 @@ No changes to highlight.
|
||||
|
||||
### 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](https://github.com/abidlabs) in [PR 2731](https://github.com/gradio-app/gradio/pull/2731)
|
||||
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](https://github.com/abidlabs) in [PR 2731](https://github.com/gradio-app/gradio/pull/2731)
|
||||
|
||||
Here's a simple example that references a local image `lion.jpg` that is in the same
|
||||
folder as the Python script:
|
||||
@ -197,7 +199,7 @@ import gradio as gr
|
||||
|
||||
with gr.Blocks() as demo:
|
||||
gr.Chatbot([("hi", "hello **abubakar**"), ("", "cool pic")])
|
||||
|
||||
|
||||
demo.launch()
|
||||
```
|
||||
|
||||
@ -248,7 +250,7 @@ demo.launch()
|
||||
## Bug Fixes:
|
||||
* Fixed bug where requests timeout is missing from utils.version_check() by [@yujiehecs](https://github.com/yujiehecs) in [PR 2729](https://github.com/gradio-app/gradio/pull/2729)
|
||||
* Fixed bug where so that the `File` component can properly preprocess files to "binary" byte-string format by [CoffeeVampir3](https://github.com/CoffeeVampir3) in [PR 2727](https://github.com/gradio-app/gradio/pull/2727)
|
||||
* Fixed bug to ensure that filenames are less than 200 characters even for non-English languages by [@SkyTNT](https://github.com/SkyTNT) in [PR 2685](https://github.com/gradio-app/gradio/pull/2685)
|
||||
* Fixed bug to ensure that filenames are less than 200 characters even for non-English languages by [@SkyTNT](https://github.com/SkyTNT) in [PR 2685](https://github.com/gradio-app/gradio/pull/2685)
|
||||
|
||||
## Documentation Changes:
|
||||
* Performance improvements to docs on mobile by [@aliabd](https://github.com/aliabd) in [PR 2730](https://github.com/gradio-app/gradio/pull/2730)
|
||||
@ -320,11 +322,11 @@ io = gr.Interface(echo, "textbox", "textbox").launch()
|
||||
is now 1GB by [@abidlabs](https://github.com/abidlabs) in [PR 2709](https://github.com/gradio-app/gradio/pull/2709)
|
||||
|
||||
## Documentation Changes:
|
||||
* Updated documentation for embedding Gradio demos on Spaces as web components by
|
||||
* Updated documentation for embedding Gradio demos on Spaces as web components by
|
||||
[@julien-c](https://github.com/julien-c) in [PR 2698](https://github.com/gradio-app/gradio/pull/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
|
||||
* 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](https://github.com/julien-c) in [PR 2692](https://github.com/gradio-app/gradio/pull/2692)
|
||||
* Colab buttons on every demo in the website! Just click open in colab, and run the demo there.
|
||||
* Colab buttons on every demo in the website! Just click open in colab, and run the demo there.
|
||||
|
||||
|
||||
|
||||
@ -337,7 +339,7 @@ No changes to highlight.
|
||||
No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Better warnings and error messages for `gr.Interface.load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2694](https://github.com/gradio-app/gradio/pull/2694)
|
||||
* Better warnings and error messages for `gr.Interface.load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2694](https://github.com/gradio-app/gradio/pull/2694)
|
||||
* Add open in colab buttons to demos in docs and /demos by [@aliabd](https://github.com/aliabd) in [PR 2608](https://github.com/gradio-app/gradio/pull/2608)
|
||||
* Apply different formatting for the types in component docstrings by [@aliabd](https://github.com/aliabd) in [PR 2707](https://github.com/gradio-app/gradio/pull/2707)
|
||||
|
||||
@ -362,7 +364,7 @@ No changes to highlight.
|
||||
No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Clean up printed statements in Embedded Colab Mode by [@aliabid94](https://github.com/aliabid94) in [PR 2612](https://github.com/gradio-app/gradio/pull/2612)
|
||||
* Clean up printed statements in Embedded Colab Mode by [@aliabid94](https://github.com/aliabid94) in [PR 2612](https://github.com/gradio-app/gradio/pull/2612)
|
||||
|
||||
## Contributors Shoutout:
|
||||
No changes to highlight.
|
||||
@ -404,13 +406,13 @@ No changes to highlight.
|
||||
|
||||
## Bug Fixes:
|
||||
* Only set a min height on md and html when loading by [@pngwn](https://github.com/pngwn) in [PR 2623](https://github.com/gradio-app/gradio/pull/2623)
|
||||
|
||||
|
||||
## Documentation Changes:
|
||||
* See docs for the latest gradio commit to main as well the latest pip release:
|
||||
|
||||
|
||||
|
||||
* Modified the "Connecting To a Database Guide" to use `pd.read_sql` as opposed to low-level postgres connector by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2604](https://github.com/gradio-app/gradio/pull/2604)
|
||||
* Modified the "Connecting To a Database Guide" to use `pd.read_sql` as opposed to low-level postgres connector by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2604](https://github.com/gradio-app/gradio/pull/2604)
|
||||
|
||||
## Testing and Infrastructure Changes:
|
||||
No changes to highlight.
|
||||
@ -420,7 +422,7 @@ No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Dropdown for seeing docs as latest or main by [@aliabd](https://github.com/aliabd) in [PR 2544](https://github.com/gradio-app/gradio/pull/2544)
|
||||
* Allow `gr.Templates` to accept parameters to override the defaults by [@abidlabs](https://github.com/abidlabs) in [PR 2600](https://github.com/gradio-app/gradio/pull/2600)
|
||||
* Allow `gr.Templates` to accept parameters to override the defaults by [@abidlabs](https://github.com/abidlabs) in [PR 2600](https://github.com/gradio-app/gradio/pull/2600)
|
||||
* Components now throw a `ValueError()` if constructed with invalid parameters for `type` or `source` (for components that take those parameters) in [PR 2610](https://github.com/gradio-app/gradio/pull/2610)
|
||||
* Allow auth with using queue by [@GLGDLY](https://github.com/GLGDLY) in [PR 2611](https://github.com/gradio-app/gradio/pull/2611)
|
||||
|
||||
@ -431,7 +433,7 @@ No changes to highlight.
|
||||
# Version 3.9
|
||||
|
||||
## New Features:
|
||||
* Gradio is now embedded directly in colab without requiring the share link by [@aliabid94](https://github.com/aliabid94) in [PR 2455](https://github.com/gradio-app/gradio/pull/2455)
|
||||
* Gradio is now embedded directly in colab without requiring the share link by [@aliabid94](https://github.com/aliabid94) in [PR 2455](https://github.com/gradio-app/gradio/pull/2455)
|
||||
|
||||
### Calling functions by api_name in loaded apps
|
||||
|
||||
@ -463,7 +465,7 @@ No changes to highlight.
|
||||
No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Add `api_name` to `Blocks.__call__` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2593](https://github.com/gradio-app/gradio/pull/2593)
|
||||
* Add `api_name` to `Blocks.__call__` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2593](https://github.com/gradio-app/gradio/pull/2593)
|
||||
* Update queue with using deque & update requirements by [@GLGDLY](https://github.com/GLGDLY) in [PR 2428](https://github.com/gradio-app/gradio/pull/2428)
|
||||
|
||||
|
||||
@ -485,7 +487,7 @@ Gradio now supports the ability to run an event continuously on a fixed schedule
|
||||
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
|
||||
* 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:
|
||||
@ -581,7 +583,7 @@ No changes to highlight.
|
||||
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
|
||||
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:
|
||||
|
||||
```py
|
||||
@ -591,15 +593,15 @@ def trim_words(words, lens):
|
||||
trimmed_words = []
|
||||
time.sleep(5)
|
||||
for w, l in zip(words, lens):
|
||||
trimmed_words.append(w[:l])
|
||||
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,
|
||||
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)
|
||||
into event triggers or into the `Interface` class)
|
||||
|
||||
```py
|
||||
import gradio as gr
|
||||
@ -637,7 +639,7 @@ with gr.Blocks() as demo:
|
||||
output_video = gr.Video()
|
||||
|
||||
# Clears the output video when an input video is uploaded
|
||||
input_video.upload(lambda : None, None, output_video)
|
||||
input_video.upload(lambda : None, None, output_video)
|
||||
```
|
||||
|
||||
|
||||
@ -645,9 +647,9 @@ with gr.Blocks() as demo:
|
||||
* Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2486](https://github.com/gradio-app/gradio/pull/2486)
|
||||
* Prevent requests to the `/api` endpoint from skipping the queue if the queue is enabled for that event by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2493](https://github.com/gradio-app/gradio/pull/2493)
|
||||
* Fixes a bug with `cancels` in event triggers so that it works properly if multiple
|
||||
Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)
|
||||
Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)
|
||||
* Prevent invalid targets of events from crashing the whole application. [@pngwn](https://github.com/pngwn) in [PR 2534](https://github.com/gradio-app/gradio/pull/2534)
|
||||
* Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540)
|
||||
* Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540)
|
||||
|
||||
## Documentation Changes:
|
||||
* Added an example interactive dashboard to the "Tabular & Plots" section of the Demos page by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2508](https://github.com/gradio-app/gradio/pull/2508)
|
||||
@ -774,9 +776,9 @@ No changes to highlight.
|
||||
* Decreased latency in iterative-output demos by making the iteration asynchronous [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2409](https://github.com/gradio-app/gradio/pull/2409)
|
||||
* Fixed queue getting stuck under very high load by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2374](https://github.com/gradio-app/gradio/pull/2374)
|
||||
* Ensure that components always behave as if `interactive=True` were set when the following conditions are true:
|
||||
- no default value is provided,
|
||||
- no default value is provided,
|
||||
- they are not set as the input or output of an event,
|
||||
- `interactive` kwarg is not set.
|
||||
- `interactive` kwarg is not set.
|
||||
|
||||
[@pngwn](https://github.com/pngwn) in [PR 2459](https://github.com/gradio-app/gradio/pull/2459)
|
||||
|
||||
@ -797,18 +799,18 @@ No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
* Speeds up Gallery component by using temporary files instead of base64 representation in the front-end by [@proxyphi](https://github.com/proxyphi), [@pngwn](https://github.com/pngwn), and [@abidlabs](https://github.com/abidlabs) in [PR 2265](https://github.com/gradio-app/gradio/pull/2265)
|
||||
* Fixed some embedded demos in the guides by not loading the gradio web component in some guides by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2403](https://github.com/gradio-app/gradio/pull/2403)
|
||||
* Fixed some embedded demos in the guides by not loading the gradio web component in some guides by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2403](https://github.com/gradio-app/gradio/pull/2403)
|
||||
* 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](https://github.com/pngwn) in [PR 2400](https://github.com/gradio-app/gradio/pull/2410)
|
||||
* Improve documentation of the `Blocks.load()` event by [@abidlabs](https://github.com/abidlabs) in [PR 2413](https://github.com/gradio-app/gradio/pull/2413)
|
||||
* Decreased latency in iterative-output demos by making the iteration asynchronous [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2409](https://github.com/gradio-app/gradio/pull/2409)
|
||||
* Updated share link message to reference new Spaces Hardware [@abidlabs](https://github.com/abidlabs) in [PR 2423](https://github.com/gradio-app/gradio/pull/2423)
|
||||
* Automatically restart spaces if they're down by [@aliabd](https://github.com/aliabd) in [PR 2405](https://github.com/gradio-app/gradio/pull/2405)
|
||||
* Carousel component is now deprecated by [@abidlabs](https://github.com/abidlabs) in [PR 2434](https://github.com/gradio-app/gradio/pull/2434)
|
||||
* Build Gradio from source in ui tests by by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2440](https://github.com/gradio-app/gradio/pull/2440)
|
||||
* Build Gradio from source in ui tests by by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2440](https://github.com/gradio-app/gradio/pull/2440)
|
||||
* Change "return ValueError" to "raise ValueError" by [@vzakharov](https://github.com/vzakharov) in [PR 2445](https://github.com/gradio-app/gradio/pull/2445)
|
||||
* Add guide on creating a map demo using the `gr.Plot()` component [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2402](https://github.com/gradio-app/gradio/pull/2402)
|
||||
* Add blur event for `Textbox` and `Number` components [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2448](https://github.com/gradio-app/gradio/pull/2448)
|
||||
* Stops a gradio launch from hogging a port even after it's been killed [@aliabid94](https://github.com/aliabid94) in [PR 2453](https://github.com/gradio-app/gradio/pull/2453)
|
||||
* Stops a gradio launch from hogging a port even after it's been killed [@aliabid94](https://github.com/aliabid94) in [PR 2453](https://github.com/gradio-app/gradio/pull/2453)
|
||||
* Fix embedded interfaces on touch screen devices by [@aliabd](https://github.com/aliabd) in [PR 2457](https://github.com/gradio-app/gradio/pull/2457)
|
||||
* Upload all demos to spaces by [@aliabd](https://github.com/aliabd) in [PR 2281](https://github.com/gradio-app/gradio/pull/2281)
|
||||
|
||||
@ -884,18 +886,18 @@ No changes to highlight.
|
||||
|
||||
## New Features:
|
||||
|
||||
### 1. Gallery Captions 🖼️
|
||||
### 1. Gallery Captions 🖼️
|
||||
|
||||
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.
|
||||
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:
|
||||
Here's an example:
|
||||
|
||||
```python
|
||||
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-1546182990-dffeafbe841d", "Lion by Francesco"),
|
||||
("https://images.unsplash.com/photo-1561731216-c3a4d99437d5", "Tiger by Mike Marrah")
|
||||
]
|
||||
|
||||
@ -907,15 +909,15 @@ demo.launch()
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/9021060/192399521-7360b1a9-7ce0-443e-8e94-863a230a7dbe.gif" alt="gallery_captions" width="1000"/>
|
||||
|
||||
### 2. Type Values into the Slider 🔢
|
||||
### 2. Type Values into the Slider 🔢
|
||||
|
||||
You can now type values directly on the Slider component! Here's what it looks like:
|
||||
You can now type values directly on the Slider component! Here's what it looks like:
|
||||
|
||||
|
||||
|
||||
### 3. Better Sketching and Inpainting 🎨
|
||||
### 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.
|
||||
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
|
||||
@ -956,7 +958,7 @@ demo.launch()
|
||||
|
||||
|
||||
|
||||
As well as other fixes
|
||||
As well as other fixes
|
||||
|
||||
|
||||
## Bug Fixes:
|
||||
@ -1009,7 +1011,7 @@ As well as other fixes
|
||||
|
||||
## New Features:
|
||||
|
||||
### 1. Iterative Outputs ⏳
|
||||
### 1. Iterative Outputs ⏳
|
||||
|
||||
You can now create an iterative output simply by having your function return a generator!
|
||||
|
||||
@ -1025,22 +1027,22 @@ def predict(steps, seed):
|
||||
|
||||
|
||||
|
||||
### 2. Accordion Layout 🆕
|
||||
### 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.
|
||||
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](https://gradio.app/docs/#accordion))
|
||||
|
||||
```python
|
||||
with gr.Accordion("open up"):
|
||||
# components here
|
||||
# components here
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 3. Skops Integration 📈
|
||||
### 3. Skops Integration 📈
|
||||
|
||||
Our new integration with [skops](https://huggingface.co/blog/skops) allows you to load tabular classification and regression models directly from the [hub](https://huggingface.co/models).
|
||||
Our new integration with [skops](https://huggingface.co/blog/skops) allows you to load tabular classification and regression models directly from the [hub](https://huggingface.co/models).
|
||||
|
||||
Here's a classification example showing how quick it is to set up an interface for a [model](https://huggingface.co/scikit-learn/tabular-playground).
|
||||
|
||||
@ -1092,24 +1094,24 @@ No changes to highlight.
|
||||
|
||||
## New Features:
|
||||
|
||||
### 1. Improvements to Queuing 🥇
|
||||
### 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)
|
||||
* Now supports concurrent workers (parallelization)
|
||||
```python
|
||||
demo = gr.Interface(...)
|
||||
demo.queue(concurrency_count=3)
|
||||
demo.launch()
|
||||
```
|
||||
* Configure a maximum queue size
|
||||
* Configure a maximum queue size
|
||||
```python
|
||||
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
|
||||
* 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
|
||||
|
||||
@ -1117,29 +1119,29 @@ demo.launch()
|
||||
|
||||
|
||||
|
||||
* Image and Video thumbnails are cropped to look neater and more uniform: (thanks to PR #2109)
|
||||
* Image and Video thumbnails are cropped to look neater and more uniform: (thanks to PR #2109)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Other fixes in PR #2131 and #2064 make it easier to design and use Examples
|
||||
|
||||
### 3. Component Fixes 🧱
|
||||
### 3. Component Fixes 🧱
|
||||
* Specify the width and height of an image in its style tag (thanks to PR #2133)
|
||||
```python
|
||||
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)
|
||||
* Pass in a json filepath to the Label component (thanks to PR #2083)
|
||||
* Randomize the default value of a Slider (thanks to PR #1935)
|
||||
|
||||
|
||||
|
||||
|
||||
* Improvements to State in PR #2100
|
||||
* 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.
|
||||
### 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:
|
||||
|
||||
@ -1149,7 +1151,7 @@ import datetime
|
||||
|
||||
with gr.Blocks() as demo:
|
||||
gr.Textbox(datetime.datetime.now)
|
||||
|
||||
|
||||
demo.launch()
|
||||
```
|
||||
|
||||
@ -1163,7 +1165,7 @@ demo = gr.Interface(lambda x:x, gr.Slider(0, 10, randomize=True), "number")
|
||||
demo.launch()
|
||||
```
|
||||
|
||||
### 5. New Guide 🖊️
|
||||
### 5. New Guide 🖊️
|
||||
* [Gradio and W&B Integration](https://gradio.app/Gradio_and_Wandb_Integration/)
|
||||
|
||||
|
||||
@ -1203,8 +1205,8 @@ demo.launch()
|
||||
|
||||
## New Features:
|
||||
|
||||
### 1. Embedding Demos on Any Website 💻
|
||||
|
||||
### 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:
|
||||
@ -1214,16 +1216,16 @@ Here's a simple example that embeds the demo from a Hugging Face space:
|
||||
<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:
|
||||
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:
|
||||
|
||||
<img width="1268" alt="Screen Shot 2022-07-14 at 2 41 44 PM" src="https://user-images.githubusercontent.com/9021060/178997124-b2f05af2-c18f-4716-bf1b-cb971d012636.png">
|
||||
|
||||
|
||||
Read more in the [Embedding Gradio Demos](https://gradio.app/embedding_gradio_demos) guide.
|
||||
|
||||
### 2. Reload Mode 👨💻
|
||||
### 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.
|
||||
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:
|
||||
|
||||
@ -1237,7 +1239,7 @@ If you're working from a Jupyter or Colab Notebook, use these magic commands ins
|
||||
|
||||
|
||||
|
||||
### 3. Inpainting Support on `gr.Image()` 🎨
|
||||
### 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.
|
||||
|
||||
@ -1245,23 +1247,23 @@ Here's an example from the [LAMA space](https://huggingface.co/spaces/akhaliq/la
|
||||
|
||||
|
||||
|
||||
### 4. Markdown and HTML support in Dataframes 🔢
|
||||
### 4. Markdown and HTML support in Dataframes 🔢
|
||||
|
||||
We upgraded the Dataframe component in PR #1684 to support rendering Markdown and HTML inside the cells.
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
### 5. `gr.Examples()` for Blocks 🧱
|
||||
### 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.
|
||||
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.
|
||||
|
||||
<img width="1271" alt="Screen Shot 2022-07-14 at 2 23 50 PM" src="https://user-images.githubusercontent.com/9021060/178992715-c8bc7550-bc3d-4ddc-9fcb-548c159cd153.png">
|
||||
|
||||
|
||||
gr.Examples takes two required parameters:
|
||||
gr.Examples takes two required parameters:
|
||||
|
||||
- `examples` which takes in a nested list
|
||||
- `inputs` which takes in a component or list of components
|
||||
@ -1296,12 +1298,12 @@ With [PR 1828](https://github.com/gradio-app/gradio/pull/1828) we now hide the s
|
||||
|
||||
# Version 3.0
|
||||
|
||||
### 🔥 Gradio 3.0 is the biggest update to the library, ever.
|
||||
### 🔥 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
|
||||
@ -1328,8 +1330,8 @@ with demo:
|
||||
inp = gr.Textbox(placeholder="What is your name?")
|
||||
out = gr.Textbox()
|
||||
|
||||
inp.change(fn=update,
|
||||
inputs=inp,
|
||||
inp.change(fn=update,
|
||||
inputs=inp,
|
||||
outputs=out)
|
||||
|
||||
demo.launch()
|
||||
@ -1341,16 +1343,16 @@ demo.launch()
|
||||
Read our [Introduction to Blocks](http://gradio.app/introduction_to_blocks/) guide for more, and join the 🎈 [Gradio Blocks Party](https://huggingface.co/spaces/Gradio-Blocks/README)!
|
||||
|
||||
|
||||
### 2. Our Revamped Design 🎨
|
||||
### 2. Our Revamped Design 🎨
|
||||
|
||||
We've upgraded our design across the entire library: from components, and layouts all the way to dark mode.
|
||||
We've upgraded our design across the entire library: from components, and layouts all the way to dark mode.
|
||||
|
||||
|
||||
|
||||
|
||||
### 3. A New Website 💻
|
||||
### 3. A New Website 💻
|
||||
|
||||
We've upgraded [gradio.app](https://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.
|
||||
We've upgraded [gradio.app](https://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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let Icon: any;
|
||||
// export let alt = "";
|
||||
export let label = "";
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click
|
||||
class="text-gray-500 bg-white/90 h-5 w-5 flex items-center justify-center rounded shadow-sm hover:shadow-xl hover:ring-1 ring-inset ring-gray-200 z-10 dark:bg-gray-900 dark:ring-gray-600"
|
||||
aria-label={label}
|
||||
>
|
||||
<div class="m-t-1 w-[60%] h-[60%] opacity-80 dark:text-white"><Icon /></div>
|
||||
</button>
|
||||
|
||||
@ -7,9 +7,10 @@
|
||||
</script>
|
||||
|
||||
<div class="z-50 top-2 right-2 justify-end flex gap-1 absolute">
|
||||
<IconButton Icon={Undo} on:click={() => dispatch("undo")} />
|
||||
<IconButton Icon={Undo} label="Undo" on:click={() => dispatch("undo")} />
|
||||
<IconButton
|
||||
Icon={Clear}
|
||||
label="Clear"
|
||||
on:click={(event) => {
|
||||
dispatch("clear");
|
||||
event.stopPropagation();
|
||||
|
||||
@ -22,9 +22,14 @@
|
||||
<!-- <IconButton Icon={Undo} on:click={() => dispatch("undo")} /> -->
|
||||
|
||||
<span class="absolute top-0 right-0">
|
||||
<IconButton Icon={Brush} on:click={() => (show_size = !show_size)} />
|
||||
<IconButton
|
||||
Icon={Brush}
|
||||
label="Use brush"
|
||||
on:click={() => (show_size = !show_size)}
|
||||
/>
|
||||
{#if show_size}
|
||||
<input
|
||||
aria-label="Brush radius"
|
||||
bind:value={brush_radius}
|
||||
class="absolute top-[2px] right-6"
|
||||
type="range"
|
||||
@ -36,9 +41,14 @@
|
||||
|
||||
{#if mode !== "mask"}
|
||||
<span class="absolute top-6 right-0">
|
||||
<IconButton Icon={Color} on:click={() => (show_col = !show_col)} />
|
||||
<IconButton
|
||||
Icon={Color}
|
||||
label="Select brush color"
|
||||
on:click={() => (show_col = !show_col)}
|
||||
/>
|
||||
{#if show_col}
|
||||
<input
|
||||
aria-label="Brush color"
|
||||
bind:value={brush_color}
|
||||
class="absolute top-[-3px] right-6"
|
||||
type="color"
|
||||
|
||||
@ -18,11 +18,12 @@
|
||||
class:m-1={!absolute}
|
||||
>
|
||||
{#if editable}
|
||||
<IconButton Icon={Edit} on:click={() => dispatch("edit")} />
|
||||
<IconButton Icon={Edit} label="Edit" on:click={() => dispatch("edit")} />
|
||||
{/if}
|
||||
|
||||
<IconButton
|
||||
Icon={Clear}
|
||||
label="Clear"
|
||||
on:click={(event) => {
|
||||
dispatch("clear");
|
||||
event.stopPropagation();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user