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

add kitchen sink

Browse Source
This commit is contained in:
Ali 2021-12-20 17:20:29 -08:00
parent c56cfbbdf8
commit 36f2da66ec
5 changed files with 170 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demo/kitchen_sink/run.py
View File

@ -59,19 +59,19 @@ iface = gr.Interface(
gr.inputs.Timeseries(x="time", y="value", optional=True),
],
outputs=[
gr.outputs.Textbox(),
gr.outputs.Label(),
gr.outputs.Audio(),
gr.outputs.Image(),
gr.outputs.Video(),
gr.outputs.KeyValues(),
gr.outputs.HighlightedText(),
gr.outputs.JSON(),
gr.outputs.HTML(),
gr.outputs.File(),
gr.outputs.Dataframe(),
gr.outputs.Carousel("image"),
gr.outputs.Timeseries(x="time", y="value")
gr.outputs.Textbox(label="Textbox"),
gr.outputs.Label(label="Label"),
gr.outputs.Audio(label="Audio"),
gr.outputs.Image(label="Image"),
gr.outputs.Video(label="Video"),
gr.outputs.KeyValues(label="KeyValues"),
gr.outputs.HighlightedText(label="HighlightedText"),
gr.outputs.JSON(label="JSON"),
gr.outputs.HTML(label="HTML"),
gr.outputs.File(label="File"),
gr.outputs.Dataframe(label="Dataframe"),
gr.outputs.Carousel("image", label="Carousel"),
gr.outputs.Timeseries(x="time", y="value", label="Timeseries")
],
theme="huggingface",
title="Kitchen Sink",

9
website/demos/run_demos.py
View File

@ -14,11 +14,12 @@ sys.path.insert(0, GRADIO_DEMO_DIR)
with open("demos.json") as demos_file:
demo_port_sets = json.load(demos_file)
def launch_demo(demo_file):
subprocess.call(f"python {demo_file}", shell=True)
def launch_demo(demo_folder):
subprocess.call(f"cd {demo_folder} && python run.py", shell=True)
for demo_name, port in demo_port_sets:
demo_file = os.path.join(GRADIO_DEMO_DIR, demo_name, "run.py")
demo_folder = os.path.join(GRADIO_DEMO_DIR, demo_name)
demo_file = os.path.join(demo_folder, "run.py")
with open(demo_file, 'r') as file:
filedata = file.read()
filedata = filedata.replace(
@ -26,7 +27,7 @@ for demo_name, port in demo_port_sets:
f'if __name__ == "__main__":\n iface.server_port={port}')
with open(demo_file, 'w') as file:
file.write(filedata)
demo_thread = threading.Thread(target=launch_demo, args=(demo_file,))
demo_thread = threading.Thread(target=launch_demo, args=(demo_folder,))
demo_thread.start()
start_time = time.time()

124
website/homepage/src/other_templates/kitchen_sink_template.html Normal file
View File

@ -0,0 +1,124 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gradio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
<link href="/gradio_static/bundle.css" rel="stylesheet">
<style></style>
</head>
<body>
<div class="bg-gray-100 p-2">
<div class="max-w-5xl mx-auto">
<div class="mb-2 text-center text-gray-800 font-semibold">THEME</div>
<div class="theme-set mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>
<div class="mb-2 text-center text-gray-800 font-semibold">
INPUTS (<a class="underline hover:text-blue-600" href="javascript:show_all_inputs();">all</a> / <a class="underline hover:text-blue-600" href="javascript:hide_all_inputs();">none</a>)
</div>
<div class="input-components mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>
<div class="mb-2 text-center text-gray-800 font-semibold">
OUTPUTS (<a class="underline hover:text-blue-600" href="javascript:show_all_outputs();">all</a> / <a class="underline hover:text-blue-600" href="javascript:hide_all_outputs();">none</a>)
</div>
<div class="output-components mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>
</div>
</div>
<div id="target"></div>
<script>
var set_theme = theme => {
if (theme.startsWith("dark")) {
document.querySelector("#target").classList.add("dark");
theme = theme.substring(4);
} else {
document.querySelector("#target").classList.remove("dark");
}
document.querySelector(".gradio_bg").setAttribute("theme", theme);
}
var hidden_inputs = new Set();
var hidden_outputs = new Set();
var reset_component_visibility = () => {
let style_element = document.querySelector("style");
let style_html = "";
if (hidden_inputs.size > 0) {
let inputs_selected = Array(...hidden_inputs).map(i => `.panel:nth-child(1) .component:nth-child(${i + 1})`).join(", ");
style_html += `${inputs_selected} { display: none !important }`;
}
if (hidden_outputs.size > 0) {
let outputs_selected = Array(...hidden_outputs).map(i => `.panel:nth-child(2) .component:nth-child(${i + 2})`).join(", ");
style_html += `${outputs_selected} { display: none !important }`;
}
style_element.innerHTML = style_html;
}
var toggle_input = index => {
if (hidden_inputs.has(index)) {
hidden_inputs.delete(index)
} else {
hidden_inputs.add(index)
}
reset_component_visibility();
}
var toggle_output = index => {
if (hidden_outputs.has(index)) {
hidden_outputs.delete(index)
} else {
hidden_outputs.add(index)
}
reset_component_visibility();
}
var show_all_inputs = () => {
document.querySelectorAll(".input-components input").forEach(n => n.checked = true);
hidden_inputs.clear();
reset_component_visibility();
}
var hide_all_inputs = () => {
document.querySelectorAll(".input-components input").forEach(n => n.checked = false);
window.config.input_components.forEach((_, i) => hidden_inputs.add(i));
reset_component_visibility();
}
var show_all_outputs = () => {
document.querySelectorAll(".output-components input").forEach(n => n.checked = true);
hidden_outputs.clear();
reset_component_visibility();
}
var hide_all_outputs = () => {
document.querySelectorAll(".output-components input").forEach(n => n.checked = false);
window.config.output_components.forEach((_, i) => hidden_outputs.add(i));
reset_component_visibility();
}
</script>
<script>
var demo_endpoint = "/demo";
window.config = [];
let themes = ["default", "huggingface", "grass", "peach", "darkdefault", "darkhuggingface", "darkgrass", "darkpeach"]
let theme_html = "";
for (let theme of themes) {
theme_html += `<label><input type="radio" name="theme" onclick="set_theme('${theme}')"> ${theme}</label>`;
}
document.querySelector(".theme-set").innerHTML = theme_html;
fetch('/demo/kitchen_sink/config')
.then(response => response.json())
.then(demo => {
demo.target = "target";
demo.endpoint = demo_endpoint + "/kitchen_sink/api/";
window.config = demo;
let input_html = "";
for (let [i, input_component] of demo["input_components"].entries()) {
input_html += `<label><input type="checkbox" checked name="input" onchange="toggle_input(${i})"> ${input_component["label"]}</label>`;
}
document.querySelector(".input-components").innerHTML = input_html;
let output_html = "";
for (let [i, output_component] of demo["output_components"].entries()) {
output_html += `<label><input type="checkbox" checked name="output" onchange="toggle_output(${i})"> ${output_component["label"]}</label>`;
}
document.querySelector(".output-components").innerHTML = output_html;
});
</script>
<script async src="/gradio_static/bundle.js"></script>
</body>
</html>

48
website/homepage/src/other_templates/theme-preview_template.html
View File

@ -1,48 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gradio</title>
<link href="/gradio_static/bundle.css" rel="stylesheet">
</head>
<body>
<div style="font-family:Verdana, Geneva, Tahoma, sans-serif; display: flex; justify-content: center; gap: 2rem; background-color: lightgray; padding: 2rem">
<label><input type="radio" name="theme" value="default"> default</label>
<label><input type="radio" name="theme" value="huggingface"> huggingface</label>
<label><input type="radio" name="theme" value="grass"> grass</label>
<label><input type="radio" name="theme" value="peach"> peach</label>
<label><input type="radio" name="theme" value="darkdefault"> darkdefault</label>
<label><input type="radio" name="theme" value="darkhuggingface"> darkhuggingface</label>
<label><input type="radio" name="theme" value="darkgrass"> darkgrass</label>
<label><input type="radio" name="theme" value="darkpeach"> darkpeach</label>
</div>
<div id="target"></div>
<script>
var demo_endpoint = "/demo";
window.config = [];
fetch('/demo/kitchen_sink/config')
.then(response => response.json())
.then(demo => {
demo.target = "target";
demo.endpoint = demo_endpoint + "/" + demo_name + "/api/";
window.config = demo;
});
</script>
<script async src="/gradio_static/bundle.js"></script>
<script>
var set_theme = theme => {
if (theme.startswith("dark")) {
document.querySelector("#target").classList.add("dark");
theme = theme.substring(5);
}
document.querySelector(".gradio_bg").setAttribute(theme);
}
</script>
</body>
</html>

28
website/nginx.conf Normal file
View File

@ -0,0 +1,28 @@
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 256;
multi_accept on;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
client_max_body_size 200M;
client_body_buffer_size 20M;
server {
listen 80;
location / {
proxy_pass http://localhost:8080/;
}
location /demo/ {
proxy_pass http://localhost:8070/demo/;
}
}
}