From ab82e758e9dccb93039dc1cd2f220c7ede91629e Mon Sep 17 00:00:00 2001 From: pngwn Date: Wed, 13 Sep 2023 14:21:09 +0100 Subject: [PATCH 1/8] tweaks --- demo/kitchen_sink/run.py | 13 +++++--- gradio/cli/commands/create.py | 16 ++++++--- gradio/routes.py | 1 - js/app/src/Index.svelte | 7 ++-- js/gradio-preview/src/dev_server.ts | 35 ++++++++++++++++++-- js/image/interactive/Image.svelte | 13 ++++---- js/image/interactive/InteractiveImage.svelte | 1 + js/image/static/StaticImage.svelte | 1 + pnpm-lock.yaml | 29 +++++++++++++++- 9 files changed, 94 insertions(+), 22 deletions(-) diff --git a/demo/kitchen_sink/run.py b/demo/kitchen_sink/run.py index 8bd475f0ece81..c6ccfb6b0b636 100755 --- a/demo/kitchen_sink/run.py +++ b/demo/kitchen_sink/run.py @@ -96,7 +96,12 @@ def fn( gr.CheckboxGroup(label="CheckboxGroup", choices=CHOICES, value=CHOICES[0:2]), gr.Radio(label="Radio", choices=CHOICES, value=CHOICES[2]), gr.Dropdown(label="Dropdown", choices=CHOICES), - gr.Dropdown(label="Multiselect Dropdown (Max choice: 2)", choices=CHOICES, multiselect=True, max_choices=2), + gr.Dropdown( + label="Multiselect Dropdown (Max choice: 2)", + choices=CHOICES, + multiselect=True, + max_choices=2, + ), gr.Image(label="Image"), gr.Image(label="Image w/ Cropper", tool="select"), gr.Image(label="Sketchpad", source="canvas"), @@ -113,8 +118,8 @@ def fn( gr.Audio(label="Audio"), gr.Image(label="Image"), gr.Video(label="Video"), - gr.HighlightedText(label="HighlightedText", - color_map={"punc": "pink", "test 0": "blue"} + gr.HighlightedText( + label="HighlightedText", color_map={"punc": "pink", "test 0": "blue"} ), gr.HighlightedText(label="HighlightedText", show_legend=True), gr.JSON(label="JSON"), @@ -155,4 +160,4 @@ def fn( ) if __name__ == "__main__": - demo.launch() \ No newline at end of file + demo.launch() diff --git a/gradio/cli/commands/create.py b/gradio/cli/commands/create.py index b98b7df116081..171c6344533fc 100644 --- a/gradio/cli/commands/create.py +++ b/gradio/cli/commands/create.py @@ -93,9 +93,14 @@ def ignore(s, names): source_package_json = json.load(open(str(frontend / "package.json"))) source_package_json["name"] = name.lower() for dep in source_package_json.get("dependencies", []): - source_package_json["dependencies"][dep] = get_js_dependency_version( - dep, p / "_frontend_code" - ) + # if curent working directory is the gradio repo, use the local version of the dependency + if ( + "gradio/js/gradio-preview/test" not in pathlib.Path.cwd().as_posix() + and dep.startswith("@gradio/") + ): + source_package_json["dependencies"][dep] = get_js_dependency_version( + dep, p / "_frontend_code" + ) json.dump( source_package_json, open(str(frontend / "package.json"), "w"), indent=2 @@ -125,7 +130,9 @@ def _create_backend(name: str, template: str, directory: pathlib.Path): from {name.lower()} import {name} with gr.Blocks() as demo: - {name}() + {name}(interactive=True) + {name}(interactive=False) + demo.launch() """ @@ -246,6 +253,7 @@ def _create( ) if pipe.returncode != 0: live.update(":red_square: NPM install [bold][red]failed[/][/]") + live.update(pipe.stdout) live.update(pipe.stderr) else: live.update(":white_check_mark: NPM install succeeded!") diff --git a/gradio/routes.py b/gradio/routes.py index 05c9a1857cb3a..73a599df4930f 100644 --- a/gradio/routes.py +++ b/gradio/routes.py @@ -685,7 +685,6 @@ async def get_queue_status(): async def upload_file( files: List[UploadFile] = File(...), ): - print("Here") output_files = [] file_manager = gradio.File() for input_file in files: diff --git a/js/app/src/Index.svelte b/js/app/src/Index.svelte index 26112c5b86b63..01ea9ad8b1d29 100644 --- a/js/app/src/Index.svelte +++ b/js/app/src/Index.svelte @@ -196,14 +196,15 @@ active_theme_mode = handle_darkmode(wrapper); } + //@ts-ignore const gradio_dev_mode = window.__GRADIO_DEV__; const server_port = "__GRADIO__SERVER_PORT__"; - console.log({ gradio_dev_mode, server_port }); - const api_url = BUILD_MODE === "dev" || gradio_dev_mode === "dev" - ? "http://localhost:7860" + ? `http://localhost:${ + typeof server_port === "number" ? server_port : 7860 + }` : host || space || src || location.origin; app = await client(api_url, { diff --git a/js/gradio-preview/src/dev_server.ts b/js/gradio-preview/src/dev_server.ts index 97834f13e4857..57ef144866adf 100644 --- a/js/gradio-preview/src/dev_server.ts +++ b/js/gradio-preview/src/dev_server.ts @@ -1,5 +1,5 @@ import { fileURLToPath } from "url"; -import { createServer, build } from "vite"; +import { createServer, build, createLogger } from "vite"; import { readdirSync, existsSync, readFileSync } from "fs"; import { join } from "path"; const __dirname = fileURLToPath(new URL(".", import.meta.url)); @@ -9,6 +9,21 @@ import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; import { read } from "vega"; // import { typescript } from "svelte-preprocess"; +const vite_messages_to_ignore = [ + "Default and named imports from CSS files are deprecated." +]; +const svelte_codes_to_ignore: Record = { + "reactive-component": "Icon" +}; + +const logger = createLogger(); +const originalWarning = logger.warn; +logger.warn = (msg, options) => { + if (vite_messages_to_ignore.some((m) => msg.includes(m))) return; + + originalWarning(msg, options); +}; + interface ServerOptions { component_dir: string; root_dir: string; @@ -29,6 +44,7 @@ export async function create_server({ const NODE_DIR = join(root_dir, "..", "..", "node", "dev"); const server = await createServer({ // any valid user config options, plus `mode` and `configFile` + customLogger: logger, mode: "development", configFile: false, root: root_dir, @@ -52,8 +68,21 @@ export async function create_server({ } }, plugins: [ + //@ts-ignore viteCommonjs(), + //@ts-ignore svelte({ + onwarn(warning, handler) { + if ( + svelte_codes_to_ignore.hasOwnProperty(warning.code) && + svelte_codes_to_ignore[warning.code] && + warning.message.includes(svelte_codes_to_ignore[warning.code]) + ) { + return; + } + + handler(warning); + }, prebundleSvelteLibraries: false, hot: true, preprocess: [ @@ -109,7 +138,9 @@ export async function create_server({ await server.listen(); - console.log(`[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`); + console.log( + `[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}` + ); } import * as fs from "fs"; diff --git a/js/image/interactive/Image.svelte b/js/image/interactive/Image.svelte index f14a0b623f0ca..748e3834a737d 100644 --- a/js/image/interactive/Image.svelte +++ b/js/image/interactive/Image.svelte @@ -3,7 +3,7 @@ import { createEventDispatcher, tick, onMount } from "svelte"; import { BlockLabel } from "@gradio/atoms"; import { Image, Sketch as SketchIcon } from "@gradio/icons"; - import type { SelectData } from "@gradio/utils"; + import type { SelectData, I18nFormatter } from "@gradio/utils"; import { get_coordinates_of_clicked_image } from "../shared/utils"; import Cropper from "./Cropper.svelte"; @@ -36,6 +36,7 @@ export let mask_opacity; export let selectable = false; export let root: string; + export let i18n: I18nFormatter; let sketch: Sketch; let cropper: Cropper; @@ -117,8 +118,6 @@ normalise_file(value_, root, null); } - $: console.log(value_); - function handle_image_load(event: Event): void { const element = event.currentTarget as HTMLImageElement; img_width = element.naturalWidth; @@ -227,12 +226,12 @@ on:crop={handle_save} /> (handle_clear(e), (tool = "editor"))} /> {:else if tool === "editor"} (tool = "select")} on:clear={handle_clear} editable @@ -347,12 +346,12 @@ {:else if tool === "select"} (handle_clear(e), (tool = "editor"))} /> {:else if tool === "editor"} (tool = "select")} on:clear={handle_clear} editable diff --git a/js/image/interactive/InteractiveImage.svelte b/js/image/interactive/InteractiveImage.svelte index cecfe54a9a1b6..6c1aeb84673fc 100644 --- a/js/image/interactive/InteractiveImage.svelte +++ b/js/image/interactive/InteractiveImage.svelte @@ -97,6 +97,7 @@ {pending} {streaming} {mirror_webcam} + i18n={gradio.i18n} > diff --git a/js/image/static/StaticImage.svelte b/js/image/static/StaticImage.svelte index 7fd60bc0ad3bc..30cae5f8138f4 100644 --- a/js/image/static/StaticImage.svelte +++ b/js/image/static/StaticImage.svelte @@ -67,5 +67,6 @@ {show_download_button} {selectable} {show_share_button} + i18n={gradio.i18n} /> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 738b2e12d2273..c643c73a4818c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -893,6 +893,33 @@ importers: specifier: ^4.4.9 version: 4.4.9(@types/node@20.3.1)(less@4.1.3)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.60.0)(sugarss@4.0.1) + js/gradio-preview/test/imageslider/frontend: + dependencies: + '@gradio/atoms': + specifier: workspace:^ + version: link:../../../../atoms + '@gradio/icons': + specifier: workspace:^ + version: link:../../../../icons + '@gradio/statustracker': + specifier: workspace:^ + version: link:../../../../statustracker + '@gradio/upload': + specifier: workspace:^ + version: link:../../../../upload + '@gradio/utils': + specifier: workspace:^ + version: link:../../../../utils + cropperjs: + specifier: ^1.5.12 + version: 1.5.12 + lazy-brush: + specifier: ^1.0.1 + version: 1.0.1 + resize-observer-polyfill: + specifier: ^1.5.1 + version: 1.5.1 + js/gradio-preview/test/newnewtext/frontend: dependencies: '@gradio/atoms': @@ -6481,7 +6508,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.16.3(svelte@3.59.2)(vite@4.3.9) + '@sveltejs/kit': 1.16.3(svelte@3.57.0)(vite@4.3.5) import-meta-resolve: 3.0.0 dev: true From c94a80f68464e0ff13a8e7c0520fd0e814c1e5f4 Mon Sep 17 00:00:00 2001 From: pngwn Date: Wed, 13 Sep 2023 16:21:58 +0100 Subject: [PATCH 2/8] fix examples --- .config/eslint.config.js | 2 +- demo/kitchen_sink/run.py | 2 +- js/app/package.json | 1 + js/app/src/Blocks.svelte | 49 +++++++++++++-- js/app/src/components/Dataset/Dataset.svelte | 43 ++++++++++--- js/app/src/components/Dataset/directory.ts | 37 ----------- js/app/src/components/directory.ts | 61 +++++++++++++------ js/fallback/CHANGELOG.md | 33 ++++++++++ js/fallback/example/Fallback.svelte | 19 ++++++ js/fallback/example/index.ts | 1 + .../interactive/InteractiveFallback.svelte | 32 ++++++++++ js/fallback/interactive/index.ts | 1 + js/fallback/package.json | 23 +++++++ js/fallback/static/StaticFallback.svelte | 32 ++++++++++ js/fallback/static/index.ts | 1 + js/gradio-preview/src/dev_server.ts | 10 +-- js/gradio-preview/src/index.ts | 13 ++-- js/markdown/static/MarkdownCode.svelte | 2 +- .../interactive/InteractiveTextbox.svelte | 3 +- js/video/interactive/InteractiveVideo.svelte | 2 - pnpm-lock.yaml | 26 ++++++++ 21 files changed, 306 insertions(+), 87 deletions(-) delete mode 100644 js/app/src/components/Dataset/directory.ts create mode 100644 js/fallback/CHANGELOG.md create mode 100644 js/fallback/example/Fallback.svelte create mode 100644 js/fallback/example/index.ts create mode 100644 js/fallback/interactive/InteractiveFallback.svelte create mode 100644 js/fallback/interactive/index.ts create mode 100644 js/fallback/package.json create mode 100644 js/fallback/static/StaticFallback.svelte create mode 100644 js/fallback/static/index.ts diff --git a/.config/eslint.config.js b/.config/eslint.config.js index 41f34981991b3..48a257bebbf8c 100644 --- a/.config/eslint.config.js +++ b/.config/eslint.config.js @@ -18,7 +18,7 @@ const js_rules_disabled = Object.fromEntries( const js_rules = { ...js_rules_disabled, - "no-console": ["error", { allow: ["warn", "error", "debug"] }], + "no-console": ["error", { allow: ["warn", "error", "debug", "info"] }], "no-constant-condition": "error", "no-dupe-args": "error", "no-extra-boolean-cast": "error", diff --git a/demo/kitchen_sink/run.py b/demo/kitchen_sink/run.py index c6ccfb6b0b636..0679cc17c7d86 100755 --- a/demo/kitchen_sink/run.py +++ b/demo/kitchen_sink/run.py @@ -156,7 +156,7 @@ def fn( title="Kitchen Sink", description="Try out all the components!", article="Learn more about [Gradio](http://gradio.app)", - cache_examples=True, + # cache_examples=True, ) if __name__ == "__main__": diff --git a/js/app/package.json b/js/app/package.json index 834e2ff06e446..3a70dcf08d2af 100644 --- a/js/app/package.json +++ b/js/app/package.json @@ -39,6 +39,7 @@ "@gradio/column": "workspace:^", "@gradio/dataframe": "workspace:^", "@gradio/dropdown": "workspace:^", + "@gradio/fallback": "workspace:^", "@gradio/file": "workspace:^", "@gradio/form": "workspace:^", "@gradio/gallery": "workspace:^", diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte index 17b01c49c5aa4..01e6d2cd5b047 100644 --- a/js/app/src/Blocks.svelte +++ b/js/app/src/Blocks.svelte @@ -3,7 +3,10 @@ import { _ } from "svelte-i18n"; import type { client } from "@gradio/client"; - import { component_map } from "./components/directory"; + import { + component_map, + fallback_component_map + } from "./components/directory"; import { create_loading_status_store, app_state } from "./stores"; import type { LoadingStatusCollection } from "./stores"; @@ -120,7 +123,7 @@ async function load_component( name: T, - mode: ComponentMeta["props"]["mode"] + mode: ComponentMeta["props"]["mode"] | "example" ): Promise<{ name: T; component: LoadedComponent; @@ -133,6 +136,16 @@ component: c as LoadedComponent }; } catch (e) { + if (mode === "example") { + try { + return load_custom_component(name, "example"); + } catch (e) { + return { + name, + component: await import("@gradio/fallback/example") + }; + } + } if (mode === "interactive") { try { const c = await component_map[name]["static"](); @@ -196,13 +209,20 @@ async function load_custom_component( name: T, - mode: ComponentMeta["props"]["mode"] + mode: ComponentMeta["props"]["mode"] | "example" ): Promise<{ name: T; component: LoadedComponent; }> { const comps = "__ROOT_PATH__"; try { + if ( + typeof comps !== "object" || + !comps?.[name] || + !comps?.[name]?.[mode] + ) { + throw new Error(`Component ${name} not found`); + } //@ts-ignore const c = await comps[name][mode](); return { @@ -212,6 +232,7 @@ } catch (e) { if (mode === "interactive") { try { + //@ts-ignore const c = await comps[name]["static"](); return { name, @@ -223,8 +244,8 @@ throw e; } } else { - console.error(`failed to load: ${name}`); - console.error(e); + // console.error(`failed to load: ${name}`); + // console.error(e); throw e; } } @@ -288,6 +309,24 @@ } __type_for_id.set(c.id, c.props.mode); + if (c.type === "dataset") { + const example_component_map = new Map(); + + (c.props.components as string[]).forEach((name: string) => { + if (example_component_map.has(name)) { + return; + } + let _c; + + //@ts-ignore + _c = load_component(name, "example"); + + example_component_map.set(name, _c); + }); + + c.props.component_map = example_component_map; + } + // maybe load custom const _c = c.props.custom_component diff --git a/js/app/src/components/Dataset/Dataset.svelte b/js/app/src/components/Dataset/Dataset.svelte index fdd87b503c1e6..c8005b221f740 100644 --- a/js/app/src/components/Dataset/Dataset.svelte +++ b/js/app/src/components/Dataset/Dataset.svelte @@ -1,10 +1,16 @@ handle_mouseenter(i)} on:mouseleave={() => handle_mouseleave()} > - {#if Object.keys(component_map).includes(components[0]) && component_map[components[0]]} + {#if Object.keys(component_map).includes(components[0]) && component_map.get(components[0])} {#each sample_row as { value, component }, j} {@const component_name = components[j]} - {#if component_name !== undefined && component_map[component_name] !== undefined} + {#if component_name !== undefined && component_map.get(component_name) !== undefined} import("@gradio/audio/static"), - interactive: () => import("@gradio/audio/interactive") + interactive: () => import("@gradio/audio/interactive"), + example: () => import("@gradio/audio/example") }, box: { static: () => import("@gradio/box/static") @@ -20,37 +21,44 @@ export const component_map = { }, checkbox: { static: () => import("@gradio/checkbox/static"), - interactive: () => import("@gradio/checkbox/interactive") + interactive: () => import("@gradio/checkbox/interactive"), + example: () => import("@gradio/checkbox/example") }, checkboxgroup: { static: () => import("@gradio/checkboxgroup/static"), - interactive: () => import("@gradio/checkboxgroup/interactive") + interactive: () => import("@gradio/checkboxgroup/interactive"), + example: () => import("@gradio/checkboxgroup/example") }, code: { static: () => import("@gradio/code/static"), - interactive: () => import("@gradio/code/interactive") + interactive: () => import("@gradio/code/interactive"), + example: () => import("@gradio/code/example") }, colorpicker: { static: () => import("@gradio/colorpicker/static"), - interactive: () => import("@gradio/colorpicker/interactive") + interactive: () => import("@gradio/colorpicker/interactive"), + example: () => import("@gradio/colorpicker/example") }, column: { static: () => import("@gradio/column/static") }, dataframe: { static: () => import("@gradio/dataframe/static"), - interactive: () => import("@gradio/dataframe/interactive") + interactive: () => import("@gradio/dataframe/interactive"), + example: () => import("@gradio/dataframe/example") }, dataset: { static: () => import("./Dataset") }, dropdown: { static: () => import("@gradio/dropdown/static"), - interactive: () => import("@gradio/dropdown/interactive") + interactive: () => import("@gradio/dropdown/interactive"), + example: () => import("@gradio/dropdown/example") }, file: { static: () => import("@gradio/file/static"), - interactive: () => import("@gradio/file/interactive") + interactive: () => import("@gradio/file/interactive"), + example: () => import("@gradio/file/example") }, form: { static: () => import("@gradio/form/static") @@ -65,11 +73,13 @@ export const component_map = { static: () => import("@gradio/highlightedtext/static") }, html: { - static: () => import("@gradio/html/static") + static: () => import("@gradio/html/static"), + example: () => import("@gradio/html/example") }, image: { static: () => import("@gradio/image/static"), - interactive: () => import("@gradio/image/interactive") + interactive: () => import("@gradio/image/interactive"), + example: () => import("@gradio/image/example") }, interpretation: { static: () => import("./Interpretation"), @@ -82,29 +92,34 @@ export const component_map = { static: () => import("@gradio/label/static") }, markdown: { - static: () => import("@gradio/markdown/static") + static: () => import("@gradio/markdown/static"), + example: () => import("@gradio/markdown/example") }, model3d: { static: () => import("@gradio/model3d/static"), - interactive: () => import("@gradio/model3d/interactive") + interactive: () => import("@gradio/model3d/interactive"), + example: () => import("@gradio/model3d/example") }, number: { static: () => import("@gradio/number/static"), - interactive: () => import("@gradio/number/interactive") + interactive: () => import("@gradio/number/interactive"), + example: () => import("@gradio/number/example") }, plot: { static: () => import("@gradio/plot/static") }, radio: { static: () => import("@gradio/radio/static"), - interactive: () => import("@gradio/radio/interactive") + interactive: () => import("@gradio/radio/interactive"), + example: () => import("@gradio/radio/example") }, row: { static: () => import("@gradio/row/static") }, slider: { static: () => import("@gradio/slider/static"), - interactive: () => import("@gradio/slider/interactive") + interactive: () => import("@gradio/slider/interactive"), + example: () => import("@gradio/slider/example") }, state: { static: () => import("./State") @@ -120,7 +135,8 @@ export const component_map = { }, textbox: { static: () => import("@gradio/textbox/static"), - interactive: () => import("@gradio/textbox/interactive") + interactive: () => import("@gradio/textbox/interactive"), + example: () => import("@gradio/textbox/example") }, uploadbutton: { static: () => import("@gradio/uploadbutton/static"), @@ -128,6 +144,17 @@ export const component_map = { }, video: { static: () => import("@gradio/video/static"), - interactive: () => import("@gradio/video/interactive") + interactive: () => import("@gradio/video/interactive"), + example: () => import("@gradio/video/example") } }; + +import InteractiveFallback from "@gradio/fallback/interactive"; +import StaticFallback from "@gradio/fallback/static"; +import ExampleFallback from "@gradio/fallback/example"; + +export const fallback_component_map = { + interactive: InteractiveFallback, + static: StaticFallback, + example: ExampleFallback +}; diff --git a/js/fallback/CHANGELOG.md b/js/fallback/CHANGELOG.md new file mode 100644 index 0000000000000..f22514e70bb1d --- /dev/null +++ b/js/fallback/CHANGELOG.md @@ -0,0 +1,33 @@ +# @gradio/checkbox + +## 0.1.1 + +### Fixes + +- [#5340](https://github.com/gradio-app/gradio/pull/5340) [`df090e89`](https://github.com/gradio-app/gradio/commit/df090e89f74a16e4cb2b700a1e3263cabd2bdd91) - Fix Checkbox select dispatch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)! + +## 0.1.0 + +### Highlights + +#### Improve startup performance and markdown support ([#5279](https://github.com/gradio-app/gradio/pull/5279) [`fe057300`](https://github.com/gradio-app/gradio/commit/fe057300f0672c62dab9d9b4501054ac5d45a4ec)) + +##### Improved markdown support + +We now have better support for markdown in `gr.Markdown` and `gr.Dataframe`. Including syntax highlighting and Github Flavoured Markdown. We also have more consistent markdown behaviour and styling. + +##### Various performance improvements + +These improvements will be particularly beneficial to large applications. + +- Rather than attaching events manually, they are now delegated, leading to a significant performance improvement and addressing a performance regression introduced in a recent version of Gradio. App startup for large applications is now around twice as fast. +- Optimised the mounting of individual components, leading to a modest performance improvement during startup (~30%). +- Corrected an issue that was causing markdown to re-render infinitely. +- Ensured that the `gr.3DModel` does re-render prematurely. + + Thanks [@pngwn](https://github.com/pngwn)! + +### Features + +- [#5215](https://github.com/gradio-app/gradio/pull/5215) [`fbdad78a`](https://github.com/gradio-app/gradio/commit/fbdad78af4c47454cbb570f88cc14bf4479bbceb) - Lazy load interactive or static variants of a component individually, rather than loading both variants regardless. This change will improve performance for many applications. Thanks [@pngwn](https://github.com/pngwn)! +- [#5216](https://github.com/gradio-app/gradio/pull/5216) [`4b58ea6d`](https://github.com/gradio-app/gradio/commit/4b58ea6d98e7a43b3f30d8a4cb6f379bc2eca6a8) - Update i18n tokens and locale files. Thanks [@hannahblair](https://github.com/hannahblair)! \ No newline at end of file diff --git a/js/fallback/example/Fallback.svelte b/js/fallback/example/Fallback.svelte new file mode 100644 index 0000000000000..6b6a4a08c938f --- /dev/null +++ b/js/fallback/example/Fallback.svelte @@ -0,0 +1,19 @@ + + +
+ {value} +
+ + diff --git a/js/fallback/example/index.ts b/js/fallback/example/index.ts new file mode 100644 index 0000000000000..595694a6cfd48 --- /dev/null +++ b/js/fallback/example/index.ts @@ -0,0 +1 @@ +export { default } from "./Fallback.svelte"; diff --git a/js/fallback/interactive/InteractiveFallback.svelte b/js/fallback/interactive/InteractiveFallback.svelte new file mode 100644 index 0000000000000..cd1bbf0d74cf1 --- /dev/null +++ b/js/fallback/interactive/InteractiveFallback.svelte @@ -0,0 +1,32 @@ + + + + + + + diff --git a/js/fallback/interactive/index.ts b/js/fallback/interactive/index.ts new file mode 100644 index 0000000000000..c38e7d2fa9712 --- /dev/null +++ b/js/fallback/interactive/index.ts @@ -0,0 +1 @@ +export { default } from "./InteractiveFallback.svelte"; diff --git a/js/fallback/package.json b/js/fallback/package.json new file mode 100644 index 0000000000000..f7a990c833b9e --- /dev/null +++ b/js/fallback/package.json @@ -0,0 +1,23 @@ +{ + "name": "@gradio/fallback", + "version": "0.1.1", + "description": "Gradio UI packages", + "type": "module", + "main": "./index.svelte", + "author": "", + "license": "ISC", + "private": true, + "main_changeset": true, + "exports": { + "./package.json": "./package.json", + "./interactive": "./interactive/index.ts", + "./static": "./static/index.ts", + "./example": "./example/index.ts" + }, + "dependencies": { + "@gradio/atoms": "workspace:^", + "@gradio/statustracker": "workspace:^", + "@gradio/utils": "workspace:^", + "@zerodevx/svelte-json-view": "^1.0.7" + } +} diff --git a/js/fallback/static/StaticFallback.svelte b/js/fallback/static/StaticFallback.svelte new file mode 100644 index 0000000000000..cd1bbf0d74cf1 --- /dev/null +++ b/js/fallback/static/StaticFallback.svelte @@ -0,0 +1,32 @@ + + + + + + + diff --git a/js/fallback/static/index.ts b/js/fallback/static/index.ts new file mode 100644 index 0000000000000..c031ab5467cda --- /dev/null +++ b/js/fallback/static/index.ts @@ -0,0 +1 @@ +export { default } from "./StaticFallback.svelte"; diff --git a/js/gradio-preview/src/dev_server.ts b/js/gradio-preview/src/dev_server.ts index 57ef144866adf..f73954acab3db 100644 --- a/js/gradio-preview/src/dev_server.ts +++ b/js/gradio-preview/src/dev_server.ts @@ -1,13 +1,10 @@ import { fileURLToPath } from "url"; import { createServer, build, createLogger } from "vite"; -import { readdirSync, existsSync, readFileSync } from "fs"; import { join } from "path"; const __dirname = fileURLToPath(new URL(".", import.meta.url)); import { svelte } from "@sveltejs/vite-plugin-svelte"; import { transform } from "sucrase"; import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; -import { read } from "vega"; -// import { typescript } from "svelte-preprocess"; const vite_messages_to_ignore = [ "Default and named imports from CSS files are deprecated." @@ -39,7 +36,6 @@ export async function create_server({ }: ServerOptions): Promise { process.env.gradio_mode = "dev"; const imports = generate_imports(component_dir); - console.log(imports); const NODE_DIR = join(root_dir, "..", "..", "node", "dev"); const server = await createServer({ @@ -81,7 +77,7 @@ export async function create_server({ return; } - handler(warning); + handler!(warning); }, prebundleSvelteLibraries: false, hot: true, @@ -138,7 +134,7 @@ export async function create_server({ await server.listen(); - console.log( + console.info( `[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}` ); } @@ -150,7 +146,7 @@ function find_frontend_folders( start_path: string ): { dir: string; package_name: string }[] { if (!fs.existsSync(start_path)) { - console.log("No directory found at:", start_path); + console.warn("No directory found at:", start_path); return []; } diff --git a/js/gradio-preview/src/index.ts b/js/gradio-preview/src/index.ts index 826ac6eda35da..187262c969943 100644 --- a/js/gradio-preview/src/index.ts +++ b/js/gradio-preview/src/index.ts @@ -1,4 +1,4 @@ -import { spawn } from "node:child_process"; +import { ChildProcess, spawn } from "node:child_process"; import { create_server } from "./dev_server"; const args = process.argv.slice(2); @@ -19,7 +19,6 @@ function parse_args(args: string[]): Record { } const parsed_args = parse_args(args); -console.log({ parsed_args }); async function run(): Promise { const [backend_port, frontend_port] = await find_free_ports(7860, 8860); @@ -31,7 +30,6 @@ async function run(): Promise { ...parsed_args }; process.env.GRADIO_BACKEND_PORT = backend_port.toString(); - const server = create_server({ ...options }); const _process = spawn( `gradio`, @@ -50,9 +48,13 @@ async function run(): Promise { _process.stdout.setEncoding("utf8"); - function std_out(data) { + function std_out(data: Buffer): void { const _data = data.toString(); + if (_data.includes("Running on")) { + const server = create_server({ ...options }); + } + process.stdout.write(_data); } @@ -63,7 +65,7 @@ async function run(): Promise { _process.on("disconnect", () => kill_process(_process)); } -function kill_process(process) { +function kill_process(process: ChildProcess): void { process.kill("SIGKILL"); } @@ -102,6 +104,7 @@ export function is_free_port(port: number): Promise { }); sock.once("error", (e) => { sock.destroy(); + //@ts-ignore if (e.code === "ECONNREFUSED") { accept(true); } else { diff --git a/js/markdown/static/MarkdownCode.svelte b/js/markdown/static/MarkdownCode.svelte index c68a2cbde0bf3..f9110f810a34e 100644 --- a/js/markdown/static/MarkdownCode.svelte +++ b/js/markdown/static/MarkdownCode.svelte @@ -46,7 +46,7 @@ html = ""; } async function render_html(value: string): Promise { - if (latex_delimiters.length > 0) { + if (latex_delimiters?.length > 0) { render_math_in_element(el, { delimiters: latex_delimiters, throwOnError: false diff --git a/js/textbox/interactive/InteractiveTextbox.svelte b/js/textbox/interactive/InteractiveTextbox.svelte index 47226d4eebe2b..37e33bc10b1a6 100644 --- a/js/textbox/interactive/InteractiveTextbox.svelte +++ b/js/textbox/interactive/InteractiveTextbox.svelte @@ -24,7 +24,8 @@ select: SelectData; input: never; focus: never; - }>; + }> = { dispatch, i18n: (s: string) => s }; + export let label = "Textbox"; export let info: string | undefined = undefined; export let elem_id = ""; diff --git a/js/video/interactive/InteractiveVideo.svelte b/js/video/interactive/InteractiveVideo.svelte index aff6251867368..ccb383cea33fc 100644 --- a/js/video/interactive/InteractiveVideo.svelte +++ b/js/video/interactive/InteractiveVideo.svelte @@ -76,8 +76,6 @@ gradio.dispatch("change"); } } - - $: console.log(_video); Date: Wed, 13 Sep 2023 17:52:10 +0100 Subject: [PATCH 3/8] fix backend port --- js/app/src/Index.svelte | 3 ++- js/gradio-preview/src/dev_server.ts | 20 +++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/js/app/src/Index.svelte b/js/app/src/Index.svelte index 01ea9ad8b1d29..21c7ea73eda1b 100644 --- a/js/app/src/Index.svelte +++ b/js/app/src/Index.svelte @@ -198,7 +198,8 @@ //@ts-ignore const gradio_dev_mode = window.__GRADIO_DEV__; - const server_port = "__GRADIO__SERVER_PORT__"; + //@ts-ignore + const server_port = window.__GRADIO__SERVER_PORT__; const api_url = BUILD_MODE === "dev" || gradio_dev_mode === "dev" diff --git a/js/gradio-preview/src/dev_server.ts b/js/gradio-preview/src/dev_server.ts index f73954acab3db..386290165bf99 100644 --- a/js/gradio-preview/src/dev_server.ts +++ b/js/gradio-preview/src/dev_server.ts @@ -120,13 +120,13 @@ export async function create_server({ if (code.includes("__ROOT_PATH__")) { return code.replace(`"__ROOT_PATH__"`, imports); } - - if (code.includes("__GRADIO__SERVER_PORT__")) { - return code.replace( - `"__GRADIO__SERVER_PORT__"`, - backend_port.toString() - ); - } + }, + transformIndexHtml(html) { + return html.replace( + `window.__GRADIO_DEV__ = "dev"`, + `window.__GRADIO_DEV__ = "dev"; + window.__GRADIO__SERVER_PORT__ = ${backend_port};` + ); } } ] @@ -194,11 +194,13 @@ function generate_imports(component_dir: string): string { const imports = components.reduce((acc, component) => { const x = { interactive: join(component.dir, "interactive"), - static: join(component.dir, "static") + static: join(component.dir, "static"), + example: join(component.dir, "example") }; return `${acc}"${component.package_name}": { interactive: () => import("${x.interactive}"), - static: () => import("${x.static}") + static: () => import("${x.static}"), + example: () => import("${x.example}") },\n`; }, ""); From 3415ae75970435805fdd1caa9da5f8359bbf3f5b Mon Sep 17 00:00:00 2001 From: pngwn Date: Wed, 13 Sep 2023 18:52:21 +0100 Subject: [PATCH 4/8] fix things --- js/app/src/components/Dataset/Dataset.svelte | 8 +++++- js/atoms/src/ShareButton.svelte | 2 +- js/atoms/src/UploadText.svelte | 2 +- .../interactive/InteractiveDropdown.svelte | 14 +++++----- js/statustracker/package.json | 3 ++- js/statustracker/static/index.svelte | 2 +- js/storybook/preview.ts | 2 +- js/tootils/package.json | 5 +++- js/tootils/src/render.ts | 2 +- js/upload/package.json | 3 ++- js/upload/src/ModifyUpload.svelte | 2 +- js/utils/src/types.ts | 2 +- js/utils/src/utils.ts | 2 ++ js/video/interactive/InteractiveVideo.svelte | 1 + js/video/interactive/Video.svelte | 6 +++-- js/video/static/StaticVideo.svelte | 1 + pnpm-lock.yaml | 27 ++++++++++++++++++- 17 files changed, 63 insertions(+), 21 deletions(-) diff --git a/js/app/src/components/Dataset/Dataset.svelte b/js/app/src/components/Dataset/Dataset.svelte index c8005b221f740..c5d9dfdaf19ca 100644 --- a/js/app/src/components/Dataset/Dataset.svelte +++ b/js/app/src/components/Dataset/Dataset.svelte @@ -95,6 +95,12 @@ } $: get_component_meta(selected_samples); + $: console.log({ + component_meta, + selected_samples, + components, + component_map + }); handle_mouseenter(i)} on:mouseleave={() => handle_mouseleave()} > - {#if Object.keys(component_map).includes(components[0]) && component_map.get(components[0])} + {#if component_meta.length && component_map.get(components[0])} - import type { I18nFormatter } from "../@gradio/utils"; + import type { I18nFormatter } from "@gradio/utils"; export let type: "video" | "image" | "audio" | "file" | "csv" = "file"; export let i18n: I18nFormatter; diff --git a/js/dropdown/interactive/InteractiveDropdown.svelte b/js/dropdown/interactive/InteractiveDropdown.svelte index f182ebe3b12d5..d67a574e2e293 100644 --- a/js/dropdown/interactive/InteractiveDropdown.svelte +++ b/js/dropdown/interactive/InteractiveDropdown.svelte @@ -5,6 +5,13 @@ import { StatusTracker } from "@gradio/statustracker"; import type { LoadingStatus } from "@gradio/statustracker"; + export let gradio: Gradio<{ + change: never; + input: never; + select: SelectData; + blur: never; + focus: never; + }>; export let label = gradio.i18n("dropdown.dropdown"); export let info: string | undefined = undefined; export let elem_id = ""; @@ -21,13 +28,6 @@ export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; export let allow_custom_value = false; - export let gradio: Gradio<{ - change: never; - input: never; - select: SelectData; - blur: never; - focus: never; - }>; if (multiselect && !value) { value = []; diff --git a/js/statustracker/package.json b/js/statustracker/package.json index 2de38a7fd52a1..c64e8a38c68d2 100644 --- a/js/statustracker/package.json +++ b/js/statustracker/package.json @@ -18,6 +18,7 @@ "dependencies": { "@gradio/atoms": "workspace:^", "@gradio/column": "workspace:^", - "@gradio/icons": "workspace:^" + "@gradio/icons": "workspace:^", + "@gradio/utils": "workspace:^" } } diff --git a/js/statustracker/static/index.svelte b/js/statustracker/static/index.svelte index c00e117761ae4..42f3c76ca7f1e 100644 --- a/js/statustracker/static/index.svelte +++ b/js/statustracker/static/index.svelte @@ -50,7 +50,7 @@ import { app_state } from "../../app/src/stores"; import Loader from "./Loader.svelte"; import type { LoadingStatus } from "./types"; - import type { I18nFormatter } from "../@gradio/utils"; + import type { I18nFormatter } from "@gradio/utils"; export let i18n: I18nFormatter; export let eta: number | null = null; diff --git a/js/storybook/preview.ts b/js/storybook/preview.ts index 4faab1516d08d..d78f387101efa 100644 --- a/js/storybook/preview.ts +++ b/js/storybook/preview.ts @@ -1,7 +1,7 @@ import type { Preview } from "@storybook/svelte"; import "./theme.css"; import { setupi18n } from "../app/src/i18n"; -import { Gradio } from "@gradio/utils"; +import { Gradio } from "../app/src/gradio_helper"; setupi18n(); const preview: Preview = { diff --git a/js/tootils/package.json b/js/tootils/package.json index 57bd0cd053d1d..9ae02d280702d 100644 --- a/js/tootils/package.json +++ b/js/tootils/package.json @@ -6,5 +6,8 @@ "main": "src/index.ts", "author": "", "license": "ISC", - "private": true + "private": true, + "dependencies": { + "@gradio/utils": "workspace:^" + } } diff --git a/js/tootils/src/render.ts b/js/tootils/src/render.ts index 4370f15dda3d3..a1525886d7b74 100644 --- a/js/tootils/src/render.ts +++ b/js/tootils/src/render.ts @@ -14,7 +14,7 @@ import type { FireObject } from "@testing-library/dom"; import { spy, type Spy } from "tinyspy"; -import { Gradio } from "../@gradio/utils"; +import { Gradio } from "@gradio/utils"; const containerCache = new Map(); const componentCache = new Set(); diff --git a/js/upload/package.json b/js/upload/package.json index 9a27894f7f577..ea9d5b2fd2191 100644 --- a/js/upload/package.json +++ b/js/upload/package.json @@ -11,7 +11,8 @@ "@gradio/atoms": "workspace:^", "@gradio/icons": "workspace:^", "@gradio/client": "workspace:^", - "@gradio/upload": "workspace:^" + "@gradio/upload": "workspace:^", + "@gradio/utils": "workspace:^" }, "main_changeset": true } diff --git a/js/upload/src/ModifyUpload.svelte b/js/upload/src/ModifyUpload.svelte index b78b1f5029510..2bee880c60d05 100644 --- a/js/upload/src/ModifyUpload.svelte +++ b/js/upload/src/ModifyUpload.svelte @@ -1,7 +1,7 @@