+
diff --git a/js/_website/src/lib/components/JSDocsNav.svelte b/js/_website/src/lib/components/JSDocsNav.svelte
new file mode 100644
index 000000000000..c41b9190ffff
--- /dev/null
+++ b/js/_website/src/lib/components/JSDocsNav.svelte
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
(show_nav = false)}
+ class:hidden={!show_nav}
+ class="min-w-[200px] navigation mobile-nav overflow-y-auto fixed backdrop-blur-lg z-50 bg-gray-200/50 pr-6 pl-4 py-4 -ml-4 h-full inset-0 w-5/6 lg:inset-auto lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12"
+ id="mobile-nav"
+>
+
+
+
+
+ {#if version_dropdown}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+ Storybook →
+
+
+
Components
+
+ {#each js_components as name}
+
{name}
+ {/each}
+
Client
+
JS Client
+
diff --git a/js/_website/src/lib/components/VersionDropdown.svelte b/js/_website/src/lib/components/VersionDropdown.svelte
index 99d8bde48b7f..ea8be52ce462 100644
--- a/js/_website/src/lib/components/VersionDropdown.svelte
+++ b/js/_website/src/lib/components/VersionDropdown.svelte
@@ -7,12 +7,15 @@
export let choices = [version, "main"];
export let value: string = $page.params?.version || version;
+ export let docs_type = "python";
$: is_guide = $page.route.id?.includes("/guides");
$: is_docs = $page.route.id?.includes("/docs/");
$: docs_url = `${value === version ? "" : `/${value}`}/docs/${
- $page.params?.doc ||
+ docs_type == "js" ? "js/" : ""
+ }${
+ $page.params?.jsdoc || $page.params?.doc ||
(is_dynamic || path_parts.length !== 4
? ""
: path_parts[path_parts.length - 1])
diff --git a/js/_website/src/routes/[[version]]/docs/+layout.server.ts b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
index 3e0d105c3661..522359b5bfaa 100644
--- a/js/_website/src/routes/[[version]]/docs/+layout.server.ts
+++ b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
@@ -33,7 +33,8 @@ export async function load({ params, url }) {
let modals = docs_json.docs.modals || [];
let routes = docs_json.docs.routes;
let py_client = docs_json.docs["py-client"];
- let js_client = docs_json.js_client;
+ let js = docs_json.js || {};
+ let js_pages = docs_json.js_pages || [];
let on_main = params.version === "main";
let wheel: string = WHEEL;
let pages: string[] = docs_json.pages;
@@ -45,7 +46,8 @@ export async function load({ params, url }) {
modals,
routes,
py_client,
- js_client,
+ js,
+ js_pages,
on_main,
wheel,
pages
diff --git a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
index 7b211db4fa17..5019ae714134 100644
--- a/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte
@@ -67,6 +67,7 @@
$: modals = data.modals;
$: routes = data.routes;
$: py_client = data.py_client;
+
-
+
+
+
@@ -81,4 +81,4 @@
code {
font-size: 1rem;
}
-
+
\ No newline at end of file
diff --git a/js/_website/src/routes/[[version]]/docs/js/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js/+page.server.ts
new file mode 100644
index 000000000000..27cb95867aa6
--- /dev/null
+++ b/js/_website/src/routes/[[version]]/docs/js/+page.server.ts
@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+
+export const prerender = true;
+
+export function load({ params }) {
+ throw redirect(302, `./js/accordion`);
+}
diff --git a/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.server.ts
new file mode 100644
index 000000000000..4e23cdb67475
--- /dev/null
+++ b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.server.ts
@@ -0,0 +1,130 @@
+import { compile } from "mdsvex";
+import anchor from "$lib/assets/img/anchor.svg";
+import { make_slug_processor } from "$lib/utils";
+import { toString as to_string } from "hast-util-to-string";
+import Prism from "prismjs";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-csv";
+import "prismjs/components/prism-markup";
+import { error } from "@sveltejs/kit";
+
+export const prerender = true;
+
+function plugin() {
+ return function transform(tree: any) {
+ tree.children.forEach((n: any) => {
+ if (n.type === "heading") {
+ }
+ });
+ };
+}
+
+const langs = {
+ python: "python",
+ py: "python",
+ bash: "bash",
+ csv: "csv",
+ html: "html",
+ shell: "bash",
+ json: "json",
+ typescript: "typescript",
+ javascript: "javascript",
+ directory: "json"
+};
+
+function highlight(code: string, lang: string | undefined) {
+ const _lang = langs[lang as keyof typeof langs] || "";
+
+ const highlighted = _lang
+ ? `
${Prism.highlight(
+ code,
+ Prism.languages[_lang],
+ _lang
+ )}
`
+ : code;
+
+ return highlighted;
+}
+
+export async function load({ params, parent }) {
+ const {
+ js,
+ js_pages,
+ } = await parent();
+
+ let name = params.jsdoc;
+ const guide_slug = [];
+
+ const get_slug = make_slug_processor();
+
+ if (!js_pages.some((p: string) => p === params.jsdoc)) {
+ throw error(404);
+ }
+ function plugin() {
+ return function transform(tree: any) {
+ tree.children.forEach((n: any) => {
+ if (
+ n.type === "element" &&
+ ["h2", "h3", "h4", "h5", "h6"].includes(n.tagName)
+ ) {
+ const str_of_heading = to_string(n);
+ const slug = get_slug(str_of_heading);
+
+ guide_slug.push({
+ text: str_of_heading,
+ href: `#${slug}`,
+ level: parseInt(n.tagName.replace("h", ""))
+ });
+
+ if (!n.children) n.children = [];
+ n.properties.className = ["group"];
+ n.properties.id = [slug];
+ n.children.push({
+ type: "element",
+ tagName: "a",
+ properties: {
+ href: `#${slug}`,
+ className: ["invisible", "group-hover-visible"]
+ },
+ children: [
+ {
+ type: "element",
+ tagName: "img",
+ properties: {
+ src: anchor,
+ className: ["anchor-img"]
+ },
+ children: []
+ }
+ ]
+ });
+ }
+ });
+ };
+ }
+
+ let readme_html;
+
+ for (const key in js) {
+ if (key == name) {
+ const compiled = await compile(js[key], {
+ rehypePlugins: [plugin],
+ highlight: {
+ highlighter: highlight
+ }
+ });
+
+ readme_html = await compiled?.code;
+ }
+ }
+
+ return {
+ name,
+ readme_html,
+ js_pages,
+ };
+}
diff --git a/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte
new file mode 100644
index 000000000000..6c44f0bb4511
--- /dev/null
+++ b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {@html readme_html}
+
+
+
+
+
+
+
diff --git a/js/_website/src/routes/[[version]]/docs/js/storybook/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js/storybook/+page.server.ts
new file mode 100644
index 000000000000..7ea14e23cabd
--- /dev/null
+++ b/js/_website/src/routes/[[version]]/docs/js/storybook/+page.server.ts
@@ -0,0 +1,125 @@
+import { compile } from "mdsvex";
+import anchor from "$lib/assets/img/anchor.svg";
+import { make_slug_processor } from "$lib/utils";
+import { toString as to_string } from "hast-util-to-string";
+import Prism from "prismjs";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-csv";
+import "prismjs/components/prism-markup";
+import { error } from "@sveltejs/kit";
+
+export const prerender = true;
+
+function plugin() {
+ return function transform(tree: any) {
+ tree.children.forEach((n: any) => {
+ if (n.type === "heading") {
+ }
+ });
+ };
+}
+
+const langs = {
+ python: "python",
+ py: "python",
+ bash: "bash",
+ csv: "csv",
+ html: "html",
+ shell: "bash",
+ json: "json",
+ typescript: "typescript",
+ directory: "json"
+};
+
+function highlight(code: string, lang: string | undefined) {
+ const _lang = langs[lang as keyof typeof langs] || "";
+
+ const highlighted = _lang
+ ? `
${Prism.highlight(
+ code,
+ Prism.languages[_lang],
+ _lang
+ )}
`
+ : code;
+
+ return highlighted;
+}
+
+export async function load({ params, parent }) {
+ const {
+ js,
+ js_pages,
+ } = await parent();
+
+ let name = params.jsdoc;
+ const guide_slug = [];
+
+ const get_slug = make_slug_processor();
+
+ function plugin() {
+ return function transform(tree: any) {
+ tree.children.forEach((n: any) => {
+ if (
+ n.type === "element" &&
+ ["h2", "h3", "h4", "h5", "h6"].includes(n.tagName)
+ ) {
+ const str_of_heading = to_string(n);
+ const slug = get_slug(str_of_heading);
+
+ guide_slug.push({
+ text: str_of_heading,
+ href: `#${slug}`,
+ level: parseInt(n.tagName.replace("h", ""))
+ });
+
+ if (!n.children) n.children = [];
+ n.properties.className = ["group"];
+ n.properties.id = [slug];
+ n.children.push({
+ type: "element",
+ tagName: "a",
+ properties: {
+ href: `#${slug}`,
+ className: ["invisible", "group-hover-visible"]
+ },
+ children: [
+ {
+ type: "element",
+ tagName: "img",
+ properties: {
+ src: anchor,
+ className: ["anchor-img"]
+ },
+ children: []
+ }
+ ]
+ });
+ }
+ });
+ };
+ }
+
+ let readme_html;
+
+ for (const key in js) {
+ if (key == name) {
+ const compiled = await compile(js[key], {
+ rehypePlugins: [plugin],
+ highlight: {
+ highlighter: highlight
+ }
+ });
+
+ readme_html = await compiled?.code;
+ }
+ }
+
+ return {
+ name,
+ readme_html,
+ js_pages,
+ };
+}
diff --git a/js/_website/src/routes/[[version]]/docs/js/storybook/+page.svelte b/js/_website/src/routes/[[version]]/docs/js/storybook/+page.svelte
new file mode 100644
index 000000000000..82510aa38a5d
--- /dev/null
+++ b/js/_website/src/routes/[[version]]/docs/js/storybook/+page.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
diff --git a/js/_website/svelte.config.js b/js/_website/svelte.config.js
index afa90713a0af..f4a2bc60ddf4 100644
--- a/js/_website/svelte.config.js
+++ b/js/_website/svelte.config.js
@@ -12,12 +12,17 @@ const config = {
kit: {
prerender: {
+ crawl: true,
entries: [
"*",
`/${version}/docs`,
`/${version}/guides`,
+ `/${version}/docs/js`,
+ `/${version}/docs/js/storybook`,
+ `/${version}/docs/js/`,
`/main/docs`,
- `/main/guides`
+ `/main/guides`,
+ `/main/docs/js`
// "/main/docs/interface"
]
},
diff --git a/js/audio/README.md b/js/audio/README.md
index ef337cd8686a..8481b7e275f2 100644
--- a/js/audio/README.md
+++ b/js/audio/README.md
@@ -2,14 +2,65 @@
```svelte
+```
+
+
+BaseExample:
+```javascript
+ export let value: string;
+ export let type: "gallery" | "table";
+ export let selected = false;
+```
-
+BaseStaticAudio:
+```javascript
+ export let value: null | { name: string; data: string } = null;
+ export let label: string;
+ export let name: string;
+ export let show_label = true;
+ export let autoplay: boolean;
+ export let show_download_button = true;
+ export let show_share_button = false;
+ export let i18n: I18nFormatter;
+ export let waveform_settings = {};
```
+
+BaseInteractiveAudio:
+```javascript
+ export let value: null | { name: string; data: string } = null;
+ export let label: string;
+ export let root: string;
+ export let show_label = true;
+ export let sources:
+ | ["microphone"]
+ | ["upload"]
+ | ["microphone", "upload"]
+ | ["upload", "microphone"] = ["microphone", "upload"];
+ export let pending = false;
+ export let streaming = false;
+ export let autoplay = false;
+ export let i18n: I18nFormatter;
+ export let waveform_settings = {};
+ export let dragging: boolean;
+ export let active_source: "microphone" | "upload";
+ export let handle_reset_value: () => void = () => {};
+```
+
+BasePlayer:
+```javascript
+ export let value: null | { name: string; data: string } = null;
+ export let label: string;
+ export let autoplay: boolean;
+ export let i18n: I18nFormatter;
+ export let dispatch: (event: any, detail?: any) => void;
+ export let dispatch_blob: (
+ blobs: Uint8Array[] | Blob[],
+ event: "stream" | "change" | "stop_recording"
+ ) => Promise
= () => Promise.resolve();
+ export let interactive = false;
+ export let waveform_settings = {};
+ export let mode = "";
+ export let handle_reset_value: () => void = () => {};
+```
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 090a1c337440..ea8a5df82106 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -276,8 +276,8 @@ importers:
js/_website:
dependencies:
'@gradio/code':
- specifier: workspace:^
- version: link:../code
+ specifier: 0.2.0-beta.6
+ version: 0.2.0-beta.6(svelte@4.2.2)
'@sindresorhus/slugify':
specifier: ^2.2.0
version: 2.2.0
@@ -4356,6 +4356,103 @@ packages:
tslib: 2.6.1
dev: false
+ /@gradio/atoms@0.2.0-beta.5(svelte@4.2.2):
+ resolution: {integrity: sha512-eKIylgLVTulFFzkjmjfYoC+pF3iAnytVYaHVie+G9rkiDYRN6/+bPd4wXx72AMI3EwixT4ghW34nbvsOSwaCEw==}
+ dependencies:
+ '@gradio/icons': 0.2.0-beta.2
+ '@gradio/utils': 0.2.0-beta.5(svelte@4.2.2)
+ transitivePeerDependencies:
+ - svelte
+ dev: false
+
+ /@gradio/client@0.5.2:
+ resolution: {integrity: sha512-aQk3FEJt3R/7d7Xul0KqSUDqh0rwgQQwTXBuLS5qHuf861ym7bJcm/kDqqBgyu3/9pxAsybSdgA/G0QyZSBKgA==}
+ engines: {node: '>=18.0.0'}
+ dependencies:
+ bufferutil: 4.0.7
+ semiver: 1.1.0
+ ws: 8.13.0(bufferutil@4.0.7)
+ transitivePeerDependencies:
+ - utf-8-validate
+ dev: false
+
+ /@gradio/code@0.2.0-beta.6(svelte@4.2.2):
+ resolution: {integrity: sha512-CCR80TBgBz28oU6wfFD0zrcYrOt68kPK62044pFRU3qA8BCL0T2Jv7F6fGXaWA443KqoBvIwuLb+CclPVexzRA==}
+ dependencies:
+ '@codemirror/autocomplete': 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+ '@codemirror/commands': 6.1.2
+ '@codemirror/lang-css': 6.1.0(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+ '@codemirror/lang-html': 6.4.2
+ '@codemirror/lang-javascript': 6.1.4
+ '@codemirror/lang-json': 6.0.1
+ '@codemirror/lang-markdown': 6.1.0
+ '@codemirror/lang-python': 6.0.4
+ '@codemirror/language': 6.6.0
+ '@codemirror/legacy-modes': 6.3.1
+ '@codemirror/lint': 6.0.0
+ '@codemirror/search': 6.2.2
+ '@codemirror/state': 6.1.2
+ '@codemirror/view': 6.4.1
+ '@gradio/atoms': 0.2.0-beta.5(svelte@4.2.2)
+ '@gradio/icons': 0.2.0-beta.2
+ '@gradio/statustracker': 0.3.0-beta.7(svelte@4.2.2)
+ '@gradio/upload': 0.3.0-beta.4(svelte@4.2.2)
+ '@gradio/utils': 0.2.0-beta.5(svelte@4.2.2)
+ '@lezer/common': 1.0.2
+ '@lezer/highlight': 1.1.3
+ '@lezer/markdown': 1.0.2
+ cm6-theme-basic-dark: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3)
+ cm6-theme-basic-light: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3)
+ codemirror: 6.0.1(@lezer/common@1.0.2)
+ transitivePeerDependencies:
+ - svelte
+ - utf-8-validate
+ dev: false
+
+ /@gradio/column@0.1.0-beta.3:
+ resolution: {integrity: sha512-su1dEWTCJXoy6GHLwto0paJrGsxfa3ZLcvV+FRiGNPUE+kezw5oHfUrXSfwTgcNQEEpFqqmI9YTYfGkDmVk01g==}
+ dev: false
+
+ /@gradio/icons@0.2.0-beta.2:
+ resolution: {integrity: sha512-5BHWcbuCk546OX2PmmNryTZ7ZXGNUr2ipzHpnLCE/8e9R1SQiCZuHWQCdTJIqh5aOfPa4beu7Pu/nvcz0yuPmw==}
+ dev: false
+
+ /@gradio/statustracker@0.3.0-beta.7(svelte@4.2.2):
+ resolution: {integrity: sha512-F8vRA1qnsV53HTwmvjSNz2n13NfMxHMgW5TmAFDBfs5HdPtYKXuc0ur+PitBs/IvXHHgGeDqtQpQRS3MokvmVA==}
+ dependencies:
+ '@gradio/atoms': 0.2.0-beta.5(svelte@4.2.2)
+ '@gradio/column': 0.1.0-beta.3
+ '@gradio/icons': 0.2.0-beta.2
+ '@gradio/utils': 0.2.0-beta.5(svelte@4.2.2)
+ transitivePeerDependencies:
+ - svelte
+ dev: false
+
+ /@gradio/theme@0.2.0-beta.2:
+ resolution: {integrity: sha512-yKrA8eE02URtXUC9w98lBW8tqZk5oGumbBH7bFKOAhsrv1sbVZKir18P4a2/EL4XJ6Um36MwhPB3D5ipMniV5g==}
+ dev: false
+
+ /@gradio/upload@0.3.0-beta.4(svelte@4.2.2):
+ resolution: {integrity: sha512-JFajJHKJCAjZjtXDRZvLifGOs/b38fAuzAMshkDUQaJloRYk4KKpjnyj8d68wkQFzq3SK8ChKwfYoeMX8zp3yA==}
+ dependencies:
+ '@gradio/atoms': 0.2.0-beta.5(svelte@4.2.2)
+ '@gradio/client': 0.5.2
+ '@gradio/icons': 0.2.0-beta.2
+ '@gradio/utils': 0.2.0-beta.5(svelte@4.2.2)
+ transitivePeerDependencies:
+ - svelte
+ - utf-8-validate
+ dev: false
+
+ /@gradio/utils@0.2.0-beta.5(svelte@4.2.2):
+ resolution: {integrity: sha512-CXz9fpy08weaAnfGVh69aj1sQtPkPkeMw546F+YtZ0tnmmKbnDxWCP4NN6NA4OeiZPA+N0yl+Nqo6cX8G4UBhg==}
+ dependencies:
+ '@gradio/theme': 0.2.0-beta.2
+ svelte-i18n: 3.7.0(svelte@4.2.2)
+ transitivePeerDependencies:
+ - svelte
+ dev: false
+
/@humanwhocodes/config-array@0.11.10:
resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
engines: {node: '>=10.10.0'}