2019-03-03 15:33:34 +08:00
< html >
< head >
< title > GradIO< / title >
< link href = "https://fonts.googleapis.com/css?family=Open+Sans" rel = "stylesheet" >
< link href = "style/style.css" rel = "stylesheet" >
2019-03-30 07:04:57 +08:00
< link href = "style/home.css" rel = "stylesheet" >
2019-03-03 15:33:34 +08:00
< link href = "style/getting_started.css" rel = "stylesheet" >
2019-03-30 07:04:57 +08:00
< link href = "gradio/gradio.css" rel = "stylesheet" >
< link href = "gradio/vendor/cropper.css" rel = "stylesheet" >
2019-03-03 15:33:34 +08:00
< / head >
< body >
< nav >
< img src = "img/logo_inline.png" / >
2019-03-30 07:04:57 +08:00
< a href = "index.html" > GradIO< / a >
2019-03-03 15:33:34 +08:00
< a class = "selected" href = "getting_started.html" > Getting Started< / a >
< a href = "sharing.html" > Sharing< / a >
< / nav >
< div class = "content" >
2019-03-30 00:30:53 +08:00
< h1 > Installation< / h1 >
2019-03-30 07:04:57 +08:00
< p > Gradio requires < a href = "https://www.python.org/downloads/" > Python 3< / a > . Once you have Python, you can download the latest version of < code > gradio< / code > using pip, like this:< / p >
2019-03-30 00:30:53 +08:00
< div class = "codeblock" > < code >
2019-03-30 07:04:57 +08:00
pip install gradio
2019-03-30 00:30:53 +08:00
< / code > < / div >
2019-03-30 07:04:57 +08:00
< p > Or you may want to do < code > pip3 install gradio< / code > if you have multiple installations of Python.< / p >
< h1 > Minimum Working Example< / h1 >
< p > Creating an interface using gradio involves just adding a few lines to your existing code. For example, if you
have trained a Tensorflow Keras model, you can create an interface like this:< / p >
< div class = "codeblock" > < code >
import < span class = "var" > gradio< / span > , tensorflow as < span
class="var">tf< / span > < br >
< span class = "var" > image_mdl< / span > = tf.keras.models.< span
class="func">Sequential()< / span > < br >
< span class = "comm" > # ... define and train the model as you would
normally< / span > < br >
< span class = "var" > io< / span > = gradio.< span
class="func">Interface(< / span > < span
class="var">inputs< / span > =“imageupload", < span
class="var">outputs< / span > =“label”, < span
class="var">model_type< / span > =“keras”,< span
class="var">model< / span > =image_mdl< span
class="func">)< / span > < br >
io.< span class = "func" > launch()< / span >
< / code > < / div >
< p > Running the code above will open a new browser window with the following interface running:< / p >
< div id = "gradio" >
< div class = "panel" >
< div class = "gradio input image_file" >
< div class = "role" > Input< / div >
< div class = "input_image drop_mode" >
< div class = "input_caption" > Drop Image Here< br > - or -< br > Click to Upload< / div >
< img / >
< / div >
< input class = "hidden_upload" type = "file" accept = "image/x-png,image/gif,image/jpeg" / >
< / div >
< input class = "submit" type = "submit" value = "Submit" / > <!--
-->< input class = "clear" type = "reset" value = "Clear" >
< / div > <!--
-->< div class = "panel" >
< div class = "gradio output classifier" >
< div class = "panel_head" >
< div class = "role" > Output< / div >
< / div >
< div class = "output_class" > < / div >
< div class = "confidence_intervals" >
< / div >
< / div >
< / div >
< / div >
< p > < / p >
< h1 > Basic Parameters< / h1 >
< p > Running a GradIO interface requires creating an < code > < span
2019-03-30 00:30:53 +08:00
class="func">Interface(< / span > < span class = "var" > inputs< / span > : str,
< span class = "var" > outputs< / span > : str, < span class = "var" > model_type< / span >
2019-03-03 15:33:34 +08:00
: str, < span class = "var" > model< / span > : Any< span
2019-03-30 07:04:57 +08:00
class="func">)< / span > < / code > object, which takes as input
2019-03-03 15:33:34 +08:00
arguments:< br >
2019-03-30 00:30:53 +08:00
< code > < span class = "var" > inputs< / span > < / code > –
2019-03-30 07:04:57 +08:00
the input interface to be used, or a subclass of < code > gradio.AbstractInput< / code > for additional customization (see < a href = "#custom-interfaces" > below< / a > ).< br >
2019-03-30 00:30:53 +08:00
< code > < span class = "var" > outputs< / span > < / code > –
2019-03-30 07:04:57 +08:00
the output interface to be used, , or a subclass of < code > gradio.AbstractOutput< / code > for additional customization (see < a href = "#custom-interfaces" > below< / a > ).< br >
2019-03-03 15:33:34 +08:00
< code > < span class = "var" > model_type< / span > < / code > –
representing type of model being passed in. Supported types include
keras.< br >
< code > < span class = "var" > model< / span > < / code > –
for processing.< / p >
2019-03-30 07:04:57 +08:00
< p > Instead of providing the string names for < code > < span class = "var" > inputs< / span > < / code > and < code > < span class = "var" > outputs< / span > < / code > , objects that represent input and output interfaces can be provided. For example, the above code is identical to:< / p >
2019-03-03 15:33:34 +08:00
< div class = "codeblock" > < code >
import < span class = "var" > gradio< / span > , tensorflow as < span
class="var">tf< / span > < br >
< span class = "var" > mdl< / span > = tf.keras.models.< span
class="func">Sequential()< / span > < br >
< span class = "comm" > # ...
define and train the model as you would normally< / span > < br >
2019-03-30 07:04:57 +08:00
< span class = "var" > inp< / span > = gradio.inputs.< span
class="func">ImageUpload()< / span > < br >
< span class = "var" > out< / span > = gradio.outputs.< span
class="func">Label()< / span > < br >
2019-03-03 15:33:34 +08:00
< span class = "var" > io< / span > = gradio.< span
class="func">Interface(< / span > < span
2019-03-30 07:04:57 +08:00
class="var">inputs< / span > =inp, < span
class="var">outputs< / span > =out, < span
2019-03-03 15:33:34 +08:00
class="var">model_type< / span > =“keras”, < span
class="var">model< / span > =mdl< span class = "func" > )< / span > < br >
io.< span class = "func" > launch()< / span >
< / code > < / div >
2019-03-30 07:04:57 +08:00
< p > This allows for customization of the interfaces, by passing in arguments to the input and output constructors. The parameters that each interface accepts is described below.< / p >
2019-03-30 00:30:53 +08:00
2019-03-03 15:33:34 +08:00
< h1 > Supported Interfaces< / h1 >
2019-03-30 07:04:57 +08:00
< h2 > Input Interfaces< / h2 >
2019-03-03 15:33:34 +08:00
< p id = "interfaces_text" > This is the list of currently supported interfaces
in GradIO. All input interfaces can be paired with any output interface.
< / p >
< div class = "interfaces_set" >
< div class = "inputs_set" >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“text”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to enter text as your input.< / p >
< div class = "gradio input text" >
< div class = "role" > Input< / div >
< textarea class = "input_text"
placeholder="Enter text here...">< / textarea >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“image_file”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to upload images to your model.< / p >
< div class = "gradio input image_file" >
< div class = "role" > Input< / div >
< div class = "input_image" >
Drop Image Here< br > - or -< br > Click to Upload
< / div >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“snapshot”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to take snapshots from the user's webcam.< / p >
< div class = "gradio input snapshot" >
< div class = "role" > Input< / div >
< div class = "input_snapshot" >
< img class = "webcam" src = "img/webcam.png" / >
< div class = "input_directions" >
Click to Upload a Snapshot from the Webcam.
< / div >
< / div >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“sketchpad”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to take simple monochrome cketches as input.< / p >
< div class = "input sketchpad" >
< div class = "role" > Input< / div >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“microphone”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to audio input from the microphone.< / p >
< div class = "gradio input mic" >
< div class = "role" > Input< / div >
< div class = "input_mic" >
< img class = "mic" src = "img/mic.png" / >
< div class = "input_directions" >
Click to Upload Audio from the Microphone.
< / div >
< / div >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > inputs< / span > =“audio_file”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to upload audio to your model.< / p >
< div class = "gradio input audio_file" >
< div class = "role" > Input< / div >
< div class = "input_audio" >
Drop Audio File Here< br > - or -< br > Click to Upload
< / div >
< / div >
< / div > <!--
-->< div class = "outputs_set" >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > outputs< / span > =“classifier”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface for classification. Responds with confidence
intervals. < / p >
< div class = "gradio output classifier" >
< div class = "role" > Output< / div >
< div class = "output_class" > happy< / div >
< div class = "confidence_intervals" >
< div class = "confidence" > < div class = "label" > happy< / div > < div class = "level" style = "width: 219px" > 73%< / div > < / div >
< div class = "confidence" > < div class = "label" > shocked< / div > < div class = "level" style = "width: 60px" > 20%< / div > < / div >
< div class = "confidence" > < div class = "label" > sad< / div > < div class = "level" style = "width: 15px" > < / div > < / div >
< div class = "confidence" > < div class = "label" > angry< / div > < div class = "level" style = "width: 6px" > < / div > < / div >
< / div >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > outputs< / span > =“text”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to display the text of your output.< / p >
< div class = "gradio output text" >
< div class = "role" > Output< / div >
< textarea readonly class = "output_text" > Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
< / textarea >
< / div >
2019-03-30 00:30:53 +08:00
< h2 > < code > < span class = "var" > outputs< / span > =“image”< / code > < / h2 >
2019-03-03 15:33:34 +08:00
< p > Use this interface to display the text of your output.< / p >
< div class = "gradio output image" >
< div class = "role" > Output< / div >
< div class = "output_image" >
< img src = "img/altered_logo.png" / >
< / div >
< / div >
< / div >
< / div >
2019-03-30 07:04:57 +08:00
< h2 > Output Interfaces< / h2 >
< h1 id = "custom-interfaces" > Customizing Interfaces< / h1 >
< h1 > Model Types< / h1 >
< h1 > Launch Options< / h1 >
< p > Running < br >
< code > < span class = "var" > inbrowser< / span > < / code > –
the input interface to be used, or a subclass of < code > gradio.AbstractInput< / code > for additional customization (see < a href = "#custom-interfaces" > below< / a > ).< br >
< code > < span class = "var" > inline< / span > < / code > –
the output interface to be used, , or a subclass of < code > gradio.AbstractOutput< / code > for additional customization (see < a href = "#custom-interfaces" > below< / a > ).< br >
< code > < span class = "var" > validate< / span > < / code > –
representing type of model being passed in. Supported types include
keras.< br >
< code > < span class = "var" > share< / span > < / code > –
for processing.< / p >
2019-03-03 15:33:34 +08:00
< / div >
< footer >
< img src = "img/logo_inline.png" / >
< / footer >
2019-03-30 07:04:57 +08:00
< script src = "gradio/vendor/jquery.min.js" > < / script >
< script src = "gradio/image_upload.js" > < / script >
< script src = "gradio/label.js" > < / script >
< script src = "gradio/vendor/cropper.js" > < / script >
< script src = "https://unpkg.com/ml5@0.1.3/dist/ml5.min.js" > < / script >
< script src = "js/models.js" > < / script >
2019-03-03 15:33:34 +08:00
< body >
< / html >
