image fixes (#5589)

* Add flag

* Copy front-end

* Add backend code

* Remove breakpoint

* Fix init

* Add code

* File reorg

* Fix types

* Upload files

* Fix code

* Custom components

* Add code

* Client changes

* More changes

* Add code

* Add code

* Fix reversion

* build hook integration

* Add code

* rm file

* Add code

* rename cli

* Add code

* Nicer cli

* Add display class

* Add backend devmide

* Add code?

* Add code

* Add paths and fix reload mdoe

* Fix .then

* changes

* fix

* fix

* changes

* changes

* changes

* Fix versions

* Fix wheel build from source

* Add code

* Get no template case working

* Cc fe (#5509)

* tweaks

* fix 18n

* fix 18n

* tweaks

* Change name

---------

Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>

* Do not use live display for dev mode

* Clean up front-end server print statements a little bit

* Fix success event

* Cc fe 2 (#5526)

* tweaks

* fix examples

* fix backend port

* fix things

* fix

* Fix json component flagging

* fix

* fuix

---------

Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>

* Fix template (#5533)

* Fix type hint (#5536)

* fix custom components when installed from wheel (#5552)

* Fix all demos custom components (#5555)

* Fix all_demos

* Fix issues

* trigger ci

* add changeset

* Fix merge

* lockfile

* Add code

* add code

* Fix command

* Add code

* Fix highlighted text

* fix interactive highlighted text

* tweak ci

* fix image uploads

* add changeset

* remove changeset

* add changeset

---------

Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/hip-drinks-bow.md

@@ -0,0 +1,8 @@
+---
+"@gradio/app": minor
+"@gradio/image": minor
+"@gradio/theme": minor
+"gradio": minor
+---
+
+feat:image fixes

js/app/src/main.ts

@@ -1,4 +1,7 @@
-import "@gradio/theme";
+import "@gradio/theme/src/reset.css";
+import "@gradio/theme/src/global.css";
+import "@gradio/theme/src/pollen.css";
+import "@gradio/theme/src/typography.css";
 import { client, upload_files } from "@gradio/client";
 import { mount_css } from "./css";
 import Index from "./Index.svelte";

js/image/interactive/Image.svelte

@@ -51,11 +51,15 @@
 
 	function handle_upload({ detail }: CustomEvent<string>): void {
 		if (tool === "color-sketch") {
-			static_image = normalise_file(detail, root, null);
+			static_image = normalise_file(detail, root, null)?.data;
 		} else {
-			value = { image: normalise_file(detail, root, null), mask: null };
+			value =
+				(source === "upload" || source === "webcam") && tool === "sketch"
+					? { image: normalise_file(detail, root, null), mask: null }
+					: normalise_file(detail, root, null);
 		}
-		dispatch("upload", detail);
+
+		dispatch("upload", normalise_file(detail, root, null));
 	}
 
 	function handle_clear({ detail }: CustomEvent<null>): void {
@@ -191,8 +195,6 @@
 			dispatch("select", { index: coordinates, value: null });
 		}
 	}
-
-	$: console.log(value);
 </script>
 
 <BlockLabel
@@ -240,7 +242,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 				<img
-					src={value_.image.data}
+					src={value_.data}
 					alt=""
 					class:scale-x-[-1]={source === "webcam" && mirror_webcam}
 					class:selectable
@@ -252,11 +254,12 @@
 					<img
 						bind:this={value_img}
 						class="absolute-img"
-						src={static_image || value?.image || value}
+						src={static_image || value?.image?.data || value?.data}
 						alt=""
 						on:load={handle_image_load}
 						class:webcam={source === "webcam" && mirror_webcam}
 						loading="lazy"
+						crossorigin="anonymous"
 					/>
 				{/key}
 				{#if img_width > 0}
@@ -297,7 +300,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
 				<img
-					src={value.image.data || value.data}
+					src={value.image || value.data}
 					alt="hello"
 					class:webcam={source === "webcam" && mirror_webcam}
 					class:selectable

js/image/interactive/Sketch.svelte

@@ -40,6 +40,8 @@
 
 	let last_value_img;
 
+	$: console.log(value_img);
+
 	$: {
 		if (mounted && value_img !== last_value_img) {
 			last_value_img = value_img;

js/theme/src/index.ts

@@ -1,6 +1,6 @@
-export { default as reset } from "./reset.css";
-export { default as global } from "./global.css";
-export { default as css } from "./pollen.css";
-export { default as typography } from "./typography.css";
+// export { default as reset } from "./reset.css";
+// export { default as global } from "./global.css";
+// export { default as css } from "./pollen.css";
+// export { default as typography } from "./typography.css";
 
 export * from "./colors";