2023-06-27 15:09:50 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!-- An entrypoint for the Wasm version development -->
|
2023-06-30 17:07:28 +08:00
|
|
|
<html style="margin: 0; padding: 0; height: 100%;">
|
2023-06-27 15:09:50 +08:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
|
|
<link
|
|
|
|
|
rel="preconnect"
|
|
|
|
|
href="https://fonts.gstatic.com"
|
|
|
|
|
crossorigin="anonymous"
|
|
|
|
|
/>
|
2023-06-30 17:07:28 +08:00
|
|
|
|
|
|
|
|
<script type="module" src="./src/lite/index.ts"></script>
|
2023-06-27 15:09:50 +08:00
|
|
|
</head>
|
|
|
|
|
|
2023-06-30 17:07:28 +08:00
|
|
|
<body style="margin: 0; padding: 0; height: 100%;">
|
2023-06-27 15:09:50 +08:00
|
|
|
<div id="gradio-app"></div>
|
2023-06-30 15:24:35 +08:00
|
|
|
|
|
|
|
|
<textarea id="code-input" cols="30" rows="10">
|
|
|
|
|
import gradio as gr
|
|
|
|
|
|
|
|
|
|
def greet(name):
|
|
|
|
|
return "Hello " + name + "!"
|
|
|
|
|
|
|
|
|
|
def upload_file(files):
|
|
|
|
|
file_paths = [file.name for file in files]
|
|
|
|
|
return file_paths
|
|
|
|
|
|
|
|
|
|
with gr.Blocks() as demo:
|
|
|
|
|
name = gr.Textbox(label="Name")
|
|
|
|
|
output = gr.Textbox(label="Output Box")
|
|
|
|
|
greet_btn = gr.Button("Greet")
|
|
|
|
|
greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
|
|
|
|
|
|
|
|
|
|
gr.File()
|
|
|
|
|
|
|
|
|
|
file_output = gr.File()
|
|
|
|
|
upload_button = gr.UploadButton("Click to Upload a File", file_types=["image", "video"], file_count="multiple")
|
|
|
|
|
upload_button.upload(upload_file, upload_button, file_output)
|
|
|
|
|
|
|
|
|
|
demo.launch()
|
|
|
|
|
</textarea>
|
|
|
|
|
<button id="exec-button">Execute</button>
|
2023-06-30 17:07:28 +08:00
|
|
|
|
|
|
|
|
<script type="module"> // type="module" is necessary to use `createGradioApp()`, which is loaded with <script type="module" /> tag above.
|
|
|
|
|
const code_input = document.getElementById("code-input");
|
|
|
|
|
const exec_button = document.getElementById("exec-button");
|
|
|
|
|
|
|
|
|
|
const initial_code = code_input.value;
|
|
|
|
|
|
|
|
|
|
const controller = createGradioApp({
|
|
|
|
|
target: document.getElementById("gradio-app"),
|
|
|
|
|
pyCode: initial_code,
|
|
|
|
|
info: true,
|
|
|
|
|
container: true,
|
|
|
|
|
isEmbed: false,
|
|
|
|
|
initialHeight: "300px",
|
|
|
|
|
eager: false,
|
|
|
|
|
themeMode: null,
|
|
|
|
|
autoScroll: false,
|
|
|
|
|
controlPageTitle: false,
|
|
|
|
|
appMode: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
exec_button.onclick = () => {
|
|
|
|
|
console.debug("exec_button.onclick");
|
|
|
|
|
controller.rerun(code_input.value);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-06-27 15:09:50 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
