mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-21 01:01:05 +08:00
332 lines
18 KiB
HTML
332 lines
18 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<!--<link rel="icon" href="../../../../favicon.ico">-->
|
|
|
|
<title>Gradio: An Interactive Demo for Your Trained ML Model</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="css/index.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #e3f2fd">
|
|
<a class="navbar-brand" href="#" style="font-weight:bold">Gradio</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
|
<ul class="navbar-nav mr-auto">
|
|
<!--<li class="nav-item active">-->
|
|
<!--<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>-->
|
|
<!--</li>-->
|
|
<!--<li class="nav-item">-->
|
|
<!--<a class="nav-link disabled" href="#">Disabled</a>-->
|
|
<!--</li>-->
|
|
<!--<li class="nav-item dropdown">-->
|
|
<!--<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>-->
|
|
<!--<div class="dropdown-menu" aria-labelledby="dropdown01">-->
|
|
<!--<a class="dropdown-item" href="#">Action</a>-->
|
|
<!--<a class="dropdown-item" href="#">Another action</a>-->
|
|
<!--<a class="dropdown-item" href="#">Something else here</a>-->
|
|
<!--</div>-->
|
|
<!--</li>-->
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
<!--<li class="nav-item">-->
|
|
<!--<a class="nav-link" href="#">Help</a>-->
|
|
<!--</li>-->
|
|
<li class="nav-item " style="font-weight:500; font-decoration:none">
|
|
<a class="nav-link" href="http://www.siliconprep.com"><em>A Silicon Prep Tool</em></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!--<header>-->
|
|
<!--<div class="collapse bg-dark" id="navbarHeader">-->
|
|
<!--<div class="container">-->
|
|
<!--<div class="row">-->
|
|
<!--<div class="col-sm-8 col-md-7 py-4">-->
|
|
<!--<h4 class="text-white">About</h4>-->
|
|
<!--<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>-->
|
|
<!--</div>-->
|
|
<!--<div class="col-sm-4 offset-md-1 py-4">-->
|
|
<!--<h4 class="text-white">Contact</h4>-->
|
|
<!--<ul class="list-unstyled">-->
|
|
<!--<li><a href="#" class="text-white">Follow on Twitter</a></li>-->
|
|
<!--<li><a href="#" class="text-white">Like on Facebook</a></li>-->
|
|
<!--<li><a href="#" class="text-white">Email me</a></li>-->
|
|
<!--</ul>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="navbar navbar-dark bg-dark shadow-sm">-->
|
|
<!--<div class="container d-flex justify-content-between">-->
|
|
<!--<a href="#" class="navbar-brand d-flex align-items-center">-->
|
|
<!--<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>-->
|
|
<!--<strong>Album</strong>-->
|
|
<!--</a>-->
|
|
<!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">-->
|
|
<!--<span class="navbar-toggler-icon"></span>-->
|
|
<!--</button>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</header>-->
|
|
|
|
<main role="main">
|
|
|
|
<section class="jumbotron text-center">
|
|
<div class="container">
|
|
<h1 class="jumbotron-heading">Gradio</h1>
|
|
<p class="lead text-muted" style="font-weight:400 !important">Put a beautiful interactive demo layer over your trained ML model.</p>
|
|
<p>
|
|
<a href="#" class="btn btn-lg btn-pink my-2">Get started</a>
|
|
<a href="#" class="btn btn-lg btn-primary my-2">See examples</a>
|
|
<a href="#" class="btn btn-lg btn-secondary my-2">Github</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="album py-5 bg-light">
|
|
<div class="container">
|
|
<h1>Getting started</h1>
|
|
<p>
|
|
Gradio (gradient input-output) is a python library that allows you to easily transform your trained model into a webpage that easily allows you to interface with it. This allows you to:
|
|
<ul>
|
|
<li>Show off the model to others</li>
|
|
<li>Identify response to unusual behavior</li>
|
|
<li>Encourage fairness and reproducibility of your model</li>
|
|
</ul>
|
|
Gradio is designed to be very simple to use. For example, in just 2 lines of Python code, you can create a sketchpad that allows you write digits and see whether your MNIST model can correctly identify them.
|
|
</p>
|
|
|
|
<h4> Installation </h4>
|
|
<p> Gradio is a standard python library, so install it from your terminal like this:
|
|
<div class="codebox">
|
|
<code>
|
|
pip install gradio
|
|
</code>
|
|
</div>
|
|
</p>
|
|
<h4> Usage </h4>
|
|
<p> To use gradio in your code, simply import it, and then launch the appropriate interface
|
|
<div class="codebox">
|
|
<code>
|
|
import gradio <br>
|
|
import tensorflow as tf <br> <br>
|
|
|
|
model = tf.keras.Sequential() <br>
|
|
# Define your model, as you ordinarily do <br>
|
|
# Train your model, as you ordinarily do <br> <br>
|
|
|
|
gradio.interfaces.Sketchpad(model=model, model_type='keras').launch()
|
|
</code>
|
|
</div>
|
|
</p>
|
|
|
|
This will open a new browser window which will allow you to draw into a "sketchpad". Behind the scenes, gradio transforms the user drawing into a numeric array and passes it into your model for your prediction.
|
|
Then, gradio will fetch the result and show it to the user. Like this:
|
|
<br> <br>
|
|
Currently, the following <code>model_type</code> are supported:
|
|
<ul>
|
|
<li>Keras models</li>
|
|
<li>Sklearn models</li>
|
|
<li>Arbitrary python functions</li>
|
|
</ul>
|
|
|
|
See the gallery of interfaces below to see what kind of interfaces can be supported. Contribute your own interfaces by visiting our GitHub page.
|
|
|
|
<hr>
|
|
<h1>Gallery of Interfaces</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card mb-4 shadow-sm">
|
|
<img class="card-img-top" src="img/draw-a-digit.png" alt="Card image cap">
|
|
<div class="card-body">
|
|
<p class="card-text"><strong>Draw a Digit</strong>: allow users to draw their own digits to test MNIST-type models.</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.href='templates/draw_a_digit.html';">View</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.href='https://github.com/abidlabs/gradiome/blob/master/templates/draw_a_digit.html';">Source</button>
|
|
</div>
|
|
<small class="text-muted"></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4 shadow-sm">
|
|
<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">
|
|
<div class="card-body">
|
|
<p class="card-text"><strong>Emotion Detector</strong>: allow users to make emotions through their webcam and detect their emotion with your model.</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.href='templates/emotion_detector.html';">View</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>
|
|
</div>
|
|
<small class="text-muted"></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4 shadow-sm">
|
|
<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">
|
|
<div class="card-body">
|
|
<p class="card-text"><strong>Automated Author</strong>: use an RNN to generate a sequence of words beginning the words that the user has supplied</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>
|
|
</div>
|
|
<small class="text-muted"></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" src="img/placeholder.png" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text"><strong>Image Blender</strong>: use an GAN to generate a sequence of images imputed between two images that the user has supplied.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted"></small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted">9 mins</small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted">9 mins</small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted">9 mins</small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted">9 mins</small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--<div class="col-md-4">-->
|
|
<!--<div class="card mb-4 shadow-sm">-->
|
|
<!--<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">-->
|
|
<!--<div class="card-body">-->
|
|
<!--<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>-->
|
|
<!--<div class="d-flex justify-content-between align-items-center">-->
|
|
<!--<div class="btn-group">-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">View</button>-->
|
|
<!--<button type="button" class="btn btn-sm btn-outline-secondary">Source</button>-->
|
|
<!--</div>-->
|
|
<!--<small class="text-muted">9 mins</small>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container" >
|
|
<span class="text-muted">
|
|
|
|
<!-- Add font awesome icons -->
|
|
Gradio is open-source, help make it better
|
|
<a href="https://github.com/abidlabs/gradiome" target="_blank" class="fa fa-github"></a>
|
|
|
|
</span>
|
|
|
|
<span class="text-muted pull-right">
|
|
|
|
<!-- Add font awesome icons -->
|
|
Found this useful? Kindly spread the word
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=www.siliconprep.com" target="_blank" class="fa fa-facebook"></a>
|
|
<a href="https://twitter.com/home?status=Check%20out%20Gradio%20tool%20at%20www.siliconprep.com" target="_blank" class="fa fa-twitter"></a>
|
|
|
|
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
<!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>-->
|
|
<!--<script src="../../assets/js/vendor/popper.min.js"></script>-->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!--<script src="../../assets/js/vendor/holder.min.js"></script>-->
|
|
</body>
|
|
</html>
|