@gradio/core 0.1.0-beta.5 → 0.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 (14) hide show
  1. package/CHANGELOG.md +56 -0
  2. package/dist/src/Blocks.svelte +23 -17
  3. package/dist/src/Blocks.svelte.d.ts +2 -1
  4. package/dist/src/css.d.ts +1 -1
  5. package/dist/src/css.js +7 -7
  6. package/dist/src/init.d.ts +1 -1
  7. package/dist/src/init.js +21 -3
  8. package/dist/src/lang/en.json +6 -2
  9. package/package.json +56 -56
  10. package/src/Blocks.svelte +24 -21
  11. package/src/css.ts +8 -9
  12. package/src/init.test.ts +12 -9
  13. package/src/init.ts +25 -4
  14. package/src/lang/en.json +6 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,61 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 0.1.0
4
+
5
+ ### Features
6
+
7
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - SSR e2e + fixes
8
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Fix reload mode and streaming in 5.0 dev
9
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Disable liking user message in chatbot by default but make it configurable
10
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Adds ability to block event trigger when file is uploading
11
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Open audio/image input stream only when queue is ready
12
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Streaming Guides
13
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Send Streaming data over Websocket if possible. Also support base64 output format for images.
14
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Allow `info=` to render markdown
15
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Remove lite/theme.css from the Git-managed file tree
16
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Update gr.Dataframe UI with action popover
17
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Video gallery
18
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Fix reload mode
19
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Streaming inputs for 5.0
20
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - fix SSR apps on spaces
21
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Fix plots
22
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Ssr part 2
23
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - prefix api routes
24
+
25
+ ### Fixes
26
+
27
+
28
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Trigger state change event on iterators
29
+
30
+ ## 0.1.0-beta.6
31
+
32
+ ### Features
33
+
34
+ - [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes. Thanks @pngwn!
35
+ - [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover. Thanks @hannahblair!
36
+ - [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode. Thanks @freddyaboulton!
37
+
38
+ ### Dependency updates
39
+
40
+ - @gradio/upload@0.13.0-beta.7
41
+ - @gradio/statustracker@0.8.0-beta.5
42
+ - @gradio/code@0.10.0-beta.8
43
+ - @gradio/paramviewer@0.4.22-beta.5
44
+ - @gradio/tabitem@0.3.0-beta.4
45
+ - @gradio/tabs@0.3.0-beta.3
46
+ - @gradio/icons@0.8.0-beta.4
47
+ - @gradio/atoms@0.9.0-beta.5
48
+ - @gradio/image@0.16.0-beta.7
49
+ - @gradio/video@0.11.0-beta.7
50
+ - @gradio/button@0.3.0-beta.7
51
+ - @gradio/markdown@0.10.0-beta.5
52
+ - @gradio/gallery@0.13.0-beta.7
53
+ - @gradio/plot@0.7.0-beta.6
54
+ - @gradio/column@0.2.0-beta.2
55
+ - @gradio/textbox@0.7.0-beta.5
56
+ - @gradio/checkbox@0.4.0-beta.5
57
+ - @gradio/file@0.10.0-beta.7
58
+
3
59
  ## 0.1.0-beta.5
4
60
 
5
61
  ### Features
package/dist/src/Blocks.svelte CHANGED
@@ -5,6 +5,7 @@ import { setupi18n } from "./i18n";
5
5
  import { ApiDocs, ApiRecorder } from "./api_docs/";
6
6
  import { Toast } from "@gradio/statustracker";
7
7
  import MountComponents from "./MountComponents.svelte";
8
+ import { prefix_css } from "./css";
8
9
  import logo from "./images/logo.svg";
9
10
  import api_logo from "./api_docs/img/api-logo.svg";
10
11
  import { create_components, AsyncFunction } from "./init";
@@ -31,6 +32,7 @@ export let username;
31
32
  export let api_prefix = "";
32
33
  export let max_file_size = void 0;
33
34
  export let initial_layout = void 0;
35
+ export let css = null;
34
36
  let {
35
37
  layout: _layout,
36
38
  targets,
@@ -43,8 +45,7 @@ let {
43
45
  scheduled_updates,
44
46
  create_layout,
45
47
  rerender_layout
46
- } = create_components();
47
- $_layout = initial_layout;
48
+ } = create_components(initial_layout);
48
49
  $:
49
50
  components, layout, dependencies, root, app, fill_height, target, run();
50
51
  $: {
@@ -151,8 +152,10 @@ function wait_then_trigger_api_call(dep_index, trigger_id = null, event_data = n
151
152
  if ($scheduled_updates) {
152
153
  _unsub = scheduled_updates.subscribe((updating) => {
153
154
  if (!updating) {
154
- trigger_api_call(dep_index, trigger_id, event_data);
155
- unsub();
155
+ tick().then(() => {
156
+ trigger_api_call(dep_index, trigger_id, event_data);
157
+ unsub();
158
+ });
156
159
  }
157
160
  });
158
161
  } else {
@@ -559,23 +562,26 @@ onMount(() => {
559
562
  {#if control_page_title}
560
563
  <title>{title}</title>
561
564
  {/if}
565
+ {#if css}
566
+ {@html `\<style\>${prefix_css(css, version)}</style>`}
567
+ {/if}
562
568
  </svelte:head>
563
569
 
564
570
  <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
565
571
  <div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
566
- <!-- {#if $_layout} -->
567
- <MountComponents
568
- rootNode={$_layout}
569
- {root}
570
- {target}
571
- {theme_mode}
572
- on:mount={handle_mount}
573
- {version}
574
- {autoscroll}
575
- {max_file_size}
576
- client={app}
577
- />
578
- <!-- {/if} -->
572
+ {#if $_layout && app.config}
573
+ <MountComponents
574
+ rootNode={$_layout}
575
+ {root}
576
+ {target}
577
+ {theme_mode}
578
+ on:mount={handle_mount}
579
+ {version}
580
+ {autoscroll}
581
+ {max_file_size}
582
+ client={app}
583
+ />
584
+ {/if}
579
585
  </div>
580
586
 
581
587
  {#if show_footer}
package/dist/src/Blocks.svelte.d.ts CHANGED
@@ -26,7 +26,8 @@ declare const __propDef: {
26
26
  username: string | null;
27
27
  api_prefix?: string | undefined;
28
28
  max_file_size?: number | undefined;
29
- initial_layout?: LayoutNode | undefined;
29
+ initial_layout?: ComponentMeta | undefined;
30
+ css?: string | null | undefined;
30
31
  search_params: URLSearchParams;
31
32
  render_complete?: boolean | undefined;
32
33
  add_new_message?: ((message: string, type: ToastMessage["type"]) => void) | undefined;
package/dist/src/css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare function mount_css(url: string, target: HTMLElement): Promise<void>;
2
- export declare function prefix_css(string: string, version: string, style_element?: HTMLStyleElement): HTMLStyleElement | null;
2
+ export declare function prefix_css(string: string, version: string, style_element?: HTMLStyleElement): string | null;
package/dist/src/css.js CHANGED
@@ -26,9 +26,12 @@ export function mount_css(url, target) {
26
26
  target.appendChild(link);
27
27
  });
28
28
  }
29
- export function prefix_css(string, version, style_element = document.createElement("style")) {
29
+ export function prefix_css(string, version, style_element) {
30
30
  if (!supports_adopted_stylesheets)
31
- return null;
31
+ return string;
32
+ if (!style_element) {
33
+ style_element = document.createElement("style");
34
+ }
32
35
  style_element.remove();
33
36
  const stylesheet = new CSSStyleSheet();
34
37
  stylesheet.replaceSync(string);
@@ -39,7 +42,7 @@ export function prefix_css(string, version, style_element = document.createEleme
39
42
  });
40
43
  const rules = stylesheet.cssRules;
41
44
  let css_string = "";
42
- let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
45
+ let gradio_css_infix = `.gradio-container.gradio-container-${version} .contain `;
43
46
  for (let i = 0; i < rules.length; i++) {
44
47
  const rule = rules[i];
45
48
  let is_dark_rule = rule.cssText.includes(".dark");
@@ -87,8 +90,5 @@ export function prefix_css(string, version, style_element = document.createEleme
87
90
  css_string += `@font-face { ${rule.style.cssText} }`;
88
91
  }
89
92
  }
90
- css_string = importString + css_string;
91
- style_element.textContent = css_string;
92
- document.head.appendChild(style_element);
93
- return style_element;
93
+ return importString + css_string;
94
94
  }
package/dist/src/init.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface UpdateTransaction {
11
11
  * Create a store with the layout and a map of targets
12
12
  * @returns A store with the layout and a map of targets
13
13
  */
14
- export declare function create_components(): {
14
+ export declare function create_components(initial_layout: ComponentMeta | undefined): {
15
15
  layout: Writable<ComponentMeta>;
16
16
  targets: Writable<TargetMap>;
17
17
  update_value: (updates: UpdateTransaction[]) => void;
package/dist/src/init.js CHANGED
@@ -11,7 +11,7 @@ const raf = is_browser
11
11
  * Create a store with the layout and a map of targets
12
12
  * @returns A store with the layout and a map of targets
13
13
  */
14
- export function create_components() {
14
+ export function create_components(initial_layout) {
15
15
  let _component_map;
16
16
  let target_map = writable({});
17
17
  let _target_map = {};
@@ -20,7 +20,7 @@ export function create_components() {
20
20
  let constructor_map;
21
21
  let instance_map;
22
22
  let loading_status = create_loading_status_store();
23
- const layout_store = writable();
23
+ const layout_store = writable(initial_layout);
24
24
  let _components = [];
25
25
  let app;
26
26
  let keyed_component_values = {};
@@ -199,7 +199,11 @@ export function create_components() {
199
199
  }
200
200
  }
201
201
  function get_data(id) {
202
- const comp = _component_map.get(id);
202
+ let comp = _component_map.get(id);
203
+ if (!comp) {
204
+ const layout = get(layout_store);
205
+ comp = findComponentById(layout, id);
206
+ }
203
207
  if (!comp) {
204
208
  return null;
205
209
  }
@@ -208,6 +212,20 @@ export function create_components() {
208
212
  }
209
213
  return comp.props.value;
210
214
  }
215
+ function findComponentById(node, id) {
216
+ if (node.id === id) {
217
+ return node;
218
+ }
219
+ if (node.children) {
220
+ for (const child of node.children) {
221
+ const result = findComponentById(child, id);
222
+ if (result) {
223
+ return result;
224
+ }
225
+ }
226
+ }
227
+ return undefined;
228
+ }
211
229
  function modify_stream(id, state) {
212
230
  const comp = _component_map.get(id);
213
231
  if (comp && comp.instance.modify_stream_state) {
package/dist/src/lang/en.json CHANGED
@@ -55,8 +55,12 @@
55
55
  },
56
56
  "dataframe": {
57
57
  "incorrect_format": "Incorrect format, only CSV and TSV files are supported",
58
- "new_column": "New column",
59
- "new_row": "New row"
58
+ "new_column": "Add column",
59
+ "new_row": "New row",
60
+ "add_row_above": "Add row above",
61
+ "add_row_below": "Add row below",
62
+ "add_column_left": "Add column to the left",
63
+ "add_column_right": "Add column to the right"
60
64
  },
61
65
  "dropdown": {
62
66
  "dropdown": "Dropdown"
package/package.json CHANGED
@@ -1,64 +1,64 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "0.1.0-beta.5",
3
+ "version": "0.1.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.3.23-beta.4",
7
- "@gradio/annotatedimage": "^0.8.0-beta.6",
8
- "@gradio/atoms": "^0.9.0-beta.4",
9
- "@gradio/audio": "^0.14.0-beta.7",
10
- "@gradio/chatbot": "^0.14.0-beta.7",
11
- "@gradio/button": "^0.3.0-beta.6",
12
- "@gradio/box": "^0.2.0-beta.2",
13
- "@gradio/checkbox": "^0.4.0-beta.4",
14
- "@gradio/checkboxgroup": "^0.6.0-beta.4",
15
- "@gradio/code": "^0.10.0-beta.7",
16
- "@gradio/client": "^1.6.0-beta.4",
17
- "@gradio/colorpicker": "^0.4.0-beta.4",
18
- "@gradio/column": "^0.2.0-beta.2",
19
- "@gradio/dataframe": "^0.11.0-beta.7",
20
- "@gradio/dataset": "^0.2.5-beta.6",
21
- "@gradio/datetime": "^0.2.0-beta.4",
22
- "@gradio/downloadbutton": "^0.1.28-beta.6",
23
- "@gradio/dropdown": "^0.8.0-beta.5",
24
- "@gradio/file": "^0.10.0-beta.6",
25
- "@gradio/fileexplorer": "^0.5.0-beta.6",
26
- "@gradio/form": "^0.1.25-beta.4",
27
- "@gradio/gallery": "^0.13.0-beta.6",
28
- "@gradio/fallback": "^0.3.13-beta.4",
29
- "@gradio/group": "^0.2.0-beta.1",
30
- "@gradio/highlightedtext": "^0.7.7-beta.4",
31
- "@gradio/html": "^0.4.0-beta.4",
32
- "@gradio/icons": "^0.8.0-beta.3",
33
- "@gradio/image": "^0.16.0-beta.6",
34
- "@gradio/imageeditor": "^0.11.0-beta.6",
35
- "@gradio/markdown": "^0.10.0-beta.4",
36
- "@gradio/json": "^0.5.0-beta.4",
37
- "@gradio/multimodaltextbox": "^0.6.0-beta.6",
38
- "@gradio/label": "^0.3.13-beta.4",
39
- "@gradio/model3d": "^0.13.0-beta.6",
40
- "@gradio/nativeplot": "^0.4.0-beta.6",
41
- "@gradio/number": "^0.5.0-beta.4",
42
- "@gradio/paramviewer": "^0.4.22-beta.4",
43
- "@gradio/plot": "^0.7.0-beta.5",
44
- "@gradio/radio": "^0.6.0-beta.4",
45
- "@gradio/simpledropdown": "^0.3.0-beta.4",
46
- "@gradio/row": "^0.2.0-beta.3",
47
- "@gradio/simpletextbox": "^0.3.0-beta.4",
48
- "@gradio/simpleimage": "^0.8.0-beta.6",
49
- "@gradio/slider": "^0.5.0-beta.4",
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",
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",
29
+ "@gradio/group": "^0.2.0",
30
+ "@gradio/html": "^0.4.0",
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",
44
+ "@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",
50
51
  "@gradio/state": "^0.1.2",
51
- "@gradio/statustracker": "^0.8.0-beta.4",
52
- "@gradio/tabitem": "^0.3.0-beta.4",
53
- "@gradio/tabs": "^0.3.0-beta.3",
54
- "@gradio/textbox": "^0.7.0-beta.4",
55
- "@gradio/theme": "^0.3.0-beta.1",
56
- "@gradio/upload": "^0.13.0-beta.6",
57
- "@gradio/utils": "^0.7.0-beta.2",
58
- "@gradio/uploadbutton": "^0.7.0-beta.6",
59
- "@gradio/video": "^0.11.0-beta.6",
60
- "@gradio/wasm": "^0.14.0-beta.3",
61
- "@gradio/timer": "^0.3.3-beta.2"
52
+ "@gradio/tabitem": "^0.3.0",
53
+ "@gradio/tabs": "^0.3.0",
54
+ "@gradio/textbox": "^0.7.0",
55
+ "@gradio/theme": "^0.3.0",
56
+ "@gradio/upload": "^0.13.0",
57
+ "@gradio/uploadbutton": "^0.7.0",
58
+ "@gradio/timer": "^0.4.0",
59
+ "@gradio/utils": "^0.7.0",
60
+ "@gradio/video": "^0.11.0",
61
+ "@gradio/wasm": "^0.14.0"
62
62
  },
63
63
  "msw": {
64
64
  "workerDirectory": "public"
package/src/Blocks.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  import type { ToastMessage } from "@gradio/statustracker";
15
15
  import type { ShareData, ValueData } from "@gradio/utils";
16
16
  import MountComponents from "./MountComponents.svelte";
17
+ import { prefix_css } from "./css";
17
18
 
18
19
  import logo from "./images/logo.svg";
19
20
  import api_logo from "./api_docs/img/api-logo.svg";
@@ -47,8 +48,8 @@
47
48
  export let username: string | null;
48
49
  export let api_prefix = "";
49
50
  export let max_file_size: number | undefined = undefined;
50
- export let initial_layout: LayoutNode | undefined = undefined;
51
-
51
+ export let initial_layout: ComponentMeta | undefined = undefined;
52
+ export let css: string | null | undefined = null;
52
53
  let {
53
54
  layout: _layout,
54
55
  targets,
@@ -61,10 +62,7 @@
61
62
  scheduled_updates,
62
63
  create_layout,
63
64
  rerender_layout
64
- } = create_components();
65
-
66
- // @ts-ignore
67
- $_layout = initial_layout;
65
+ } = create_components(initial_layout);
68
66
 
69
67
  $: components, layout, dependencies, root, app, fill_height, target, run();
70
68
 
@@ -207,8 +205,10 @@
207
205
  if ($scheduled_updates) {
208
206
  _unsub = scheduled_updates.subscribe((updating) => {
209
207
  if (!updating) {
210
- trigger_api_call(dep_index, trigger_id, event_data);
211
- unsub();
208
+ tick().then(() => {
209
+ trigger_api_call(dep_index, trigger_id, event_data);
210
+ unsub();
211
+ });
212
212
  }
213
213
  });
214
214
  } else {
@@ -715,23 +715,26 @@
715
715
  {#if control_page_title}
716
716
  <title>{title}</title>
717
717
  {/if}
718
+ {#if css}
719
+ {@html `\<style\>${prefix_css(css, version)}</style>`}
720
+ {/if}
718
721
  </svelte:head>
719
722
 
720
723
  <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
721
724
  <div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
722
- <!-- {#if $_layout} -->
723
- <MountComponents
724
- rootNode={$_layout}
725
- {root}
726
- {target}
727
- {theme_mode}
728
- on:mount={handle_mount}
729
- {version}
730
- {autoscroll}
731
- {max_file_size}
732
- client={app}
733
- />
734
- <!-- {/if} -->
725
+ {#if $_layout && app.config}
726
+ <MountComponents
727
+ rootNode={$_layout}
728
+ {root}
729
+ {target}
730
+ {theme_mode}
731
+ on:mount={handle_mount}
732
+ {version}
733
+ {autoscroll}
734
+ {max_file_size}
735
+ client={app}
736
+ />
737
+ {/if}
735
738
  </div>
736
739
 
737
740
  {#if show_footer}
package/src/css.ts CHANGED
@@ -36,9 +36,12 @@ export function mount_css(url: string, target: HTMLElement): Promise<void> {
36
36
  export function prefix_css(
37
37
  string: string,
38
38
  version: string,
39
- style_element = document.createElement("style")
40
- ): HTMLStyleElement | null {
41
- if (!supports_adopted_stylesheets) return null;
39
+ style_element?: HTMLStyleElement
40
+ ): string | null {
41
+ if (!supports_adopted_stylesheets) return string;
42
+ if (!style_element) {
43
+ style_element = document.createElement("style");
44
+ }
42
45
  style_element.remove();
43
46
 
44
47
  const stylesheet = new CSSStyleSheet();
@@ -53,7 +56,7 @@ export function prefix_css(
53
56
  const rules = stylesheet.cssRules;
54
57
 
55
58
  let css_string = "";
56
- let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
59
+ let gradio_css_infix = `.gradio-container.gradio-container-${version} .contain `;
57
60
 
58
61
  for (let i = 0; i < rules.length; i++) {
59
62
  const rule = rules[i];
@@ -109,9 +112,5 @@ export function prefix_css(
109
112
  css_string += `@font-face { ${rule.style.cssText} }`;
110
113
  }
111
114
  }
112
- css_string = importString + css_string;
113
- style_element.textContent = css_string;
114
-
115
- document.head.appendChild(style_element);
116
- return style_element;
115
+ return importString + css_string;
117
116
  }
package/src/init.test.ts CHANGED
@@ -481,14 +481,17 @@ describe("get_component", () => {
481
481
  const id = "test-random";
482
482
  const variant = "component";
483
483
  const handlers = [
484
- http.get(`${api_url}/custom_component/${id}/${variant}/style.css`, () => {
485
- return new HttpResponse('console.log("boo")', {
486
- status: 200,
487
- headers: {
488
- "Content-Type": "text/css"
489
- }
490
- });
491
- })
484
+ http.get(
485
+ `${api_url}/custom_component/${id}/client/${variant}/style.css`,
486
+ () => {
487
+ return new HttpResponse('console.log("boo")', {
488
+ status: 200,
489
+ headers: {
490
+ "Content-Type": "text/css"
491
+ }
492
+ });
493
+ }
494
+ )
492
495
  ];
493
496
 
494
497
  // vi.mock calls are always hoisted out of the test function to the top of the file
@@ -498,7 +501,7 @@ describe("get_component", () => {
498
501
  });
499
502
 
500
503
  vi.mock(
501
- `example.com/custom_component/test-random/component/index.js`,
504
+ `example.com/custom_component/test-random/client/component/index.js`,
502
505
  async () => {
503
506
  mock();
504
507
  return {
package/src/init.ts CHANGED
@@ -27,7 +27,7 @@ const raf = is_browser
27
27
  * Create a store with the layout and a map of targets
28
28
  * @returns A store with the layout and a map of targets
29
29
  */
30
- export function create_components(): {
30
+ export function create_components(initial_layout: ComponentMeta | undefined): {
31
31
  layout: Writable<ComponentMeta>;
32
32
  targets: Writable<TargetMap>;
33
33
  update_value: (updates: UpdateTransaction[]) => void;
@@ -65,7 +65,7 @@ export function create_components(): {
65
65
  let instance_map: { [id: number]: ComponentMeta };
66
66
  let loading_status: ReturnType<typeof create_loading_status_store> =
67
67
  create_loading_status_store();
68
- const layout_store: Writable<ComponentMeta> = writable();
68
+ const layout_store: Writable<ComponentMeta> = writable(initial_layout);
69
69
  let _components: ComponentMeta[] = [];
70
70
  let app: client_return;
71
71
  let keyed_component_values: Record<string | number, any> = {};
@@ -341,9 +341,12 @@ export function create_components(): {
341
341
  raf(flush);
342
342
  }
343
343
  }
344
-
345
344
  function get_data(id: number): any | Promise<any> {
346
- const comp = _component_map.get(id);
345
+ let comp = _component_map.get(id);
346
+ if (!comp) {
347
+ const layout = get(layout_store);
348
+ comp = findComponentById(layout, id);
349
+ }
347
350
  if (!comp) {
348
351
  return null;
349
352
  }
@@ -353,6 +356,24 @@ export function create_components(): {
353
356
  return comp.props.value;
354
357
  }
355
358
 
359
+ function findComponentById(
360
+ node: ComponentMeta,
361
+ id: number
362
+ ): ComponentMeta | undefined {
363
+ if (node.id === id) {
364
+ return node;
365
+ }
366
+ if (node.children) {
367
+ for (const child of node.children) {
368
+ const result = findComponentById(child, id);
369
+ if (result) {
370
+ return result;
371
+ }
372
+ }
373
+ }
374
+ return undefined;
375
+ }
376
+
356
377
  function modify_stream(
357
378
  id: number,
358
379
  state: "open" | "closed" | "waiting"
package/src/lang/en.json CHANGED
@@ -55,8 +55,12 @@
55
55
  },
56
56
  "dataframe": {
57
57
  "incorrect_format": "Incorrect format, only CSV and TSV files are supported",
58
- "new_column": "New column",
59
- "new_row": "New row"
58
+ "new_column": "Add column",
59
+ "new_row": "New row",
60
+ "add_row_above": "Add row above",
61
+ "add_row_below": "Add row below",
62
+ "add_column_left": "Add column to the left",
63
+ "add_column_right": "Add column to the right"
60
64
  },
61
65
  "dropdown": {
62
66
  "dropdown": "Dropdown"