Show label in interactive image editor (#7219)

* show label in interative image editor

* add changeset

---------

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

.changeset/thick-grapes-shine.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:Show label in interactive image editor

js/imageeditor/ImageEditor.stories.svelte

@@ -23,6 +23,8 @@
 		sources: ["webcam", "upload"],
 		type: "pil",
 		interactive: "true",
+		label: "Image Editor",
+		show_label: true,
 		brush: {
 			default_size: "auto",
 			colors: ["#ff0000", "#00ff00", "#0000ff"],

js/imageeditor/Index.svelte

@@ -156,6 +156,8 @@
 			bind:this={editor_instance}
 			{root}
 			{sources}
+			{label}
+			{show_label}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}

js/imageeditor/shared/Controls.svelte

@@ -97,8 +97,4 @@
 		gap: var(--spacing-sm);
 		z-index: var(--layer-5);
 	}
-
-	.save :global(svg) {
-		transform: translateY(1px);
-	}
 </style>

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -29,12 +29,16 @@
 	export let brush: IBrush | null;
 	export let eraser: Eraser | null;
 	import { Tools, Crop, Brush, Sources } from "./tools";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image as ImageIcon } from "@gradio/icons";
 
 	export let sources: ("clipboard" | "webcam" | "upload")[];
 	export let crop_size: [number, number] | `${string}:${string}` | null = null;
 	export let i18n: I18nFormatter;
 	export let root: string;
 	export let proxy_url: string;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
 	export let changeable = false;
 	export let value: EditorData | null = {
 		background: null,
@@ -111,6 +115,11 @@
 			: editor.set_tool("draw"));
 </script>
 
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
 <ImageEditor
 	bind:this={editor}
 	{changeable}