my_gradio / js /lite /src /dev /App.svelte
xray918's picture
Upload folder using huggingface_hub
0ad74ed verified
<script lang="ts">
import type { create as createType } from "..";
// @ts-ignore
const create: typeof createType = globalThis.createGradioApp;
type CreateOptions = Parameters<typeof create>[0];
import { onMount, onDestroy } from "svelte";
interface EditorFile {
name: string;
content: string | ArrayBufferView;
}
let editorFiles: EditorFile[] = [
{
name: "app.py",
content: `
import gradio as gr
def fn(x):
return x
demo = gr.Interface(
fn=fn,
inputs=gr.Textbox(),
outputs=gr.Textbox(),
)
demo.launch()
`
},
{
name: "greeting.py",
content: `
def hi(name):
return "Hi " + name + "!"`
}
];
let entrypoint = editorFiles[0].name;
$: files = editorFiles.reduce<NonNullable<CreateOptions["files"]>>(
(acc, file) => {
acc[file.name] = {
data: file.content
};
return acc;
},
{}
);
let requirements_txt = "";
function parse_requirements(text: string): string[] {
return text
.split("\n")
.map((line) => line.trim())
.filter((line) => line.length > 0 && !line.startsWith("#"));
}
const requirements = parse_requirements(requirements_txt);
let controller: ReturnType<typeof create>;
onMount(() => {
controller = create({
target: document.getElementById("gradio-app")!,
files,
entrypoint,
requirements,
sharedWorkerMode: true,
info: true,
container: true,
isEmbed: false,
initialHeight: "300px",
eager: false,
themeMode: null,
autoScroll: false,
controlPageTitle: false,
appMode: true,
playground: false,
layout: null
});
});
onDestroy(() => {
controller.unmount();
});
function execute(): void {
console.debug("exec_button.onclick");
editorFiles.forEach((file) => {
controller.write(file.name, file.content, {});
});
controller.run_file(entrypoint);
console.debug("Rerun finished");
}
function install(): void {
console.debug("install_button.onclick");
const requirements = parse_requirements(requirements_txt);
console.debug("requirements", requirements);
controller.install(requirements);
console.debug("Install finished");
}
let new_file_name = "";
function add_file(): void {
controller.write(new_file_name, "", {});
editorFiles = editorFiles.concat({
name: new_file_name,
content: ""
});
new_file_name = "";
}
function delete_file(delete_file_name: string): void {
controller.unlink(delete_file_name);
editorFiles = editorFiles.filter((file) => file.name !== delete_file_name);
}
</script>
<div class="container">
<div class="panel">
When the SharedWorker mode is enabled, access the URL below (for Chrome) and
click the "inspect" link of the worker to show the console log emitted from
the worker.
<pre><code>chrome://inspect/#workers</code></pre>
</div>
<div class="panel">
<h2>Files</h2>
{#each editorFiles as file (file.name)}
<div class="file-cell">
<div class="cell-header">
<h3 class="cell-title">{file.name}</h3>
<div>
<label>
<input
type="radio"
name="entrypoint"
bind:group={entrypoint}
value={file.name}
/>
Set as an entrypoint file
</label>
<button on:click={() => delete_file(file.name)}>Delete</button>
</div>
</div>
<textarea class="code-edit" bind:value={file.content} />
</div>
{/each}
<button on:click={execute}>Execute</button>
<div>
<h3>Create a new file</h3>
<input type="text" bind:value={new_file_name} />
<button on:click={add_file}>Create</button>
</div>
</div>
<div class="panel">
<h2>Install requirements</h2>
<textarea class="code-edit" bind:value={requirements_txt} />
<button on:click={install}>Install</button>
</div>
</div>
<style>
.container {
height: 100%;
overflow: scroll;
}
.panel {
padding: 8px;
box-sizing: border-box;
}
.panel .file-cell {
width: 100%;
}
.cell-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cell-title {
font-size: medium;
font-weight: bold;
margin: 0;
padding: 0;
}
.code-edit {
width: 100%;
height: 200px;
box-sizing: border-box;
}
</style>