@gradio/core 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/core
 
+## 0.25.0
+
+### Features
+
+- [#11662](https://github.com/gradio-app/gradio/pull/11662) [`a78f5fa`](https://github.com/gradio-app/gradio/commit/a78f5fa466a4b11ffaaafc5099a64df49afb6e41) - Gradio vibe editor.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/code@0.14.13
+- @gradio/upload@0.16.13
+- @gradio/video@0.14.23
+- @gradio/client@1.16.0
+- @gradio/image@0.22.15
+- @gradio/button@0.5.9
+- @gradio/gallery@0.15.29
+- @gradio/file@0.12.26
+
+## 0.24.0
+
+### Dependency updates
+
+- @gradio/dropdown@0.10.0
+
 ## 0.24.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -35,6 +35,7 @@ export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
 export let css = null;
+export let vibe_mode = false;
 let broken_connection = false;
 let {
   layout: _layout,
@@ -63,6 +64,7 @@ $:
     handle_load_triggers();
     old_dependencies = dependencies;
   }
+let vibe_editor_width = 350;
 async function run() {
   await setupi18n(app.config?.i18n_translations || void 0);
   layout_creating = true;
@@ -87,6 +89,7 @@ let allow_video_trim = true;
 let ApiDocs = null;
 let ApiRecorder = null;
 let Settings = null;
+let VibeEditor = null;
 async function loadApiDocs() {
   if (!ApiDocs || !ApiRecorder) {
     const api_docs_module = await import("./api_docs/ApiDocs.svelte");
@@ -109,6 +112,12 @@ async function loadSettings() {
     Settings = settings_module.default;
   }
 }
+async function loadVibeEditor() {
+  if (!VibeEditor) {
+    const vibe_editor_module = await import("@gradio/vibeeditor");
+    VibeEditor = vibe_editor_module.default;
+  }
+}
 async function set_api_docs_visible(visible) {
   api_recorder_visible = false;
   if (visible) {
@@ -753,6 +762,13 @@ onMount(() => {
       $is_screen_recording = isRecording;
     }
   );
+  const handleVibeEditorResize = (event) => {
+    vibe_editor_width = event.detail.width;
+  };
+  window.addEventListener(
+    "vibeEditorResize",
+    handleVibeEditorResize
+  );
   if (api_docs_visible) {
     loadApiDocs();
   }
@@ -762,6 +778,9 @@ onMount(() => {
   if (settings_visible) {
     loadSettings();
   }
+  if (vibe_mode) {
+    loadVibeEditor();
+  }
 });
 function screen_recording() {
   if ($is_screen_recording) {
@@ -782,7 +801,11 @@ function screen_recording() {
 </svelte:head>
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
-	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
+	<div
+		class="contain"
+		style:flex-grow={app_mode ? "1" : "auto"}
+		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
+	>
 		{#if $_layout && app.config}
 			<MountComponents
 				rootNode={$_layout}
@@ -938,6 +961,10 @@ function screen_recording() {
 	<Toast {messages} on:close={handle_error_close} />
 {/if}
 
+{#if vibe_mode && VibeEditor}
+	<svelte:component this={VibeEditor} {app} {root} />
+{/if}
+
 <style>
 	.wrap {
 		display: flex;

package/dist/src/Blocks.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
         max_file_size?: number | undefined;
         initial_layout?: ComponentMeta | undefined;
         css?: string | null | undefined;
+        vibe_mode?: boolean | undefined;
         search_params: URLSearchParams;
         render_complete?: boolean | undefined;
         add_new_message?: ((title: string, message: string, type: ToastMessage["type"]) => void) | undefined;

package/package.json

@@ -1,68 +1,69 @@
 {
   "name": "@gradio/core",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "devDependencies": {
     "@gradio/accordion": "^0.5.20",
-    "@gradio/annotatedimage": "^0.9.26",
     "@gradio/atoms": "^0.16.3",
-    "@gradio/audio": "^0.17.22",
-    "@gradio/browserstate": "^0.3.2",
+    "@gradio/annotatedimage": "^0.9.27",
     "@gradio/box": "^0.2.21",
-    "@gradio/button": "^0.5.8",
-    "@gradio/checkbox": "^0.4.26",
+    "@gradio/browserstate": "^0.3.2",
+    "@gradio/audio": "^0.17.23",
+    "@gradio/chatbot": "^0.26.20",
+    "@gradio/button": "^0.5.9",
     "@gradio/checkboxgroup": "^0.6.25",
-    "@gradio/chatbot": "^0.26.19",
-    "@gradio/client": "^1.15.7",
-    "@gradio/code": "^0.14.12",
+    "@gradio/checkbox": "^0.4.26",
+    "@gradio/client": "^1.16.0",
+    "@gradio/code": "^0.14.13",
     "@gradio/colorpicker": "^0.4.25",
     "@gradio/column": "^0.2.1",
-    "@gradio/dataset": "^0.4.29",
-    "@gradio/dataframe": "^0.18.4",
+    "@gradio/dataset": "^0.4.30",
+    "@gradio/dataframe": "^0.18.5",
+    "@gradio/downloadbutton": "^0.4.9",
     "@gradio/datetime": "^0.3.18",
-    "@gradio/downloadbutton": "^0.4.8",
-    "@gradio/dropdown": "^0.9.25",
+    "@gradio/dropdown": "^0.10.0",
+    "@gradio/file": "^0.12.26",
+    "@gradio/fileexplorer": "^0.5.37",
     "@gradio/fallback": "^0.4.25",
-    "@gradio/file": "^0.12.25",
     "@gradio/form": "^0.2.21",
-    "@gradio/fileexplorer": "^0.5.36",
-    "@gradio/gallery": "^0.15.28",
+    "@gradio/gallery": "^0.15.29",
+    "@gradio/group": "^0.2.0",
     "@gradio/highlightedtext": "^0.9.8",
     "@gradio/html": "^0.6.17",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.14",
-    "@gradio/imageeditor": "^0.16.2",
-    "@gradio/imageslider": "^0.2.10",
-    "@gradio/json": "^0.5.27",
-    "@gradio/group": "^0.2.0",
+    "@gradio/image": "^0.22.15",
+    "@gradio/imageeditor": "^0.16.3",
+    "@gradio/imageslider": "^0.2.11",
     "@gradio/label": "^0.5.17",
-    "@gradio/model3d": "^0.14.22",
+    "@gradio/multimodaltextbox": "^0.10.15",
     "@gradio/markdown": "^0.13.18",
+    "@gradio/model3d": "^0.14.23",
+    "@gradio/json": "^0.5.27",
     "@gradio/nativeplot": "^0.7.2",
-    "@gradio/multimodaltextbox": "^0.10.14",
     "@gradio/number": "^0.6.2",
     "@gradio/paramviewer": "^0.7.13",
-    "@gradio/radio": "^0.7.8",
     "@gradio/plot": "^0.9.20",
+    "@gradio/radio": "^0.7.8",
     "@gradio/row": "^0.2.1",
     "@gradio/sidebar": "^0.1.18",
-    "@gradio/simpledropdown": "^0.3.25",
-    "@gradio/simpleimage": "^0.8.36",
+    "@gradio/simpleimage": "^0.8.37",
     "@gradio/simpletextbox": "^0.3.26",
+    "@gradio/simpledropdown": "^0.3.25",
     "@gradio/sketchbox": "^0.6.13",
-    "@gradio/statustracker": "^0.10.15",
-    "@gradio/state": "^0.1.2",
     "@gradio/slider": "^0.6.14",
+    "@gradio/state": "^0.1.2",
     "@gradio/tabitem": "^0.5.0",
     "@gradio/tabs": "^0.4.5",
+    "@gradio/statustracker": "^0.10.15",
     "@gradio/textbox": "^0.10.18",
-    "@gradio/upload": "^0.16.12",
-    "@gradio/timer": "^0.4.5",
-    "@gradio/uploadbutton": "^0.9.8",
     "@gradio/theme": "^0.4.0",
+    "@gradio/timer": "^0.4.5",
     "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/video": "^0.14.22"
+    "@gradio/vibeeditor": "^0.2.0",
+    "@gradio/uploadbutton": "^0.9.9",
+    "@gradio/video": "^0.14.23",
+    "@gradio/upload": "^0.16.13",
+    "@gradio/wasm": "^0.18.1"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -56,6 +56,7 @@
 	export let max_file_size: number | undefined = undefined;
 	export let initial_layout: ComponentMeta | undefined = undefined;
 	export let css: string | null | undefined = null;
+	export let vibe_mode = false;
 	let broken_connection = false;
 
 	let {
@@ -92,6 +93,8 @@
 		old_dependencies = dependencies;
 	}
 
+	let vibe_editor_width = 350;
+
 	async function run(): Promise<void> {
 		await setupi18n(app.config?.i18n_translations || undefined);
 
@@ -121,6 +124,7 @@
 	let ApiDocs: ComponentType<ApiDocs> | null = null;
 	let ApiRecorder: ComponentType<ApiRecorder> | null = null;
 	let Settings: ComponentType<Settings> | null = null;
+	let VibeEditor: ComponentType | null = null;
 
 	async function loadApiDocs(): Promise<void> {
 		if (!ApiDocs || !ApiRecorder) {
@@ -145,6 +149,13 @@
 		}
 	}
 
+	async function loadVibeEditor(): Promise<void> {
+		if (!VibeEditor) {
+			const vibe_editor_module = await import("@gradio/vibeeditor");
+			VibeEditor = vibe_editor_module.default;
+		}
+	}
+
 	async function set_api_docs_visible(visible: boolean): Promise<void> {
 		api_recorder_visible = false;
 		if (visible) {
@@ -945,6 +956,15 @@
 			}
 		);
 
+		const handleVibeEditorResize = (event: CustomEvent): void => {
+			vibe_editor_width = event.detail.width;
+		};
+
+		window.addEventListener(
+			"vibeEditorResize",
+			handleVibeEditorResize as EventListener
+		);
+
 		// Load components if they should be visible on initial page load
 		if (api_docs_visible) {
 			loadApiDocs();
@@ -955,6 +975,9 @@
 		if (settings_visible) {
 			loadSettings();
 		}
+		if (vibe_mode) {
+			loadVibeEditor();
+		}
 	});
 
 	function screen_recording(): void {
@@ -976,7 +999,11 @@
 </svelte:head>
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
-	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
+	<div
+		class="contain"
+		style:flex-grow={app_mode ? "1" : "auto"}
+		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
+	>
 		{#if $_layout && app.config}
 			<MountComponents
 				rootNode={$_layout}
@@ -1132,6 +1159,10 @@
 	<Toast {messages} on:close={handle_error_close} />
 {/if}
 
+{#if vibe_mode && VibeEditor}
+	<svelte:component this={VibeEditor} {app} {root} />
+{/if}
+
 <style>
 	.wrap {
 		display: flex;