diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb59ef3a8b..3226c679d1 100644
--- a/CHANGELOG.md
+++ b/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:
 
diff --git a/demo/change_vs_input/files/cantina.wav b/demo/change_vs_input/files/cantina.wav
new file mode 100644
index 0000000000..41f0204384
Binary files /dev/null and b/demo/change_vs_input/files/cantina.wav differ
diff --git a/demo/change_vs_input/files/lion.jpg b/demo/change_vs_input/files/lion.jpg
new file mode 100644
index 0000000000..e9bf9f5d08
Binary files /dev/null and b/demo/change_vs_input/files/lion.jpg differ
diff --git a/demo/change_vs_input/files/world.mp4 b/demo/change_vs_input/files/world.mp4
new file mode 100644
index 0000000000..efdda67248
Binary files /dev/null and b/demo/change_vs_input/files/world.mp4 differ
diff --git a/demo/change_vs_input/run.ipynb b/demo/change_vs_input/run.ipynb
index 42b3d8b392..4fccd7df65 100644
--- a/demo/change_vs_input/run.ipynb
+++ b/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}
\ No newline at end of file
+{"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}
\ No newline at end of file
diff --git a/demo/change_vs_input/run.py b/demo/change_vs_input/run.py
index 625a2bde69..f16adf029d 100644
--- a/demo/change_vs_input/run.py
+++ b/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 @@ with gr.Blocks() as demo:
             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 @@ with gr.Blocks() as demo:
             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 @@ with gr.Blocks() as demo:
             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()
\ No newline at end of file
diff --git a/js/app/src/components/Audio/Audio.svelte b/js/app/src/components/Audio/Audio.svelte
index 1d6fc0bc70..192bfdd665 100644
--- a/js/app/src/components/Audio/Audio.svelte
+++ b/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);
diff --git a/js/app/src/components/Audio/Audio.test.ts b/js/app/src/components/Audio/Audio.test.ts
index 35b238f053..a95d269179 100644
--- a/js/app/src/components/Audio/Audio.test.ts
+++ b/js/app/src/components/Audio/Audio.test.ts
@@ -317,4 +317,36 @@ describe("Audio", () => {
 
 		assert.equal(fn.callCount, 2);
 	});
+
+	test("audio change event trigger fires when value is changed and only fires once", async () => {
+		const { component } = await render(Audio, {
+			show_label: true,
+			loading_status,
+			mode: "static",
+			value: {
+				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
+				data: null,
+				is_file: true
+			},
+			label: "static",
+			root: "foo",
+			root_url: null,
+			streaming: false,
+			pending: false,
+			source: "microphone",
+			autoplay: true
+		});
+
+		const mock = spy();
+		component.$on("change", mock);
+
+		(component.value = [
+			{
+				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample2.wav",
+				data: null,
+				is_file: true
+			}
+		]),
+			assert.equal(mock.callCount, 1);
+	});
 });
diff --git a/js/app/src/components/Image/Image.svelte b/js/app/src/components/Image/Image.svelte
index 359f7a8234..b4e88f164b 100644
--- a/js/app/src/components/Image/Image.svelte
+++ b/js/app/src/components/Image/Image.svelte
@@ -1,3 +1,5 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { Image, StaticImage } from "@gradio/image";
@@ -81,7 +83,6 @@
 			{selectable}
 			on:edit
 			on:clear
-			on:change
 			on:stream
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload
diff --git a/js/app/src/components/Image/Image.test.ts b/js/app/src/components/Image/Image.test.ts
new file mode 100644
index 0000000000..f9c73b1931
--- /dev/null
+++ b/js/app/src/components/Image/Image.test.ts
@@ -0,0 +1,57 @@
+import {
+	test,
+	describe,
+	assert,
+	afterEach,
+	vi,
+	beforeAll,
+	beforeEach
+} from "vitest";
+import { spy } from "tinyspy";
+import { cleanup, render } from "@gradio/tootils";
+import { setupi18n } from "../../i18n";
+
+import Image from "./Image.svelte";
+import type { LoadingStatus } from "../StatusTracker/types";
+
+const loading_status = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete" as LoadingStatus["status"],
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full" as LoadingStatus["show_progress"]
+};
+
+describe("Image", () => {
+	beforeAll(() => {
+		window.HTMLMediaElement.prototype.play = vi.fn();
+		window.HTMLMediaElement.prototype.pause = vi.fn();
+	});
+	beforeEach(setupi18n);
+	afterEach(() => cleanup());
+
+	test("image change event trigger fires when value is changed and only fires once", async () => {
+		const { component } = await render(Image, {
+			show_label: true,
+			loading_status,
+			mode: "dynamic",
+			value:
+				"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+			root: "foo",
+			root_url: null,
+			streaming: false,
+			pending: false,
+			source: "upload"
+		});
+
+		const mock = spy();
+		component.$on("change", mock);
+
+		component.value =
+			"https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg";
+		assert.equal(mock.callCount, 1);
+	});
+});
diff --git a/js/app/src/components/Video/Video.svelte b/js/app/src/components/Video/Video.svelte
index bbb14e520a..26f5173867 100644
--- a/js/app/src/components/Video/Video.svelte
+++ b/js/app/src/components/Video/Video.svelte
@@ -1,3 +1,5 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import type { FileData } from "@gradio/upload";
@@ -17,7 +19,7 @@
 	let old_value: [FileData, FileData | null] | null = null;
 
 	export let label: string;
-	export let source: string;
+	export let source: "upload" | "webcam";
 	export let root: string;
 	export let root_url: null | string;
 	export let show_label: boolean;
@@ -31,7 +33,7 @@
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic";
 	export let autoplay = false;
-	export let show_share_button: boolean = true;
+	export let show_share_button = true;
 
 	let _video: FileData | null = null;
 	let _subtitle: FileData | null = null;
@@ -58,8 +60,6 @@
 		} else {
 			value = null;
 		}
-
-		dispatch("change");
 	}
 
 	$: {
diff --git a/js/app/src/components/Video/Video.test.ts b/js/app/src/components/Video/Video.test.ts
index 31236a28ca..106fddf132 100644
--- a/js/app/src/components/Video/Video.test.ts
+++ b/js/app/src/components/Video/Video.test.ts
@@ -8,7 +8,7 @@ import {
 	beforeEach,
 	expect
 } from "vitest";
-import { spyOn } from "tinyspy";
+import { spy, spyOn } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../../i18n";
 
@@ -125,7 +125,7 @@ describe("Video", () => {
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "microphone",
+			source: "upload",
 			autoplay: true
 		});
 		const startButton = getByTestId<HTMLAudioElement>("test-player");
@@ -150,7 +150,7 @@ describe("Video", () => {
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "microphone",
+			source: "upload",
 			autoplay: true
 		});
 		const startButton = getByTestId<HTMLAudioElement>("test-player");
@@ -175,7 +175,7 @@ describe("Video", () => {
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "microphone",
+			source: "upload",
 			autoplay: true
 		});
 		const startButton = getByTestId<HTMLAudioElement>("test-player");
@@ -208,7 +208,7 @@ describe("Video", () => {
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "microphone",
+			source: "upload",
 			autoplay: true
 		});
 		const startButton = getByTestId<HTMLAudioElement>("test-player");
@@ -248,4 +248,37 @@ describe("Video", () => {
 			downloadButton.getElementsByTagName("button").length
 		).toBeGreaterThan(0);
 	});
+
+	test("video change event trigger fires when value is changed and only fires once", async () => {
+		const { component } = await render(Video, {
+			show_label: true,
+			loading_status,
+			mode: "dynamic",
+			value: [
+				{
+					name: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
+					data: null,
+					is_file: true
+				}
+			],
+			root: "foo",
+			root_url: null,
+			streaming: false,
+			pending: false,
+			source: "upload",
+			autoplay: true
+		});
+
+		const mock = spy();
+		component.$on("change", mock);
+
+		(component.value = [
+			{
+				name: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4",
+				data: null,
+				is_file: true
+			}
+		]),
+			assert.equal(mock.callCount, 1);
+	});
 });
diff --git a/js/image/src/Image.svelte b/js/image/src/Image.svelte
index 7ee2852c7d..ba0f6700c3 100644
--- a/js/image/src/Image.svelte
+++ b/js/image/src/Image.svelte
@@ -96,8 +96,6 @@
 		select: SelectData;
 	}>();
 
-	$: dispatch("change", value as string);
-
 	let dragging = false;
 
 	$: dispatch("drag", dragging);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22d65ad260..5312155eee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -5766,7 +5766,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.16.3(svelte@3.57.0)(vite@4.3.5)
+      '@sveltejs/kit': 1.16.3(svelte@3.59.2)(vite@4.3.9)
       import-meta-resolve: 3.0.0
     dev: true
 
diff --git a/sweep.yaml b/sweep.yaml
index 994db672ab..3834f4c111 100644
--- a/sweep.yaml
+++ b/sweep.yaml
@@ -1,2 +1,2 @@
 # Reference: https://github.com/sweepai/sweep/blob/main/sweep.yaml
-branch: dev
\ No newline at end of file
+branch: dev