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

resolved merge conflict

Browse Source
This commit is contained in:
Abubakar Abid 2019-03-09 17:48:52 -08:00
commit 97d4b6180e
27 changed files with 135 additions and 874 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build-interface.py
View File

@ -7,6 +7,7 @@ import time
parser = ArgumentParser(description='Arguments for Building Interface')
parser.add_argument('-i', '--inputs', type=str, help="name of input interface")
parser.add_argument('-o', '--outputs', type=str, help="name of output interface")
parser.add_argument('-d', '--delay', type=int, help="delay in processing", default=0)
share_parser = parser.add_mutually_exclusive_group(required=False)
share_parser.add_argument('--share', dest='share', action='store_true')
share_parser.add_argument('--no-share', dest='share', action='store_false')
@ -14,6 +15,11 @@ parser.set_defaults(share=False)
args = parser.parse_args()
def mdl(input):
time.sleep(args.delay)
return np.array(1)
def launch_interface(args):
io = gradio.Interface(inputs=args.inputs, outputs=args.outputs, model=lambda x:np.array(1), model_type='function')
httpd, _, _ = io.launch(share=args.share)

16
gradio/inputs.py
View File

@ -9,7 +9,7 @@ import base64
from gradio import preprocessing_utils
from io import BytesIO
import numpy as np
from PIL import Image
from PIL import Image, ImageOps
class AbstractInput(ABC):
"""
@ -43,13 +43,15 @@ class AbstractInput(ABC):
class Sketchpad(AbstractInput):
def __init__(self, preprocessing_fn=None, image_width=28, image_height=28):
def __init__(self, preprocessing_fn=None, image_width=28, image_height=28,
invert_colors=True):
self.image_width = image_width
self.image_height = image_height
self.invert_colors = invert_colors
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
return 'templates/sketchpad_input.html'
return 'templates/input/sketchpad.html'
def preprocess(self, inp):
"""
@ -58,6 +60,8 @@ class Sketchpad(AbstractInput):
content = inp.split(';')[1]
image_encoded = content.split(',')[1]
im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')
if self.invert_colors:
im = ImageOps.invert(im)
im = preprocessing_utils.resize_and_crop(im, (self.image_width, self.image_height))
array = np.array(im).flatten().reshape(1, self.image_width, self.image_height)
return array
@ -71,7 +75,7 @@ class Webcam(AbstractInput):
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
return 'templates/webcam_input.html'
return 'templates/input/webcam.html'
def preprocess(self, inp):
"""
@ -88,7 +92,7 @@ class Webcam(AbstractInput):
class Textbox(AbstractInput):
def get_template_path(self):
return 'templates/textbox_input.html'
return 'templates/input/textbox.html'
def preprocess(self, inp):
"""
@ -109,7 +113,7 @@ class ImageUpload(AbstractInput):
super().__init__(preprocessing_fn=preprocessing_fn)
def get_template_path(self):
return 'templates/image_upload_input.html'
return 'templates/input/image_upload.html'
def preprocess(self, inp):
"""

19
gradio/interface.py
View File

@ -167,7 +167,12 @@ class Interface:
if self.verbose:
print("To create a public link, set `share=True` in the argument to `launch()`")
site_ngrok_url = None
try: # Check if running interactively using ipython.
from_ipynb = get_ipython()
if 'google.colab' in str(from_ipynb):
site_ngrok_url = networking.setup_ngrok(server_port, websocket_port, output_directory)
except NameError:
pass
# Keep the server running in the background.
asyncio.get_event_loop().run_until_complete(start_server)
try:
@ -178,7 +183,7 @@ class Interface:
if inline is None:
try: # Check if running interactively using ipython.
_ = get_ipython()
from_ipynb = get_ipython()
inline = True
if browser is None:
browser = False
@ -193,6 +198,12 @@ class Interface:
webbrowser.open(path_to_server + networking.TEMPLATE_TEMP) # Open a browser tab with the interface.
if inline:
from IPython.display import IFrame
display(IFrame(path_to_server + networking.TEMPLATE_TEMP, width=1000, height=500))
if 'google.colab' in str(from_ipynb):
print("Cannot display Interface inline on google colab, public link created and displayed below.")
print("Model available publicly for 8 hours at: {}".format(
site_ngrok_url + '/' + networking.TEMPLATE_TEMP))
display(IFrame(site_ngrok_url + '/' + networking.TEMPLATE_TEMP, width=1000, height=500))
else:
display(IFrame(path_to_server + networking.TEMPLATE_TEMP, width=1000, height=500))
return httpd, path_to_server + networking.TEMPLATE_TEMP, site_ngrok_url
return httpd, path_to_server + networking.TEMPLATE_TEMP, site_ngrok_url

4
gradio/outputs.py
View File

@ -63,7 +63,7 @@ class Label(AbstractOutput):
return name
def get_template_path(self):
return 'templates/label_output.html'
return 'templates/output/label.html'
def postprocess(self, prediction):
"""
@ -94,7 +94,7 @@ class Label(AbstractOutput):
class Textbox(AbstractOutput):
def get_template_path(self):
return 'templates/textbox_output.html'
return 'templates/output/textbox.html'
def postprocess(self, prediction):
"""

7
gradio/static/css/gradio.css
View File

@ -139,6 +139,9 @@
.confidence_intervals > * {
vertical-align: bottom;
}
.flag.flagged {
background-color: pink !important;
}
.sketchpad canvas {
background-color: white;
@ -178,3 +181,7 @@
canvas {
border: solid 1px black;
}
textarea {
resize: none;
}

4
gradio/static/css/style.css
View File

@ -3,7 +3,7 @@ body {
font-size: 12px;
margin: 0;
}
button, input[type="submit"], input[type="reset"], input[type="text"], select[type="submit"] {
button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
background: none;
color: inherit;
border: none;
@ -12,7 +12,7 @@ button, input[type="submit"], input[type="reset"], input[type="text"], select[ty
cursor: pointer;
outline: inherit;
-webkit-appearance: none;
border-radius: 0;
border-radius: 0;
}
input[type="text"] {

BIN
gradio/static/img/logo_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

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

@ -1,6 +1,25 @@
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")){
@ -9,7 +28,7 @@ try {
var ws = new WebSocket("ws://127.0.0.1:" + SOCKET_PORT + "/")
}
ws.onerror = function(evt) {
console.log(evt)
notifyError(evt)
};
ws.onclose = function(event) {
console.log("WebSocket is closed now.");

255
gradio/static/js/audio-input.js
View File

@ -1,255 +0,0 @@
import InlineWorker from 'inline-worker';
export class Recorder {
config = {
bufferLen: 4096,
numChannels: 2,
mimeType: 'audio/wav'
};
recording = false;
callbacks = {
getBuffer: [],
exportWAV: []
};
constructor(source, cfg) {
Object.assign(this.config, cfg);
this.context = source.context;
this.node = (this.context.createScriptProcessor ||
this.context.createJavaScriptNode).call(this.context,
this.config.bufferLen, this.config.numChannels, this.config.numChannels);
this.node.onaudioprocess = (e) => {
if (!this.recording) return;
var buffer = [];
for (var channel = 0; channel < this.config.numChannels; channel++) {
buffer.push(e.inputBuffer.getChannelData(channel));
}
this.worker.postMessage({
command: 'record',
buffer: buffer
});
};
source.connect(this.node);
this.node.connect(this.context.destination); //this should not be necessary
let self = {};
this.worker = new InlineWorker(function () {
let recLength = 0,
recBuffers = [],
sampleRate,
numChannels;
this.onmessage = function (e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
numChannels = config.numChannels;
initBuffers();
}
function record(inputBuffer) {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel].push(inputBuffer[channel]);
}
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
let buffers = [];
for (let channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
let interleaved;
if (numChannels === 2) {
interleaved = interleave(buffers[0], buffers[1]);
} else {
interleaved = buffers[0];
}
let dataview = encodeWAV(interleaved);
let audioBlob = new Blob([dataview], {type: type});
this.postMessage({command: 'exportWAV', data: audioBlob});
}
function getBuffer() {
let buffers = [];
for (let channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
this.postMessage({command: 'getBuffer', data: buffers});
}
function clear() {
recLength = 0;
recBuffers = [];
initBuffers();
}
function initBuffers() {
for (let channel = 0; channel < numChannels; channel++) {
recBuffers[channel] = [];
}
}
function mergeBuffers(recBuffers, recLength) {
let result = new Float32Array(recLength);
let offset = 0;
for (let i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
let length = inputL.length + inputR.length;
let result = new Float32Array(length);
let index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (let i = 0; i < input.length; i++, offset += 2) {
let s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
function writeString(view, offset, string) {
for (let i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
function encodeWAV(samples) {
let buffer = new ArrayBuffer(44 + samples.length * 2);
let view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, numChannels, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, numChannels * 2, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
}, self);
this.worker.postMessage({
command: 'init',
config: {
sampleRate: this.context.sampleRate,
numChannels: this.config.numChannels
}
});
this.worker.onmessage = (e) => {
let cb = this.callbacks[e.data.command].pop();
if (typeof cb == 'function') {
cb(e.data.data);
}
};
}
record() {
this.recording = true;
}
stop() {
this.recording = false;
}
clear() {
this.worker.postMessage({command: 'clear'});
}
getBuffer(cb) {
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.getBuffer.push(cb);
this.worker.postMessage({command: 'getBuffer'});
}
exportWAV(cb, mimeType) {
mimeType = mimeType || this.config.mimeType;
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.exportWAV.push(cb);
this.worker.postMessage({
command: 'exportWAV',
type: mimeType
});
}
static
forceDownload(blob, filename) {
let url = (window.URL || window.webkitURL).createObjectURL(blob);
let link = window.document.createElement('a');
link.href = url;
link.download = filename || 'output.wav';
let click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
}
}
export default Recorder;

82
gradio/static/js/class-output.js
View File

@ -1,82 +0,0 @@
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 {
ws.onerror = function(evt) {
notifyError(evt)
};
ws.onmessage = function (event) {
sleep(300).then(() => {
// $(".output_class").text(event.data);
var data = JSON.parse(event.data)
// data = {
// label: "happy",
// confidences : [
// {
// label : "happy",
// confidence: 0.7
// },
// {
// label : "sad",
// confidence: 0.3
// },
// ]
// }
$(".output_class").text(data["label"])
$(".confidence_intervals").empty()
if ("confidences" in data) {
data["confidences"].forEach(function (c) {
var confidence = c["confidence"]
$(".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>`)
})
}
})
}
} catch (e) {
notifyError(e)
}
$('body').on('click', '.clear', function(e) {
$(".output_class").text("")
$(".confidence_intervals").empty()
})
function changeToFlagged() {
var f = document.getElementsByClassName("flag");
f[0].style.cssText = 'background-color:pink !important' ;
f[0].value="flagged";
}
function sendMessage() {
var m = document.getElementsByClassName("message");
m[0].style.cssText = 'background:lightgrey !important' ;
// m[0].style.cssText = 'display:none' ;
var s = document.getElementsByClassName("send-message");
s[0].style.cssText = 'background-color:lightgreen !important' ;
s[0].value="Sent!"
// c[0].value="flagged";
}

128
gradio/static/js/draw-a-digit.js
View File

@ -1,128 +0,0 @@
var canvas = document.getElementById('canvas');
context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
var predict_canvas = document.getElementById("predict_canvas");
var ctx = predict_canvas.getContext("2d");
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
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 ws = new WebSocket("ws://127.0.0.1:5679/")
ws.onerror = function(evt) {
notifyError(evt)
};
ws.onmessage = function (event) {
console.log(event.data);
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
ctx.font = "330px Arial";
ctx.fillStyle = "white";
sleep(300).then(() => {
ctx.fillText(event.data, 110, 310);
})
}
} catch (e) {
notifyError(e)
}
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var mouseY = e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop
;
paint = true;
addClick(mouseX, mouseY);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.getBoundingClientRect().left + document.documentElement.scrollLeft, e.pageY - this.getBoundingClientRect().top + document.documentElement.scrollTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.strokeStyle = "#FFF";
context.lineJoin = "round";
context.lineWidth = 25;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
$('#clear-button').click(function(e){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
})
$('#submit-button').click(function(e){
var dataURL = canvas.toDataURL("image/png");
ws.send(dataURL, function(e){
notifyError(e)
});
})

180
gradio/static/js/emotion-detector.js
View File

@ -1,180 +0,0 @@
videoWidth = 400;
videoHeight = 400;
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isiOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
function isMobile() {
return isAndroid() || isiOS();
}
var predict_canvas = document.getElementById("predict_canvas");
var predict_ctx = predict_canvas.getContext("2d");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function setupCamera() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error(
'Browser API navigator.mediaDevices.getUserMedia not available');
}
const video = document.getElementById('video');
video.width = videoWidth;
video.height = videoHeight;
const mobile = isMobile();
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
width: mobile ? undefined : videoWidth,
height: mobile ? undefined : videoHeight,
},
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
async function loadVideo() {
const video = await setupCamera();
video.play();
return video;
}
function detectPoseInRealTime(video) {
const flipHorizontal = true;
async function poseDetectionFrame() {
ctx.clearRect(0, 0, videoWidth, videoHeight);
ctx.save();
ctx.scale(-1, 1);
ctx.translate(-videoWidth, 0);
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
ctx.restore();
requestAnimationFrame(poseDetectionFrame);
}
poseDetectionFrame();
}
async function bindPage() {
let video;
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = 'this browser does not support video capture,' +
'or this device does not have a camera';
info.style.display = 'block';
throw e;
}
detectPoseInRealTime(video);
}
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// kick off the demo
bindPage();
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 ws = new WebSocket("ws://127.0.0.1:5679/")
ws.onerror = function(evt) {
notifyError(evt)
};
ws.onmessage = function (event) {
var emotion_dict = {0: "Angry", 1: "Disgust", 2: "Fear", 3: "Happy", 4: "Sad", 5: "Surprise", 6: "Neutral"}
console.log(event.data);
predict_ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Clears the canvas
predict_ctx.font = "60px Arial";
predict_ctx.fillStyle = "white";
sleep(300).then(() => {
// predict_ctx.fillText(emotion_dict[event.data], 110, 310);
predict_ctx.textAlign = "center";
predict_ctx.fillText(emotion_dict[event.data], 200, 200);
})
}
} catch (e) {
notifyError(e)
}
$('#clear-button').click(function(e){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
})
$('#submit-button').click(function(e){
var dataURL = canvas.toDataURL("image/png");
ws.send(dataURL, function(e){
notifyError(e)
});
})
$('#capture-button').click(function(e){
ctx.clearRect(0, 0, videoWidth, videoHeight);
ctx.save();
ctx.scale(-1, 1);
ctx.translate(-videoWidth, 0);
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
ctx.restore();
var dataURL = canvas.toDataURL("image/png");
ws.send(dataURL, function(e){
notifyError(e)
});
})

0
gradio/static/js/image-upload-input.js → gradio/static/js/interfaces/input/image_upload.js
View File

3
gradio/static/js/sketchpad-input.js → gradio/static/js/interfaces/input/sketchpad.js
View File

@ -13,14 +13,13 @@ $(".brush").click(function (e) {
$(this).addClass("selected")
sketchpad.penSize = $(this).attr("size")
})
$('body').on('click', '.clear', function(e) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
})
$('body').on('click', '.submit', function(e) {
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL)
ws.send(dataURL, function(e){
notifyError(e)
});
})

9
gradio/static/js/interfaces/input/textbox.js Normal file
View File

@ -0,0 +1,9 @@
$('body').on('click', '.clear', function(e) {
$(".input_text").val("");
})
$('body').on('click', '.submit', function(e) {
text = $(".input_text").val();
ws.send(text, function(e){
notifyError(e)
});
})

39
gradio/static/js/interfaces/output/label.js Normal file
View File

@ -0,0 +1,39 @@
ws.onmessage = function (event) {
var data = JSON.parse(event.data)
// data = {
// label: "happy",
// confidences : [
// {
// label : "happy",
// confidence: 0.7
// },
// {
// label : "sad",
// confidence: 0.3
// },
// ]
// }
$(".output_class").text(data["label"])
$(".confidence_intervals").empty()
if ("confidences" in data) {
data["confidences"].forEach(function (c) {
var confidence = c["confidence"]
$(".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>`)
})
}
}
$('body').on('click', '.clear', function(e) {
$(".output_class").text("")
$(".confidence_intervals").empty()
})
$('body').on('click', '.flag', function(e) {
if ($(".flag").hasClass("flagged")) {
$(".flag").removeClass("flagged").attr("value", "flag");
} else {
$(".flag").addClass("flagged").attr("value", "flagged");
}
})

6
gradio/static/js/interfaces/output/textbox.js Normal file
View File

@ -0,0 +1,6 @@
$('body').on('click', '.clear', function(e) {
$(".output_text").val("");
})
ws.onmessage = function (event) {
$(".output_text").val(event.data);
}

2
gradio/static/js/jquery-3.3.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
gradio/static/js/textbox-input.js
View File

@ -1,18 +0,0 @@
var text = $("#textbox-input").val();
$('#clear-button').click(function(e){
document.getElementById("textbox-input").value="";
})
$('#submit-button').click(function(e){
// var dataURL = canvas.toDataURL("image/png");
var text = $("#textbox-input").val();
console.log(text);
ws.send(text, function(e){
notifyError(e)
});
})

36
gradio/static/js/textbox-output.js
View File

@ -1,36 +0,0 @@
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 {
ws.onerror = function(evt) {
notifyError(evt)
};
ws.onmessage = function (event) {
console.log(event.data);
sleep(300).then(() => {
$("#textbox-output").val(event.data);
})
}
} catch (e) {
notifyError(e)
}

152
gradio/static/js/webcam-input.js
View File

@ -1,152 +0,0 @@
videoWidth = 400;
videoHeight = 400;
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isiOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
function isMobile() {
return isAndroid() || isiOS();
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
async function setupCamera() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error(
'Browser API navigator.mediaDevices.getUserMedia not available');
}
const video = document.getElementById('video');
video.width = videoWidth;
video.height = videoHeight;
const mobile = isMobile();
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': {
facingMode: 'user',
width: mobile ? undefined : videoWidth,
height: mobile ? undefined : videoHeight,
},
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
async function loadVideo() {
const video = await setupCamera();
video.play();
return video;
}
function detectPoseInRealTime(video) {
const flipHorizontal = true;
async function poseDetectionFrame() {
ctx.clearRect(0, 0, videoWidth, videoHeight);
ctx.save();
ctx.scale(-1, 1);
ctx.translate(-videoWidth, 0);
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
ctx.restore();
requestAnimationFrame(poseDetectionFrame);
}
poseDetectionFrame();
}
async function bindPage() {
let video;
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = 'this browser does not support video capture,' +
'or this device does not have a camera';
info.style.display = 'block';
throw e;
}
detectPoseInRealTime(video);
}
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// kick off the demo
bindPage();
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
});
}
$('#clear-button').click(function(e){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
ctx.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
})
$('#submit-button').click(function(e){
var dataURL = canvas.toDataURL("image/png");
ws.send(dataURL, function(e){
notifyError(e)
});
})
$('#capture-button').click(function(e){
ctx.clearRect(0, 0, videoWidth, videoHeight);
ctx.save();
ctx.scale(-1, 1);
ctx.translate(-videoWidth, 0);
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
ctx.restore();
var dataURL = canvas.toDataURL("image/png");
ws.send(dataURL, function(e){
notifyError(e)
});
})

2
gradio/templates/base_template.html
View File

@ -22,7 +22,7 @@
</div>
<div class="panel">
<div id="output"></div>
<input class="flag" type="submit" value="Flag" onclick="changeToFlagged()" />
<input type="button" class="flag" value="Flag"/>
</div>
</div>

3
gradio/templates/image_upload_input.html → gradio/templates/input/image_upload.html
View File

@ -6,6 +6,7 @@
</div>
<input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
</div>
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
<script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
<script src="../static/js/image-upload-input.js"></script>
<script src="../static/js/interfaces/input/image_upload.js"></script>

3
gradio/templates/sketchpad_input.html → gradio/templates/input/sketchpad.html
View File

@ -9,5 +9,6 @@
<canvas id="canvas"></canvas>
</div>
</div>
<script src="http://yiom.github.io/sketchpad/javascripts/sketchpad.js"></script>
<script src="../static/js/sketchpad-input.js"></script>
<script src="../static/js/interfaces/input/sketchpad.js"></script>

6
gradio/templates/input/textbox.html Normal file
View File

@ -0,0 +1,6 @@
<div class="gradio input text">
<div class="role">Input</div>
<textarea class="input_text" placeholder="Enter text here..."></textarea>
</div>
<script src="../static/js/interfaces/input/textbox.js"></script>

2
gradio/templates/label_output.html → gradio/templates/output/label.html
View File

@ -4,4 +4,4 @@
<div class="confidence_intervals">
</div>
</div>
<script src="../static/js/class-output.js"></script>
<script src="../static/js/interfaces/output/label.js"></script>

6
gradio/templates/output/textbox.html Normal file
View File

@ -0,0 +1,6 @@
<div class="gradio output text">
<div class="role">Output</div>
<textarea readonly class="output_text"></textarea>
</div>
<script src="../static/js/interfaces/output/textbox.js"></script>