wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
179 lines
4.9 KiB
Svelte
179 lines
4.9 KiB
Svelte
<script context="module" lang="ts">
|
|
export { default as BaseHTML } from "./shared/HTML.svelte";
|
|
export { default as BaseExample } from "./Example.svelte";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { Gradio } from "@gradio/utils";
|
|
import HTML from "./shared/HTML.svelte";
|
|
import { StatusTracker } from "@gradio/statustracker";
|
|
import { Block, BlockLabel, IconButtonWrapper } from "@gradio/atoms";
|
|
import { Code as CodeIcon } from "@gradio/icons";
|
|
import { css_units } from "@gradio/utils";
|
|
import { prepare_files } from "@gradio/client";
|
|
import type { HTMLProps, HTMLEvents } from "./types.ts";
|
|
import type { Snippet } from "svelte";
|
|
|
|
let props = $props();
|
|
let children: Snippet | undefined = props.children;
|
|
const gradio = new Gradio<HTMLEvents, HTMLProps>(props);
|
|
|
|
let _props = $derived({
|
|
value: gradio.props.value ?? "",
|
|
label: gradio.shared.label,
|
|
visible: gradio.shared.visible,
|
|
...gradio.props.props
|
|
});
|
|
|
|
let old_value = $state(gradio.props.value);
|
|
$effect(() => {
|
|
if (JSON.stringify(old_value) !== JSON.stringify(gradio.props.value)) {
|
|
old_value = gradio.props.value;
|
|
gradio.dispatch("change");
|
|
}
|
|
});
|
|
|
|
type WatchEntry = { props: string[]; callback: () => void };
|
|
let watch_entries: WatchEntry[] = [];
|
|
|
|
function watch(propOrProps: string | string[], callback: () => void): void {
|
|
const prop_list = Array.isArray(propOrProps) ? propOrProps : [propOrProps];
|
|
watch_entries.push({ props: prop_list, callback });
|
|
}
|
|
|
|
function fire_watchers(changed_keys: string[]): void {
|
|
const seen = new Set<WatchEntry>();
|
|
for (const entry of watch_entries) {
|
|
if (entry.props.some((k) => changed_keys.includes(k))) {
|
|
seen.add(entry);
|
|
}
|
|
}
|
|
for (const entry of seen) {
|
|
try {
|
|
entry.callback();
|
|
} catch (e) {
|
|
console.error("Error in watch callback:", e);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function upload(file: File): Promise<{ path: string; url: string }> {
|
|
try {
|
|
const file_data = await prepare_files([file]);
|
|
const result = await gradio.shared.client.upload(
|
|
file_data,
|
|
gradio.shared.root,
|
|
undefined,
|
|
gradio.shared.max_file_size ?? undefined
|
|
);
|
|
if (result && result[0]) {
|
|
return { path: result[0].path, url: result[0].url! };
|
|
}
|
|
throw new Error("Upload failed");
|
|
} catch (e) {
|
|
gradio.dispatch("error", e instanceof Error ? e.message : String(e));
|
|
throw e;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Block
|
|
visible={gradio.shared.visible}
|
|
elem_id={gradio.shared.elem_id}
|
|
elem_classes={gradio.shared.elem_classes}
|
|
container={gradio.shared.container}
|
|
padding={gradio.props.padding !== false}
|
|
overflow_behavior="visible"
|
|
>
|
|
{#if gradio.shared.show_label && gradio.props.buttons && gradio.props.buttons.length > 0}
|
|
<IconButtonWrapper
|
|
buttons={gradio.props.buttons}
|
|
on_custom_button_click={(id) => {
|
|
gradio.dispatch("custom_button_click", { id });
|
|
}}
|
|
/>
|
|
{/if}
|
|
{#if gradio.shared.show_label}
|
|
<BlockLabel
|
|
Icon={CodeIcon}
|
|
show_label={gradio.shared.show_label}
|
|
label={gradio.shared.label}
|
|
float={true}
|
|
/>
|
|
{/if}
|
|
|
|
<StatusTracker
|
|
autoscroll={gradio.shared.autoscroll}
|
|
i18n={gradio.i18n}
|
|
{...gradio.shared.loading_status}
|
|
variant="center"
|
|
on_clear_status={() =>
|
|
gradio.dispatch("clear_status", gradio.shared.loading_status)}
|
|
/>
|
|
<div
|
|
class="html-container"
|
|
class:pending={gradio.shared.loading_status?.status === "pending" &&
|
|
gradio.shared.loading_status?.show_progress !== "hidden"}
|
|
style:min-height={gradio.props.min_height &&
|
|
gradio.shared.loading_status?.status !== "pending"
|
|
? css_units(gradio.props.min_height)
|
|
: undefined}
|
|
style:max-height={gradio.props.max_height
|
|
? css_units(gradio.props.max_height)
|
|
: undefined}
|
|
style:overflow-y={gradio.props.max_height ? "auto" : undefined}
|
|
class:label-padding={gradio.shared.show_label ?? undefined}
|
|
>
|
|
<HTML
|
|
props={_props}
|
|
html_template={gradio.props.html_template}
|
|
css_template={gradio.props.css_template}
|
|
js_on_load={gradio.props.js_on_load}
|
|
elem_classes={gradio.shared.elem_classes}
|
|
visible={gradio.shared.visible === "hidden"
|
|
? false
|
|
: gradio.shared.visible}
|
|
autoscroll={gradio.shared.autoscroll}
|
|
apply_default_css={gradio.props.apply_default_css}
|
|
head={gradio.props.head}
|
|
component_class_name={gradio.props.component_class_name}
|
|
{upload}
|
|
server={gradio.shared.server}
|
|
watch_fn={watch}
|
|
{fire_watchers}
|
|
on:event={(e) => {
|
|
gradio.dispatch(e.detail.type, e.detail.data);
|
|
}}
|
|
on:update_value={(e) => {
|
|
if (e.detail.property === "value") {
|
|
gradio.props.value = e.detail.data;
|
|
} else if (e.detail.property === "label") {
|
|
gradio.shared.label = e.detail.data;
|
|
} else if (e.detail.property === "visible") {
|
|
gradio.shared.visible = e.detail.data;
|
|
}
|
|
}}
|
|
>
|
|
{@render children?.()}
|
|
</HTML>
|
|
</div>
|
|
</Block>
|
|
|
|
<style>
|
|
.html-container {
|
|
padding: var(--block-padding);
|
|
}
|
|
|
|
.label-padding {
|
|
padding-top: var(--spacing-xxl);
|
|
}
|
|
|
|
div {
|
|
transition: 150ms;
|
|
}
|
|
|
|
.pending {
|
|
opacity: 0.2;
|
|
}
|
|
</style>
|