From e418edd011d06df519c778b9a50573288d5bf30f Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 29 Jan 2024 05:55:42 -0800 Subject: [PATCH 01/10] Fix SimpleImage package json (#7205) * fix simple image package json * add changeset * format --------- Co-authored-by: gradio-pr-bot --- .changeset/happy-hairs-wash.md | 6 ++++++ js/simpleimage/package.json | 14 +++++++------- pnpm-lock.yaml | 14 +++++++------- 3 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 .changeset/happy-hairs-wash.md diff --git a/.changeset/happy-hairs-wash.md b/.changeset/happy-hairs-wash.md new file mode 100644 index 0000000000000..7dd7087d86249 --- /dev/null +++ b/.changeset/happy-hairs-wash.md @@ -0,0 +1,6 @@ +--- +"@gradio/simpleimage": patch +"gradio": patch +--- + +feat:Fix SimpleImage package json diff --git a/js/simpleimage/package.json b/js/simpleimage/package.json index 4b93693113af4..088d55aa3318b 100644 --- a/js/simpleimage/package.json +++ b/js/simpleimage/package.json @@ -7,13 +7,13 @@ "license": "ISC", "private": false, "dependencies": { - "@gradio/atoms": "0.4.1", - "@gradio/client": "0.10.1", - "@gradio/icons": "0.3.2", - "@gradio/statustracker": "0.4.3", - "@gradio/upload": "0.6.1", - "@gradio/utils": "0.2.0", - "@gradio/wasm": "0.5.0", + "@gradio/atoms": "workspace:^", + "@gradio/client": "workspace:^", + "@gradio/icons": "workspace:^", + "@gradio/statustracker": "workspace:^", + "@gradio/upload": "workspace:^", + "@gradio/utils": "workspace:^", + "@gradio/wasm": "workspace:^", "cropperjs": "^1.5.12", "lazy-brush": "^1.0.1", "resize-observer-polyfill": "^1.5.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e41037845a84e..fe8c7f4c793f3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1361,25 +1361,25 @@ importers: js/simpleimage: dependencies: '@gradio/atoms': - specifier: 0.4.1 + specifier: workspace:^ version: link:../atoms '@gradio/client': - specifier: 0.10.1 + specifier: workspace:^ version: link:../../client/js '@gradio/icons': - specifier: 0.3.2 + specifier: workspace:^ version: link:../icons '@gradio/statustracker': - specifier: 0.4.3 + specifier: workspace:^ version: link:../statustracker '@gradio/upload': - specifier: 0.6.1 + specifier: workspace:^ version: link:../upload '@gradio/utils': - specifier: 0.2.0 + specifier: workspace:^ version: link:../utils '@gradio/wasm': - specifier: 0.5.0 + specifier: workspace:^ version: link:../wasm cropperjs: specifier: ^1.5.12 From 572e360fff4a03c335b86e1a7517a44cb6af2bcd Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 29 Jan 2024 14:53:54 +0000 Subject: [PATCH 02/10] Upload tweak (#7206) * make uploadprogress display consistently in custom components * add engines * add changeset * add changeset * bump ci pnpm version --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid --- .changeset/eager-rivers-rescue.md | 6 ++++++ .github/actions/install-frontend-deps/action.yml | 2 +- .github/workflows/backend.yml | 4 ++-- .github/workflows/build-pr.yml | 2 +- js/upload/src/UploadProgress.svelte | 1 + package.json | 4 ++++ 6 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 .changeset/eager-rivers-rescue.md diff --git a/.changeset/eager-rivers-rescue.md b/.changeset/eager-rivers-rescue.md new file mode 100644 index 0000000000000..2af4cd533a490 --- /dev/null +++ b/.changeset/eager-rivers-rescue.md @@ -0,0 +1,6 @@ +--- +"@gradio/upload": patch +"gradio": patch +--- + +feat:Upload tweak diff --git a/.github/actions/install-frontend-deps/action.yml b/.github/actions/install-frontend-deps/action.yml index 4a591530bc7d9..ae9bc76535db1 100644 --- a/.github/actions/install-frontend-deps/action.yml +++ b/.github/actions/install-frontend-deps/action.yml @@ -28,7 +28,7 @@ runs: if: steps.frontend-cache.outputs.cache-hit != 'true' || inputs.always-install-pnpm == 'true' uses: pnpm/action-setup@v2 with: - version: 8.9 + version: 8.15 - uses: actions/setup-node@v4 with: node-version: 18 diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml index cd8a273fb5835..69c49a432e189 100644 --- a/.github/workflows/backend.yml +++ b/.github/workflows/backend.yml @@ -89,7 +89,7 @@ jobs: if: steps.frontend-cache.outputs.cache-hit != 'true' uses: pnpm/action-setup@v2 with: - version: 8 + version: 8.15 - uses: actions/setup-node@v4 if: steps.frontend-cache.outputs.cache-hit != 'true' with: @@ -185,7 +185,7 @@ jobs: if: steps.frontend-cache.outputs.cache-hit != 'true' uses: pnpm/action-setup@v2 with: - version: 8 + version: 8.15 - uses: actions/setup-node@v4 if: steps.frontend-cache.outputs.cache-hit != 'true' with: diff --git a/.github/workflows/build-pr.yml b/.github/workflows/build-pr.yml index ee853e1d67770..766572f58aef0 100644 --- a/.github/workflows/build-pr.yml +++ b/.github/workflows/build-pr.yml @@ -25,7 +25,7 @@ jobs: - name: Install pnpm uses: pnpm/action-setup@v2 with: - version: 8 + version: 8.15 - uses: actions/setup-node@v4 with: node-version: 18 diff --git a/js/upload/src/UploadProgress.svelte b/js/upload/src/UploadProgress.svelte index 703730f680b6c..0328435f04b5b 100644 --- a/js/upload/src/UploadProgress.svelte +++ b/js/upload/src/UploadProgress.svelte @@ -111,6 +111,7 @@ align-items: center; justify-content: center; min-height: var(--size-40); + width: var(--size-full); } .wrap::after { diff --git a/package.json b/package.json index c02def5a0aedf..54cca6d85feff 100644 --- a/package.json +++ b/package.json @@ -105,5 +105,9 @@ "react-dom": "^18.2.0", "storybook": "^7.5.1", "wikidata-lang": "^4.1.2" + }, + "engines": { + "node": ">=18.0.0", + "pnpm": "~8.15.0" } } From efacc7d5cb0d1c6448cbec82abfc00ad6da05b3f Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 29 Jan 2024 17:59:41 +0000 Subject: [PATCH 03/10] Ensure `open` reactivity in Accordion (#7208) * ensure `open` reactivity * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/fuzzy-windows-matter.md | 6 ++++++ js/accordion/Index.svelte | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/fuzzy-windows-matter.md diff --git a/.changeset/fuzzy-windows-matter.md b/.changeset/fuzzy-windows-matter.md new file mode 100644 index 0000000000000..6be9dd0f51506 --- /dev/null +++ b/.changeset/fuzzy-windows-matter.md @@ -0,0 +1,6 @@ +--- +"@gradio/accordion": minor +"gradio": minor +--- + +feat:Ensure `open` reactivity in Accordion diff --git a/js/accordion/Index.svelte b/js/accordion/Index.svelte index e5d91c03f7708..6e412f51f22e4 100644 --- a/js/accordion/Index.svelte +++ b/js/accordion/Index.svelte @@ -23,7 +23,7 @@ {...loading_status} /> - + From e3217b41862925a6a05f44070ac2bdabbeee6769 Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 29 Jan 2024 18:03:38 +0000 Subject: [PATCH 04/10] Amend audio waveform colour (#7207) * change waveform color option types * tweak waveform color setting * snake case tweak * add changeset * tweak BE test * tweak component BE test --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid --- .changeset/seven-trains-return.md | 6 ++++++ gradio/components/audio.py | 4 ++-- js/audio/Index.svelte | 8 ++++++-- test/test_components.py | 8 ++++---- 4 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 .changeset/seven-trains-return.md diff --git a/.changeset/seven-trains-return.md b/.changeset/seven-trains-return.md new file mode 100644 index 0000000000000..bdc30686a822c --- /dev/null +++ b/.changeset/seven-trains-return.md @@ -0,0 +1,6 @@ +--- +"@gradio/audio": patch +"gradio": patch +--- + +fix:Amend audio waveform colour diff --git a/gradio/components/audio.py b/gradio/components/audio.py index 5e5b048e2b98d..57edcc84f8496 100644 --- a/gradio/components/audio.py +++ b/gradio/components/audio.py @@ -33,8 +33,8 @@ class WaveformOptions: sample_rate: The output sample rate (in Hz) of the audio after editing. Defaults to 44100. """ - waveform_color: str = "#9ca3af" - waveform_progress_color: str = "#f97316" + waveform_color: str | None = None + waveform_progress_color: str | None = None show_recording_waveform: bool = True show_controls: bool = False skip_length: int | float = 5 diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte index add91c1f431df..128a9759c288e 100644 --- a/js/audio/Index.svelte +++ b/js/audio/Index.svelte @@ -91,10 +91,14 @@ let waveform_settings: Record; + let color_accent = getComputedStyle( + document.documentElement + ).getPropertyValue("--color-accent"); + $: waveform_settings = { height: 50, waveColor: waveform_options.waveform_color || "#9ca3af", - progressColor: waveform_options.waveform_progress_color || "#f97316", + progressColor: waveform_options.waveform_progress_color || color_accent, barWidth: 2, barGap: 3, cursorWidth: 2, @@ -109,7 +113,7 @@ }; const trim_region_settings = { - color: waveform_options.trim_region_color || "hsla(15, 85%, 40%, 0.4)", + color: waveform_options.trim_region_color, drag: true, resize: true }; diff --git a/test/test_components.py b/test/test_components.py index 6294e6d95bbfd..955c20cec0c39 100644 --- a/test/test_components.py +++ b/test/test_components.py @@ -842,8 +842,8 @@ def test_component_functions(self, gradio_temp_dir): "show_controls": False, "show_recording_waveform": True, "skip_length": 5, - "waveform_color": "#9ca3af", - "waveform_progress_color": "#f97316", + "waveform_color": None, + "waveform_progress_color": None, }, "_selectable": False, } @@ -894,8 +894,8 @@ def test_component_functions(self, gradio_temp_dir): "show_controls": False, "show_recording_waveform": True, "skip_length": 5, - "waveform_color": "#9ca3af", - "waveform_progress_color": "#f97316", + "waveform_color": None, + "waveform_progress_color": None, }, "_selectable": False, } From 8dd6f4bc1901792f05cd59e86df7b1dbab692739 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 29 Jan 2024 16:51:22 -0800 Subject: [PATCH 05/10] Handle the case where examples is `null` for all components (#7192) * handle null examples * add changeset * add changeset * lint * merge conflict * fixes * add changeset * stories * feedback * examples --------- Co-authored-by: gradio-pr-bot --- .changeset/warm-jokes-fetch.md | 23 ++ js/audio/AudioExample.stories.svelte | 24 ++ js/audio/Example.svelte | 4 +- js/checkbox/Example.svelte | 4 +- js/code/Example.svelte | 4 +- .../ColorPickerExample.stories.svelte | 24 ++ js/colorpicker/Example.svelte | 4 +- js/dataset/Index.svelte | 46 +-- js/dropdown/Example.svelte | 4 +- js/file/Example.svelte | 4 +- js/fileexplorer/Example.svelte | 16 +- js/image/Example.svelte | 9 +- js/image/ImageExample.stories.svelte | 29 ++ js/image/shared/Image.svelte | 6 + js/markdown/Example.svelte | 4 +- js/model3D/Example.svelte | 4 +- js/number/Example.svelte | 4 +- js/radio/Example.svelte | 12 +- js/simpledropdown/Example.svelte | 4 +- js/simpleimage/Example.svelte | 21 +- js/simpletextbox/Example.svelte | 4 +- js/textbox/Example.svelte | 4 +- js/textbox/TextboxExample.stories.svelte | 24 ++ js/video/Example.svelte | 40 +-- pnpm-lock.yaml | 263 ++++++++++-------- 25 files changed, 380 insertions(+), 205 deletions(-) create mode 100644 .changeset/warm-jokes-fetch.md create mode 100644 js/audio/AudioExample.stories.svelte create mode 100644 js/colorpicker/ColorPickerExample.stories.svelte create mode 100644 js/image/ImageExample.stories.svelte create mode 100644 js/textbox/TextboxExample.stories.svelte diff --git a/.changeset/warm-jokes-fetch.md b/.changeset/warm-jokes-fetch.md new file mode 100644 index 0000000000000..53577b67d97a3 --- /dev/null +++ b/.changeset/warm-jokes-fetch.md @@ -0,0 +1,23 @@ +--- +"@gradio/audio": patch +"@gradio/checkbox": patch +"@gradio/code": patch +"@gradio/colorpicker": patch +"@gradio/dataset": patch +"@gradio/dropdown": patch +"@gradio/file": patch +"@gradio/fileexplorer": patch +"@gradio/image": patch +"@gradio/markdown": patch +"@gradio/model3d": patch +"@gradio/number": patch +"@gradio/radio": patch +"@gradio/simpledropdown": patch +"@gradio/simpleimage": patch +"@gradio/simpletextbox": patch +"@gradio/textbox": patch +"@gradio/video": patch +"gradio": patch +--- + +fix:Handle the case where examples is `null` for all components diff --git a/js/audio/AudioExample.stories.svelte b/js/audio/AudioExample.stories.svelte new file mode 100644 index 0000000000000..03be9fab22bd8 --- /dev/null +++ b/js/audio/AudioExample.stories.svelte @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/js/audio/Example.svelte b/js/audio/Example.svelte index 6b6a4a08c938f..1ebb90d67dd34 100644 --- a/js/audio/Example.svelte +++ b/js/audio/Example.svelte @@ -1,5 +1,5 @@ @@ -9,7 +9,7 @@ class:gallery={type === "gallery"} class:selected > - {value} + {value ? value : ""} diff --git a/js/markdown/Example.svelte b/js/markdown/Example.svelte index fa8f1b800ea77..40f17abb052be 100644 --- a/js/markdown/Example.svelte +++ b/js/markdown/Example.svelte @@ -1,7 +1,7 @@ @@ -9,7 +9,7 @@ class:gallery={type === "gallery"} class:selected > - {value} + {value ? value : ""} diff --git a/js/simpletextbox/Example.svelte b/js/simpletextbox/Example.svelte index 1fdf7500fa285..e8e8130c2987f 100644 --- a/js/simpletextbox/Example.svelte +++ b/js/simpletextbox/Example.svelte @@ -1,7 +1,7 @@ + + + + + + + + diff --git a/js/video/Example.svelte b/js/video/Example.svelte index 34ac786787c49..305f343988f6f 100644 --- a/js/video/Example.svelte +++ b/js/video/Example.svelte @@ -20,25 +20,27 @@ } -{#if playable()} -
-
-{:else} -
{value}
+{#if value} + {#if playable()} +
+
+ {:else} +
{value}
+ {/if} {/if} diff --git a/js/imageeditor/shared/InteractiveImageEditor.svelte b/js/imageeditor/shared/InteractiveImageEditor.svelte index 57f118a07ef2f..d716109375f65 100644 --- a/js/imageeditor/shared/InteractiveImageEditor.svelte +++ b/js/imageeditor/shared/InteractiveImageEditor.svelte @@ -29,12 +29,16 @@ export let brush: IBrush | null; export let eraser: Eraser | null; import { Tools, Crop, Brush, Sources } from "./tools"; + import { BlockLabel } from "@gradio/atoms"; + import { Image as ImageIcon } from "@gradio/icons"; export let sources: ("clipboard" | "webcam" | "upload")[]; export let crop_size: [number, number] | `${string}:${string}` | null = null; export let i18n: I18nFormatter; export let root: string; export let proxy_url: string; + export let label: string | undefined = undefined; + export let show_label: boolean; export let changeable = false; export let value: EditorData | null = { background: null, @@ -111,6 +115,11 @@ : editor.set_tool("draw")); + Date: Tue, 30 Jan 2024 16:25:31 +0000 Subject: [PATCH 08/10] add changeset --- .changeset/cruel-bats-behave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cruel-bats-behave.md diff --git a/.changeset/cruel-bats-behave.md b/.changeset/cruel-bats-behave.md new file mode 100644 index 0000000000000..188beb30ba69e --- /dev/null +++ b/.changeset/cruel-bats-behave.md @@ -0,0 +1,5 @@ +--- +"@gradio/storybook": minor +--- + +feat:Add mobile Chromatic tests From 3b8dfc684dc0eb0544d06300fa546b23f587c63f Mon Sep 17 00:00:00 2001 From: Hannah Date: Tue, 30 Jan 2024 18:34:53 +0000 Subject: [PATCH 09/10] Add `visible` check to Tab (#7220) * add visible check to TabItem * add changeset * remove hide class --------- Co-authored-by: gradio-pr-bot --- .changeset/true-pears-decide.md | 6 ++++++ js/tabitem/shared/TabItem.svelte | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/true-pears-decide.md diff --git a/.changeset/true-pears-decide.md b/.changeset/true-pears-decide.md new file mode 100644 index 0000000000000..c672e2f23d4c6 --- /dev/null +++ b/.changeset/true-pears-decide.md @@ -0,0 +1,6 @@ +--- +"@gradio/tabitem": patch +"gradio": patch +--- + +fix:Add `visible` check to Tab diff --git a/js/tabitem/shared/TabItem.svelte b/js/tabitem/shared/TabItem.svelte index 09b08cfae8e68..0199ae49298ca 100644 --- a/js/tabitem/shared/TabItem.svelte +++ b/js/tabitem/shared/TabItem.svelte @@ -31,7 +31,7 @@
From 24157a36028b3f606194bd9977634318650b2d46 Mon Sep 17 00:00:00 2001 From: Aileen Villanueva Lecuona Date: Tue, 30 Jan 2024 13:40:21 -0600 Subject: [PATCH 10/10] add background color based on the OS mode (#7117) * add background color based on the OS mode * add changeset * use static css instead * format * changes * changes --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid Co-authored-by: pngwn Co-authored-by: Ali Abid --- .changeset/lucky-tips-occur.md | 6 ++++++ gradio/blocks.py | 12 ++++++++++++ gradio/themes/base.py | 25 +++++++++++++++++++++++++ js/app/index.html | 24 ++++++++++++++++++++++++ js/app/vite.config.ts | 1 + 5 files changed, 68 insertions(+) create mode 100644 .changeset/lucky-tips-occur.md diff --git a/.changeset/lucky-tips-occur.md b/.changeset/lucky-tips-occur.md new file mode 100644 index 0000000000000..c5fc0dc16cef5 --- /dev/null +++ b/.changeset/lucky-tips-occur.md @@ -0,0 +1,6 @@ +--- +"@gradio/app": patch +"gradio": patch +--- + +fix:add background color based on the OS mode diff --git a/gradio/blocks.py b/gradio/blocks.py index 2a660983a7ab7..bae484de25f1d 100644 --- a/gradio/blocks.py +++ b/gradio/blocks.py @@ -1612,6 +1612,18 @@ def get_config_file(self): "stylesheets": self.stylesheets, "theme": self.theme.name, "protocol": "sse_v1", + "body_css": { + "body_background_fill": self.theme._get_computed_value( + "body_background_fill" + ), + "body_text_color": self.theme._get_computed_value("body_text_color"), + "body_background_fill_dark": self.theme._get_computed_value( + "body_background_fill_dark" + ), + "body_text_color_dark": self.theme._get_computed_value( + "body_text_color_dark" + ), + }, } def get_layout(block): diff --git a/gradio/themes/base.py b/gradio/themes/base.py index f731f3d47f4d3..405f34be02447 100644 --- a/gradio/themes/base.py +++ b/gradio/themes/base.py @@ -6,6 +6,7 @@ import textwrap from pathlib import Path from typing import Iterable +import warnings import huggingface_hub import semantic_version as semver @@ -93,6 +94,30 @@ def repl_func(match): return f"{css_code}\n{dark_css_code}" + def _get_computed_value(self, property: str, depth=0) -> str: + MAX_DEPTH = 100 + if depth > MAX_DEPTH: + warnings.warn(f"Cannot resolve '{property}' - circular reference detected.") + return "" + is_dark = property.endswith("_dark") + if is_dark: + set_value = getattr( + self, property, getattr(self, property[:-5], "") + ) # if dark mode value is unavailable, use light mode value + else: + set_value = getattr(self, property, "") + pattern = r"(\*)([\w_]+)(\b)" + + def repl_func(match, depth): + word = match.group(2) + dark_suffix = "_dark" if property.endswith("_dark") else "" + return self._get_computed_value(word + dark_suffix, depth + 1) + + computed_value = re.sub( + pattern, lambda match: repl_func(match, depth), set_value + ) + return computed_value + def to_dict(self): """Convert the theme into a python dictionary.""" schema = {"theme": {}} diff --git a/js/app/index.html b/js/app/index.html index 19078c98c07b9..6adb6040e13d4 100644 --- a/js/app/index.html +++ b/js/app/index.html @@ -16,6 +16,29 @@ content="width=device-width, initial-scale=1, shrink-to-fit=no" /> + + @@ -74,6 +97,7 @@