diff --git a/gradio/networking.py b/gradio/networking.py index 1ffc42f365..4e0f61dfe0 100644 --- a/gradio/networking.py +++ b/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): """ diff --git a/gradio/static/css/interfaces/input/sketchpad.css b/gradio/static/css/interfaces/input/sketchpad.css index 09ad215f86..651a7f0721 100644 --- a/gradio/static/css/interfaces/input/sketchpad.css +++ b/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; } diff --git a/gradio/static/js/interfaces/input/sketchpad.js b/gradio/static/js/interfaces/input/sketchpad.js index 77c9cb8349..6c33ddfe93 100644 --- a/gradio/static/js/interfaces/input/sketchpad.js +++ b/gradio/static/js/interfaces/input/sketchpad.js @@ -10,22 +10,36 @@ const sketchpad_input = {
- +
`, + disabled_html: ` +
+
+ +
+
+ +
+
`, 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 ``; }, 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(){ diff --git a/gradio/static/js/interfaces/input/textbox.js b/gradio/static/js/interfaces/input/textbox.js index a7a391a1d7..8ca0ab1611 100644 --- a/gradio/static/js/interfaces/input/textbox.js +++ b/gradio/static/js/interfaces/input/textbox.js @@ -1,6 +1,8 @@ const textbox_input = { html: `
`, + disabled_html: ` +
`, init: function() {}, submit: function() { text = this.target.find(".input_text").val(); diff --git a/gradio/static/js/load_interfaces.js b/gradio/static/js/load_interfaces.js index db25fa2c64..8578f4889f 100644 --- a/gradio/static/js/load_interfaces.js +++ b/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();