Fixes .change() in Video, Audio, Image (#4793)

CHANGELOG.md

@@ -5,7 +5,8 @@
 
 ## Bug Fixes:
 
-No changes to highlight.
+* The `.change()` event is fixed in `Video` and `Image` so that it only fires once by [@abidlabs](https://github.com/abidlabs) in [PR 4793](https://github.com/gradio-app/gradio/pull/4793)
+* The `.change()` event is fixed in `Audio` so that fires when the component value is programmatically updated by [@abidlabs](https://github.com/abidlabs) in [PR 4793](https://github.com/gradio-app/gradio/pull/4793)
 
 ## Other Changes:
 

demo/change_vs_input/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: change_vs_input"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    set_button = gr.Button(\"Set Values\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"# Enter Here\")\n", "            text = gr.Textbox()\n", "            num = gr.Number()\n", "            slider = gr.Slider()\n", "            checkbox = gr.Checkbox()\n", "            checkbox_group = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker = gr.ColorPicker()\n", "            code = gr.Code()\n", "            dataframe = gr.Dataframe()\n", "\n", "        with gr.Column():\n", "            gr.Markdown(\"# ON:INPUT\")\n", "            text_in = gr.Textbox()\n", "            num_in = gr.Number()\n", "            slider_in = gr.Slider()\n", "            checkbox_in = gr.Checkbox()\n", "            checkbox_group_in = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio_in = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown_in = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker_in = gr.ColorPicker()\n", "            code_in = gr.Code()\n", "            dataframe_in = gr.Dataframe()\n", "\n", "        with gr.Column():\n", "            gr.Markdown(\"# ON:CHANGE\")\n", "            text_ch = gr.Textbox()\n", "            num_ch = gr.Number()\n", "            slider_ch = gr.Slider()\n", "            checkbox_ch = gr.Checkbox()\n", "            checkbox_group_ch = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio_ch = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown_ch = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker_ch = gr.ColorPicker()\n", "            code_ch = gr.Code()\n", "            dataframe_ch = gr.Dataframe()\n", "\n", "        set_button.click(\n", "            lambda: [\"asdf\", 555, 12, True, [\"a\", \"c\"], \"b\", \"b\", \"#FF0000\", \"import gradio as gr\", [[\"a\", \"b\", \"c\", \"d\"], [\"1\", \"2\", \"3\", \"4\"]]], \n", "            None, \n", "            [text, num, slider, checkbox, checkbox_group, radio, dropdown, colorpicker, code, dataframe])\n", "\n", "        text.input(lambda x:x, text, text_in)\n", "        num.input(lambda x:x, num, num_in)\n", "        slider.input(lambda x:x, slider, slider_in)\n", "        checkbox.input(lambda x:x, checkbox, checkbox_in)\n", "        checkbox_group.input(lambda x:x, checkbox_group, checkbox_group_in)\n", "        radio.input(lambda x:x, radio, radio_in)\n", "        dropdown.input(lambda x:x, dropdown, dropdown_in)\n", "        colorpicker.input(lambda x:x, colorpicker, colorpicker_in)\n", "        code.input(lambda x:x, code, code_in)\n", "        dataframe.input(lambda x:x, dataframe, dataframe_in)\n", "\n", "        text.change(lambda x:x, text, text_ch)\n", "        num.change(lambda x:x, num, num_ch)\n", "        slider.change(lambda x:x, slider, slider_ch)\n", "        checkbox.change(lambda x:x, checkbox, checkbox_ch)\n", "        checkbox_group.change(lambda x:x, checkbox_group, checkbox_group_ch)\n", "        radio.change(lambda x:x, radio, radio_ch)\n", "        dropdown.change(lambda x:x, dropdown, dropdown_ch)\n", "        colorpicker.change(lambda x:x, colorpicker, colorpicker_ch)\n", "        code.change(lambda x:x, code, code_ch)\n", "        dataframe.change(lambda x:x, dataframe, dataframe_ch)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: change_vs_input"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/change_vs_input/files/cantina.wav\n", "!wget -q -O files/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/change_vs_input/files/lion.jpg\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/change_vs_input/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import os\n", "import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    set_button = gr.Button(\"Set Values\")\n", "    with gr.Row():\n", "        with gr.Column(min_width=200):\n", "            gr.Markdown(\"# Enter Here\")\n", "            text = gr.Textbox()\n", "            num = gr.Number()\n", "            slider = gr.Slider()\n", "            checkbox = gr.Checkbox()\n", "            checkbox_group = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker = gr.ColorPicker()\n", "            code = gr.Code()\n", "            dataframe = gr.Dataframe()\n", "            image = gr.Image(elem_id=\"image-original\")\n", "            audio = gr.Audio(elem_id=\"audio-original\")\n", "            video = gr.Video(elem_id=\"video-original\")\n", "\n", "        with gr.Column(min_width=200):\n", "            gr.Markdown(\"# ON:INPUT/UPLOAD\")\n", "            text_in = gr.Textbox()\n", "            num_in = gr.Number()\n", "            slider_in = gr.Slider()\n", "            checkbox_in = gr.Checkbox()\n", "            checkbox_group_in = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio_in = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown_in = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker_in = gr.ColorPicker()\n", "            code_in = gr.Code()\n", "            dataframe_in = gr.Dataframe()\n", "            image_up = gr.Image(elem_id=\"image-upload\")\n", "            audio_up = gr.Audio(elem_id=\"audio-upload\")\n", "            video_up = gr.Video(elem_id=\"video-upload\")\n", "\n", "        with gr.Column(min_width=200):\n", "            gr.Markdown(\"# ON:CHANGE\")\n", "            text_ch = gr.Textbox()\n", "            num_ch = gr.Number()\n", "            slider_ch = gr.Slider()\n", "            checkbox_ch = gr.Checkbox()\n", "            checkbox_group_ch = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio_ch = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown_ch = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker_ch = gr.ColorPicker()\n", "            code_ch = gr.Code()\n", "            dataframe_ch = gr.Dataframe()\n", "            image_ch = gr.Image(elem_id=\"image-change\")\n", "            audio_ch = gr.Audio(elem_id=\"audio-change\")\n", "            video_ch = gr.Video(elem_id=\"video-change\")\n", "\n", "        with gr.Column(min_width=200):\n", "            gr.Markdown(\"# ON:CHANGE x2\")\n", "            text_ch2 = gr.Textbox()\n", "            num_ch2 = gr.Number()\n", "            slider_ch2 = gr.Slider()\n", "            checkbox_ch2 = gr.Checkbox()\n", "            checkbox_group_ch2 = gr.CheckboxGroup([\"a\", \"b\", \"c\"])\n", "            radio_ch2 = gr.Radio([\"a\", \"b\", \"c\"])\n", "            dropdown_ch2 = gr.Dropdown([\"a\", \"b\", \"c\"])\n", "            colorpicker_ch2 = gr.ColorPicker()\n", "            code_ch2 = gr.Code()\n", "            dataframe_ch2 = gr.Dataframe()\n", "            image_ch2 = gr.Image(elem_id=\"image-change-2\")\n", "            audio_ch2 = gr.Audio(elem_id=\"audio-change-2\")\n", "            video_ch2 = gr.Video(elem_id=\"video-change-2\")\n", "\n", "    counter = gr.Number(label=\"Change counter\")\n", "\n", "    lion = os.path.join(os.path.abspath(''), \"files/lion.jpg\")\n", "    cantina = os.path.join(os.path.abspath(''), \"files/cantina.wav\")\n", "    world = os.path.join(os.path.abspath(''), \"files/world.mp4\")\n", "\n", "    set_button.click(\n", "        lambda: [\"asdf\", 555, 12, True, [\"a\", \"c\"], \"b\", \"b\", \"#FF0000\", \"import gradio as gr\", [[\"a\", \"b\", \"c\", \"d\"], [\"1\", \"2\", \"3\", \"4\"]], lion, cantina, world], \n", "        None, \n", "        [text, num, slider, checkbox, checkbox_group, radio, dropdown, colorpicker, code, dataframe, image, audio, video])\n", "\n", "    text.input(lambda x:x, text, text_in)\n", "    num.input(lambda x:x, num, num_in)\n", "    slider.input(lambda x:x, slider, slider_in)\n", "    checkbox.input(lambda x:x, checkbox, checkbox_in)\n", "    checkbox_group.input(lambda x:x, checkbox_group, checkbox_group_in)\n", "    radio.input(lambda x:x, radio, radio_in)\n", "    dropdown.input(lambda x:x, dropdown, dropdown_in)\n", "    colorpicker.input(lambda x:x, colorpicker, colorpicker_in)\n", "    code.input(lambda x:x, code, code_in)\n", "    dataframe.input(lambda x:x, dataframe, dataframe_in)\n", "    image.upload(lambda x:x, image, image_up)\n", "    audio.upload(lambda x:x, audio, audio_up)\n", "    video.upload(lambda x:x, video, video_up)\n", "\n", "    text.change(lambda x,y:(x,y+1), [text, counter], [text_ch, counter])\n", "    num.change(lambda x,y:(x, y+1), [num, counter], [num_ch, counter])\n", "    slider.change(lambda x,y:(x, y+1), [slider, counter], [slider_ch, counter])\n", "    checkbox.change(lambda x,y:(x, y+1), [checkbox, counter], [checkbox_ch, counter])\n", "    checkbox_group.change(lambda x,y:(x, y+1), [checkbox_group, counter], [checkbox_group_ch, counter])\n", "    radio.change(lambda x,y:(x, y+1), [radio, counter], [radio_ch, counter])\n", "    dropdown.change(lambda x,y:(x, y+1), [dropdown, counter], [dropdown_ch, counter])\n", "    colorpicker.change(lambda x,y:(x, y+1), [colorpicker, counter], [colorpicker_ch, counter])\n", "    code.change(lambda x,y:(x, y+1), [code, counter], [code_ch, counter])\n", "    dataframe.change(lambda x,y:(x, y+1), [dataframe, counter], [dataframe_ch, counter])\n", "    image.change(lambda x,y:(x, y+1), [image, counter], [image_ch, counter])\n", "    audio.change(lambda x,y:(x, y+1), [audio, counter], [audio_ch, counter])\n", "    video.change(lambda x,y:(x, y+1), [video, counter], [video_ch, counter])\n", "\n", "    text_ch.change(lambda x:x, text_ch, text_ch2)\n", "    num_ch.change(lambda x:x, num_ch, num_ch2)\n", "    slider_ch.change(lambda x:x, slider_ch, slider_ch2)\n", "    checkbox_ch.change(lambda x:x, checkbox_ch, checkbox_ch2)\n", "    checkbox_group_ch.change(lambda x:x, checkbox_group_ch, checkbox_group_ch2)\n", "    radio_ch.change(lambda x:x, radio_ch, radio_ch2)\n", "    dropdown_ch.change(lambda x:x, dropdown_ch, dropdown_ch2)\n", "    colorpicker_ch.change(lambda x:x, colorpicker_ch, colorpicker_ch2)\n", "    code_ch.change(lambda x:x, code_ch, code_ch2)\n", "    dataframe_ch.change(lambda x:x, dataframe_ch, dataframe_ch2)\n", "    image_ch.change(lambda x:x, image_ch, image_ch2)\n", "    audio_ch.change(lambda x:x, audio_ch, audio_ch2)\n", "    video_ch.change(lambda x:x, video_ch, video_ch2)\n", "        \n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/change_vs_input/run.py

@@ -1,9 +1,10 @@
+import os
 import gradio as gr
 
 with gr.Blocks() as demo:
     set_button = gr.Button("Set Values")
     with gr.Row():
-        with gr.Column():
+        with gr.Column(min_width=200):
             gr.Markdown("# Enter Here")
             text = gr.Textbox()
             num = gr.Number()
@@ -15,9 +16,12 @@
             colorpicker = gr.ColorPicker()
             code = gr.Code()
             dataframe = gr.Dataframe()
+            image = gr.Image(elem_id="image-original")
+            audio = gr.Audio(elem_id="audio-original")
+            video = gr.Video(elem_id="video-original")
 
-        with gr.Column():
-            gr.Markdown("# ON:INPUT")
+        with gr.Column(min_width=200):
+            gr.Markdown("# ON:INPUT/UPLOAD")
             text_in = gr.Textbox()
             num_in = gr.Number()
             slider_in = gr.Slider()
@@ -28,8 +32,11 @@
             colorpicker_in = gr.ColorPicker()
             code_in = gr.Code()
             dataframe_in = gr.Dataframe()
+            image_up = gr.Image(elem_id="image-upload")
+            audio_up = gr.Audio(elem_id="audio-upload")
+            video_up = gr.Video(elem_id="video-upload")
 
-        with gr.Column():
+        with gr.Column(min_width=200):
             gr.Markdown("# ON:CHANGE")
             text_ch = gr.Textbox()
             num_ch = gr.Number()
@@ -41,33 +48,79 @@
             colorpicker_ch = gr.ColorPicker()
             code_ch = gr.Code()
             dataframe_ch = gr.Dataframe()
+            image_ch = gr.Image(elem_id="image-change")
+            audio_ch = gr.Audio(elem_id="audio-change")
+            video_ch = gr.Video(elem_id="video-change")
 
-        set_button.click(
-            lambda: ["asdf", 555, 12, True, ["a", "c"], "b", "b", "#FF0000", "import gradio as gr", [["a", "b", "c", "d"], ["1", "2", "3", "4"]]], 
-            None, 
-            [text, num, slider, checkbox, checkbox_group, radio, dropdown, colorpicker, code, dataframe])
+        with gr.Column(min_width=200):
+            gr.Markdown("# ON:CHANGE x2")
+            text_ch2 = gr.Textbox()
+            num_ch2 = gr.Number()
+            slider_ch2 = gr.Slider()
+            checkbox_ch2 = gr.Checkbox()
+            checkbox_group_ch2 = gr.CheckboxGroup(["a", "b", "c"])
+            radio_ch2 = gr.Radio(["a", "b", "c"])
+            dropdown_ch2 = gr.Dropdown(["a", "b", "c"])
+            colorpicker_ch2 = gr.ColorPicker()
+            code_ch2 = gr.Code()
+            dataframe_ch2 = gr.Dataframe()
+            image_ch2 = gr.Image(elem_id="image-change-2")
+            audio_ch2 = gr.Audio(elem_id="audio-change-2")
+            video_ch2 = gr.Video(elem_id="video-change-2")
 
-        text.input(lambda x:x, text, text_in)
-        num.input(lambda x:x, num, num_in)
-        slider.input(lambda x:x, slider, slider_in)
-        checkbox.input(lambda x:x, checkbox, checkbox_in)
-        checkbox_group.input(lambda x:x, checkbox_group, checkbox_group_in)
-        radio.input(lambda x:x, radio, radio_in)
-        dropdown.input(lambda x:x, dropdown, dropdown_in)
-        colorpicker.input(lambda x:x, colorpicker, colorpicker_in)
-        code.input(lambda x:x, code, code_in)
-        dataframe.input(lambda x:x, dataframe, dataframe_in)
+    counter = gr.Number(label="Change counter")
 
-        text.change(lambda x:x, text, text_ch)
-        num.change(lambda x:x, num, num_ch)
-        slider.change(lambda x:x, slider, slider_ch)
-        checkbox.change(lambda x:x, checkbox, checkbox_ch)
-        checkbox_group.change(lambda x:x, checkbox_group, checkbox_group_ch)
-        radio.change(lambda x:x, radio, radio_ch)
-        dropdown.change(lambda x:x, dropdown, dropdown_ch)
-        colorpicker.change(lambda x:x, colorpicker, colorpicker_ch)
-        code.change(lambda x:x, code, code_ch)
-        dataframe.change(lambda x:x, dataframe, dataframe_ch)
+    lion = os.path.join(os.path.dirname(__file__), "files/lion.jpg")
+    cantina = os.path.join(os.path.dirname(__file__), "files/cantina.wav")
+    world = os.path.join(os.path.dirname(__file__), "files/world.mp4")
+
+    set_button.click(
+        lambda: ["asdf", 555, 12, True, ["a", "c"], "b", "b", "#FF0000", "import gradio as gr", [["a", "b", "c", "d"], ["1", "2", "3", "4"]], lion, cantina, world], 
+        None, 
+        [text, num, slider, checkbox, checkbox_group, radio, dropdown, colorpicker, code, dataframe, image, audio, video])
+
+    text.input(lambda x:x, text, text_in)
+    num.input(lambda x:x, num, num_in)
+    slider.input(lambda x:x, slider, slider_in)
+    checkbox.input(lambda x:x, checkbox, checkbox_in)
+    checkbox_group.input(lambda x:x, checkbox_group, checkbox_group_in)
+    radio.input(lambda x:x, radio, radio_in)
+    dropdown.input(lambda x:x, dropdown, dropdown_in)
+    colorpicker.input(lambda x:x, colorpicker, colorpicker_in)
+    code.input(lambda x:x, code, code_in)
+    dataframe.input(lambda x:x, dataframe, dataframe_in)
+    image.upload(lambda x:x, image, image_up)
+    audio.upload(lambda x:x, audio, audio_up)
+    video.upload(lambda x:x, video, video_up)
+
+    text.change(lambda x,y:(x,y+1), [text, counter], [text_ch, counter])
+    num.change(lambda x,y:(x, y+1), [num, counter], [num_ch, counter])
+    slider.change(lambda x,y:(x, y+1), [slider, counter], [slider_ch, counter])
+    checkbox.change(lambda x,y:(x, y+1), [checkbox, counter], [checkbox_ch, counter])
+    checkbox_group.change(lambda x,y:(x, y+1), [checkbox_group, counter], [checkbox_group_ch, counter])
+    radio.change(lambda x,y:(x, y+1), [radio, counter], [radio_ch, counter])
+    dropdown.change(lambda x,y:(x, y+1), [dropdown, counter], [dropdown_ch, counter])
+    colorpicker.change(lambda x,y:(x, y+1), [colorpicker, counter], [colorpicker_ch, counter])
+    code.change(lambda x,y:(x, y+1), [code, counter], [code_ch, counter])
+    dataframe.change(lambda x,y:(x, y+1), [dataframe, counter], [dataframe_ch, counter])
+    image.change(lambda x,y:(x, y+1), [image, counter], [image_ch, counter])
+    audio.change(lambda x,y:(x, y+1), [audio, counter], [audio_ch, counter])
+    video.change(lambda x,y:(x, y+1), [video, counter], [video_ch, counter])
+
+    text_ch.change(lambda x:x, text_ch, text_ch2)
+    num_ch.change(lambda x:x, num_ch, num_ch2)
+    slider_ch.change(lambda x:x, slider_ch, slider_ch2)
+    checkbox_ch.change(lambda x:x, checkbox_ch, checkbox_ch2)
+    checkbox_group_ch.change(lambda x:x, checkbox_group_ch, checkbox_group_ch2)
+    radio_ch.change(lambda x:x, radio_ch, radio_ch2)
+    dropdown_ch.change(lambda x:x, dropdown_ch, dropdown_ch2)
+    colorpicker_ch.change(lambda x:x, colorpicker_ch, colorpicker_ch2)
+    code_ch.change(lambda x:x, code_ch, code_ch2)
+    dataframe_ch.change(lambda x:x, dataframe_ch, dataframe_ch2)
+    image_ch.change(lambda x:x, image_ch, image_ch2)
+    audio_ch.change(lambda x:x, audio_ch, audio_ch2)
+    video_ch.change(lambda x:x, video_ch, video_ch2)
+
 
 if __name__ == "__main__":
     demo.launch()

js/app/src/components/Audio/Audio.svelte

@@ -1,3 +1,5 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { _ } from "svelte-i18n";
@@ -23,6 +25,7 @@
 	export let visible = true;
 	export let mode: "static" | "dynamic";
 	export let value: null | FileData | string = null;
+	let old_value: null | FileData | string = null;
 	export let name: string;
 	export let source: "microphone" | "upload";
 	export let label: string;
@@ -41,6 +44,13 @@
 	let _value: null | FileData;
 	$: _value = normalise_file(value, root, root_url);
 
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			dispatch("change");
+		}
+	}
+
 	let dragging: boolean;
 </script>
 
@@ -64,10 +74,7 @@
 			{label}
 			{show_label}
 			value={_value}
-			on:change={({ detail }) => {
-				value = detail;
-				dispatch("change", value);
-			}}
+			on:change={({ detail }) => (value = detail)}
 			on:stream={({ detail }) => {
 				value = detail;
 				dispatch("stream", value);