@gradio/core 1.0.2 → 1.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/src/Blocks.svelte +77 -61
  3. package/dist/src/dependency.js +1 -1
  4. package/package.json +56 -56
  5. package/src/Blocks.svelte +77 -61
  6. package/src/dependency.ts +8 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Features
6
+
7
+ - [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components. Thanks @abidlabs!
8
+
9
+ ### Fixes
10
+
11
+ - [#12569](https://github.com/gradio-app/gradio/pull/12569) [`9daf193`](https://github.com/gradio-app/gradio/commit/9daf1932291bea1fcbbe20096d28018657242295) - Add footer to bottom of page. Thanks @freddyaboulton!
12
+ - [#12600](https://github.com/gradio-app/gradio/pull/12600) [`1fafaba`](https://github.com/gradio-app/gradio/commit/1fafabaace315b1c699855cadb69eb17488de957) - Add x-gradio-user-header. Thanks @freddyaboulton!
13
+
14
+ ### Dependency updates
15
+
16
+ - @gradio/atoms@0.20.0
17
+ - @gradio/checkbox@0.6.0
18
+ - @gradio/utils@0.11.0
19
+ - @gradio/client@2.0.1
20
+ - @gradio/statustracker@0.12.1
21
+ - @gradio/upload@0.17.3
22
+ - @gradio/button@0.6.1
23
+ - @gradio/gallery@0.16.0
24
+ - @gradio/plot@0.10.0
25
+ - @gradio/dropdown@0.11.0
26
+ - @gradio/textbox@0.13.0
27
+ - @gradio/file@0.14.0
28
+ - @gradio/image@0.25.0
29
+ - @gradio/video@0.19.0
30
+ - @gradio/column@0.3.0
31
+ - @gradio/audio@0.22.0
32
+ - @gradio/code@0.17.0
33
+ - @gradio/paramviewer@0.9.1
34
+ - @gradio/tabitem@0.6.4
35
+ - @gradio/tabs@0.5.4
36
+
3
37
  ## 1.0.2
4
38
 
5
39
  ### Fixes
package/dist/src/Blocks.svelte CHANGED
@@ -140,6 +140,9 @@
140
140
  // update_status(id, "complete", data);
141
141
  } else if (event == "close_stream") {
142
142
  dep_manager.close_stream(id);
143
+ } else if (event === "custom_button_click") {
144
+ const button_id = (data as { id: number }).id;
145
+ dispatch_to_target(button_id, "click", null);
143
146
  } else {
144
147
  // Tabs are a bit weird. The Tabs component dispatches 'select' events
145
148
  // but the target id corresponds to the child Tab component that was selected.
@@ -175,6 +178,19 @@
175
178
  gradio_event_dispatcher
176
179
  );
177
180
 
181
+ function dispatch_to_target(
182
+ target_id: number,
183
+ event: string,
184
+ data: unknown
185
+ ): void {
186
+ dep_manager.dispatch({
187
+ type: "event",
188
+ event_name: event,
189
+ target_id: target_id,
190
+ event_data: data
191
+ });
192
+ }
193
+
178
194
  setContext(GRADIO_ROOT, {
179
195
  register: app_tree.register_component.bind(app_tree),
180
196
  dispatcher: gradio_event_dispatcher
@@ -436,75 +452,75 @@
436
452
  style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
437
453
  >
438
454
  <MountComponents node={app_tree.root} />
455
+ </div>
439
456
 
440
- {#if footer_links.length > 0}
441
- <footer bind:clientHeight={footer_height}>
442
- {#if footer_links.includes("api")}
443
- <button
444
- on:click={() => {
445
- set_api_docs_visible(!api_docs_visible);
446
- }}
447
- on:mouseenter={() => {
448
- loadApiDocs();
449
- loadApiRecorder();
450
- }}
451
- class="show-api"
452
- >
453
- {#if app.config?.mcp_server}
454
- {$reactive_formatter("errors.use_via_api_or_mcp")}
455
- {:else}
456
- {$reactive_formatter("errors.use_via_api")}
457
- {/if}
458
- <img src={api_logo} alt={$reactive_formatter("common.logo")} />
459
- </button>
460
- {/if}
461
- {#if footer_links.includes("gradio")}
462
- <div class="divider show-api-divider">·</div>
463
- <a
464
- href="https://gradio.app"
465
- class="built-with"
466
- target="_blank"
467
- rel="noreferrer"
468
- >
469
- {$reactive_formatter("common.built_with_gradio")}
470
- <img src={logo} alt={$reactive_formatter("common.logo")} />
471
- </a>
472
- {/if}
457
+ {#if footer_links.length > 0}
458
+ <footer bind:clientHeight={footer_height}>
459
+ {#if footer_links.includes("api")}
473
460
  <button
474
- class:hidden={!$is_screen_recording}
475
461
  on:click={() => {
476
- screen_recording();
462
+ set_api_docs_visible(!api_docs_visible);
463
+ }}
464
+ on:mouseenter={() => {
465
+ loadApiDocs();
466
+ loadApiRecorder();
477
467
  }}
478
- class="record"
468
+ class="show-api"
469
+ >
470
+ {#if app.config?.mcp_server}
471
+ {$reactive_formatter("errors.use_via_api_or_mcp")}
472
+ {:else}
473
+ {$reactive_formatter("errors.use_via_api")}
474
+ {/if}
475
+ <img src={api_logo} alt={$reactive_formatter("common.logo")} />
476
+ </button>
477
+ {/if}
478
+ {#if footer_links.includes("gradio")}
479
+ <div class="divider show-api-divider">·</div>
480
+ <a
481
+ href="https://gradio.app"
482
+ class="built-with"
483
+ target="_blank"
484
+ rel="noreferrer"
479
485
  >
480
- {$reactive_formatter("common.stop_recording")}
486
+ {$reactive_formatter("common.built_with_gradio")}
487
+ <img src={logo} alt={$reactive_formatter("common.logo")} />
488
+ </a>
489
+ {/if}
490
+ <button
491
+ class:hidden={!$is_screen_recording}
492
+ on:click={() => {
493
+ screen_recording();
494
+ }}
495
+ class="record"
496
+ >
497
+ {$reactive_formatter("common.stop_recording")}
498
+ <img
499
+ src={record_stop}
500
+ alt={$reactive_formatter("common.stop_recording")}
501
+ />
502
+ </button>
503
+ <div class="divider">·</div>
504
+ {#if footer_links.includes("settings")}
505
+ <div class="divider" class:hidden={!$is_screen_recording}>·</div>
506
+ <button
507
+ on:click={() => {
508
+ set_settings_visible(!settings_visible);
509
+ }}
510
+ on:mouseenter={() => {
511
+ loadSettings();
512
+ }}
513
+ class="settings"
514
+ >
515
+ {$reactive_formatter("common.settings")}
481
516
  <img
482
- src={record_stop}
483
- alt={$reactive_formatter("common.stop_recording")}
517
+ src={settings_logo}
518
+ alt={$reactive_formatter("common.settings")}
484
519
  />
485
520
  </button>
486
- <div class="divider">·</div>
487
- {#if footer_links.includes("settings")}
488
- <div class="divider" class:hidden={!$is_screen_recording}>·</div>
489
- <button
490
- on:click={() => {
491
- set_settings_visible(!settings_visible);
492
- }}
493
- on:mouseenter={() => {
494
- loadSettings();
495
- }}
496
- class="settings"
497
- >
498
- {$reactive_formatter("common.settings")}
499
- <img
500
- src={settings_logo}
501
- alt={$reactive_formatter("common.settings")}
502
- />
503
- </button>
504
- {/if}
505
- </footer>
506
- {/if}
507
- </div>
521
+ {/if}
522
+ </footer>
523
+ {/if}
508
524
  {#if api_recorder_visible && ApiRecorder}
509
525
  <!-- TODO: fix -->
510
526
  <!-- svelte-ignore a11y-click-events-have-key-events-->
package/dist/src/dependency.js CHANGED
@@ -70,7 +70,7 @@ export class Dependency {
70
70
  if (this.functions.backend) {
71
71
  return {
72
72
  type: "submit",
73
- data: client.submit(this.id, _data_payload, event_data, target_id)
73
+ data: client.submit(this.id, _data_payload, event_data, target_id, undefined, { "x-gradio-user": "app" })
74
74
  };
75
75
  }
76
76
  else if (this.functions.frontend) {
package/package.json CHANGED
@@ -1,67 +1,67 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "1.0.2",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.5.26",
7
- "@gradio/atoms": "^0.19.0",
8
- "@gradio/annotatedimage": "^0.10.1",
9
- "@gradio/box": "^0.2.26",
10
- "@gradio/audio": "^0.21.0",
11
- "@gradio/browserstate": "^0.3.3",
12
- "@gradio/button": "^0.6.0",
13
- "@gradio/chatbot": "^0.28.0",
14
- "@gradio/checkbox": "^0.5.1",
15
- "@gradio/code": "^0.16.0",
16
- "@gradio/checkboxgroup": "^0.8.0",
17
- "@gradio/colorpicker": "^0.5.1",
6
+ "@gradio/annotatedimage": "^0.11.0",
7
+ "@gradio/atoms": "^0.20.0",
8
+ "@gradio/browserstate": "^0.3.4",
9
+ "@gradio/accordion": "^0.5.27",
10
+ "@gradio/box": "^0.2.27",
11
+ "@gradio/audio": "^0.22.0",
12
+ "@gradio/button": "^0.6.1",
13
+ "@gradio/chatbot": "^0.29.0",
14
+ "@gradio/checkbox": "^0.6.0",
15
+ "@gradio/checkboxgroup": "^0.9.0",
16
+ "@gradio/client": "^2.0.1",
17
+ "@gradio/code": "^0.17.0",
18
+ "@gradio/colorpicker": "^0.5.2",
18
19
  "@gradio/column": "^0.3.0",
19
- "@gradio/client": "^2.0.0",
20
- "@gradio/dataset": "^0.5.0",
21
- "@gradio/dataframe": "^0.21.1",
22
- "@gradio/dropdown": "^0.10.7",
23
- "@gradio/datetime": "^0.3.23",
24
- "@gradio/downloadbutton": "^0.4.14",
25
- "@gradio/fallback": "^0.4.30",
26
- "@gradio/file": "^0.13.1",
27
- "@gradio/fileexplorer": "^0.5.42",
28
- "@gradio/form": "^0.2.27",
29
- "@gradio/gallery": "^0.15.36",
30
- "@gradio/group": "^0.3.0",
31
- "@gradio/highlightedtext": "^0.9.15",
32
- "@gradio/html": "^0.8.1",
33
- "@gradio/image": "^0.24.0",
20
+ "@gradio/dataframe": "^0.21.2",
21
+ "@gradio/dataset": "^0.5.1",
22
+ "@gradio/datetime": "^0.4.0",
23
+ "@gradio/downloadbutton": "^0.4.15",
24
+ "@gradio/fallback": "^0.4.31",
25
+ "@gradio/dropdown": "^0.11.0",
26
+ "@gradio/file": "^0.14.0",
27
+ "@gradio/gallery": "^0.16.0",
28
+ "@gradio/fileexplorer": "^0.6.0",
29
+ "@gradio/form": "^0.2.28",
30
+ "@gradio/highlightedtext": "^0.10.0",
31
+ "@gradio/group": "^0.3.1",
34
32
  "@gradio/icons": "^0.15.0",
35
- "@gradio/imageeditor": "^0.18.2",
36
- "@gradio/json": "^0.5.32",
37
- "@gradio/imageslider": "^0.3.1",
38
- "@gradio/label": "^0.5.22",
39
- "@gradio/markdown": "^0.13.23",
40
- "@gradio/model3d": "^0.15.1",
41
- "@gradio/multimodaltextbox": "^0.11.1",
42
- "@gradio/number": "^0.7.2",
43
- "@gradio/plot": "^0.9.25",
44
- "@gradio/nativeplot": "^0.9.1",
45
- "@gradio/paramviewer": "^0.9.0",
46
- "@gradio/radio": "^0.8.0",
33
+ "@gradio/image": "^0.25.0",
34
+ "@gradio/imageeditor": "^0.18.3",
35
+ "@gradio/html": "^0.9.0",
36
+ "@gradio/imageslider": "^0.4.0",
37
+ "@gradio/json": "^0.6.0",
38
+ "@gradio/label": "^0.6.0",
39
+ "@gradio/markdown": "^0.13.24",
40
+ "@gradio/model3d": "^0.16.0",
41
+ "@gradio/multimodaltextbox": "^0.11.2",
42
+ "@gradio/nativeplot": "^0.9.2",
43
+ "@gradio/paramviewer": "^0.9.1",
44
+ "@gradio/plot": "^0.10.0",
45
+ "@gradio/number": "^0.8.0",
46
+ "@gradio/radio": "^0.9.0",
47
+ "@gradio/sidebar": "^0.1.25",
47
48
  "@gradio/row": "^0.3.0",
48
- "@gradio/sidebar": "^0.1.24",
49
- "@gradio/simpleimage": "^0.9.1",
50
- "@gradio/simpledropdown": "^0.3.30",
51
- "@gradio/simpletextbox": "^0.3.31",
52
- "@gradio/slider": "^0.7.1",
53
- "@gradio/state": "^0.2.0",
54
- "@gradio/tabitem": "^0.6.3",
55
- "@gradio/statustracker": "^0.12.0",
56
- "@gradio/textbox": "^0.12.1",
57
- "@gradio/tabs": "^0.5.3",
49
+ "@gradio/simpledropdown": "^0.3.31",
50
+ "@gradio/simpleimage": "^0.9.2",
51
+ "@gradio/slider": "^0.7.2",
52
+ "@gradio/simpletextbox": "^0.3.32",
53
+ "@gradio/state": "^0.2.1",
54
+ "@gradio/statustracker": "^0.12.1",
55
+ "@gradio/tabs": "^0.5.4",
56
+ "@gradio/tabitem": "^0.6.4",
58
57
  "@gradio/theme": "^0.5.0",
59
- "@gradio/timer": "^0.4.6",
60
- "@gradio/uploadbutton": "^0.9.14",
61
- "@gradio/utils": "^0.10.4",
62
- "@gradio/vibeeditor": "^0.3.1",
63
- "@gradio/video": "^0.18.0",
64
- "@gradio/upload": "^0.17.2"
58
+ "@gradio/timer": "^0.4.7",
59
+ "@gradio/textbox": "^0.13.0",
60
+ "@gradio/upload": "^0.17.3",
61
+ "@gradio/utils": "^0.11.0",
62
+ "@gradio/uploadbutton": "^0.9.15",
63
+ "@gradio/vibeeditor": "^0.3.2",
64
+ "@gradio/video": "^0.19.0"
65
65
  },
66
66
  "msw": {
67
67
  "workerDirectory": "public"
package/src/Blocks.svelte CHANGED
@@ -140,6 +140,9 @@
140
140
  // update_status(id, "complete", data);
141
141
  } else if (event == "close_stream") {
142
142
  dep_manager.close_stream(id);
143
+ } else if (event === "custom_button_click") {
144
+ const button_id = (data as { id: number }).id;
145
+ dispatch_to_target(button_id, "click", null);
143
146
  } else {
144
147
  // Tabs are a bit weird. The Tabs component dispatches 'select' events
145
148
  // but the target id corresponds to the child Tab component that was selected.
@@ -175,6 +178,19 @@
175
178
  gradio_event_dispatcher
176
179
  );
177
180
 
181
+ function dispatch_to_target(
182
+ target_id: number,
183
+ event: string,
184
+ data: unknown
185
+ ): void {
186
+ dep_manager.dispatch({
187
+ type: "event",
188
+ event_name: event,
189
+ target_id: target_id,
190
+ event_data: data
191
+ });
192
+ }
193
+
178
194
  setContext(GRADIO_ROOT, {
179
195
  register: app_tree.register_component.bind(app_tree),
180
196
  dispatcher: gradio_event_dispatcher
@@ -436,75 +452,75 @@
436
452
  style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
437
453
  >
438
454
  <MountComponents node={app_tree.root} />
455
+ </div>
439
456
 
440
- {#if footer_links.length > 0}
441
- <footer bind:clientHeight={footer_height}>
442
- {#if footer_links.includes("api")}
443
- <button
444
- on:click={() => {
445
- set_api_docs_visible(!api_docs_visible);
446
- }}
447
- on:mouseenter={() => {
448
- loadApiDocs();
449
- loadApiRecorder();
450
- }}
451
- class="show-api"
452
- >
453
- {#if app.config?.mcp_server}
454
- {$reactive_formatter("errors.use_via_api_or_mcp")}
455
- {:else}
456
- {$reactive_formatter("errors.use_via_api")}
457
- {/if}
458
- <img src={api_logo} alt={$reactive_formatter("common.logo")} />
459
- </button>
460
- {/if}
461
- {#if footer_links.includes("gradio")}
462
- <div class="divider show-api-divider">·</div>
463
- <a
464
- href="https://gradio.app"
465
- class="built-with"
466
- target="_blank"
467
- rel="noreferrer"
468
- >
469
- {$reactive_formatter("common.built_with_gradio")}
470
- <img src={logo} alt={$reactive_formatter("common.logo")} />
471
- </a>
472
- {/if}
457
+ {#if footer_links.length > 0}
458
+ <footer bind:clientHeight={footer_height}>
459
+ {#if footer_links.includes("api")}
473
460
  <button
474
- class:hidden={!$is_screen_recording}
475
461
  on:click={() => {
476
- screen_recording();
462
+ set_api_docs_visible(!api_docs_visible);
463
+ }}
464
+ on:mouseenter={() => {
465
+ loadApiDocs();
466
+ loadApiRecorder();
477
467
  }}
478
- class="record"
468
+ class="show-api"
469
+ >
470
+ {#if app.config?.mcp_server}
471
+ {$reactive_formatter("errors.use_via_api_or_mcp")}
472
+ {:else}
473
+ {$reactive_formatter("errors.use_via_api")}
474
+ {/if}
475
+ <img src={api_logo} alt={$reactive_formatter("common.logo")} />
476
+ </button>
477
+ {/if}
478
+ {#if footer_links.includes("gradio")}
479
+ <div class="divider show-api-divider">·</div>
480
+ <a
481
+ href="https://gradio.app"
482
+ class="built-with"
483
+ target="_blank"
484
+ rel="noreferrer"
479
485
  >
480
- {$reactive_formatter("common.stop_recording")}
486
+ {$reactive_formatter("common.built_with_gradio")}
487
+ <img src={logo} alt={$reactive_formatter("common.logo")} />
488
+ </a>
489
+ {/if}
490
+ <button
491
+ class:hidden={!$is_screen_recording}
492
+ on:click={() => {
493
+ screen_recording();
494
+ }}
495
+ class="record"
496
+ >
497
+ {$reactive_formatter("common.stop_recording")}
498
+ <img
499
+ src={record_stop}
500
+ alt={$reactive_formatter("common.stop_recording")}
501
+ />
502
+ </button>
503
+ <div class="divider">·</div>
504
+ {#if footer_links.includes("settings")}
505
+ <div class="divider" class:hidden={!$is_screen_recording}>·</div>
506
+ <button
507
+ on:click={() => {
508
+ set_settings_visible(!settings_visible);
509
+ }}
510
+ on:mouseenter={() => {
511
+ loadSettings();
512
+ }}
513
+ class="settings"
514
+ >
515
+ {$reactive_formatter("common.settings")}
481
516
  <img
482
- src={record_stop}
483
- alt={$reactive_formatter("common.stop_recording")}
517
+ src={settings_logo}
518
+ alt={$reactive_formatter("common.settings")}
484
519
  />
485
520
  </button>
486
- <div class="divider">·</div>
487
- {#if footer_links.includes("settings")}
488
- <div class="divider" class:hidden={!$is_screen_recording}>·</div>
489
- <button
490
- on:click={() => {
491
- set_settings_visible(!settings_visible);
492
- }}
493
- on:mouseenter={() => {
494
- loadSettings();
495
- }}
496
- class="settings"
497
- >
498
- {$reactive_formatter("common.settings")}
499
- <img
500
- src={settings_logo}
501
- alt={$reactive_formatter("common.settings")}
502
- />
503
- </button>
504
- {/if}
505
- </footer>
506
- {/if}
507
- </div>
521
+ {/if}
522
+ </footer>
523
+ {/if}
508
524
  {#if api_recorder_visible && ApiRecorder}
509
525
  <!-- TODO: fix -->
510
526
  <!-- svelte-ignore a11y-click-events-have-key-events-->
package/src/dependency.ts CHANGED
@@ -113,7 +113,14 @@ export class Dependency {
113
113
  if (this.functions.backend) {
114
114
  return {
115
115
  type: "submit",
116
- data: client.submit(this.id, _data_payload, event_data, target_id)
116
+ data: client.submit(
117
+ this.id,
118
+ _data_payload,
119
+ event_data,
120
+ target_id,
121
+ undefined,
122
+ { "x-gradio-user": "app" }
123
+ )
117
124
  };
118
125
  } else if (this.functions.frontend) {
119
126
  return { type: "data", data: _data_payload };