-
+
+
+
+
+
+
+
+
Click to Record from Microphone
+
Click to Stop Recording
+
+
-
Click to Record from Microphone
-
Click to Stop Recording
-
-
`,
state: "NO_AUDIO",
diff --git a/build/lib/gradio/static/js/interfaces/input/radio.js b/build/lib/gradio/static/js/interfaces/input/radio.js
index 15055d1f9c..c7a31b3552 100644
--- a/build/lib/gradio/static/js/interfaces/input/radio.js
+++ b/build/lib/gradio/static/js/interfaces/input/radio.js
@@ -1,7 +1,6 @@
const radio = {
html: ``,
init: function(opts) {
- this.target.css("height", "auto");
this.choices = opts.choices;
html = "
"
for ([index, choice] of opts.choices.entries()) {
diff --git a/build/lib/gradio/static/js/interfaces/input/sketchpad.js b/build/lib/gradio/static/js/interfaces/input/sketchpad.js
index ddc09830ad..e27362905e 100644
--- a/build/lib/gradio/static/js/interfaces/input/sketchpad.js
+++ b/build/lib/gradio/static/js/interfaces/input/sketchpad.js
@@ -1,15 +1,18 @@
const sketchpad_input = {
html: `
-
-
-
+ `,
init: function() {
var io = this;
var dimension = Math.min(this.target.find(".canvas_holder").width(),
diff --git a/build/lib/gradio/static/js/interfaces/input/slider.js b/build/lib/gradio/static/js/interfaces/input/slider.js
index e0336cbd33..0092510f7f 100644
--- a/build/lib/gradio/static/js/interfaces/input/slider.js
+++ b/build/lib/gradio/static/js/interfaces/input/slider.js
@@ -8,7 +8,6 @@ const slider = {
init: function(opts) {
let io = this;
this.minimum = opts.minimum;
- this.target.css("height", "auto");
var handle = this.target.find(".ui-slider-handle");
this.slider = this.target.find(".slider").slider({
create: function() {
diff --git a/build/lib/gradio/static/js/interfaces/input/textbox.js b/build/lib/gradio/static/js/interfaces/input/textbox.js
index 357200f857..583bee7f41 100644
--- a/build/lib/gradio/static/js/interfaces/input/textbox.js
+++ b/build/lib/gradio/static/js/interfaces/input/textbox.js
@@ -1,12 +1,9 @@
const textbox_input = {
html: `
`,
- disabled_html: `
-
`,
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)
diff --git a/build/lib/gradio/static/js/interfaces/input/webcam.js b/build/lib/gradio/static/js/interfaces/input/webcam.js
index 8d11057716..bc46754b34 100644
--- a/build/lib/gradio/static/js/interfaces/input/webcam.js
+++ b/build/lib/gradio/static/js/interfaces/input/webcam.js
@@ -1,10 +1,11 @@
const webcam = {
html: `
-
+
`,
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();
let h = this.target.find(".webcam_box").height();
let RATIO = 4/3;
diff --git a/build/lib/gradio/static/js/interfaces/output/audio.js b/build/lib/gradio/static/js/interfaces/output/audio.js
index 2451903b34..be63c7841b 100644
--- a/build/lib/gradio/static/js/interfaces/output/audio.js
+++ b/build/lib/gradio/static/js/interfaces/output/audio.js
@@ -1,9 +1,11 @@
const audio_output = {
html: `
-
+
+
`,
init: function(opts) {
},
diff --git a/build/lib/gradio/static/js/interfaces/output/file.js b/build/lib/gradio/static/js/interfaces/output/file.js
index 0c9249241f..12ca0f0f73 100644
--- a/build/lib/gradio/static/js/interfaces/output/file.js
+++ b/build/lib/gradio/static/js/interfaces/output/file.js
@@ -1,17 +1,28 @@
const file_output = {
html: `
-
-
+
+
+
`,
init: function(opts) {
- this.target.css("height", "auto");
},
output: function(data) {
- this.target.find(".output_text").text(data);
+ this.target.find(".file_name").text(data.name);
+ this.target.find(".file_size").text(prettyBytes(data.size));
+ this.target.find(".interface_mini_box")
+ .attr("href", "data:;base64," + data.data)
+ .attr("download", data.name);
},
submit: function() {
},
clear: function() {
- this.target.find(".output_text").empty();
+ this.target.find(".file_name").empty();
+ this.target.find(".file_size").empty();
+ this.target.find(".interface_mini_box")
+ .removeAttr("href")
+ .removeAttr("download");
}
}
diff --git a/build/lib/gradio/static/js/interfaces/output/highlighted_text.js b/build/lib/gradio/static/js/interfaces/output/highlighted_text.js
index e946edc1a9..dcb8eb3907 100644
--- a/build/lib/gradio/static/js/interfaces/output/highlighted_text.js
+++ b/build/lib/gradio/static/js/interfaces/output/highlighted_text.js
@@ -11,7 +11,6 @@ const highlighted_text = {
`,
init: function(opts) {
- this.target.css("height", "auto");
this.color_map = {};
if (opts.color_map) {
this.generate_category_legend(opts.color_map);
@@ -19,7 +18,6 @@ const highlighted_text = {
},
new_category_index: 0,
generate_category_legend: function(map) {
- console.log(map)
let default_colors = ["pink", "lightblue", "gold", "plum", "lightskyblue", "greenyellow", "khaki", "cyan", "moccasin", "lightgray"]
for (let category in map) {
if (category in this.color_map) {
diff --git a/build/lib/gradio/static/js/interfaces/output/html.js b/build/lib/gradio/static/js/interfaces/output/html.js
index 4976bf2992..fc6545085f 100644
--- a/build/lib/gradio/static/js/interfaces/output/html.js
+++ b/build/lib/gradio/static/js/interfaces/output/html.js
@@ -1,7 +1,6 @@
const html_output = {
html: ``,
init: function(opts) {
- this.target.css("height", "auto");
},
output: function(data) {
this.target.html(data);
diff --git a/build/lib/gradio/static/js/interfaces/output/image.js b/build/lib/gradio/static/js/interfaces/output/image.js
index e2a1b65126..71f88c18f1 100644
--- a/build/lib/gradio/static/js/interfaces/output/image.js
+++ b/build/lib/gradio/static/js/interfaces/output/image.js
@@ -1,8 +1,10 @@
const image_output = {
html: `
+
`,
init: function(opts) {},
output: function(data) {
diff --git a/build/lib/gradio/static/js/interfaces/output/json.js b/build/lib/gradio/static/js/interfaces/output/json.js
index d0c33c31f8..70c2bab341 100644
--- a/build/lib/gradio/static/js/interfaces/output/json.js
+++ b/build/lib/gradio/static/js/interfaces/output/json.js
@@ -2,7 +2,6 @@ const json_output = {
html: `
`,
init: function(opts) {
- this.target.css("height", "auto");
},
output: function(data) {
this.clear();
diff --git a/build/lib/gradio/static/js/interfaces/output/textbox.js b/build/lib/gradio/static/js/interfaces/output/textbox.js
index ebbe239ac6..7e01e4baa3 100644
--- a/build/lib/gradio/static/js/interfaces/output/textbox.js
+++ b/build/lib/gradio/static/js/interfaces/output/textbox.js
@@ -1,7 +1,6 @@
const textbox_output = {
html: `
`,
init: function(opts) {
- this.target.css("height", "auto");
},
output: function(data) {
this.target.find(".output_text").text(data);
diff --git a/build/lib/gradio/static/js/utils.js b/build/lib/gradio/static/js/utils.js
index 548bff2e67..ceab9e448a 100644
--- a/build/lib/gradio/static/js/utils.js
+++ b/build/lib/gradio/static/js/utils.js
@@ -78,3 +78,14 @@ function interpolate(val, rgb1, rgb2) {
function colorToString(rgb) {
return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}
+
+function prettyBytes(bytes) {
+ let units = ["B", "KB", "MB", "GB", "PB"];
+ let i = 0;
+ while (bytes > 1024) {
+ bytes /= 1024;
+ i++;
+ }
+ let unit = units[i];
+ return bytes.toFixed(1) + " " + unit;
+}
\ No newline at end of file
diff --git a/build/lib/gradio/templates/index.html b/build/lib/gradio/templates/index.html
index 818a98fef0..8b11c54ea6 100644
--- a/build/lib/gradio/templates/index.html
+++ b/build/lib/gradio/templates/index.html
@@ -35,6 +35,7 @@
+
diff --git a/demo/files.py b/demo/files.py
index 264c4f3d00..f15184c731 100644
--- a/demo/files.py
+++ b/demo/files.py
@@ -3,7 +3,6 @@ import random
def upload(file):
print(file.name)
- with file:
- return file.name
+ return "/mnt/c/Users/aliab/projects/gradio/gradio/static/js/interfaces/output/file.js"
-gr.Interface(upload, "file", "text").launch()
+gr.Interface(upload, "file", "file").launch()
diff --git a/demo/flip_image.py b/demo/flip_image.py
index 57eac30551..fd7cf96307 100644
--- a/demo/flip_image.py
+++ b/demo/flip_image.py
@@ -16,7 +16,7 @@ def flip10(i1, i2, i3, i4, i5):
return i1 + i2
gr.Interface(flip2,
- ["image"],
+ ["webcam"],
["image"],
examples=[
["images/cheetah1.jpg"],
diff --git a/demo/multi1.py b/demo/multi1.py
index a494e9ebe7..a5da5cf069 100644
--- a/demo/multi1.py
+++ b/demo/multi1.py
@@ -16,12 +16,12 @@ def answer_question(text, audio):
{"name": "Aziz", "age": 18},
{"name": "Fozan", "age": None},
]
- }, "
" + str(audio[1].shape) + "
", ""
+ }, "
" + str(audio[1].shape) + "
", audio
gr.Interface(answer_question,
[
gr.inputs.Dropdown(["cat", "dog", "bird"]),
- gr.inputs.Microphone(),
+ "microphone",
],
[
gr.outputs.HighlightedText(color_map={"good": "lightgreen", "bad": "pink"}),
diff --git a/demo/webcam.py b/demo/webcam.py
index 467472bc65..d84dd6c664 100644
--- a/demo/webcam.py
+++ b/demo/webcam.py
@@ -4,4 +4,4 @@ import numpy as np
def snap(image):
return image
-gr.Interface(snap, gr.inputs.Webcam(shape=(50,100)), "image").launch()
+gr.Interface(snap, gr.inputs.Image(shape=(100,100), image_mode="L", source="webcam"), "image").launch()
diff --git a/gradio/inputs.py b/gradio/inputs.py
index 4b6d1acc0b..9e29b64ea5 100644
--- a/gradio/inputs.py
+++ b/gradio/inputs.py
@@ -146,7 +146,7 @@ class CheckboxGroup(InputComponent):
Input type: Union[List[str], List[int]]
"""
- def __init__(self, choices, type="choices", label=None):
+ def __init__(self, choices, type="value", label=None):
'''
Parameters:
choices (List[str]): list of options to select from.
@@ -268,7 +268,6 @@ class Image(InputComponent):
return {
"image_mode": self.image_mode,
"source": self.source,
- "tools": self.tools,
**super().get_template_context()
}
@@ -323,6 +322,12 @@ class Audio(InputComponent):
self.type = type
super().__init__(label)
+ def get_template_context(self):
+ return {
+ "source": self.source,
+ **super().get_template_context()
+ }
+
@classmethod
def get_shortcut_implementations(cls):
return {
diff --git a/gradio/outputs.py b/gradio/outputs.py
index 17e852f6fa..071fc384e2 100644
--- a/gradio/outputs.py
+++ b/gradio/outputs.py
@@ -14,6 +14,7 @@ from numbers import Number
import warnings
import tempfile
import scipy
+import os
class OutputComponent(Component):
"""
@@ -318,10 +319,9 @@ class File(OutputComponent):
Output type: Union[file-like, str]
'''
- def __init__(self, type="file", label=None):
+ def __init__(self, label=None):
'''
Parameters:
- type (str): Type of value to be passed to component. "file" expects a file-like object, "filepath" expects a string to an output file.
label (str): component name in interface.
'''
super().__init__(label)
@@ -331,15 +331,14 @@ class File(OutputComponent):
def get_shortcut_implementations(cls):
return {
"file": {},
- "filepath": {type: "filepath"},
}
def postprocess(self, y):
- if self.type == "file":
-
- elif self.type == "filepath":
- else:
- raise ValueError("Unknown type: " + self.type + ". Please choose from: 'file', 'filepath'.")
+ return {
+ "name": os.path.basename(y),
+ "size": os.path.getsize(y),
+ "data": processing_utils.encode_file_to_base64(y, header=False)
+ }
class Dataframe(OutputComponent):
diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
index 5760c4834f..6850c04aa3 100644
--- a/gradio/processing_utils.py
+++ b/gradio/processing_utils.py
@@ -17,10 +17,12 @@ def decode_base64_to_image(encoding):
return Image.open(BytesIO(base64.b64decode(image_encoded)))
-def encode_file_to_base64(f, type="image", ext=None):
+def encode_file_to_base64(f, type="image", ext=None, header=True):
with open(f, "rb") as file:
encoded_string = base64.b64encode(file.read())
base64_str = str(encoded_string, 'utf-8')
+ if not header:
+ return base64_str
if ext is None:
ext = f.split(".")[-1]
return "data:" + type + "/" + ext + ";base64," + base64_str
diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index f5e0f64c2d..0c8479bc13 100644
--- a/gradio/static/css/gradio.css
+++ b/gradio/static/css/gradio.css
@@ -37,6 +37,7 @@
height: 180px;
}
.interface_max_box {
+ overflow: auto;
max-height: 360px;
}
.interface:not(*:last-child) {
diff --git a/gradio/static/css/interfaces/input/sketchpad.css b/gradio/static/css/interfaces/input/sketchpad.css
index de8d9064b6..8753456eae 100644
--- a/gradio/static/css/interfaces/input/sketchpad.css
+++ b/gradio/static/css/interfaces/input/sketchpad.css
@@ -37,10 +37,10 @@
.canvas_holder canvas {
background-color: white;
}
-.canvas_holder, .saliency_holder {
+.canvas_holder {
text-align: center;
width: 100%;
- height: 100%;
+ height: calc(100% - 36px);
}
.saliency_holder {
position: absolute;
diff --git a/gradio/static/css/interfaces/output/json.css b/gradio/static/css/interfaces/output/json.css
index cfaddb7191..e69de29bb2 100644
--- a/gradio/static/css/interfaces/output/json.css
+++ b/gradio/static/css/interfaces/output/json.css
@@ -1,15 +0,0 @@
-.output_text {
- width: 100%;
- font-size: 18px;
- outline: none;
- background-color: white;
- border: solid 1px lightgray;
- border-radius: 2px;
- box-sizing: border-box;
- padding: 4px;
- min-height: 30px;
- font-family: monospace;
- white-space: pre-wrap; /* CSS3 */
- white-space: -moz-pre-wrap; /* Firefox */
- word-wrap: break-word; /* IE */
-}
diff --git a/gradio/static/css/interfaces/output/label.css b/gradio/static/css/interfaces/output/label.css
index 2fa65e1e42..3e3952e621 100644
--- a/gradio/static/css/interfaces/output/label.css
+++ b/gradio/static/css/interfaces/output/label.css
@@ -40,6 +40,7 @@
.output_class {
font-weight: bold;
font-size: 36px;
+ padding: 32px 16px;;
flex-grow: 1;
display: flex;
align-items: center;
diff --git a/gradio/static/js/interfaces/input/audio.js b/gradio/static/js/interfaces/input/audio.js
index 7b2a318167..f84839b776 100644
--- a/gradio/static/js/interfaces/input/audio.js
+++ b/gradio/static/js/interfaces/input/audio.js
@@ -1,7 +1,7 @@
const audio_input = {
html: `
-
+
Drop Audio Here
- or -
Click to Upload
@@ -9,9 +9,9 @@ const audio_input = {
-
+
-
+
@@ -43,7 +43,7 @@ const audio_input = {
hideScrollbar: true
});
if (this.source == "microphone") {
- this.target.find(".file_zone").hide();
+ this.target.find(".mic_zone").removeClass("hidden");
this.target.find(".mic_zone").click(function() {
if (io.state == "NO_AUDIO") {
if (!has_audio_loaded) {
@@ -74,29 +74,62 @@ const audio_input = {
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
- console.log(reader.result)
- io.audio_data = reader.result;
- io.target.find(".player").removeClass("hidden");
- io.wavesurfer.load(io.audio_data);
- if (io.state == "STOP_RECORDING") {
- io.state = "RECORDED";
- io.submit();
- }
- io.state = "RECORDED";
+ io.load_preview_from_audio(reader.result);
}
if (io.interval_id) {
window.clearInterval(io.interval_id);
}
}
})
- } else if (self.type == "upload") {
- this.target.find(".mic_zone").hide();
-
+ } else if (this.source == "upload") {
+ this.target.find(".file_zone").removeClass("hidden");
+ this.target.find(".upload_zone").click(function (e) {
+ io.target.find(".hidden_upload").click();
+ });
+ this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
+ ".drop_zone", function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ })
+ this.target.on('drop', '.drop_zone', function(e) {
+ files = e.originalEvent.dataTransfer.files;
+ io.load_preview_from_files(files)
+ });
+ this.target.find('.hidden_upload').on('change', function (e) {
+ if (this.files) {
+ io.load_preview_from_files(this.files);
+ }
+ })
}
this.target.find(".playpause").click(function () {
io.wavesurfer.playPause();
})
},
+ load_preview_from_audio: function(audio) {
+ var io = this;
+ io.audio_data = audio;
+ io.target.find(".player").removeClass("hidden");
+ io.wavesurfer.load(io.audio_data);
+ if (io.state == "STOP_RECORDING") {
+ io.state = "RECORDED";
+ io.submit();
+ }
+ io.state = "RECORDED";
+ },
+ load_preview_from_files: function(files) {
+ if (!files.length || !window.FileReader) {
+ return
+ }
+ var ReaderObj = new FileReader()
+ ReaderObj.readAsDataURL(files[0])
+ ReaderObj.io = this;
+ this.state = "AUDIO_LOADING"
+ ReaderObj.onloadend = function() {
+ let io = this.io;
+ io.target.find(".upload_zone").hide();
+ io.load_preview_from_audio(this.result);
+ }
+ },
submit: function() {
if (this.state == "RECORDED") {
this.io_master.input(this.id, this.audio_data);
@@ -112,6 +145,7 @@ const audio_input = {
this.target.find(".recording").addClass("hidden");
this.target.find(".player").addClass("hidden");
this.target.find(".upload_zone").show();
+ this.target.find(".hidden_upload").prop("value", "")
if (this.wavesurfer) {
this.wavesurfer.stop();
}
diff --git a/gradio/static/js/interfaces/input/file.js b/gradio/static/js/interfaces/input/file.js
index ba3e740049..0f9a22c2d8 100644
--- a/gradio/static/js/interfaces/input/file.js
+++ b/gradio/static/js/interfaces/input/file.js
@@ -49,15 +49,7 @@ const file_input = {
io.target.find(".upload_zone").hide();
io.target.find(".file_display").removeClass("hide");
io.target.find(".file_name").text(files[0].name);
- let bytes = files[0].size;
- let units = ["B", "KB", "MB", "GB", "PB"];
- let i = 0;
- while (bytes > 1024) {
- bytes /= 1024;
- i++;
- }
- let unit = units[i];
- io.target.find(".file_size").text(bytes.toFixed(1) + " " + unit);
+ io.target.find(".file_size").text(prettyBytes(files[0].size));
io.file_data = this.result;
}
},
diff --git a/gradio/static/js/interfaces/input/image.js b/gradio/static/js/interfaces/input/image.js
index cb453c8409..94030d1faf 100644
--- a/gradio/static/js/interfaces/input/image.js
+++ b/gradio/static/js/interfaces/input/image.js
@@ -1,9 +1,26 @@
const image_input = {
html: `
-
+
Drop Image Here
- or -
Click to Upload
+
+
@@ -12,9 +29,6 @@ const image_input = {
-
-
-
@@ -30,25 +44,70 @@ const image_input = {
`,
init: function(opts) {
var io = this;
+ this.source = opts.source;
$('body').append(this.overlay_html.format(this.id));
this.overlay_target = $(`.overlay[interface_id=${this.id}]`);
- this.target.find(".upload_zone").click(function (e) {
- io.target.find(".hidden_upload").click();
- });
- this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
- ".drop_zone", function(e) {
- e.preventDefault();
- e.stopPropagation();
- })
- this.target.on('drop', '.drop_zone', function(e) {
- files = e.originalEvent.dataTransfer.files;
- io.load_preview_from_files(files)
- });
- this.target.find('.hidden_upload').on('change', function (e) {
- if (this.files) {
- io.load_preview_from_files(this.files);
- }
- })
+ if (this.source == "upload") {
+ io.target.find(".drop_zone").removeClass("hide");
+ this.target.find(".drop_zone").click(function (e) {
+ io.target.find(".hidden_upload").click();
+ });
+ this.target.on('drag dragstart dragend dragover dragenter dragleave drop',
+ ".drop_zone", function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ })
+ this.target.on('drop', '.drop_zone', function(e) {
+ files = e.originalEvent.dataTransfer.files;
+ io.load_preview_from_files(files)
+ });
+ this.target.find('.hidden_upload').on('change', function (e) {
+ if (this.files) {
+ io.load_preview_from_files(this.files);
+ }
+ })
+ } else if (this.source == "webcam") {
+ io.target.find(".webcam").removeClass("hide");
+ let w = this.target.find(".webcam_box").width();
+ let h = this.target.find(".webcam_box").height();
+ let RATIO = 4/3;
+ let dim = Math.min(h, w / RATIO);
+ Webcam.set({
+ image_format: 'jpeg',
+ width: dim * RATIO,
+ height: dim,
+ dest_width: dim * RATIO,
+ dest_height: dim,
+ })
+ Webcam.attach(this.target.find(".webcam_box")[0]);
+ io.target.find(".webcam").click(function() {
+ Webcam.snap(function(image_data) {
+ io.target.find(".webcam").hide();
+ io.target.find(".image_display").removeClass("hide");
+ io.set_image_data(image_data, /*update_editor=*/true);
+ io.state = "IMAGE_LOADED";
+ });
+ })
+ } else if (this.source == "canvas") {
+ io.target.find(".sketchpad").removeClass("hide");
+ 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 + '] .sketch',
+ width: dimension,
+ height: dimension
+ });
+ 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) {
+ io.target.find(".brush").removeClass("selected");
+ $(this).addClass("selected");
+ io.sketchpad.penSize = $(this).attr("size");
+ })
+ this.clear();
+ }
this.target.find('.edit_image').click(function (e) {
io.overlay_target.removeClass("hide");
})
@@ -72,42 +131,54 @@ const image_input = {
this.overlay_target.find('.tui_close').click(function (e) {
io.overlay_target.addClass("hide");
if ($(e.target).hasClass('tui_save')) {
- // if (io.tui_editor.ui.submenu == "crop") {
- // io.tui_editor._cropAction().crop());
- // }
io.set_image_data(io.tui_editor.toDataURL(), /*update_editor=*/false);
}
});
},
submit: function() {
var io = this;
- if (this.state == "IMAGE_LOADED") {
+ if (this.source == "canvas") {
+ var dataURL = this.canvas.toDataURL("image/png");
+ this.io_master.input(this.id, dataURL);
+ } else if (this.state == "IMAGE_LOADED") {
io.io_master.input(io.id, this.image_data);
+ } else if (this.source == "webcam") {
+ Webcam.snap(function(image_data) {
+ io.target.find(".webcam").hide();
+ io.target.find(".image_display").removeClass("hide");
+ io.set_image_data(image_data, /*update_editor=*/true);
+ io.state = "IMAGE_LOADED";
+ io.io_master.input(io.id, image_data);
+ });
}
},
clear: function() {
- this.target.find(".upload_zone").show();
- this.target.find(".image_preview").attr('src', '');
- this.target.find(".image_display").addClass("hide");
- this.target.find(".hidden_upload").prop("value", "")
- this.state = "NO_IMAGE";
- this.image_data = null;
+ if (this.source == "canvas") {
+ this.context.fillStyle = "#FFFFFF";
+ this.context.fillRect(0, 0, this.context.canvas.width, this.context.
+ canvas.height);
+ } else {
+ this.target.find(".upload_zone").show();
+ this.target.find(".image_preview").attr('src', '');
+ this.target.find(".image_display").addClass("hide");
+ this.target.find(".hidden_upload").prop("value", "")
+ this.state = "NO_IMAGE";
+ this.image_data = null;
+ }
},
state: "NO_IMAGE",
image_data: null,
- set_image_data: function(data, update_editor) {
+ set_image_data: function(image_data, update_editor) {
let io = this;
- resizeImage.call(this, data, 600, 600, function(image_data) {
- io.image_data = image_data
- io.target.find(".image_preview").attr('src', image_data);
- if (update_editor) {
- io.tui_editor.loadImageFromURL(io.image_data, 'input').then(function (sizeValue) {
- io.tui_editor.clearUndoStack();
- io.tui_editor.ui.activeMenuEvent();
- io.tui_editor.ui.resizeEditor({ imageSize: sizeValue });
- });
- }
- })
+ io.image_data = image_data
+ io.target.find(".image_preview").attr('src', image_data);
+ if (update_editor) {
+ io.tui_editor.loadImageFromURL(io.image_data, 'input').then(function (sizeValue) {
+ io.tui_editor.clearUndoStack();
+ io.tui_editor.ui.activeMenuEvent();
+ io.tui_editor.ui.resizeEditor({ imageSize: sizeValue });
+ });
+ }
},
load_preview_from_files: function(files) {
if (!files.length || !window.FileReader || !/^image/.test(files[0].type)) {
@@ -130,9 +201,21 @@ const image_input = {
},
load_example: function(data) {
let io = this;
- io.target.find(".upload_zone").hide();
- io.target.find(".image_display").removeClass("hide");
- io.set_image_data(data, /*update_editor=*/true);
- io.state = "IMAGE_LOADED"
+ if (this.source == "canvas") {
+ this.clear();
+ let ctx = this.context;
+ var img = new Image;
+ let dimension = this.target.find(".canvas_holder canvas").width();
+ img.onload = function(){
+ ctx.clearRect(0,0,dimension,dimension);
+ ctx.drawImage(img,0,0,dimension,dimension);
+ };
+ img.src = data;
+ } else {
+ io.target.find(".upload_zone").hide();
+ io.target.find(".image_display").removeClass("hide");
+ io.set_image_data(data, /*update_editor=*/true);
+ io.state = "IMAGE_LOADED";
+ }
}
}
diff --git a/gradio/static/js/interfaces/input/webcam.js b/gradio/static/js/interfaces/input/webcam.js
index 5733a887bb..bc46754b34 100644
--- a/gradio/static/js/interfaces/input/webcam.js
+++ b/gradio/static/js/interfaces/input/webcam.js
@@ -6,7 +6,6 @@ const webcam = {
`,
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();
let h = this.target.find(".webcam_box").height();
let RATIO = 4/3;
diff --git a/gradio/static/js/interfaces/output/file.js b/gradio/static/js/interfaces/output/file.js
index e384bd2f34..12ca0f0f73 100644
--- a/gradio/static/js/interfaces/output/file.js
+++ b/gradio/static/js/interfaces/output/file.js
@@ -1,7 +1,7 @@
const file_output = {
html: `
-
-
+
+
@@ -10,11 +10,19 @@ const file_output = {
init: function(opts) {
},
output: function(data) {
- this.target.find(".output_text").text(data);
+ this.target.find(".file_name").text(data.name);
+ this.target.find(".file_size").text(prettyBytes(data.size));
+ this.target.find(".interface_mini_box")
+ .attr("href", "data:;base64," + data.data)
+ .attr("download", data.name);
},
submit: function() {
},
clear: function() {
- this.target.find(".output_text").empty();
+ this.target.find(".file_name").empty();
+ this.target.find(".file_size").empty();
+ this.target.find(".interface_mini_box")
+ .removeAttr("href")
+ .removeAttr("download");
}
}
diff --git a/gradio/static/js/interfaces/output/highlighted_text.js b/gradio/static/js/interfaces/output/highlighted_text.js
index ff58266693..dcb8eb3907 100644
--- a/gradio/static/js/interfaces/output/highlighted_text.js
+++ b/gradio/static/js/interfaces/output/highlighted_text.js
@@ -18,7 +18,6 @@ const highlighted_text = {
},
new_category_index: 0,
generate_category_legend: function(map) {
- console.log(map)
let default_colors = ["pink", "lightblue", "gold", "plum", "lightskyblue", "greenyellow", "khaki", "cyan", "moccasin", "lightgray"]
for (let category in map) {
if (category in this.color_map) {
diff --git a/gradio/static/js/interfaces/output/label.js b/gradio/static/js/interfaces/output/label.js
index c952d89097..160aa6e576 100644
--- a/gradio/static/js/interfaces/output/label.js
+++ b/gradio/static/js/interfaces/output/label.js
@@ -1,11 +1,9 @@
const label_output = {
html: `
-
-
-
+
+
`,
init: function(opts) {},
diff --git a/gradio/static/js/utils.js b/gradio/static/js/utils.js
index 548bff2e67..ceab9e448a 100644
--- a/gradio/static/js/utils.js
+++ b/gradio/static/js/utils.js
@@ -78,3 +78,14 @@ function interpolate(val, rgb1, rgb2) {
function colorToString(rgb) {
return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}
+
+function prettyBytes(bytes) {
+ let units = ["B", "KB", "MB", "GB", "PB"];
+ let i = 0;
+ while (bytes > 1024) {
+ bytes /= 1024;
+ i++;
+ }
+ let unit = units[i];
+ return bytes.toFixed(1) + " " + unit;
+}
\ No newline at end of file
diff --git a/gradio/templates/index.html b/gradio/templates/index.html
index 818a98fef0..8b11c54ea6 100644
--- a/gradio/templates/index.html
+++ b/gradio/templates/index.html
@@ -35,6 +35,7 @@
+