@gradio/core 0.8.0 → 0.10.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 (13) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/dist/src/Blocks.svelte +26 -11
  3. package/dist/src/Embed.svelte +79 -30
  4. package/dist/src/Embed.svelte.d.ts +3 -0
  5. package/dist/src/init.js +1 -1
  6. package/dist/src/lang/en.json +13 -3
  7. package/dist/src/types.d.ts +1 -0
  8. package/package.json +54 -54
  9. package/src/Blocks.svelte +29 -12
  10. package/src/Embed.svelte +79 -30
  11. package/src/init.ts +5 -1
  12. package/src/lang/en.json +13 -3
  13. package/src/types.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 0.10.0
4
+
5
+ ### Features
6
+
7
+ - [#10492](https://github.com/gradio-app/gradio/pull/10492) [`29880d5`](https://github.com/gradio-app/gradio/commit/29880d51fbe7fbd222b0765a83c95134dc7d0e90) - Allow showing progress updates on arbitrary components. Thanks @abidlabs!
8
+ - [#10552](https://github.com/gradio-app/gradio/pull/10552) [`ed25a10`](https://github.com/gradio-app/gradio/commit/ed25a1053a55ddd2cf7d3067c72bdf77185ada8d) - Add 1920px wide resolution for wide monitors. Thanks @Oncorporation!
9
+
10
+ ### Fixes
11
+
12
+ - [#10490](https://github.com/gradio-app/gradio/pull/10490) [`178311b`](https://github.com/gradio-app/gradio/commit/178311b72d72a3c5f4a67bee5e0098be4232e68c) - Ensure row numbers functionality in dataframe works as expected. Thanks @hannahblair!
13
+ - [#10534](https://github.com/gradio-app/gradio/pull/10534) [`855d870`](https://github.com/gradio-app/gradio/commit/855d87001a492afce1aff9c2eb3de765d8855828) - Footer alignment fix. Thanks @aliabid94!
14
+
15
+ ### Dependency updates
16
+
17
+ - @gradio/code@0.10.17
18
+ - @gradio/paramviewer@0.7.1
19
+ - @gradio/statustracker@0.10.3
20
+ - @gradio/tabitem@0.4.2
21
+ - @gradio/tabs@0.4.2
22
+ - @gradio/video@0.14.1
23
+ - @gradio/atoms@0.13.2
24
+ - @gradio/utils@0.10.1
25
+ - @gradio/column@0.2.0
26
+ - @gradio/theme@0.4.0
27
+ - @gradio/client@1.12.0
28
+ - @gradio/upload@0.15.1
29
+ - @gradio/button@0.4.6
30
+ - @gradio/wasm@0.17.3
31
+ - @gradio/plot@0.9.8
32
+ - @gradio/gallery@0.15.6
33
+ - @gradio/image@0.21.1
34
+ - @gradio/textbox@0.10.3
35
+ - @gradio/file@0.12.6
36
+ - @gradio/checkbox@0.4.13
37
+
38
+ ## 0.9.0
39
+
40
+ ### Features
41
+
42
+ - [#10433](https://github.com/gradio-app/gradio/pull/10433) [`2e8dc74`](https://github.com/gradio-app/gradio/commit/2e8dc74f751be02f7217f78d241806b42fcdca04) - Allow building multipage Gradio apps. Thanks @aliabid94!
43
+ - [#10478](https://github.com/gradio-app/gradio/pull/10478) [`afb96c6`](https://github.com/gradio-app/gradio/commit/afb96c64451e5a282bfee89445d831d1c87f9746) - Improve dataframe's upload accessibility. Thanks @hannahblair!
44
+
45
+ ### Dependency updates
46
+
47
+ - @gradio/client@1.11.0
48
+ - @gradio/upload@0.15.0
49
+ - @gradio/button@0.4.5
50
+ - @gradio/paramviewer@0.7.0
51
+ - @gradio/code@0.10.16
52
+ - @gradio/image@0.21.0
53
+ - @gradio/gallery@0.15.5
54
+ - @gradio/file@0.12.5
55
+ - @gradio/video@0.14.0
56
+
3
57
  ## 0.8.0
4
58
 
5
59
  ### Features
package/dist/src/Blocks.svelte CHANGED
@@ -52,6 +52,12 @@ $:
52
52
  $: {
53
53
  ready = !!$_layout;
54
54
  }
55
+ let old_dependencies = dependencies;
56
+ $:
57
+ if (dependencies !== old_dependencies && render_complete) {
58
+ handle_load_triggers();
59
+ old_dependencies = dependencies;
60
+ }
55
61
  async function run() {
56
62
  await create_layout({
57
63
  components,
@@ -275,6 +281,8 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
275
281
  );
276
282
  } catch (e) {
277
283
  const fn_index = 0;
284
+ if (!app.stream_status.open)
285
+ return;
278
286
  messages = [
279
287
  new_message("Error", String(e), fn_index, "error"),
280
288
  ...messages
@@ -470,11 +478,7 @@ async function handle_mount() {
470
478
  if (is_external_url(_link) && _target !== "_blank")
471
479
  a[i].setAttribute("target", "_blank");
472
480
  }
473
- dependencies.forEach((dep) => {
474
- if (dep.targets.some((dep2) => dep2[1] === "load")) {
475
- wait_then_trigger_api_call(dep.id);
476
- }
477
- });
481
+ handle_load_triggers();
478
482
  if (!target || render_complete)
479
483
  return;
480
484
  target.addEventListener("prop_change", (e) => {
@@ -522,6 +526,13 @@ async function handle_mount() {
522
526
  });
523
527
  render_complete = true;
524
528
  }
529
+ const handle_load_triggers = () => {
530
+ dependencies.forEach((dep) => {
531
+ if (dep.targets.some((dep2) => dep2[1] === "load")) {
532
+ wait_then_trigger_api_call(dep.id);
533
+ }
534
+ });
535
+ };
525
536
  $:
526
537
  set_status($loading_status);
527
538
  function update_status(id, status, data) {
@@ -537,6 +548,9 @@ function update_status(id, status, data) {
537
548
  function set_status(statuses) {
538
549
  let updates = [];
539
550
  Object.entries(statuses).forEach(([id, loading_status2]) => {
551
+ if (!app.stream_status.open && loading_status2.status === "error") {
552
+ return;
553
+ }
540
554
  let dependency = dependencies.find(
541
555
  (dep) => dep.id == loading_status2.fn_index
542
556
  );
@@ -615,8 +629,8 @@ onMount(() => {
615
629
  >
616
630
  {$_("errors.use_via_api")}
617
631
  <img src={api_logo} alt={$_("common.logo")} />
618
- <div>&nbsp;·</div>
619
632
  </button>
633
+ <div class="divider show-api-divider">·</div>
620
634
  {/if}
621
635
  <a
622
636
  href="https://gradio.app"
@@ -627,13 +641,13 @@ onMount(() => {
627
641
  {$_("common.built_with_gradio")}
628
642
  <img src={logo} alt={$_("common.logo")} />
629
643
  </a>
644
+ <div class="divider">·</div>
630
645
  <button
631
646
  on:click={() => {
632
647
  set_settings_visible(!settings_visible);
633
648
  }}
634
649
  class="settings"
635
650
  >
636
- <div>· &nbsp;</div>
637
651
  {$_("common.settings")}
638
652
  <img src={settings_logo} alt={$_("common.settings")} />
639
653
  </button>
@@ -735,9 +749,9 @@ onMount(() => {
735
749
  margin-top: var(--size-4);
736
750
  color: var(--body-text-color-subdued);
737
751
  }
738
-
739
- footer > * + * {
740
- margin-left: var(--size-2);
752
+ .divider {
753
+ margin-left: var(--size-1);
754
+ margin-right: var(--size-2);
741
755
  }
742
756
 
743
757
  .show-api,
@@ -829,7 +843,8 @@ onMount(() => {
829
843
  }
830
844
 
831
845
  @media (max-width: 640px) {
832
- .show-api {
846
+ .show-api,
847
+ .show-api-divider {
833
848
  display: none;
834
849
  }
835
850
  }
package/dist/src/Embed.svelte CHANGED
@@ -9,11 +9,13 @@ export let space;
9
9
  export let display;
10
10
  export let info;
11
11
  export let loaded;
12
+ export let pages = [];
13
+ export let current_page = "";
14
+ export let root;
12
15
  </script>
13
16
 
14
17
  <div
15
18
  bind:this={wrapper}
16
- class:app={!display && !is_embed}
17
19
  class:fill_width
18
20
  class:embed-container={display}
19
21
  class:with-info={info}
@@ -22,32 +24,73 @@ export let loaded;
22
24
  style:flex-grow={!display ? "1" : "auto"}
23
25
  data-iframe-height
24
26
  >
25
- <div class="main">
26
- <slot />
27
- </div>
28
- {#if display && space && info}
29
- <div class="info">
30
- <span>
31
- <a href="https://huggingface.co/spaces/{space}" class="title">{space}</a
32
- >
33
- </span>
34
- <span>
35
- {$_("common.built_with")}
36
- <a class="gradio" href="https://gradio.app">Gradio</a>.
37
- </span>
38
- <span>
39
- {$_("common.hosted_on")}
40
- <a class="hf" href="https://huggingface.co/spaces"
41
- ><span class="space-logo">
42
- <img src={space_logo} alt="Hugging Face Space" />
43
- </span> Spaces</a
44
- >
45
- </span>
27
+ {#if pages.length > 1}
28
+ <div class="nav-holder">
29
+ <nav class="fillable" class:fill_width>
30
+ {#each pages as [route, label], i}
31
+ <a
32
+ href="{root}/{route}"
33
+ class:active={route === current_page}
34
+ data-sveltekit-reload
35
+ >{label}
36
+ </a>
37
+ {/each}
38
+ </nav>
46
39
  </div>
47
40
  {/if}
41
+ <main class="fillable" class:app={!display && !is_embed}>
42
+ <slot />
43
+ <div>
44
+ {#if display && space && info}
45
+ <div class="info">
46
+ <span>
47
+ <a href="https://huggingface.co/spaces/{space}" class="title"
48
+ >{space}</a
49
+ >
50
+ </span>
51
+ <span>
52
+ {$_("common.built_with")}
53
+ <a class="gradio" href="https://gradio.app">Gradio</a>.
54
+ </span>
55
+ <span>
56
+ {$_("common.hosted_on")}
57
+ <a class="hf" href="https://huggingface.co/spaces"
58
+ ><span class="space-logo">
59
+ <img src={space_logo} alt="Hugging Face Space" />
60
+ </span> Spaces</a
61
+ >
62
+ </span>
63
+ </div>
64
+ {/if}
65
+ </div>
66
+ </main>
48
67
  </div>
49
68
 
50
69
  <style>
70
+ .nav-holder {
71
+ padding: var(--size-2) 0;
72
+ border-bottom: solid 1px var(--border-color-primary);
73
+ }
74
+ nav {
75
+ display: flex;
76
+ flex-wrap: wrap;
77
+ gap: var(--size-2);
78
+ justify-content: flex-end;
79
+ margin: 0 auto;
80
+ padding: 0 var(--size-8);
81
+ }
82
+ nav a {
83
+ padding: var(--size-1) var(--size-2);
84
+ border-radius: var(--block-radius);
85
+ border-width: var(--block-border-width);
86
+ border-color: transparent;
87
+ color: var(--body-text-color-subdued);
88
+ }
89
+ nav a.active {
90
+ color: var(--body-text-color);
91
+ border-color: var(--block-border-color);
92
+ background-color: var(--block-background-fill);
93
+ }
51
94
  .gradio-container {
52
95
  display: flex;
53
96
  position: relative;
@@ -68,11 +111,12 @@ export let loaded;
68
111
  padding-bottom: var(--size-7);
69
112
  }
70
113
 
71
- .embed-container > .main {
114
+ .embed-container > main {
72
115
  padding: var(--size-4);
73
116
  }
74
117
 
75
- .app > .main {
118
+ main {
119
+ margin: 0 auto;
76
120
  display: flex;
77
121
  flex-grow: 1;
78
122
  flex-direction: column;
@@ -87,30 +131,35 @@ export let loaded;
87
131
  }
88
132
 
89
133
  @media (--screen-sm) {
90
- .app:not(.fill_width) {
134
+ .fillable:not(.fill_width) {
91
135
  max-width: 640px;
92
136
  }
93
137
  }
94
138
  @media (--screen-md) {
95
- .app:not(.fill_width) {
139
+ .fillable:not(.fill_width) {
96
140
  max-width: 768px;
97
141
  }
98
142
  }
99
143
  @media (--screen-lg) {
100
- .app:not(.fill_width) {
144
+ .fillable:not(.fill_width) {
101
145
  max-width: 1024px;
102
146
  }
103
147
  }
104
148
  @media (--screen-xl) {
105
- .app:not(.fill_width) {
149
+ .fillable:not(.fill_width) {
106
150
  max-width: 1280px;
107
151
  }
108
152
  }
109
153
  @media (--screen-xxl) {
110
- .app:not(.fill_width) {
154
+ .fillable:not(.fill_width) {
111
155
  max-width: 1536px;
112
156
  }
113
157
  }
158
+ @media (--screen-xxxl) {
159
+ .fillable:not(.fill_width) {
160
+ max-width: 1920px;
161
+ }
162
+ }
114
163
 
115
164
  .info {
116
165
  display: flex;
@@ -189,7 +238,7 @@ export let loaded;
189
238
  height: 12px;
190
239
  }
191
240
 
192
- a:hover {
241
+ main a:hover {
193
242
  text-decoration: underline;
194
243
  }
195
244
  </style>
package/dist/src/Embed.svelte.d.ts CHANGED
@@ -10,6 +10,9 @@ declare const __propDef: {
10
10
  display: boolean;
11
11
  info: boolean;
12
12
  loaded: boolean;
13
+ pages?: [string, string][] | undefined;
14
+ current_page?: string | undefined;
15
+ root: string;
13
16
  };
14
17
  events: {
15
18
  [evt: string]: CustomEvent<any>;
package/dist/src/init.js CHANGED
@@ -62,7 +62,7 @@ export function create_components(initial_layout) {
62
62
  };
63
63
  components.push(_rootNode);
64
64
  dependencies.forEach((dep) => {
65
- loading_status.register(dep.id, dep.inputs, dep.outputs);
65
+ loading_status.register(dep.id, dep.inputs, dep.show_progress_on || dep.outputs);
66
66
  dep.frontend_fn = process_frontend_fn(dep.js, !!dep.backend_fn, dep.inputs.length, dep.outputs.length);
67
67
  create_target_meta(dep.targets, dep.id, _target_map);
68
68
  get_inputs_outputs(dep, inputs, outputs);
package/dist/src/lang/en.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "_name": "English",
3
3
  "3D_model": {
4
- "3d_model": "3D Model"
4
+ "3d_model": "3D Model",
5
+ "drop_to_upload": "Drop a 3D model (.obj, .glb, .stl, .gltf, .splat, or .ply) file here to upload"
5
6
  },
6
7
  "annotated_image": {
7
8
  "annotated_image": "Annotated Image"
@@ -9,6 +10,7 @@
9
10
  "audio": {
10
11
  "allow_recording_access": "Please allow access to the microphone for recording.",
11
12
  "audio": "Audio",
13
+ "drop_to_upload": "Drop an audio file here to upload",
12
14
  "record_from_microphone": "Record from microphone",
13
15
  "stop_recording": "Stop recording",
14
16
  "no_device_support": "Media devices could not be accessed. Check that you are running on a secure origin (https) or localhost (or you have passed a valid SSL certificate to ssl_verify), and you have allowed browser access to your device.",
@@ -67,7 +69,11 @@
67
69
  "delete_row": "Delete row",
68
70
  "delete_column": "Delete column",
69
71
  "add_column_left": "Add column to the left",
70
- "add_column_right": "Add column to the right"
72
+ "add_column_right": "Add column to the right",
73
+ "sort_column": "Sort column",
74
+ "sort_ascending": "Sort ascending",
75
+ "sort_descending": "Sort descending",
76
+ "drop_to_upload": "Drop CSV or TSV files here to import data into dataframe"
71
77
  },
72
78
  "dropdown": {
73
79
  "dropdown": "Dropdown"
@@ -96,7 +102,8 @@
96
102
  "remove_image": "Remove Image",
97
103
  "select_brush_color": "Select brush color",
98
104
  "start_drawing": "Start drawing",
99
- "use_brush": "Use brush"
105
+ "use_brush": "Use brush",
106
+ "drop_to_upload": "Drop an image file here to upload"
100
107
  },
101
108
  "label": {
102
109
  "label": "Label"
@@ -129,5 +136,8 @@
129
136
  "drop_video": "Drop Video Here",
130
137
  "drop_gallery": "Drop Media Here",
131
138
  "paste_clipboard": "Paste from Clipboard"
139
+ },
140
+ "video": {
141
+ "drop_to_upload": "Drop a video file here to upload"
132
142
  }
133
143
  }
package/dist/src/types.d.ts CHANGED
@@ -50,6 +50,7 @@ export interface Dependency {
50
50
  js: string | null;
51
51
  scroll_to_output: boolean;
52
52
  show_progress: "full" | "minimal" | "hidden";
53
+ show_progress_on: number[] | null;
53
54
  frontend_fn: ((...args: unknown[]) => Promise<unknown[]>) | null;
54
55
  status?: string;
55
56
  queue: boolean | null;
package/package.json CHANGED
@@ -1,66 +1,66 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "0.8.0",
3
+ "version": "0.10.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.5.6",
7
- "@gradio/atoms": "^0.13.1",
8
- "@gradio/annotatedimage": "^0.9.5",
9
- "@gradio/button": "^0.4.4",
10
- "@gradio/audio": "^0.16.0",
11
- "@gradio/box": "^0.2.10",
12
- "@gradio/chatbot": "^0.22.3",
13
- "@gradio/checkbox": "^0.4.12",
14
- "@gradio/checkboxgroup": "^0.6.12",
15
- "@gradio/client": "^1.10.0",
16
- "@gradio/code": "^0.10.15",
17
- "@gradio/colorpicker": "^0.4.12",
6
+ "@gradio/accordion": "^0.5.7",
7
+ "@gradio/atoms": "^0.13.2",
8
+ "@gradio/audio": "^0.17.1",
9
+ "@gradio/annotatedimage": "^0.9.7",
10
+ "@gradio/box": "^0.2.11",
11
+ "@gradio/button": "^0.4.6",
12
+ "@gradio/chatbot": "^0.23.0",
13
+ "@gradio/checkbox": "^0.4.13",
14
+ "@gradio/checkboxgroup": "^0.6.13",
15
+ "@gradio/client": "^1.12.0",
16
+ "@gradio/code": "^0.10.17",
18
17
  "@gradio/column": "^0.2.0",
19
- "@gradio/dataset": "^0.4.4",
20
- "@gradio/dataframe": "^0.14.0",
21
- "@gradio/datetime": "^0.3.4",
22
- "@gradio/downloadbutton": "^0.3.4",
23
- "@gradio/dropdown": "^0.9.10",
24
- "@gradio/fallback": "^0.4.12",
25
- "@gradio/fileexplorer": "^0.5.15",
26
- "@gradio/form": "^0.2.10",
27
- "@gradio/file": "^0.12.4",
28
- "@gradio/gallery": "^0.15.4",
18
+ "@gradio/colorpicker": "^0.4.13",
19
+ "@gradio/dataframe": "^0.16.0",
20
+ "@gradio/dataset": "^0.4.6",
21
+ "@gradio/datetime": "^0.3.5",
22
+ "@gradio/downloadbutton": "^0.3.6",
23
+ "@gradio/dropdown": "^0.9.11",
24
+ "@gradio/file": "^0.12.6",
25
+ "@gradio/fileexplorer": "^0.5.17",
26
+ "@gradio/fallback": "^0.4.13",
27
+ "@gradio/form": "^0.2.11",
28
+ "@gradio/gallery": "^0.15.6",
29
+ "@gradio/highlightedtext": "^0.8.13",
29
30
  "@gradio/group": "^0.2.0",
30
- "@gradio/highlightedtext": "^0.8.12",
31
- "@gradio/html": "^0.6.3",
32
- "@gradio/image": "^0.20.4",
33
31
  "@gradio/icons": "^0.10.0",
34
- "@gradio/imageeditor": "^0.12.6",
35
- "@gradio/json": "^0.5.12",
36
- "@gradio/label": "^0.5.4",
37
- "@gradio/browserstate": "^0.3.0",
38
- "@gradio/model3d": "^0.13.15",
39
- "@gradio/multimodaltextbox": "^0.9.5",
40
- "@gradio/markdown": "^0.13.2",
41
- "@gradio/nativeplot": "^0.5.6",
42
- "@gradio/number": "^0.5.12",
43
- "@gradio/paramviewer": "^0.6.4",
44
- "@gradio/plot": "^0.9.7",
32
+ "@gradio/html": "^0.6.4",
33
+ "@gradio/image": "^0.21.1",
34
+ "@gradio/imageeditor": "^0.12.8",
35
+ "@gradio/json": "^0.5.13",
36
+ "@gradio/label": "^0.5.5",
37
+ "@gradio/markdown": "^0.13.3",
38
+ "@gradio/browserstate": "^0.3.1",
39
+ "@gradio/model3d": "^0.14.1",
40
+ "@gradio/multimodaltextbox": "^0.9.7",
41
+ "@gradio/nativeplot": "^0.5.7",
42
+ "@gradio/number": "^0.5.13",
43
+ "@gradio/plot": "^0.9.8",
44
+ "@gradio/paramviewer": "^0.7.1",
45
+ "@gradio/radio": "^0.6.13",
45
46
  "@gradio/row": "^0.2.1",
46
- "@gradio/sidebar": "^0.1.0",
47
- "@gradio/radio": "^0.6.12",
48
- "@gradio/simpledropdown": "^0.3.12",
49
- "@gradio/simpletextbox": "^0.3.12",
50
- "@gradio/simpleimage": "^0.8.15",
51
- "@gradio/slider": "^0.6.0",
47
+ "@gradio/sidebar": "^0.1.2",
48
+ "@gradio/simpledropdown": "^0.3.13",
49
+ "@gradio/simpletextbox": "^0.3.13",
50
+ "@gradio/simpleimage": "^0.8.17",
51
+ "@gradio/slider": "^0.6.1",
52
52
  "@gradio/state": "^0.1.2",
53
- "@gradio/statustracker": "^0.10.2",
54
- "@gradio/tabitem": "^0.4.1",
55
- "@gradio/tabs": "^0.4.1",
56
- "@gradio/textbox": "^0.10.2",
57
- "@gradio/theme": "^0.3.0",
58
- "@gradio/timer": "^0.4.3",
59
- "@gradio/upload": "^0.14.8",
60
- "@gradio/uploadbutton": "^0.8.4",
61
- "@gradio/utils": "^0.10.0",
62
- "@gradio/video": "^0.13.4",
63
- "@gradio/wasm": "^0.17.2"
53
+ "@gradio/tabitem": "^0.4.2",
54
+ "@gradio/statustracker": "^0.10.3",
55
+ "@gradio/tabs": "^0.4.2",
56
+ "@gradio/textbox": "^0.10.3",
57
+ "@gradio/theme": "^0.4.0",
58
+ "@gradio/uploadbutton": "^0.8.6",
59
+ "@gradio/upload": "^0.15.1",
60
+ "@gradio/video": "^0.14.1",
61
+ "@gradio/utils": "^0.10.1",
62
+ "@gradio/wasm": "^0.17.3",
63
+ "@gradio/timer": "^0.4.4"
64
64
  },
65
65
  "msw": {
66
66
  "workerDirectory": "public"
package/src/Blocks.svelte CHANGED
@@ -51,6 +51,7 @@
51
51
  export let max_file_size: number | undefined = undefined;
52
52
  export let initial_layout: ComponentMeta | undefined = undefined;
53
53
  export let css: string | null | undefined = null;
54
+
54
55
  let {
55
56
  layout: _layout,
56
57
  targets,
@@ -71,6 +72,13 @@
71
72
  ready = !!$_layout;
72
73
  }
73
74
 
75
+ let old_dependencies = dependencies;
76
+ $: if (dependencies !== old_dependencies && render_complete) {
77
+ // re-run load triggers in SSR mode when page changes
78
+ handle_load_triggers();
79
+ old_dependencies = dependencies;
80
+ }
81
+
74
82
  async function run(): Promise<void> {
75
83
  await create_layout({
76
84
  components,
@@ -364,6 +372,7 @@
364
372
  );
365
373
  } catch (e) {
366
374
  const fn_index = 0; // Mock value for fn_index
375
+ if (!app.stream_status.open) return; // when a user navigates away in multipage app.
367
376
  messages = [
368
377
  new_message("Error", String(e), fn_index, "error"),
369
378
  ...messages
@@ -607,12 +616,7 @@
607
616
  a[i].setAttribute("target", "_blank");
608
617
  }
609
618
 
610
- // handle load triggers
611
- dependencies.forEach((dep) => {
612
- if (dep.targets.some((dep) => dep[1] === "load")) {
613
- wait_then_trigger_api_call(dep.id);
614
- }
615
- });
619
+ handle_load_triggers();
616
620
 
617
621
  if (!target || render_complete) return;
618
622
 
@@ -665,6 +669,14 @@
665
669
  render_complete = true;
666
670
  }
667
671
 
672
+ const handle_load_triggers = (): void => {
673
+ dependencies.forEach((dep) => {
674
+ if (dep.targets.some((dep) => dep[1] === "load")) {
675
+ wait_then_trigger_api_call(dep.id);
676
+ }
677
+ });
678
+ };
679
+
668
680
  $: set_status($loading_status);
669
681
 
670
682
  function update_status(
@@ -689,6 +701,10 @@
689
701
  value: LoadingStatus;
690
702
  }[] = [];
691
703
  Object.entries(statuses).forEach(([id, loading_status]) => {
704
+ if (!app.stream_status.open && loading_status.status === "error") {
705
+ // when a user navigates away in multipage app.
706
+ return;
707
+ }
692
708
  let dependency = dependencies.find(
693
709
  (dep) => dep.id == loading_status.fn_index
694
710
  );
@@ -773,8 +789,8 @@
773
789
  >
774
790
  {$_("errors.use_via_api")}
775
791
  <img src={api_logo} alt={$_("common.logo")} />
776
- <div>&nbsp;·</div>
777
792
  </button>
793
+ <div class="divider show-api-divider">·</div>
778
794
  {/if}
779
795
  <a
780
796
  href="https://gradio.app"
@@ -785,13 +801,13 @@
785
801
  {$_("common.built_with_gradio")}
786
802
  <img src={logo} alt={$_("common.logo")} />
787
803
  </a>
804
+ <div class="divider">·</div>
788
805
  <button
789
806
  on:click={() => {
790
807
  set_settings_visible(!settings_visible);
791
808
  }}
792
809
  class="settings"
793
810
  >
794
- <div>· &nbsp;</div>
795
811
  {$_("common.settings")}
796
812
  <img src={settings_logo} alt={$_("common.settings")} />
797
813
  </button>
@@ -893,9 +909,9 @@
893
909
  margin-top: var(--size-4);
894
910
  color: var(--body-text-color-subdued);
895
911
  }
896
-
897
- footer > * + * {
898
- margin-left: var(--size-2);
912
+ .divider {
913
+ margin-left: var(--size-1);
914
+ margin-right: var(--size-2);
899
915
  }
900
916
 
901
917
  .show-api,
@@ -987,7 +1003,8 @@
987
1003
  }
988
1004
 
989
1005
  @media (max-width: 640px) {
990
- .show-api {
1006
+ .show-api,
1007
+ .show-api-divider {
991
1008
  display: none;
992
1009
  }
993
1010
  }
package/src/Embed.svelte CHANGED
@@ -11,11 +11,13 @@
11
11
  export let display: boolean;
12
12
  export let info: boolean;
13
13
  export let loaded: boolean;
14
+ export let pages: [string, string][] = [];
15
+ export let current_page = "";
16
+ export let root: string;
14
17
  </script>
15
18
 
16
19
  <div
17
20
  bind:this={wrapper}
18
- class:app={!display && !is_embed}
19
21
  class:fill_width
20
22
  class:embed-container={display}
21
23
  class:with-info={info}
@@ -24,32 +26,73 @@
24
26
  style:flex-grow={!display ? "1" : "auto"}
25
27
  data-iframe-height
26
28
  >
27
- <div class="main">
28
- <slot />
29
- </div>
30
- {#if display && space && info}
31
- <div class="info">
32
- <span>
33
- <a href="https://huggingface.co/spaces/{space}" class="title">{space}</a
34
- >
35
- </span>
36
- <span>
37
- {$_("common.built_with")}
38
- <a class="gradio" href="https://gradio.app">Gradio</a>.
39
- </span>
40
- <span>
41
- {$_("common.hosted_on")}
42
- <a class="hf" href="https://huggingface.co/spaces"
43
- ><span class="space-logo">
44
- <img src={space_logo} alt="Hugging Face Space" />
45
- </span> Spaces</a
46
- >
47
- </span>
29
+ {#if pages.length > 1}
30
+ <div class="nav-holder">
31
+ <nav class="fillable" class:fill_width>
32
+ {#each pages as [route, label], i}
33
+ <a
34
+ href="{root}/{route}"
35
+ class:active={route === current_page}
36
+ data-sveltekit-reload
37
+ >{label}
38
+ </a>
39
+ {/each}
40
+ </nav>
48
41
  </div>
49
42
  {/if}
43
+ <main class="fillable" class:app={!display && !is_embed}>
44
+ <slot />
45
+ <div>
46
+ {#if display && space && info}
47
+ <div class="info">
48
+ <span>
49
+ <a href="https://huggingface.co/spaces/{space}" class="title"
50
+ >{space}</a
51
+ >
52
+ </span>
53
+ <span>
54
+ {$_("common.built_with")}
55
+ <a class="gradio" href="https://gradio.app">Gradio</a>.
56
+ </span>
57
+ <span>
58
+ {$_("common.hosted_on")}
59
+ <a class="hf" href="https://huggingface.co/spaces"
60
+ ><span class="space-logo">
61
+ <img src={space_logo} alt="Hugging Face Space" />
62
+ </span> Spaces</a
63
+ >
64
+ </span>
65
+ </div>
66
+ {/if}
67
+ </div>
68
+ </main>
50
69
  </div>
51
70
 
52
71
  <style>
72
+ .nav-holder {
73
+ padding: var(--size-2) 0;
74
+ border-bottom: solid 1px var(--border-color-primary);
75
+ }
76
+ nav {
77
+ display: flex;
78
+ flex-wrap: wrap;
79
+ gap: var(--size-2);
80
+ justify-content: flex-end;
81
+ margin: 0 auto;
82
+ padding: 0 var(--size-8);
83
+ }
84
+ nav a {
85
+ padding: var(--size-1) var(--size-2);
86
+ border-radius: var(--block-radius);
87
+ border-width: var(--block-border-width);
88
+ border-color: transparent;
89
+ color: var(--body-text-color-subdued);
90
+ }
91
+ nav a.active {
92
+ color: var(--body-text-color);
93
+ border-color: var(--block-border-color);
94
+ background-color: var(--block-background-fill);
95
+ }
53
96
  .gradio-container {
54
97
  display: flex;
55
98
  position: relative;
@@ -70,11 +113,12 @@
70
113
  padding-bottom: var(--size-7);
71
114
  }
72
115
 
73
- .embed-container > .main {
116
+ .embed-container > main {
74
117
  padding: var(--size-4);
75
118
  }
76
119
 
77
- .app > .main {
120
+ main {
121
+ margin: 0 auto;
78
122
  display: flex;
79
123
  flex-grow: 1;
80
124
  flex-direction: column;
@@ -89,30 +133,35 @@
89
133
  }
90
134
 
91
135
  @media (--screen-sm) {
92
- .app:not(.fill_width) {
136
+ .fillable:not(.fill_width) {
93
137
  max-width: 640px;
94
138
  }
95
139
  }
96
140
  @media (--screen-md) {
97
- .app:not(.fill_width) {
141
+ .fillable:not(.fill_width) {
98
142
  max-width: 768px;
99
143
  }
100
144
  }
101
145
  @media (--screen-lg) {
102
- .app:not(.fill_width) {
146
+ .fillable:not(.fill_width) {
103
147
  max-width: 1024px;
104
148
  }
105
149
  }
106
150
  @media (--screen-xl) {
107
- .app:not(.fill_width) {
151
+ .fillable:not(.fill_width) {
108
152
  max-width: 1280px;
109
153
  }
110
154
  }
111
155
  @media (--screen-xxl) {
112
- .app:not(.fill_width) {
156
+ .fillable:not(.fill_width) {
113
157
  max-width: 1536px;
114
158
  }
115
159
  }
160
+ @media (--screen-xxxl) {
161
+ .fillable:not(.fill_width) {
162
+ max-width: 1920px;
163
+ }
164
+ }
116
165
 
117
166
  .info {
118
167
  display: flex;
@@ -191,7 +240,7 @@
191
240
  height: 12px;
192
241
  }
193
242
 
194
- a:hover {
243
+ main a:hover {
195
244
  text-decoration: underline;
196
245
  }
197
246
  </style>
package/src/init.ts CHANGED
@@ -131,7 +131,11 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
131
131
  components.push(_rootNode);
132
132
 
133
133
  dependencies.forEach((dep) => {
134
- loading_status.register(dep.id, dep.inputs, dep.outputs);
134
+ loading_status.register(
135
+ dep.id,
136
+ dep.inputs,
137
+ dep.show_progress_on || dep.outputs
138
+ );
135
139
  dep.frontend_fn = process_frontend_fn(
136
140
  dep.js,
137
141
  !!dep.backend_fn,
package/src/lang/en.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "_name": "English",
3
3
  "3D_model": {
4
- "3d_model": "3D Model"
4
+ "3d_model": "3D Model",
5
+ "drop_to_upload": "Drop a 3D model (.obj, .glb, .stl, .gltf, .splat, or .ply) file here to upload"
5
6
  },
6
7
  "annotated_image": {
7
8
  "annotated_image": "Annotated Image"
@@ -9,6 +10,7 @@
9
10
  "audio": {
10
11
  "allow_recording_access": "Please allow access to the microphone for recording.",
11
12
  "audio": "Audio",
13
+ "drop_to_upload": "Drop an audio file here to upload",
12
14
  "record_from_microphone": "Record from microphone",
13
15
  "stop_recording": "Stop recording",
14
16
  "no_device_support": "Media devices could not be accessed. Check that you are running on a secure origin (https) or localhost (or you have passed a valid SSL certificate to ssl_verify), and you have allowed browser access to your device.",
@@ -67,7 +69,11 @@
67
69
  "delete_row": "Delete row",
68
70
  "delete_column": "Delete column",
69
71
  "add_column_left": "Add column to the left",
70
- "add_column_right": "Add column to the right"
72
+ "add_column_right": "Add column to the right",
73
+ "sort_column": "Sort column",
74
+ "sort_ascending": "Sort ascending",
75
+ "sort_descending": "Sort descending",
76
+ "drop_to_upload": "Drop CSV or TSV files here to import data into dataframe"
71
77
  },
72
78
  "dropdown": {
73
79
  "dropdown": "Dropdown"
@@ -96,7 +102,8 @@
96
102
  "remove_image": "Remove Image",
97
103
  "select_brush_color": "Select brush color",
98
104
  "start_drawing": "Start drawing",
99
- "use_brush": "Use brush"
105
+ "use_brush": "Use brush",
106
+ "drop_to_upload": "Drop an image file here to upload"
100
107
  },
101
108
  "label": {
102
109
  "label": "Label"
@@ -129,5 +136,8 @@
129
136
  "drop_video": "Drop Video Here",
130
137
  "drop_gallery": "Drop Media Here",
131
138
  "paste_clipboard": "Paste from Clipboard"
139
+ },
140
+ "video": {
141
+ "drop_to_upload": "Drop a video file here to upload"
132
142
  }
133
143
  }
package/src/types.ts CHANGED
@@ -55,6 +55,7 @@ export interface Dependency {
55
55
  js: string | null;
56
56
  scroll_to_output: boolean;
57
57
  show_progress: "full" | "minimal" | "hidden";
58
+ show_progress_on: number[] | null;
58
59
  frontend_fn: ((...args: unknown[]) => Promise<unknown[]>) | null;
59
60
  status?: string;
60
61
  queue: boolean | null;