From 667802a6cdbfb2ce454a3be5a78e0990b194548a Mon Sep 17 00:00:00 2001 From: Freddy Boulton Date: Mon, 30 Oct 2023 19:32:52 -0400 Subject: [PATCH] JS Component Documentation (#6136) * Simple template * More changes * Properly handle change event video * add changeset * Add code' * Fix play/pause bugs * add changeset * atoms doc * Chatbot * add changeset * Some more components * Add code * add changeset * Lint * add changeset * Simple template * More changes * Properly handle change event video * add changeset * Add code' * Fix play/pause bugs * add changeset * atoms doc * Chatbot * add changeset * Some more components * Add code * add changeset * Lint * Merge in latest changes * Fix typo * Fix build * Lockfile * Fix * Fix interactive * correct the title * add versions to readme * only document public * add changeset * Remove simplevideo and audio * add changeset * changes to readmes * add changeset * remove tootils and theme --------- Co-authored-by: gradio-pr-bot Co-authored-by: Ali Abdalla --- .changeset/eager-tools-jump.md | 35 ++ .changeset/pre.json | 314 +++++++++--------- .config/copy_frontend.py | 89 ++--- gradio/cli/cli.py | 2 +- gradio/events.py | 4 +- .../generate_jsons/src/docs/__init__.py | 18 +- .../[[version]]/docs/js/+page.server.ts | 4 +- .../[[version]]/docs/js/[jsdoc]/+page.svelte | 2 +- js/app/src/lite/ErrorDisplay.svelte | 21 +- js/app/src/lite/index.ts | 36 +- js/atoms/README.md | 69 +++- js/audio/Audio.stories.svelte | 4 +- js/audio/README.md | 2 +- js/audio/index.ts | 7 + js/audio/package.json | 3 +- js/audio/shared/WaveformControls.svelte | 6 +- js/audio/streaming/StreamAudio.svelte | 2 +- js/button/README.md | 26 +- js/chatbot/Index.svelte | 4 + js/chatbot/README.md | 43 ++- js/chatbot/package.json | 1 + js/checkbox/README.md | 14 + js/code/Index.svelte | 8 + js/code/README.md | 47 +++ js/code/package.json | 1 + js/colorpicker/Index.svelte | 5 + js/colorpicker/README.md | 24 ++ js/colorpicker/package.json | 1 + js/dataframe/Index.svelte | 5 + js/dataframe/README.md | 42 +++ js/dataframe/package.json | 1 + js/dropdown/Index.svelte | 6 + js/dropdown/README.md | 44 +++ js/file/Index.svelte | 3 + js/file/README.md | 44 ++- js/file/package.json | 1 + js/form/README.md | 13 +- js/gallery/Index.svelte | 4 + js/gallery/README.md | 28 +- js/gallery/package.json | 1 + .../HighlightedText.stories.svelte | 22 +- js/highlightedtext/Index.svelte | 5 + js/highlightedtext/README.md | 30 ++ js/highlightedtext/package.json | 1 + js/html/README.md | 21 +- js/image/Index.svelte | 3 + js/image/README.md | 52 ++- js/json/Index.svelte | 4 + js/json/README.md | 13 +- js/json/package.json | 1 + js/label/Index.svelte | 4 + js/label/README.md | 16 +- js/label/package.json | 1 + js/markdown/Index.svelte | 2 + js/markdown/README.md | 52 +++ js/model3D/Index.svelte | 6 + js/model3D/README.md | 49 +++ js/model3D/package.json | 1 + js/preview/test/test/frontend/package.json | 40 +-- js/radio/Index.svelte | 1 + js/radio/README.md | 23 ++ js/statustracker/README.md | 38 +++ js/textbox/Index.svelte | 1 + js/textbox/README.md | 34 ++ js/tooltip/README.md | 19 +- js/upload/README.md | 83 +++++ js/uploadbutton/Index.svelte | 4 + js/uploadbutton/README.md | 24 ++ js/uploadbutton/package.json | 1 + js/utils/README.md | 16 +- js/video/Index.svelte | 1 + js/video/README.md | 44 ++- js/video/index.ts | 7 + js/video/package.json | 7 +- js/video/shared/VideoPreview.svelte | 17 +- 75 files changed, 1274 insertions(+), 353 deletions(-) create mode 100644 .changeset/eager-tools-jump.md create mode 100644 js/audio/index.ts create mode 100644 js/checkbox/README.md create mode 100644 js/colorpicker/README.md create mode 100644 js/dataframe/README.md create mode 100644 js/dropdown/README.md create mode 100644 js/highlightedtext/README.md create mode 100644 js/markdown/README.md create mode 100644 js/model3D/README.md create mode 100644 js/radio/README.md create mode 100644 js/statustracker/README.md create mode 100644 js/textbox/README.md create mode 100644 js/upload/README.md create mode 100644 js/uploadbutton/README.md create mode 100644 js/video/index.ts diff --git a/.changeset/eager-tools-jump.md b/.changeset/eager-tools-jump.md new file mode 100644 index 0000000000000..b503bca44ea39 --- /dev/null +++ b/.changeset/eager-tools-jump.md @@ -0,0 +1,35 @@ +--- +"@gradio/app": minor +"@gradio/atoms": minor +"@gradio/audio": minor +"@gradio/button": minor +"@gradio/chatbot": minor +"@gradio/checkbox": minor +"@gradio/code": minor +"@gradio/colorpicker": minor +"@gradio/dataframe": minor +"@gradio/dropdown": minor +"@gradio/file": minor +"@gradio/form": minor +"@gradio/gallery": minor +"@gradio/highlightedtext": minor +"@gradio/html": minor +"@gradio/image": minor +"@gradio/json": minor +"@gradio/label": minor +"@gradio/markdown": minor +"@gradio/model3d": minor +"@gradio/radio": minor +"@gradio/statustracker": minor +"@gradio/textbox": minor +"@gradio/tooltip": minor +"@gradio/upload": minor +"@gradio/uploadbutton": minor +"@gradio/utils": minor +"@gradio/video": minor +"gradio": minor +"gradio_test": minor +"website": minor +--- + +feat:JS Component Documentation diff --git a/.changeset/pre.json b/.changeset/pre.json index 84f79acf11ca1..216aba0ffabac 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,159 +1,159 @@ { - "mode": "pre", - "tag": "beta", - "initialVersions": { - "@gradio/client": "0.3.1", - "gradio_client": "0.5.0", - "gradio": "3.43.2", - "@gradio/cdn-test": "0.0.1", - "@gradio/spaces-test": "0.0.1", - "website": "0.4.0", - "@gradio/accordion": "0.0.4", - "@gradio/annotatedimage": "0.1.2", - "@gradio/app": "1.4.3", - "@gradio/atoms": "0.1.2", - "@gradio/audio": "0.3.2", - "@gradio/box": "0.0.4", - "@gradio/button": "0.1.3", - "@gradio/chatbot": "0.3.1", - "@gradio/checkbox": "0.1.3", - "@gradio/checkboxgroup": "0.1.2", - "@gradio/code": "0.1.2", - "@gradio/colorpicker": "0.1.2", - "@gradio/column": "0.0.1", - "@gradio/dataframe": "0.2.2", - "@gradio/dropdown": "0.1.3", - "@gradio/file": "0.1.2", - "@gradio/form": "0.0.5", - "@gradio/gallery": "0.3.2", - "@gradio/group": "0.0.1", - "@gradio/highlightedtext": "0.2.3", - "@gradio/html": "0.0.4", - "@gradio/icons": "0.1.0", - "@gradio/image": "0.2.2", - "@gradio/json": "0.0.5", - "@gradio/label": "0.1.2", - "@gradio/lite": "0.3.1", - "@gradio/markdown": "0.2.0", - "@gradio/model3d": "0.2.1", - "@gradio/number": "0.2.2", - "@gradio/plot": "0.1.2", - "@gradio/radio": "0.1.2", - "@gradio/row": "0.0.1", - "@gradio/slider": "0.1.2", - "@gradio/state": "0.0.1", - "@gradio/statustracker": "0.2.0", - "@gradio/tabitem": "0.0.4", - "@gradio/tabs": "0.0.5", - "@gradio/textbox": "0.2.0", - "@gradio/theme": "0.1.0", - "@gradio/tooltip": "0.0.1", - "@gradio/tootils": "0.0.2", - "@gradio/upload": "0.2.1", - "@gradio/uploadbutton": "0.0.5", - "@gradio/utils": "0.1.1", - "@gradio/video": "0.0.6", - "@gradio/wasm": "0.0.1", - "@gradio/fallback": "0.1.1", - "@gradio/preview": "0.0.2", - "@gradio/dataset": "0.0.1", - "@gradio/fileexplorer": "0.2.2", - "@gradio/storybook": "0.0.1", - "gradio_test": "0.2.0-beta.6", - "@gradio/simpledropdown": "0.0.1-beta.1", - "@gradio/simpletextbox": "0.0.1-beta.0" - }, - "changesets": [ - "afraid-cougars-rescue", - "all-animals-vanish", - "bitter-mirrors-dance", - "bitter-points-wash", - "bright-planes-divide", - "bright-yaks-wink", - "chilly-dodos-serve", - "cold-birds-cry", - "cold-breads-vanish", - "cold-hoops-heal", - "cold-lemons-roll", - "cute-crabs-know", - "dark-cups-see", - "dirty-ghosts-tickle", - "dry-points-join", - "dull-adults-study", - "easy-mirrors-retire", - "eleven-steaks-tan", - "empty-bobcats-judge", - "every-cities-invite", - "five-islands-joke", - "flat-experts-wink", - "floppy-glasses-wish", - "fresh-ears-pump", - "funny-dodos-sip", - "gentle-parks-fry", - "great-moles-matter", - "great-rice-grab", - "green-olives-shake", - "heavy-animals-think", - "hip-drinks-bow", - "hot-icons-film", - "hungry-melons-pump", - "icy-cars-boil", - "large-banks-push", - "lazy-aliens-drive", - "little-plums-smell", - "loose-ducks-feel", - "lovely-news-speak", - "many-hotels-flow", - "mighty-coats-do", - "modern-forks-march", - "nasty-dryers-show", - "nice-actors-write", - "old-heads-give", - "plain-groups-win", - "plenty-parks-glow", - "plenty-rocks-lay", - "plenty-teeth-clap", - "poor-lands-talk", - "public-chairs-chew", - "public-worlds-hunt", - "puny-teeth-notice", - "purple-jokes-shake", - "quick-bottles-find", - "quick-shirts-turn", - "rare-hornets-take", - "real-spoons-pick", - "rude-seas-enjoy", - "sad-ears-sink", - "sad-eels-sink", - "sad-icons-relax", - "short-clouds-see", - "silver-beers-refuse", - "sixty-bags-mix", - "slick-bats-study", - "slick-pants-stand", - "smart-groups-study", - "some-shoes-relate", - "spicy-streets-stop", - "spotty-papers-ask", - "strange-lizards-boil", - "strong-peas-tell", - "tame-chairs-tan", - "tame-spies-attend", - "tasty-candies-type", - "tender-bananas-nail", - "thick-rabbits-wonder", - "three-trams-sniff", - "tough-parrots-relate", - "true-bugs-shine", - "true-flowers-hug", - "twenty-gifts-tickle", - "two-games-dress", - "two-mirrors-nail", - "upset-crews-learn", - "vast-terms-rhyme", - "violet-jokes-find", - "weak-games-sing", - "wet-places-hunt", - "yummy-boxes-bake" - ] + "mode": "pre", + "tag": "beta", + "initialVersions": { + "@gradio/client": "0.3.1", + "gradio_client": "0.5.0", + "gradio": "3.43.2", + "@gradio/cdn-test": "0.0.1", + "@gradio/spaces-test": "0.0.1", + "website": "0.4.0", + "@gradio/accordion": "0.0.4", + "@gradio/annotatedimage": "0.1.2", + "@gradio/app": "1.4.3", + "@gradio/atoms": "0.1.2", + "@gradio/audio": "0.3.2", + "@gradio/box": "0.0.4", + "@gradio/button": "0.1.3", + "@gradio/chatbot": "0.3.1", + "@gradio/checkbox": "0.1.3", + "@gradio/checkboxgroup": "0.1.2", + "@gradio/code": "0.1.2", + "@gradio/colorpicker": "0.1.2", + "@gradio/column": "0.0.1", + "@gradio/dataframe": "0.2.2", + "@gradio/dropdown": "0.1.3", + "@gradio/file": "0.1.2", + "@gradio/form": "0.0.5", + "@gradio/gallery": "0.3.2", + "@gradio/group": "0.0.1", + "@gradio/highlightedtext": "0.2.3", + "@gradio/html": "0.0.4", + "@gradio/icons": "0.1.0", + "@gradio/image": "0.2.2", + "@gradio/json": "0.0.5", + "@gradio/label": "0.1.2", + "@gradio/lite": "0.3.1", + "@gradio/markdown": "0.2.0", + "@gradio/model3d": "0.2.1", + "@gradio/number": "0.2.2", + "@gradio/plot": "0.1.2", + "@gradio/radio": "0.1.2", + "@gradio/row": "0.0.1", + "@gradio/slider": "0.1.2", + "@gradio/state": "0.0.1", + "@gradio/statustracker": "0.2.0", + "@gradio/tabitem": "0.0.4", + "@gradio/tabs": "0.0.5", + "@gradio/textbox": "0.2.0", + "@gradio/theme": "0.1.0", + "@gradio/tooltip": "0.0.1", + "@gradio/tootils": "0.0.2", + "@gradio/upload": "0.2.1", + "@gradio/uploadbutton": "0.0.5", + "@gradio/utils": "0.1.1", + "@gradio/video": "0.0.6", + "@gradio/wasm": "0.0.1", + "@gradio/fallback": "0.1.1", + "@gradio/preview": "0.0.2", + "@gradio/dataset": "0.0.1", + "@gradio/fileexplorer": "0.2.2", + "@gradio/storybook": "0.0.1", + "gradio_test": "0.2.0-beta.6", + "@gradio/simpledropdown": "0.0.1-beta.1", + "@gradio/simpletextbox": "0.0.1-beta.0" + }, + "changesets": [ + "afraid-cougars-rescue", + "all-animals-vanish", + "bitter-mirrors-dance", + "bitter-points-wash", + "bright-planes-divide", + "bright-yaks-wink", + "chilly-dodos-serve", + "cold-birds-cry", + "cold-breads-vanish", + "cold-hoops-heal", + "cold-lemons-roll", + "cute-crabs-know", + "dark-cups-see", + "dirty-ghosts-tickle", + "dry-points-join", + "dull-adults-study", + "easy-mirrors-retire", + "eleven-steaks-tan", + "empty-bobcats-judge", + "every-cities-invite", + "five-islands-joke", + "flat-experts-wink", + "floppy-glasses-wish", + "fresh-ears-pump", + "funny-dodos-sip", + "gentle-parks-fry", + "great-moles-matter", + "great-rice-grab", + "green-olives-shake", + "heavy-animals-think", + "hip-drinks-bow", + "hot-icons-film", + "hungry-melons-pump", + "icy-cars-boil", + "large-banks-push", + "lazy-aliens-drive", + "little-plums-smell", + "loose-ducks-feel", + "lovely-news-speak", + "many-hotels-flow", + "mighty-coats-do", + "modern-forks-march", + "nasty-dryers-show", + "nice-actors-write", + "old-heads-give", + "plain-groups-win", + "plenty-parks-glow", + "plenty-rocks-lay", + "plenty-teeth-clap", + "poor-lands-talk", + "public-chairs-chew", + "public-worlds-hunt", + "puny-teeth-notice", + "purple-jokes-shake", + "quick-bottles-find", + "quick-shirts-turn", + "rare-hornets-take", + "real-spoons-pick", + "rude-seas-enjoy", + "sad-ears-sink", + "sad-eels-sink", + "sad-icons-relax", + "short-clouds-see", + "silver-beers-refuse", + "sixty-bags-mix", + "slick-bats-study", + "slick-pants-stand", + "smart-groups-study", + "some-shoes-relate", + "spicy-streets-stop", + "spotty-papers-ask", + "strange-lizards-boil", + "strong-peas-tell", + "tame-chairs-tan", + "tame-spies-attend", + "tasty-candies-type", + "tender-bananas-nail", + "thick-rabbits-wonder", + "three-trams-sniff", + "tough-parrots-relate", + "true-bugs-shine", + "true-flowers-hug", + "twenty-gifts-tickle", + "two-games-dress", + "two-mirrors-nail", + "upset-crews-learn", + "vast-terms-rhyme", + "violet-jokes-find", + "weak-games-sing", + "wet-places-hunt", + "yummy-boxes-bake" + ] } diff --git a/.config/copy_frontend.py b/.config/copy_frontend.py index 23f830c0308a0..4aeff7f87fb66 100644 --- a/.config/copy_frontend.py +++ b/.config/copy_frontend.py @@ -7,46 +7,53 @@ from hatchling.builders.hooks.plugin.interface import BuildHookInterface +def copy_js_code(root: str | pathlib.Path): + NOT_COMPONENT = [ + "app", + "node_modules", + "storybook", + "playwright-report", + "workbench", + "tooltils", + ] + for entry in (pathlib.Path(root) / "js").iterdir(): + if ( + entry.is_dir() + and not str(entry.name).startswith("_") + and not str(entry.name) in NOT_COMPONENT + ): + + def ignore(s, names): + ignored = [] + for n in names: + if ( + n.startswith("CHANGELOG") + or n.startswith("README.md") + or n.startswith("node_modules") + or ".test." in n + or ".stories." in n + or ".spec." in n + ): + ignored.append(n) + return ignored + shutil.copytree( + str(entry), + str(pathlib.Path("gradio") / "_frontend_code" / entry.name), + ignore=ignore, + dirs_exist_ok=True, + ) + shutil.copytree( + str(pathlib.Path(root) / "client" / "js"), + str(pathlib.Path("gradio") / "_frontend_code" / "client"), + ignore=lambda d, names: ["node_modules"], + dirs_exist_ok=True, + ) + + class BuildHook(BuildHookInterface): def initialize(self, version: str, build_data: dict[str, Any]) -> None: - NOT_COMPONENT = [ - "app", - "node_modules", - "storybook", - "playwright-report", - "workbench", - "tooltils", - ] - for entry in (pathlib.Path(self.root) / "js").iterdir(): - if ( - entry.is_dir() - and not str(entry.name).startswith("_") - and not str(entry.name) in NOT_COMPONENT - ): - - def ignore(s, names): - ignored = [] - for n in names: - if ( - n.startswith("CHANGELOG") - or n.startswith("README.md") - or n.startswith("node_modules") - or ".test." in n - or ".stories." in n - or ".spec." in n - ): - ignored.append(n) - return ignored - - shutil.copytree( - str(entry), - str(pathlib.Path("gradio") / "_frontend_code" / entry.name), - ignore=ignore, - dirs_exist_ok=True, - ) - shutil.copytree( - str(pathlib.Path(self.root) / "client" / "js"), - str(pathlib.Path("gradio") / "_frontend_code" / "client"), - ignore=lambda d, names: ["node_modules"], - dirs_exist_ok=True, - ) + copy_js_code(self.root) + + +if __name__ == "__main__": + copy_js_code(pathlib.Path("..").resolve()) diff --git a/gradio/cli/cli.py b/gradio/cli/cli.py index d87cf4d4b9251..d3eaa8e0b7190 100644 --- a/gradio/cli/cli.py +++ b/gradio/cli/cli.py @@ -28,7 +28,7 @@ def cli(): elif args[0] in {"cc", "component"}: sys.argv = sys.argv[1:] custom_component() - elif args[0] in {"build", "dev", "create", "show", "publish"}: + elif args[0] in {"build", "dev", "create", "show", "publish", "install"}: try: error = f"gradio {args[0]} is not a valid command. Did you mean `gradio cc {args[0]}` or `gradio component {args[0]}`?." raise ValueError(error) diff --git a/gradio/events.py b/gradio/events.py index e619983b4ad13..e45de200546f1 100644 --- a/gradio/events.py +++ b/gradio/events.py @@ -256,7 +256,9 @@ def inner(*args, **kwargs): return Dependency(None, {}, None, wrapper) - if block and "stream" in block.events: + from gradio.components.base import StreamingInput + + if isinstance(block, StreamingInput) and "stream" in block.events: block.check_streamable() # type: ignore if isinstance(show_progress, bool): show_progress = "full" if show_progress else "hidden" diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py index a86e597836181..637f1e042f9b5 100644 --- a/js/_website/generate_jsons/src/docs/__init__.py +++ b/js/_website/generate_jsons/src/docs/__init__.py @@ -5,6 +5,8 @@ import gradio from ..guides import guides +import requests + DIR = os.path.dirname(__file__) DEMOS_DIR = os.path.abspath(os.path.join(DIR, "../../../../../demo")) JS_CLIENT_README = os.path.abspath(os.path.join(DIR, "../../../../../client/js/README.md")) @@ -305,10 +307,24 @@ def organize_docs(d): js_pages = [] for js_component in os.listdir(JS_DIR): - if not js_component.startswith("_") and js_component not in ["app", "highlighted-text", "playground", "preview", "upload-button"]: + if not js_component.startswith("_") and js_component not in ["app", "highlighted-text", "playground", "preview", "upload-button", "theme", "tootils"]: + if os.path.exists(os.path.join(JS_DIR, js_component, "package.json")): + with open(os.path.join(JS_DIR, js_component, "package.json")) as f: + package_json = json.load(f) + if package_json.get("private", False): + continue if os.path.exists(os.path.join(JS_DIR, js_component, "README.md")): with open(os.path.join(JS_DIR, js_component, "README.md")) as f: readme_content = f.read() + + try: + latest_npm = requests.get(f"https://registry.npmjs.org/@gradio/{js_component}/latest").json()["version"] + latest_npm = f" [v{latest_npm}](https://www.npmjs.com/package/@gradio/{js_component})" + readme_content = readme_content.split("\n") + readme_content = "\n".join([readme_content[0], latest_npm, *readme_content[1:]]) + except TypeError: + pass + js[js_component] = readme_content js_pages.append(js_component) diff --git a/js/_website/src/routes/[[version]]/docs/js/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js/+page.server.ts index 248b8580f12db..88cfcdde2eee6 100644 --- a/js/_website/src/routes/[[version]]/docs/js/+page.server.ts +++ b/js/_website/src/routes/[[version]]/docs/js/+page.server.ts @@ -4,7 +4,7 @@ export const prerender = true; export function load({ params }) { if (params?.version) - throw redirect(302, `/${params?.version}/docs/js/accordion`); + throw redirect(302, `/${params?.version}/docs/js/atoms`); - throw redirect(302, `/docs/js/accordion`); + throw redirect(302, `/docs/js/atoms`); } diff --git a/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte index 6c44f0bb45115..4fac156d21f22 100644 --- a/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte +++ b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte @@ -18,7 +18,7 @@
- {#if error} - {#if error.message} -

- {error.message} -

- {/if} - {#if error.stack} - 
{error.stack}
- {/if} - {/if} + {#if error} + {#if error.message} +

+ {error.message} +

+ {/if} + {#if error.stack} + 
{error.stack}
+ {/if} + {/if}
-