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

Refactor the HTML files for the gradio-lite development (#4739)

Browse Source
This commit is contained in:
Yuichiro Tachibana (Tsuchiya) 2023-06-30 18:07:28 +09:00 committed by GitHub
parent 1dc3c1a9a2
commit 622e8c62f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
js/app/lite.html
View File

@ -1,15 +1,6 @@
<!DOCTYPE html>
<!-- An entrypoint for the Wasm version development -->
<html
lang="en"
style="
margin: 0;
padding: 0;
min-height: 100%;
display: flex;
flex-direction: column;
"
>
<html style="margin: 0; padding: 0; height: 100%;">
<head>
<meta charset="utf-8" />
<meta
@ -17,27 +8,17 @@
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
/>
<script type="module" src="./src/lite/index.ts"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"></script>
<script type="module" src="./src/lite/index.ts"></script>
</head>
<body
style="
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
"
>
<body style="margin: 0; padding: 0; height: 100%;">
<div id="gradio-app"></div>
<textarea id="code-input" cols="30" rows="10">
@ -65,5 +46,31 @@ with gr.Blocks() as demo:
demo.launch()
</textarea>
<button id="exec-button">Execute</button>
<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>
</body>
</html>

27
js/app/src/lite/index.ts
View File

@ -140,30 +140,3 @@ export function create(options: Options): GradioAppController {
*/
// @ts-ignore
globalThis.createGradioApp = create;
declare let BUILD_MODE: string;
if (BUILD_MODE === "dev") {
const code_input = document.getElementById("code-input") as HTMLTextAreaElement;
const exec_button = document.getElementById("exec-button") as HTMLButtonElement;
const initial_code = code_input.value;
const controller = create({
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 = (): void => {
console.debug("exec_button.onclick");
controller.rerun(code_input.value);
}
}

38
js/lite/index.html
View File

@ -1,15 +1,6 @@
<!DOCTYPE html>
<!-- A demo HTML file to test the bundled JS and CSS files -->
<html
lang="en"
style="
margin: 0;
padding: 0;
min-height: 100%;
display: flex;
flex-direction: column;
"
>
<html style="margin: 0; padding: 0; height: 100%">
<head>
<meta charset="utf-8" />
<meta
@ -17,34 +8,21 @@
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
/>
<script type="module" crossorigin src="./dist/lite.js"></script>
<link rel="stylesheet" href="./dist/lite.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"></script>
<script type="module" crossorigin src="./dist/lite.js"></script>
<link rel="stylesheet" href="./dist/lite.css" />
</head>
<body
style="
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
"
>
<body style="margin: 0; padding: 0; height: 100%">
<div id="gradio-app"></div>
</body>
<script>
window.addEventListener("DOMContentLoaded", function () {
// <script type="module" /> is loaded asynchronously, so we need to wait for it to load before we can use it.
<script type="module"> // type="module" is necessary to use `createGradioApp()`, which is loaded with <script type="module" /> tag above.
createGradioApp({
target: document.getElementById("gradio-app"),
pyCode: `
@ -67,6 +45,6 @@ demo.launch()
controlPageTitle: false,
appMode: true
});
});
</script>
</script>
</body>
</html>