removed unnecessary index.html file

This commit is contained in:
Abubakar Abid 2020-07-06 23:42:34 -05:00
parent 9bc6aa44f0
commit 89fcb2fa93

View File

@ -1,331 +0,0 @@
<!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> &nbsp; <br>
model = tf.keras.Sequential() <br>
# Define your model, as you ordinarily do <br>
# Train your model, as you ordinarily do <br> &nbsp; <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>&nbsp;<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 &nbsp;
<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 &nbsp;
<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>