diff --git a/build-interface.py b/build-interface.py
index fee39b0b34..c2376def13 100644
--- a/build-interface.py
+++ b/build-interface.py
@@ -17,11 +17,11 @@ args = parser.parse_args()
 
 def mdl(input):
   time.sleep(args.delay)
-  return np.array(1)
+  return np.array(1) 
 
 
 def launch_interface(args):
-    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=mdl, model_type='function')
+    io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=mdl, model_type='pyfunc')
     httpd, _, _ = io.launch(share=args.share, validate=False)
 
     class ServiceExit(Exception):
diff --git a/gradio/networking.py b/gradio/networking.py
index acb52905c8..c7dee4c57e 100644
--- a/gradio/networking.py
+++ b/gradio/networking.py
@@ -31,7 +31,7 @@ BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/base_templa
 STATIC_PATH_LIB = pkg_resources.resource_filename('gradio', 'static/')
 STATIC_PATH_TEMP = 'static/'
 TEMPLATE_TEMP = 'index.html'
-BASE_JS_FILE = 'static/js/all-io.js'
+BASE_JS_FILE = 'static/js/all_io.js'
 CONFIG_FILE = 'static/config.json'
 
 NGROK_ZIP_URLS = {
diff --git a/gradio/static/css/interfaces/output/image.css b/gradio/static/css/interfaces/output/image.css
index 1c1b18ea49..9bb8123d17 100644
--- a/gradio/static/css/interfaces/output/image.css
+++ b/gradio/static/css/interfaces/output/image.css
@@ -1,4 +1,4 @@
-.output_image img {
+.output_image {
   width: 100%;
   height: 100%;
   object-fit: contain;
diff --git a/gradio/static/css/interfaces/output/label.css b/gradio/static/css/interfaces/output/label.css
index c441ddca1d..80c73dc779 100644
--- a/gradio/static/css/interfaces/output/label.css
+++ b/gradio/static/css/interfaces/output/label.css
@@ -31,4 +31,8 @@
 .output_class {
   font-weight: bold;
   font-size: 36px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
diff --git a/gradio/static/js/all-io.js b/gradio/static/js/all-io.js
deleted file mode 100644
index 90f4f3e0da..0000000000
--- a/gradio/static/js/all-io.js
+++ /dev/null
@@ -1,76 +0,0 @@
-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")){
-      var ws = new WebSocket(NGROK_URL)
-  } else {
-      var ws = new WebSocket("ws://127.0.0.1:" + SOCKET_PORT + "/")
-  }
-  ws.onerror = function(evt) {
-    notifyError(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))
-}
-
-$('body').on('click', '.flag', function(e) {
-  if ($(".flag").hasClass("flagged")) {
-    $(".flag").removeClass("flagged").attr("value", "flag");
-  } else {
-    $(".flag").addClass("flagged").attr("value", "flagged");
-  }
-})
-
-var start_time;
-function loadStart() {
-  $(".loading img").show();
-  $(".loading_time").text("");
-  start_time = new Date().getTime()
-}
-
-function loadEnd() {
-  $(".loading img").hide();
-  end_time = new Date().getTime()
-  $(".loading_time").text(((end_time - start_time) / 1000).toFixed(2) + "s");
-}
-// for embedding interface in websites or blogs
- // 
- // var iframe = document.createElement('iframe');
- // document.body.appendChild(iframe);
- //
- // iframe.src = NGROK_URL;
- // iframe.width = '1000px';
- // iframe.height = '500px';
diff --git a/gradio/static/js/all_io.js b/gradio/static/js/all_io.js
index bce083cc37..a6d72cfcbe 100644
--- a/gradio/static/js/all_io.js
+++ b/gradio/static/js/all_io.js
@@ -23,6 +23,7 @@ var io_master = {
     })
   },
   output: function(data) {
+    console.log(data)
     this.output_interface.output(data);
   }
 }
@@ -30,6 +31,6 @@ var io_master = {
 ws.onmessage = function (event) {
   var output = JSON.parse(event.data)
   if (output['action'] == 'output') {
-    all_io.output(output['data']);
+    io_master.output(output['data']);
   }
 }
diff --git a/gradio/static/js/interfaces/input/sketchpad.js b/gradio/static/js/interfaces/input/sketchpad.js
index 5c686913b1..1ddbe9fcc2 100644
--- a/gradio/static/js/interfaces/input/sketchpad.js
+++ b/gradio/static/js/interfaces/input/sketchpad.js
@@ -21,10 +21,10 @@ const sketchpad_input = {
     this.canvas = this.target.find('.canvas_holder canvas')[0];
     this.context = this.canvas.getContext("2d");
     this.target.find(".brush").click(function (e) {
-      $(this).parent().removeClass("selected");
+      let io = get_interface(e.target)
+      io.target.find(".brush").removeClass("selected");
       $(this).addClass("selected");
-      // TODO: Fix
-//      sketchpad.penSize = $(this).attr("size");
+      io.sketchpad.penSize = $(this).attr("size");
     })
   },
   submit: function() {
diff --git a/gradio/static/js/interfaces/output/image.js b/gradio/static/js/interfaces/output/image.js
index a62fb29bcc..6de44e6c5f 100644
--- a/gradio/static/js/interfaces/output/image.js
+++ b/gradio/static/js/interfaces/output/image.js
@@ -1,10 +1,14 @@
-ws.onmessage = function (event) {
-  loadEnd();
-  $(".output_image img").attr("src", event.data);
-  $(".output_image img").show();
+const image_output = {
+  html: `
+      <img class="output_image" />
+    `,
+  init: function() {},
+  output: function(data) {
+    this.target.find(".output_image").attr('src', data).show();
+  },
+  submit: function() {
+  },
+  clear: function() {
+    this.target.find(".output_image").attr('src', "").hide();
+  }
 }
-
-$('body').on('click', '.clear', function(e) {
-  $(".output_image img").removeAttr("src");
-  $(".output_image img").hide();
-})
diff --git a/gradio/static/js/interfaces/output/label.js b/gradio/static/js/interfaces/output/label.js
index 3ea97d16ed..197bb5e579 100644
--- a/gradio/static/js/interfaces/output/label.js
+++ b/gradio/static/js/interfaces/output/label.js
@@ -1,56 +1,28 @@
-ws.onmessage = function (event) {
-  loadEnd();
-  var output = JSON.parse(event.data)
-  // data = {
-  //   label: "happy",
-  //   confidences : [
-  //    {
-  //     label : "happy",
-  //     confidence: 0.7
-  //    },
-  //    {
-  //     label : "sad",
-  //     confidence: 0.3
-  //    },
-  //   ]
-  //   }
-  if (output['action'] == 'output') {
-    data = JSON.parse(output['data']);
-    $(".output_class").text(data["label"])
-    $(".confidence_intervals").empty()
+const label_output = {
+  html: `
+    <div class="output_class"></div>
+    <div class="confidence_intervals"></div>
+    `,
+  init: function() {},
+  output: function(data) {
+    data = JSON.parse(data)
+    this.target.find(".output_class").html(data["label"])
+    this.target.find(".confidence_intervals").empty()
     if (data.confidences) {
-      data["confidences"].forEach(function (c) {
-        var confidence = c["confidence"]
-        $(".confidence_intervals").append(`<div class="confidence"><div class=
+      for (var i = 0; i < data.confidences.length; i++)
+      {
+        let c = data.confidences[i]
+        let confidence = c["confidence"]
+        this.target.find(".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>`)
-      })
+      }
     }
+  },
+  submit: function() {
+  },
+  clear: function() {
+    this.target.find(".output_class").empty();
+    this.target.find(".confidence_intervals").empty();
   }
 }
-
-$('body').on('click', '.clear', function(e) {
-  $(".output_class").text("")
-  $(".confidence_intervals").empty()
-})
-
-$('body').on('click', '.flag', function(e) {
-  src = cropper.getCroppedCanvas({
-    maxWidth: 360,
-    maxHeight: 360,
-    fillColor: "white"
-  }).toDataURL();
-  var ws_data = {
-      'action': 'flag',
-      'data': {
-        'input': src,
-        'output': data,
-        'message': "This was flagged because..",
-        'timestamp': new Date(),
-    }
-  }
-
-    ws.send(JSON.stringify(ws_data), function(e) {
-      notifyError(e)
-    })
-  })
diff --git a/gradio/static/js/interfaces/output/textbox.js b/gradio/static/js/interfaces/output/textbox.js
index 95507eef44..6aa8c065e7 100644
--- a/gradio/static/js/interfaces/output/textbox.js
+++ b/gradio/static/js/interfaces/output/textbox.js
@@ -1,8 +1,12 @@
-ws.onmessage = function (event) {
-  loadEnd();
- 	$(".output_text").val(event.data);
+const textbox_output = {
+  html: `<textarea readonly class="output_text"></textarea>`,
+  init: function() {},
+  output: function(data) {
+    this.target.find(".output_text").text(data);
+  },
+  submit: function() {
+  },
+  clear: function() {
+    this.target.find(".output_text").empty();
+  }
 }
-
-$('body').on('click', '.clear', function(e) {
-  $(".output_text").val("");
-})
diff --git a/gradio/static/js/load_interfaces.js b/gradio/static/js/load_interfaces.js
index e74a4cd349..101f3958c4 100644
--- a/gradio/static/js/load_interfaces.js
+++ b/gradio/static/js/load_interfaces.js
@@ -6,9 +6,9 @@ input_to_object_map = {
 }
 output_to_object_map = {
   "csv" : {},
-  "image" : {},
-  "label" : {},
-  "textbox" : {}
+  "image" : image_output,
+  "label" : label_output,
+  "textbox" : textbox_output
 }
 id_to_interface_map = {}
 
@@ -32,19 +32,22 @@ $.getJSON("static/config.json", function(data) {
   input_interface.target = $("#input_interface");
   set_interface_id(input_interface, 1)
   input_interface.init();
-  // $("#output_interface").html(output_interface.html);
-  // output_interface.target = $("#output_interface");
-  // output_interface.init();
+  $("#output_interface").html(output_interface.html);
+  output_interface.target = $("#output_interface");
+  set_interface_id(output_interface, 2)
+ output_interface.init();
   $(".submit").click(function() {
     input_interface.submit();
-    // output_interface.submit();
+    output_interface.submit();
   })
   $(".clear").click(function() {
     input_interface.clear();
-    // output_interface.clear();
+     output_interface.clear();
   })
   input_interface.io_master = io_master;
   io_master.input_interface = input_interface;
+  output_interface.io_master = io_master;
+  io_master.output_interface = output_interface;
 });
 
 $('body').on('click', '.flag', function(e) {