{#each sample_row as { value, component }, j}
{@const component_name = components[j]}
- {#if component_name !== undefined && component_map[component_name] !== undefined}
+ {#if component_name !== undefined && component_map.get(component_name) !== undefined}
| import("@gradio/audio/static"),
- interactive: () => import("@gradio/audio/interactive")
+ interactive: () => import("@gradio/audio/interactive"),
+ example: () => import("@gradio/audio/example")
},
box: {
static: () => import("@gradio/box/static")
@@ -20,37 +21,44 @@ export const component_map = {
},
checkbox: {
static: () => import("@gradio/checkbox/static"),
- interactive: () => import("@gradio/checkbox/interactive")
+ interactive: () => import("@gradio/checkbox/interactive"),
+ example: () => import("@gradio/checkbox/example")
},
checkboxgroup: {
static: () => import("@gradio/checkboxgroup/static"),
- interactive: () => import("@gradio/checkboxgroup/interactive")
+ interactive: () => import("@gradio/checkboxgroup/interactive"),
+ example: () => import("@gradio/checkboxgroup/example")
},
code: {
static: () => import("@gradio/code/static"),
- interactive: () => import("@gradio/code/interactive")
+ interactive: () => import("@gradio/code/interactive"),
+ example: () => import("@gradio/code/example")
},
colorpicker: {
static: () => import("@gradio/colorpicker/static"),
- interactive: () => import("@gradio/colorpicker/interactive")
+ interactive: () => import("@gradio/colorpicker/interactive"),
+ example: () => import("@gradio/colorpicker/example")
},
column: {
static: () => import("@gradio/column/static")
},
dataframe: {
static: () => import("@gradio/dataframe/static"),
- interactive: () => import("@gradio/dataframe/interactive")
+ interactive: () => import("@gradio/dataframe/interactive"),
+ example: () => import("@gradio/dataframe/example")
},
dataset: {
static: () => import("./Dataset")
},
dropdown: {
static: () => import("@gradio/dropdown/static"),
- interactive: () => import("@gradio/dropdown/interactive")
+ interactive: () => import("@gradio/dropdown/interactive"),
+ example: () => import("@gradio/dropdown/example")
},
file: {
static: () => import("@gradio/file/static"),
- interactive: () => import("@gradio/file/interactive")
+ interactive: () => import("@gradio/file/interactive"),
+ example: () => import("@gradio/file/example")
},
form: {
static: () => import("@gradio/form/static")
@@ -65,11 +73,13 @@ export const component_map = {
static: () => import("@gradio/highlightedtext/static")
},
html: {
- static: () => import("@gradio/html/static")
+ static: () => import("@gradio/html/static"),
+ example: () => import("@gradio/html/example")
},
image: {
static: () => import("@gradio/image/static"),
- interactive: () => import("@gradio/image/interactive")
+ interactive: () => import("@gradio/image/interactive"),
+ example: () => import("@gradio/image/example")
},
interpretation: {
static: () => import("./Interpretation"),
@@ -82,29 +92,34 @@ export const component_map = {
static: () => import("@gradio/label/static")
},
markdown: {
- static: () => import("@gradio/markdown/static")
+ static: () => import("@gradio/markdown/static"),
+ example: () => import("@gradio/markdown/example")
},
model3d: {
static: () => import("@gradio/model3d/static"),
- interactive: () => import("@gradio/model3d/interactive")
+ interactive: () => import("@gradio/model3d/interactive"),
+ example: () => import("@gradio/model3d/example")
},
number: {
static: () => import("@gradio/number/static"),
- interactive: () => import("@gradio/number/interactive")
+ interactive: () => import("@gradio/number/interactive"),
+ example: () => import("@gradio/number/example")
},
plot: {
static: () => import("@gradio/plot/static")
},
radio: {
static: () => import("@gradio/radio/static"),
- interactive: () => import("@gradio/radio/interactive")
+ interactive: () => import("@gradio/radio/interactive"),
+ example: () => import("@gradio/radio/example")
},
row: {
static: () => import("@gradio/row/static")
},
slider: {
static: () => import("@gradio/slider/static"),
- interactive: () => import("@gradio/slider/interactive")
+ interactive: () => import("@gradio/slider/interactive"),
+ example: () => import("@gradio/slider/example")
},
state: {
static: () => import("./State")
@@ -120,7 +135,8 @@ export const component_map = {
},
textbox: {
static: () => import("@gradio/textbox/static"),
- interactive: () => import("@gradio/textbox/interactive")
+ interactive: () => import("@gradio/textbox/interactive"),
+ example: () => import("@gradio/textbox/example")
},
uploadbutton: {
static: () => import("@gradio/uploadbutton/static"),
@@ -128,6 +144,17 @@ export const component_map = {
},
video: {
static: () => import("@gradio/video/static"),
- interactive: () => import("@gradio/video/interactive")
+ interactive: () => import("@gradio/video/interactive"),
+ example: () => import("@gradio/video/example")
}
};
+
+import InteractiveFallback from "@gradio/fallback/interactive";
+import StaticFallback from "@gradio/fallback/static";
+import ExampleFallback from "@gradio/fallback/example";
+
+export const fallback_component_map = {
+ interactive: InteractiveFallback,
+ static: StaticFallback,
+ example: ExampleFallback
+};
diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts
index 0435dd8d5b59..5733681d49c4 100644
--- a/js/app/vite.config.ts
+++ b/js/app/vite.config.ts
@@ -137,7 +137,8 @@ export default defineConfig(({ mode }) => {
svelte({
inspector: true,
compilerOptions: {
- dev: true
+ dev: true,
+ discloseVersion: false
},
hot: !process.env.VITEST && !production,
preprocess: sveltePreprocess({
diff --git a/js/atoms/src/ShareButton.svelte b/js/atoms/src/ShareButton.svelte
index d98fec0e7acf..450e02a8621a 100644
--- a/js/atoms/src/ShareButton.svelte
+++ b/js/atoms/src/ShareButton.svelte
@@ -4,7 +4,7 @@
import { createEventDispatcher } from "svelte";
import type { ShareData } from "@gradio/utils";
import { ShareError } from "@gradio/utils";
- import type { I18nFormatter } from "../@gradio/utils";
+ import type { I18nFormatter } from "@gradio/utils";
const dispatch = createEventDispatcher<{
share: ShareData;
diff --git a/js/atoms/src/UploadText.svelte b/js/atoms/src/UploadText.svelte
index 4c6ee81d60bd..fc32638ba1b1 100644
--- a/js/atoms/src/UploadText.svelte
+++ b/js/atoms/src/UploadText.svelte
@@ -1,5 +1,5 @@
+
+
+ {value}
+
+
+
diff --git a/js/fallback/example/index.ts b/js/fallback/example/index.ts
new file mode 100644
index 000000000000..595694a6cfd4
--- /dev/null
+++ b/js/fallback/example/index.ts
@@ -0,0 +1 @@
+export { default } from "./Fallback.svelte";
diff --git a/js/fallback/interactive/InteractiveFallback.svelte b/js/fallback/interactive/InteractiveFallback.svelte
new file mode 100644
index 000000000000..cd1bbf0d74cf
--- /dev/null
+++ b/js/fallback/interactive/InteractiveFallback.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/js/fallback/interactive/index.ts b/js/fallback/interactive/index.ts
new file mode 100644
index 000000000000..c38e7d2fa971
--- /dev/null
+++ b/js/fallback/interactive/index.ts
@@ -0,0 +1 @@
+export { default } from "./InteractiveFallback.svelte";
diff --git a/js/fallback/package.json b/js/fallback/package.json
new file mode 100644
index 000000000000..f7a990c833b9
--- /dev/null
+++ b/js/fallback/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@gradio/fallback",
+ "version": "0.1.1",
+ "description": "Gradio UI packages",
+ "type": "module",
+ "main": "./index.svelte",
+ "author": "",
+ "license": "ISC",
+ "private": true,
+ "main_changeset": true,
+ "exports": {
+ "./package.json": "./package.json",
+ "./interactive": "./interactive/index.ts",
+ "./static": "./static/index.ts",
+ "./example": "./example/index.ts"
+ },
+ "dependencies": {
+ "@gradio/atoms": "workspace:^",
+ "@gradio/statustracker": "workspace:^",
+ "@gradio/utils": "workspace:^",
+ "@zerodevx/svelte-json-view": "^1.0.7"
+ }
+}
diff --git a/js/fallback/static/StaticFallback.svelte b/js/fallback/static/StaticFallback.svelte
new file mode 100644
index 000000000000..cd1bbf0d74cf
--- /dev/null
+++ b/js/fallback/static/StaticFallback.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/js/fallback/static/index.ts b/js/fallback/static/index.ts
new file mode 100644
index 000000000000..c031ab5467cd
--- /dev/null
+++ b/js/fallback/static/index.ts
@@ -0,0 +1 @@
+export { default } from "./StaticFallback.svelte";
diff --git a/js/gradio-preview/rollup.config.js b/js/gradio-preview/rollup.config.js
index 968c7a8ff5ce..44ffe9b3cd54 100644
--- a/js/gradio-preview/rollup.config.js
+++ b/js/gradio-preview/rollup.config.js
@@ -4,7 +4,6 @@ import cjs from "@rollup/plugin-commonjs";
import { cpSync, writeFileSync, rmdirSync, existsSync } from "fs";
import { join } from "path";
import json from "@rollup/plugin-json";
-import ignore from "rollup-plugin-ignore";
import { dirname } from "path";
import { fileURLToPath } from "url";
@@ -16,7 +15,7 @@ const require = createRequire(import.meta.url);
const esbuild_binary_path = require.resolve("esbuild");
const vite_client = require.resolve("vite/dist/client/client.mjs");
const hmr = require.resolve("svelte-hmr");
-
+console.log(__dirname);
export default [
{
input: "src/index.ts",
@@ -59,6 +58,10 @@ export default [
if (id === "svelte/internal") {
return "../svelte-internal.js";
}
+
+ if (id === "svelte/internal/disclose-version") {
+ return "../svelte-disclose.js";
+ }
},
transform(code, id) {
@@ -74,6 +77,14 @@ export default [
recursive: true
});
+ cpSync(
+ join(__dirname, "node_modules", "svelte"),
+ "../../gradio/node/dev/node_modules/svelte",
+ {
+ recursive: true
+ }
+ );
+
cpSync(
join(hmr, "../runtime"),
"../../gradio/node/dev/files/runtime",
@@ -123,6 +134,10 @@ export default [
if (id === "svelte/action") {
return "./svelte-action.js";
}
+
+ if (id === "svelte/internal/disclose-version") {
+ return "./svelte-disclose.js";
+ }
}
}
]
@@ -143,6 +158,14 @@ export default [
},
plugins: [node(), json(), cjs(), ts()]
},
+ {
+ input: "src/svelte-disclose.ts",
+ output: {
+ file: "../../gradio/node/dev/svelte-disclose.js",
+ format: "esm"
+ },
+ plugins: [node(), json(), cjs(), ts()]
+ },
{
input: "src/compiler.ts",
output: {
diff --git a/js/gradio-preview/src/dev_server.ts b/js/gradio-preview/src/dev_server.ts
index 97834f13e485..307d72df89b9 100644
--- a/js/gradio-preview/src/dev_server.ts
+++ b/js/gradio-preview/src/dev_server.ts
@@ -1,13 +1,25 @@
import { fileURLToPath } from "url";
-import { createServer, build } from "vite";
-import { readdirSync, existsSync, readFileSync } from "fs";
+import { createServer, build, createLogger } from "vite";
import { join } from "path";
const __dirname = fileURLToPath(new URL(".", import.meta.url));
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { transform } from "sucrase";
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
-import { read } from "vega";
-// import { typescript } from "svelte-preprocess";
+
+const vite_messages_to_ignore = [
+ "Default and named imports from CSS files are deprecated."
+];
+const svelte_codes_to_ignore: Record = {
+ "reactive-component": "Icon"
+};
+
+const logger = createLogger();
+const originalWarning = logger.warn;
+logger.warn = (msg, options) => {
+ if (vite_messages_to_ignore.some((m) => msg.includes(m))) return;
+
+ originalWarning(msg, options);
+};
interface ServerOptions {
component_dir: string;
@@ -24,11 +36,11 @@ export async function create_server({
}: ServerOptions): Promise {
process.env.gradio_mode = "dev";
const imports = generate_imports(component_dir);
- console.log(imports);
const NODE_DIR = join(root_dir, "..", "..", "node", "dev");
const server = await createServer({
// any valid user config options, plus `mode` and `configFile`
+ customLogger: logger,
mode: "development",
configFile: false,
root: root_dir,
@@ -52,29 +64,8 @@ export async function create_server({
}
},
plugins: [
+ //@ts-ignore
viteCommonjs(),
- svelte({
- prebundleSvelteLibraries: false,
- hot: true,
- preprocess: [
- {
- script: ({ attributes, filename, content }) => {
- if (attributes.lang === "ts") {
- const compiledCode = transform(content, {
- transforms: ["typescript"],
- keepUnusedImports: true
- });
-
- return {
- code: compiledCode.code,
- map: compiledCode.sourceMap
- };
- }
- }
- }
- ]
- }),
-
{
name: "gradio",
enforce: "pre",
@@ -90,26 +81,72 @@ export async function create_server({
if (importee === "svelte/action") {
return join(NODE_DIR, "svelte-action.js");
}
+
+ if (importee === "svelte/internal/disclose-version") {
+ console.log("================================");
+ console.log("HELLO DISCLOSE VERSION!!!!!!!!!!!!");
+ console.log({ importer });
+ console.log("================================");
+ return join(NODE_DIR, "svelte-action.js");
+ }
},
transform(code) {
if (code.includes("__ROOT_PATH__")) {
return code.replace(`"__ROOT_PATH__"`, imports);
}
+ },
+ transformIndexHtml(html) {
+ return html.replace(
+ `window.__GRADIO_DEV__ = "dev"`,
+ `window.__GRADIO_DEV__ = "dev";
+ window.__GRADIO__SERVER_PORT__ = ${backend_port};`
+ );
+ }
+ },
+ //@ts-ignore
+ svelte({
+ onwarn(warning, handler) {
+ if (
+ svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
+ svelte_codes_to_ignore[warning.code] &&
+ warning.message.includes(svelte_codes_to_ignore[warning.code])
+ ) {
+ return;
+ }
- if (code.includes("__GRADIO__SERVER_PORT__")) {
- return code.replace(
- `"__GRADIO__SERVER_PORT__"`,
- backend_port.toString()
- );
+ handler!(warning);
+ },
+ prebundleSvelteLibraries: false,
+ hot: true,
+ compilerOptions: {
+ discloseVersion: false
+ },
+ preprocess: [
+ {
+ script: ({ attributes, filename, content }) => {
+ if (attributes.lang === "ts") {
+ const compiledCode = transform(content, {
+ transforms: ["typescript"],
+ keepUnusedImports: true
+ });
+
+ return {
+ code: compiledCode.code,
+ map: compiledCode.sourceMap
+ };
+ }
+ }
}
- }
- }
+ ]
+ })
]
});
await server.listen();
- console.log(`[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`);
+ console.info(
+ `[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`
+ );
}
import * as fs from "fs";
@@ -119,7 +156,7 @@ function find_frontend_folders(
start_path: string
): { dir: string; package_name: string }[] {
if (!fs.existsSync(start_path)) {
- console.log("No directory found at:", start_path);
+ console.warn("No directory found at:", start_path);
return [];
}
@@ -167,11 +204,13 @@ function generate_imports(component_dir: string): string {
const imports = components.reduce((acc, component) => {
const x = {
interactive: join(component.dir, "interactive"),
- static: join(component.dir, "static")
+ static: join(component.dir, "static"),
+ example: join(component.dir, "example")
};
return `${acc}"${component.package_name}": {
interactive: () => import("${x.interactive}"),
- static: () => import("${x.static}")
+ static: () => import("${x.static}"),
+ example: () => import("${x.example}")
},\n`;
}, "");
diff --git a/js/gradio-preview/src/index.ts b/js/gradio-preview/src/index.ts
index 826ac6eda35d..187262c96994 100644
--- a/js/gradio-preview/src/index.ts
+++ b/js/gradio-preview/src/index.ts
@@ -1,4 +1,4 @@
-import { spawn } from "node:child_process";
+import { ChildProcess, spawn } from "node:child_process";
import { create_server } from "./dev_server";
const args = process.argv.slice(2);
@@ -19,7 +19,6 @@ function parse_args(args: string[]): Record {
}
const parsed_args = parse_args(args);
-console.log({ parsed_args });
async function run(): Promise {
const [backend_port, frontend_port] = await find_free_ports(7860, 8860);
@@ -31,7 +30,6 @@ async function run(): Promise {
...parsed_args
};
process.env.GRADIO_BACKEND_PORT = backend_port.toString();
- const server = create_server({ ...options });
const _process = spawn(
`gradio`,
@@ -50,9 +48,13 @@ async function run(): Promise {
_process.stdout.setEncoding("utf8");
- function std_out(data) {
+ function std_out(data: Buffer): void {
const _data = data.toString();
+ if (_data.includes("Running on")) {
+ const server = create_server({ ...options });
+ }
+
process.stdout.write(_data);
}
@@ -63,7 +65,7 @@ async function run(): Promise {
_process.on("disconnect", () => kill_process(_process));
}
-function kill_process(process) {
+function kill_process(process: ChildProcess): void {
process.kill("SIGKILL");
}
@@ -102,6 +104,7 @@ export function is_free_port(port: number): Promise {
});
sock.once("error", (e) => {
sock.destroy();
+ //@ts-ignore
if (e.code === "ECONNREFUSED") {
accept(true);
} else {
diff --git a/js/gradio-preview/src/svelte-disclose.ts b/js/gradio-preview/src/svelte-disclose.ts
new file mode 100644
index 000000000000..54354dfd5a9e
--- /dev/null
+++ b/js/gradio-preview/src/svelte-disclose.ts
@@ -0,0 +1 @@
+export * from "svelte/internal/disclose-version";
diff --git a/js/image/interactive/Image.svelte b/js/image/interactive/Image.svelte
index f14a0b623f0c..748e3834a737 100644
--- a/js/image/interactive/Image.svelte
+++ b/js/image/interactive/Image.svelte
@@ -3,7 +3,7 @@
import { createEventDispatcher, tick, onMount } from "svelte";
import { BlockLabel } from "@gradio/atoms";
import { Image, Sketch as SketchIcon } from "@gradio/icons";
- import type { SelectData } from "@gradio/utils";
+ import type { SelectData, I18nFormatter } from "@gradio/utils";
import { get_coordinates_of_clicked_image } from "../shared/utils";
import Cropper from "./Cropper.svelte";
@@ -36,6 +36,7 @@
export let mask_opacity;
export let selectable = false;
export let root: string;
+ export let i18n: I18nFormatter;
let sketch: Sketch;
let cropper: Cropper;
@@ -117,8 +118,6 @@
normalise_file(value_, root, null);
}
- $: console.log(value_);
-
function handle_image_load(event: Event): void {
const element = event.currentTarget as HTMLImageElement;
img_width = element.naturalWidth;
@@ -227,12 +226,12 @@
on:crop={handle_save}
/>
(handle_clear(e), (tool = "editor"))}
/>
{:else if tool === "editor"}
(tool = "select")}
on:clear={handle_clear}
editable
@@ -347,12 +346,12 @@
{:else if tool === "select"}
(handle_clear(e), (tool = "editor"))}
/>
{:else if tool === "editor"}
(tool = "select")}
on:clear={handle_clear}
editable
diff --git a/js/image/interactive/InteractiveImage.svelte b/js/image/interactive/InteractiveImage.svelte
index cecfe54a9a1b..6c1aeb84673f 100644
--- a/js/image/interactive/InteractiveImage.svelte
+++ b/js/image/interactive/InteractiveImage.svelte
@@ -97,6 +97,7 @@
{pending}
{streaming}
{mirror_webcam}
+ i18n={gradio.i18n}
>
diff --git a/js/image/static/StaticImage.svelte b/js/image/static/StaticImage.svelte
index 7fd60bc0ad3b..30cae5f8138f 100644
--- a/js/image/static/StaticImage.svelte
+++ b/js/image/static/StaticImage.svelte
@@ -67,5 +67,6 @@
{show_download_button}
{selectable}
{show_share_button}
+ i18n={gradio.i18n}
/>
diff --git a/js/markdown/static/MarkdownCode.svelte b/js/markdown/static/MarkdownCode.svelte
index c68a2cbde0bf..f9110f810a34 100644
--- a/js/markdown/static/MarkdownCode.svelte
+++ b/js/markdown/static/MarkdownCode.svelte
@@ -46,7 +46,7 @@
html = "";
}
async function render_html(value: string): Promise {
- if (latex_delimiters.length > 0) {
+ if (latex_delimiters?.length > 0) {
render_math_in_element(el, {
delimiters: latex_delimiters,
throwOnError: false
diff --git a/js/statustracker/package.json b/js/statustracker/package.json
index 2de38a7fd52a..c64e8a38c68d 100644
--- a/js/statustracker/package.json
+++ b/js/statustracker/package.json
@@ -18,6 +18,7 @@
"dependencies": {
"@gradio/atoms": "workspace:^",
"@gradio/column": "workspace:^",
- "@gradio/icons": "workspace:^"
+ "@gradio/icons": "workspace:^",
+ "@gradio/utils": "workspace:^"
}
}
diff --git a/js/statustracker/static/index.svelte b/js/statustracker/static/index.svelte
index c00e117761ae..42f3c76ca7f1 100644
--- a/js/statustracker/static/index.svelte
+++ b/js/statustracker/static/index.svelte
@@ -50,7 +50,7 @@
import { app_state } from "../../app/src/stores";
import Loader from "./Loader.svelte";
import type { LoadingStatus } from "./types";
- import type { I18nFormatter } from "../@gradio/utils";
+ import type { I18nFormatter } from "@gradio/utils";
export let i18n: I18nFormatter;
export let eta: number | null = null;
diff --git a/js/storybook/preview.ts b/js/storybook/preview.ts
index 4faab1516d08..d78f387101ef 100644
--- a/js/storybook/preview.ts
+++ b/js/storybook/preview.ts
@@ -1,7 +1,7 @@
import type { Preview } from "@storybook/svelte";
import "./theme.css";
import { setupi18n } from "../app/src/i18n";
-import { Gradio } from "@gradio/utils";
+import { Gradio } from "../app/src/gradio_helper";
setupi18n();
const preview: Preview = {
diff --git a/js/textbox/interactive/InteractiveTextbox.svelte b/js/textbox/interactive/InteractiveTextbox.svelte
index 47226d4eebe2..37e33bc10b1a 100644
--- a/js/textbox/interactive/InteractiveTextbox.svelte
+++ b/js/textbox/interactive/InteractiveTextbox.svelte
@@ -24,7 +24,8 @@
select: SelectData;
input: never;
focus: never;
- }>;
+ }> = { dispatch, i18n: (s: string) => s };
+
export let label = "Textbox";
export let info: string | undefined = undefined;
export let elem_id = "";
diff --git a/js/tootils/package.json b/js/tootils/package.json
index 57bd0cd053d1..9ae02d280702 100644
--- a/js/tootils/package.json
+++ b/js/tootils/package.json
@@ -6,5 +6,8 @@
"main": "src/index.ts",
"author": "",
"license": "ISC",
- "private": true
+ "private": true,
+ "dependencies": {
+ "@gradio/utils": "workspace:^"
+ }
}
diff --git a/js/tootils/src/render.ts b/js/tootils/src/render.ts
index 4370f15dda3d..a1525886d7b7 100644
--- a/js/tootils/src/render.ts
+++ b/js/tootils/src/render.ts
@@ -14,7 +14,7 @@ import type {
FireObject
} from "@testing-library/dom";
import { spy, type Spy } from "tinyspy";
-import { Gradio } from "../@gradio/utils";
+import { Gradio } from "@gradio/utils";
const containerCache = new Map();
const componentCache = new Set();
diff --git a/js/upload/package.json b/js/upload/package.json
index 9a27894f7f57..ea9d5b2fd219 100644
--- a/js/upload/package.json
+++ b/js/upload/package.json
@@ -11,7 +11,8 @@
"@gradio/atoms": "workspace:^",
"@gradio/icons": "workspace:^",
"@gradio/client": "workspace:^",
- "@gradio/upload": "workspace:^"
+ "@gradio/upload": "workspace:^",
+ "@gradio/utils": "workspace:^"
},
"main_changeset": true
}
diff --git a/js/upload/src/ModifyUpload.svelte b/js/upload/src/ModifyUpload.svelte
index b78b1f502951..2bee880c60d0 100644
--- a/js/upload/src/ModifyUpload.svelte
+++ b/js/upload/src/ModifyUpload.svelte
@@ -1,7 +1,7 @@
gradio.dispatch("end")}
on:start_recording={() => gradio.dispatch("start_recording")}
on:stop_recording={() => gradio.dispatch("stop_recording")}
+ i18n={gradio.i18n}
>
diff --git a/js/video/interactive/Video.svelte b/js/video/interactive/Video.svelte
index 248a00d19310..b24d03a7742b 100644
--- a/js/video/interactive/Video.svelte
+++ b/js/video/interactive/Video.svelte
@@ -5,10 +5,10 @@
import { BlockLabel } from "@gradio/atoms";
import { Webcam } from "@gradio/image/interactive";
import { Video } from "@gradio/icons";
- import { normalise_file } from "@gradio/upload";
import { prettyBytes, playable } from "../shared/utils";
import Player from "../shared/Player.svelte";
+ import type { I18nFormatter } from "@gradio/utils";
export let value: FileData | null = null;
export let subtitle: FileData | null = null;
@@ -19,6 +19,7 @@
export let include_audio: boolean;
export let autoplay: boolean;
export let root: string;
+ export let i18n: I18nFormatter;
const dispatch = createEventDispatcher<{
change: any;
@@ -71,10 +72,11 @@
on:capture={({ detail }) => dispatch("change", detail)}
on:start_recording
on:stop_recording
+ {i18n}
/>
{/if}
{:else}
-
+
{#if playable()}
{#key value?.data}
gradio.dispatch("end")}
on:share={({ detail }) => gradio.dispatch("share", detail)}
on:error={({ detail }) => gradio.dispatch("error", detail)}
+ i18n={gradio.i18n}
/>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 738b2e12d227..bf324416fcd9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,6 +409,9 @@ importers:
'@gradio/dropdown':
specifier: workspace:^
version: link:../dropdown
+ '@gradio/fallback':
+ specifier: workspace:^
+ version: link:../fallback
'@gradio/file':
specifier: workspace:^
version: link:../file
@@ -769,6 +772,21 @@ importers:
specifier: workspace:^
version: link:../utils
+ js/fallback:
+ dependencies:
+ '@gradio/atoms':
+ specifier: workspace:^
+ version: link:../atoms
+ '@gradio/statustracker':
+ specifier: workspace:^
+ version: link:../statustracker
+ '@gradio/utils':
+ specifier: workspace:^
+ version: link:../utils
+ '@zerodevx/svelte-json-view':
+ specifier: ^1.0.7
+ version: 1.0.7(svelte@4.2.0)
+
js/file:
dependencies:
'@gradio/atoms':
@@ -893,6 +911,33 @@ importers:
specifier: ^4.4.9
version: 4.4.9(@types/node@20.3.1)(less@4.1.3)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.60.0)(sugarss@4.0.1)
+ js/gradio-preview/test/imageslider/frontend:
+ dependencies:
+ '@gradio/atoms':
+ specifier: workspace:^
+ version: link:../../../../atoms
+ '@gradio/icons':
+ specifier: workspace:^
+ version: link:../../../../icons
+ '@gradio/statustracker':
+ specifier: workspace:^
+ version: link:../../../../statustracker
+ '@gradio/upload':
+ specifier: workspace:^
+ version: link:../../../../upload
+ '@gradio/utils':
+ specifier: workspace:^
+ version: link:../../../../utils
+ cropperjs:
+ specifier: ^1.5.12
+ version: 1.5.12
+ lazy-brush:
+ specifier: ^1.0.1
+ version: 1.0.1
+ resize-observer-polyfill:
+ specifier: ^1.5.1
+ version: 1.5.1
+
js/gradio-preview/test/newnewtext/frontend:
dependencies:
'@gradio/atoms':
@@ -908,6 +953,12 @@ importers:
specifier: workspace:^
version: link:../../../../utils
+ js/gradio-preview/test/newtext/frontend:
+ dependencies:
+ '@zerodevx/svelte-json-view':
+ specifier: ^1.0
+ version: 1.0.7(svelte@4.2.0)
+
js/group: {}
js/highlightedtext:
@@ -1153,6 +1204,9 @@ importers:
'@gradio/icons':
specifier: workspace:^
version: link:../icons
+ '@gradio/utils':
+ specifier: workspace:^
+ version: link:../utils
js/tabitem:
dependencies:
@@ -1191,7 +1245,11 @@ importers:
js/tooltip: {}
- js/tootils: {}
+ js/tootils:
+ dependencies:
+ '@gradio/utils':
+ specifier: workspace:^
+ version: link:../utils
js/upload:
dependencies:
@@ -1207,6 +1265,9 @@ importers:
'@gradio/upload':
specifier: workspace:^
version: 'link:'
+ '@gradio/utils':
+ specifier: workspace:^
+ version: link:../utils
js/uploadbutton:
dependencies:
@@ -6481,7 +6542,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.0.0
dependencies:
- '@sveltejs/kit': 1.16.3(svelte@3.59.2)(vite@4.3.9)
+ '@sveltejs/kit': 1.16.3(svelte@3.57.0)(vite@4.3.5)
import-meta-resolve: 3.0.0
dev: true
@@ -7459,6 +7520,14 @@ packages:
tslib: 2.6.1
dev: true
+ /@zerodevx/svelte-json-view@1.0.7(svelte@4.2.0):
+ resolution: {integrity: sha512-yW0MV+9BCKOwzt3h86y3xDqYdI5st+Rxk+L5pa0Utq7nlPD+VvxyhL7R1gJoLxQvWwjyAvY/fyUCFTdwDyI14w==}
+ peerDependencies:
+ svelte: ^3.57.0 || ^4.0.0
+ dependencies:
+ svelte: 4.2.0
+ dev: false
+
/@zxing/text-encoding@0.9.0:
resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
requiresBuild: true
|