mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix all interfaces

Browse Source
This commit is contained in:
Your Name 2019-04-10 10:50:43 -07:00
parent ee10b648d4
commit ead5ed5d57
11 changed files with 70 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build-interface.py
View File

@ -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):

2
gradio/networking.py
View File

@ -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 = {

2
gradio/static/css/interfaces/output/image.css
View File

@ -1,4 +1,4 @@
.output_image img {
.output_image {
width: 100%;
height: 100%;
object-fit: contain;

4
gradio/static/css/interfaces/output/label.css
View File

@ -31,4 +31,8 @@
.output_class {
font-weight: bold;
font-size: 36px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}

76
gradio/static/js/all-io.js
View File

@ -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';

3
gradio/static/js/all_io.js
View File

@ -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']);
}
}

6
gradio/static/js/interfaces/input/sketchpad.js
View File

@ -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() {

22
gradio/static/js/interfaces/output/image.js
View File

@ -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();
})

72
gradio/static/js/interfaces/output/label.js
View File

@ -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)
})
})

18
gradio/static/js/interfaces/output/textbox.js
View File

@ -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("");
})

19
gradio/static/js/load_interfaces.js
View File

@ -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) {