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">
|
|
|
|
|
<link href="style/home.css" rel="stylesheet">
|
2019-03-29 12:10:03 +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>
|
|
|
|
|
<a class="selected" href="home.html">GradIO</a>
|
|
|
|
|
<a href="getting_started.html">Getting Started</a>
|
|
|
|
|
<a href="sharing.html">Sharing</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<div id="hero-section"><!--
|
|
|
|
|
--><div id="intro">
|
|
|
|
|
<img id="logo" src="img/logo.png"/>
|
2019-03-08 05:01:51 +08:00
|
|
|
<p>Gradio is a free, open-source python library that helps machine
|
|
|
|
|
learning researchers <strong>interact</strong> with and <strong>share</strong> their machine
|
|
|
|
|
learning models with collaborators and clients with only a few lines of extra code.</p>
|
|
|
|
|
<p>With gradio, you can easily generate in-browser interfaces that
|
2019-03-03 15:33:34 +08:00
|
|
|
enable you to enter various forms of input for your model and explore
|
2019-03-08 05:01:51 +08:00
|
|
|
the behavior of your model immediately. Gradio also generates <strong>links</strong>
|
2019-03-03 15:33:34 +08:00
|
|
|
that can be shared with collaborators and other audiences, so they can
|
|
|
|
|
interact with the model without setting up any software or even having
|
2019-03-08 05:01:51 +08:00
|
|
|
any background in machine learning or software at all!</p>
|
2019-03-03 15:33:34 +08:00
|
|
|
<p>Visit the <a href="https://github.com/abidlabs/gradio"
|
2019-03-08 05:01:51 +08:00
|
|
|
target="_blank">Gradio GitHub >></a></p>
|
|
|
|
|
<p>Gradio was developed by researchers at Stanford University and is
|
2019-03-03 15:33:34 +08:00
|
|
|
under the Apache license.</p>
|
|
|
|
|
</div><!--
|
|
|
|
|
--><div id="demos">
|
2019-03-29 12:10:03 +08:00
|
|
|
<!-- <div id="demo-nav">
|
2019-03-03 15:33:34 +08:00
|
|
|
<button demo="1" class="selected demo-link">
|
|
|
|
|
<span class="demo-count">Demo 1</span><br>Handwriting Digit
|
|
|
|
|
</button>
|
|
|
|
|
<button demo="2" class="demo-link">
|
|
|
|
|
<span class="demo-count">Demo 2</span><br>Impressionist Painter
|
|
|
|
|
</button>
|
|
|
|
|
<button demo="3" class="demo-link">
|
|
|
|
|
<span class="demo-count">Demo 3</span><br>Expression Detection
|
|
|
|
|
</button>
|
|
|
|
|
<button demo="4" class="demo-link">
|
|
|
|
|
<span class="demo-count">Demo 4</span><br>Text Summaries
|
|
|
|
|
</button>
|
|
|
|
|
<button demo="5" class="demo-link">
|
|
|
|
|
<span class="demo-count">Demo 5</span><br>Hotdog or Not Hotdog
|
|
|
|
|
</button>
|
2019-03-29 12:10:03 +08:00
|
|
|
</div> -->
|
2019-03-03 15:33:34 +08:00
|
|
|
<div id="demo-code">
|
2019-03-29 12:10:03 +08:00
|
|
|
<div id="demo-code-label">image_detector.py</div>
|
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>
|
2019-03-29 12:10:03 +08:00
|
|
|
<span class="var">image_mdl</span> = tf.keras.models.<span
|
2019-03-03 15:33:34 +08:00
|
|
|
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
|
2019-03-29 12:10:03 +08:00
|
|
|
class="var">input</span>=“imageupload", <span
|
2019-03-03 15:33:34 +08:00
|
|
|
class="var">output</span>=“label”, <span
|
|
|
|
|
class="var">model_type</span>=“keras”,<span
|
2019-03-29 12:10:03 +08:00
|
|
|
class="var">model</span>=image_mdl<span
|
2019-03-03 15:33:34 +08:00
|
|
|
class="func">)</span><br>
|
|
|
|
|
io.<span class="func">launch()</span>
|
|
|
|
|
</code></div>
|
|
|
|
|
</div>
|
2019-03-29 12:10:03 +08:00
|
|
|
<div class="instructions">
|
|
|
|
|
The code above produces produces an interface like this, in which you can upload an image and receive labelling as output. Click
|
|
|
|
|
submit to get the prediction!
|
|
|
|
|
</div>
|
2019-03-03 15:33:34 +08:00
|
|
|
<div id="gradio">
|
|
|
|
|
<div class="panel">
|
2019-03-29 12:10:03 +08:00
|
|
|
<div class="gradio input image_file">
|
2019-03-03 15:33:34 +08:00
|
|
|
<div class="role">Input</div>
|
2019-03-29 12:10:03 +08:00
|
|
|
<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" />
|
2019-03-03 15:33:34 +08:00
|
|
|
</div>
|
|
|
|
|
<input class="submit" type="submit" value="Submit"/><!--
|
|
|
|
|
--><input class="clear" type="reset" value="Clear">
|
|
|
|
|
</div><!--
|
|
|
|
|
--><div class="panel">
|
2019-03-29 12:10:03 +08:00
|
|
|
<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>
|
2019-03-03 15:33:34 +08:00
|
|
|
</div>
|
|
|
|
|
</div><!--
|
|
|
|
|
--></div>
|
2019-03-29 12:10:03 +08:00
|
|
|
<img id="invisible_img" style="display: none" />
|
2019-03-03 15:33:34 +08:00
|
|
|
<div id="summaries">
|
|
|
|
|
<div id="setup" class="summary_box">
|
|
|
|
|
<h2>Fast, easy setup</h2>
|
2019-03-08 05:01:51 +08:00
|
|
|
<p>Using Gradio only requires adding a couple lines of code to your
|
|
|
|
|
project. You can install Gradio from pip and deploy your model in
|
2019-03-03 15:33:34 +08:00
|
|
|
seconds. Once launched, you can choose from a variety of interface
|
|
|
|
|
types to interact with, iterate over, and improve your models.</p>
|
|
|
|
|
<p>More on <a href="getting_started.html">Getting Stared >></a><p>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="present" class="summary_box">
|
|
|
|
|
<h2>Present and share</h2>
|
2019-03-08 05:01:51 +08:00
|
|
|
<p>Gradio present an interface that is intuitive to engineers and
|
2019-03-03 15:33:34 +08:00
|
|
|
non-engineers alike, and thus a valuable tool in sharing insights from
|
2019-03-08 05:01:51 +08:00
|
|
|
your models. When Gradio launches a model, it also creates a link you
|
2019-03-03 15:33:34 +08:00
|
|
|
can share with colleagues that lets them interact with the model
|
|
|
|
|
on your computer remotely from their own devices.</p>
|
|
|
|
|
<p>More on <a href="sharing.html">Sharing >></a><p>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="embed" class="summary_box">
|
|
|
|
|
<h2>Embed and go</h2>
|
2019-03-08 05:01:51 +08:00
|
|
|
<p>Gradio can be embedded in Jupyter and Colab notebooks, in blogs and
|
2019-03-03 15:33:34 +08:00
|
|
|
websites, and screenshotted for use in research papers. These features
|
|
|
|
|
all help your models be more easily shared and consumed with a larger
|
|
|
|
|
audience.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer>
|
|
|
|
|
<img src="img/logo_inline.png" />
|
|
|
|
|
</footer>
|
2019-03-29 12:10:03 +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>
|
