@gradio/core 0.24.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 0.26.0
4
+
5
+ ### Features
6
+
7
+ - [#11691](https://github.com/gradio-app/gradio/pull/11691) [`2605a99`](https://github.com/gradio-app/gradio/commit/2605a99bf29bebbbb0a97cc8e0015b5bf8d8e79b) - Add .failure() event listener for error handling. Thanks @elanehan!
8
+
9
+ ### Fixes
10
+
11
+ - [#11698](https://github.com/gradio-app/gradio/pull/11698) [`fc41f09`](https://github.com/gradio-app/gradio/commit/fc41f0950b7c427abcebdc9a113148a219d8f3f6) - Fix visibility changes in gr.render. Thanks @aliabid94!
12
+
13
+ ### Dependency updates
14
+
15
+ - @gradio/code@0.14.14
16
+ - @gradio/paramviewer@0.7.14
17
+ - @gradio/statustracker@0.10.16
18
+ - @gradio/video@0.14.24
19
+ - @gradio/atoms@0.16.4
20
+ - @gradio/column@0.2.1
21
+ - @gradio/client@1.17.0
22
+ - @gradio/upload@0.16.14
23
+ - @gradio/button@0.5.10
24
+ - @gradio/gallery@0.15.30
25
+ - @gradio/plot@0.9.21
26
+ - @gradio/checkbox@0.4.27
27
+ - @gradio/textbox@0.10.19
28
+ - @gradio/dropdown@0.10.1
29
+ - @gradio/file@0.12.27
30
+ - @gradio/image@0.22.16
31
+
32
+ ## 0.25.0
33
+
34
+ ### Features
35
+
36
+ - [#11662](https://github.com/gradio-app/gradio/pull/11662) [`a78f5fa`](https://github.com/gradio-app/gradio/commit/a78f5fa466a4b11ffaaafc5099a64df49afb6e41) - Gradio vibe editor. Thanks @aliabid94!
37
+
38
+ ### Dependency updates
39
+
40
+ - @gradio/code@0.14.13
41
+ - @gradio/upload@0.16.13
42
+ - @gradio/video@0.14.23
43
+ - @gradio/client@1.16.0
44
+ - @gradio/image@0.22.15
45
+ - @gradio/button@0.5.9
46
+ - @gradio/gallery@0.15.29
47
+ - @gradio/file@0.12.26
48
+
49
+ ## 0.24.0
50
+
51
+ ### Dependency updates
52
+
53
+ - @gradio/dropdown@0.10.0
54
+
3
55
  ## 0.24.0
4
56
 
5
57
  ### Features
@@ -35,6 +35,7 @@ export let api_prefix = "";
35
35
  export let max_file_size = void 0;
36
36
  export let initial_layout = void 0;
37
37
  export let css = null;
38
+ export let vibe_mode = false;
38
39
  let broken_connection = false;
39
40
  let {
40
41
  layout: _layout,
@@ -63,6 +64,7 @@ $:
63
64
  handle_load_triggers();
64
65
  old_dependencies = dependencies;
65
66
  }
67
+ let vibe_editor_width = 350;
66
68
  async function run() {
67
69
  await setupi18n(app.config?.i18n_translations || void 0);
68
70
  layout_creating = true;
@@ -87,6 +89,7 @@ let allow_video_trim = true;
87
89
  let ApiDocs = null;
88
90
  let ApiRecorder = null;
89
91
  let Settings = null;
92
+ let VibeEditor = null;
90
93
  async function loadApiDocs() {
91
94
  if (!ApiDocs || !ApiRecorder) {
92
95
  const api_docs_module = await import("./api_docs/ApiDocs.svelte");
@@ -109,6 +112,12 @@ async function loadSettings() {
109
112
  Settings = settings_module.default;
110
113
  }
111
114
  }
115
+ async function loadVibeEditor() {
116
+ if (!VibeEditor) {
117
+ const vibe_editor_module = await import("@gradio/vibeeditor");
118
+ VibeEditor = vibe_editor_module.default;
119
+ }
120
+ }
112
121
  async function set_api_docs_visible(visible) {
113
122
  api_recorder_visible = false;
114
123
  if (visible) {
@@ -553,7 +562,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
553
562
  }
554
563
  if (status.stage === "complete") {
555
564
  dependencies.forEach(async (dep2) => {
556
- if (dep2.trigger_after === fn_index) {
565
+ if (dep2.trigger_after === fn_index && !dep2.trigger_only_on_failure) {
557
566
  wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
558
567
  }
559
568
  });
@@ -582,7 +591,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
582
591
  ];
583
592
  }
584
593
  dependencies.map(async (dep2) => {
585
- if (dep2.trigger_after === fn_index && !dep2.trigger_only_on_success) {
594
+ if (dep2.trigger_after === fn_index && (!dep2.trigger_only_on_success || dep2.trigger_only_on_failure)) {
586
595
  wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
587
596
  }
588
597
  });
@@ -753,6 +762,13 @@ onMount(() => {
753
762
  $is_screen_recording = isRecording;
754
763
  }
755
764
  );
765
+ const handleVibeEditorResize = (event) => {
766
+ vibe_editor_width = event.detail.width;
767
+ };
768
+ window.addEventListener(
769
+ "vibeEditorResize",
770
+ handleVibeEditorResize
771
+ );
756
772
  if (api_docs_visible) {
757
773
  loadApiDocs();
758
774
  }
@@ -762,6 +778,9 @@ onMount(() => {
762
778
  if (settings_visible) {
763
779
  loadSettings();
764
780
  }
781
+ if (vibe_mode) {
782
+ loadVibeEditor();
783
+ }
765
784
  });
766
785
  function screen_recording() {
767
786
  if ($is_screen_recording) {
@@ -782,7 +801,11 @@ function screen_recording() {
782
801
  </svelte:head>
783
802
 
784
803
  <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
785
- <div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
804
+ <div
805
+ class="contain"
806
+ style:flex-grow={app_mode ? "1" : "auto"}
807
+ style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
808
+ >
786
809
  {#if $_layout && app.config}
787
810
  <MountComponents
788
811
  rootNode={$_layout}
@@ -938,6 +961,10 @@ function screen_recording() {
938
961
  <Toast {messages} on:close={handle_error_close} />
939
962
  {/if}
940
963
 
964
+ {#if vibe_mode && VibeEditor}
965
+ <svelte:component this={VibeEditor} {app} {root} />
966
+ {/if}
967
+
941
968
  <style>
942
969
  .wrap {
943
970
  display: flex;
@@ -28,6 +28,7 @@ declare const __propDef: {
28
28
  max_file_size?: number | undefined;
29
29
  initial_layout?: ComponentMeta | undefined;
30
30
  css?: string | null | undefined;
31
+ vibe_mode?: boolean | undefined;
31
32
  search_params: URLSearchParams;
32
33
  render_complete?: boolean | undefined;
33
34
  add_new_message?: ((title: string, message: string, type: ToastMessage["type"]) => void) | undefined;
package/dist/src/init.js CHANGED
@@ -241,15 +241,15 @@ export function create_components({ initial_layout = undefined } = {
241
241
  * Load newly visible components after visibility changes
242
242
  * @param newly_visible_ids Set of component IDs that are now visible
243
243
  */
244
- async function load_newly_visible_components(newly_visible_ids) {
244
+ async function load_newly_visible_components(newly_visible_ids, components) {
245
245
  if (newly_visible_ids.size === 0)
246
246
  return;
247
- const components_to_load = _components.filter((c) => newly_visible_ids.has(c.id));
247
+ const components_to_load = components.filter((c) => newly_visible_ids.has(c.id));
248
248
  for (const component of components_to_load) {
249
249
  const constructor_key = component.component_class_id || component.type;
250
250
  // Only load if not already loaded
251
251
  if (!constructor_map.has(constructor_key)) {
252
- const { component: loadable_component, example_components } = get_component(component.type, component.component_class_id, current_root, _components);
252
+ const { component: loadable_component, example_components } = get_component(component.type, component.component_class_id, current_root, components);
253
253
  constructor_map.set(constructor_key, loadable_component);
254
254
  if (example_components) {
255
255
  for (const [name, example_component] of example_components) {
@@ -290,9 +290,12 @@ export function create_components({ initial_layout = undefined } = {
290
290
  function flush() {
291
291
  const had_visibility_changes = has_visibility_changes(pending_updates);
292
292
  let previous_visible_ids;
293
+ const all_components = _component_map
294
+ ? [..._component_map.values()]
295
+ : _components;
293
296
  // Capture current visibility state before applying updates
294
297
  if (had_visibility_changes && current_layout) {
295
- previous_visible_ids = determine_visible_components(current_layout, _components);
298
+ previous_visible_ids = determine_visible_components(current_layout, all_components);
296
299
  }
297
300
  layout_store.update((layout) => {
298
301
  for (let i = 0; i < pending_updates.length; i++) {
@@ -330,7 +333,7 @@ export function create_components({ initial_layout = undefined } = {
330
333
  // After applying updates, check if we need to load new components
331
334
  if (had_visibility_changes && current_layout && previous_visible_ids) {
332
335
  raf(async () => {
333
- const new_visible_ids = determine_visible_components(current_layout, _components);
336
+ const new_visible_ids = determine_visible_components(current_layout, all_components);
334
337
  const newly_visible_ids = new Set();
335
338
  // Find components that are now visible but weren't before
336
339
  for (const id of new_visible_ids) {
@@ -339,7 +342,7 @@ export function create_components({ initial_layout = undefined } = {
339
342
  }
340
343
  }
341
344
  // Load the newly visible components
342
- await load_newly_visible_components(newly_visible_ids);
345
+ await load_newly_visible_components(newly_visible_ids, all_components);
343
346
  // Trigger a layout update to render the newly loaded components
344
347
  if (newly_visible_ids.size > 0) {
345
348
  layout_store.update((layout) => layout);
@@ -62,6 +62,7 @@ export interface Dependency {
62
62
  pending_request?: boolean;
63
63
  trigger_after?: number;
64
64
  trigger_only_on_success?: boolean;
65
+ trigger_only_on_failure?: boolean;
65
66
  trigger_mode: "once" | "multiple" | "always_last";
66
67
  final_event: Payload | null;
67
68
  show_api: boolean;
package/package.json CHANGED
@@ -1,68 +1,69 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "0.24.0",
3
+ "version": "0.26.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.5.20",
7
- "@gradio/annotatedimage": "^0.9.26",
8
- "@gradio/atoms": "^0.16.3",
9
- "@gradio/audio": "^0.17.22",
6
+ "@gradio/accordion": "^0.5.21",
7
+ "@gradio/annotatedimage": "^0.9.28",
8
+ "@gradio/audio": "^0.17.24",
9
+ "@gradio/box": "^0.2.22",
10
+ "@gradio/atoms": "^0.16.4",
10
11
  "@gradio/browserstate": "^0.3.2",
11
- "@gradio/box": "^0.2.21",
12
- "@gradio/button": "^0.5.8",
13
- "@gradio/checkbox": "^0.4.26",
14
- "@gradio/checkboxgroup": "^0.6.25",
15
- "@gradio/chatbot": "^0.26.19",
16
- "@gradio/client": "^1.15.7",
17
- "@gradio/code": "^0.14.12",
18
- "@gradio/colorpicker": "^0.4.25",
12
+ "@gradio/button": "^0.5.10",
13
+ "@gradio/chatbot": "^0.26.21",
14
+ "@gradio/checkbox": "^0.4.27",
15
+ "@gradio/checkboxgroup": "^0.6.26",
16
+ "@gradio/client": "^1.17.0",
17
+ "@gradio/code": "^0.14.14",
18
+ "@gradio/colorpicker": "^0.4.26",
19
+ "@gradio/dataframe": "^0.18.7",
20
+ "@gradio/dataset": "^0.4.31",
19
21
  "@gradio/column": "^0.2.1",
20
- "@gradio/dataset": "^0.4.29",
21
- "@gradio/dataframe": "^0.18.4",
22
- "@gradio/datetime": "^0.3.18",
23
- "@gradio/downloadbutton": "^0.4.8",
24
- "@gradio/dropdown": "^0.9.25",
25
- "@gradio/fallback": "^0.4.25",
26
- "@gradio/file": "^0.12.25",
27
- "@gradio/form": "^0.2.21",
28
- "@gradio/fileexplorer": "^0.5.36",
29
- "@gradio/gallery": "^0.15.28",
30
- "@gradio/highlightedtext": "^0.9.8",
31
- "@gradio/html": "^0.6.17",
32
- "@gradio/icons": "^0.12.0",
33
- "@gradio/image": "^0.22.14",
34
- "@gradio/imageeditor": "^0.16.2",
35
- "@gradio/imageslider": "^0.2.10",
36
- "@gradio/json": "^0.5.27",
22
+ "@gradio/datetime": "^0.3.19",
23
+ "@gradio/downloadbutton": "^0.4.10",
24
+ "@gradio/dropdown": "^0.10.1",
25
+ "@gradio/fallback": "^0.4.26",
26
+ "@gradio/file": "^0.12.27",
27
+ "@gradio/fileexplorer": "^0.5.38",
28
+ "@gradio/gallery": "^0.15.30",
29
+ "@gradio/form": "^0.2.22",
30
+ "@gradio/html": "^0.6.18",
37
31
  "@gradio/group": "^0.2.0",
38
- "@gradio/label": "^0.5.17",
39
- "@gradio/model3d": "^0.14.22",
40
- "@gradio/markdown": "^0.13.18",
41
- "@gradio/nativeplot": "^0.7.2",
42
- "@gradio/multimodaltextbox": "^0.10.14",
43
- "@gradio/number": "^0.6.2",
44
- "@gradio/paramviewer": "^0.7.13",
45
- "@gradio/radio": "^0.7.8",
46
- "@gradio/plot": "^0.9.20",
32
+ "@gradio/highlightedtext": "^0.9.9",
33
+ "@gradio/icons": "^0.12.0",
34
+ "@gradio/image": "^0.22.16",
35
+ "@gradio/imageeditor": "^0.16.4",
36
+ "@gradio/imageslider": "^0.2.12",
37
+ "@gradio/label": "^0.5.18",
38
+ "@gradio/json": "^0.5.28",
39
+ "@gradio/model3d": "^0.14.24",
40
+ "@gradio/multimodaltextbox": "^0.10.16",
41
+ "@gradio/markdown": "^0.13.19",
42
+ "@gradio/number": "^0.6.3",
43
+ "@gradio/nativeplot": "^0.7.3",
44
+ "@gradio/plot": "^0.9.21",
45
+ "@gradio/paramviewer": "^0.7.14",
46
+ "@gradio/radio": "^0.7.9",
47
+ "@gradio/sidebar": "^0.1.19",
47
48
  "@gradio/row": "^0.2.1",
48
- "@gradio/sidebar": "^0.1.18",
49
- "@gradio/simpledropdown": "^0.3.25",
50
- "@gradio/simpleimage": "^0.8.36",
51
- "@gradio/simpletextbox": "^0.3.26",
52
- "@gradio/sketchbox": "^0.6.13",
53
- "@gradio/statustracker": "^0.10.15",
49
+ "@gradio/simpletextbox": "^0.3.27",
50
+ "@gradio/simpleimage": "^0.8.38",
51
+ "@gradio/slider": "^0.6.15",
52
+ "@gradio/sketchbox": "^0.6.14",
54
53
  "@gradio/state": "^0.1.2",
55
- "@gradio/slider": "^0.6.14",
54
+ "@gradio/simpledropdown": "^0.3.26",
56
55
  "@gradio/tabitem": "^0.5.0",
57
56
  "@gradio/tabs": "^0.4.5",
58
- "@gradio/textbox": "^0.10.18",
59
- "@gradio/upload": "^0.16.12",
60
- "@gradio/timer": "^0.4.5",
61
- "@gradio/uploadbutton": "^0.9.8",
57
+ "@gradio/textbox": "^0.10.19",
58
+ "@gradio/statustracker": "^0.10.16",
62
59
  "@gradio/theme": "^0.4.0",
60
+ "@gradio/timer": "^0.4.5",
61
+ "@gradio/upload": "^0.16.14",
63
62
  "@gradio/utils": "^0.10.2",
63
+ "@gradio/uploadbutton": "^0.9.10",
64
64
  "@gradio/wasm": "^0.18.1",
65
- "@gradio/video": "^0.14.22"
65
+ "@gradio/vibeeditor": "^0.2.1",
66
+ "@gradio/video": "^0.14.24"
66
67
  },
67
68
  "msw": {
68
69
  "workerDirectory": "public"
package/src/Blocks.svelte CHANGED
@@ -56,6 +56,7 @@
56
56
  export let max_file_size: number | undefined = undefined;
57
57
  export let initial_layout: ComponentMeta | undefined = undefined;
58
58
  export let css: string | null | undefined = null;
59
+ export let vibe_mode = false;
59
60
  let broken_connection = false;
60
61
 
61
62
  let {
@@ -92,6 +93,8 @@
92
93
  old_dependencies = dependencies;
93
94
  }
94
95
 
96
+ let vibe_editor_width = 350;
97
+
95
98
  async function run(): Promise<void> {
96
99
  await setupi18n(app.config?.i18n_translations || undefined);
97
100
 
@@ -121,6 +124,7 @@
121
124
  let ApiDocs: ComponentType<ApiDocs> | null = null;
122
125
  let ApiRecorder: ComponentType<ApiRecorder> | null = null;
123
126
  let Settings: ComponentType<Settings> | null = null;
127
+ let VibeEditor: ComponentType | null = null;
124
128
 
125
129
  async function loadApiDocs(): Promise<void> {
126
130
  if (!ApiDocs || !ApiRecorder) {
@@ -145,6 +149,13 @@
145
149
  }
146
150
  }
147
151
 
152
+ async function loadVibeEditor(): Promise<void> {
153
+ if (!VibeEditor) {
154
+ const vibe_editor_module = await import("@gradio/vibeeditor");
155
+ VibeEditor = vibe_editor_module.default;
156
+ }
157
+ }
158
+
148
159
  async function set_api_docs_visible(visible: boolean): Promise<void> {
149
160
  api_recorder_visible = false;
150
161
  if (visible) {
@@ -701,7 +712,10 @@
701
712
  }
702
713
  if (status.stage === "complete") {
703
714
  dependencies.forEach(async (dep) => {
704
- if (dep.trigger_after === fn_index) {
715
+ if (
716
+ dep.trigger_after === fn_index &&
717
+ !dep.trigger_only_on_failure
718
+ ) {
705
719
  wait_then_trigger_api_call(dep.id, payload.trigger_id);
706
720
  }
707
721
  });
@@ -736,7 +750,7 @@
736
750
  dependencies.map(async (dep) => {
737
751
  if (
738
752
  dep.trigger_after === fn_index &&
739
- !dep.trigger_only_on_success
753
+ (!dep.trigger_only_on_success || dep.trigger_only_on_failure)
740
754
  ) {
741
755
  wait_then_trigger_api_call(dep.id, payload.trigger_id);
742
756
  }
@@ -945,6 +959,15 @@
945
959
  }
946
960
  );
947
961
 
962
+ const handleVibeEditorResize = (event: CustomEvent): void => {
963
+ vibe_editor_width = event.detail.width;
964
+ };
965
+
966
+ window.addEventListener(
967
+ "vibeEditorResize",
968
+ handleVibeEditorResize as EventListener
969
+ );
970
+
948
971
  // Load components if they should be visible on initial page load
949
972
  if (api_docs_visible) {
950
973
  loadApiDocs();
@@ -955,6 +978,9 @@
955
978
  if (settings_visible) {
956
979
  loadSettings();
957
980
  }
981
+ if (vibe_mode) {
982
+ loadVibeEditor();
983
+ }
958
984
  });
959
985
 
960
986
  function screen_recording(): void {
@@ -976,7 +1002,11 @@
976
1002
  </svelte:head>
977
1003
 
978
1004
  <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
979
- <div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
1005
+ <div
1006
+ class="contain"
1007
+ style:flex-grow={app_mode ? "1" : "auto"}
1008
+ style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
1009
+ >
980
1010
  {#if $_layout && app.config}
981
1011
  <MountComponents
982
1012
  rootNode={$_layout}
@@ -1132,6 +1162,10 @@
1132
1162
  <Toast {messages} on:close={handle_error_close} />
1133
1163
  {/if}
1134
1164
 
1165
+ {#if vibe_mode && VibeEditor}
1166
+ <svelte:component this={VibeEditor} {app} {root} />
1167
+ {/if}
1168
+
1135
1169
  <style>
1136
1170
  .wrap {
1137
1171
  display: flex;
package/src/init.ts CHANGED
@@ -430,11 +430,12 @@ export function create_components(
430
430
  * @param newly_visible_ids Set of component IDs that are now visible
431
431
  */
432
432
  async function load_newly_visible_components(
433
- newly_visible_ids: Set<number>
433
+ newly_visible_ids: Set<number>,
434
+ components: ComponentMeta[]
434
435
  ): Promise<void> {
435
436
  if (newly_visible_ids.size === 0) return;
436
437
 
437
- const components_to_load = _components.filter((c) =>
438
+ const components_to_load = components.filter((c) =>
438
439
  newly_visible_ids.has(c.id)
439
440
  );
440
441
 
@@ -448,7 +449,7 @@ export function create_components(
448
449
  component.type,
449
450
  component.component_class_id,
450
451
  current_root,
451
- _components
452
+ components
452
453
  );
453
454
 
454
455
  constructor_map.set(constructor_key, loadable_component);
@@ -496,12 +497,15 @@ export function create_components(
496
497
  function flush(): void {
497
498
  const had_visibility_changes = has_visibility_changes(pending_updates);
498
499
  let previous_visible_ids: Set<number> | undefined;
500
+ const all_components = _component_map
501
+ ? [..._component_map.values()]
502
+ : _components;
499
503
 
500
504
  // Capture current visibility state before applying updates
501
505
  if (had_visibility_changes && current_layout) {
502
506
  previous_visible_ids = determine_visible_components(
503
507
  current_layout,
504
- _components
508
+ all_components
505
509
  );
506
510
  }
507
511
 
@@ -541,7 +545,7 @@ export function create_components(
541
545
  raf(async () => {
542
546
  const new_visible_ids = determine_visible_components(
543
547
  current_layout,
544
- _components
548
+ all_components
545
549
  );
546
550
  const newly_visible_ids = new Set<number>();
547
551
 
@@ -553,7 +557,7 @@ export function create_components(
553
557
  }
554
558
 
555
559
  // Load the newly visible components
556
- await load_newly_visible_components(newly_visible_ids);
560
+ await load_newly_visible_components(newly_visible_ids, all_components);
557
561
 
558
562
  // Trigger a layout update to render the newly loaded components
559
563
  if (newly_visible_ids.size > 0) {
package/src/types.ts CHANGED
@@ -67,6 +67,7 @@ export interface Dependency {
67
67
  pending_request?: boolean;
68
68
  trigger_after?: number;
69
69
  trigger_only_on_success?: boolean;
70
+ trigger_only_on_failure?: boolean;
70
71
  trigger_mode: "once" | "multiple" | "always_last";
71
72
  final_event: Payload | null;
72
73
  show_api: boolean;