add disable feature

gradio/networking.py

@@ -126,6 +126,15 @@ def set_sample_data_in_config_file(temp_dir, sample_inputs):
         },
     )
 
+def set_disabled_in_config_file(temp_dir, disabled):
+    config_file = os.path.join(temp_dir, CONFIG_FILE)
+    render_template_with_tags(
+        config_file,
+        {
+            "disabled": disabled
+        },
+    )
+
 
 def get_first_available_port(initial, final):
     """

gradio/static/css/interfaces/input/sketchpad.css

@@ -1,9 +1,6 @@
 .hide {
   display: none !important;
 }
-.sketchpad canvas {
-  background-color: white;
-}
 .sketch_tools {
   flex: 0 1 auto;
   display: flex;
@@ -50,6 +47,7 @@
   top: 0;
   opacity: 0.7;
 }
-canvas {
+.view_holders canvas {
+  background-color: white;
   border: solid 1px black;
 }

gradio/static/js/interfaces/input/sketchpad.js

@@ -10,22 +10,36 @@ const sketchpad_input = {
         <canvas class="saliency"></canvas>
       </div>
       <div class="canvas_holder">
-        <canvas id="canvas"></canvas>
+        <canvas class="sketch"></canvas>
       </div>
     </div>`,
+    disabled_html: `
+      <div class="view_holders">
+        <div class="saliency_holder hide">
+          <canvas class="saliency"></canvas>
+        </div>
+        <div class="canvas_holder">
+          <canvas></canvas>
+        </div>
+      </div>`,
   init: function() {
     var io = this;
     var dimension = Math.min(this.target.find(".canvas_holder").width(),
         this.target.find(".canvas_holder").height()) - 2 // dimension - border
     var id = this.id;
-    this.sketchpad = new Sketchpad({
-      element: '.interface[interface_id=' + id + '] .canvas_holder canvas',
-      width: dimension,
-      height: dimension
-    });
+    if (config.disabled) {
+      this.target.find('.canvas_holder canvas')
+        .attr("width", dimension).attr("height", dimension);      
+    } else {
+      this.sketchpad = new Sketchpad({
+        element: '.interface[interface_id=' + id + '] .sketch',
+        width: dimension,
+        height: dimension
+      });
+      this.sketchpad.penSize = this.target.find(".brush.selected").attr("size");
+    }
     this.target.find(".saliency")
       .attr("width", dimension+"px").attr("height", dimension+"px");
-    this.sketchpad.penSize = this.target.find(".brush.selected").attr("size");
     this.canvas = this.target.find('.canvas_holder canvas')[0];
     this.context = this.canvas.getContext("2d");
     this.target.find(".brush").click(function (e) {
@@ -54,7 +68,7 @@ const sketchpad_input = {
     return `<img src=${data}>`;
   },
   loadFeatured: function(data) {
-    let ctx = $(".canvas_holder canvas")[0].getContext("2d");
+    let ctx = this.context;
     var img = new Image;
     let dimension = this.target.find(".canvas_holder canvas").width();
     img.onload = function(){

gradio/static/js/interfaces/input/textbox.js

@@ -1,6 +1,8 @@
 const textbox_input = {
   html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>
   <div class='input_text_saliency'></div>`,
+  disabled_html: `<textarea class="input_text" disabled></textarea>
+  <div class='input_text_saliency'></div>`,
   init: function() {},
   submit: function() {
     text = this.target.find(".input_text").val();

gradio/static/js/load_interfaces.js

@@ -26,7 +26,8 @@ $.getJSON("static/config.json", function(data) {
       config["input_interface_type"]]);
   output_interface = Object.create(output_to_object_map[
       config["output_interface_type"]]);
-  $("#input_interface").html(input_interface.html);
+  $("#input_interface").html(config.disabled ?
+    input_interface.disabled_html : input_interface.html);
   input_interface.target = $("#input_interface");
   set_interface_id(input_interface, 1)
   input_interface.init();