2018-12-21 02:06:05 +08:00
<!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 >
2019-01-07 07:41:09 +08:00
< 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 >
2018-12-21 02:06:05 +08:00
< 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> -->
2019-01-07 07:41:09 +08:00
< li class = "nav-item " style = "font-weight:500; font-decoration:none" >
2019-01-07 08:13:24 +08:00
< a class = "nav-link" href = "http://www.siliconprep.com" > < em > A Silicon Prep Tool< / em > < / a >
2018-12-21 02:06:05 +08:00
< / 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 >
2019-01-07 07:41:09 +08:00
< p class = "lead text-muted" style = "font-weight:400 !important" > Put a beautiful interactive demo layer over your trained ML model.< / p >
2018-12-21 02:06:05 +08:00
< p >
2019-01-07 07:41:09 +08:00
< 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 >
2018-12-21 02:06:05 +08:00
< / p >
< / div >
< / section >
< div class = "album py-5 bg-light" >
< div class = "container" >
2019-01-07 07:41:09 +08:00
< 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 >
2018-12-21 02:06:05 +08:00
< 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" >
2019-02-17 12:11:28 +08:00
< button type = "button" class = "btn btn-sm btn-outline-secondary" onclick = "location.href='templates/emotion_detector.html';" > View< / button >
2018-12-21 02:06:05 +08:00
< 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"> -->
2019-01-07 07:41:09 +08:00
<!-- <img class="card - img - top" src="img/placeholder.png" alt="Card image cap"> -->
2018-12-21 02:06:05 +08:00
<!-- <div class="card - body"> -->
2019-01-07 07:41:09 +08:00
<!-- <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> -->
2018-12-21 02:06:05 +08:00
<!-- <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> -->
2019-01-07 07:41:09 +08:00
<!-- <small class="text - muted"></small> -->
2018-12-21 02:06:05 +08:00
<!-- </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 >
