gradio/web/index.html
2019-03-28 22:16:47 -07:00

138 lines
6.3 KiB
HTML

<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">
<link href="gradio/gradio.css" rel="stylesheet">
<link href="gradio/vendor/cropper.css" rel="stylesheet">
</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"/>
<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
enable you to enter various forms of input for your model and explore
the behavior of your model immediately. Gradio also generates <strong>links</strong>
that can be shared with collaborators and other audiences, so they can
interact with the model without setting up any software or even having
any background in machine learning or software at all!</p>
<p>Visit the <a href="https://github.com/abidlabs/gradio"
target="_blank">Gradio GitHub >></a></p>
<p>Gradio was developed by researchers at Stanford University and is
under the Apache license.</p>
</div><!--
--><div id="demos">
<!-- <div id="demo-nav">
<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>
</div> -->
<div id="demo-code">
<div id="demo-code-label">image_detector.py</div>
<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">input</span>=“imageupload", <span
class="var">output</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>
</div>
<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>
<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>
</div><!--
--></div>
<img id="invisible_img" style="display: none" />
<div id="summaries">
<div id="setup" class="summary_box">
<h2>Fast, easy setup</h2>
<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
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>
<p>Gradio present an interface that is intuitive to engineers and
non-engineers alike, and thus a valuable tool in sharing insights from
your models. When Gradio launches a model, it also creates a link you
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>
<p>Gradio can be embedded in Jupyter and Colab notebooks, in blogs and
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>
<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>
<body>
</html>