mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

front end bulk data

Browse Source
This commit is contained in:
Your Name 2019-05-13 23:30:37 -07:00
parent be0556a8bc
commit 8c37a0dee6
6 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gradio/networking.py
View File

@ -23,9 +23,7 @@ TRY_NUM_PORTS = (
LOCALHOST_NAME = "localhost"
GRADIO_API_SERVER = "https://api.gradio.app/v1/tunnel-request"
BASE_TEMPLATE = pkg_resources.resource_filename(
"gradio", "templates/base_template.html"
)
STATIC_TEMPLATE_LIB = pkg_resources.resource_filename("gradio", "templates/")
STATIC_PATH_LIB = pkg_resources.resource_filename("gradio", "static/")
STATIC_PATH_TEMP = "static/"
TEMPLATE_TEMP = "index.html"
@ -44,7 +42,7 @@ def build_template(temp_dir, input_interface, output_interface):
Create HTML file with supporting JS and CSS files in a given directory.
:param temp_dir: string with path to temp directory in which the html file should be built
"""
copyfile(BASE_TEMPLATE, os.path.join(temp_dir, TEMPLATE_TEMP));
dir_util.copy_tree(STATIC_TEMPLATE_LIB, temp_dir)
dir_util.copy_tree(STATIC_PATH_LIB, os.path.join(temp_dir, STATIC_PATH_TEMP))
# Move association file to root of temporary directory.

25
gradio/static/css/bulk_style.css Normal file
View File

@ -0,0 +1,25 @@
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0;
}
nav {
text-align: center;
padding: 16px 0 4px;
}
nav img {
margin-right: auto;
height: 32px;
}
#bulk_rows tr {
text-align: center;
height: 40px;
}
#bulk_rows img {
text-align: center;
height: 100%;
}
#bulk_rows {
margin: 0 auto;
width: 70%;
}

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

@ -117,6 +117,10 @@
align-items: center;
}
.tests {
margin-top: 10px;
}
.test_panel > input[type="button"] {
max-width: 100px;
}

1
gradio/static/js/interfaces/input/image_upload.js
View File

@ -34,6 +34,7 @@ const image_input = {
<div><strong>Lighting</strong>: (adjusts the lighting to 9 different levels)</div>
<input type="button" class="panel_button light_test" value="Run"/>
</div>
<a href="bulk_data.html"><input type="button" class="panel_button" value="Bulk Data" style="margin-top: 10px;"/></a>
`,
init: function() {
var io = this;

34
gradio/templates/bulk_data.html Normal file
View File

@ -0,0 +1,34 @@
<html lang="en">
<head>
<title>Gradio</title>
<link rel="stylesheet" href="../static/css/bulk_style.css">
</head>
<body>
<nav>
<a href="https://gradio.app"><img src="../static/img/logo_inline.png" /></a>
</nav>
<table id="bulk_rows">
<thead>
<th>Image</th>
<th>Label</th>
</thead>
</table>
<script src="../static/js/vendor/jquery.min.js"></script>
<script>
data = `{"input": "input_2019-04-19-02-56-21.png", "output": {"label": 1}, "message": ""}
{"input": "input_2019-04-19-02-56-21.png", "output": {"label": 1}, "message": ""}
{"input": "input_2019-04-19-02-56-21.png", "output": {"label": 1, "confidences" : [{"label" : 1, "confidence" : 0.55}]}, "message": ""}`
let lines = data.split("\n");
lines.forEach((line) => {
let row_data = JSON.parse(line);
let output = row_data["output"];
$("#bulk_rows").append(`
<tr class="bulk_row">
<td><img src="${row_data["input"]}" /></td>
<td class="label">${output["label"] + (output["confidences"] ? ": " + Math.round(100 * output["confidences"][0]["confidence"]) + "%" : "")}</td>
</tr>
`)
})
</script>
</body>
</html>

0
gradio/templates/base_template.html → gradio/templates/index.html
View File