This commit is contained in:
Abubakar Abid 2020-06-11 13:27:06 -05:00
commit ec7b1b73ee
23 changed files with 110 additions and 32 deletions

View File

@ -167,8 +167,10 @@ class Webcam(AbstractInput):
class Textbox(AbstractInput):
def __init__(self, sample_inputs=None):
def __init__(self, sample_inputs=None, lines=None, placeholder=None):
self.sample_inputs = sample_inputs
self.lines = lines
self.placeholder = placeholder
super().__init__()
def get_validation_inputs(self):
@ -177,6 +179,12 @@ class Textbox(AbstractInput):
def get_name(self):
return 'textbox'
def get_template_context(self):
return {
"lines": self.lines,
"placeholder": self.placeholder,
}
def preprocess(self, inp):
"""
By default, no pre-processing is applied to text.

View File

@ -73,8 +73,12 @@ class Interface:
def update_config_file(self, output_directory):
config = {
"input_interfaces": [iface.__class__.__name__.lower() for iface in self.input_interfaces],
"output_interfaces": [iface.__class__.__name__.lower() for iface in self.output_interfaces],
"input_interfaces": [
(iface.__class__.__name__.lower(), iface.get_template_context())
for iface in self.input_interfaces],
"output_interfaces": [
(iface.__class__.__name__.lower(), iface.get_template_context())
for iface in self.output_interfaces],
"function_count": len(self.predict),
"live": self.live,
"show_input": self.show_input,

View File

@ -92,10 +92,20 @@ class Label(AbstractOutput):
class Textbox(AbstractOutput):
def __init__(self, lines=None, placeholder=None):
self.lines = lines
self.placeholder = placeholder
super().__init__()
def get_name(self):
return 'textbox'
def get_template_context(self):
return {
"lines": self.lines,
"placeholder": self.placeholder,
}
def postprocess(self, prediction):
"""
"""

View File

@ -25,7 +25,7 @@ const image_input = {
</div>
</div>
`,
init: function() {
init: function(opts) {
var io = this;
$('body').append(this.overlay_html.format(this.id));
this.overlay_target = $(`.overlay[interface_id=${this.id}]`);

View File

@ -20,7 +20,7 @@ const microphone = {
</div>
`,
state: "NO_AUDIO",
init: function() {
init: function(opts) {
var io = this;
this.wavesurfer = WaveSurfer.create({
container: '.waveform',

View File

@ -1,9 +1,17 @@
const textbox_input = {
html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>
html: `<textarea class="input_text"></textarea>
<div class='input_text_saliency'></div>`,
disabled_html: `<textarea class="input_text" disabled></textarea>
<div class='input_text_saliency'></div>`,
init: function() {},
init: function(opts) {
if (opts.lines) {
this.target.find(".input_text").attr("rows", opts.lines).css("height", "auto");
this.target.css("height", "auto");
}
if (opts.placeholder) {
this.target.find(".input_text").attr("placeholder", opts.placeholder)
}
},
submit: function() {
text = this.target.find(".input_text").val();
this.io_master.input(this.id, text);

View File

@ -6,7 +6,7 @@ const webcam = {
<span class="snapped">Snapped!</span>
</button>
`,
init: function() {
init: function(opts) {
var io = this;
// this.target.find(".webcam_box").width(this.target.find(".webcam_box").width);
let w = this.target.find(".webcam_box").width();

View File

@ -2,7 +2,7 @@ const image_output = {
html: `
<img class="output_image" />
`,
init: function() {},
init: function(opts) {},
output: function(data) {
this.target.find(".output_image").attr('src', data).show();
},

View File

@ -6,7 +6,7 @@ const label_output = {
<div class="confidences"></div>
</div>
`,
init: function() {},
init: function(opts) {},
output: function(data) {
this.target.find(".output_class").html(data["label"])
this.target.find(".confidence_intervals > div").empty()

View File

@ -1,6 +1,14 @@
const textbox_output = {
html: `<textarea readonly class="output_text"></textarea>`,
init: function() {},
init: function(opts) {
if (opts.lines) {
this.target.find(".output_text").attr("rows", opts.lines).css("height", "auto");
this.target.css("height", "auto");
}
if (opts.placeholder) {
this.target.find(".output_text").attr("placeholder", opts.placeholder)
}
},
output: function(data) {
this.target.find(".output_text").text(data);
},

View File

@ -26,8 +26,8 @@ $.getJSON("static/config.json", function(data) {
let input_interfaces = [];
let output_interfaces = [];
for (let i = 0; i < config["input_interfaces"].length; i++) {
input_interface = Object.create(input_to_object_map[
config["input_interfaces"][i]]);
input_interface_data = config["input_interfaces"][i];
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
$(".input_interfaces").append(`
<div class="input_interface interface" interface_id=${_id}>
${input_interface.html}
@ -35,7 +35,7 @@ $.getJSON("static/config.json", function(data) {
`);
input_interface.target = $(`.input_interface[interface_id=${_id}]`);
set_interface_id(input_interface, _id);
input_interface.init();
input_interface.init(input_interface_data[1]);
input_interfaces.push(input_interface);
input_interface.io_master = io_master;
_id++;
@ -44,8 +44,9 @@ $.getJSON("static/config.json", function(data) {
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
$(".output_interfaces").append("<hr>");
}
output_interface_data = config["output_interfaces"][i];
output_interface = Object.create(output_to_object_map[
config["output_interfaces"][i]]);
output_interface_data[0]]);
$(".output_interfaces").append(`
<div class="output_interface interface" interface_id=${_id}>
${output_interface.html}
@ -53,7 +54,7 @@ $.getJSON("static/config.json", function(data) {
`);
output_interface.target = $(`.output_interface[interface_id=${_id}]`);
set_interface_id(output_interface, _id);
output_interface.init();
output_interface.init(output_interface_data[1]);
output_interfaces.push(output_interface);
output_interface.io_master = io_master;
_id++;

Binary file not shown.

View File

@ -167,8 +167,10 @@ class Webcam(AbstractInput):
class Textbox(AbstractInput):
def __init__(self, sample_inputs=None):
def __init__(self, sample_inputs=None, lines=None, placeholder=None):
self.sample_inputs = sample_inputs
self.lines = lines
self.placeholder = placeholder
super().__init__()
def get_validation_inputs(self):
@ -177,6 +179,12 @@ class Textbox(AbstractInput):
def get_name(self):
return 'textbox'
def get_template_context(self):
return {
"lines": self.lines,
"placeholder": self.placeholder,
}
def preprocess(self, inp):
"""
By default, no pre-processing is applied to text.

View File

@ -73,8 +73,12 @@ class Interface:
def update_config_file(self, output_directory):
config = {
"input_interfaces": [iface.__class__.__name__.lower() for iface in self.input_interfaces],
"output_interfaces": [iface.__class__.__name__.lower() for iface in self.output_interfaces],
"input_interfaces": [
(iface.__class__.__name__.lower(), iface.get_template_context())
for iface in self.input_interfaces],
"output_interfaces": [
(iface.__class__.__name__.lower(), iface.get_template_context())
for iface in self.output_interfaces],
"function_count": len(self.predict),
"live": self.live,
"show_input": self.show_input,

View File

@ -92,10 +92,20 @@ class Label(AbstractOutput):
class Textbox(AbstractOutput):
def __init__(self, lines=None, placeholder=None):
self.lines = lines
self.placeholder = placeholder
super().__init__()
def get_name(self):
return 'textbox'
def get_template_context(self):
return {
"lines": self.lines,
"placeholder": self.placeholder,
}
def postprocess(self, prediction):
"""
"""

View File

@ -25,7 +25,7 @@ const image_input = {
</div>
</div>
`,
init: function() {
init: function(opts) {
var io = this;
$('body').append(this.overlay_html.format(this.id));
this.overlay_target = $(`.overlay[interface_id=${this.id}]`);

View File

@ -20,7 +20,7 @@ const microphone = {
</div>
`,
state: "NO_AUDIO",
init: function() {
init: function(opts) {
var io = this;
this.wavesurfer = WaveSurfer.create({
container: '.waveform',

View File

@ -1,9 +1,17 @@
const textbox_input = {
html: `<textarea class="input_text" placeholder="Enter text here..."></textarea>
html: `<textarea class="input_text"></textarea>
<div class='input_text_saliency'></div>`,
disabled_html: `<textarea class="input_text" disabled></textarea>
<div class='input_text_saliency'></div>`,
init: function() {},
init: function(opts) {
if (opts.lines) {
this.target.find(".input_text").attr("rows", opts.lines).css("height", "auto");
this.target.css("height", "auto");
}
if (opts.placeholder) {
this.target.find(".input_text").attr("placeholder", opts.placeholder)
}
},
submit: function() {
text = this.target.find(".input_text").val();
this.io_master.input(this.id, text);

View File

@ -6,7 +6,7 @@ const webcam = {
<span class="snapped">Snapped!</span>
</button>
`,
init: function() {
init: function(opts) {
var io = this;
// this.target.find(".webcam_box").width(this.target.find(".webcam_box").width);
let w = this.target.find(".webcam_box").width();

View File

@ -2,7 +2,7 @@ const image_output = {
html: `
<img class="output_image" />
`,
init: function() {},
init: function(opts) {},
output: function(data) {
this.target.find(".output_image").attr('src', data).show();
},

View File

@ -6,7 +6,7 @@ const label_output = {
<div class="confidences"></div>
</div>
`,
init: function() {},
init: function(opts) {},
output: function(data) {
this.target.find(".output_class").html(data["label"])
this.target.find(".confidence_intervals > div").empty()

View File

@ -1,6 +1,14 @@
const textbox_output = {
html: `<textarea readonly class="output_text"></textarea>`,
init: function() {},
init: function(opts) {
if (opts.lines) {
this.target.find(".output_text").attr("rows", opts.lines).css("height", "auto");
this.target.css("height", "auto");
}
if (opts.placeholder) {
this.target.find(".output_text").attr("placeholder", opts.placeholder)
}
},
output: function(data) {
this.target.find(".output_text").text(data);
},

View File

@ -26,8 +26,8 @@ $.getJSON("static/config.json", function(data) {
let input_interfaces = [];
let output_interfaces = [];
for (let i = 0; i < config["input_interfaces"].length; i++) {
input_interface = Object.create(input_to_object_map[
config["input_interfaces"][i]]);
input_interface_data = config["input_interfaces"][i];
input_interface = Object.create(input_to_object_map[input_interface_data[0]]);
$(".input_interfaces").append(`
<div class="input_interface interface" interface_id=${_id}>
${input_interface.html}
@ -35,7 +35,7 @@ $.getJSON("static/config.json", function(data) {
`);
input_interface.target = $(`.input_interface[interface_id=${_id}]`);
set_interface_id(input_interface, _id);
input_interface.init();
input_interface.init(input_interface_data[1]);
input_interfaces.push(input_interface);
input_interface.io_master = io_master;
_id++;
@ -44,8 +44,9 @@ $.getJSON("static/config.json", function(data) {
if (i != 0 && i % (config["output_interfaces"].length / config.function_count) == 0) {
$(".output_interfaces").append("<hr>");
}
output_interface_data = config["output_interfaces"][i];
output_interface = Object.create(output_to_object_map[
config["output_interfaces"][i]]);
output_interface_data[0]]);
$(".output_interfaces").append(`
<div class="output_interface interface" interface_id=${_id}>
${output_interface.html}
@ -53,7 +54,7 @@ $.getJSON("static/config.json", function(data) {
`);
output_interface.target = $(`.output_interface[interface_id=${_id}]`);
set_interface_id(output_interface, _id);
output_interface.init();
output_interface.init(output_interface_data[1]);
output_interfaces.push(output_interface);
output_interface.io_master = io_master;
_id++;