This commit is contained in:
aliabd 2019-07-25 23:55:28 -07:00
commit f2f04d60e1
12 changed files with 261 additions and 33 deletions

View File

@ -4,9 +4,9 @@
`Gradio` is a python library that allows you to easily create input and output interfaces over trained models to make it easy for you to "play around" with your model in your browser by dragging-and-dropping in your own images (or pasting your own text, recording your own voice, etc.) and seeing what the model outputs. Gradio also creates a shareable, public link to your model so you can share the interface with others (e.g. your client, your advisor, or your dad), who can use the model without writing any code. `Gradio` is a python library that allows you to easily create input and output interfaces over trained models to make it easy for you to "play around" with your model in your browser by dragging-and-dropping in your own images (or pasting your own text, recording your own voice, etc.) and seeing what the model outputs. Gradio also creates a shareable, public link to your model so you can share the interface with others (e.g. your client, your advisor, or your dad), who can use the model without writing any code.
Gradio is useful for: Gradio is useful for:
* Creating demos for clients * Creating demos of your machine learning code for clients / collaborators / users
* Getting feedback from collaborators * Getting feedback on model performance from users
* Debugging your model during development * Debugging your model interactively during development
For more details, see the accompanying paper: ["Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild"](https://arxiv.org/pdf/1906.02569.pdf), *ICML HILL 2019*, and please use the citation below. For more details, see the accompanying paper: ["Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild"](https://arxiv.org/pdf/1906.02569.pdf), *ICML HILL 2019*, and please use the citation below.

93
examples/imdb.py Normal file
View File

@ -0,0 +1,93 @@
import tensorflow as tf
import sys
sys.path.insert(1, '../gradio')
import gradio
from tensorflow.keras.layers import *
from tensorflow.keras.datasets import imdb
import json
top_words = 5000 # Only keep the 5,000 most frequent words
max_word_length = 500 # The maximum length of the review should be 500 words (trim/pad otherwise)
(X_train, y_train), (X_test, y_test) = imdb.load_data(num_words=top_words);
X_train = tf.keras.preprocessing.sequence.pad_sequences(X_train, maxlen=max_word_length)
X_test = tf.keras.preprocessing.sequence.pad_sequences(X_test, maxlen=max_word_length)
def get_trained_model(n):
model = tf.keras.models.Sequential()
model.add(Embedding(top_words, 32, input_length=max_word_length))
model.add(Dropout(0.2))
model.add(Conv1D(250, 3, padding='valid', activation='relu', strides=1))
model.add(GlobalMaxPooling1D())
model.add(Dense(250))
model.add(Dropout(0.2))
model.add(Activation('relu'))
model.add(Dense(1))
model.add(Activation('sigmoid'))
model.compile(loss='binary_crossentropy', optimizer='adam', metrics=['accuracy'])
model.fit(X_train[:n], y_train[:n], epochs=1, batch_size=128)
return model
model = get_trained_model(n=100)
# Gradio code #
NUM_SPECIAL_TOKENS = 3
PAD_TOKEN = 0
START_TOKEN = 1
UNK_TOKEN = 2
word_to_id = tf.keras.datasets.imdb.get_word_index()
word_to_id = {k: (v + NUM_SPECIAL_TOKENS) for k, v in word_to_id.items()}
id_to_word = {value: key for key, value in word_to_id.items()}
id_to_word[PAD_TOKEN] = "" # Padding tokens are converted to empty strings.
id_to_word[START_TOKEN] = "" # Start tokens are converted to empty strings.
id_to_word[UNK_TOKEN] = "UNK" # <UNK> tokens are converted to "UNK".
def decode_vector_to_text(vector):
text = " ".join(id_to_word[id] for id in vector if id >= 2)
return text
def encode_text_to_vector(text, max_word_length=500, top_words=5000):
text_vector = text.split(" ")
encoded_vector = [
word_to_id.get(element, UNK_TOKEN) if word_to_id.get(element, UNK_TOKEN) < top_words else UNK_TOKEN for element
in text_vector]
encoded_vector = [START_TOKEN] + encoded_vector
if len(encoded_vector) < max_word_length:
encoded_vector = (max_word_length - len(encoded_vector)) * [PAD_TOKEN] + encoded_vector
else:
encoded_vector = encoded_vector[:max_word_length]
return encoded_vector
def preprocessing(text):
new = encode_text_to_vector(text)
return tf.keras.preprocessing.sequence.pad_sequences([new], maxlen=max_word_length)
def postprocessing(pred):
if pred[0][0] > 0.5:
return json.dumps({"label": "Positive review"})
else:
return json.dumps({"label": "Negative review"})
textbox = gradio.inputs.Textbox(preprocessing_fn=preprocessing,
sample_inputs=[
"A wonderful little production. The filming technique is very unassuming- very old-time-BBC fashion and gives a comforting, and sometimes discomforting, sense of realism to the entire piece. The actors are extremely well chosen- Michael Sheen not only has got all the polari but he has all the voices down pat too! You can truly see the seamless editing guided by the references to Williams' diary entries, not only is it well worth the watching but it is a terrificly written and performed piece. A masterful production about one of the great master's of comedy and his life. The realism really comes home with the little things: the fantasy of the guard which, rather than use the traditional 'dream' techniques remains solid then disappears.",
"This was a very brief episode that appeared in one of the Night Gallery show back in 1971. The episode starred Sue Lyon (of Lolita movie fame) and Joseph Campanella who play a baby sitter and a vampire, respectively. The vampire hires a baby sitter to watch his child (which appears to be some kind of werewolf or monster) while he goes out at night for blood. I don't know what purpose it was to make such an abbreviated episode that lasted just 5 minutes. They should just have expanded the earlier episode by those same 5 minutes and skipped this one. A total wasted effort.",
"No one expects the Star Trek movies to be high art, but the fans do expect a movie that is as good as some of the best episodes. Unfortunately, this movie had a muddled, implausible plot that just left me cringing - this is by far the worst of the nine (so far) movies. Even the chance to watch the well known characters interact in another movie can't save this movie - including the goofy scenes with Kirk, Spock and McCoy at Yosemite.I would say this movie is not worth a rental, and hardly worth watching, however for the True Fan who needs to see all the movies, renting this movie is about the only way you'll see it - even the cable channels avoid this movie.",
"This movie started out cringe-worthy--but it was meant to, with an overbearing mother, a witch of a rival, and a hesitant beauty queen constantly coming in second. There was some goofy overacting, and a few implausible plot points (She comes in second in EVERY single competition? ALL of them?) Unfortunately, the movie suffers horribly from it's need to, well, be a TV movie. Rather than end at the ending of the movie, an amusing twist in which the killer is (semi-plausibly) revealed, the movie continues for another twenty minutes, just to make sure that justice is done. Of course, now that the killer is revealed, she suddenly undergoes a complete personality shift--her character gets completely rewritten, because the writers don't need to keep her identity secret any more. The cheese completely sinks what otherwise could have been a passably amusing movie.",
"I thought this movie did a down right good job. It wasn't as creative or original as the first, but who was expecting it to be. It was a whole lotta fun. the more i think about it the more i like it, and when it comes out on DVD I'm going to pay the money for it very proudly, every last cent. Sharon Stone is great, she always is, even if her movie is horrible(Catwoman), but this movie isn't, this is one of those movies that will be underrated for its lifetime, and it will probably become a classic in like 20 yrs. Don't wait for it to be a classic, watch it now and enjoy it. Don't expect a masterpiece, or something thats gripping and soul touching, just allow yourself to get out of your life and get yourself involved in theirs.All in all, this movie is entertaining and i recommend people who haven't seen it see it.",
"I rented this movie, but I wasn't too sure what to expect of it. I was very glad to find that it's about the best Brazilian movie I've ever seen. The story is rather odd and simple, and above all, extremely original. We have Antonio, who is a young man living in Nordestina, a town in the middle of nowhere in the north east of Brazil, and who is deeply in love with Karina. The main conflict between the two is that, while Antonio loves his little town and has no wish to leave it, Karina wants to see the world and resents the place. As a prove of his love for her, he decides to go out himself and bring the world to her. He'll put Nordestina in the map, as he says. And the way he does it is unbelievable. This is a good movie; might be a bit stagy for some people due to its different editing job, but I think that it's also that that improves the story. It's just fun, and it makes you feel good."])
label = gradio.outputs.Label(postprocessing_fn=postprocessing)
io = gradio.Interface(inputs=textbox, outputs=label, model_type="keras", model=model)
httpd, path_to_local_server, share_url = io.launch(share=True, inbrowser=True)
print("URL for IMDB model interface: ", share_url)

123
examples/imdb_saliency.py Normal file
View File

@ -0,0 +1,123 @@
import tensorflow as tf
import sys
sys.path.insert(1, '../gradio')
import gradio
from tensorflow.keras.layers import *
from tensorflow.keras.datasets import imdb
import json
from tensorflow.keras import backend as K
import numpy as np
top_words = 5000 # Only keep the 5,000 most frequent words
max_word_length = 500 # The maximum length of the review should be 500 words (trim/pad otherwise)
(X_train, y_train), (X_test, y_test) = imdb.load_data(num_words=top_words);
X_train = tf.keras.preprocessing.sequence.pad_sequences(X_train, maxlen=max_word_length)
X_test = tf.keras.preprocessing.sequence.pad_sequences(X_test, maxlen=max_word_length)
def get_trained_model(n):
model = tf.keras.models.Sequential()
model.add(Embedding(top_words, 32, input_length=max_word_length))
model.add(Dropout(0.2))
model.add(Conv1D(250, 3, padding='valid', activation='relu', strides=1))
model.add(GlobalMaxPooling1D())
model.add(Dense(250))
model.add(Dropout(0.2))
model.add(Activation('relu'))
model.add(Dense(1))
model.add(Activation('sigmoid'))
model.compile(loss='binary_crossentropy', optimizer='adam', metrics=['accuracy'])
model.fit(X_train[:n], y_train[:n], epochs=1, batch_size=128)
return model
model = get_trained_model(n=25000)
# Gradio code #
NUM_SPECIAL_TOKENS = 3
PAD_TOKEN = 0
START_TOKEN = 1
UNK_TOKEN = 2
word_to_id = tf.keras.datasets.imdb.get_word_index()
word_to_id = {k: (v + NUM_SPECIAL_TOKENS) for k, v in word_to_id.items()}
id_to_word = {value: key for key, value in word_to_id.items()}
id_to_word[PAD_TOKEN] = "" # Padding tokens are converted to empty strings.
id_to_word[START_TOKEN] = "" # Start tokens are converted to empty strings.
id_to_word[UNK_TOKEN] = "UNK" # <UNK> tokens are converted to "UNK".
def decode_vector_to_text(vector):
text = " ".join(id_to_word[id] for id in vector if id >= 2)
return text
def encode_text_to_vector(text, max_word_length=500, top_words=5000):
text_vector = text.split(" ")
encoded_vector = [
word_to_id.get(element, UNK_TOKEN) if word_to_id.get(element, UNK_TOKEN) < top_words else UNK_TOKEN for element
in text_vector]
encoded_vector = [START_TOKEN] + encoded_vector
if len(encoded_vector) < max_word_length:
encoded_vector = (max_word_length - len(encoded_vector)) * [PAD_TOKEN] + encoded_vector
else:
encoded_vector = encoded_vector[:max_word_length]
return encoded_vector
def preprocessing(text):
new = encode_text_to_vector(text)
return tf.keras.preprocessing.sequence.pad_sequences([new], maxlen=max_word_length)
def postprocessing(pred):
if pred[0][0] > 0.5:
return json.dumps({"label": "Positive review"})
else:
return json.dumps({"label": "Negative review"})
def saliency(interface, model, input, processed_input, output, processed_output):
with interface.graph.as_default():
with interface.sess.as_default():
output = output.argmax()
input_tensors = [model.layers[0].input, K.learning_phase()]
saliency_input = model.layers[1].input
saliency_output = model.layers[-1].output[:, output]
gradients = model.optimizer.get_gradients(saliency_output, saliency_input)
compute_gradients = K.function(inputs=input_tensors, outputs=gradients)
saliency_graph = compute_gradients(processed_input.reshape(1, 500))[0]
saliency_graph = saliency_graph.reshape(500, 32)
saliency_graph = np.abs(saliency_graph).sum(axis=1)
normalized_saliency = (saliency_graph - saliency_graph.min()) / \
(saliency_graph.max() - saliency_graph.min())
start_idx = np.where(processed_input[0] == START_TOKEN)[0][0]
heat_map = []
counter = 0
words = input.split(" ")
for i in range(start_idx + 1, 500):
heat_map.extend([normalized_saliency[i]] * len(words[counter]))
heat_map.append(0) # zero saliency value assigned to the spaces between words
counter += 1
return np.array(heat_map)
textbox = gradio.inputs.Textbox(preprocessing_fn=preprocessing,
sample_inputs=[
"A wonderful little production. The filming technique is very unassuming- very old-time-BBC fashion and gives a comforting, and sometimes discomforting, sense of realism to the entire piece. The actors are extremely well chosen- Michael Sheen not only has got all the polari but he has all the voices down pat too! You can truly see the seamless editing guided by the references to Williams' diary entries, not only is it well worth the watching but it is a terrificly written and performed piece. A masterful production about one of the great master's of comedy and his life. The realism really comes home with the little things: the fantasy of the guard which, rather than use the traditional 'dream' techniques remains solid then disappears.",
"This was a very brief episode that appeared in one of the Night Gallery show back in 1971. The episode starred Sue Lyon (of Lolita movie fame) and Joseph Campanella who play a baby sitter and a vampire, respectively. The vampire hires a baby sitter to watch his child (which appears to be some kind of werewolf or monster) while he goes out at night for blood. I don't know what purpose it was to make such an abbreviated episode that lasted just 5 minutes. They should just have expanded the earlier episode by those same 5 minutes and skipped this one. A total wasted effort.",
"No one expects the Star Trek movies to be high art, but the fans do expect a movie that is as good as some of the best episodes. Unfortunately, this movie had a muddled, implausible plot that just left me cringing - this is by far the worst of the nine (so far) movies. Even the chance to watch the well known characters interact in another movie can't save this movie - including the goofy scenes with Kirk, Spock and McCoy at Yosemite.I would say this movie is not worth a rental, and hardly worth watching, however for the True Fan who needs to see all the movies, renting this movie is about the only way you'll see it - even the cable channels avoid this movie.",
"This movie started out cringe-worthy--but it was meant to, with an overbearing mother, a witch of a rival, and a hesitant beauty queen constantly coming in second. There was some goofy overacting, and a few implausible plot points (She comes in second in EVERY single competition? ALL of them?) Unfortunately, the movie suffers horribly from it's need to, well, be a TV movie. Rather than end at the ending of the movie, an amusing twist in which the killer is (semi-plausibly) revealed, the movie continues for another twenty minutes, just to make sure that justice is done. Of course, now that the killer is revealed, she suddenly undergoes a complete personality shift--her character gets completely rewritten, because the writers don't need to keep her identity secret any more. The cheese completely sinks what otherwise could have been a passably amusing movie.",
"I thought this movie did a down right good job. It wasn't as creative or original as the first, but who was expecting it to be. It was a whole lotta fun. the more i think about it the more i like it, and when it comes out on DVD I'm going to pay the money for it very proudly, every last cent. Sharon Stone is great, she always is, even if her movie is horrible(Catwoman), but this movie isn't, this is one of those movies that will be underrated for its lifetime, and it will probably become a classic in like 20 yrs. Don't wait for it to be a classic, watch it now and enjoy it. Don't expect a masterpiece, or something thats gripping and soul touching, just allow yourself to get out of your life and get yourself involved in theirs.All in all, this movie is entertaining and i recommend people who haven't seen it see it.",
"I rented this movie, but I wasn't too sure what to expect of it. I was very glad to find that it's about the best Brazilian movie I've ever seen. The story is rather odd and simple, and above all, extremely original. We have Antonio, who is a young man living in Nordestina, a town in the middle of nowhere in the north east of Brazil, and who is deeply in love with Karina. The main conflict between the two is that, while Antonio loves his little town and has no wish to leave it, Karina wants to see the world and resents the place. As a prove of his love for her, he decides to go out himself and bring the world to her. He'll put Nordestina in the map, as he says. And the way he does it is unbelievable. This is a good movie; might be a bit stagy for some people due to its different editing job, but I think that it's also that that improves the story. It's just fun, and it makes you feel good."])
label = gradio.outputs.Label(postprocessing_fn=postprocessing)
io = gradio.Interface(inputs=textbox, outputs=label, model_type="keras", model=model, saliency=saliency)
httpd, path_to_local_server, share_url = io.launch(share=True, inbrowser=True, inline=False)
print("URL for IMDB model interface: ", share_url)

View File

@ -40,9 +40,10 @@ def saliency(interface, model, input, processed_input, output, processed_output)
return normalized_saliency.reshape(28, 28) return normalized_saliency.reshape(28, 28)
model = get_trained_model(n=100) model = get_trained_model(n=50000)
sketchpad = gradio.inputs.Sketchpad(flatten=True, sample_inputs=x_test[:10]) sketchpad = gradio.inputs.Sketchpad(flatten=True, sample_inputs=x_test[:10])
io = gradio.Interface(inputs=sketchpad, outputs="label", model=model, model_type="keras", saliency=saliency, always_flag=True) io = gradio.Interface(inputs=sketchpad, outputs="label", model=model, model_type="keras", saliency=saliency, always_flag=True)
httpd, path_to_local_server, share_url = io.launch(inline=True, share=True, inbrowser=True) httpd, path_to_local_server, share_url = io.launch(inline=True, share=True, inbrowser=True)
print("URL for MNIST model interface with saliency:", share_url) print("URL for MNIST model interface with saliency:", share_url)

View File

@ -162,3 +162,5 @@ def generate_mfcc_features_from_audio_file(wav_filename,
filter_banks -= (np.mean(filter_banks, axis=0) + 1e-8) filter_banks -= (np.mean(filter_banks, axis=0) + 1e-8)
mfcc -= (np.mean(mfcc, axis=0) + 1e-8) mfcc -= (np.mean(mfcc, axis=0) + 1e-8)
return mfcc[np.newaxis, :, :] # Create a batch dimension. return mfcc[np.newaxis, :, :] # Create a batch dimension.

View File

@ -45,7 +45,7 @@
.saliency_holder { .saliency_holder {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: 0.7; opacity: 0.9;
} }
.view_holders canvas { .view_holders canvas {
background-color: white; background-color: white;

View File

@ -71,20 +71,19 @@ button.secondary {
margin-bottom: 20px; margin-bottom: 20px;
table-layout: fixed; table-layout: fixed;
} }
#featured_table td { #featured_table div {
padding: 4px; display: inline-block;
padding: 10px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
width: 650px; max-width: 200px;
max-width: 650px; max-height: 100px;
white-space: nowrap; overflow-y: auto;
text-overflow: ellipsis;
overflow: hidden;
} }
#featured_table tr:nth-child(even) { #featured_table div:nth-child(even) {
background-color: #EEEEEE; background-color: #EEEEEE;
} }
#featured_table tr:hover { #featured_table div:hover {
background-color: #EEA45D; background-color: #EEA45D;
} }
#featured_history img { #featured_history img {

View File

@ -29,7 +29,7 @@ const sketchpad_input = {
var id = this.id; var id = this.id;
if (config.disabled) { if (config.disabled) {
this.target.find('.canvas_holder canvas') this.target.find('.canvas_holder canvas')
.attr("width", dimension).attr("height", dimension); .attr("width", dimension).attr("height", dimension);
} else { } else {
this.sketchpad = new Sketchpad({ this.sketchpad = new Sketchpad({
element: '.interface[interface_id=' + id + '] .sketch', element: '.interface[interface_id=' + id + '] .sketch',
@ -54,9 +54,9 @@ const sketchpad_input = {
}, },
output: function(data) { output: function(data) {
this.target.find(".saliency_holder").removeClass("hide"); this.target.find(".saliency_holder").removeClass("hide");
var ctx = this.target.find(".saliency")[0].getContext('2d'); let ctx = this.target.find(".saliency")[0].getContext('2d');
let dimension = this.target.find(".saliency").width(); let dimension = this.target.find(".saliency").width();
console.log(data, dimension, dimension); ctx.clearRect(0,0,dimension,dimension);
paintSaliency(data, dimension, dimension, ctx); paintSaliency(data, dimension, dimension, ctx);
}, },
clear: function() { clear: function() {
@ -76,5 +76,6 @@ const sketchpad_input = {
ctx.drawImage(img,0,0,dimension,dimension); ctx.drawImage(img,0,0,dimension,dimension);
}; };
img.src = data; img.src = data;
this.target.find(".saliency_holder").addClass("hide");
} }
} }

View File

@ -16,7 +16,7 @@ const textbox_input = {
let text = this.target.find(".input_text").val(); let text = this.target.find(".input_text").val();
let index = 0; let index = 0;
data.forEach(function(value, index) { data.forEach(function(value, index) {
html += `<span style='background-color:rgba(255,0,0,${value})'>${text.charAt(index)}</span>`; html += `<span style='background-color:rgba(75,150,255,${value})'>${text.charAt(index)}</span>`;
}) })
$(".input_text_saliency").html(html); $(".input_text_saliency").html(html);
}, },

View File

@ -3,9 +3,7 @@ entry_history = [];
function add_history(entry) { function add_history(entry) {
$("#featured_table").append(` $("#featured_table").append(`
<tr entry=${history_count}> <div entry=${history_count}>${io_master.input_interface.renderFeatured(entry)}</div>
<td>${io_master.input_interface.renderFeatured(entry)}</td>
</tr>
`); `);
entry_history.push(entry); entry_history.push(entry);
history_count++; history_count++;
@ -15,7 +13,7 @@ function load_history(data) {
data.forEach(add_history) data.forEach(add_history)
} }
$('body').on('click', "#featured_table tr", function() { $('body').on('click', "#featured_table div", function() {
let entry = entry_history[$(this).attr("entry")]; let entry = entry_history[$(this).attr("entry")];
io_master.input_interface.loadFeatured(entry); io_master.input_interface.loadFeatured(entry);
io_master.output_interface.clear(); io_master.output_interface.clear();

View File

@ -44,21 +44,32 @@ function paintSaliency(data, width, height, ctx) {
var cell_width = width / data[0].length var cell_width = width / data[0].length
var cell_height = height / data.length var cell_height = height / data.length
var r = 0 var r = 0
let blue = [75, 150, 255];
let white = [255, 255, 255];
data.forEach(function(row) { data.forEach(function(row) {
var c = 0 var c = 0
row.forEach(function(cell) { row.forEach(function(cell) {
if (cell < 0.25) { let shade = interpolate(cell, blue, white)
ctx.fillStyle = "white"; ctx.fillStyle = colorToString(shade);
} else if (cell < 0.5) {
ctx.fillStyle = "yellow";
} else if (cell < 0.75) {
ctx.fillStyle = "orange";
} else {
ctx.fillStyle = "red";
}
ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height); ctx.fillRect(c * cell_width, r * cell_height, cell_width, cell_height);
c++; c++;
}) })
r++; r++;
}) })
} }
// val should be in the range [0.0, 1.0]
// rgb1 and rgb2 should be an array of 3 values each in the range [0, 255]
function interpolate(val, rgb1, rgb2) {
var rgb = [0,0,0];
var i;
for (i = 0; i < 3; i++) {
rgb[i] = rgb1[i] * (1.0 - val) + rgb2[i] * val;
}
return rgb;
}
// quick helper function to convert the array into something we can use for css
function colorToString(rgb) {
return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}

View File

@ -62,8 +62,8 @@
</div> </div>
<div id="featured_history"> <div id="featured_history">
<h2>Click to Try Samples</h2> <h2>Click to Try Samples</h2>
<table id="featured_table"> <div id="featured_table">
</table> </div>
</div> </div>
<script src="../static/js/vendor/jquery.min.js"></script> <script src="../static/js/vendor/jquery.min.js"></script>
<!-- TUI EDITOR --> <!-- TUI EDITOR -->