mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-06 12:30:29 +08:00
merge conflict
This commit is contained in:
Ali Abdalla
commit
356e0c2373
@ -1,3 +1,4 @@
|
||||
include gradio/css/*
|
||||
include gradio/js/*
|
||||
include gradio/templates/*
|
||||
include gradio/static/*
|
||||
include gradio/static/css/*
|
||||
include gradio/static/js/*
|
||||
include gradio/static/img/*
|
||||
|
||||
@ -19,196 +19,102 @@
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"(x_train, y_train),(x_test, y_test) = tf.keras.datasets.mnist.load_data()\n",
|
||||
"x_train, x_test = x_train / 255.0, x_test / 255.0"
|
||||
"model = tf.keras.applications.inception_v3.InceptionV3()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"(60000, 28, 28)"
|
||||
]
|
||||
},
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"x_train.shape"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 4,
|
||||
"metadata": {
|
||||
"scrolled": true
|
||||
},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"model = tf.keras.models.Sequential([\n",
|
||||
" tf.keras.layers.Flatten(),\n",
|
||||
" tf.keras.layers.Dense(512, activation=tf.nn.relu),\n",
|
||||
" tf.keras.layers.Dropout(0.2),\n",
|
||||
" tf.keras.layers.Dense(10, activation=tf.nn.softmax)\n",
|
||||
"])\n",
|
||||
"inp = gradio.inputs.ImageUpload(image_width=299, image_height=299)\n",
|
||||
"out = gradio.outputs.Label(label_names='imagenet1000', max_label_length=8, num_top_classes=5)\n",
|
||||
"\n",
|
||||
"model.compile(optimizer='adam',\n",
|
||||
" loss='sparse_categorical_crossentropy',\n",
|
||||
" metrics=['accuracy'])"
|
||||
"iface = gradio.Interface(inputs=inp, \n",
|
||||
" outputs=out,\n",
|
||||
" model=model, \n",
|
||||
" model_type='keras')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Epoch 1/1\n",
|
||||
"3/3 [==============================] - 8s 3s/step - loss: 2.0548 - acc: 0.3412\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"<tensorflow.python.keras.callbacks.History at 0x1fca491be48>"
|
||||
]
|
||||
},
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"model.fit(x_train, y_train, epochs=1, steps_per_epoch=3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 6,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"inp = gradio.inputs.ImageUpload(image_width=28, image_height=28, num_channels=None, image_mode='L')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 7,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"iface = gradio.Interface(inputs=inp, outputs=\"label\", model=model, model_type='keras')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 8,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
|
||||
"Model available locally at: http://localhost:7860/interface.html\n",
|
||||
"To create a public link, set `share=True` in the argument to `launch()`\n"
|
||||
"Model is running locally at: http://localhost:7861/interface.html\n",
|
||||
"Model available publicly for 8 hours at: http://4d315e61.ngrok.io/interface.html\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/html": [
|
||||
"\n",
|
||||
" <iframe\n",
|
||||
" width=\"1000\"\n",
|
||||
" height=\"500\"\n",
|
||||
" src=\"http://localhost:7861/interface.html\"\n",
|
||||
" frameborder=\"0\"\n",
|
||||
" allowfullscreen\n",
|
||||
" ></iframe>\n",
|
||||
" "
|
||||
],
|
||||
"text/plain": [
|
||||
"('http://localhost:7860/interface.html', None)"
|
||||
"<IPython.lib.display.IFrame at 0x26985fbd940>"
|
||||
]
|
||||
},
|
||||
"execution_count": 8,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
"output_type": "display_data"
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"127.0.0.1 - - [05/Mar/2019 23:13:12] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:13:12] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"{'label': 2, 'confidences': [{'label': 2, 'confidence': 1.0}, {'label': 0, 'confidence': 0.0}, {'label': 0, 'confidence': 0.0}]}\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/css/style.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/js/utils.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/img/logo_inline.png HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:47] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:48] code 404, message File not found\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:14:48] \"GET /favicon.ico HTTP/1.1\" 404 -\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"{'label': 2, 'confidences': [{'label': 2, 'confidence': 1.0}, {'label': 0, 'confidence': 0.0}, {'label': 0, 'confidence': 0.0}]}\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"127.0.0.1 - - [05/Mar/2019 23:15:29] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:15:29] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:15:32] \"GET /interface.html HTTP/1.1\" 200 -\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"{'label': 2, 'confidences': [{'label': 2, 'confidence': 1.0}, {'label': 0, 'confidence': 0.0}, {'label': 0, 'confidence': 0.0}]}\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:47] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:47] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:47] \"GET /static/js/utils.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:47] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:47] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [05/Mar/2019 23:18:48] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"{'label': 2, 'confidences': [{'label': 2, 'confidence': 1.0}, {'label': 0, 'confidence': 0.0}, {'label': 0, 'confidence': 0.0}]}\n"
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:01] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:02] code 404, message File not found\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:02] \"GET /favicon.ico HTTP/1.1\" 404 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:08] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/css/style.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/js/utils.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/img/logo_inline.png HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:09] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:10] code 404, message File not found\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:55:10] \"GET /favicon.ico HTTP/1.1\" 404 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:07] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:07] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:07] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:07] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:07] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:31] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:43] \"GET /interface.html HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/js/utils.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/css/gradio.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/js/all-io.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/css/style.css HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/js/image-upload-input.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/js/class-output.js HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:44] \"GET /static/img/logo_inline.png HTTP/1.1\" 200 -\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:45] code 404, message File not found\n",
|
||||
"127.0.0.1 - - [06/Mar/2019 11:58:45] \"GET /favicon.ico HTTP/1.1\" 404 -\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"iface.launch(share=False)"
|
||||
"iface.launch(inline=True, browser=True, share=True);"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
@ -1 +1 @@
|
||||
from gradio.interface import Interface # This makes Interface importable as gradio.Interface.
|
||||
from gradio.interface import Interface # This makes it possible to import `Interface` as `gradio.Interface`.
|
||||
|
||||
1000
build/lib/gradio/imagenet_class_labels.py
Normal file
1000
build/lib/gradio/imagenet_class_labels.py
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,15 @@
|
||||
"""
|
||||
This module defines various classes that can serve as the `input` to an interface. Each class must inherit from
|
||||
`AbstractInput`, and each class must define a path to its template. All of the subclasses of `AbstractInput` are
|
||||
automatically added to a registry, which allows them to be easily referenced in other parts of the code.
|
||||
"""
|
||||
|
||||
from abc import ABC, abstractmethod
|
||||
import base64
|
||||
from PIL import Image
|
||||
from gradio import preprocessing_utils
|
||||
from io import BytesIO
|
||||
import numpy as np
|
||||
from gradio import preprocessing_utils
|
||||
from PIL import Image
|
||||
|
||||
class AbstractInput(ABC):
|
||||
"""
|
||||
@ -12,84 +18,115 @@ class AbstractInput(ABC):
|
||||
"""
|
||||
|
||||
def __init__(self, preprocessing_fn=None):
|
||||
"""
|
||||
:param preprocessing_fn: an optional preprocessing function that overrides the default
|
||||
"""
|
||||
if preprocessing_fn is not None:
|
||||
self._pre_process = preprocessing_fn
|
||||
if not callable(preprocessing_fn):
|
||||
raise ValueError('`preprocessing_fn` must be a callable function')
|
||||
self.preprocess = preprocessing_fn
|
||||
super().__init__()
|
||||
|
||||
@abstractmethod
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
"""
|
||||
All interfaces should define a method that returns the path to its template.
|
||||
"""
|
||||
pass
|
||||
|
||||
@abstractmethod
|
||||
def _pre_process(self):
|
||||
def preprocess(self, inp):
|
||||
"""
|
||||
All interfaces should define a method that returns the path to its template.
|
||||
All interfaces should define a default preprocessing method
|
||||
"""
|
||||
pass
|
||||
|
||||
|
||||
class Sketchpad(AbstractInput):
|
||||
def __init__(self, preprocessing_fn=None, image_width=28, image_height=28):
|
||||
self.image_width = image_width
|
||||
self.image_height = image_height
|
||||
super().__init__(preprocessing_fn=preprocessing_fn)
|
||||
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
return 'templates/sketchpad_input.html'
|
||||
|
||||
def _pre_process(self, imgstring):
|
||||
def preprocess(self, inp):
|
||||
"""
|
||||
Default preprocessing method for the SketchPad is to convert the sketch to black and white and resize 28x28
|
||||
"""
|
||||
content = imgstring.split(';')[1]
|
||||
content = inp.split(';')[1]
|
||||
image_encoded = content.split(',')[1]
|
||||
body = base64.decodebytes(image_encoded.encode('utf-8'))
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')
|
||||
im = preprocessing_utils.resize_and_crop(im, (28, 28))
|
||||
array = np.array(im).flatten().reshape(1, 28, 28, 1)
|
||||
im = preprocessing_utils.resize_and_crop(im, (self.image_width, self.image_height))
|
||||
array = np.array(im).flatten().reshape(1, self.image_width, self.image_height, 1)
|
||||
return array
|
||||
|
||||
|
||||
class Webcam(AbstractInput):
|
||||
def __init__(self, preprocessing_fn=None, image_width=224, image_height=224, num_channels=3):
|
||||
self.image_width = image_width
|
||||
self.image_height = image_height
|
||||
self.num_channels = num_channels
|
||||
super().__init__(preprocessing_fn=preprocessing_fn)
|
||||
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
return 'templates/webcam_input.html'
|
||||
|
||||
def _pre_process(self, imgstring):
|
||||
def preprocess(self, inp):
|
||||
"""
|
||||
Default preprocessing method for is to convert the picture to black and white and resize to be 48x48
|
||||
"""
|
||||
content = imgstring.split(';')[1]
|
||||
content = inp.split(';')[1]
|
||||
image_encoded = content.split(',')[1]
|
||||
body = base64.decodebytes(image_encoded.encode('utf-8'))
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')
|
||||
im = preprocessing_utils.resize_and_crop(im, (48, 48))
|
||||
array = np.array(im).flatten().reshape(1, 48, 48, 1)
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('RGB')
|
||||
im = preprocessing_utils.resize_and_crop(im, (self.image_width, self.image_height))
|
||||
array = np.array(im).flatten().reshape(1, self.image_width, self.image_height, self.num_channels)
|
||||
return array
|
||||
|
||||
|
||||
class Textbox(AbstractInput):
|
||||
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
return 'templates/textbox_input.html'
|
||||
|
||||
def _pre_process(self, text):
|
||||
def preprocess(self, inp):
|
||||
"""
|
||||
By default, no pre-processing is applied to text.
|
||||
"""
|
||||
return text
|
||||
return inp
|
||||
|
||||
|
||||
class ImageUpload(AbstractInput):
|
||||
def __init__(self, preprocessing_fn=None, image_width=224, image_height=224, num_channels=3, image_mode='RGB',
|
||||
scale = 1/127.5, shift = -1):
|
||||
self.image_width = image_width
|
||||
self.image_height = image_height
|
||||
self.num_channels = num_channels
|
||||
self.image_mode = image_mode
|
||||
self.scale = scale
|
||||
self.shift = shift
|
||||
super().__init__(preprocessing_fn=preprocessing_fn)
|
||||
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
return 'templates/image_upload_input.html'
|
||||
|
||||
def _pre_process(self, imgstring):
|
||||
def preprocess(self, inp):
|
||||
"""
|
||||
Default preprocessing method for is to convert the picture to black and white and resize to be 48x48
|
||||
"""
|
||||
content = imgstring.split(';')[1]
|
||||
content = inp.split(';')[1]
|
||||
image_encoded = content.split(',')[1]
|
||||
body = base64.decodebytes(image_encoded.encode('utf-8'))
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')
|
||||
im = preprocessing_utils.resize_and_crop(im, (48, 48))
|
||||
array = np.array(im).flatten().reshape(1, 48, 48, 1)
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert(self.image_mode)
|
||||
im = preprocessing_utils.resize_and_crop(im, (self.image_width, self.image_height))
|
||||
im = np.array(im).flatten()
|
||||
im = im * self.scale + self.shift
|
||||
if self.num_channels is None:
|
||||
array = im.reshape(1, self.image_width, self.image_height)
|
||||
else:
|
||||
array = im.reshape(1, self.image_width, self.image_height, self.num_channels)
|
||||
return array
|
||||
|
||||
|
||||
# Automatically adds all subclasses of AbstractInput into a dictionary (keyed by class name) for easy referencing.
|
||||
registry = {cls.__name__.lower(): cls for cls in AbstractInput.__subclasses__()}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
'''
|
||||
This is the core file in the `gradio` package, and defines the Interface class, including methods for constructing the
|
||||
interface using the input and output types.
|
||||
'''
|
||||
|
||||
import asyncio
|
||||
import websockets
|
||||
import nest_asyncio
|
||||
import webbrowser
|
||||
import pkg_resources
|
||||
from bs4 import BeautifulSoup
|
||||
from gradio import inputs
|
||||
from gradio import outputs
|
||||
import gradio.inputs
|
||||
import gradio.outputs
|
||||
from gradio import networking
|
||||
import os
|
||||
import shutil
|
||||
import tempfile
|
||||
|
||||
nest_asyncio.apply()
|
||||
@ -17,46 +18,53 @@ LOCALHOST_IP = '127.0.0.1'
|
||||
INITIAL_WEBSOCKET_PORT = 9200
|
||||
TRY_NUM_PORTS = 100
|
||||
|
||||
BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/base_template.html')
|
||||
JS_PATH_LIB = pkg_resources.resource_filename('gradio', 'js/')
|
||||
CSS_PATH_LIB = pkg_resources.resource_filename('gradio', 'css/')
|
||||
JS_PATH_TEMP = 'js/'
|
||||
CSS_PATH_TEMP = 'css/'
|
||||
TEMPLATE_TEMP = 'interface.html'
|
||||
BASE_JS_FILE = 'js/all-io.js'
|
||||
|
||||
|
||||
class Interface():
|
||||
class Interface:
|
||||
"""
|
||||
The Interface class represents a general input/output interface for a machine learning model. During construction,
|
||||
the appropriate inputs and outputs
|
||||
"""
|
||||
|
||||
# Dictionary in which each key is a valid `model_type` argument to constructor, and the value being the description.
|
||||
VALID_MODEL_TYPES = {'sklearn': 'sklearn model', 'keras': 'keras model', 'function': 'python function'}
|
||||
|
||||
def __init__(self, input, output, model, model_type=None, preprocessing_fn=None, postprocessing_fn=None):
|
||||
def __init__(self, inputs, outputs, model, model_type=None, preprocessing_fns=None, postprocessing_fns=None,
|
||||
verbose=True):
|
||||
"""
|
||||
:param model_type: what kind of trained model, can be 'keras' or 'sklearn'.
|
||||
:param inputs: a string or `AbstractInput` representing the input interface.
|
||||
:param outputs: a string or `AbstractOutput` representing the output interface.
|
||||
:param model_obj: the model object, such as a sklearn classifier or keras model.
|
||||
:param model_params: additional model parameters.
|
||||
:param model_type: what kind of trained model, can be 'keras' or 'sklearn' or 'function'. Inferred if not
|
||||
provided.
|
||||
:param preprocessing_fns: an optional function that overrides the preprocessing function of the input interface.
|
||||
:param postprocessing_fns: an optional function that overrides the postprocessing fn of the output interface.
|
||||
"""
|
||||
self.input_interface = inputs.registry[input](preprocessing_fn)
|
||||
self.output_interface = outputs.registry[output](postprocessing_fn)
|
||||
if isinstance(inputs, str):
|
||||
self.input_interface = gradio.inputs.registry[inputs.lower()](preprocessing_fns)
|
||||
elif isinstance(inputs, gradio.inputs.AbstractInput):
|
||||
self.input_interface = inputs
|
||||
else:
|
||||
raise ValueError('Input interface must be of type `str` or `AbstractInput`')
|
||||
if isinstance(outputs, str):
|
||||
self.output_interface = gradio.outputs.registry[outputs.lower()](postprocessing_fns)
|
||||
elif isinstance(outputs, gradio.outputs.AbstractOutput):
|
||||
self.output_interface = outputs
|
||||
else:
|
||||
raise ValueError('Output interface must be of type `str` or `AbstractOutput`')
|
||||
self.model_obj = model
|
||||
if model_type is None:
|
||||
model_type = self._infer_model_type(model)
|
||||
if model_type is None:
|
||||
raise ValueError("model_type could not be inferred, please specify parameter `model_type`")
|
||||
else:
|
||||
if verbose:
|
||||
print("Model type not explicitly identified, inferred to be: {}".format(
|
||||
self.VALID_MODEL_TYPES[model_type]))
|
||||
self.VALID_MODEL_TYPES[model_type]))
|
||||
elif not(model_type.lower() in self.VALID_MODEL_TYPES):
|
||||
ValueError('model_type must be one of: {}'.format(self.VALID_MODEL_TYPES))
|
||||
self.model_type = model_type
|
||||
self.verbose = verbose
|
||||
|
||||
def _infer_model_type(self, model):
|
||||
if callable(model):
|
||||
return 'function'
|
||||
|
||||
@staticmethod
|
||||
def _infer_model_type(model):
|
||||
""" Helper method that attempts to identify the type of trained ML model."""
|
||||
try:
|
||||
import sklearn
|
||||
if isinstance(model, sklearn.base.BaseEstimator):
|
||||
@ -78,124 +86,100 @@ class Interface():
|
||||
except ImportError:
|
||||
pass
|
||||
|
||||
return None
|
||||
if callable(model):
|
||||
return 'function'
|
||||
|
||||
def _build_template(self, temp_dir):
|
||||
input_template_path = pkg_resources.resource_filename(
|
||||
'gradio', self.input_interface._get_template_path())
|
||||
output_template_path = pkg_resources.resource_filename(
|
||||
'gradio', self.output_interface._get_template_path())
|
||||
input_page = open(input_template_path)
|
||||
output_page = open(output_template_path)
|
||||
input_soup = BeautifulSoup(input_page.read(), features="html.parser")
|
||||
output_soup = BeautifulSoup(output_page.read(), features="html.parser")
|
||||
|
||||
all_io_page = open(BASE_TEMPLATE)
|
||||
all_io_soup = BeautifulSoup(all_io_page.read(), features="html.parser")
|
||||
input_tag = all_io_soup.find("div", {"id": "input"})
|
||||
output_tag = all_io_soup.find("div", {"id": "output"})
|
||||
|
||||
input_tag.replace_with(input_soup)
|
||||
output_tag.replace_with(output_soup)
|
||||
|
||||
f = open(os.path.join(temp_dir, TEMPLATE_TEMP), "w")
|
||||
f.write(str(all_io_soup.prettify))
|
||||
|
||||
self._copy_files(JS_PATH_LIB, os.path.join(temp_dir, JS_PATH_TEMP))
|
||||
self._copy_files(CSS_PATH_LIB, os.path.join(temp_dir, CSS_PATH_TEMP))
|
||||
return
|
||||
|
||||
def _copy_files(self, src_dir, dest_dir):
|
||||
if not os.path.exists(dest_dir):
|
||||
os.makedirs(dest_dir)
|
||||
src_files = os.listdir(src_dir)
|
||||
for file_name in src_files:
|
||||
full_file_name = os.path.join(src_dir, file_name)
|
||||
if os.path.isfile(full_file_name):
|
||||
shutil.copy(full_file_name, dest_dir)
|
||||
|
||||
def _set_socket_url_in_js(self, temp_dir, socket_url):
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
|
||||
lines = fin.readlines()
|
||||
lines[0] = 'var NGROK_URL = "{}"\n'.format(socket_url.replace('http', 'ws'))
|
||||
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
|
||||
for line in lines:
|
||||
fout.write(line)
|
||||
|
||||
def _set_socket_port_in_js(self, temp_dir, socket_port):
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
|
||||
lines = fin.readlines()
|
||||
lines[1] = 'var SOCKET_PORT = {}\n'.format(socket_port)
|
||||
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
|
||||
for line in lines:
|
||||
fout.write(line)
|
||||
|
||||
def predict(self, array):
|
||||
if self.model_type=='sklearn':
|
||||
return self.model_obj.predict(array)
|
||||
elif self.model_type=='keras':
|
||||
return self.model_obj.predict(array)
|
||||
elif self.model_type=='function':
|
||||
return self.model_obj(array)
|
||||
else:
|
||||
ValueError('model_type must be one of: {}'.format(self.VALID_MODEL_TYPES))
|
||||
raise ValueError("model_type could not be inferred, please specify parameter `model_type`")
|
||||
|
||||
async def communicate(self, websocket, path):
|
||||
"""
|
||||
Method that defines how this interface communicates with the websocket.
|
||||
:param websocket: a Websocket object used to communicate with the interface frontend
|
||||
:param path: ignored
|
||||
Method that defines how this interface should communicates with the websocket. (1) When an input is received by
|
||||
the websocket, it is passed into the input interface and preprocssed. (2) Then the model is called to make a
|
||||
prediction. (3) Finally, the prediction is postprocessed to get something to be displayed by the output.
|
||||
:param websocket: a Websocket server used to communicate with the interface frontend
|
||||
:param path: not used, but required for compliance with websocket library
|
||||
"""
|
||||
while True:
|
||||
try:
|
||||
msg = await websocket.recv()
|
||||
processed_input = self.input_interface._pre_process(msg)
|
||||
processed_input = self.input_interface.preprocess(msg)
|
||||
prediction = self.predict(processed_input)
|
||||
processed_output = self.output_interface._post_process(prediction)
|
||||
processed_output = self.output_interface.postprocess(prediction)
|
||||
await websocket.send(str(processed_output))
|
||||
except websockets.exceptions.ConnectionClosed:
|
||||
pass
|
||||
# except Exception as e:
|
||||
# print(e)
|
||||
|
||||
def launch(self, share_link=False, verbose=True):
|
||||
def predict(self, preprocessed_input):
|
||||
"""
|
||||
Standard method shared by interfaces that launches a websocket at a specified IP address.
|
||||
Method that calls the relevant method of the model object to make a prediction.
|
||||
:param preprocessed_input: the preprocessed input returned by the input interface
|
||||
"""
|
||||
if self.model_type=='sklearn':
|
||||
return self.model_obj.predict(preprocessed_input)
|
||||
elif self.model_type=='keras':
|
||||
return self.model_obj.predict(preprocessed_input)
|
||||
elif self.model_type=='function':
|
||||
return self.model_obj(preprocessed_input)
|
||||
else:
|
||||
ValueError('model_type must be one of: {}'.format(self.VALID_MODEL_TYPES))
|
||||
|
||||
def launch(self, inline=None, browser=None, share=False):
|
||||
"""
|
||||
Standard method shared by interfaces that creates the interface and sets up a websocket to communicate with it.
|
||||
:param share: boolean. If True, then a share link is generated using ngrok is displayed to the user.
|
||||
"""
|
||||
output_directory = tempfile.mkdtemp()
|
||||
|
||||
# Set up a port to serve the directory containing the static files with interface.
|
||||
server_port = networking.start_simple_server(output_directory)
|
||||
path_to_server = 'http://localhost:{}/'.format(server_port)
|
||||
self._build_template(output_directory)
|
||||
networking.build_template(output_directory, self.input_interface, self.output_interface)
|
||||
|
||||
ports_in_use = networking.get_ports_in_use(INITIAL_WEBSOCKET_PORT, INITIAL_WEBSOCKET_PORT + TRY_NUM_PORTS)
|
||||
for i in range(TRY_NUM_PORTS):
|
||||
if not ((INITIAL_WEBSOCKET_PORT + i) in ports_in_use):
|
||||
break
|
||||
else:
|
||||
raise OSError("All ports from {} to {} are in use. Please close a port.".format(
|
||||
INITIAL_WEBSOCKET_PORT, INITIAL_WEBSOCKET_PORT + TRY_NUM_PORTS))
|
||||
|
||||
start_server = websockets.serve(self.communicate, LOCALHOST_IP, INITIAL_WEBSOCKET_PORT + i)
|
||||
self._set_socket_port_in_js(output_directory, INITIAL_WEBSOCKET_PORT + i)
|
||||
if verbose:
|
||||
# Set up a port to serve a websocket that sets up the communication between the front-end and model.
|
||||
websocket_port = networking.get_first_available_port(
|
||||
INITIAL_WEBSOCKET_PORT, INITIAL_WEBSOCKET_PORT + TRY_NUM_PORTS)
|
||||
start_server = websockets.serve(self.communicate, LOCALHOST_IP, websocket_port)
|
||||
networking.set_socket_port_in_js(output_directory, websocket_port) # sets the websocket port in the JS file.
|
||||
if self.verbose:
|
||||
print("NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu")
|
||||
print("Model available locally at: {}".format(path_to_server + TEMPLATE_TEMP))
|
||||
print("Model is running locally at: {}".format(path_to_server + networking.TEMPLATE_TEMP))
|
||||
|
||||
if share_link:
|
||||
networking.kill_processes([4040, 4041])
|
||||
site_ngrok_url = networking.setup_ngrok(server_port)
|
||||
socket_ngrok_url = networking.setup_ngrok(INITIAL_WEBSOCKET_PORT, api_url=networking.NGROK_TUNNELS_API_URL2)
|
||||
self._set_socket_url_in_js(output_directory, socket_ngrok_url)
|
||||
if verbose:
|
||||
print("Model available publicly for 8 hours at: {}".format(site_ngrok_url + '/' + TEMPLATE_TEMP))
|
||||
if share:
|
||||
site_ngrok_url = networking.setup_ngrok(server_port, websocket_port, output_directory)
|
||||
if self.verbose:
|
||||
print("Model available publicly for 8 hours at: {}".format(
|
||||
site_ngrok_url + '/' + networking.TEMPLATE_TEMP))
|
||||
else:
|
||||
if verbose:
|
||||
print("To create a public link, set `share_link=True` in the argument to `launch()`")
|
||||
if self.verbose:
|
||||
print("To create a public link, set `share=True` in the argument to `launch()`")
|
||||
site_ngrok_url = None
|
||||
|
||||
# Keep the server running in the background.
|
||||
asyncio.get_event_loop().run_until_complete(start_server)
|
||||
try:
|
||||
asyncio.get_event_loop().run_forever()
|
||||
except RuntimeError: # Runtime errors are thrown in jupyter notebooks because of async.
|
||||
pass
|
||||
|
||||
webbrowser.open(path_to_server + TEMPLATE_TEMP)
|
||||
if inline is None:
|
||||
try: # Check if running interactively using ipython.
|
||||
_ = get_ipython()
|
||||
inline = True
|
||||
if browser is None:
|
||||
browser = False
|
||||
except NameError:
|
||||
inline = False
|
||||
if browser is None:
|
||||
browser = True
|
||||
else:
|
||||
if browser is None:
|
||||
browser = False
|
||||
if browser:
|
||||
webbrowser.open(path_to_server + networking.TEMPLATE_TEMP) # Open a browser tab with the interface.
|
||||
if inline:
|
||||
from IPython.display import IFrame
|
||||
display(IFrame(path_to_server + networking.TEMPLATE_TEMP, width=1000, height=500))
|
||||
|
||||
return path_to_server + networking.TEMPLATE_TEMP, site_ngrok_url
|
||||
@ -1,3 +1,7 @@
|
||||
'''
|
||||
Defines helper methods useful for setting up ports, launching servers, and handling `ngrok`
|
||||
'''
|
||||
|
||||
import subprocess
|
||||
import requests
|
||||
import zipfile
|
||||
@ -5,21 +9,31 @@ import io
|
||||
import sys
|
||||
import os
|
||||
import socket
|
||||
from psutil import process_iter, AccessDenied
|
||||
from psutil import process_iter, AccessDenied, NoSuchProcess
|
||||
from signal import SIGTERM # or SIGKILL
|
||||
import threading
|
||||
from http.server import HTTPServer as BaseHTTPServer, SimpleHTTPRequestHandler
|
||||
import stat
|
||||
from requests.adapters import HTTPAdapter
|
||||
from requests.packages.urllib3.util.retry import Retry
|
||||
import pkg_resources
|
||||
from bs4 import BeautifulSoup
|
||||
from distutils import dir_util
|
||||
|
||||
INITIAL_PORT_VALUE = 7860
|
||||
TRY_NUM_PORTS = 100
|
||||
INITIAL_PORT_VALUE = 7860 # The http server will try to open on port 7860. If not available, 7861, 7862, etc.
|
||||
TRY_NUM_PORTS = 100 # Number of ports to try before giving up and throwing an exception.
|
||||
LOCALHOST_NAME = 'localhost'
|
||||
LOCALHOST_PREFIX = 'localhost:'
|
||||
NGROK_TUNNELS_API_URL = "http://localhost:4040/api/tunnels" # TODO(this should be captured from output)
|
||||
NGROK_TUNNELS_API_URL2 = "http://localhost:4041/api/tunnels" # TODO(this should be captured from output)
|
||||
|
||||
|
||||
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'
|
||||
BASE_JS_FILE = 'static/js/all-io.js'
|
||||
|
||||
|
||||
NGROK_ZIP_URLS = {
|
||||
"linux": "https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip",
|
||||
"darwin": "https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip",
|
||||
@ -27,48 +41,83 @@ NGROK_ZIP_URLS = {
|
||||
}
|
||||
|
||||
|
||||
def get_ports_in_use(start, stop):
|
||||
ports_in_use = []
|
||||
for port in range(start, stop):
|
||||
def build_template(temp_dir, input_interface, output_interface):
|
||||
"""
|
||||
Builds a complete HTML template with supporting JS and CSS files in a given directory.
|
||||
:param temp_dir: string with path to temp directory in which the template should be built
|
||||
:param input_interface: an AbstractInput object which includes is used to get the input template
|
||||
:param output_interface: an AbstractInput object which includes is used to get the input template
|
||||
"""
|
||||
input_template_path = pkg_resources.resource_filename('gradio', input_interface.get_template_path())
|
||||
output_template_path = pkg_resources.resource_filename('gradio', output_interface.get_template_path())
|
||||
input_page = open(input_template_path)
|
||||
output_page = open(output_template_path)
|
||||
input_soup = BeautifulSoup(input_page.read(), features="html.parser")
|
||||
output_soup = BeautifulSoup(output_page.read(), features="html.parser")
|
||||
|
||||
all_io_page = open(BASE_TEMPLATE)
|
||||
all_io_soup = BeautifulSoup(all_io_page.read(), features="html.parser")
|
||||
input_tag = all_io_soup.find("div", {"id": "input"})
|
||||
output_tag = all_io_soup.find("div", {"id": "output"})
|
||||
|
||||
input_tag.replace_with(input_soup)
|
||||
output_tag.replace_with(output_soup)
|
||||
|
||||
f = open(os.path.join(temp_dir, TEMPLATE_TEMP), "w")
|
||||
f.write(str(all_io_soup))
|
||||
|
||||
copy_files(STATIC_PATH_LIB, os.path.join(temp_dir, STATIC_PATH_TEMP))
|
||||
|
||||
|
||||
def copy_files(src_dir, dest_dir):
|
||||
"""
|
||||
Copies all the files from one directory to another
|
||||
:param src_dir: string path to source directory
|
||||
:param dest_dir: string path to destination directory
|
||||
"""
|
||||
dir_util.copy_tree(src_dir, dest_dir)
|
||||
|
||||
|
||||
#TODO(abidlabs): Handle the http vs. https issue that sometimes happens (a ws cannot be loaded from an https page)
|
||||
def set_socket_url_in_js(temp_dir, socket_url):
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
|
||||
lines = fin.readlines()
|
||||
lines[0] = 'var NGROK_URL = "{}"\n'.format(socket_url.replace('http', 'ws'))
|
||||
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
|
||||
for line in lines:
|
||||
fout.write(line)
|
||||
|
||||
|
||||
def set_socket_port_in_js(temp_dir, socket_port):
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
|
||||
lines = fin.readlines()
|
||||
lines[1] = 'var SOCKET_PORT = {}\n'.format(socket_port)
|
||||
|
||||
with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
|
||||
for line in lines:
|
||||
fout.write(line)
|
||||
|
||||
|
||||
def get_first_available_port(initial, final):
|
||||
"""
|
||||
Gets the first open port in a specified range of port numbers
|
||||
:param initial: the initial value in the range of port numbers
|
||||
:param final: final (exclusive) value in the range of port numbers, should be greater than `initial`
|
||||
:return:
|
||||
"""
|
||||
for port in range(initial, final):
|
||||
try:
|
||||
s = socket.socket() # create a socket object
|
||||
s.bind((LOCALHOST_NAME, port)) # Bind to the port
|
||||
s.close()
|
||||
return port
|
||||
except OSError:
|
||||
ports_in_use.append(port)
|
||||
return ports_in_use
|
||||
# ports_in_use = []
|
||||
# try:
|
||||
# for proc in process_iter():
|
||||
# for conns in proc.connections(kind='inet'):
|
||||
# ports_in_use.append(conns.laddr.port)
|
||||
# except AccessDenied:
|
||||
# pass # TODO(abidlabs): somehow find a way to handle this issue?
|
||||
# return ports_in_use
|
||||
pass
|
||||
raise OSError("All ports from {} to {} are in use. Please close a port.".format(initial, final))
|
||||
|
||||
|
||||
def serve_files_in_background(port, directory_to_serve=None):
|
||||
# class Handler(http.server.SimpleHTTPRequestHandler):
|
||||
# def __init__(self, *args, **kwargs):
|
||||
# super().__init__(*args, directory=directory_to_serve, **kwargs)
|
||||
#
|
||||
# server = socketserver.ThreadingTCPServer(('localhost', port), Handler)
|
||||
# # Ensures that Ctrl-C cleanly kills all spawned threads
|
||||
# server.daemon_threads = True
|
||||
# # Quicker rebinding
|
||||
# server.allow_reuse_address = True
|
||||
#
|
||||
# # A custom signal handle to allow us to Ctrl-C out of the process
|
||||
# def signal_handler(signal, frame):
|
||||
# print('Exiting http server (Ctrl+C pressed)')
|
||||
# try:
|
||||
# if (server):
|
||||
# server.server_close()
|
||||
# finally:
|
||||
# sys.exit(0)
|
||||
#
|
||||
# # Install the keyboard interrupt handler
|
||||
# signal.signal(signal.SIGINT, signal_handler)
|
||||
class HTTPHandler(SimpleHTTPRequestHandler):
|
||||
"""This handler uses server.base_path instead of always using os.getcwd()"""
|
||||
|
||||
@ -101,21 +150,9 @@ def serve_files_in_background(port, directory_to_serve=None):
|
||||
|
||||
|
||||
def start_simple_server(directory_to_serve=None):
|
||||
# TODO(abidlabs): increment port number until free port is found
|
||||
ports_in_use = get_ports_in_use(start=INITIAL_PORT_VALUE, stop=INITIAL_PORT_VALUE + TRY_NUM_PORTS)
|
||||
for i in range(TRY_NUM_PORTS):
|
||||
if not((INITIAL_PORT_VALUE + i) in ports_in_use):
|
||||
break
|
||||
else:
|
||||
raise OSError("All ports from {} to {} are in use. Please close a port.".format(
|
||||
INITIAL_PORT_VALUE, INITIAL_PORT_VALUE + TRY_NUM_PORTS))
|
||||
serve_files_in_background(INITIAL_PORT_VALUE + i, directory_to_serve)
|
||||
# if directory_to_serve is None:
|
||||
# subprocess.Popen(['python', '-m', 'http.server', str(INITIAL_PORT_VALUE + i)])
|
||||
# else:
|
||||
# cmd = ' '.join(['python', '-m', 'http.server', '-d', directory_to_serve, str(INITIAL_PORT_VALUE + i)])
|
||||
# subprocess.Popen(cmd, shell=True) # Doesn't seem to work if list is passed for some reason.
|
||||
return INITIAL_PORT_VALUE + i
|
||||
port = get_first_available_port(INITIAL_PORT_VALUE, INITIAL_PORT_VALUE + TRY_NUM_PORTS)
|
||||
serve_files_in_background(port, directory_to_serve)
|
||||
return port
|
||||
|
||||
|
||||
def download_ngrok():
|
||||
@ -133,7 +170,7 @@ def download_ngrok():
|
||||
os.chmod('ngrok', st.st_mode | stat.S_IEXEC)
|
||||
|
||||
|
||||
def setup_ngrok(local_port, api_url=NGROK_TUNNELS_API_URL):
|
||||
def create_ngrok_tunnel(local_port, api_url):
|
||||
if not(os.path.isfile('ngrok.exe') or os.path.isfile('ngrok')):
|
||||
download_ngrok()
|
||||
if sys.platform == 'win32':
|
||||
@ -147,18 +184,26 @@ def setup_ngrok(local_port, api_url=NGROK_TUNNELS_API_URL):
|
||||
session.mount('https://', adapter)
|
||||
r = session.get(api_url)
|
||||
for tunnel in r.json()['tunnels']:
|
||||
if LOCALHOST_PREFIX + str(local_port) in tunnel['config']['addr']:
|
||||
if '{}:'.format(LOCALHOST_NAME) + str(local_port) in tunnel['config']['addr']:
|
||||
return tunnel['public_url']
|
||||
raise RuntimeError("Not able to retrieve ngrok public URL")
|
||||
|
||||
|
||||
def kill_processes(process_ids):
|
||||
def setup_ngrok(server_port, websocket_port, output_directory):
|
||||
kill_processes([4040, 4041]) #TODO(abidlabs): better way to do this
|
||||
site_ngrok_url = create_ngrok_tunnel(server_port, NGROK_TUNNELS_API_URL)
|
||||
socket_ngrok_url = create_ngrok_tunnel(websocket_port, NGROK_TUNNELS_API_URL2)
|
||||
set_socket_url_in_js(output_directory, socket_ngrok_url)
|
||||
return site_ngrok_url
|
||||
|
||||
|
||||
def kill_processes(process_ids): #TODO(abidlabs): remove this, we shouldn't need to kill
|
||||
for proc in process_iter():
|
||||
try:
|
||||
for conns in proc.connections(kind='inet'):
|
||||
if conns.laddr.port in process_ids:
|
||||
proc.send_signal(SIGTERM) # or SIGKILL
|
||||
except AccessDenied:
|
||||
except (AccessDenied, NoSuchProcess):
|
||||
pass
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
"""
|
||||
This module defines various classes that can serve as the `output` to an interface. Each class must inherit from
|
||||
`AbstractOutput`, and each class must define a path to its template. All of the subclasses of `AbstractOutput` are
|
||||
automatically added to a registry, which allows them to be easily referenced in other parts of the code.
|
||||
"""
|
||||
|
||||
from abc import ABC, abstractmethod
|
||||
import numpy as np
|
||||
import json
|
||||
from gradio import imagenet_class_labels
|
||||
|
||||
class AbstractOutput(ABC):
|
||||
"""
|
||||
@ -9,52 +17,86 @@ class AbstractOutput(ABC):
|
||||
|
||||
def __init__(self, postprocessing_fn=None):
|
||||
"""
|
||||
:param postprocessing_fn: an optional postprocessing function that overrides the default
|
||||
"""
|
||||
if postprocessing_fn is not None:
|
||||
self._post_process = postprocessing_fn
|
||||
self.postprocess = postprocessing_fn
|
||||
super().__init__()
|
||||
|
||||
@abstractmethod
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
"""
|
||||
All interfaces should define a method that returns the path to its template.
|
||||
"""
|
||||
pass
|
||||
|
||||
@abstractmethod
|
||||
def _post_process(self):
|
||||
def postprocess(self, prediction):
|
||||
"""
|
||||
All interfaces should define a method that returns the path to its template.
|
||||
All interfaces should define a default postprocessing method
|
||||
"""
|
||||
pass
|
||||
|
||||
|
||||
class Class(AbstractOutput):
|
||||
class Label(AbstractOutput):
|
||||
LABEL_KEY = 'label'
|
||||
CONFIDENCES_KEY = 'confidences'
|
||||
CONFIDENCE_KEY = 'confidence'
|
||||
|
||||
def _get_template_path(self):
|
||||
return 'templates/class_output.html'
|
||||
def __init__(self, postprocessing_fn=None, num_top_classes=3, show_confidences=True, label_names=None,
|
||||
max_label_length=None):
|
||||
self.num_top_classes = num_top_classes
|
||||
self.show_confidences = show_confidences
|
||||
self.label_names = label_names
|
||||
self.max_label_length = max_label_length
|
||||
super().__init__(postprocessing_fn=postprocessing_fn)
|
||||
|
||||
def _post_process(self, prediction):
|
||||
def get_label_name(self, label):
|
||||
if self.label_names is None:
|
||||
name = label
|
||||
elif self.label_names == 'imagenet1000':
|
||||
name = imagenet_class_labels.NAMES1000[label]
|
||||
else: # if list or dictionary
|
||||
name = self.label_names[label]
|
||||
if self.max_label_length is not None:
|
||||
name = name[:self.max_label_length]
|
||||
return name
|
||||
|
||||
def get_template_path(self):
|
||||
return 'templates/label_output.html'
|
||||
|
||||
def postprocess(self, prediction):
|
||||
"""
|
||||
"""
|
||||
response = dict()
|
||||
# TODO(abidlabs): check if list, if so convert to numpy array
|
||||
if isinstance(prediction, np.ndarray):
|
||||
prediction = prediction.squeeze()
|
||||
if prediction.size == 1:
|
||||
return prediction
|
||||
else:
|
||||
return prediction.argmax()
|
||||
if prediction.size == 1: # if it's single value
|
||||
response[Label.LABEL_KEY] = self.get_label_name(np.asscalar(prediction))
|
||||
elif len(prediction.shape) == 1: # if a 1D
|
||||
response[Label.LABEL_KEY] = self.get_label_name(int(prediction.argmax()))
|
||||
if self.show_confidences:
|
||||
response[Label.CONFIDENCES_KEY] = []
|
||||
for i in range(self.num_top_classes):
|
||||
response[Label.CONFIDENCES_KEY].append({
|
||||
Label.LABEL_KEY: self.get_label_name(int(prediction.argmax())),
|
||||
Label.CONFIDENCE_KEY: float(prediction.max()),
|
||||
})
|
||||
prediction[prediction.argmax()] = 0
|
||||
elif isinstance(prediction, str):
|
||||
return prediction
|
||||
response[Label.LABEL_KEY] = prediction
|
||||
else:
|
||||
raise ValueError("Unable to post-process model prediction.")
|
||||
return json.dumps(response)
|
||||
|
||||
|
||||
class Textbox(AbstractOutput):
|
||||
|
||||
def _get_template_path(self):
|
||||
def get_template_path(self):
|
||||
return 'templates/textbox_output.html'
|
||||
|
||||
def _post_process(self, prediction):
|
||||
def postprocess(self, prediction):
|
||||
"""
|
||||
"""
|
||||
return prediction
|
||||
|
||||
BIN
build/lib/gradio/static/css/.DS_Store
vendored
Normal file
BIN
build/lib/gradio/static/css/.DS_Store
vendored
Normal file
Binary file not shown.
134
build/lib/gradio/static/css/gradio.css
Normal file
134
build/lib/gradio/static/css/gradio.css
Normal file
@ -0,0 +1,134 @@
|
||||
.panel {
|
||||
display: inline-block;
|
||||
max-width: 45%;
|
||||
min-width: 300px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.panel {
|
||||
margin: 0 14px 14px;
|
||||
}
|
||||
.instructions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.input, .output {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-color: #F6F6F6;
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.role {
|
||||
text-transform: uppercase;
|
||||
font-family: Arial;
|
||||
color: #BBB;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.input.text .role, .output.text .role {
|
||||
margin-left: 1px;
|
||||
}
|
||||
.submit, .clear {
|
||||
padding: 8px !important;
|
||||
box-sizing: border-box;
|
||||
width: calc(50% - 8px);
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
.clear {
|
||||
background-color: #F6F6F6 !important;
|
||||
}
|
||||
.submit {
|
||||
background-color: #EEA45D !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.clear {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.input_text, .output_text {
|
||||
background: transparent;
|
||||
resize: none;
|
||||
border: 0 none;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.input_image, .input_audio, .input_snapshot, .input_mic, .output_class,
|
||||
.output_image {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.input_image, .input_audio, .input_snapshot, .input_mic {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #BBB;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input_image img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.hidden_upload {
|
||||
display: none;
|
||||
}
|
||||
.output_class {
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
}
|
||||
.drop_mode {
|
||||
border: dashed 8px #DDD;
|
||||
}
|
||||
.input_image, .input_audio {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.input_snapshot, .input_mic {
|
||||
flex-direction: column;
|
||||
}
|
||||
.input_snapshot .webcam, .input_mic .mic {
|
||||
height: 80px;
|
||||
}
|
||||
.output_image img {
|
||||
width: 100%; /* or any custom size */
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.confidence_intervals {
|
||||
font-size: 16px;
|
||||
}
|
||||
.confidence {
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
}
|
||||
.level, .label {
|
||||
display: inline-block;
|
||||
}
|
||||
.label {
|
||||
width: 60px;
|
||||
}
|
||||
.confidence_intervals .level {
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #AAA;
|
||||
padding: 2px 4px;
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.confidence_intervals > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
37
build/lib/gradio/static/css/style.css
Normal file
37
build/lib/gradio/static/css/style.css
Normal file
@ -0,0 +1,37 @@
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"] {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
body > div, body > nav {
|
||||
margin-left: 60px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
padding: 16px 0 8px;
|
||||
}
|
||||
nav img {
|
||||
margin-right: auto;
|
||||
height: 32px;
|
||||
}
|
||||
#panels {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.panel {
|
||||
min-width: 300px;
|
||||
margin: 40px 0 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
BIN
build/lib/gradio/static/img/logo.png
Normal file
BIN
build/lib/gradio/static/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
build/lib/gradio/static/img/logo_inline.png
Normal file
BIN
build/lib/gradio/static/img/logo_inline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
build/lib/gradio/static/img/mic.png
Normal file
BIN
build/lib/gradio/static/img/mic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
build/lib/gradio/static/img/webcam.png
Normal file
BIN
build/lib/gradio/static/img/webcam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
28
build/lib/gradio/static/js/all-io.js
Normal file
28
build/lib/gradio/static/js/all-io.js
Normal file
@ -0,0 +1,28 @@
|
||||
var NGROK_URL = "ws://0f9bffb5.ngrok.io"
|
||||
var SOCKET_PORT = 9200
|
||||
|
||||
try {
|
||||
var origin = window.location.origin;
|
||||
if (origin.includes("ngrok")){
|
||||
var ws = new WebSocket(NGROK_URL)
|
||||
} else {
|
||||
var ws = new WebSocket("ws://127.0.0.1:" + SOCKET_PORT + "/")
|
||||
}
|
||||
ws.onerror = function(evt) {
|
||||
console.log(evt)
|
||||
};
|
||||
ws.onclose = function(event) {
|
||||
console.log("WebSocket is closed now.");
|
||||
var model_status = $('#model-status')
|
||||
model_status.html('Model: closed');
|
||||
model_status.css('color', '#e23e44');
|
||||
$('#overlay').css('visibility','visible')
|
||||
};
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
const sleep = (milliseconds) => {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds))
|
||||
}
|
||||
255
build/lib/gradio/static/js/audio-input.js
Normal file
255
build/lib/gradio/static/js/audio-input.js
Normal file
@ -0,0 +1,255 @@
|
||||
import InlineWorker from 'inline-worker';
|
||||
|
||||
export class Recorder {
|
||||
config = {
|
||||
bufferLen: 4096,
|
||||
numChannels: 2,
|
||||
mimeType: 'audio/wav'
|
||||
};
|
||||
|
||||
recording = false;
|
||||
|
||||
callbacks = {
|
||||
getBuffer: [],
|
||||
exportWAV: []
|
||||
};
|
||||
|
||||
constructor(source, cfg) {
|
||||
Object.assign(this.config, cfg);
|
||||
this.context = source.context;
|
||||
this.node = (this.context.createScriptProcessor ||
|
||||
this.context.createJavaScriptNode).call(this.context,
|
||||
this.config.bufferLen, this.config.numChannels, this.config.numChannels);
|
||||
|
||||
this.node.onaudioprocess = (e) => {
|
||||
if (!this.recording) return;
|
||||
|
||||
var buffer = [];
|
||||
for (var channel = 0; channel < this.config.numChannels; channel++) {
|
||||
buffer.push(e.inputBuffer.getChannelData(channel));
|
||||
}
|
||||
this.worker.postMessage({
|
||||
command: 'record',
|
||||
buffer: buffer
|
||||
});
|
||||
};
|
||||
|
||||
source.connect(this.node);
|
||||
this.node.connect(this.context.destination); //this should not be necessary
|
||||
|
||||
let self = {};
|
||||
this.worker = new InlineWorker(function () {
|
||||
let recLength = 0,
|
||||
recBuffers = [],
|
||||
sampleRate,
|
||||
numChannels;
|
||||
|
||||
this.onmessage = function (e) {
|
||||
switch (e.data.command) {
|
||||
case 'init':
|
||||
init(e.data.config);
|
||||
break;
|
||||
case 'record':
|
||||
record(e.data.buffer);
|
||||
break;
|
||||
case 'exportWAV':
|
||||
exportWAV(e.data.type);
|
||||
break;
|
||||
case 'getBuffer':
|
||||
getBuffer();
|
||||
break;
|
||||
case 'clear':
|
||||
clear();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function init(config) {
|
||||
sampleRate = config.sampleRate;
|
||||
numChannels = config.numChannels;
|
||||
initBuffers();
|
||||
}
|
||||
|
||||
function record(inputBuffer) {
|
||||
for (var channel = 0; channel < numChannels; channel++) {
|
||||
recBuffers[channel].push(inputBuffer[channel]);
|
||||
}
|
||||
recLength += inputBuffer[0].length;
|
||||
}
|
||||
|
||||
function exportWAV(type) {
|
||||
let buffers = [];
|
||||
for (let channel = 0; channel < numChannels; channel++) {
|
||||
buffers.push(mergeBuffers(recBuffers[channel], recLength));
|
||||
}
|
||||
let interleaved;
|
||||
if (numChannels === 2) {
|
||||
interleaved = interleave(buffers[0], buffers[1]);
|
||||
} else {
|
||||
interleaved = buffers[0];
|
||||
}
|
||||
let dataview = encodeWAV(interleaved);
|
||||
let audioBlob = new Blob([dataview], {type: type});
|
||||
|
||||
this.postMessage({command: 'exportWAV', data: audioBlob});
|
||||
}
|
||||
|
||||
function getBuffer() {
|
||||
let buffers = [];
|
||||
for (let channel = 0; channel < numChannels; channel++) {
|
||||
buffers.push(mergeBuffers(recBuffers[channel], recLength));
|
||||
}
|
||||
this.postMessage({command: 'getBuffer', data: buffers});
|
||||
}
|
||||
|
||||
function clear() {
|
||||
recLength = 0;
|
||||
recBuffers = [];
|
||||
initBuffers();
|
||||
}
|
||||
|
||||
function initBuffers() {
|
||||
for (let channel = 0; channel < numChannels; channel++) {
|
||||
recBuffers[channel] = [];
|
||||
}
|
||||
}
|
||||
|
||||
function mergeBuffers(recBuffers, recLength) {
|
||||
let result = new Float32Array(recLength);
|
||||
let offset = 0;
|
||||
for (let i = 0; i < recBuffers.length; i++) {
|
||||
result.set(recBuffers[i], offset);
|
||||
offset += recBuffers[i].length;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function interleave(inputL, inputR) {
|
||||
let length = inputL.length + inputR.length;
|
||||
let result = new Float32Array(length);
|
||||
|
||||
let index = 0,
|
||||
inputIndex = 0;
|
||||
|
||||
while (index < length) {
|
||||
result[index++] = inputL[inputIndex];
|
||||
result[index++] = inputR[inputIndex];
|
||||
inputIndex++;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function floatTo16BitPCM(output, offset, input) {
|
||||
for (let i = 0; i < input.length; i++, offset += 2) {
|
||||
let s = Math.max(-1, Math.min(1, input[i]));
|
||||
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
|
||||
}
|
||||
}
|
||||
|
||||
function writeString(view, offset, string) {
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
view.setUint8(offset + i, string.charCodeAt(i));
|
||||
}
|
||||
}
|
||||
|
||||
function encodeWAV(samples) {
|
||||
let buffer = new ArrayBuffer(44 + samples.length * 2);
|
||||
let view = new DataView(buffer);
|
||||
|
||||
/* RIFF identifier */
|
||||
writeString(view, 0, 'RIFF');
|
||||
/* RIFF chunk length */
|
||||
view.setUint32(4, 36 + samples.length * 2, true);
|
||||
/* RIFF type */
|
||||
writeString(view, 8, 'WAVE');
|
||||
/* format chunk identifier */
|
||||
writeString(view, 12, 'fmt ');
|
||||
/* format chunk length */
|
||||
view.setUint32(16, 16, true);
|
||||
/* sample format (raw) */
|
||||
view.setUint16(20, 1, true);
|
||||
/* channel count */
|
||||
view.setUint16(22, numChannels, true);
|
||||
/* sample rate */
|
||||
view.setUint32(24, sampleRate, true);
|
||||
/* byte rate (sample rate * block align) */
|
||||
view.setUint32(28, sampleRate * 4, true);
|
||||
/* block align (channel count * bytes per sample) */
|
||||
view.setUint16(32, numChannels * 2, true);
|
||||
/* bits per sample */
|
||||
view.setUint16(34, 16, true);
|
||||
/* data chunk identifier */
|
||||
writeString(view, 36, 'data');
|
||||
/* data chunk length */
|
||||
view.setUint32(40, samples.length * 2, true);
|
||||
|
||||
floatTo16BitPCM(view, 44, samples);
|
||||
|
||||
return view;
|
||||
}
|
||||
}, self);
|
||||
|
||||
this.worker.postMessage({
|
||||
command: 'init',
|
||||
config: {
|
||||
sampleRate: this.context.sampleRate,
|
||||
numChannels: this.config.numChannels
|
||||
}
|
||||
});
|
||||
|
||||
this.worker.onmessage = (e) => {
|
||||
let cb = this.callbacks[e.data.command].pop();
|
||||
if (typeof cb == 'function') {
|
||||
cb(e.data.data);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
record() {
|
||||
this.recording = true;
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.recording = false;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.worker.postMessage({command: 'clear'});
|
||||
}
|
||||
|
||||
getBuffer(cb) {
|
||||
cb = cb || this.config.callback;
|
||||
if (!cb) throw new Error('Callback not set');
|
||||
|
||||
this.callbacks.getBuffer.push(cb);
|
||||
|
||||
this.worker.postMessage({command: 'getBuffer'});
|
||||
}
|
||||
|
||||
exportWAV(cb, mimeType) {
|
||||
mimeType = mimeType || this.config.mimeType;
|
||||
cb = cb || this.config.callback;
|
||||
if (!cb) throw new Error('Callback not set');
|
||||
|
||||
this.callbacks.exportWAV.push(cb);
|
||||
|
||||
this.worker.postMessage({
|
||||
command: 'exportWAV',
|
||||
type: mimeType
|
||||
});
|
||||
}
|
||||
|
||||
static
|
||||
forceDownload(blob, filename) {
|
||||
let url = (window.URL || window.webkitURL).createObjectURL(blob);
|
||||
let link = window.document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename || 'output.wav';
|
||||
let click = document.createEvent("Event");
|
||||
click.initEvent("click", true, true);
|
||||
link.dispatchEvent(click);
|
||||
}
|
||||
}
|
||||
|
||||
export default Recorder;
|
||||
63
build/lib/gradio/static/js/class-output.js
Normal file
63
build/lib/gradio/static/js/class-output.js
Normal file
@ -0,0 +1,63 @@
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
sleep(300).then(() => {
|
||||
// $(".output_class").text(event.data);
|
||||
var data = JSON.parse(event.data)
|
||||
// data = {
|
||||
// label: "happy",
|
||||
// confidences : [
|
||||
// {
|
||||
// label : "happy",
|
||||
// confidence: 0.7
|
||||
// },
|
||||
// {
|
||||
// label : "sad",
|
||||
// confidence: 0.3
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
$(".output_class").text(data["label"])
|
||||
$(".confidence_intervals").empty()
|
||||
if ("confidences" in data) {
|
||||
data["confidences"].forEach(function (c) {
|
||||
var confidence = c["confidence"]
|
||||
$(".confidence_intervals").append(`<div class="confidence"><div class=
|
||||
"label">${c["label"]}</div><div class="level" style="flex-grow:
|
||||
${confidence}">${Math.round(confidence * 100)}%</div></div>`)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
|
||||
$('body').on('click', '.clear', function(e) {
|
||||
$(".output_class").text("")
|
||||
$(".confidence_intervals").empty()
|
||||
})
|
||||
128
build/lib/gradio/static/js/draw-a-digit.js
Normal file
128
build/lib/gradio/static/js/draw-a-digit.js
Normal file
@ -0,0 +1,128 @@
|
||||
var canvas = document.getElementById('canvas');
|
||||
context = canvas.getContext("2d");
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
var predict_canvas = document.getElementById("predict_canvas");
|
||||
var ctx = predict_canvas.getContext("2d");
|
||||
|
||||
const sleep = (milliseconds) => {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds))
|
||||
}
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
var ws = new WebSocket("ws://127.0.0.1:5679/")
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
console.log(event.data);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
ctx.font = "330px Arial";
|
||||
ctx.fillStyle = "white";
|
||||
sleep(300).then(() => {
|
||||
ctx.fillText(event.data, 110, 310);
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
$('#canvas').mousedown(function(e){
|
||||
var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
|
||||
var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
;
|
||||
|
||||
paint = true;
|
||||
addClick(mouseX, mouseY);
|
||||
redraw();
|
||||
});
|
||||
$('#canvas').mousemove(function(e){
|
||||
if(paint){
|
||||
addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
|
||||
redraw();
|
||||
}
|
||||
});
|
||||
$('#canvas').mouseup(function(e){
|
||||
paint = false;
|
||||
});
|
||||
$('#canvas').mouseleave(function(e){
|
||||
paint = false;
|
||||
});
|
||||
var clickX = new Array();
|
||||
var clickY = new Array();
|
||||
var clickDrag = new Array();
|
||||
var paint;
|
||||
|
||||
function addClick(x, y, dragging)
|
||||
{
|
||||
clickX.push(x);
|
||||
clickY.push(y);
|
||||
clickDrag.push(dragging);
|
||||
}
|
||||
function redraw(){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
context.strokeStyle = "#FFF";
|
||||
context.lineJoin = "round";
|
||||
context.lineWidth = 25;
|
||||
|
||||
for(var i=0; i < clickX.length; i++) {
|
||||
context.beginPath();
|
||||
if(clickDrag[i] && i){
|
||||
context.moveTo(clickX[i-1], clickY[i-1]);
|
||||
}else{
|
||||
context.moveTo(clickX[i]-1, clickY[i]);
|
||||
}
|
||||
context.lineTo(clickX[i], clickY[i]);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
180
build/lib/gradio/static/js/emotion-detector.js
Normal file
180
build/lib/gradio/static/js/emotion-detector.js
Normal file
@ -0,0 +1,180 @@
|
||||
videoWidth = 400;
|
||||
videoHeight = 400;
|
||||
|
||||
function isAndroid() {
|
||||
return /Android/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function isiOS() {
|
||||
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function isMobile() {
|
||||
return isAndroid() || isiOS();
|
||||
}
|
||||
|
||||
var predict_canvas = document.getElementById("predict_canvas");
|
||||
var predict_ctx = predict_canvas.getContext("2d");
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
|
||||
const sleep = (milliseconds) => {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds))
|
||||
}
|
||||
|
||||
async function setupCamera() {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
throw new Error(
|
||||
'Browser API navigator.mediaDevices.getUserMedia not available');
|
||||
}
|
||||
|
||||
const video = document.getElementById('video');
|
||||
video.width = videoWidth;
|
||||
video.height = videoHeight;
|
||||
|
||||
|
||||
const mobile = isMobile();
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
'audio': false,
|
||||
'video': {
|
||||
facingMode: 'user',
|
||||
width: mobile ? undefined : videoWidth,
|
||||
height: mobile ? undefined : videoHeight,
|
||||
},
|
||||
});
|
||||
|
||||
video.srcObject = stream;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
video.onloadedmetadata = () => {
|
||||
resolve(video);
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async function loadVideo() {
|
||||
const video = await setupCamera();
|
||||
video.play();
|
||||
|
||||
return video;
|
||||
}
|
||||
|
||||
function detectPoseInRealTime(video) {
|
||||
const flipHorizontal = true;
|
||||
async function poseDetectionFrame() {
|
||||
|
||||
ctx.clearRect(0, 0, videoWidth, videoHeight);
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-videoWidth, 0);
|
||||
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
ctx.restore();
|
||||
|
||||
requestAnimationFrame(poseDetectionFrame);
|
||||
|
||||
}
|
||||
|
||||
poseDetectionFrame();
|
||||
}
|
||||
|
||||
async function bindPage() {
|
||||
|
||||
let video;
|
||||
|
||||
try {
|
||||
video = await loadVideo();
|
||||
} catch (e) {
|
||||
let info = document.getElementById('info');
|
||||
info.textContent = 'this browser does not support video capture,' +
|
||||
'or this device does not have a camera';
|
||||
info.style.display = 'block';
|
||||
throw e;
|
||||
}
|
||||
|
||||
detectPoseInRealTime(video);
|
||||
|
||||
}
|
||||
|
||||
navigator.getUserMedia = navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||
// kick off the demo
|
||||
bindPage();
|
||||
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
var ws = new WebSocket("ws://127.0.0.1:5679/")
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
var emotion_dict = {0: "Angry", 1: "Disgust", 2: "Fear", 3: "Happy", 4: "Sad", 5: "Surprise", 6: "Neutral"}
|
||||
console.log(event.data);
|
||||
predict_ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Clears the canvas
|
||||
predict_ctx.font = "60px Arial";
|
||||
predict_ctx.fillStyle = "white";
|
||||
sleep(300).then(() => {
|
||||
// predict_ctx.fillText(emotion_dict[event.data], 110, 310);
|
||||
predict_ctx.textAlign = "center";
|
||||
predict_ctx.fillText(emotion_dict[event.data], 200, 200);
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
$('#capture-button').click(function(e){
|
||||
ctx.clearRect(0, 0, videoWidth, videoHeight);
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-videoWidth, 0);
|
||||
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
ctx.restore();
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
})
|
||||
60
build/lib/gradio/static/js/image-upload-input.js
Normal file
60
build/lib/gradio/static/js/image-upload-input.js
Normal file
@ -0,0 +1,60 @@
|
||||
// var cropper;
|
||||
|
||||
$('body').on('click', ".input_image.drop_mode", function (e) {
|
||||
$(this).parent().find(".hidden_upload").click();
|
||||
})
|
||||
|
||||
$('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_image.drop_mode", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
|
||||
function loadPreviewFromFiles(files) {
|
||||
var ReaderObj = new FileReader()
|
||||
ReaderObj.readAsDataURL(files[0])
|
||||
ReaderObj.onloadend = function() {
|
||||
$(".input_caption").hide()
|
||||
$(".input_image").removeClass("drop_mode")
|
||||
var image = $(".input_image img")
|
||||
image.attr("src", this.result)
|
||||
// image.cropper({aspectRatio : 1.0});
|
||||
// if (!cropper) {
|
||||
// cropper = image.data('cropper');
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
$(".input_image").on('drop', function(e) {
|
||||
files = e.originalEvent.dataTransfer.files;
|
||||
loadPreviewFromFiles(files)
|
||||
});
|
||||
|
||||
$(".hidden_upload").on("change", function() {
|
||||
var files = !!this.files ? this.files : []
|
||||
if (!files.length || !window.FileReader) {
|
||||
return
|
||||
}
|
||||
if (/^image/.test(files[0].type)) {
|
||||
loadPreviewFromFiles(files)
|
||||
} else {
|
||||
alert("Invalid input")
|
||||
}
|
||||
})
|
||||
|
||||
$('body').on('click', '.submit', function(e) {
|
||||
var src = $('.input_image img').attr('src');
|
||||
src = resizeImage(src)
|
||||
ws.send(src, function(e) {
|
||||
notifyError(e)
|
||||
})
|
||||
})
|
||||
|
||||
$('body').on('click', '.clear', function(e) {
|
||||
// if (cropper) {
|
||||
// cropper.destroy();
|
||||
// cropper = null
|
||||
// }
|
||||
$(".input_caption").show()
|
||||
$(".input_image img").removeAttr("src");
|
||||
$(".input_image").addClass("drop_mode")
|
||||
})
|
||||
2
build/lib/gradio/static/js/jquery-3.3.1.min.js
vendored
Normal file
2
build/lib/gradio/static/js/jquery-3.3.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
100
build/lib/gradio/static/js/sketchpad-input.js
Normal file
100
build/lib/gradio/static/js/sketchpad-input.js
Normal file
@ -0,0 +1,100 @@
|
||||
var canvas = document.getElementById('canvas');
|
||||
context = canvas.getContext("2d");
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('#canvas').mousedown(function(e){
|
||||
var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
|
||||
var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
;
|
||||
|
||||
paint = true;
|
||||
addClick(mouseX, mouseY);
|
||||
redraw();
|
||||
});
|
||||
$('#canvas').mousemove(function(e){
|
||||
if(paint){
|
||||
addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
|
||||
redraw();
|
||||
}
|
||||
});
|
||||
$('#canvas').mouseup(function(e){
|
||||
paint = false;
|
||||
});
|
||||
$('#canvas').mouseleave(function(e){
|
||||
paint = false;
|
||||
});
|
||||
var clickX = new Array();
|
||||
var clickY = new Array();
|
||||
var clickDrag = new Array();
|
||||
var paint;
|
||||
|
||||
function addClick(x, y, dragging)
|
||||
{
|
||||
clickX.push(x);
|
||||
clickY.push(y);
|
||||
clickDrag.push(dragging);
|
||||
}
|
||||
function redraw(){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
|
||||
context.strokeStyle = "#FFF";
|
||||
context.lineJoin = "round";
|
||||
context.lineWidth = 25;
|
||||
|
||||
for(var i=0; i < clickX.length; i++) {
|
||||
context.beginPath();
|
||||
if(clickDrag[i] && i){
|
||||
context.moveTo(clickX[i-1], clickY[i-1]);
|
||||
}else{
|
||||
context.moveTo(clickX[i]-1, clickY[i]);
|
||||
}
|
||||
context.lineTo(clickX[i], clickY[i]);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
18
build/lib/gradio/static/js/textbox-input.js
Normal file
18
build/lib/gradio/static/js/textbox-input.js
Normal file
@ -0,0 +1,18 @@
|
||||
var text = $("#textbox-input").val();
|
||||
|
||||
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
document.getElementById("textbox-input").value="";
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
// var dataURL = canvas.toDataURL("image/png");
|
||||
var text = $("#textbox-input").val();
|
||||
console.log(text);
|
||||
ws.send(text, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
36
build/lib/gradio/static/js/textbox-output.js
Normal file
36
build/lib/gradio/static/js/textbox-output.js
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
ws.onerror = function(evt) {
|
||||
notifyError(evt)
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
console.log(event.data);
|
||||
sleep(300).then(() => {
|
||||
$("#textbox-output").val(event.data);
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
notifyError(e)
|
||||
}
|
||||
27
build/lib/gradio/static/js/utils.js
Normal file
27
build/lib/gradio/static/js/utils.js
Normal file
@ -0,0 +1,27 @@
|
||||
function resizeImage(base64Str) {
|
||||
|
||||
var img = new Image();
|
||||
img.src = base64Str;
|
||||
var canvas = document.createElement('canvas');
|
||||
var MAX_WIDTH = 360;
|
||||
var MAX_HEIGHT = 360;
|
||||
var width = img.width;
|
||||
var height = img.height;
|
||||
|
||||
if (width > height) {
|
||||
if (width > MAX_WIDTH) {
|
||||
height *= MAX_WIDTH / width;
|
||||
width = MAX_WIDTH;
|
||||
}
|
||||
} else {
|
||||
if (height > MAX_HEIGHT) {
|
||||
width *= MAX_HEIGHT / height;
|
||||
height = MAX_HEIGHT;
|
||||
}
|
||||
}
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0, width, height);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
152
build/lib/gradio/static/js/webcam-input.js
Normal file
152
build/lib/gradio/static/js/webcam-input.js
Normal file
@ -0,0 +1,152 @@
|
||||
videoWidth = 400;
|
||||
videoHeight = 400;
|
||||
|
||||
function isAndroid() {
|
||||
return /Android/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function isiOS() {
|
||||
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
function isMobile() {
|
||||
return isAndroid() || isiOS();
|
||||
}
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
|
||||
async function setupCamera() {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
throw new Error(
|
||||
'Browser API navigator.mediaDevices.getUserMedia not available');
|
||||
}
|
||||
|
||||
const video = document.getElementById('video');
|
||||
video.width = videoWidth;
|
||||
video.height = videoHeight;
|
||||
|
||||
|
||||
const mobile = isMobile();
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
'audio': false,
|
||||
'video': {
|
||||
facingMode: 'user',
|
||||
width: mobile ? undefined : videoWidth,
|
||||
height: mobile ? undefined : videoHeight,
|
||||
},
|
||||
});
|
||||
|
||||
video.srcObject = stream;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
video.onloadedmetadata = () => {
|
||||
resolve(video);
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async function loadVideo() {
|
||||
const video = await setupCamera();
|
||||
video.play();
|
||||
|
||||
return video;
|
||||
}
|
||||
|
||||
function detectPoseInRealTime(video) {
|
||||
const flipHorizontal = true;
|
||||
async function poseDetectionFrame() {
|
||||
|
||||
ctx.clearRect(0, 0, videoWidth, videoHeight);
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-videoWidth, 0);
|
||||
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
ctx.restore();
|
||||
|
||||
requestAnimationFrame(poseDetectionFrame);
|
||||
|
||||
}
|
||||
|
||||
poseDetectionFrame();
|
||||
}
|
||||
|
||||
async function bindPage() {
|
||||
|
||||
let video;
|
||||
|
||||
try {
|
||||
video = await loadVideo();
|
||||
} catch (e) {
|
||||
let info = document.getElementById('info');
|
||||
info.textContent = 'this browser does not support video capture,' +
|
||||
'or this device does not have a camera';
|
||||
info.style.display = 'block';
|
||||
throw e;
|
||||
}
|
||||
|
||||
detectPoseInRealTime(video);
|
||||
|
||||
}
|
||||
|
||||
navigator.getUserMedia = navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||
// kick off the demo
|
||||
bindPage();
|
||||
|
||||
|
||||
function notifyError(error) {
|
||||
$.notify({
|
||||
// options
|
||||
message: 'Not able to communicate with model (is python code still running?)'
|
||||
},{
|
||||
// settings
|
||||
type: 'danger',
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
delay: 5000
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('#clear-button').click(function(e){
|
||||
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
clickX = new Array();
|
||||
clickY = new Array();
|
||||
clickDrag = new Array();
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, 400, 400);
|
||||
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
|
||||
})
|
||||
|
||||
|
||||
$('#submit-button').click(function(e){
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
$('#capture-button').click(function(e){
|
||||
ctx.clearRect(0, 0, videoWidth, videoHeight);
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-videoWidth, 0);
|
||||
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
|
||||
ctx.restore();
|
||||
var dataURL = canvas.toDataURL("image/png");
|
||||
ws.send(dataURL, function(e){
|
||||
notifyError(e)
|
||||
});
|
||||
})
|
||||
28
build/lib/gradio/templates/base_template.html
Normal file
28
build/lib/gradio/templates/base_template.html
Normal file
@ -0,0 +1,28 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Gradio</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<link rel="stylesheet" href="../static/css/gradio.css">
|
||||
<script src="../static/js/utils.js"></script>
|
||||
<script src="../static/js/all-io.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<img src="../static/img/logo_inline.png" />
|
||||
</nav>
|
||||
<div id="panels">
|
||||
<div class="panel">
|
||||
<div id="input"></div>
|
||||
<input class="submit" type="submit" value="Submit"/><!--DO NOT DELETE
|
||||
--><input class="clear" type="reset" value="Clear">
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div id="output"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +1,11 @@
|
||||
<!-- <link rel="stylesheet" href="../css/dropzone.css">
|
||||
<div class="col-6">
|
||||
<h5>Image Upload Input:</h5>
|
||||
|
||||
<input type="file" onchange="previewFile()"><br>
|
||||
<img src="" height="200" alt="Image preview...">
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="submit-button">Submit</button>
|
||||
<button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
|
||||
<div class="gradio input image_file">
|
||||
<div class="role">Input</div>
|
||||
<div class="input_image drop_mode">
|
||||
<div class="input_caption">Drop Image Here<br>- or -<br>Click to Upload</div>
|
||||
<img />
|
||||
</div>
|
||||
<input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
|
||||
</div>
|
||||
<script src="../js/image-upload-input.js"></script>
|
||||
|
||||
-->
|
||||
<div class="col-md-6">
|
||||
<div> <h5>Image Upload Input:</h5> </div>
|
||||
|
||||
<div class="uploader" style="text-align: center; vertical-align: middle" onclick="$('#filePhoto').click()">
|
||||
<br>Click here <br> or <br> drag and drop <br>an image
|
||||
<img/>
|
||||
<input type="file" name="userprofile_picture" id="filePhoto" />
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="submit-button">Submit</button>
|
||||
<button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="../js/image-upload-input.js"></script>
|
||||
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
|
||||
<script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
|
||||
<script src="../static/js/image-upload-input.js"></script>
|
||||
|
||||
7
build/lib/gradio/templates/label_output.html
Normal file
7
build/lib/gradio/templates/label_output.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="gradio output classifier">
|
||||
<div class="role">Output</div>
|
||||
<div class="output_class"></div>
|
||||
<div class="confidence_intervals">
|
||||
</div>
|
||||
</div>
|
||||
<script src="../static/js/class-output.js"></script>
|
||||
Binary file not shown.
BIN
dist/gradio-0.3.2.tar.gz
vendored
Normal file
BIN
dist/gradio-0.3.2.tar.gz
vendored
Normal file
Binary file not shown.
@ -68,25 +68,12 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 5,
|
||||
"execution_count": 6,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"ename": "KeyError",
|
||||
"evalue": "'label'",
|
||||
"output_type": "error",
|
||||
"traceback": [
|
||||
"\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
|
||||
"\u001b[1;31mKeyError\u001b[0m Traceback (most recent call last)",
|
||||
"\u001b[1;32m<ipython-input-5-63a258f2163d>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[1;32m----> 1\u001b[1;33m \u001b[0miface\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mgradio\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mInterface\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0minput\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'imageupload'\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0moutput\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'label'\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mmodel\u001b[0m\u001b[1;33m=\u001b[0m\u001b[0mmodel\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mmodel_type\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'keras'\u001b[0m\u001b[1;33m,\u001b[0m\u001b[0mpostprocessing_fn\u001b[0m\u001b[1;33m=\u001b[0m\u001b[0mpost_p\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 2\u001b[0m \u001b[0miface\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mlaunch\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mshare_link\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;32mFalse\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;32m~\\Anaconda3\\lib\\site-packages\\gradio\\__init__.py\u001b[0m in \u001b[0;36m__init__\u001b[1;34m(self, input, output, model, model_type, preprocessing_fn, postprocessing_fn)\u001b[0m\n\u001b[0;32m 38\u001b[0m \"\"\"\n\u001b[0;32m 39\u001b[0m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0minput_interface\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0minputs\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mregistry\u001b[0m\u001b[1;33m[\u001b[0m\u001b[0minput\u001b[0m\u001b[1;33m]\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mpreprocessing_fn\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m---> 40\u001b[1;33m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0moutput_interface\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0moutputs\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mregistry\u001b[0m\u001b[1;33m[\u001b[0m\u001b[0moutput\u001b[0m\u001b[1;33m]\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mpostprocessing_fn\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 41\u001b[0m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mmodel_type\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mmodel_type\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 42\u001b[0m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mmodel_obj\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mmodel\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;31mKeyError\u001b[0m: 'label'"
|
||||
]
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"iface = gradio.Interface(input='imageupload', output='label', model=model, model_type='keras',postprocessing_fn=post_p)\n",
|
||||
"iface.launch(share_link=False)"
|
||||
"iface = gradio.Interface(inputs='imageupload', outputs='label', model=model, model_type='keras',postprocessing_fn=post_p)\n",
|
||||
"iface.launch(share=False)"
|
||||
]
|
||||
}
|
||||
],
|
||||
@ -106,7 +93,7 @@
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.7.1"
|
||||
"version": "3.7.0"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
|
||||
@ -32,32 +32,16 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"execution_count": 2,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\tensorflow\\python\\framework\\op_def_library.py:263: colocate_with (from tensorflow.python.framework.ops) is deprecated and will be removed in a future version.\n",
|
||||
"Instructions for updating:\n",
|
||||
"Colocations handled automatically by placer.\n",
|
||||
"WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\keras\\backend\\tensorflow_backend.py:3445: calling dropout (from tensorflow.python.ops.nn_ops) with keep_prob is deprecated and will be removed in a future version.\n",
|
||||
"Instructions for updating:\n",
|
||||
"Please use `rate` instead of `keep_prob`. Rate should be set to `rate = 1 - keep_prob`.\n",
|
||||
"WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\tensorflow\\python\\ops\\math_ops.py:3066: to_int32 (from tensorflow.python.ops.math_ops) is deprecated and will be removed in a future version.\n",
|
||||
"Instructions for updating:\n",
|
||||
"Use tf.cast instead.\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"model = load_model('../.models/emotion.h5')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 4,
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
@ -68,20 +52,36 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 6,
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"outputs": [
|
||||
{
|
||||
"ename": "DistutilsFileError",
|
||||
"evalue": "cannot copy tree 'C:\\Users\\islam\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\gradio\\static\\': not a directory",
|
||||
"output_type": "error",
|
||||
"traceback": [
|
||||
"\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
|
||||
"\u001b[1;31mDistutilsFileError\u001b[0m Traceback (most recent call last)",
|
||||
"\u001b[1;32m<ipython-input-5-7682ebc4c24c>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[0;32m 1\u001b[0m \u001b[0miface\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mgradio\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mInterface\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0minputs\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'imageupload'\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0moutputs\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'label'\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mmodel\u001b[0m\u001b[1;33m=\u001b[0m\u001b[0mmodel\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mmodel_type\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'keras'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 2\u001b[1;33m \u001b[0miface\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mlaunch\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mshare\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;32mFalse\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m",
|
||||
"\u001b[1;32m~\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\gradio\\interface.py\u001b[0m in \u001b[0;36mlaunch\u001b[1;34m(self, inline, browser, share)\u001b[0m\n\u001b[0;32m 136\u001b[0m \u001b[0mserver_port\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mnetworking\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mstart_simple_server\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0moutput_directory\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 137\u001b[0m \u001b[0mpath_to_server\u001b[0m \u001b[1;33m=\u001b[0m \u001b[1;34m'http://localhost:{}/'\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mformat\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mserver_port\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m--> 138\u001b[1;33m \u001b[0mnetworking\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mbuild_template\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0moutput_directory\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0minput_interface\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0moutput_interface\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 139\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 140\u001b[0m \u001b[1;31m# Set up a port to serve a websocket that sets up the communication between the front-end and model.\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;32m~\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\gradio\\networking.py\u001b[0m in \u001b[0;36mbuild_template\u001b[1;34m(temp_dir, input_interface, output_interface)\u001b[0m\n\u001b[0;32m 67\u001b[0m \u001b[0mf\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mwrite\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mstr\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mall_io_soup\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 68\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m---> 69\u001b[1;33m \u001b[0mcopy_files\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mSTATIC_PATH_LIB\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mos\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mpath\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mjoin\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mtemp_dir\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mSTATIC_PATH_TEMP\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 70\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 71\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;32m~\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\gradio\\networking.py\u001b[0m in \u001b[0;36mcopy_files\u001b[1;34m(src_dir, dest_dir)\u001b[0m\n\u001b[0;32m 76\u001b[0m \u001b[1;33m:\u001b[0m\u001b[0mparam\u001b[0m \u001b[0mdest_dir\u001b[0m\u001b[1;33m:\u001b[0m \u001b[0mstring\u001b[0m \u001b[0mpath\u001b[0m \u001b[0mto\u001b[0m \u001b[0mdestination\u001b[0m \u001b[0mdirectory\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 77\u001b[0m \"\"\"\n\u001b[1;32m---> 78\u001b[1;33m \u001b[0mdir_util\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mcopy_tree\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0msrc_dir\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mdest_dir\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 79\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 80\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;32m~\\Anaconda3\\envs\\tensorflow\\lib\\distutils\\dir_util.py\u001b[0m in \u001b[0;36mcopy_tree\u001b[1;34m(src, dst, preserve_mode, preserve_times, preserve_symlinks, update, verbose, dry_run)\u001b[0m\n\u001b[0;32m 122\u001b[0m \u001b[1;32mif\u001b[0m \u001b[1;32mnot\u001b[0m \u001b[0mdry_run\u001b[0m \u001b[1;32mand\u001b[0m \u001b[1;32mnot\u001b[0m \u001b[0mos\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mpath\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0misdir\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0msrc\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m:\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 123\u001b[0m raise DistutilsFileError(\n\u001b[1;32m--> 124\u001b[1;33m \"cannot copy tree '%s': not a directory\" % src)\n\u001b[0m\u001b[0;32m 125\u001b[0m \u001b[1;32mtry\u001b[0m\u001b[1;33m:\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 126\u001b[0m \u001b[0mnames\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mos\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mlistdir\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0msrc\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
|
||||
"\u001b[1;31mDistutilsFileError\u001b[0m: cannot copy tree 'C:\\Users\\islam\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\gradio\\static\\': not a directory"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"iface = gradio.Interface(input='imageupload', output='class', model=model, model_type='keras',postprocessing_fn=post_p)\n",
|
||||
"iface.launch(share_link=False)"
|
||||
"iface = gradio.Interface(inputs='imageupload', outputs='label', model=model, model_type='keras')\n",
|
||||
"iface.launch(share=False)"
|
||||
]
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"kernelspec": {
|
||||
"display_name": "Python 3",
|
||||
"display_name": "Python 3.6 (tensorflow)",
|
||||
"language": "python",
|
||||
"name": "python3"
|
||||
"name": "tensorflow"
|
||||
},
|
||||
"language_info": {
|
||||
"codemirror_mode": {
|
||||
@ -93,7 +93,7 @@
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.7.1"
|
||||
"version": "3.6.7"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
Metadata-Version: 1.0
|
||||
Name: gradio
|
||||
Version: 0.2.1
|
||||
Version: 0.3.2
|
||||
Summary: Python library for easily interacting with trained machine learning models
|
||||
Home-page: https://github.com/abidlabs/gradio
|
||||
Author: Abubakar Abid
|
||||
|
||||
@ -2,6 +2,7 @@ MANIFEST.in
|
||||
README.md
|
||||
setup.py
|
||||
gradio/__init__.py
|
||||
gradio/imagenet_class_labels.py
|
||||
gradio/inputs.py
|
||||
gradio/interface.py
|
||||
gradio/networking.py
|
||||
@ -12,50 +13,29 @@ gradio.egg-info/SOURCES.txt
|
||||
gradio.egg-info/dependency_links.txt
|
||||
gradio.egg-info/requires.txt
|
||||
gradio.egg-info/top_level.txt
|
||||
gradio/css/.DS_Store
|
||||
gradio/css/bootstrap-grid.css
|
||||
gradio/css/bootstrap-grid.css.map
|
||||
gradio/css/bootstrap-grid.min.css
|
||||
gradio/css/bootstrap-grid.min.css.map
|
||||
gradio/css/bootstrap-reboot.css
|
||||
gradio/css/bootstrap-reboot.css.map
|
||||
gradio/css/bootstrap-reboot.min.css
|
||||
gradio/css/bootstrap-reboot.min.css.map
|
||||
gradio/css/bootstrap.css
|
||||
gradio/css/bootstrap.css.map
|
||||
gradio/css/bootstrap.min.css
|
||||
gradio/css/bootstrap.min.css.map
|
||||
gradio/css/draw-a-digit.css
|
||||
gradio/css/dropzone.css
|
||||
gradio/css/index.css
|
||||
gradio/js/all-io.js
|
||||
gradio/js/audio-input.js
|
||||
gradio/js/bootstrap-notify.min.js
|
||||
gradio/js/bootstrap.bundle.js
|
||||
gradio/js/bootstrap.bundle.js.map
|
||||
gradio/js/bootstrap.bundle.min.js
|
||||
gradio/js/bootstrap.bundle.min.js.map
|
||||
gradio/js/bootstrap.js
|
||||
gradio/js/bootstrap.js.map
|
||||
gradio/js/bootstrap.min.js
|
||||
gradio/js/bootstrap.min.js.map
|
||||
gradio/js/class-output.js
|
||||
gradio/js/draw-a-digit.js
|
||||
gradio/js/dropzone.js
|
||||
gradio/js/emotion-detector.js
|
||||
gradio/js/image-upload-input.js
|
||||
gradio/js/jquery-3.3.1.min.js
|
||||
gradio/js/sketchpad-input.js
|
||||
gradio/js/textbox-input.js
|
||||
gradio/js/textbox-output.js
|
||||
gradio/js/webcam-input.js
|
||||
gradio/templates/all_io.html
|
||||
gradio/templates/audio_input.html
|
||||
gradio/templates/class_output.html
|
||||
gradio/templates/draw_a_digit.html
|
||||
gradio/templates/emotion_detector.html
|
||||
gradio/static/css/.DS_Store
|
||||
gradio/static/css/gradio.css
|
||||
gradio/static/css/style.css
|
||||
gradio/static/img/logo.png
|
||||
gradio/static/img/logo_inline.png
|
||||
gradio/static/img/mic.png
|
||||
gradio/static/img/webcam.png
|
||||
gradio/static/js/all-io.js
|
||||
gradio/static/js/audio-input.js
|
||||
gradio/static/js/class-output.js
|
||||
gradio/static/js/draw-a-digit.js
|
||||
gradio/static/js/emotion-detector.js
|
||||
gradio/static/js/image-upload-input.js
|
||||
gradio/static/js/jquery-3.3.1.min.js
|
||||
gradio/static/js/sketchpad-input.js
|
||||
gradio/static/js/textbox-input.js
|
||||
gradio/static/js/textbox-output.js
|
||||
gradio/static/js/utils.js
|
||||
gradio/static/js/webcam-input.js
|
||||
gradio/templates/base_template.html
|
||||
gradio/templates/image_upload_input.html
|
||||
gradio/templates/sketchpad_input.html
|
||||
gradio/templates/textbox_input.html
|
||||
gradio/templates/textbox_output.html
|
||||
gradio/templates/webcam_input.html
|
||||
gradio/templates/label_output.html
|
||||
test/test_inputs.py
|
||||
test/test_interface.py
|
||||
test/test_networking.py
|
||||
test/test_outputs.py
|
||||
1000
gradio/imagenet_class_labels.py
Normal file
1000
gradio/imagenet_class_labels.py
Normal file
File diff suppressed because it is too large
Load Diff
@ -11,7 +11,6 @@ from io import BytesIO
|
||||
import numpy as np
|
||||
from PIL import Image
|
||||
|
||||
|
||||
class AbstractInput(ABC):
|
||||
"""
|
||||
An abstract class for defining the methods that all gradio inputs should have.
|
||||
@ -99,11 +98,14 @@ class Textbox(AbstractInput):
|
||||
|
||||
|
||||
class ImageUpload(AbstractInput):
|
||||
def __init__(self, preprocessing_fn=None, image_width=229, image_height=229, num_channels=3, image_mode='RGB'):
|
||||
def __init__(self, preprocessing_fn=None, image_width=224, image_height=224, num_channels=3, image_mode='RGB',
|
||||
scale = 1/127.5, shift = -1):
|
||||
self.image_width = image_width
|
||||
self.image_height = image_height
|
||||
self.num_channels = num_channels
|
||||
self.image_mode = image_mode
|
||||
self.scale = scale
|
||||
self.shift = shift
|
||||
super().__init__(preprocessing_fn=preprocessing_fn)
|
||||
|
||||
def get_template_path(self):
|
||||
@ -117,10 +119,12 @@ class ImageUpload(AbstractInput):
|
||||
image_encoded = content.split(',')[1]
|
||||
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert(self.image_mode)
|
||||
im = preprocessing_utils.resize_and_crop(im, (self.image_width, self.image_height))
|
||||
im = np.array(im).flatten()
|
||||
im = im * self.scale + self.shift
|
||||
if self.num_channels is None:
|
||||
array = np.array(im).flatten().reshape(1, self.image_width, self.image_height)
|
||||
array = im.reshape(1, self.image_width, self.image_height)
|
||||
else:
|
||||
array = np.array(im).flatten().reshape(1, self.image_width, self.image_height, self.num_channels)
|
||||
array = im.reshape(1, self.image_width, self.image_height, self.num_channels)
|
||||
return array
|
||||
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@ import gradio.inputs
|
||||
import gradio.outputs
|
||||
from gradio import networking
|
||||
import tempfile
|
||||
from IPython.display import IFrame
|
||||
|
||||
nest_asyncio.apply()
|
||||
|
||||
@ -109,6 +108,8 @@ class Interface:
|
||||
await websocket.send(str(processed_output))
|
||||
except websockets.exceptions.ConnectionClosed:
|
||||
pass
|
||||
# except Exception as e:
|
||||
# print(e)
|
||||
|
||||
def predict(self, preprocessed_input):
|
||||
"""
|
||||
@ -124,7 +125,7 @@ class Interface:
|
||||
else:
|
||||
ValueError('model_type must be one of: {}'.format(self.VALID_MODEL_TYPES))
|
||||
|
||||
def launch(self, share=False, new_tab=False):
|
||||
def launch(self, inline=None, browser=None, share=False):
|
||||
"""
|
||||
Standard method shared by interfaces that creates the interface and sets up a websocket to communicate with it.
|
||||
:param share: boolean. If True, then a share link is generated using ngrok is displayed to the user.
|
||||
@ -143,7 +144,7 @@ class Interface:
|
||||
networking.set_socket_port_in_js(output_directory, websocket_port) # sets the websocket port in the JS file.
|
||||
if self.verbose:
|
||||
print("NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu")
|
||||
print("Model available locally at: {}".format(path_to_server + networking.TEMPLATE_TEMP))
|
||||
print("Model is running locally at: {}".format(path_to_server + networking.TEMPLATE_TEMP))
|
||||
|
||||
if share:
|
||||
site_ngrok_url = networking.setup_ngrok(server_port, websocket_port, output_directory)
|
||||
@ -162,9 +163,23 @@ class Interface:
|
||||
except RuntimeError: # Runtime errors are thrown in jupyter notebooks because of async.
|
||||
pass
|
||||
|
||||
if new_tab:
|
||||
if inline is None:
|
||||
try: # Check if running interactively using ipython.
|
||||
_ = get_ipython()
|
||||
inline = True
|
||||
if browser is None:
|
||||
browser = False
|
||||
except NameError:
|
||||
inline = False
|
||||
if browser is None:
|
||||
browser = True
|
||||
else:
|
||||
if browser is None:
|
||||
browser = False
|
||||
if browser:
|
||||
webbrowser.open(path_to_server + networking.TEMPLATE_TEMP) # Open a browser tab with the interface.
|
||||
else:
|
||||
print("Interface displayed inline, to launch the interface in a new tab, set `new_tab=True` in the argument to `launch()`")
|
||||
if inline:
|
||||
from IPython.display import IFrame
|
||||
display(IFrame(path_to_server + networking.TEMPLATE_TEMP, width=1000, height=500))
|
||||
|
||||
return path_to_server + networking.TEMPLATE_TEMP, site_ngrok_url
|
||||
@ -7,6 +7,7 @@ automatically added to a registry, which allows them to be easily referenced in
|
||||
from abc import ABC, abstractmethod
|
||||
import numpy as np
|
||||
import json
|
||||
from gradio import imagenet_class_labels
|
||||
|
||||
class AbstractOutput(ABC):
|
||||
"""
|
||||
@ -42,11 +43,25 @@ class Label(AbstractOutput):
|
||||
CONFIDENCES_KEY = 'confidences'
|
||||
CONFIDENCE_KEY = 'confidence'
|
||||
|
||||
def __init__(self, postprocessing_fn=None, num_top_classes=3, show_confidences=True):
|
||||
def __init__(self, postprocessing_fn=None, num_top_classes=3, show_confidences=True, label_names=None,
|
||||
max_label_length=None):
|
||||
self.num_top_classes = num_top_classes
|
||||
self.show_confidences = show_confidences
|
||||
self.label_names = label_names
|
||||
self.max_label_length = max_label_length
|
||||
super().__init__(postprocessing_fn=postprocessing_fn)
|
||||
|
||||
def get_label_name(self, label):
|
||||
if self.label_names is None:
|
||||
name = label
|
||||
elif self.label_names == 'imagenet1000':
|
||||
name = imagenet_class_labels.NAMES1000[label]
|
||||
else: # if list or dictionary
|
||||
name = self.label_names[label]
|
||||
if self.max_label_length is not None:
|
||||
name = name[:self.max_label_length]
|
||||
return name
|
||||
|
||||
def get_template_path(self):
|
||||
return 'templates/label_output.html'
|
||||
|
||||
@ -58,14 +73,14 @@ class Label(AbstractOutput):
|
||||
if isinstance(prediction, np.ndarray):
|
||||
prediction = prediction.squeeze()
|
||||
if prediction.size == 1: # if it's single value
|
||||
response[Label.LABEL_KEY] = np.asscalar(prediction)
|
||||
response[Label.LABEL_KEY] = self.get_label_name(np.asscalar(prediction))
|
||||
elif len(prediction.shape) == 1: # if a 1D
|
||||
response[Label.LABEL_KEY] = int(prediction.argmax())
|
||||
response[Label.LABEL_KEY] = self.get_label_name(int(prediction.argmax()))
|
||||
if self.show_confidences:
|
||||
response[Label.CONFIDENCES_KEY] = []
|
||||
for i in range(self.num_top_classes):
|
||||
response[Label.CONFIDENCES_KEY].append({
|
||||
Label.LABEL_KEY: int(prediction.argmax()),
|
||||
Label.LABEL_KEY: self.get_label_name(int(prediction.argmax())),
|
||||
Label.CONFIDENCE_KEY: float(prediction.max()),
|
||||
})
|
||||
prediction[prediction.argmax()] = 0
|
||||
@ -73,7 +88,6 @@ class Label(AbstractOutput):
|
||||
response[Label.LABEL_KEY] = prediction
|
||||
else:
|
||||
raise ValueError("Unable to post-process model prediction.")
|
||||
print(response)
|
||||
return json.dumps(response)
|
||||
|
||||
|
||||
|
||||
@ -41,6 +41,14 @@
|
||||
font-weight: bold;
|
||||
border: 0 none;
|
||||
}
|
||||
.clear {
|
||||
background-color: #F6F6F6 !important;
|
||||
}
|
||||
.submit {
|
||||
background-color: #EEA45D !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@ -116,7 +124,6 @@
|
||||
}
|
||||
.label {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
.confidence_intervals .level {
|
||||
font-size: 14px;
|
||||
|
||||
@ -27,6 +27,19 @@ try {
|
||||
sleep(300).then(() => {
|
||||
// $(".output_class").text(event.data);
|
||||
var data = JSON.parse(event.data)
|
||||
// data = {
|
||||
// label: "happy",
|
||||
// confidences : [
|
||||
// {
|
||||
// label : "happy",
|
||||
// confidence: 0.7
|
||||
// },
|
||||
// {
|
||||
// label : "sad",
|
||||
// confidence: 0.3
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
$(".output_class").text(data["label"])
|
||||
$(".confidence_intervals").empty()
|
||||
if ("confidences" in data) {
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
$(".input_image").click(function (e) {
|
||||
// var cropper;
|
||||
|
||||
$('body').on('click', ".input_image.drop_mode", function (e) {
|
||||
$(this).parent().find(".hidden_upload").click();
|
||||
})
|
||||
|
||||
$(".input_image").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
|
||||
$('body').on('drag dragstart dragend dragover dragenter dragleave drop', ".input_image.drop_mode", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
@ -13,7 +15,12 @@ function loadPreviewFromFiles(files) {
|
||||
ReaderObj.onloadend = function() {
|
||||
$(".input_caption").hide()
|
||||
$(".input_image").removeClass("drop_mode")
|
||||
$(".input_image img").attr("src", this.result)
|
||||
var image = $(".input_image img")
|
||||
image.attr("src", this.result)
|
||||
// image.cropper({aspectRatio : 1.0});
|
||||
// if (!cropper) {
|
||||
// cropper = image.data('cropper');
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,6 +50,10 @@ $('body').on('click', '.submit', function(e) {
|
||||
})
|
||||
|
||||
$('body').on('click', '.clear', function(e) {
|
||||
// if (cropper) {
|
||||
// cropper.destroy();
|
||||
// cropper = null
|
||||
// }
|
||||
$(".input_caption").show()
|
||||
$(".input_image img").removeAttr("src");
|
||||
$(".input_image").addClass("drop_mode")
|
||||
|
||||
@ -6,4 +6,6 @@
|
||||
</div>
|
||||
<input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
|
||||
</div>
|
||||
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
|
||||
<script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
|
||||
<script src="../static/js/image-upload-input.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user