diff --git a/gradio/inputs.py b/gradio/inputs.py
index 80d18ac002..54e81f1d81 100644
--- a/gradio/inputs.py
+++ b/gradio/inputs.py
@@ -51,7 +51,7 @@ class Sketchpad(AbstractInput):
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
- return 'templates/sketchpad_input.html'
+ return 'templates/input/sketchpad.html'
def preprocess(self, inp):
"""
@@ -75,7 +75,7 @@ class Webcam(AbstractInput):
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
- return 'templates/webcam_input.html'
+ return 'templates/input/webcam.html'
def preprocess(self, inp):
"""
@@ -92,7 +92,7 @@ class Webcam(AbstractInput):
class Textbox(AbstractInput):
def get_template_path(self):
- return 'templates/textbox_input.html'
+ return 'templates/input/textbox.html'
def preprocess(self, inp):
"""
@@ -113,7 +113,7 @@ class ImageUpload(AbstractInput):
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
- return 'templates/image_upload_input.html'
+ return 'templates/input/image_upload.html'
def preprocess(self, inp):
"""
diff --git a/gradio/outputs.py b/gradio/outputs.py
index 3223ffb1a5..4b5eeecf69 100644
--- a/gradio/outputs.py
+++ b/gradio/outputs.py
@@ -63,7 +63,7 @@ class Label(AbstractOutput):
return name
def get_template_path(self):
- return 'templates/label_output.html'
+ return 'templates/output/label.html'
def postprocess(self, prediction):
"""
@@ -94,7 +94,7 @@ class Label(AbstractOutput):
class Textbox(AbstractOutput):
def get_template_path(self):
- return 'templates/textbox_output.html'
+ return 'templates/output/textbox.html'
def postprocess(self, prediction):
"""
diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index e3eb67db22..24af9a62b9 100644
--- a/gradio/static/css/gradio.css
+++ b/gradio/static/css/gradio.css
@@ -139,6 +139,9 @@
.confidence_intervals > * {
vertical-align: bottom;
}
+.flag.flagged {
+ background-color: pink !important;
+}
.sketchpad canvas {
background-color: white;
diff --git a/gradio/static/css/style.css b/gradio/static/css/style.css
index f9a42e8e3d..38e254f1e6 100644
--- a/gradio/static/css/style.css
+++ b/gradio/static/css/style.css
@@ -3,7 +3,7 @@ body {
font-size: 12px;
margin: 0;
}
-button, input[type="submit"], input[type="reset"], input[type="text"], select[type="submit"] {
+button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
background: none;
color: inherit;
border: none;
@@ -12,7 +12,7 @@ button, input[type="submit"], input[type="reset"], input[type="text"], select[ty
cursor: pointer;
outline: inherit;
-webkit-appearance: none;
- border-radius: 0;
+ border-radius: 0;
}
input[type="text"] {
diff --git a/gradio/static/js/all-io.js b/gradio/static/js/all-io.js
index da30a3eab7..4c0043a4c6 100644
--- a/gradio/static/js/all-io.js
+++ b/gradio/static/js/all-io.js
@@ -1,6 +1,25 @@
var NGROK_URL = "{{ngrok_socket_url}}"
var SOCKET_PORT = "{{socket_port}}"
+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 origin = window.location.origin;
if (origin.includes("ngrok")){
@@ -9,7 +28,7 @@ try {
var ws = new WebSocket("ws://127.0.0.1:" + SOCKET_PORT + "/")
}
ws.onerror = function(evt) {
- console.log(evt)
+ notifyError(evt)
};
ws.onclose = function(event) {
console.log("WebSocket is closed now.");
diff --git a/gradio/static/js/audio-input.js b/gradio/static/js/audio-input.js
deleted file mode 100644
index a72be5c3b0..0000000000
--- a/gradio/static/js/audio-input.js
+++ /dev/null
@@ -1,255 +0,0 @@
-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;
\ No newline at end of file
diff --git a/gradio/static/js/class-output.js b/gradio/static/js/class-output.js
deleted file mode 100644
index 3c6cd69393..0000000000
--- a/gradio/static/js/class-output.js
+++ /dev/null
@@ -1,82 +0,0 @@
-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(`
${c["label"]}
${Math.round(confidence * 100)}%
`)
- })
- }
- })
-
- }
-} catch (e) {
- notifyError(e)
-}
-
-$('body').on('click', '.clear', function(e) {
- $(".output_class").text("")
- $(".confidence_intervals").empty()
-})
-
-
-
-function changeToFlagged() {
- var f = document.getElementsByClassName("flag");
- f[0].style.cssText = 'background-color:pink !important' ;
- f[0].value="flagged";
-}
-
-function sendMessage() {
- var m = document.getElementsByClassName("message");
- m[0].style.cssText = 'background:lightgrey !important' ;
- // m[0].style.cssText = 'display:none' ;
- var s = document.getElementsByClassName("send-message");
- s[0].style.cssText = 'background-color:lightgreen !important' ;
- s[0].value="Sent!"
-
- // c[0].value="flagged";
-}
diff --git a/gradio/static/js/draw-a-digit.js b/gradio/static/js/draw-a-digit.js
deleted file mode 100644
index 186f92b581..0000000000
--- a/gradio/static/js/draw-a-digit.js
+++ /dev/null
@@ -1,128 +0,0 @@
-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)
- });
-
-})
-
diff --git a/gradio/static/js/emotion-detector.js b/gradio/static/js/emotion-detector.js
deleted file mode 100644
index 91efaf82df..0000000000
--- a/gradio/static/js/emotion-detector.js
+++ /dev/null
@@ -1,180 +0,0 @@
-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)
- });
-})
diff --git a/gradio/static/js/image-upload-input.js b/gradio/static/js/interfaces/input/image_upload.js
similarity index 100%
rename from gradio/static/js/image-upload-input.js
rename to gradio/static/js/interfaces/input/image_upload.js
diff --git a/gradio/static/js/sketchpad-input.js b/gradio/static/js/interfaces/input/sketchpad.js
similarity index 100%
rename from gradio/static/js/sketchpad-input.js
rename to gradio/static/js/interfaces/input/sketchpad.js
index 1bf8a1b127..1499ba6ddf 100644
--- a/gradio/static/js/sketchpad-input.js
+++ b/gradio/static/js/interfaces/input/sketchpad.js
@@ -13,6 +13,7 @@ $(".brush").click(function (e) {
$(this).addClass("selected")
sketchpad.penSize = $(this).attr("size")
})
+
$('body').on('click', '.clear', function(e) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
})
@@ -22,5 +23,4 @@ $('body').on('click', '.submit', function(e) {
ws.send(dataURL, function(e){
notifyError(e)
});
-
})
diff --git a/gradio/static/js/textbox-input.js b/gradio/static/js/interfaces/input/textbox.js
similarity index 62%
rename from gradio/static/js/textbox-input.js
rename to gradio/static/js/interfaces/input/textbox.js
index c50db79317..aa267c0310 100644
--- a/gradio/static/js/textbox-input.js
+++ b/gradio/static/js/interfaces/input/textbox.js
@@ -1,16 +1,11 @@
var text = $("#textbox-input").val();
-
-
$('#clear-button').click(function(e){
- document.getElementById("textbox-input").value="";
+ $("textbox-input").text("");
})
-
$('#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)
});
diff --git a/gradio/static/js/interfaces/output/label.js b/gradio/static/js/interfaces/output/label.js
new file mode 100644
index 0000000000..937ac42232
--- /dev/null
+++ b/gradio/static/js/interfaces/output/label.js
@@ -0,0 +1,39 @@
+ws.onmessage = function (event) {
+ 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(`${c["label"]}
${Math.round(confidence * 100)}%
`)
+ })
+ }
+}
+
+$('body').on('click', '.clear', function(e) {
+ $(".output_class").text("")
+ $(".confidence_intervals").empty()
+})
+
+$('body').on('click', '.flag', function(e) {
+ if ($(".flag").hasClass("flagged")) {
+ $(".flag").removeClass("flagged").attr("value", "flag");
+ } else {
+ $(".flag").addClass("flagged").attr("value", "flagged");
+ }
+})
diff --git a/gradio/static/js/interfaces/output/textbox.js b/gradio/static/js/interfaces/output/textbox.js
new file mode 100644
index 0000000000..2ae76e92dd
--- /dev/null
+++ b/gradio/static/js/interfaces/output/textbox.js
@@ -0,0 +1,3 @@
+ws.onmessage = function (event) {
+ $("#textbox-output").val(event.data);
+}
diff --git a/gradio/static/js/jquery-3.3.1.min.js b/gradio/static/js/jquery-3.3.1.min.js
deleted file mode 100644
index 4d9b3a2587..0000000000
--- a/gradio/static/js/jquery-3.3.1.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n=[],r=e.document,i=Object.getPrototypeOf,o=n.slice,a=n.concat,s=n.push,u=n.indexOf,l={},c=l.toString,f=l.hasOwnProperty,p=f.toString,d=p.call(Object),h={},g=function e(t){return"function"==typeof t&&"number"!=typeof t.nodeType},y=function e(t){return null!=t&&t===t.window},v={type:!0,src:!0,noModule:!0};function m(e,t,n){var i,o=(t=t||r).createElement("script");if(o.text=e,n)for(i in v)n[i]&&(o[i]=n[i]);t.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[c.call(e)]||"object":typeof e}var b="3.3.1",w=function(e,t){return new w.fn.init(e,t)},T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;w.fn=w.prototype={jquery:"3.3.1",constructor:w,length:0,toArray:function(){return o.call(this)},get:function(e){return null==e?o.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=w.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return w.each(this,e)},map:function(e){return this.pushStack(w.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(o.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n0&&t-1 in e)}var E=function(e){var t,n,r,i,o,a,s,u,l,c,f,p,d,h,g,y,v,m,x,b="sizzle"+1*new Date,w=e.document,T=0,C=0,E=ae(),k=ae(),S=ae(),D=function(e,t){return e===t&&(f=!0),0},N={}.hasOwnProperty,A=[],j=A.pop,q=A.push,L=A.push,H=A.slice,O=function(e,t){for(var n=0,r=e.length;n+~]|"+M+")"+M+"*"),z=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),X=new RegExp(W),U=new RegExp("^"+R+"$"),V={ID:new RegExp("^#("+R+")"),CLASS:new RegExp("^\\.("+R+")"),TAG:new RegExp("^("+R+"|[*])"),ATTR:new RegExp("^"+I),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+P+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},G=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Q=/^[^{]+\{\s*\[native \w/,J=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,K=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ee=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},re=function(){p()},ie=me(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{L.apply(A=H.call(w.childNodes),w.childNodes),A[w.childNodes.length].nodeType}catch(e){L={apply:A.length?function(e,t){q.apply(e,H.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function oe(e,t,r,i){var o,s,l,c,f,h,v,m=t&&t.ownerDocument,T=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==T&&9!==T&&11!==T)return r;if(!i&&((t?t.ownerDocument||t:w)!==d&&p(t),t=t||d,g)){if(11!==T&&(f=J.exec(e)))if(o=f[1]){if(9===T){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(m&&(l=m.getElementById(o))&&x(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return L.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return L.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!S[e+" "]&&(!y||!y.test(e))){if(1!==T)m=t,v=e;else if("object"!==t.nodeName.toLowerCase()){(c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=b),s=(h=a(e)).length;while(s--)h[s]="#"+c+" "+ve(h[s]);v=h.join(","),m=K.test(e)&&ge(t.parentNode)||t}if(v)try{return L.apply(r,m.querySelectorAll(v)),r}catch(e){}finally{c===b&&t.removeAttribute("id")}}}return u(e.replace(B,"$1"),t,r,i)}function ae(){var e=[];function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}return t}function se(e){return e[b]=!0,e}function ue(e){var t=d.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){var n=e.split("|"),i=n.length;while(i--)r.attrHandle[n[i]]=t}function ce(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function pe(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function de(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ie(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function he(e){return se(function(t){return t=+t,se(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function ge(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},p=oe.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!==d&&9===a.nodeType&&a.documentElement?(d=a,h=d.documentElement,g=!o(d),w!==d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",re,!1):i.attachEvent&&i.attachEvent("onunload",re)),n.attributes=ue(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ue(function(e){return e.appendChild(d.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=Q.test(d.getElementsByClassName),n.getById=ue(function(e){return h.appendChild(e).id=b,!d.getElementsByName||!d.getElementsByName(b).length}),n.getById?(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&g)return t.getElementsByClassName(e)},v=[],y=[],(n.qsa=Q.test(d.querySelectorAll))&&(ue(function(e){h.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+P+")"),e.querySelectorAll("[id~="+b+"-]").length||y.push("~="),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+b+"+*").length||y.push(".#.+[+~]")}),ue(function(e){e.innerHTML="";var t=d.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),h.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(n.matchesSelector=Q.test(m=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&&ue(function(e){n.disconnectedMatch=m.call(e,"*"),m.call(e,"[s!='']:x"),v.push("!=",W)}),y=y.length&&new RegExp(y.join("|")),v=v.length&&new RegExp(v.join("|")),t=Q.test(h.compareDocumentPosition),x=t||Q.test(h.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return f=!0,0;var r=!e.compareDocumentPosition-!t.compareDocumentPosition;return r||(1&(r=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===r?e===d||e.ownerDocument===w&&x(w,e)?-1:t===d||t.ownerDocument===w&&x(w,t)?1:c?O(c,e)-O(c,t):0:4&r?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===d?-1:t===d?1:i?-1:o?1:c?O(c,e)-O(c,t):0;if(i===o)return ce(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?ce(a[r],s[r]):a[r]===w?-1:s[r]===w?1:0},d):d},oe.matches=function(e,t){return oe(e,null,null,t)},oe.matchesSelector=function(e,t){if((e.ownerDocument||e)!==d&&p(e),t=t.replace(z,"='$1']"),n.matchesSelector&&g&&!S[t+" "]&&(!v||!v.test(t))&&(!y||!y.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return oe(t,d,null,[e]).length>0},oe.contains=function(e,t){return(e.ownerDocument||e)!==d&&p(e),x(e,t)},oe.attr=function(e,t){(e.ownerDocument||e)!==d&&p(e);var i=r.attrHandle[t.toLowerCase()],o=i&&N.call(r.attrHandle,t.toLowerCase())?i(e,t,!g):void 0;return void 0!==o?o:n.attributes||!g?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},oe.escape=function(e){return(e+"").replace(te,ne)},oe.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},oe.uniqueSort=function(e){var t,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(D),f){while(t=e[o++])t===e[o]&&(i=r.push(o));while(i--)e.splice(r[i],1)}return c=null,e},i=oe.getText=function(e){var t,n="",r=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=i(e)}else if(3===o||4===o)return e.nodeValue}else while(t=e[r++])n+=i(t);return n},(r=oe.selectors={cacheLength:50,createPseudo:se,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(Z,ee),e[3]=(e[3]||e[4]||e[5]||"").replace(Z,ee),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||oe.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&oe.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return V.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(Z,ee).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=E[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&E(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=oe.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace($," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",y=t.parentNode,v=s&&t.nodeName.toLowerCase(),m=!u&&!s,x=!1;if(y){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===v:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?y.firstChild:y.lastChild],a&&m){x=(d=(l=(c=(f=(p=y)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1])&&l[2],p=d&&y.childNodes[d];while(p=++d&&p&&p[g]||(x=d=0)||h.pop())if(1===p.nodeType&&++x&&p===t){c[e]=[T,d,x];break}}else if(m&&(x=d=(l=(c=(f=(p=t)[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]||[])[0]===T&&l[1]),!1===x)while(p=++d&&p&&p[g]||(x=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===v:1===p.nodeType)&&++x&&(m&&((c=(f=p[b]||(p[b]={}))[p.uniqueID]||(f[p.uniqueID]={}))[e]=[T,x]),p===t))break;return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,t){var n,i=r.pseudos[e]||r.setFilters[e.toLowerCase()]||oe.error("unsupported pseudo: "+e);return i[b]?i(t):i.length>1?(n=[e,e,"",t],r.setFilters.hasOwnProperty(e.toLowerCase())?se(function(e,n){var r,o=i(e,t),a=o.length;while(a--)e[r=O(e,o[a])]=!(n[r]=o[a])}):function(e){return i(e,0,n)}):i}},pseudos:{not:se(function(e){var t=[],n=[],r=s(e.replace(B,"$1"));return r[b]?se(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),t[0]=null,!n.pop()}}),has:se(function(e){return function(t){return oe(e,t).length>0}}),contains:se(function(e){return e=e.replace(Z,ee),function(t){return(t.textContent||t.innerText||i(t)).indexOf(e)>-1}}),lang:se(function(e){return U.test(e||"")||oe.error("unsupported lang: "+e),e=e.replace(Z,ee).toLowerCase(),function(t){var n;do{if(n=g?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===h},focus:function(e){return e===d.activeElement&&(!d.hasFocus||d.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:de(!1),disabled:de(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!r.pseudos.empty(e)},header:function(e){return Y.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:he(function(){return[0]}),last:he(function(e,t){return[t-1]}),eq:he(function(e,t,n){return[n<0?n+t:n]}),even:he(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:he(function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function be(e,t,n){for(var r=0,i=t.length;r-1&&(o[l]=!(a[l]=f))}}else v=we(v===a?v.splice(h,v.length):v),i?i(null,a,v,u):L.apply(a,v)})}function Ce(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],s=a||r.relative[" "],u=a?1:0,c=me(function(e){return e===t},s,!0),f=me(function(e){return O(t,e)>-1},s,!0),p=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];u1&&xe(p),u>1&&ve(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace(B,"$1"),n,u0,i=e.length>0,o=function(o,a,s,u,c){var f,h,y,v=0,m="0",x=o&&[],b=[],w=l,C=o||i&&r.find.TAG("*",c),E=T+=null==w?1:Math.random()||.1,k=C.length;for(c&&(l=a===d||a||c);m!==k&&null!=(f=C[m]);m++){if(i&&f){h=0,a||f.ownerDocument===d||(p(f),s=!g);while(y=e[h++])if(y(f,a||d,s)){u.push(f);break}c&&(T=E)}n&&((f=!y&&f)&&v--,o&&x.push(f))}if(v+=m,n&&m!==v){h=0;while(y=t[h++])y(x,b,a,s);if(o){if(v>0)while(m--)x[m]||b[m]||(b[m]=j.call(u));b=we(b)}L.apply(u,b),c&&!o&&b.length>0&&v+t.length>1&&oe.uniqueSort(u)}return c&&(T=E,l=w),x};return n?se(o):o}return s=oe.compile=function(e,t){var n,r=[],i=[],o=S[e+" "];if(!o){t||(t=a(e)),n=t.length;while(n--)(o=Ce(t[n]))[b]?r.push(o):i.push(o);(o=S(e,Ee(i,r))).selector=e}return o},u=oe.select=function(e,t,n,i){var o,u,l,c,f,p="function"==typeof e&&e,d=!i&&a(e=p.selector||e);if(n=n||[],1===d.length){if((u=d[0]=d[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&g&&r.relative[u[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}o=V.needsContext.test(e)?0:u.length;while(o--){if(l=u[o],r.relative[c=l.type])break;if((f=r.find[c])&&(i=f(l.matches[0].replace(Z,ee),K.test(u[0].type)&&ge(t.parentNode)||t))){if(u.splice(o,1),!(e=i.length&&ve(u)))return L.apply(n,i),n;break}}}return(p||s(e,d))(i,t,!g,n,!t||K.test(e)&&ge(t.parentNode)||t),n},n.sortStable=b.split("").sort(D).join("")===b,n.detectDuplicates=!!f,p(),n.sortDetached=ue(function(e){return 1&e.compareDocumentPosition(d.createElement("fieldset"))}),ue(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||le("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ue(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||le("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ue(function(e){return null==e.getAttribute("disabled")})||le(P,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),oe}(e);w.find=E,w.expr=E.selectors,w.expr[":"]=w.expr.pseudos,w.uniqueSort=w.unique=E.uniqueSort,w.text=E.getText,w.isXMLDoc=E.isXML,w.contains=E.contains,w.escapeSelector=E.escape;var k=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&w(e).is(n))break;r.push(e)}return r},S=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},D=w.expr.match.needsContext;function N(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var A=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,t,n){return g(t)?w.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?w.grep(e,function(e){return e===t!==n}):"string"!=typeof t?w.grep(e,function(e){return u.call(t,e)>-1!==n}):w.filter(t,e,n)}w.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?w.find.matchesSelector(r,e)?[r]:[]:w.find.matches(e,w.grep(t,function(e){return 1===e.nodeType}))},w.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(w(e).filter(function(){for(t=0;t1?w.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&D.test(e)?w(e):e||[],!1).length}});var q,L=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(w.fn.init=function(e,t,n){var i,o;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(i="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:L.exec(e))||!i[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(i[1]){if(t=t instanceof w?t[0]:t,w.merge(this,w.parseHTML(i[1],t&&t.nodeType?t.ownerDocument||t:r,!0)),A.test(i[1])&&w.isPlainObject(t))for(i in t)g(this[i])?this[i](t[i]):this.attr(i,t[i]);return this}return(o=r.getElementById(i[2]))&&(this[0]=o,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):g(e)?void 0!==n.ready?n.ready(e):e(w):w.makeArray(e,this)}).prototype=w.fn,q=w(r);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};w.fn.extend({has:function(e){var t=w(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&w.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?w.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?u.call(w(e),this[0]):u.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(w.uniqueSort(w.merge(this.get(),w(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}w.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return k(e,"parentNode")},parentsUntil:function(e,t,n){return k(e,"parentNode",n)},next:function(e){return P(e,"nextSibling")},prev:function(e){return P(e,"previousSibling")},nextAll:function(e){return k(e,"nextSibling")},prevAll:function(e){return k(e,"previousSibling")},nextUntil:function(e,t,n){return k(e,"nextSibling",n)},prevUntil:function(e,t,n){return k(e,"previousSibling",n)},siblings:function(e){return S((e.parentNode||{}).firstChild,e)},children:function(e){return S(e.firstChild)},contents:function(e){return N(e,"iframe")?e.contentDocument:(N(e,"template")&&(e=e.content||e),w.merge([],e.childNodes))}},function(e,t){w.fn[e]=function(n,r){var i=w.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=w.filter(r,i)),this.length>1&&(O[e]||w.uniqueSort(i),H.test(e)&&i.reverse()),this.pushStack(i)}});var M=/[^\x20\t\r\n\f]+/g;function R(e){var t={};return w.each(e.match(M)||[],function(e,n){t[n]=!0}),t}w.Callbacks=function(e){e="string"==typeof e?R(e):w.extend({},e);var t,n,r,i,o=[],a=[],s=-1,u=function(){for(i=i||e.once,r=t=!0;a.length;s=-1){n=a.shift();while(++s-1)o.splice(n,1),n<=s&&s--}),this},has:function(e){return e?w.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l};function I(e){return e}function W(e){throw e}function $(e,t,n,r){var i;try{e&&g(i=e.promise)?i.call(e).done(t).fail(n):e&&g(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}w.extend({Deferred:function(t){var n=[["notify","progress",w.Callbacks("memory"),w.Callbacks("memory"),2],["resolve","done",w.Callbacks("once memory"),w.Callbacks("once memory"),0,"resolved"],["reject","fail",w.Callbacks("once memory"),w.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},"catch":function(e){return i.then(null,e)},pipe:function(){var e=arguments;return w.Deferred(function(t){w.each(n,function(n,r){var i=g(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&g(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){var o=0;function a(t,n,r,i){return function(){var s=this,u=arguments,l=function(){var e,l;if(!(t=o&&(r!==W&&(s=void 0,u=[e]),n.rejectWith(s,u))}};t?c():(w.Deferred.getStackHook&&(c.stackTrace=w.Deferred.getStackHook()),e.setTimeout(c))}}return w.Deferred(function(e){n[0][3].add(a(0,e,g(i)?i:I,e.notifyWith)),n[1][3].add(a(0,e,g(t)?t:I)),n[2][3].add(a(0,e,g(r)?r:W))}).promise()},promise:function(e){return null!=e?w.extend(e,i):i}},o={};return w.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[3-e][3].disable,n[0][2].lock,n[0][3].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=o.call(arguments),a=w.Deferred(),s=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?o.call(arguments):n,--t||a.resolveWith(r,i)}};if(t<=1&&($(e,a.done(s(n)).resolve,a.reject,!t),"pending"===a.state()||g(i[n]&&i[n].then)))return a.then();while(n--)$(i[n],s(n),a.reject);return a.promise()}});var B=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;w.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&B.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},w.readyException=function(t){e.setTimeout(function(){throw t})};var F=w.Deferred();w.fn.ready=function(e){return F.then(e)["catch"](function(e){w.readyException(e)}),this},w.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--w.readyWait:w.isReady)||(w.isReady=!0,!0!==e&&--w.readyWait>0||F.resolveWith(r,[w]))}}),w.ready.then=F.then;function _(){r.removeEventListener("DOMContentLoaded",_),e.removeEventListener("load",_),w.ready()}"complete"===r.readyState||"loading"!==r.readyState&&!r.documentElement.doScroll?e.setTimeout(w.ready):(r.addEventListener("DOMContentLoaded",_),e.addEventListener("load",_));var z=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===x(n)){i=!0;for(s in n)z(e,t,s,n[s],!0,o,a)}else if(void 0!==r&&(i=!0,g(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(w(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){K.remove(this,e)})}}),w.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=J.get(e,t),n&&(!r||Array.isArray(n)?r=J.access(e,t,w.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=w.queue(e,t),r=n.length,i=n.shift(),o=w._queueHooks(e,t),a=function(){w.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return J.get(e,n)||J.access(e,n,{empty:w.Callbacks("once memory").add(function(){J.remove(e,[t+"queue",n])})})}}),w.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};ge.optgroup=ge.option,ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td;function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&N(e,t)?w.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n-1)i&&i.push(o);else if(l=w.contains(o.ownerDocument,o),a=ye(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}!function(){var e=r.createDocumentFragment().appendChild(r.createElement("div")),t=r.createElement("input");t.setAttribute("type","radio"),t.setAttribute("checked","checked"),t.setAttribute("name","t"),e.appendChild(t),h.checkClone=e.cloneNode(!0).cloneNode(!0).lastChild.checked,e.innerHTML="",h.noCloneChecked=!!e.cloneNode(!0).lastChild.defaultValue}();var be=r.documentElement,we=/^key/,Te=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ce=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function ke(){return!1}function Se(){try{return r.activeElement}catch(e){}}function De(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)De(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=ke;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return w().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=w.guid++)),e.each(function(){w.event.add(this,t,i,r,n)})}w.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.get(e);if(y){n.handler&&(n=(o=n).handler,i=o.selector),i&&w.find.matchesSelector(be,i),n.guid||(n.guid=w.guid++),(u=y.events)||(u=y.events={}),(a=y.handle)||(a=y.handle=function(t){return"undefined"!=typeof w&&w.event.triggered!==t.type?w.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(M)||[""]).length;while(l--)d=g=(s=Ce.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=w.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=w.event.special[d]||{},c=w.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&w.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),w.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.hasData(e)&&J.get(e);if(y&&(u=y.events)){l=(t=(t||"").match(M)||[""]).length;while(l--)if(s=Ce.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){f=w.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,y.handle)||w.removeEvent(e,d,y.handle),delete u[d])}else for(d in u)w.event.remove(e,d+t[l],n,r,!0);w.isEmptyObject(u)&&J.remove(e,"handle events")}},dispatch:function(e){var t=w.event.fix(e),n,r,i,o,a,s,u=new Array(arguments.length),l=(J.get(this,"events")||{})[t.type]||[],c=w.event.special[t.type]||{};for(u[0]=t,n=1;n=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:w.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,Ae=/
-
+
diff --git a/gradio/templates/sketchpad_input.html b/gradio/templates/input/sketchpad.html
similarity index 86%
rename from gradio/templates/sketchpad_input.html
rename to gradio/templates/input/sketchpad.html
index bc127455dd..94c59d122e 100644
--- a/gradio/templates/sketchpad_input.html
+++ b/gradio/templates/input/sketchpad.html
@@ -10,4 +10,4 @@
-
+
diff --git a/gradio/templates/label_output.html b/gradio/templates/output/label.html
similarity index 71%
rename from gradio/templates/label_output.html
rename to gradio/templates/output/label.html
index f9303439eb..46982c64d5 100644
--- a/gradio/templates/label_output.html
+++ b/gradio/templates/output/label.html
@@ -4,4 +4,4 @@
-
+