From d937392ad8f5b781b889af4d17d526e016095366 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 9 Apr 2019 19:54:47 -0700 Subject: [PATCH] started blog posts --- Test Keras.ipynb | 46 +++++++++------ gradio/interface.py | 12 ++-- gradio/networking.py | 2 +- ...beginners-tutorial-gradio-mnist-keras.html | 56 +++++++++++++++++++ web/blog.html | 43 ++++++++++++++ web/getting_started.html | 1 + web/index.html | 1 + web/sharing.html | 1 + web/style/blog.css | 26 +++++++++ 9 files changed, 163 insertions(+), 25 deletions(-) create mode 100644 web/articles/beginners-tutorial-gradio-mnist-keras.html create mode 100644 web/blog.html create mode 100644 web/style/blog.css diff --git a/Test Keras.ipynb b/Test Keras.ipynb index f4c43f7d55..8a5f6e84e5 100644 --- a/Test Keras.ipynb +++ b/Test Keras.ipynb @@ -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", + " \n", + " " + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" } ], "source": [ diff --git a/gradio/interface.py b/gradio/interface.py index 28352a94d8..81da7bc69a 100644 --- a/gradio/interface.py +++ b/gradio/interface.py @@ -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 diff --git a/gradio/networking.py b/gradio/networking.py index 6e092f00b1..9baea98111 100644 --- a/gradio/networking.py +++ b/gradio/networking.py @@ -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' diff --git a/web/articles/beginners-tutorial-gradio-mnist-keras.html b/web/articles/beginners-tutorial-gradio-mnist-keras.html new file mode 100644 index 0000000000..54f6c28050 --- /dev/null +++ b/web/articles/beginners-tutorial-gradio-mnist-keras.html @@ -0,0 +1,56 @@ + + + Gradio + + + + + + + +
+
+
+
+

Beginner's Tutorial to Gradio: Creating a Sketchpad for a Keras MNIST Model

+

Abubakar Abid, April 9, 2019

+
Image
+

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. + Check out the colab notebook here.

+

Installing Gradio

+

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:

+

The MNIST Dataset

+

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.

+

Training a Keras Model

+

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.

+

Launching a Gradio Interface

+

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

+
+ + + + + + + +
+
+
+ +
+ + diff --git a/web/blog.html b/web/blog.html new file mode 100644 index 0000000000..935db6fdcc --- /dev/null +++ b/web/blog.html @@ -0,0 +1,43 @@ + + + Gradio + + + + + + + +
+
+
+
+

Beginner's Tutorial to Gradio: Creating a Sketchpad for a Keras MNIST Model

+

Abubakar Abid, April 9, 2019

+
Image
+

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. + Read more >>.

+
+
+

Why Machine Learning Accessibility is Important

+

Gradio Team, April 8, 2019

+
Image
+

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. + Read more >>.

+
+
+
+ +
+ + diff --git a/web/getting_started.html b/web/getting_started.html index d7ef12864a..4838fd790f 100644 --- a/web/getting_started.html +++ b/web/getting_started.html @@ -18,6 +18,7 @@ Gradio Getting Started Sharing + Blog

Installation

diff --git a/web/index.html b/web/index.html index a69d18caa9..cbae726441 100644 --- a/web/index.html +++ b/web/index.html @@ -12,6 +12,7 @@ Gradio Getting Started Sharing + Blog
diff --git a/web/sharing.html b/web/sharing.html index f9fff67f74..c0273d81b4 100644 --- a/web/sharing.html +++ b/web/sharing.html @@ -12,6 +12,7 @@ Gradio Getting Started Sharing + Blog

Sharing

diff --git a/web/style/blog.css b/web/style/blog.css new file mode 100644 index 0000000000..e8f8c9ceea --- /dev/null +++ b/web/style/blog.css @@ -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; +} +