mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-21 02:19:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

update readme

Browse Source
This commit is contained in:
Ali Abid 2020-10-26 17:55:41 -07:00
parent cdceb2f7fb
commit ecf958de9c
5 changed files with 549 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
README.md
View File

@ -22,14 +22,15 @@ You can find an interactive version of this README at [https://gradio.app/gettin
To get Gradio running with a simple example, follow these three steps:
1. Install Gradio from pip.
````bash
<span>1.</span> Install Gradio from pip.
```bash
pip install gradio
````
```
2. Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
<span>2.</span> Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
````python
```python
import gradio as gr
def greet(name):
@ -37,9 +38,9 @@ def greet(name):
iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()
````
```
3. The interface below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
<span>3.</span> The interface below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
![hello_world interface](demo/screenshots/hello_world/1.gif)
@ -59,7 +60,7 @@ With these three arguments, we can quickly create interfaces and `launch()` th
What if we wanted to customize the input text field - for example, we wanted it to be larger and have a text hint? If we use the actual input class for `Textbox` instead of using the string shortcut, we have access to much more customizability. To see a list of all the components we support and how you can customize them, check out the [Docs](https://gradio.app/docs)
````python
```python
import gradio as gr
def greet(name):
@ -70,14 +71,14 @@ iface = gr.Interface(
inputs=gr.inputs.Textbox(lines=2, placeholder="Name Here..."),
outputs="text")
iface.launch()
````
```
![hello_world_2 interface](demo/screenshots/hello_world_2/1.gif)
### Multiple Inputs and Outputs
Let's say we had a much more complex function, with multiple inputs and outputs. In the example below, we have a function that takes a string, boolean, and number, and returns a string and number. Take a look how we pass a list of input and output components.
````python
```python
import gradio as gr
def greet(name, is_morning, temperature):
@ -92,7 +93,7 @@ iface = gr.Interface(
inputs=["text", "checkbox", gr.inputs.Slider(0, 100)],
outputs=["text", "number"])
iface.launch()
````
```
![hello_world_3 interface](demo/screenshots/hello_world_3/1.gif)
We simply wrap the components in a list. Furthermore, if we wanted to compare multiple functions that have the same input and return types, we can even pass a list of functions for quick comparison.
@ -101,7 +102,7 @@ We simply wrap the components in a list. Furthermore, if we wanted to compare mu
Let's try an image to image function. When using the `Image` component, your function will receive a numpy array of your specified size, with the shape `(width, height, 3)`, where the last dimension represents the RGB values. We'll return an image as well in the form of a numpy array.
````python
```python
import gradio as gr
import numpy as np
@ -115,7 +116,7 @@ def sepia(img):
iface = gr.Interface(sepia, gr.inputs.Image(shape=(200, 200)), "image")
iface.launch()
````
```
![sepia_filter interface](demo/screenshots/sepia_filter/1.gif)
Additionally, our `Image` input interface comes with an 'edit' button which opens tools for cropping, flipping, rotating, drawing over, and applying filters to images. We've found that manipulating images in this way will often reveal hidden flaws in a model.
@ -124,7 +125,7 @@ Additionally, our `Image` input interface comes with an 'edit' button which op
You can provide example data that a user can easily load into the model. This can be helpful to demonstrate the types of inputs the model expects, as well as to provide a way to explore your dataset in conjunction with your model. To load example data, you provide a nested list to the `examples=` keyword argument of the Interface constructor. Each sublist within the outer list represents a data sample, and each element within the sublist represents an input for each input component. The format of example data for each component is specified in the [Docs](https://gradio.app/docs).
````python
```python
import gradio as gr
def calculator(num1, operation, num2):
@ -147,7 +148,7 @@ iface = gr.Interface(calculator,
]
)
iface.launch()
````
```
![calculator interface](demo/screenshots/calculator/1.gif)
### Flagging
@ -160,7 +161,7 @@ You can review these flagged inputs by manually exploring the flagging directory
Most models are black boxes such that the internal logic of the function is hidden from the end user. To encourage transparency, we've added the ability for interpretation so that users can understand what parts of the input are responsible for the output. Take a look at the simple interface below:
````python
```python
import gradio as gr
import re
@ -176,7 +177,7 @@ iface = gr.Interface(
outputs="label", interpretation="default")
iface.launch()
````
```
![gender_sentence_default_interpretation interface](demo/screenshots/gender_sentence_default_interpretation/1.gif)
Notice the `interpretation` keyword argument. We're going to use Gradio's default interpreter here. After you submit and click Interpret, you'll see the interface automatically highlights the parts of the text that contributed to the final output orange! The parts that conflict with the output are highlight blue.
@ -185,7 +186,7 @@ Gradio's default interpretation works with single output type interfaces, where
You can also write your own interpretation function. The demo below adds custom interpretation to the previous demo. This function will take the same inputs as the main wrapped function. The output of this interpretation function will be used to highlight the input of each input interface - therefore the number of outputs here corresponds to the number of input interfaces. To see the format for interpretation for each input interface, check the [Docs](https://gradio.app/docs).
````python
```python
import gradio as gr
import re
@ -205,7 +206,7 @@ def interpret_gender(sentence):
token = word.lower()
if (is_male and token in male_words) or (not is_male and token in female_words):
score = 1
elif (is_male and token in female_words) or (not is_male and token in male_words):
elif (is_male and token in female_words) or (not is_male and token in male_words):
score = -1
interpretation.append((word, score))
return interpretation
@ -214,9 +215,25 @@ iface = gr.Interface(
fn=gender_of_sentence, inputs=gr.inputs.Textbox(default="She went to his house to get her keys."),
outputs="label", interpretation=interpret_gender)
iface.launch()
````
```
![gender_sentence_custom_interpretation interface](demo/screenshots/gender_sentence_custom_interpretation/1.gif)
### Sharing Interfaces Publicly & Privacy
Interfaces can be easily shared publicly by setting `share=True` in the `launch()` method. Like this:
```python
gr.Interface(classify_image, image, label).launch(share=True)
```
This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the model in their browser. Because the processing happens on your device (as long as your device stays on!), you don't have to worry about any dependencies. If you're working out of colab notebook, a share link is always automatically created. It usually looks something like this: **XXXXX.gradio.app**. Although the link is served through a gradio link, we are only a proxy for your local server, and do not store any data sent through the interfaces.
Keep in mind, however, that these links are publicly accessible, meaning that anyone can use your model for prediction! Therefore, make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. If you set `share=False` (the default), only a local link is created, which can be shared by [port-forwarding](https://www.ssh.com/ssh/tunneling/example) with specific users.
Links expire after 6 hours. Need longer links, or private links? [Contact us for Gradio Teams](https://gradio.app/#contact-box).
![Sharing diagram](demo/images/sharing.svg)
## Contributing:
If you would like to contribute and your contribution is small, you can directly open a pull request (PR). If you would like to contribute a larger feature, we recommend first creating an issue with a proposed design for discussion. Please see our contributing guidelines for more info.

2
demo/gender_sentence_custom_interpretation.py
View File

@ -17,7 +17,7 @@ def interpret_gender(sentence):
token = word.lower()
if (is_male and token in male_words) or (not is_male and token in female_words):
score = 1
elif (is_male and token in female_words) or (not is_male and token in male_words):
elif (is_male and token in female_words) or (not is_male and token in male_words):
score = -1
interpretation.append((word, score))
return interpretation

487
demo/images/sharing.svg Normal file
View File

@ -0,0 +1,487 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="551.7179"
height="354.22409"
overflow="hidden"
version="1.1"
id="svg145"
sodipodi:docname="sharing.svg"
style="overflow:hidden"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata149">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1106"
id="namedview147"
showgrid="false"
inkscape:zoom="1.9348081"
inkscape:cx="152.75133"
inkscape:cy="163.92568"
inkscape:window-x="-11"
inkscape:window-y="-11"
inkscape:window-maximized="1"
inkscape:current-layer="g143" />
<defs
id="defs59">
<clipPath
id="clip0">
<path
d="M 281,166 H 831 V 511 H 281 Z"
id="path2"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip1">
<path
d="M 688,166 H 830 V 308 H 688 Z"
id="path5"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip2">
<path
d="M 688,166 H 830 V 308 H 688 Z"
id="path8"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip3">
<path
d="M 688,166 H 830 V 308 H 688 Z"
id="path11"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip4">
<path
d="m 711,411 h 99 v 99 h -99 z"
id="path14"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip5">
<path
d="m 711,411 h 99 v 99 h -99 z"
id="path17"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip6">
<path
d="m 711,411 h 99 v 99 h -99 z"
id="path20"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip7">
<path
d="M 282,247 H 473 V 439 H 282 Z"
id="path23"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip8">
<path
d="M 282,247 H 473 V 439 H 282 Z"
id="path26"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip9">
<path
d="M 282,247 H 473 V 439 H 282 Z"
id="path29"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip10">
<path
d="m 715,210 h 38 v 38 h -38 z"
id="path32"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip11">
<path
d="m 715,210 h 38 v 38 h -38 z"
id="path35"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip12">
<path
d="m 715,210 h 38 v 38 h -38 z"
id="path38"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip13">
<path
d="m 747,438 h 24 v 25 h -24 z"
id="path41"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip14">
<path
d="m 747,438 h 24 v 25 h -24 z"
id="path44"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip15">
<path
d="m 747,438 h 24 v 25 h -24 z"
id="path47"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip16">
<path
d="m 308,293 h 76 v 77 h -76 z"
id="path50"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip17">
<path
d="m 308,293 h 76 v 77 h -76 z"
id="path53"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
<clipPath
id="clip18">
<path
d="m 308,293 h 76 v 77 h -76 z"
id="path56"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</clipPath>
</defs>
<g
clip-path="url(#clip0)"
transform="translate(-301.97917,-190.708)"
id="g143">
<rect
x="762"
y="479"
width="30"
height="21"
id="rect61"
style="fill:#e6e6e6" />
<g
clip-path="url(#clip1)"
id="g69"
style="fill:#e6e6e6"
transform="translate(16,4)">
<g
clip-path="url(#clip2)"
id="g67"
style="fill:#e6e6e6">
<g
clip-path="url(#clip3)"
id="g65"
style="fill:#e6e6e6">
<path
d="M 809.292,260.667 H 708.708 v -65.084 h 100.584 z m 2.958,-73.959 h -106.5 c -3.254,0 -5.917,2.663 -5.917,5.917 v 71 c 0,3.254 2.663,5.917 5.917,5.917 h 41.417 v 8.875 h -14.792 v 8.875 h 53.25 v -8.875 h -14.792 v -8.875 h 41.417 c 3.254,0 5.917,-2.663 5.917,-5.917 v -71 c 0,-3.254 -2.663,-5.917 -5.917,-5.917 z"
id="path63"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
</g>
</g>
</g>
<rect
x="729"
y="205"
width="42"
height="56"
id="rect71"
style="fill:#e6e6e6" />
<g
clip-path="url(#clip4)"
id="g79"
style="fill:#e6e6e6"
transform="translate(16,4)">
<g
clip-path="url(#clip5)"
id="g77"
style="fill:#e6e6e6">
<g
clip-path="url(#clip6)"
id="g75"
style="fill:#e6e6e6">
<path
d="m 779.063,493.5 h -37.125 v -66 h 37.125 z m -22.688,-74.25 h 8.25 c 1.134,0 2.063,0.928 2.063,2.063 0,1.134 -0.929,2.062 -2.063,2.062 h -8.25 c -1.134,0 -2.062,-0.928 -2.062,-2.062 0,-1.135 0.928,-2.063 2.062,-2.063 z m 26.813,-4.125 h -45.375 c -1.135,0 -2.063,0.928 -2.063,2.063 v 86.625 c 0,1.134 0.928,2.062 2.063,2.062 h 45.375 c 1.134,0 2.062,-0.928 2.062,-2.062 v -86.625 c 0,-1.135 -0.928,-2.063 -2.062,-2.063 z"
id="path73"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
</g>
</g>
</g>
<g
clip-path="url(#clip7)"
id="g89"
style="fill:#e6e6e6"
transform="translate(16,4)">
<g
clip-path="url(#clip8)"
id="g87"
style="fill:#e6e6e6">
<g
clip-path="url(#clip9)"
id="g85"
style="fill:#e6e6e6">
<path
d="M 111.417,115.396 H 15.9167 V 51.7292 h 95.5003 z m 3.979,-75.6043 H 11.9375 c -4.37708,0 -7.95833,3.5812 -7.95833,7.9583 v 71.625 c 0,4.377 3.58125,7.958 7.95833,7.958 h 39.7917 v 11.938 H 33.8229 v 11.937 H 93.5104 V 139.271 H 75.6042 v -11.938 h 39.7918 c 4.377,0 7.958,-3.581 7.958,-7.958 V 47.75 c 0,-4.3771 -3.581,-7.9583 -7.958,-7.9583 z"
transform="matrix(1,0,0,1.00524,282,247)"
id="path81"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
<path
d="M 179.063,59.6875 H 139.271 V 47.75 h 39.792 z m 0,19.8958 H 139.271 V 67.6458 h 39.792 z m -19.896,59.6877 c -3.383,0 -5.969,-2.587 -5.969,-5.969 0,-3.382 2.586,-5.969 5.969,-5.969 3.382,0 5.968,2.587 5.968,5.969 0,3.382 -2.586,5.969 -5.968,5.969 z m 19.896,-99.4793 h -39.792 c -4.377,0 -7.958,3.5812 -7.958,7.9583 v 95.5 c 0,4.377 3.581,7.958 7.958,7.958 h 39.792 c 4.377,0 7.958,-3.581 7.958,-7.958 v -95.5 c 0,-4.3771 -3.581,-7.9583 -7.958,-7.9583 z"
transform="matrix(1,0,0,1.00524,282,247)"
id="path83"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
</g>
</g>
</g>
<path
d="M 427,343 V 330.812 C 427,315.452 439.452,303 454.812,303 h 7.063 c 15.361,0 27.812,12.452 27.812,27.812 v 0 H 495 L 485,343 475,330.812 h 5.313 v 0 c 0,-10.183 -8.255,-18.437 -18.438,-18.437 h -7.063 c -10.183,0 -18.437,8.254 -18.437,18.437 V 343 Z"
id="path91"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<path
d="m 489,351 v 12.188 C 489,378.548 476.548,391 461.188,391 h -6.063 c -15.361,0 -27.812,-12.452 -27.812,-27.812 v 0 H 422 L 432,351 l 10,12.188 h -5.313 v 0 c 0,10.183 8.255,18.437 18.438,18.437 h 6.063 c 10.183,0 18.437,-8.254 18.437,-18.437 V 351 Z"
id="path93"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<path
d="M 692,222.00001 475.2499,222 c -12.5644,0 -22.74989,10.1855 -22.74989,22.75 v 16.2499 H 446 L 459,274 472,260.9999 h -6.5 V 244.75 c 0,-5.3847 4.3652,-9.7499 9.7499,-9.7499 l 216.7501,1e-5 z"
id="path95"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<path
d="m 454,422 v 20.5625 c 0,11.3564 9.20613,20.5625 20.5625,20.5625 H 715.25 V 469 L 727,457.25 715.25,445.5 v 5.875 H 474.5625 c -4.867,0 -8.8125,-3.9455 -8.8125,-8.8125 V 422 Z"
id="path97"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<path
d="m 783,405 v -21.4374 c 0,-11.8396 -9.59784,-21.43741 -21.4374,-21.43741 L 517.25,362.12487 v -6.12489 l -12.25,12.2501 12.25,12.2501 v -6.1252 l 244.3126,2e-5 c 5.0742,0 9.1876,4.1134 9.1876,9.1876 L 770.7499,405 Z"
id="path99"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<path
d="M 508,346.00001 757.1249,346 c 11.1147,0 20.12488,-9.01022 20.12488,-20.1249 l 3e-4,-14.3753 H 783 L 771.4999,300 760,311.4998 h 5.7499 v 14.3753 c 0,4.7635 -3.8615,8.625 -8.625,8.625 L 508,334.49981 Z"
id="path101"
inkscape:connector-curvature="0"
style="fill:#ed7d31;fill-rule:evenodd" />
<g
clip-path="url(#clip10)"
id="g111"
transform="translate(16,4)">
<g
clip-path="url(#clip11)"
id="g109">
<g
clip-path="url(#clip12)"
id="g107">
<path
d="m 725.988,240.479 c 0,0.656 0.532,1.188 1.188,1.188 0.656,0 1.187,-0.532 1.187,-1.188 v -8.312 h -2.375 z"
id="path103"
inkscape:connector-curvature="0"
style="fill:#ed7d31" />
<path
d="m 716.944,232.764 c -0.396,-0.003 -0.737,0.277 -0.812,0.665 -0.07,0.432 0.223,0.839 0.655,0.909 0.045,0.007 0.091,0.01 0.137,0.01 h 1.104 c 1.71,-0.123 3.167,-1.374 3.167,-2.977 v -2.676 c 0.002,-1.068 0.69,-2.013 1.706,-2.343 -0.352,0.447 -0.615,0.958 -0.776,1.504 -0.071,0.243 -0.103,0.495 -0.095,0.748 v 11.836 c -0.01,0.581 0.385,1.091 0.95,1.227 0.643,0.131 1.27,-0.284 1.401,-0.926 0.015,-0.073 0.023,-0.148 0.024,-0.222 v -9.144 h 4.164 c 2.165,4.279 6.71,3.764 8.899,3.832 h 0.197 v 5.185 c -0.012,0.645 0.468,1.193 1.109,1.267 0.666,0.033 1.232,-0.481 1.265,-1.147 10e-4,-0.013 10e-4,-0.027 10e-4,-0.041 v -5.343 h 1.584 v 5.304 c -0.011,0.581 0.384,1.091 0.95,1.227 0.642,0.131 1.27,-0.284 1.401,-0.926 0.015,-0.073 0.023,-0.148 0.024,-0.222 v -8.016 c 0.409,0.307 0.671,0.77 0.724,1.279 v 0 c 0.059,-0.075 0.123,-0.147 0.19,-0.222 0.067,-0.075 0.131,-0.146 0.194,-0.222 0.32,-0.369 0.479,-0.85 0.443,-1.338 -0.059,-0.791 -0.071,-1.543 -0.071,-1.543 0.485,0.214 0.825,0.663 0.899,1.187 v 0 c 0.129,-0.265 0.234,-0.542 0.312,-0.827 0.182,-0.724 0.167,-2.043 0.285,-2.854 0.006,-0.256 0.217,-0.459 0.473,-0.454 0.013,0.001 0.025,0.001 0.038,0.003 l 2.375,0.324 c 0.437,-0.003 0.789,-0.36 0.786,-0.797 0,-0.061 -0.008,-0.121 -0.022,-0.18 l -0.206,-0.792 0.226,0.063 c 0.289,0.08 0.594,-0.058 0.724,-0.328 l 0.487,-1.014 c 0.132,-0.271 0.062,-0.598 -0.17,-0.791 -0.538,-0.451 -1.457,-1.231 -1.457,-1.251 0.238,-0.994 -0.898,-1.674 -0.898,-1.674 0.376,-0.398 0.559,-0.94 0.502,-1.485 -0.038,-1.127 -0.843,-2.082 -1.947,-2.311 v 1.44 c -0.823,-1.294 -2.803,-2.573 -6.452,-2.323 -0.736,0.023 -1.466,0.131 -2.177,0.32 0,0 0,0 0,0 0.844,0.293 1.596,0.805 2.177,1.485 0,0 -2.161,-0.356 -3.258,1.358 -1.096,1.713 -3.456,2.042 -3.665,2.066 0,0 0,0 0,0 0.374,0.387 0.833,0.681 1.341,0.859 0.358,0.066 0.719,0.114 1.081,0.142 -1.583,1.243 -3.958,0.962 -4.164,0.934 0,0 0,0 0,0 0.341,0.389 0.707,0.756 1.096,1.097 h -7.877 -2.339 c -2.236,0.002 -4.049,1.813 -4.053,4.049 v 2.482 c 0,0.875 -0.709,1.583 -1.584,1.583 z"
id="path105"
inkscape:connector-curvature="0"
style="fill:#ed7d31" />
</g>
</g>
</g>
<rect
x="777"
y="205"
width="44"
height="56"
id="rect113"
style="fill:#e6e6e6" />
<rect
x="762"
y="435"
width="30"
height="39"
id="rect115"
style="fill:#e6e6e6" />
<g
clip-path="url(#clip13)"
id="g125"
transform="translate(16,4)">
<g
clip-path="url(#clip14)"
id="g123">
<g
clip-path="url(#clip15)"
id="g121">
<path
d="m 6.94,19.25 c 0,0.4142 0.33577,0.75 0.75,0.75 0.41423,0 0.75,-0.3358 0.75,-0.75 V 14 h -1.5 z"
transform="matrix(1,0,0,1.04167,747,438)"
id="path117"
inkscape:connector-curvature="0"
style="fill:#ed7d31" />
<path
d="m 1.2275,14.3775 c -0.249818,-0.002 -0.46544,0.1746 -0.5125,0.42 -0.044205,0.2726 0.14093,0.5294 0.41351,0.5736 0.02859,0.0046 0.05753,0.0068 0.08649,0.0064 h 0.6975 c 1.08,-0.0775 2,-0.8675 2,-1.88 v -1.69 C 3.91403,11.1331 4.3487,10.5361 4.99,10.3275 4.76775,10.6101 4.60145,10.9326 4.5,11.2775 4.45522,11.4309 4.43495,11.5903 4.44,11.75 v 7.475 C 4.4334,19.5921 4.68295,19.9144 5.04,20 5.44583,20.0829 5.84202,19.8211 5.9249,19.4152 5.93433,19.3691 5.93937,19.3221 5.94,19.275 V 13.5 h 2.63 c 1.3675,2.7025 4.2375,2.3775 5.62,2.42 h 0.125 v 3.275 c -0.0078,0.4072 0.2953,0.7537 0.7,0.8 0.4206,0.0208 0.7784,-0.3034 0.7991,-0.724 5e-4,-0.0086 8e-4,-0.0173 9e-4,-0.026 V 15.87 h 1 v 3.35 c -0.0066,0.3671 0.2429,0.6894 0.6,0.775 0.4059,0.0829 0.802,-0.1789 0.8849,-0.5848 0.0094,-0.0461 0.0145,-0.0931 0.0151,-0.1402 v -5.0625 c 0.2582,0.1938 0.424,0.4864 0.4575,0.8075 v 0 c 0.0375,-0.0475 0.0775,-0.0925 0.12,-0.14 0.0425,-0.0475 0.0825,-0.0925 0.1225,-0.14 0.2017,-0.2334 0.3025,-0.5374 0.28,-0.845 -0.0375,-0.5 -0.045,-0.975 -0.045,-0.975 0.3061,0.135 0.5208,0.4187 0.5675,0.75 v 0 c 0.082,-0.1677 0.148,-0.3426 0.1975,-0.5225 0.115,-0.4575 0.105,-1.29 0.18,-1.8025 0.0033,-0.1615 0.1369,-0.2898 0.2984,-0.2865 0.008,2e-4 0.0161,7e-4 0.0241,0.0015 l 1.5,0.205 c 0.2761,-0.0019 0.4984,-0.2274 0.4965,-0.5035 -3e-4,-0.0384 -0.005,-0.0767 -0.014,-0.114 l -0.13,-0.5 0.1425,0.04 c 0.1826,0.0502 0.375,-0.037 0.4575,-0.2075 l 0.3075,-0.64 C 23.3608,9.16343 23.3165,8.95715 23.17,8.835 22.83,8.55 22.25,8.0575 22.25,8.045 22.4,7.4175 21.6825,6.9875 21.6825,6.9875 21.92,6.73628 22.036,6.39385 22,6.05 21.9757,5.33795 21.4676,4.73485 20.77,4.59 V 5.5 C 20.25,4.6825 19,3.875 16.695,4.0325 16.2304,4.04715 15.7691,4.1151 15.32,4.235 c 0,0 0,0 0,0 0.5335,0.1848 1.0081,0.5084 1.375,0.9375 0,0 -1.365,-0.225 -2.0575,0.8575 -0.6925,1.0825 -2.1825,1.29 -2.315,1.305 0,0 0,0 0,0 0.2365,0.2443 0.5266,0.43008 0.8475,0.5425 0.2258,0.04203 0.4536,0.07207 0.6825,0.09 -1,0.785 -2.5,0.6075 -2.63,0.59 0,0 0,0 0,0 0.2155,0.2457 0.4468,0.47702 0.6925,0.6925 H 6.94 5.4625 c -1.4123,0.00138 -2.55725,1.1452 -2.56,2.5575 v 1.5675 c 0,0.5523 -0.44771,1 -1,1 z"
transform="matrix(1,0,0,1.04167,747,438)"
id="path119"
inkscape:connector-curvature="0"
style="fill:#ed7d31" />
</g>
</g>
</g>
<rect
x="780"
y="237"
width="25"
height="9"
id="rect127"
style="fill:#7f7f7f" />
<rect
x="780"
y="249"
width="17"
height="9"
id="rect129"
style="fill:#7f7f7f" />
<g
clip-path="url(#clip16)"
id="g141"
style="fill:#e6e6e6"
transform="translate(16,4)">
<g
clip-path="url(#clip17)"
id="g139"
style="fill:#e6e6e6">
<g
clip-path="url(#clip18)"
id="g137"
style="fill:#e6e6e6">
<path
d="m 19.7125,49.7958 -2.2167,-2.2166 6.8084,-6.8084 -6.8084,-6.8083 2.2167,-2.2167 9.025,9.025 z"
transform="matrix(1,0,0,1.01316,308,293)"
id="path131"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
<path
d="M 6.33333,13.4583 V 62.5417 H 69.6667 V 13.4583 Z m 54.62497,4.75 c 0.8709,0 1.5834,0.7125 1.5834,1.5834 0,0.8708 -0.7125,1.5833 -1.5834,1.5833 -0.8708,0 -1.5833,-0.7125 -1.5833,-1.5833 0,-0.8709 0.7125,-1.5834 1.5833,-1.5834 z m -5.5416,0 c 0.8708,0 1.5833,0.7125 1.5833,1.5834 0,0.8708 -0.7125,1.5833 -1.5833,1.5833 -0.8709,0 -1.5834,-0.7125 -1.5834,-1.5833 0,-0.8709 0.7125,-1.5834 1.5834,-1.5834 z m -5.5417,0 c 0.8708,0 1.5833,0.7125 1.5833,1.5834 0,0.8708 -0.7125,1.5833 -1.5833,1.5833 -0.8708,0 -1.5833,-0.7125 -1.5833,-1.5833 0,-0.8709 0.7125,-1.5834 1.5833,-1.5834 z M 64.9167,57.7917 H 11.0833 V 26.125 h 53.8334 z"
transform="matrix(1,0,0,1.01316,308,293)"
id="path133"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
<path
d="M 30.0833,46.7083 H 42.75 V 49.875 H 30.0833 Z"
transform="matrix(1,0,0,1.01316,308,293)"
id="path135"
inkscape:connector-curvature="0"
style="fill:#e6e6e6" />
</g>
</g>
</g>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24px;line-height:1.25;font-family:Marlett;-inkscape-font-specification:Marlett;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="466.40768"
y="26.722836"
id="text153"><tspan
sodipodi:role="line"
id="tspan151"
x="466.40768"
y="53.722836" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:17.05692863px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1"
x="480.38916"
y="34.031235"
id="text157"><tspan
sodipodi:role="line"
id="tspan155"
x="480.38916"
y="34.031235"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:1.40705287">lion</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.5049057px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1"
x="463.01477"
y="302.10855"
id="text157-3"><tspan
sodipodi:role="line"
id="tspan155-5"
x="463.01477"
y="302.10855"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:1.40705287">lion</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:17.25738335px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Heavy';letter-spacing:0px;word-spacing:0px;fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.99999994"
x="46.146866"
y="352.89612"
id="text179"><tspan
sodipodi:role="line"
id="tspan177"
x="46.146866"
y="352.89612"
style="stroke-width:0.99999994">HOST</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:18.18510628px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Heavy';letter-spacing:0px;word-spacing:0px;fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.99999994"
x="392.19867"
y="353.99323"
id="text179-9"><tspan
sodipodi:role="line"
id="tspan177-4"
x="392.19867"
y="353.99323"
style="stroke-width:0.99999994">REMOTE USERS</tspan></text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

29
readme_template.md
View File

@ -22,16 +22,17 @@ You can find an interactive version of this README at [https://gradio.app/gettin
To get Gradio running with a simple example, follow these three steps:
1. Install Gradio from pip.
````bash
pip install gradio
````
<span>1.</span> Install Gradio from pip.
2. Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
```bash
pip install gradio
```
<span>2.</span> Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
$code_hello_world
3. The interface below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
<span>3.</span> The interface below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
$demo_hello_world
@ -101,6 +102,22 @@ You can also write your own interpretation function. The demo below adds custom
$code_gender_sentence_custom_interpretation
$demo_gender_sentence_custom_interpretation
### Sharing Interfaces Publicly & Privacy
Interfaces can be easily shared publicly by setting `share=True` in the `launch()` method. Like this:
```python
gr.Interface(classify_image, image, label).launch(share=True)
```
This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the model in their browser. Because the processing happens on your device (as long as your device stays on!), you don't have to worry about any dependencies. If you're working out of colab notebook, a share link is always automatically created. It usually looks something like this: **XXXXX.gradio.app**. Although the link is served through a gradio link, we are only a proxy for your local server, and do not store any data sent through the interfaces.
Keep in mind, however, that these links are publicly accessible, meaning that anyone can use your model for prediction! Therefore, make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. If you set `share=False` (the default), only a local link is created, which can be shared by [port-forwarding](https://www.ssh.com/ssh/tunneling/example) with specific users.
Links expire after 6 hours. Need longer links, or private links? [Contact us for Gradio Teams](https://gradio.app/#contact-box).
![Sharing diagram](demo/images/sharing.svg)
## Contributing:
If you would like to contribute and your contribution is small, you can directly open a pull request (PR). If you would like to contribute a larger feature, we recommend first creating an issue with a proposed design for discussion. Please see our contributing guidelines for more info.

2
render_readme.py
View File

@ -12,7 +12,7 @@ template_dict = {}
for code_src in codes:
with open(os.path.join("demo", code_src + ".py")) as code_file:
python_code = code_file.read().replace('if __name__ == "__main__":\n iface.launch()', "iface.launch()")
template_dict["code_" + code_src] = "````python\n" + python_code + "\n````"
template_dict["code_" + code_src] = "```python\n" + python_code + "\n```"
for demo_src in demos:
template_dict["demo_" + demo_src] = "![" + demo_src + " interface](demo/screenshots/" + demo_src + "/1.gif)"