Fixes interactive output image cannot be set when in edit mode (#3135)

* cropper fix

* Update CHANGELOG.md

CHANGELOG.md

@@ -43,6 +43,7 @@ By [@maxaudron](https://github.com/maxaudron) in [PR 3075](https://github.com/gr
 - Ensure the Video component correctly resets the UI state whe a new video source is loaded and reduce choppiness of UI by [@pngwn](https://github.com/abidlabs) in [PR 3117](https://github.com/gradio-app/gradio/pull/3117)
 - Fixes loading private Spaces by [@abidlabs](https://github.com/abidlabs) in [PR 3068](https://github.com/gradio-app/gradio/pull/3068) 
 - Added a warning when attempting to launch an `Interface` via the `%%blocks` jupyter notebook magic command by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3126](https://github.com/gradio-app/gradio/pull/3126)
+- Fixes bug where interactive output image cannot be set when in edit mode by [@dawoodkhan82](https://github.com/freddyaboulton) in [PR 3135](https://github.com/gradio-app/gradio/pull/3135)
 - A share link will automatically be created when running on Sagemaker notebooks so that the front-end is properly displayed by [@abidlabs](https://github.com/abidlabs) in [PR 3137](https://github.com/gradio-app/gradio/pull/3137) 
 
 ## Documentation Changes:

ui/packages/image/src/Cropper.svelte

@@ -1,3 +1,5 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import Cropper from "cropperjs";
 	import { onMount, createEventDispatcher } from "svelte";
@@ -6,9 +8,17 @@
 	let el: HTMLImageElement;
 
 	const dispatch = createEventDispatcher();
+	let cropper: Cropper;
 
-	onMount(() => {
-		const cropper = new Cropper(el, {
+	export function destroy() {
+		cropper.destroy();
+	}
+
+	export function create() {
+		if (cropper) {
+			destroy();
+		}
+		cropper = new Cropper(el, {
 			autoCropArea: 1,
 			cropend() {
 				const image_data = cropper.getCroppedCanvas().toDataURL();
@@ -17,11 +27,7 @@
 		});
 
 		dispatch("crop", image);
-
-		return () => {
-			cropper.destroy();
-		};
-	});
+	}
 </script>
 
 <img src={image} bind:this={el} alt="" />

ui/packages/image/src/Image.svelte

@@ -27,6 +27,7 @@
 	export let mirror_webcam: boolean;
 
 	let sketch: Sketch;
+	let cropper: Cropper;
 
 	if (
 		value &&
@@ -146,6 +147,17 @@
 			static_image = undefined;
 		}
 	}
+
+	$: {
+		if (cropper) {
+			if (value) {
+				cropper.image = value;
+				cropper.create();
+			} else {
+				cropper.destroy();
+			}
+		}
+	}
 </script>
 
 <BlockLabel
@@ -173,7 +185,7 @@
 			{#if (value === null && !static_image) || streaming}
 				<slot />
 			{:else if tool === "select"}
-				<Cropper image={value} on:crop={handle_save} />
+				<Cropper bind:this={cropper} image={value} on:crop={handle_save} />
 				<ModifyUpload on:clear={(e) => (handle_clear(e), (tool = "editor"))} />
 			{:else if tool === "editor"}
 				<ModifyUpload
@@ -274,7 +286,7 @@
 			/>
 		{/if}
 	{:else if tool === "select"}
-		<Cropper image={value} on:crop={handle_save} />
+		<Cropper bind:this={cropper} image={value} on:crop={handle_save} />
 		<ModifyUpload on:clear={(e) => (handle_clear(e), (tool = "editor"))} />
 	{:else if tool === "editor"}
 		<ModifyUpload