mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-06 10:25:17 +08:00
started blog posts
This commit is contained in:
Abubakar Abid
parent
2631ab97fe
commit
d937392ad8
@ -9,18 +9,9 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 15,
|
||||
"execution_count": 1,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"The autoreload extension is already loaded. To reload it, use:\n",
|
||||
" %reload_ext autoreload\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"%load_ext autoreload\n",
|
||||
"%autoreload 2\n",
|
||||
@ -32,7 +23,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 16,
|
||||
"execution_count": 2,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
@ -347,22 +338,22 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 24,
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"inp = gradio.inputs.ImageUpload()\n",
|
||||
"out = gradio.outputs.Label()\n",
|
||||
"out = gradio.outputs.Label(label_names='imagenet1000')\n",
|
||||
"\n",
|
||||
"io = gradio.Interface(inputs=inp, \n",
|
||||
" outputs=out,\n",
|
||||
" outputs=\"label\",\n",
|
||||
" model=model, \n",
|
||||
" model_type='keras')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"execution_count": 6,
|
||||
"metadata": {
|
||||
"scrolled": false
|
||||
},
|
||||
@ -372,8 +363,29 @@
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
|
||||
"Model is running locally at: http://localhost:7878/interface.html\n"
|
||||
"Model is running locally at: http://localhost:7860/\n",
|
||||
"Model available publicly for 8 hours at: https://d2f02315.gradio.app/\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/html": [
|
||||
"\n",
|
||||
" <iframe\n",
|
||||
" width=\"1000\"\n",
|
||||
" height=\"500\"\n",
|
||||
" src=\"http://localhost:7860/\"\n",
|
||||
" frameborder=\"0\"\n",
|
||||
" allowfullscreen\n",
|
||||
" ></iframe>\n",
|
||||
" "
|
||||
],
|
||||
"text/plain": [
|
||||
"<IPython.lib.display.IFrame at 0x2837759ea90>"
|
||||
]
|
||||
},
|
||||
"metadata": {},
|
||||
"output_type": "display_data"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
|
||||
@ -18,7 +18,7 @@ import urllib
|
||||
nest_asyncio.apply()
|
||||
|
||||
LOCALHOST_IP = '127.0.0.1'
|
||||
SHARE_LINK_FORMAT = 'https://share.gradio.app/{}'
|
||||
SHARE_LINK_FORMAT = 'https://{}.gradio.app/'
|
||||
INITIAL_WEBSOCKET_PORT = 9200
|
||||
TRY_NUM_PORTS = 100
|
||||
|
||||
@ -207,7 +207,6 @@ class Interface:
|
||||
# Set up a port to serve the directory containing the static files with interface.
|
||||
server_port, httpd = networking.start_simple_server(output_directory)
|
||||
path_to_local_server = 'http://localhost:{}/'.format(server_port)
|
||||
path_to_local_interface_page = path_to_local_server + networking.TEMPLATE_TEMP
|
||||
networking.build_template(output_directory, self.input_interface, self.output_interface)
|
||||
|
||||
# Set up a port to serve a websocket that sets up the communication between the front-end and model.
|
||||
@ -230,9 +229,9 @@ class Interface:
|
||||
pass
|
||||
|
||||
if self.verbose:
|
||||
print("NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu")
|
||||
print("NOTE: Gradio is in beta stage, please report all bugs to: contact.gradio@gmail.com")
|
||||
if not is_colab:
|
||||
print(f"Model is running locally at: {path_to_local_interface_page}")
|
||||
print(f"Model is running locally at: {path_to_local_server}")
|
||||
|
||||
if share:
|
||||
try:
|
||||
@ -252,7 +251,6 @@ class Interface:
|
||||
path_to_ngrok_server = None
|
||||
|
||||
if path_to_ngrok_server is not None:
|
||||
# path_to_ngrok_interface_page = path_to_ngrok_server + '/' + networking.TEMPLATE_TEMP
|
||||
url = urllib.parse.urlparse(path_to_ngrok_server)
|
||||
subdomain = url.hostname.split('.')[0]
|
||||
path_to_ngrok_interface_page = SHARE_LINK_FORMAT.format(subdomain)
|
||||
@ -282,12 +280,12 @@ class Interface:
|
||||
inbrowser = False
|
||||
|
||||
if inbrowser and not is_colab:
|
||||
webbrowser.open(path_to_local_interface_page) # Open a browser tab with the interface.
|
||||
webbrowser.open(path_to_local_server) # Open a browser tab with the interface.
|
||||
if inline:
|
||||
from IPython.display import IFrame
|
||||
if is_colab: # Embed the remote interface page if on google colab; otherwise, embed the local page.
|
||||
display(IFrame(path_to_ngrok_interface_page, width=1000, height=500))
|
||||
else:
|
||||
display(IFrame(path_to_local_interface_page, width=1000, height=500))
|
||||
display(IFrame(path_to_local_server, width=1000, height=500))
|
||||
|
||||
return httpd, path_to_local_server, path_to_ngrok_server
|
||||
|
||||
@ -31,7 +31,7 @@ NGROK_TUNNELS_API_URL2 = "http://localhost:4041/api/tunnels" # TODO(this should
|
||||
BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/base_template.html')
|
||||
STATIC_PATH_LIB = pkg_resources.resource_filename('gradio', 'static/')
|
||||
STATIC_PATH_TEMP = 'static/'
|
||||
TEMPLATE_TEMP = 'interface.html'
|
||||
TEMPLATE_TEMP = 'index.html'
|
||||
BASE_JS_FILE = 'static/js/all-io.js'
|
||||
CONFIG_FILE = 'static/config.json'
|
||||
|
||||
|
||||
56
web/articles/beginners-tutorial-gradio-mnist-keras.html
Normal file
56
web/articles/beginners-tutorial-gradio-mnist-keras.html
Normal file
@ -0,0 +1,56 @@
|
||||
<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/blog.css" rel="stylesheet">
|
||||
<link href="../style/gradio.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<img src="../img/logo_inline.png" />
|
||||
<a href="../index.html">Gradio</a>
|
||||
<a href="../getting_started.html">Getting Started</a>
|
||||
<a href="../sharing.html">Sharing</a>
|
||||
<a href="../blog.html">Blog</a>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="leftcolumn">
|
||||
<div class="card">
|
||||
<h2>Beginner's Tutorial to Gradio: Creating a Sketchpad for a Keras MNIST Model</h2>
|
||||
<h4>Abubakar Abid, April 9, 2019</h4>
|
||||
<div class="fakeimg" style="height:200px;">Image</div>
|
||||
<p>Gradio is a python library that makes it easy to turn your machine learning models into visual interfaces!
|
||||
This tutorial shows you how to do that with the "Hello World" of machine learning models: a model that we train
|
||||
from scratch to classify hand-written digits on the MNIST dataset. By the end, you will create an interface
|
||||
that allows you to draw handwritten digits and see the results of the classifier. This post comes with a companion
|
||||
collaboratory notebook that allows you to run the code (and embed the interface) directly in a browser window.
|
||||
<a href="https://colab.research.google.com/drive/1DQSuxGARUZ-v4ZOAuw-Hf-8zqegpmes-">Check out the colab notebook here.</a></p>
|
||||
<h3>Installing Gradio</h3>
|
||||
<p>If you haven't already installed gradio, go ahead and do so. It's super easy as long as you have Python3 already on your machine:</p>
|
||||
<h3>The MNIST Dataset</h3>
|
||||
<p>The MNIST dataset consists of images of handwritten digits. We'll be training a model to classify the image
|
||||
into the digit written, from 0 through 9. Here is a sample of handwritten digits.</p>
|
||||
<h3>Training a Keras Model</h3>
|
||||
<p>By using the keras API from the tensorflow package, we can train a model in just a few lines of code. Here,
|
||||
we're not going to train a very complicated model -- it'll just be a fully connected neural network. Since we're
|
||||
not really going for record accuracies, let's just train it only for 5 epochs.</p>
|
||||
<h3>Launching a Gradio Interface</h3>
|
||||
<p>Now that we have our keras model trained, we'll want to actually define the interface. What's the appropriate
|
||||
interface to use? For the input, we can use a sketchpad, so that users can use their cursor to create new </p>
|
||||
</div>
|
||||
<!--<div class="card">-->
|
||||
<!--<h2>TITLE HEADING</h2>-->
|
||||
<!--<h5>Title description, Sep 2, 2017</h5>-->
|
||||
<!--<div class="fakeimg" style="height:200px;">Image</div>-->
|
||||
<!--<p>Some text..</p>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<img src="../img/logo_inline.png" />
|
||||
</footer>
|
||||
<body>
|
||||
</html>
|
||||
43
web/blog.html
Normal file
43
web/blog.html
Normal file
@ -0,0 +1,43 @@
|
||||
<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/blog.css" rel="stylesheet">
|
||||
<link href="style/gradio.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<img src="img/logo_inline.png" />
|
||||
<a href="index.html">Gradio</a>
|
||||
<a href="getting_started.html">Getting Started</a>
|
||||
<a href="sharing.html">Sharing</a>
|
||||
<a class="selected" href="blog.html">Blog</a>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="leftcolumn">
|
||||
<div class="card">
|
||||
<h2><a href="articles/beginners-tutorial-gradio-mnist-keras.html">Beginner's Tutorial to Gradio: Creating a Sketchpad for a Keras MNIST Model</a></h2>
|
||||
<h4>Abubakar Abid, April 9, 2019</h4>
|
||||
<div class="fakeimg" style="height:200px;">Image</div>
|
||||
<p>Gradio is a python library that makes it easy to turn your machine learning models into visual interfaces!
|
||||
This tutorial shows you how to do that with the "Hello World" of machine learning models: a model that we train
|
||||
from scratch to classify hand-written digits on the MNIST dataset. By the end, you will create an interface
|
||||
that allows you to draw handwritten digits and see the results of the classifier.
|
||||
<a href="articles/beginners-tutorial-gradio-mnist-keras.html">Read more >>.</a></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Why Machine Learning Accessibility is Important</h2>
|
||||
<h4>Gradio Team, April 8, 2019</h4>
|
||||
<div class="fakeimg" style="height:200px;">Image</div>
|
||||
<p>Why did we create gradio? In this article, we describe the problems we have experienced with machine learning
|
||||
models and why we think gradio can help solve them.
|
||||
<a href="articles/beginners-tutorial-gradio-mnist-keras.html">Read more >>.</a></p>
|
||||
</div> </div>
|
||||
</div>
|
||||
<footer>
|
||||
<img src="img/logo_inline.png" />
|
||||
</footer>
|
||||
<body>
|
||||
</html>
|
||||
@ -18,6 +18,7 @@
|
||||
<a href="index.html">Gradio</a>
|
||||
<a class="selected" href="getting_started.html">Getting Started</a>
|
||||
<a href="sharing.html">Sharing</a>
|
||||
<a href="blog.html">Blog</a>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<h1>Installation</h1>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<a class="selected" href="index.html">Gradio</a>
|
||||
<a href="getting_started.html">Getting Started</a>
|
||||
<a href="sharing.html">Sharing</a>
|
||||
<a href="blog.html">Blog</a>
|
||||
</nav>
|
||||
<div id="hero-section"><!--
|
||||
--><div id="intro">
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<a href="index.html">Gradio</a>
|
||||
<a href="getting_started.html">Getting Started</a>
|
||||
<a class="selected" href="sharing.html">Sharing</a>
|
||||
<a href="blog.html">Blog</a>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<h1>Sharing</h1>
|
||||
|
||||
26
web/style/blog.css
Normal file
26
web/style/blog.css
Normal file
@ -0,0 +1,26 @@
|
||||
.leftcolumn {
|
||||
width: 75%;
|
||||
}
|
||||
p a{
|
||||
color: #ed9013;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Add a card effect for articles */
|
||||
body{
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 10px 20px 20px 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user