mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

How data flows through an app (#1897)

Browse Source 
* added info on preprocessing/postprocessing

* preprocessing/postprocessing
This commit is contained in:
Abubakar Abid 2022-07-28 16:57:27 -04:00 committed by GitHub
parent 35d809c788
commit a52af7c483
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
guides/1)getting_started/2)key_features.md
View File

@ -73,6 +73,33 @@ im/1.png,Output/1.png
If you wish for the user to provide a reason for flagging, you can pass a list of strings to the `flagging_options` argument of Interface. Users will have to select one of the strings when flagging, which will be saved as an additional column to the CSV.
## Preprocessing and Postprocessing
![annotated](/assets/img/dataflow.svg)
As you've seen, Gradio includes components that can handle a variety of different data types, such as images, audio, and video. Most components can be used both as inputs or outputs.
When a component is used as an input, Gradio automatically handles the *preprocessing* needed to convert the data from a type sent by the user's browser (such as a base64 representation of a webcam snapshot) to a form that can be accepted by your function (such as a `numpy` array).
Similarly, when a component is used as an output, Gradio automatically handles the *postprocessing* needed to convert the data from what is returned by your function (such as a list of image paths) to a form that can be displayed in the user's browser (such as a `Gallery` of images in base64 format).
You can control the *preprocessing* using the parameters when constructing the image component. For example, here if you instantiate the `Image` component with the following parameters, it will convert the image to the `PIL` type and reshape it to be `(100, 100)` no matter the original size that it was submitted as:
```py
img = gradio.Image(shape=(100, 100), type="pil")
```
In contrast, here we keep the original size of the image, but invert the colors before converting it to a numpy array:
```py
img = gradio.Image(invert_colors=True, type="numpy")
```
Postprocessing is a lot easier! Gradio automatically recognizes the format of the returned data (e.g. is the `Image` a `numpy` array or a `str` filepath?) and postprocesses it into a format that can be displayed by the browser.
Take a look at the [Docs](https://gradio.app/docs) to see all the preprocessing-related parameters for each Component.
## Styling
Many components can be styled through the `style()` method. For example: