@gradio/core 0.1.0 → 0.2.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 (9) hide show
  1. package/CHANGELOG.md +72 -0
  2. package/dist/src/Blocks.svelte +20 -12
  3. package/dist/src/Blocks.svelte.d.ts +2 -2
  4. package/dist/src/api_docs/InputPayload.svelte +9 -0
  5. package/dist/src/init.js +17 -0
  6. package/package.json +49 -49
  7. package/src/Blocks.svelte +20 -10
  8. package/src/api_docs/InputPayload.svelte +9 -0
  9. package/src/init.ts +20 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,77 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 0.2.0
4
+
5
+ ### Features
6
+
7
+ - [#9681](https://github.com/gradio-app/gradio/pull/9681) [`2ed2361`](https://github.com/gradio-app/gradio/commit/2ed236187a9aab18e17fc4a8079eddef7dd195a5) - Allow setting title in gr.Info/Warning/Error. Thanks @ABucket!
8
+
9
+ ### Fixes
10
+
11
+ - [#9728](https://github.com/gradio-app/gradio/pull/9728) [`d0b2ce8`](https://github.com/gradio-app/gradio/commit/d0b2ce8c0f150f0b636ad7d2226f7c8c61401996) - Ensure tabs render in SSR mode and reduce time it takes for them to render. Thanks @pngwn!
12
+
13
+ ### Dependency updates
14
+
15
+ - @gradio/video@0.11.3
16
+ - @gradio/markdown@0.10.2
17
+ - @gradio/atoms@0.9.1
18
+ - @gradio/statustracker@0.9.0
19
+ - @gradio/client@1.7.0
20
+ - @gradio/upload@0.13.2
21
+ - @gradio/button@0.3.2
22
+ - @gradio/wasm@0.14.2
23
+ - @gradio/gallery@0.13.3
24
+ - @gradio/plot@0.7.2
25
+ - @gradio/image@0.16.3
26
+ - @gradio/column@0.2.0
27
+ - @gradio/textbox@0.8.1
28
+ - @gradio/file@0.10.3
29
+ - @gradio/checkbox@0.4.2
30
+ - @gradio/tabs@0.3.1
31
+ - @gradio/code@0.10.3
32
+ - @gradio/paramviewer@0.5.2
33
+ - @gradio/tabitem@0.3.1
34
+
35
+ ## 0.1.1
36
+
37
+ ### Dependency updates
38
+
39
+ - @gradio/textbox@0.8.0
40
+
41
+ ## 0.1.1
42
+
43
+ ### Dependency updates
44
+
45
+ - @gradio/code@0.10.2
46
+ - @gradio/file@0.10.2
47
+ - @gradio/upload@0.13.1
48
+ - @gradio/image@0.16.2
49
+ - @gradio/video@0.11.2
50
+ - @gradio/button@0.3.1
51
+ - @gradio/wasm@0.14.1
52
+ - @gradio/gallery@0.13.2
53
+
54
+ ## 0.1.1
55
+
56
+ ### Features
57
+
58
+ - [#9617](https://github.com/gradio-app/gradio/pull/9617) [`c163182`](https://github.com/gradio-app/gradio/commit/c163182d1b752ef91629f9caa13bf3cce0fb0869) - Fix dark mode detection and container height. Thanks @pngwn!
59
+
60
+ ### Dependency updates
61
+
62
+ - @gradio/code@0.10.1
63
+ - @gradio/paramviewer@0.5.1
64
+ - @gradio/video@0.11.1
65
+ - @gradio/statustracker@0.8.1
66
+ - @gradio/gallery@0.13.1
67
+ - @gradio/markdown@0.10.1
68
+ - @gradio/plot@0.7.1
69
+ - @gradio/textbox@0.7.1
70
+ - @gradio/column@0.2.0
71
+ - @gradio/checkbox@0.4.1
72
+ - @gradio/file@0.10.1
73
+ - @gradio/image@0.16.1
74
+
3
75
  ## 0.1.0
4
76
 
5
77
  ### Features
package/dist/src/Blocks.svelte CHANGED
@@ -117,8 +117,9 @@ async function handle_update(data, fn_index) {
117
117
  }
118
118
  let submit_map = /* @__PURE__ */ new Map();
119
119
  let messages = [];
120
- function new_message(message, fn_index, type, duration = 10, visible = true) {
120
+ function new_message(title2, message, fn_index, type, duration = 10, visible = true) {
121
121
  return {
122
+ title: title2,
122
123
  message,
123
124
  fn_index,
124
125
  type,
@@ -127,8 +128,8 @@ function new_message(message, fn_index, type, duration = 10, visible = true) {
127
128
  visible
128
129
  };
129
130
  }
130
- export function add_new_message(message, type) {
131
- messages = [new_message(message, -1, type), ...messages];
131
+ export function add_new_message(title2, message, type) {
132
+ messages = [new_message(title2, message, -1, type), ...messages];
132
133
  }
133
134
  let _error_id = -1;
134
135
  let user_left_page = false;
@@ -173,7 +174,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
173
174
  if (inputs_waiting.length > 0) {
174
175
  for (const input of inputs_waiting) {
175
176
  if (dep.inputs.includes(input)) {
176
- add_new_message(WAITING_FOR_INPUTS_MESSAGE, "warning");
177
+ add_new_message("Warning", WAITING_FOR_INPUTS_MESSAGE, "warning");
177
178
  return;
178
179
  }
179
180
  }
@@ -262,7 +263,10 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
262
263
  );
263
264
  } catch (e) {
264
265
  const fn_index = 0;
265
- messages = [new_message(String(e), fn_index, "error"), ...messages];
266
+ messages = [
267
+ new_message("Error", String(e), fn_index, "error"),
268
+ ...messages
269
+ ];
266
270
  loading_status.update({
267
271
  status: "error",
268
272
  fn_index,
@@ -322,9 +326,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
322
326
  });
323
327
  }
324
328
  function handle_log(msg) {
325
- const { log, fn_index, level, duration, visible } = msg;
329
+ const { title: title2, log, fn_index, level, duration, visible } = msg;
326
330
  messages = [
327
- new_message(log, fn_index, level, duration, visible),
331
+ new_message(title2, log, fn_index, level, duration, visible),
328
332
  ...messages
329
333
  ];
330
334
  }
@@ -354,14 +358,14 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
354
358
  if (!showed_duplicate_message && space_id !== null && status.position !== void 0 && status.position >= 2 && status.eta !== void 0 && status.eta > SHOW_DUPLICATE_MESSAGE_ON_ETA) {
355
359
  showed_duplicate_message = true;
356
360
  messages = [
357
- new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
361
+ new_message("Warning", DUPLICATE_MESSAGE, fn_index, "warning"),
358
362
  ...messages
359
363
  ];
360
364
  }
361
365
  if (!showed_mobile_warning && is_mobile_device && status.eta !== void 0 && status.eta > SHOW_MOBILE_QUEUE_WARNING_ON_ETA) {
362
366
  showed_mobile_warning = true;
363
367
  messages = [
364
- new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
368
+ new_message("Warning", MOBILE_QUEUE_WARNING, fn_index, "warning"),
365
369
  ...messages
366
370
  ];
367
371
  }
@@ -386,7 +390,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
386
390
  if (status.broken && is_mobile_device && user_left_page) {
387
391
  window.setTimeout(() => {
388
392
  messages = [
389
- new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
393
+ new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
390
394
  ...messages
391
395
  ];
392
396
  }, 0);
@@ -398,8 +402,10 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
398
402
  MESSAGE_QUOTE_RE,
399
403
  (_2, b) => b
400
404
  );
405
+ const _title = status.title ?? "Error";
401
406
  messages = [
402
407
  new_message(
408
+ _title,
403
409
  _message,
404
410
  fn_index,
405
411
  "error",
@@ -478,8 +484,10 @@ async function handle_mount() {
478
484
  if (event === "share") {
479
485
  const { title: title2, description } = data;
480
486
  trigger_share(title2, description);
481
- } else if (event === "error" || event === "warning") {
482
- messages = [new_message(data, -1, event), ...messages];
487
+ } else if (event === "error") {
488
+ messages = [new_message("Error", data, -1, event), ...messages];
489
+ } else if (event === "warning") {
490
+ messages = [new_message("Warning", data, -1, event), ...messages];
483
491
  } else if (event == "clear_status") {
484
492
  update_status(id, "complete", data);
485
493
  } else if (event == "close_stream") {
package/dist/src/Blocks.svelte.d.ts CHANGED
@@ -30,7 +30,7 @@ declare const __propDef: {
30
30
  css?: string | null | undefined;
31
31
  search_params: URLSearchParams;
32
32
  render_complete?: boolean | undefined;
33
- add_new_message?: ((message: string, type: ToastMessage["type"]) => void) | undefined;
33
+ add_new_message?: ((title: string, message: string, type: ToastMessage["type"]) => void) | undefined;
34
34
  };
35
35
  events: {
36
36
  [evt: string]: CustomEvent<any>;
@@ -41,6 +41,6 @@ export type BlocksProps = typeof __propDef.props;
41
41
  export type BlocksEvents = typeof __propDef.events;
42
42
  export type BlocksSlots = typeof __propDef.slots;
43
43
  export default class Blocks extends SvelteComponent<BlocksProps, BlocksEvents, BlocksSlots> {
44
- get add_new_message(): (message: string, type: ToastMessage["type"]) => void;
44
+ get add_new_message(): (title: string, message: string, type: ToastMessage["type"]) => void;
45
45
  }
46
46
  export {};
package/dist/src/api_docs/InputPayload.svelte CHANGED
@@ -95,6 +95,15 @@ function format_label(label) {
95
95
  height: 6px;
96
96
  }
97
97
 
98
+ @media (prefers-color-scheme: dark) {
99
+ .toggle-icon {
100
+ background: var(--color-grey-500);
101
+ }
102
+ .toggle-dot {
103
+ background: var(--color-grey-400);
104
+ }
105
+ }
106
+
98
107
  :global(.dark) .toggle-icon {
99
108
  background: var(--color-grey-500);
100
109
  }
package/dist/src/init.js CHANGED
@@ -145,6 +145,23 @@ export function create_components(initial_layout) {
145
145
  if (node.children) {
146
146
  instance.children = await Promise.all(node.children.map((v) => walk_layout(v, root, instance)));
147
147
  }
148
+ if (instance.type === "tabs") {
149
+ instance.children =
150
+ instance?.children?.map((c) => ({
151
+ ...c,
152
+ props: {
153
+ ...c.props,
154
+ id: c.props.id || c.id
155
+ }
156
+ })) || [];
157
+ const child_tab_items = instance.children?.filter((child) => child.type === "tabitem");
158
+ instance.props.inital_tabs = child_tab_items?.map((child) => ({
159
+ label: child.props.label,
160
+ id: child.props.id,
161
+ visible: child.props.visible,
162
+ interactive: child.props.interactive
163
+ }));
164
+ }
148
165
  return instance;
149
166
  }
150
167
  let update_scheduled = false;
package/package.json CHANGED
@@ -1,64 +1,64 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.4.0",
7
- "@gradio/annotatedimage": "^0.8.0",
8
- "@gradio/atoms": "^0.9.0",
9
- "@gradio/audio": "^0.14.0",
10
- "@gradio/box": "^0.2.0",
11
- "@gradio/button": "^0.3.0",
12
- "@gradio/checkbox": "^0.4.0",
13
- "@gradio/chatbot": "^0.14.0",
14
- "@gradio/checkboxgroup": "^0.6.0",
15
- "@gradio/client": "^1.6.0",
16
- "@gradio/code": "^0.10.0",
17
- "@gradio/colorpicker": "^0.4.0",
6
+ "@gradio/annotatedimage": "^0.8.3",
7
+ "@gradio/accordion": "^0.4.2",
8
+ "@gradio/atoms": "^0.9.1",
9
+ "@gradio/box": "^0.2.1",
10
+ "@gradio/button": "^0.3.2",
11
+ "@gradio/audio": "^0.14.3",
12
+ "@gradio/chatbot": "^0.15.1",
13
+ "@gradio/checkbox": "^0.4.2",
14
+ "@gradio/checkboxgroup": "^0.6.2",
15
+ "@gradio/client": "^1.7.0",
16
+ "@gradio/code": "^0.10.3",
17
+ "@gradio/colorpicker": "^0.4.2",
18
18
  "@gradio/column": "^0.2.0",
19
- "@gradio/dataframe": "^0.11.0",
20
- "@gradio/dataset": "^0.3.0",
21
- "@gradio/datetime": "^0.2.0",
22
- "@gradio/downloadbutton": "^0.2.0",
23
- "@gradio/fallback": "^0.4.0",
24
- "@gradio/dropdown": "^0.8.0",
25
- "@gradio/fileexplorer": "^0.5.0",
26
- "@gradio/form": "^0.2.0",
27
- "@gradio/file": "^0.10.0",
28
- "@gradio/gallery": "^0.13.0",
19
+ "@gradio/dataframe": "^0.11.3",
20
+ "@gradio/datetime": "^0.2.2",
21
+ "@gradio/downloadbutton": "^0.2.2",
22
+ "@gradio/dataset": "^0.3.4",
23
+ "@gradio/dropdown": "^0.9.0",
24
+ "@gradio/fileexplorer": "^0.5.3",
25
+ "@gradio/fallback": "^0.4.2",
26
+ "@gradio/file": "^0.10.3",
27
+ "@gradio/form": "^0.2.1",
28
+ "@gradio/gallery": "^0.13.3",
29
+ "@gradio/highlightedtext": "^0.8.2",
29
30
  "@gradio/group": "^0.2.0",
30
- "@gradio/html": "^0.4.0",
31
31
  "@gradio/icons": "^0.8.0",
32
- "@gradio/highlightedtext": "^0.8.0",
33
- "@gradio/image": "^0.16.0",
34
- "@gradio/imageeditor": "^0.11.0",
35
- "@gradio/json": "^0.5.0",
36
- "@gradio/label": "^0.4.0",
37
- "@gradio/model3d": "^0.13.0",
38
- "@gradio/markdown": "^0.10.0",
39
- "@gradio/number": "^0.5.0",
40
- "@gradio/paramviewer": "^0.5.0",
41
- "@gradio/multimodaltextbox": "^0.6.0",
42
- "@gradio/nativeplot": "^0.4.0",
43
- "@gradio/plot": "^0.7.0",
32
+ "@gradio/html": "^0.4.2",
33
+ "@gradio/image": "^0.16.3",
34
+ "@gradio/imageeditor": "^0.11.3",
35
+ "@gradio/json": "^0.5.2",
36
+ "@gradio/label": "^0.4.2",
37
+ "@gradio/model3d": "^0.13.3",
38
+ "@gradio/markdown": "^0.10.2",
39
+ "@gradio/multimodaltextbox": "^0.7.1",
40
+ "@gradio/nativeplot": "^0.4.2",
41
+ "@gradio/number": "^0.5.2",
42
+ "@gradio/paramviewer": "^0.5.2",
43
+ "@gradio/plot": "^0.7.2",
44
+ "@gradio/radio": "^0.6.2",
44
45
  "@gradio/row": "^0.2.0",
45
- "@gradio/simpledropdown": "^0.3.0",
46
- "@gradio/radio": "^0.6.0",
47
- "@gradio/simpleimage": "^0.8.0",
48
- "@gradio/simpletextbox": "^0.3.0",
49
- "@gradio/slider": "^0.5.0",
50
- "@gradio/statustracker": "^0.8.0",
46
+ "@gradio/simpleimage": "^0.8.3",
47
+ "@gradio/simpletextbox": "^0.3.2",
48
+ "@gradio/simpledropdown": "^0.3.2",
49
+ "@gradio/slider": "^0.5.2",
50
+ "@gradio/statustracker": "^0.9.0",
51
51
  "@gradio/state": "^0.1.2",
52
- "@gradio/tabitem": "^0.3.0",
53
- "@gradio/tabs": "^0.3.0",
54
- "@gradio/textbox": "^0.7.0",
52
+ "@gradio/tabitem": "^0.3.1",
53
+ "@gradio/tabs": "^0.3.1",
54
+ "@gradio/textbox": "^0.8.1",
55
55
  "@gradio/theme": "^0.3.0",
56
- "@gradio/upload": "^0.13.0",
57
- "@gradio/uploadbutton": "^0.7.0",
58
56
  "@gradio/timer": "^0.4.0",
57
+ "@gradio/uploadbutton": "^0.7.2",
58
+ "@gradio/upload": "^0.13.2",
59
+ "@gradio/video": "^0.11.3",
59
60
  "@gradio/utils": "^0.7.0",
60
- "@gradio/video": "^0.11.0",
61
- "@gradio/wasm": "^0.14.0"
61
+ "@gradio/wasm": "^0.14.2"
62
62
  },
63
63
  "msw": {
64
64
  "workerDirectory": "public"
package/src/Blocks.svelte CHANGED
@@ -152,6 +152,7 @@
152
152
 
153
153
  let messages: (ToastMessage & { fn_index: number })[] = [];
154
154
  function new_message(
155
+ title: string,
155
156
  message: string,
156
157
  fn_index: number,
157
158
  type: ToastMessage["type"],
@@ -159,6 +160,7 @@
159
160
  visible = true
160
161
  ): ToastMessage & { fn_index: number } {
161
162
  return {
163
+ title,
162
164
  message,
163
165
  fn_index,
164
166
  type,
@@ -169,10 +171,11 @@
169
171
  }
170
172
 
171
173
  export function add_new_message(
174
+ title: string,
172
175
  message: string,
173
176
  type: ToastMessage["type"]
174
177
  ): void {
175
- messages = [new_message(message, -1, type), ...messages];
178
+ messages = [new_message(title, message, -1, type), ...messages];
176
179
  }
177
180
 
178
181
  let _error_id = -1;
@@ -241,7 +244,7 @@
241
244
  if (inputs_waiting.length > 0) {
242
245
  for (const input of inputs_waiting) {
243
246
  if (dep.inputs.includes(input)) {
244
- add_new_message(WAITING_FOR_INPUTS_MESSAGE, "warning");
247
+ add_new_message("Warning", WAITING_FOR_INPUTS_MESSAGE, "warning");
245
248
  return;
246
249
  }
247
250
  }
@@ -346,7 +349,10 @@
346
349
  );
347
350
  } catch (e) {
348
351
  const fn_index = 0; // Mock value for fn_index
349
- messages = [new_message(String(e), fn_index, "error"), ...messages];
352
+ messages = [
353
+ new_message("Error", String(e), fn_index, "error"),
354
+ ...messages
355
+ ];
350
356
  loading_status.update({
351
357
  status: "error",
352
358
  fn_index,
@@ -413,9 +419,9 @@
413
419
  }
414
420
 
415
421
  function handle_log(msg: LogMessage): void {
416
- const { log, fn_index, level, duration, visible } = msg;
422
+ const { title, log, fn_index, level, duration, visible } = msg;
417
423
  messages = [
418
- new_message(log, fn_index, level, duration, visible),
424
+ new_message(title, log, fn_index, level, duration, visible),
419
425
  ...messages
420
426
  ];
421
427
  }
@@ -463,7 +469,7 @@
463
469
  ) {
464
470
  showed_duplicate_message = true;
465
471
  messages = [
466
- new_message(DUPLICATE_MESSAGE, fn_index, "warning"),
472
+ new_message("Warning", DUPLICATE_MESSAGE, fn_index, "warning"),
467
473
  ...messages
468
474
  ];
469
475
  }
@@ -475,7 +481,7 @@
475
481
  ) {
476
482
  showed_mobile_warning = true;
477
483
  messages = [
478
- new_message(MOBILE_QUEUE_WARNING, fn_index, "warning"),
484
+ new_message("Warning", MOBILE_QUEUE_WARNING, fn_index, "warning"),
479
485
  ...messages
480
486
  ];
481
487
  }
@@ -503,7 +509,7 @@
503
509
  if (status.broken && is_mobile_device && user_left_page) {
504
510
  window.setTimeout(() => {
505
511
  messages = [
506
- new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
512
+ new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
507
513
  ...messages
508
514
  ];
509
515
  }, 0);
@@ -515,8 +521,10 @@
515
521
  MESSAGE_QUOTE_RE,
516
522
  (_, b) => b
517
523
  );
524
+ const _title = status.title ?? "Error";
518
525
  messages = [
519
526
  new_message(
527
+ _title,
520
528
  _message,
521
529
  fn_index,
522
530
  "error",
@@ -612,8 +620,10 @@
612
620
  if (event === "share") {
613
621
  const { title, description } = data as ShareData;
614
622
  trigger_share(title, description);
615
- } else if (event === "error" || event === "warning") {
616
- messages = [new_message(data, -1, event), ...messages];
623
+ } else if (event === "error") {
624
+ messages = [new_message("Error", data, -1, event), ...messages];
625
+ } else if (event === "warning") {
626
+ messages = [new_message("Warning", data, -1, event), ...messages];
617
627
  } else if (event == "clear_status") {
618
628
  update_status(id, "complete", data);
619
629
  } else if (event == "close_stream") {
package/src/api_docs/InputPayload.svelte CHANGED
@@ -101,6 +101,15 @@
101
101
  height: 6px;
102
102
  }
103
103
 
104
+ @media (prefers-color-scheme: dark) {
105
+ .toggle-icon {
106
+ background: var(--color-grey-500);
107
+ }
108
+ .toggle-dot {
109
+ background: var(--color-grey-400);
110
+ }
111
+ }
112
+
104
113
  :global(.dark) .toggle-icon {
105
114
  background: var(--color-grey-500);
106
115
  }
package/src/init.ts CHANGED
@@ -290,6 +290,26 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
290
290
  );
291
291
  }
292
292
 
293
+ if (instance.type === "tabs") {
294
+ instance.children =
295
+ instance?.children?.map((c) => ({
296
+ ...c,
297
+ props: {
298
+ ...c.props,
299
+ id: c.props.id || c.id
300
+ }
301
+ })) || [];
302
+ const child_tab_items = instance.children?.filter(
303
+ (child) => child.type === "tabitem"
304
+ );
305
+ instance.props.inital_tabs = child_tab_items?.map((child) => ({
306
+ label: child.props.label,
307
+ id: child.props.id,
308
+ visible: child.props.visible,
309
+ interactive: child.props.interactive
310
+ }));
311
+ }
312
+
293
313
  return instance;
294
314
  }
295
315