From 8f99430cdb848a5ad401f1ee98d8c1517e517506 Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 1 Aug 2024 18:58:42 +0200 Subject: [PATCH 1/9] add input_value logic --- js/number/Index.svelte | 26 ++++++++++++++++++++------ js/number/Number.stories.svelte | 7 +++++++ 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/js/number/Index.svelte b/js/number/Index.svelte index cff7bbc3c889a..6778680cb6e31 100644 --- a/js/number/Index.svelte +++ b/js/number/Index.svelte @@ -21,7 +21,7 @@ export let container = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; - export let value = 0; + export let value: number | null = null; export let show_label: boolean; export let minimum: number | undefined = undefined; export let maximum: number | undefined = undefined; @@ -31,13 +31,27 @@ export let interactive: boolean; function handle_change(): void { - if (!isNaN(value) && value !== null) { - gradio.dispatch("change"); - if (!value_is_output) { - gradio.dispatch("input"); + if (input_value === "") { + value = null; + } else { + const parsed_value = parseFloat(input_value); + if (!isNaN(parsed_value)) { + value = parsed_value; } } + + gradio.dispatch("change"); + if (!value_is_output) { + gradio.dispatch("input"); + } + } + + let input_value: string = value === null ? "" : value.toString(); + + $: if (value !== null && value.toString() !== input_value) { + input_value = value.toString(); } + afterUpdate(() => { value_is_output = false; }); @@ -74,7 +88,7 @@ + + Date: Fri, 2 Aug 2024 17:25:10 +0200 Subject: [PATCH 2/9] add story --- js/number/Number.stories.svelte | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/number/Number.stories.svelte b/js/number/Number.stories.svelte index d9f28eb37615d..ddea2bbe177a1 100644 --- a/js/number/Number.stories.svelte +++ b/js/number/Number.stories.svelte @@ -17,6 +17,13 @@ }} /> + + Date: Fri, 2 Aug 2024 15:28:23 +0000 Subject: [PATCH 3/9] add changeset --- .changeset/deep-teams-jump.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/deep-teams-jump.md diff --git a/.changeset/deep-teams-jump.md b/.changeset/deep-teams-jump.md new file mode 100644 index 0000000000000..f9ba3f9d16563 --- /dev/null +++ b/.changeset/deep-teams-jump.md @@ -0,0 +1,6 @@ +--- +"@gradio/number": patch +"gradio": patch +--- + +fix:Allow empty value in gr.Number From b85aa6c175f7ed5b177f01ea73914b7c31433b34 Mon Sep 17 00:00:00 2001 From: Hannah Date: Sat, 3 Aug 2024 01:09:27 +0200 Subject: [PATCH 4/9] tweak logic --- js/number/Index.svelte | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/js/number/Index.svelte b/js/number/Index.svelte index 6778680cb6e31..b0fccfe03c9ea 100644 --- a/js/number/Index.svelte +++ b/js/number/Index.svelte @@ -30,6 +30,8 @@ export let step: number | null = null; export let interactive: boolean; + $: input_value = value === null ? "" : value.toString(); + function handle_change(): void { if (input_value === "") { value = null; @@ -46,12 +48,6 @@ } } - let input_value: string = value === null ? "" : value.toString(); - - $: if (value !== null && value.toString() !== input_value) { - input_value = value.toString(); - } - afterUpdate(() => { value_is_output = false; }); From 0e7f531866074c39e6d079cb429ec04b2fcf31b2 Mon Sep 17 00:00:00 2001 From: Hannah Date: Sat, 3 Aug 2024 17:03:50 +0200 Subject: [PATCH 5/9] maybe fix test --- js/number/Index.svelte | 6 +++--- js/number/Number.stories.svelte | 7 ------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/js/number/Index.svelte b/js/number/Index.svelte index b0fccfe03c9ea..873235508580a 100644 --- a/js/number/Index.svelte +++ b/js/number/Index.svelte @@ -60,7 +60,7 @@ } } - $: value, handle_change(); + $: input_value, value, handle_change(); $: disabled = !interactive; @@ -83,7 +83,7 @@ {label} - - Date: Sun, 4 Aug 2024 12:55:08 +0200 Subject: [PATCH 6/9] fix tests --- gradio/components/number.py | 22 +++++++++++------ js/number/Index.svelte | 47 ++++++++++++++++++++++++------------- 2 files changed, 46 insertions(+), 23 deletions(-) diff --git a/gradio/components/number.py b/gradio/components/number.py index 05b2e21f2dfff..f92baa65b31f9 100644 --- a/gradio/components/number.py +++ b/gradio/components/number.py @@ -121,13 +121,17 @@ def preprocess(self, payload: float | None) -> float | int | None: """ if payload is None: return None - elif self.minimum is not None and payload < self.minimum: - raise Error(f"Value {payload} is less than minimum value {self.minimum}.") - elif self.maximum is not None and payload > self.maximum: - raise Error( - f"Value {payload} is greater than maximum value {self.maximum}." - ) - return self._round_to_precision(payload, self.precision) + try: + value = float(payload) + except ValueError: + return None + + if self.minimum is not None and value < self.minimum: + raise Error(f"Value {value} is less than minimum value {self.minimum}.") + elif self.maximum is not None and value > self.maximum: + raise Error(f"Value {value} is greater than maximum value {self.maximum}.") + + return self._round_to_precision(value, self.precision) def postprocess(self, value: float | int | None) -> float | int | None: """ @@ -138,6 +142,10 @@ def postprocess(self, value: float | int | None) -> float | int | None: """ if value is None: return None + try: + value = float(value) + except ValueError: + return None return self._round_to_precision(value, self.precision) def api_info(self) -> dict[str, str]: diff --git a/js/number/Index.svelte b/js/number/Index.svelte index 873235508580a..80e225a70e99a 100644 --- a/js/number/Index.svelte +++ b/js/number/Index.svelte @@ -3,7 +3,7 @@ import { Block, BlockTitle } from "@gradio/atoms"; import { StatusTracker } from "@gradio/statustracker"; import type { LoadingStatus } from "@gradio/statustracker"; - import { afterUpdate, tick } from "svelte"; + import { afterUpdate, tick, onMount } from "svelte"; export let gradio: Gradio<{ change: never; @@ -30,22 +30,28 @@ export let step: number | null = null; export let interactive: boolean; - $: input_value = value === null ? "" : value.toString(); + let input_value = ""; + let input_elem: HTMLInputElement; + + $: { + input_value = value === null || value === undefined ? "" : value.toString(); + if (input_elem) input_elem.value = input_value; + } function handle_change(): void { - if (input_value === "") { - value = null; - } else { - const parsed_value = parseFloat(input_value); - if (!isNaN(parsed_value)) { - value = parsed_value; + const parsed = + input_value === "" + ? null + : isNaN(parseFloat(input_value)) + ? null + : parseFloat(input_value); + if (value !== parsed) { + value = parsed; + gradio.dispatch("change"); + if (!value_is_output) { + gradio.dispatch("input"); } } - - gradio.dispatch("change"); - if (!value_is_output) { - gradio.dispatch("input"); - } } afterUpdate(() => { @@ -56,11 +62,17 @@ await tick(); if (e.key === "Enter") { e.preventDefault(); + handle_change(); gradio.dispatch("submit"); } } - $: input_value, value, handle_change(); + onMount(() => { + if (input_elem) { + input_elem.value = input_value; + } + }); + $: disabled = !interactive; @@ -82,12 +94,15 @@