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

add landing page v1

Browse Source
This commit is contained in:
Your Name 2019-03-02 23:33:34 -08:00
parent ab4a17da8a
commit 0e6cbf8b30
17 changed files with 606 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
web/getting_started.html Normal file
View File

@ -0,0 +1,148 @@
<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/getting_started.css" rel="stylesheet">
<link href="style/gradio.css" rel="stylesheet">
</head>
<body>
<nav>
<img src="img/logo_inline.png" />
<a href="home.html">GradIO</a>
<a class="selected" href="getting_started.html">Getting Started</a>
<a href="sharing.html">Sharing</a>
</nav>
<div class="content">
<h1>Getting Started</h1>
<p>GradIO is a python library that allows you to place input and output
interfaces over trained models to make it easy for you to "play around"
with your model. GradIO runs entirely locally using your browser.</p>
<p>To get a sense of GradIO, take a look at the examples on the home
page. Setting up GradIO is as easy as <code>pip install gradio</code> or
<code>pip3 install gradio</code> for Python3.</p>
<p>Running a GradIO interface requires calling <code><span
class="func">Interface(</span><span class="var">input</span> : str,
<span class="var">output</span> : str, <span class="var">model_type</span>
: str, <span class="var">model</span> : Any<span
class="func">)</span></code> function, which takes as input
arguments:<br>
<code><span class="var">input</span></code> – the string representing
the input interface to be used.<br>
<code><span class="var">output</span></code> – the string representing
the output interface to be used.<br>
<code><span class="var">model_type</span></code> – the string
representing type of model being passed in. Supported types include
keras.<br>
<code><span class="var">model</span></code> – the actual model to use
for processing.</p>
<p>For example:</p>
<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>
<span class="var">io</span> = gradio.<span
class="func">Interface(</span><span
class="var">input</span>=“sketchpad”, <span
class="var">output</span>=“label”, <span
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>
<h1>Supported Interfaces</h1>
<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">
<h2><code><span class="var">input</span>=“text”</code></h2>
<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>
<h2><code><span class="var">input</span>=“image_file”</code></h2>
<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>
<h2><code><span class="var">input</span>=“snapshot”</code></h2>
<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>
<h2><code><span class="var">input</span>=“sketchpad”</code></h2>
<p>Use this interface to take simple monochrome cketches as input.</p>
<div class="input sketchpad">
<div class="role">Input</div>
</div>
<h2><code><span class="var">input</span>=“microphone”</code></h2>
<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>
<h2><code><span class="var">input</span>=“audio_file”</code></h2>
<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">
<h2><code><span class="var">output</span>=“classifier”</code></h2>
<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">&nbsp;</div></div>
<div class="confidence"><div class="label">angry</div><div class="level" style="width: 6px">&nbsp;</div></div>
</div>
</div>
<h2><code><span class="var">output</span>=“text”</code></h2>
<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>
<h2><code><span class="var">output</span>=“image”</code></h2>
<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>
</div>
<footer>
<img src="img/logo_inline.png" />
</footer>
<body>
</html>

120
web/home.html Normal file
View File

@ -0,0 +1,120 @@
<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="style/gradio.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 engineers develop, interact with, and share their machine
learning models with only a couple lines of extra code.</p>
<p>With GradIO, you can generate user interfaces in your browser that
enable you to enter various forms of input for your model and explore
the behavior of your model immediately. GradIO also generates links
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">handwriting_digit_demo.py</div>
<div class="codeblock"><code>
import <span class="var">gradio</span>, tensorflow as <span
class="var">tf</span><br>
<span class="var">handwriting_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>=“sketchpad”, <span
class="var">output</span>=“label”, <span
class="var">model_type</span>=“keras”,<span
class="var">model</span>=handwriting_mdl<span
class="func">)</span><br>
io.<span class="func">launch()</span>
</code></div>
</div>
<div id="gradio">
<div class="instructions">
In this demo, draw a digit from 0 to 9 in the input box. Click
submit, and the digit recognized by the model will be presented in
the output.
</div>
<div class="panel">
<div class="input sketchpad">
<div class="role">Input</div>
</div>
<input class="submit" type="submit" value="Submit"/><!--
--><input class="clear" type="reset" value="Clear">
</div><!--
--><div class="panel">
<div class="output classifier">
<div class="role">Output</div>
</div>
</div>
</div>
</div><!--
--></div>
<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>
<body>
</html>

BIN
web/img/altered_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
web/img/embed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
web/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
web/img/logo_inline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
web/img/mic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
web/img/present.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
web/img/run.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
web/img/sharing_explained.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
web/img/webcam.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

51
web/sharing.html Normal file
View File

@ -0,0 +1,51 @@
<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/sharing.css" rel="stylesheet">
<link href="style/gradio.css" rel="stylesheet">
</head>
<body>
<nav>
<img src="img/logo_inline.png" />
<a href="home.html">GradIO</a>
<a href="getting_started.html">Getting Started</a>
<a class="selected" href="sharing.html">Sharing</a>
</nav>
<div class="content">
<h1>Sharing</h1>
<p>GradIO comes with built in support for sharing models. When GradIO
launches an interface for a model, it also creates a shareable link that
can be sent out by the creator to collaborators so they can access the
interface from their browsers. The link does not require these remote
users to have GradIO, Python, or any environment set up.</p>
<p>This link, which is printed to the console, is generated by adding
the parameter <code><span class="var">share</span>=True</code> when
launching the interface: e.g. <code>io.<span
class="func">launch(</span><span class="var">share</span>=True<span
class="func">)</span></code>. The link stays active for 8 hours.
Other users can access the GradIO interface from the link remotely, but
the model stays on the original host computer. When remote users submit
inputs to the GradIO interface, the browser makes a call to the host
computer with the input provided. On the host, the model will generate
the output based on the provided input, and return the output, which
will be rendered in the remote browser’s output pane. </p>
<p>Because these remote interfaces will run models on the host machine
and draw from its compute power, we do not recommend publicly share the
generated links. Distribute them among trusted colleagues only.</p>
<div id="sharing_explained">
<img src="img/sharing_explained.png" /><br>
When the remote user submits an input from their interface, the model
executes on the host computer.
</div>
<h1>Public Hosting</h1>
<p>The option for permanent public hosting on GradIO servers is coming
soon! You will be able share your model publicly and collect user input
data in this upcoming feature.</p>
</div>
<footer>
<img src="img/logo_inline.png" />
</footer>
<body>
</html>

13
web/style/getting_started.css Normal file
View File

@ -0,0 +1,13 @@
#interfaces_text {
margin-bottom: 0;
}
.inputs_set, .outputs_set {
width: 50%;
box-sizing: border-box;
vertical-align: top;
display: inline-block;
}
.inputs_set {
padding-right: 25px;
}

117
web/style/gradio.css Normal file
View File

@ -0,0 +1,117 @@
.panel {
display: inline-block;
width: 50%;
box-sizing: border-box;
vertical-align: top;
}
.panel:first-of-type {
padding-right: 14px;
}
.panel:last-of-type {
padding-left: 14px;
}
.instructions {
margin-bottom: 10px;
}
.input, .output {
width: 100%;
height: 360px;
background-color: #F6F6F6;
margin-bottom: 16px;
box-sizing: border-box;
padding: 6px;
display: flex;
flex-flow: column;
}
.role {
text-transform: uppercase;
font-family: Arial;
color: #BBB;
margin-bottom: 6px;
font-size: 14px;
font-weight: bold;
}
.input.text .role, .output.text .role {
margin-left: 1px;
}
.submit, .clear {
background-color: #F6F6F6 !important;
padding: 8px !important;
box-sizing: border-box;
width: calc(50% - 8px);
text-transform: uppercase;
}
.submit {
margin-right: 8px;
}
.clear {
margin-left: 8px;
}
.input_text, .output_text {
background: transparent;
resize: none;
border: 0 none;
width: 100%;
font-size: 18px;
outline: none;
height: 100%;
padding: 0;
}
.input_image, .input_audio, .input_snapshot, .input_mic, .output_class,
.output_image {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.input_image, .input_audio, .input_snapshot, .input_mic {
font-weight: bold;
font-size: 24px;
color: #BBB;
cursor: pointer;
}
.output_class {
font-weight: bold;
font-size: 36px;
}
.input_image, .input_audio {
border: dashed 8px #BBB;
}
.input_snapshot, .input_mic {
flex-direction: column;
}
.input_snapshot .webcam, .input_mic .mic {
height: 80px;
}
.output_image img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
.confidence_intervals {
font-size: 16px;
}
.confidence {
padding: 3px;
}
.level, .label {
display: inline-block;
}
.label {
width: 60px;
text-align: right;
}
.confidence_intervals .level {
font-size: 12px;
margin-left: 8px;
margin-right: 8px;
background-color: #AAA;
padding: 2px 4px;
text-align: right;
color: white;
font-weight: bold;
}
.confidence_intervals > * {
vertical-align: bottom;
}

75
web/style/home.css Normal file
View File

@ -0,0 +1,75 @@
#intro a, .summary_box a {
color: #ed9013;
font-weight: bold;
}
#hero-section {
margin-top: 12px;
}
#hero-section > div {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
margin-bottom: 20px;
}
#intro {
width: 30%;
padding-right: 16px;
}
#demos {
width: 70%;
}
#logo {
height: 120px;
display: block;
margin: 0 auto 20px;
}
#demo-nav {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
#demo-nav button {
font-weight: bold;
}
.demo-count {
font-size: 9px;
}
#demo-code {
margin-bottom: 10px;
}
#demo-code-label {
padding: 4px;
background-color: #F6F6F6;
}
#demo-code-label {
display: inline-block;
padding-right: 7px;
}
code {
white-space: wrap;
word-wrap: break-word;
}
#summaries {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.summary_box {
max-width: 300px;
padding: 0 16px;
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
}
.summary_box h2 {
color: #ed9013;
}
#setup {
background-image: url("../img/run.png");
}
#present {
background-image: url("../img/present.png");
}
#embed {
background-image: url("../img/embed.png");
}

9
web/style/sharing.css Normal file
View File

@ -0,0 +1,9 @@
#sharing_explained {
text-align: center;
font-style: italic;
}
#sharing_explained img {
width: 100%;
max-width: 600px;
margin-bottom: 12px;
}

73
web/style/style.css Normal file
View File

@ -0,0 +1,73 @@
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0;
}
body > div, body > nav {
margin-left: 60px;
margin-right: 60px;
}
a {
text-decoration: none;
color: black;
}
p {
line-height: 2em;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.selected {
color: #ed9013;
}
a:hover, button:hover {
color: #ed9013;
}
nav {
display: flex;
justify-content: flex-end;
margin-top: 5px;
}
nav img {
margin-right: auto;
}
nav a {
margin-left: 30px;
padding: 5px 0px;
font-weight: bold;
font-size: 14px;
}
nav a.selected {
border-bottom: solid 2px #ed9013;
}
.codeblock {
background-color: #F6F6F6;
line-height: 1.4em;
padding: 4px;
}
code {
background-color: #F6F6F6;
}
code .var {
color: #c95532;
}
code .func {
color: #ed9013;
}
code .comm {
color: #888;
}
footer {
background-color: #f6f6f6;
text-align: center;
}
nav img, footer img {
height: 24px;
padding: 4px 0;
}