mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Docs Reorg and Intro Page (#8061)

Browse Source 
* docs intro page and guides

* python library docs and js client

* reorg

* changes

* add better hovering

* fix broken version routing

* add redirects and remove duplicate pages

* fix build issues

* fix issues

* formatting

* add changeset

* add changeset

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update js/_website/src/routes/[[version]]/docs/+page.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* styling changes

* formatting

* fix build

* rounded corners on buttons

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Ali Abdalla 2024-04-23 13:33:45 -07:00 committed by GitHub
parent 006fa3c6d0
commit 17e83c958e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 1549 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/icy-mice-lose.md Normal file
View File

@ -0,0 +1,7 @@
---
"@gradio/client": patch
"gradio": patch
"website": patch
---
feat:Docs Reorg and Intro Page

2
client/js/README.md
View File

@ -6,7 +6,7 @@ A JavaScript (and TypeScript) Client to call Gradio APIs.
The Gradio JavaScript Client is available on npm as `@gradio/client`. You can install it as below:
```sh
```shell
npm i @gradio/client
```

2
guides/01_getting-started/02_key-features.md
View File

@ -66,7 +66,7 @@ demo.launch()
This limits the number of requests processed for this event listener at a single time to 5. By default, the `default_concurrency_limit` is actually set to `1`, which means that when many users are using your app, only a single user's request will be processed at a time. This is because many machine learning functions consume a significant amount of memory and so it is only suitable to have a single user using the demo at a time. However, you can change this parameter in your demo easily.
See the [docs on queueing](/docs/interface#interface-queue) for more details on configuring the queuing parameters.
See the [docs on queueing](/docs/gradio/interface#interface-queue) for more details on configuring the queuing parameters.
## Streaming outputs

3
js/_website/generate_jsons/src/docs/__init__.py
View File

@ -274,7 +274,7 @@ def organize_docs(d):
c_keys = list(organized["py-client"].keys())
for i, cls in enumerate(organized["py-client"]):
if not i:
organized["py-client"][cls]["prev_obj"] = "Python-Client"
organized["py-client"][cls]["prev_obj"] = "Intro"
organized["py-client"][cls]["next_obj"] = organized["py-client"][c_keys[1]][
"name"
]
@ -282,7 +282,6 @@ def organize_docs(d):
organized["py-client"][cls]["prev_obj"] = organized["py-client"][
c_keys[len(c_keys) - 2]
]["name"]
organized["py-client"][cls]["next_obj"] = "JS-Client"
else:
organized["py-client"][cls]["prev_obj"] = organized["py-client"][
c_keys[i - 1]

2
js/_website/package.json
View File

@ -22,7 +22,7 @@
},
"type": "module",
"dependencies": {
"@gradio/code": "0.5.12",
"@gradio/code": "0.5.11",
"@sindresorhus/slugify": "^2.2.0",
"@sveltejs/adapter-vercel": "^3.0.3",
"hast-util-to-string": "^3.0.0",

31
js/_website/src/lib/components/DocsNav.svelte
View File

@ -105,18 +105,6 @@
autocomplete="off"
/>
<DropDown></DropDown>
<select
bind:value={docs_type}
on:change={() => {
if (docs_type == "js") {
window.location.href = "/main/docs/js/";
}
}}
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
>
<option value="js">js</option>
<option value="python">python</option>
</select>
</div>
<p class="font-semibold px-4 my-2 block">Building Demos</p>
@ -226,23 +214,4 @@
class="thin-link px-4 block leading-8"
href="./no-reload/">NO_RELOAD</a
>
<a
class:current-nav-link={current_nav_link == "python-client"}
class="link px-4 my-2 block"
href="./python-client/">Python Client</a
>
{#each Object.entries(py_client) as [name, obj] (name)}
<a
class:current-nav-link={current_nav_link == name}
class="px-4 block thin-link leading-8"
href="./{name}/">{obj.name}</a
>
{/each}
<a
class:current_nav_link={current_nav_link == "js-client"}
class="link px-4 my-2 block"
href="./js-client/">JavaScript Client</a
>
</div>

127
js/_website/src/lib/components/DocsNavCustom.svelte Normal file
View File

@ -0,0 +1,127 @@
<script lang="ts">
// @ts-nocheck
import { clickOutside } from "./clickOutside.js";
export let items: any;
export let title: string;
export let current_nav_link = "";
let docs_type = "python";
let show_nav = false;
let searchTerm = "";
let searchBar: HTMLInputElement;
const search = () => {
let links = document.querySelectorAll(
".navigation a"
) as NodeListOf<HTMLAnchorElement>;
links.forEach((link) => {
let linkText = link.innerText.toLowerCase();
if (linkText.includes(searchTerm.toLowerCase())) {
link.style.display = "block";
} else {
link.style.display = "none";
}
});
};
function onKeyDown(e: KeyboardEvent) {
if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
searchBar.focus();
}
if (e.key == "Escape") {
searchTerm = "";
searchBar.blur();
search();
}
}
import DropDown from "$lib/components/VersionDropdown.svelte";
</script>
<svelte:window on:keydown={onKeyDown} />
<section
class="top-0 fixed -ml-4 flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
id="menu-bar"
>
<button
on:click={() => (show_nav = !show_nav)}
type="button"
class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
>
<svg width="24" height="24"
><path
d="M5 6h14M5 12h14M5 18h14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>
</button>
</section>
<div
use:clickOutside
on:click_outside={() => (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"
>
<button
on:click={() => (show_nav = !show_nav)}
type="button"
class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
tabindex="0"
>
<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
><path
d="M0 0L10 10M10 0L0 10"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>
</button>
<div
class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10 hidden lg:block my-4 ml-4"
>
<input
bind:value={searchTerm}
on:input={search}
bind:this={searchBar}
id="search"
type="search"
class="w-4/5 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
placeholder="Search ⌘-k / ctrl-k"
autocomplete="off"
/>
<!-- <DropDown></DropDown> -->
<!-- <select
bind:value={docs_type}
on:change={() => {
if (docs_type == "js") {
window.location.href = "/main/docs/js/";
}
}}
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
>
<option value="js">js</option>
<option value="python">python</option>
</select> -->
</div>
<p class="font-semibold px-4 my-2 block">{title}</p>
{#each Object.entries(items) as [name, url] (name)}
<a
class:current-nav-link={current_nav_link == name}
class="px-4 block thin-link"
href={url}>{name}</a
>
{/each}
</div>

5
js/_website/src/lib/components/Header.svelte
View File

@ -7,8 +7,6 @@
let show_help_menu = false;
let show_nav = false;
$: show_nav = click_nav || $store?.lg;
// $: selected_version === version && is_versioned && goto("/guides/quickstart");
</script>
<!-- 4.0 Launch BANNER -->
@ -58,9 +56,6 @@
<a class="thin-link flex items-center gap-3" href="/docs"
><span>✍️</span> <span>Docs</span>
</a>
<a class="thin-link flex items-center gap-3" href="/guides"
><span>💡</span> <span>Guides</span></a
>
<a class="thin-link flex items-center gap-3" href="/playground"
><span>🎢</span>
<span>Playground</span></a

12
js/_website/src/lib/components/JSDocsNav.svelte
View File

@ -104,18 +104,6 @@
{#if version_dropdown}
<DropDown docs_type="js"></DropDown>
{/if}
<select
bind:value={docs_type}
on:change={() => {
if (docs_type == "python") {
window.location.href = "../../docs/";
}
}}
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
>
<option value="js">js</option>
<option value="python">python</option>
</select>
</div>
<p

16
js/_website/src/lib/components/VersionDropdown.svelte
View File

@ -9,11 +9,21 @@
export let docs_type = "python";
$: is_guide = $page.route.id?.includes("/guides");
$: is_docs = $page.route.id?.includes("/docs/");
$: is_docs = $page.route.id?.includes("/docs");
$: docs_url = `${value === version ? "" : `/${value}`}/docs/${
let match_name: RegExpMatchArray | null;
let docs_section: string;
$: match_name = $page.url.pathname.match(/\/docs\/([^/]+)/);
$: if (match_name) {
docs_section = match_name[1];
}
$: docs_url = `${value === version ? "" : `/${value}`}/docs${
docs_section ? `/${docs_section}` : ""
}/${
$page.params?.doc ||
(is_dynamic || path_parts.length !== 4
(is_dynamic || path_parts.length !== 5
? ""
: path_parts[path_parts.length - 1])
}`;

57
js/_website/src/routes/[[version]]/docs/+page.server.ts
View File

@ -1,8 +1,57 @@
import { redirect } from "@sveltejs/kit";
import * as version from "$lib/json/version.json";
export function load({ params }) {
if (params?.version)
throw redirect(302, `/${params?.version}/docs/interface`);
const COLOR_SETS = [
"green",
"yellow",
"red",
"blue",
"pink",
"purple",
"green",
"yellow",
"red",
"blue",
"pink",
"purple"
];
throw redirect(302, `/docs/interface`);
const DOCS_BUCKET = "https://gradio-docs-json.s3.us-west-2.amazonaws.com";
const VERSION = version.version;
async function load_release_guide_categories(
version: string
): Promise<typeof import("$lib/json/guides/guides_by_category.json")> {
let docs_json = await fetch(
`${DOCS_BUCKET}/${version}/guides/guides_by_category.json`
);
return await docs_json.json();
}
async function load_main_guide_categories() {
return await import(`../../../lib/json/guides/guides_by_category.json`);
}
export async function load({ params, url }) {
if (params?.version === VERSION) {
throw redirect(302, url.href.replace(`/${params.version}`, ""));
}
let guides_by_category = (
params?.version === "main"
? await load_main_guide_categories()
: await load_release_guide_categories(params?.version || VERSION)
).guides_by_category;
let total_guides = 0;
for (const category in guides_by_category) {
for (const guide in guides_by_category[category].guides) {
total_guides += 1;
}
}
return {
guides_by_category,
total_guides,
COLOR_SETS
};
}

263
js/_website/src/routes/[[version]]/docs/+page.svelte Normal file
View File

@ -0,0 +1,263 @@
<script lang="ts">
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
import DropDown from "$lib/components/VersionDropdown.svelte";
export let data: {
[key: string]: any;
};
</script>
<MetaTags
title="Gradio Documentation"
url={$page.url.pathname}
canonical={$page.url.pathname}
description="Documentation, tutorials and guides for the Gradio ecosystem."
/>
<div class="container mx-auto px-4 relative pt-8 mb-0">
<div class="float-right">
<DropDown />
</div>
<h1 class="mb-4 flex items-center text-2xl font-light">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="mr-1.5 text-gray-400 text-3xl"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
><path
opacity="0.5"
d="M20.9022 5.10334L10.8012 10.8791L7.76318 9.11193C8.07741 8.56791 8.5256 8.11332 9.06512 7.7914L15.9336 3.73907C17.0868 3.08811 18.5002 3.26422 19.6534 3.91519L19.3859 3.73911C19.9253 4.06087 20.5879 4.56025 20.9022 5.10334Z"
fill="currentColor"
></path><path
d="M10.7999 10.8792V28.5483C10.2136 28.5475 9.63494 28.4139 9.10745 28.1578C8.5429 27.8312 8.074 27.3621 7.74761 26.7975C7.42122 26.2327 7.24878 25.5923 7.24756 24.9402V10.9908C7.25062 10.3319 7.42358 9.68487 7.74973 9.1123L10.7999 10.8792Z"
fill="currentColor"
fill-opacity="0.75"
></path><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.3368 10.8499V6.918C21.3331 6.25959 21.16 5.61234 20.8346 5.03949L10.7971 10.8727L10.8046 10.874L21.3368 10.8499Z"
fill="currentColor"
></path><path
opacity="0.5"
d="M21.7937 10.8488L10.7825 10.8741V28.5486L21.7937 28.5234C23.3344 28.5234 24.5835 27.2743 24.5835 25.7335V13.6387C24.5835 12.0979 23.4365 11.1233 21.7937 10.8488Z"
fill="currentColor"
></path></svg
>
Documentation
</h1>
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 mt-8">
<div
class="shadow-alternate hover:scale-[1.02] group group flex flex-col overflow-hidden md:first:row-span-3 rounded-xl bg-gradient-to-br px-3 pb-4 pt-6 from-orange-100 via-orange-50 hover:shadow-alternate to-white shadow-none transition-shadow"
>
<a class="mt-auto mb-2 flex-grow" href="./docs/gradio/" target="_self">
<div class="text-lg">
<p class="font-semibold">Gradio</p>
</div>
<code class="font-light text-md mb-2">gradio</code>
<div class=" relative pr-4 text-lg font-light mt-2">
Build and share machine learning demos and web applications using the
core Gradio Python library.
</div>
</a>
<div class="hidden lg:flex flex-wrap mx-auto justify-center">
<a
href="./docs/gradio/interface"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Interface
</a>
<a
href="./docs/gradio/blocks"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Blocks
</a>
<a
href="./docs/gradio/chatinterface"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>ChatInterface
</a>
<a
href="./docs/gradio/textbox"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Textbox
</a>
<a
href="./docs/gradio/image"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Image
</a>
<a
href="./docs/gradio/audio"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Audio
</a>
<a
href="./docs/gradio/dataframe"
target="_self"
class="shadow-alternate quick-link rounded-xl px-3.5 py-1 m-2 text-md font-semibold text-white bg-orange-300 hover:drop-shadow-md"
>Dataframe
</a>
</div>
</div>
<a
href="./docs/python-client"
target="_self"
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
.COLOR_SETS[1]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
>
<div class="relative mb-2 flex items-center text-lg font-semibold">
<span>Python Client</span>
</div>
<code class="font-light text-md mb-2">gradio-client</code>
<div class="relative pr-4 text-lg font-light">
Make programmatic requests to Gradio applications from Python
environments.
</div>
</a>
<a
href="./docs/js-client"
target="_self"
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
.COLOR_SETS[0]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
>
<div class="relative mb-2 flex items-center text-lg font-semibold">
<span>Javascript Client</span>
</div>
<code class=" text-md mb-2">@gradio/client</code>
<div class="relative pr-4 text-lg font-light">
Make programmatic requests to Gradio applications in JavaScript
(TypeScript) from the browser or server-side.
</div>
</a>
{#if $page.params?.version !== "3.50.2"}
<a
href="./docs/js"
target="_self"
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
.COLOR_SETS[3]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
>
<div class="relative mb-2 flex items-center text-lg font-semibold">
<span>Javascript Components</span>
</div>
<div class="relative pr-4 text-lg font-light">
Use Gradio's UI components in standalone JavaScript applications
outside of the Gradio environment.
</div>
</a>
<a
href="../guides/custom-components-in-five-minutes"
target="_self"
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
.COLOR_SETS[5]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
>
<div class="relative mb-2 flex items-center text-lg font-semibold">
<span>Custom Components</span>
</div>
<div class="relative pr-4 text-lg font-light">
Create, use, and share your own custom components within a Gradio
application.
</div>
</a>
{/if}
<a
href="../guides/gradio-lite"
target="_self"
class="shadow-alternate hover:scale-[1.02] group group relative flex flex-col overflow-hidden md:first:row-span-2 rounded-xl bg-gradient-to-r px-3 py-4 dark:border-gray-900 from-{data
.COLOR_SETS[4]}-50 hover:shadow-alternate to-white shadow-none transition-shadow dark:from-gray-850 dark:to-gray-950 dark:hover:from-gray-800"
>
<div class="relative mb-2 flex items-center text-lg font-semibold">
<span>Gradio Lite</span>
</div>
<code class="font-light text-md mb-2">@gradio/lite</code>
<div class="relative pr-4 text-lg font-light">
Run Gradio's Python code serverless (entirely in your browser) using
WebAssembly.
</div>
</a>
</div>
<h1 class="mb-4 flex items-center text-2xl font-light mt-8">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="mr-1.5 text-gray-400 text-3xl"
width="0.75em"
height="0.75em"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M15,19H9c-0.6,0-1-0.4-1-1v-0.5c0-1.4-0.6-2.8-1.7-3.9C4.7,12,3.9,9.9,4,7.7C4.2,3.5,7.7,0.1,11.9,0L12,0 c4.4,0,8,3.6,8,8c0,2.1-0.8,4.2-2.4,5.7c-1.1,1-1.6,2.4-1.6,3.8V18C16,18.6,15.6,19,15,19z M10,17h4c0.1-1.8,0.9-3.4,2.2-4.8 C17.4,11.1,18,9.6,18,8c0-3.3-2.7-6-6-6l-0.1,0C8.8,2.1,6.1,4.6,6,7.8C5.9,9.4,6.6,11,7.7,12.2C9.1,13.6,9.9,15.3,10,17z"
/>
<path
d="M12,24L12,24c-2.2,0-4-1.8-4-4v-2c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v2C16,22.2,14.2,24,12,24z M10,19v1c0,1.1,0.9,2,2,2 H12c1.1,0,2-0.9,2-2v-1H10z"
/>
<path
d="M9,9C8.4,9,8,8.6,8,8c0-2.2,1.8-4,4-4c0.6,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-2,0.9-2,2C10,8.6,9.6,9,9,9z"
/>
</svg>
Guides
</h1>
{#each data.guides_by_category as { category, guides }, i (category)}
<div class="category py-4">
<h2 class="mb-4 text-xl font-normal block">
{category}
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
{#each guides as guide (guide.name)}
<a
class="shadow-alternate hover:scale-[1.04] guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl bg-gradient-to-r px-3 py-4 from-{data
.COLOR_SETS[
i
]}-50 hover:shadow-alternate to-white shadow-none transition-shadow"
href=".{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<h2 class="text-lg">
{guide.pretty_name}
</h2>
<div class="tags-holder">
{#if guide.tags}
<p class="text-gray-600">
<!--
-->{#each guide.tags as tag, j (tag)}<!--
-->{tag}{#if j !== guide.tags.length - 1},&nbsp;{/if}<!--
-->{/each}<!--
-->
</p>
{/if}
</div>
</div>
</a>
{/each}
</div>
</div>
{/each}
</div>
<style>
.quick-link {
transition: transform 0.1s ease-in-out;
}
</style>

8
js/_website/src/routes/[[version]]/docs/gradio/+page.server.ts Normal file
View File

@ -0,0 +1,8 @@
import { redirect } from "@sveltejs/kit";
export function load({ params }) {
if (params?.version)
throw redirect(302, `/${params?.version}/docs/gradio/interface`);
throw redirect(302, `/docs/gradio/interface`);
}

0
js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts → js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.server.ts
View File

2
js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte → js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
View File

@ -509,7 +509,7 @@
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
target="_blank"
href="..{guide.url}"
href="../..{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<p class="group-hover:underline text-l">

0
js/_website/src/routes/[[version]]/docs/components/+page.server.ts → js/_website/src/routes/[[version]]/docs/gradio/components/+page.server.ts
View File

0
js/_website/src/routes/[[version]]/docs/components/+page.svelte → js/_website/src/routes/[[version]]/docs/gradio/components/+page.svelte
View File

0
js/_website/src/routes/[[version]]/docs/flagging/+page.server.ts → js/_website/src/routes/[[version]]/docs/gradio/flagging/+page.server.ts
View File

2
js/_website/src/routes/[[version]]/docs/flagging/+page.svelte → js/_website/src/routes/[[version]]/docs/gradio/flagging/+page.svelte
View File

@ -377,7 +377,7 @@
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
target="_blank"
href="..{guide.url}"
href="../..{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<p class="group-hover:underline text-l">

0
js/_website/src/routes/[[version]]/docs/no-reload/+page.server.ts → js/_website/src/routes/[[version]]/docs/gradio/no-reload/+page.server.ts
View File

18
js/_website/src/routes/[[version]]/docs/no-reload/+page.svelte → js/_website/src/routes/[[version]]/docs/gradio/no-reload/+page.svelte
View File

@ -115,14 +115,7 @@
<span class="text-orange-500">&#8592;</span> Themes
</div>
</a>
<a
href="./python-client"
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
Python Client <span class="text-orange-500">&#8594;</span>
</div>
</a>
</div>
<div class="flex flex-row">
@ -183,14 +176,7 @@
<span class="text-orange-500">&#8592;</span> themes
</div>
</a>
<a
href="./python-client"
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
Python Client <span class="text-orange-500">&#8594;</span>
</div>
</a>
</div>
</div>
<div

0
js/_website/src/routes/[[version]]/docs/themes/+page.server.ts → js/_website/src/routes/[[version]]/docs/gradio/themes/+page.server.ts
View File

2
js/_website/src/routes/[[version]]/docs/themes/+page.svelte → js/_website/src/routes/[[version]]/docs/gradio/themes/+page.svelte
View File

@ -394,7 +394,7 @@
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
target="_blank"
href="..{guide.url}"
href="../..{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<p class="group-hover:underline text-l">

35
js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import DocsNav from "$lib/components/DocsNav.svelte";
import DocsNavCustom from "$lib/components/DocsNavCustom.svelte";
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
@ -28,16 +28,17 @@
<main class="container mx-auto px-4 flex gap-4">
<div class="flex w-full">
<DocsNav
current_nav_link={"js-client"}
{components}
{helpers}
{modals}
{routes}
{py_client}
<DocsNavCustom
items={{
Installation: "#installation",
Usage: "#usage",
client: "#client",
duplicate: "#duplicate"
}}
title={"JavaScript Client"}
/>
<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
<div class="flex flex-col w-full min-w-full lg:min-w-0">
<div>
<p
class="lg:ml-10 bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left"
@ -53,27 +54,15 @@
</p>
</div>
<div class="lg:ml-10 flex justify-between mt-4">
<a
href="./job"
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
<span class="text-orange-500">&#8592;</span> Job
</div>
</a>
</div>
<div class="lg:ml-10 flex justify-between mt-4"></div>
<div class="flex flex-row">
<div class="lg:w-3/4 lg:ml-10 lg:mr-24">
<div class=" lg:ml-10 lg:mr-24">
<div class="prose text-lg max-w-full">
{@html readme_html}
</div>
</div>
</div>
</div>
<div
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
></div>
</div>
</main>

18
js/_website/src/routes/[[version]]/docs/python-client/+page.server.ts
View File

@ -1,14 +1,8 @@
export async function load({ parent }) {
const { components, helpers, modals, py_client, routes, on_main, wheel } =
await parent();
import { redirect } from "@sveltejs/kit";
return {
components,
helpers,
modals,
routes,
py_client,
on_main,
wheel
};
export function load({ params }) {
if (params?.version)
throw redirect(302, `/${params?.version}/docs/python-client/intro`);
throw redirect(302, `/docs/python-client/intro`);
}

184
js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.server.ts Normal file
View File

@ -0,0 +1,184 @@
import Prism from "prismjs";
import "prismjs/components/prism-python";
import { make_slug_processor } from "$lib/utils";
import { error } from "@sveltejs/kit";
import { style_formatted_text } from "$lib/text";
let language = "python";
const COLOR_SETS = [
["from-green-100", "to-green-50"],
["from-yellow-100", "to-yellow-50"],
["from-red-100", "to-red-50"],
["from-blue-100", "to-blue-50"],
["from-pink-100", "to-pink-50"],
["from-purple-100", "to-purple-50"]
];
export async function load({ params, parent }) {
const {
docs,
components,
helpers,
modals,
py_client,
routes,
on_main,
wheel,
pages,
url_version
} = await parent();
let name = params.doc;
let obj;
let mode;
let headers = [];
let method_headers = [];
const get_slug = make_slug_processor();
let py_client_pages = ["intro", "client", "job"];
if (!py_client_pages.some((p: string) => p === params.doc)) {
throw error(404);
}
for (const key in py_client) {
if (py_client[key].name) {
py_client[key].slug = get_slug(py_client[key].name);
}
if (py_client[key].fns && py_client[key].fns.length) {
py_client[key].fns.forEach((fn: any) => {
if (fn.name) fn.slug = get_slug(`${py_client[key].name} ${fn.name}`);
});
}
if (key == name) {
obj = py_client[key];
mode = key;
if (obj.name == "Interface") {
obj.next_obj = "ChatInterface";
} else if (obj.name == "ChatInterface") {
obj.prev_obj = "Interface";
obj.next_obj = "TabbedInterface";
} else if (obj.name == "TabbedInterface") {
obj.prev_obj = "ChatInterface";
obj.next_obj = "Blocks";
} else if (obj.name == "Blocks") {
obj.prev_obj = "TabbedInterface";
obj.next_obj = "Row";
}
if ("description" in obj) {
headers.push(["Description", "description"]);
obj.description = style_formatted_text(obj.description);
}
if ("demos" in obj) {
obj.demos.forEach((demo: string[]) => {
demo.push(
Prism.highlight(demo[1], Prism.languages[language], "python")
);
});
}
if (obj.example) {
obj.highlighted_example = Prism.highlight(
obj.example,
Prism.languages[language],
"python"
);
headers.push(["Example Usage", "example-usage"]);
}
if (mode === "components") {
headers.push(["Behavior", "behavior"]);
}
if (
(obj.parameters.length > 0 && obj.parameters[0].name != "self") ||
obj.parameters.length > 1
) {
headers.push(["Initialization", "initialization"]);
}
if (mode === "components" && obj.string_shortcuts) {
headers.push(["Shortcuts", "shortcuts"]);
}
if ("demos" in obj) {
headers.push(["Demos", "demos"]);
}
if ("fns" in obj && obj.fns.length > 0) {
if (mode === "components") {
headers.push(["Event Listeners", "event-listeners"]);
} else {
headers.push(["Methods", "methods"]);
for (const fn of obj.fns) {
method_headers.push([fn.name, fn.slug]);
if (fn.example) {
fn.highlighted_example = Prism.highlight(
fn.example,
Prism.languages[language],
"python"
);
}
}
}
for (const fn of obj.fns) {
if ("description" in fn) {
fn.description = style_formatted_text(fn.description);
}
if (fn.parameters.length > 0) {
for (const param of fn.parameters) {
if (param.doc) {
param.doc = style_formatted_text(param.doc);
}
}
}
}
}
if ("tags" in obj) {
if ("preprocessing" in obj.tags) {
obj.tags.preprocessing = style_formatted_text(obj.tags.preprocessing);
}
if ("postprocessing" in obj.tags) {
obj.tags.postprocessing = style_formatted_text(
obj.tags.postprocessing
);
}
if ("examples_format" in obj.tags) {
obj.tags.examples_format = style_formatted_text(
obj.tags.examples_format
);
}
if ("events" in obj.tags) {
obj.tags.events = style_formatted_text(obj.tags.events);
}
}
if (obj.parameters.length > 0) {
for (const param of obj.parameters) {
if (param.doc) {
param.doc = style_formatted_text(param.doc);
}
}
}
}
}
return {
name,
obj,
mode,
components,
helpers,
modals,
routes,
py_client,
py_client_pages,
COLOR_SETS,
headers,
method_headers,
on_main,
wheel,
url_version
};
}

568
js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte Normal file
View File

@ -0,0 +1,568 @@
<script lang="ts">
import Demos from "$lib/components/Demos.svelte";
import DocsNav from "$lib/components/DocsNav.svelte";
import DocsNavCustom from "$lib/components/DocsNavCustom.svelte";
import FunctionDoc from "$lib/components/FunctionDoc.svelte";
import EventListeners from "$lib/components/EventListeners.svelte";
import MetaTags from "$lib/components/MetaTags.svelte";
import anchor from "$lib/assets/img/anchor.svg";
import { onDestroy } from "svelte";
import { page } from "$app/stores";
export let data: any = {};
let name: string = data.name;
let obj = data.obj;
let mode = data.mode;
let components = data.components;
let helpers = data.helpers;
let modals = data.modals;
let routes = data.routes;
let py_client = data.py_client;
let on_main: boolean;
let wheel: string = data.wheel;
let url_version: string = data.url_version;
let headers: [string, string][];
let method_headers: [string, string][];
$: headers = data.headers;
$: method_headers = data.method_headers;
let current_selection = 0;
let y: number;
let header_targets: { [key: string]: HTMLElement } = {};
let target_elem: HTMLElement;
onDestroy(() => {
header_targets = {};
});
$: for (const target in header_targets) {
target_elem = document.querySelector(`#${target}`) as HTMLElement;
if (
y > target_elem?.offsetTop - 50 &&
y < target_elem?.offsetTop + target_elem?.offsetHeight
) {
header_targets[target]?.classList.add("current-nav-link");
} else {
header_targets[target]?.classList.remove("current-nav-link");
}
}
$: obj = data.obj;
$: mode = data.mode;
$: on_main = data.on_main;
$: components = data.components;
$: helpers = data.helpers;
$: modals = data.modals;
$: routes = data.routes;
$: py_client = data.py_client;
$: url_version = data.url_version;
</script>
<MetaTags
title={"Gradio " + obj.name + " Docs"}
url={$page.url.pathname}
canonical={$page.url.pathname}
description={obj.description}
/>
<svelte:window bind:scrollY={y} />
<main class="container mx-auto px-4 flex gap-4">
<div class="flex w-full">
<DocsNavCustom
current_nav_link={obj.name}
items={{
Intro: "intro",
Client: "client",
Job: "job"
}}
title={"Python Client"}
/>
<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
<div>
<p
class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left lg:ml-10"
>
New to Gradio? Start here: <a class="link" href="/quickstart"
>Getting Started</a
>
</p>
<p
class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right"
>
See the <a class="link" href="/changelog">Release History</a>
</p>
</div>
{#if on_main}
<div
class="bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4 rounded-lg lg:ml-10"
>
<p class="my-2">
To install Gradio from main, run the following command:
</p>
<div class="codeblock">
<pre class="language-bash" style="padding-right: 50px;"><code
class="language-bash">pip install {wheel}</code
></pre>
</div>
<p class="float-right text-sm">
*Note: Setting <code style="font-size: 0.85rem">share=True</code> in
<code style="font-size: 0.85rem">launch()</code> will not work.
</p>
</div>
{/if}
<div class="flex justify-between mt-4 lg:ml-10">
{#if obj.prev_obj}
<a
href="./{obj.prev_obj.toLowerCase()}"
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
<span class="text-orange-500">&#8592;</span>
{obj.prev_obj.replace("-", " ")}
</div>
</a>
{:else}
<div />
{/if}
{#if obj.next_obj}
<a
href="./{obj.next_obj.toLowerCase()}"
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
{obj.next_obj.replace("-", " ")}
<span class="text-orange-500">&#8594;</span>
</div>
</a>
{:else}
<div />
{/if}
</div>
<div class="flex flex-row">
<div class="lg:ml-10">
<div class="obj" id={obj.slug}>
<div class="flex flex-row items-center justify-between">
<h3 id="{obj.slug}-header" class="group text-3xl font-light py-4">
{obj.name}
<a
href="#{obj.slug}-header"
class="invisible group-hover-visible"
><img class="anchor-img" src={anchor} /></a
>
</h3>
</div>
<div class="codeblock">
{#if obj.override_signature}
<pre><code class="code language-python"
>{obj.override_signature}</code
></pre>
{:else}
<pre><code class="code language-python"
>{obj.parent}.<span>{obj.name}&lpar;</span
><!--
-->{#each obj.parameters as param}<!--
-->{#if !("kwargs" in param) && !("default" in param) && param.name != "self"}<!--
-->{param.name}, <!--
-->{/if}<!--
-->{/each}<!--
-->···<span
>&rpar;</span
></code
></pre>
{/if}
</div>
{#if mode === "components"}
<div class="embedded-component">
{#key obj.name}
{#if obj.name !== "State"}
{#if url_version === "main"}
<gradio-app
space={"gradio/" +
obj.name.toLowerCase() +
"_component_main"}
/>
{:else if url_version === "3.50.2"}
<gradio-app
space={"gradio/" +
obj.name.toLowerCase() +
"_component_3-x"}
/>
{:else}
<gradio-app
space={"gradio/" +
obj.name.toLowerCase() +
"_component"}
/>
{/if}
{/if}
{/key}
</div>
{/if}
<div id="description">
<h4 class="mt-8 text-xl text-orange-500 font-light group">
Description
<a href="#description" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<p class="mb-2 text-lg text-gray-600">{@html obj.description}</p>
</div>
{#if mode === "components"}
<div id="behavior">
<h4 class="mt-4 text-xl text-orange-500 font-light group">
Behavior
<a href="#behavior" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<p class="text-lg text-gray-500">
<span class="text-gray-700">As input: </span>
{@html obj.tags.preprocessing}
</p>
<p class="text-lg text-gray-500">
<span class="text-gray-700">As output:</span>
{@html obj.tags.postprocessing}
</p>
{#if obj.tags.examples_format}
<p class="text-lg text-gray-500">
<span class="text-gray-700"
>Format expected for examples:</span
>
{@html obj.tags.examples_format}
</p>
{/if}
{#if obj.tags.events && obj.tags.events.length > 0}
<p class="text-lg text-gray-500">
<span class="text-gray-700">Supported events:</span>
<em>{@html obj.tags.events}</em>
</p>
{/if}
</div>
{/if}
{#if obj.example}
<div id="example-usage">
<h4 class="mt-4 text-xl text-orange-500 font-light group">
Example Usage
<a href="#example-usage" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<div class="codeblock">
<pre><code class="code language-python"
>{@html obj.highlighted_example}</code
></pre>
</div>
</div>
{/if}
{#if (obj.parameters.length > 0 && obj.parameters[0].name != "self") || obj.parameters.length > 1}
<div id="initialization">
<h4 class="mt-6 text-xl text-orange-500 font-light group">
Initialization
<a
href="#initialization"
class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<table class="table-fixed w-full leading-loose">
<thead class="text-left">
<tr>
<th class="px-3 pb-3 w-2/5 text-gray-700 font-semibold"
>Parameter</th
>
<th class="px-3 pb-3 text-gray-700 font-semibold"
>Description</th
>
</tr>
</thead>
<tbody
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
>
{#each obj.parameters as param}
{#if param["name"] != "self"}
<tr
class="group hover:bg-gray-200/60 odd:bg-gray-100/80"
>
<td class="p-3 w-2/5 break-words">
<code class="block">
{param["name"]}
</code>
<p class="text-gray-500 italic">
{param["annotation"]}
</p>
{#if "default" in param}
<p class="text-gray-500 font-semibold">
default: {param["default"]}
</p>
{:else if !("kwargs" in param)}
<p class="text-orange-600 font-semibold italic">
required
</p>
{/if}
</td>
<td class="p-3 text-gray-700 break-words">
<p>{@html param["doc"] || ""}</p>
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
</div>
{/if}
{#if mode === "components" && obj.string_shortcuts}
<div id="shortcuts">
<h4 class="mt-6 text-xl text-orange-500 font-light group">
Shortcuts
<a href="#shortcuts" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<table class="mb-4 table-fixed w-full">
<thead class="text-left">
<tr>
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
>Class</th
>
<th class="px-3 pb-3 text-gray-700 font-semibold"
>Interface String Shortcut</th
>
<th class="px-3 pb-3 text-gray-700 font-semibold"
>Initialization</th
>
</tr>
</thead>
<tbody
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
>
{#each obj.string_shortcuts as shortcut}
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
<td class="p-3 w-2/5 break-words">
<p>
<code class="lang-python">gradio.{shortcut[0]}</code
>
</p>
</td>
<td class="p-3 w-2/5 break-words">
<p>"{shortcut[1]}"</p>
</td>
<td class="p-3 text-gray-700 break-words">
{shortcut[2]}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
{#if obj.demos}
<div id="demos">
<div class="category my-8" id="examples">
<h4 class="text-xl text-orange-500 font-light group">
Demos
<a href="#demos" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<div>
<div class="demo-window overflow-y-auto h-full w-full mb-4">
<div
class="relative mx-auto my-auto rounded-md bg-white"
style="top: 5%; height: 90%"
>
<div class="flex overflow-auto pt-4">
{#each obj.demos as demo, i}
<button
on:click={() => (current_selection = i)}
class:selected-demo-tab={current_selection == i}
class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
name={demo[0]}>{demo[0]}</button
>
{/each}
</div>
{#each obj.demos as demo, i}
<div
class:hidden={current_selection !== i}
class:selected-demo-window={current_selection == i}
class="demo-content px-4"
>
<Demos
name={demo[0]}
code={demo[1]}
highlighted_code={demo[2]}
{url_version}
/>
</div>
{/each}
</div>
</div>
</div>
</div>
</div>
{/if}
{#if obj.fns && obj.fns.length > 0}
{#if mode === "components"}
<div id="event-listeners">
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
Event Listeners
<a
href="#event-listeners"
class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<div class="flex flex-col gap-8 pl-12">
<EventListeners fns={obj.fns} />
<div class="ml-12" />
</div>
</div>
{:else}
<div id="methods">
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
Methods
<a href="#methods" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<div class="flex flex-col gap-8 pl-12">
{#each obj.fns as fn}
<FunctionDoc {fn} />
{/each}
<div class="ml-12" />
</div>
</div>
{/if}
{/if}
{#if obj.guides && obj.guides.length > 0}
<div id="guides">
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
Guides
<a href="#guides" class="invisible group-hover-visible"
><img class="anchor-img-small" src={anchor} /></a
>
</h4>
<div
class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4 pb-3 px-3"
>
{#each obj.guides as guide, i}
<a
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
target="_blank"
href={guide.url}
>
<div class="flex flex-col p-4 h-min">
<p class="group-hover:underline text-l">
{guide.pretty_name}
</p>
</div>
</a>
{/each}
</div>
</div>
{/if}
</div>
</div>
</div>
<div class="lg:ml-10 flex justify-between my-4">
{#if obj.prev_obj}
<a
href="./{obj.prev_obj.toLowerCase()}"
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
<span class="text-orange-500">&#8592;</span>
{obj.prev_obj.replace("-", " ")}
</div>
</a>
{:else}
<div />
{/if}
{#if obj.next_obj}
<a
href="./{obj.next_obj.toLowerCase()}"
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
{obj.next_obj.replace("-", " ")}
<span class="text-orange-500">&#8594;</span>
</div>
</a>
{:else}
<div />
{/if}
</div>
</div>
<div
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:block lg:w-2/12"
>
<div class="mx-8">
<a class="thin-link py-2 block text-lg" href="#{obj.slug}">{obj.name}</a
>
{#if headers.length > 0}
<ul class="text-slate-700 text-lg leading-6">
{#each headers as header}
<li>
<a
bind:this={header_targets[header[1]]}
href="#{header[1]}"
class="thin-link block py-2 font-light second-nav-link"
>{header[0]}</a
>
</li>
{/each}
{#if method_headers.length > 0}
{#each method_headers as method_header}
<li class="">
<a
bind:this={header_targets[method_header[1]]}
href="#{method_header[1]}"
class="thin-link block py-2 font-light second-nav-link sub-link"
>&nbsp&nbsp&nbsp&nbsp{method_header[0]}</a
>
</li>
{/each}
{/if}
{#if obj.guides && obj.guides.length > 0}
<li>
<a
bind:this={header_targets["guides"]}
href="#guides"
class="thin-link block py-2 font-light second-nav-link"
>Guides</a
>
</li>
{/if}
</ul>
{/if}
</div>
</div>
</div>
</main>
<style>
.sub-link {
border-color: #f3f4f6 !important;
}
</style>

22
js/_website/src/routes/[[version]]/docs/python-client/intro/+page.server.ts Normal file
View File

@ -0,0 +1,22 @@
export async function load({ parent }) {
const {
components,
helpers,
modals,
py_client,
py_client_pages,
routes,
on_main,
wheel
} = await parent();
return {
components,
helpers,
modals,
routes,
py_client,
on_main,
wheel
};
}

27
js/_website/src/routes/[[version]]/docs/python-client/+page.svelte → js/_website/src/routes/[[version]]/docs/python-client/intro/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import DocsNav from "$lib/components/DocsNav.svelte";
import DocsNavCustom from "$lib/components/DocsNavCustom.svelte";
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
@ -30,13 +31,14 @@
<main class="container mx-auto px-4 flex gap-4">
<div class="flex w-full">
<DocsNav
current_nav_link={"python-client"}
{components}
{helpers}
{modals}
{routes}
{py_client}
<DocsNavCustom
current_nav_link={"Intro"}
items={{
Intro: "intro",
Client: "client",
Job: "job"
}}
title={"Python Client"}
/>
<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
@ -75,16 +77,9 @@
{/if}
<div class="lg:ml-10 flex justify-between mt-4">
<div />
<a
href="./no-reload"
class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">
<span class="text-orange-500">&#8592;</span> NO_RELOAD
</div>
</a>
<a
href="./client"
href="client"
class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
>
<div class="text-lg">

56
js/_website/src/routes/[[version]]/guides/+page.server.ts
View File

@ -1,57 +1,7 @@
import { redirect } from "@sveltejs/kit";
import * as version from "$lib/json/version.json";
const COLOR_SETS = [
["from-green-100", "to-green-50"],
["from-yellow-100", "to-yellow-50"],
["from-red-100", "to-red-50"],
["from-blue-100", "to-blue-50"],
["from-pink-100", "to-pink-50"],
["from-purple-100", "to-purple-50"],
["from-green-100", "to-green-50"],
["from-yellow-100", "to-yellow-50"],
["from-red-100", "to-red-50"],
["from-blue-100", "to-blue-50"],
["from-pink-100", "to-pink-50"],
["from-purple-100", "to-purple-50"]
];
export function load({ params }) {
if (params?.version) throw redirect(302, `/${params?.version}/docs`);
const DOCS_BUCKET = "https://gradio-docs-json.s3.us-west-2.amazonaws.com";
const VERSION = version.version;
async function load_release_guide_categories(
version: string
): Promise<typeof import("$lib/json/guides/guides_by_category.json")> {
let docs_json = await fetch(
`${DOCS_BUCKET}/${version}/guides/guides_by_category.json`
);
return await docs_json.json();
}
async function load_main_guide_categories() {
return await import(`../../../lib/json/guides/guides_by_category.json`);
}
export async function load({ params, url }) {
if (params?.version === VERSION) {
throw redirect(302, url.href.replace(`/${params.version}`, ""));
}
let guides_by_category = (
params?.version === "main"
? await load_main_guide_categories()
: await load_release_guide_categories(params?.version || VERSION)
).guides_by_category;
let total_guides = 0;
for (const category in guides_by_category) {
for (const guide in guides_by_category[category].guides) {
total_guides += 1;
}
}
return {
guides_by_category,
total_guides,
COLOR_SETS
};
throw redirect(302, `/docs`);
}

115
js/_website/src/routes/[[version]]/guides/+page.svelte
View File

@ -1,115 +0,0 @@
<script lang="ts">
import MetaTags from "$lib/components/MetaTags.svelte";
import { page } from "$app/stores";
export let data: {
[key: string]: any;
};
let search_query = "";
function search() {
for (const category in data.guides_by_category) {
for (const guide in data.guides_by_category[category].guides) {
let g = data.guides_by_category[category].guides[guide];
data.guides_by_category[category].guides[guide].hidden = !(
g.pretty_name.toLowerCase().includes(search_query.toLowerCase()) ||
g.content.toLowerCase().includes(search_query.toLowerCase())
);
}
}
}
function isNotHidden(guide: any) {
return !guide.hidden;
}
function categoryNotHidden(category: any) {
return category.guides.filter(isNotHidden).length !== 0;
}
import DropDown from "$lib/components/VersionDropdown.svelte";
$: console.log(data);
</script>
<MetaTags
title="Gradio Guides"
url={$page.url.pathname}
canonical={$page.url.pathname}
description="Step-by-Step Gradio Tutorials"
/>
<div class="container mx-auto px-4 relative pt-8 mb-0">
<input
id="search-by-tag"
type="text"
class="w-full border border-gray-200 p-1 rounded-md outline-none text-center text-lg mb-1 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
placeholder="What do you want to build?"
autocomplete="off"
bind:value={search_query}
on:keyup={search}
/>
<div class="text-gray-600 mb-0 mx-auto w-fit text-sm">
Search through
<span id="counter">{data.total_guides}</span>
Guides.
<a
class="link text-gray-600"
href="https://github.com/gradio-app/gradio/tree/main/guides/CONTRIBUTING.md"
>Contribute here</a
>
</div>
<div class="mt-[-28px] mb-[28px] flex justify-end">
<DropDown />
</div>
{#each data.guides_by_category as { category, guides }, i (category)}
<div class="category mb-8 p-4">
<h2
class:hidden={guides.filter(isNotHidden).length === 0}
class="mb-4 text-2xl font-thin block"
>
{category}
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
{#each guides as guide (guide.name)}
<a
class:hidden={guide.hidden}
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
href=".{guide.url}"
>
<div class="flex flex-col p-4 h-min">
<h2 class="group-hover:underline text-lg">
{guide.pretty_name}
</h2>
<div class="tags-holder">
{#if guide.tags}
<p class="text-gray-600">
<!--
-->{#each guide.tags as tag, j (tag)}<!--
-->{tag}{#if j !== guide.tags.length - 1},&nbsp;{/if}<!--
-->{/each}<!--
-->
</p>
{/if}
</div>
</div>
</a>
{/each}
</div>
</div>
{/each}
<div
class:hidden={data.guides_by_category.filter(categoryNotHidden).length !==
0}
class="no-guides hidden text-center text-xl text-gray-500"
>
<p class="mb-4">Sorry, we couldn't find a guide with this query...</p>
<p>
Try a different term, or <a class="link" href="/docs">see the docs</a>
</p>
</div>
</div>

74
js/_website/src/routes/redirects.js
View File

@ -107,5 +107,77 @@ export const redirects = {
"/guides/getting-started-with-the-js-client",
"/gradio-and-llm-agents": "/guides/gradio-and-llm-agents",
"/fastapi-app-with-the-gradio-client":
"/guides/fastapi-app-with-the-gradio-client"
"/guides/fastapi-app-with-the-gradio-client",
"/docs/client": "/docs/python-client/client",
"/docs/job": "/docs/python-client/job",
"/docs/set_static_paths": "/docs/gradio/set_static_paths",
"/docs/eventdata": "/docs/gradio/eventdata",
"/docs/examples": "/docs/gradio/examples",
"/docs/progress": "/docs/gradio/progress",
"/docs/make_waveform": "/docs/gradio/make_waveform",
"/docs/load": "/docs/gradio/load",
"/docs/error": "/docs/gradio/error",
"/docs/warning": "/docs/gradio/warning",
"/docs/info": "/docs/gradio/info",
"/docs/flagging": "/docs/gradio/flagging",
"/docs/request": "/docs/gradio/request",
"/docs/mount_gradio_app": "/docs/gradio/mount_gradio_app",
"/docs/base": "/docs/gradio/base",
"/docs/queue": "/docs/gradio/queue",
"/docs/blocks": "/docs/gradio/blocks",
"/docs/accordion": "/docs/gradio/accordion",
"/docs/column": "/docs/gradio/column",
"/docs/row": "/docs/gradio/row",
"/docs/group": "/docs/gradio/group",
"/docs/tab": "/docs/gradio/tab",
"/docs/annotatedimage": "/docs/gradio/annotatedimage",
"/docs/audio": "/docs/gradio/audio",
"/docs/barplot": "/docs/gradio/barplot",
"/docs/button": "/docs/gradio/button",
"/docs/chatbot": "/docs/gradio/chatbot",
"/docs/checkbox": "/docs/gradio/checkbox",
"/docs/checkboxgroup": "/docs/gradio/checkboxgroup",
"/docs/clearbutton": "/docs/gradio/clearbutton",
"/docs/code": "/docs/gradio/code",
"/docs/colorpicker": "/docs/gradio/colorpicker",
"/docs/dataframe": "/docs/gradio/dataframe",
"/docs/dataset": "/docs/gradio/dataset",
"/docs/downloadbutton": "/docs/gradio/downloadbutton",
"/docs/dropdown": "/docs/gradio/dropdown",
"/docs/duplicatebutton": "/docs/gradio/duplicatebutton",
"/docs/file": "/docs/gradio/file",
"/docs/fileexplorer": "/docs/gradio/fileexplorer",
"/docs/gallery": "/docs/gradio/gallery",
"/docs/html": "/docs/gradio/html",
"/docs/highlightedtext": "/docs/gradio/highlightedtext",
"/docs/image": "/docs/gradio/image",
"/docs/imageeditor": "/docs/gradio/imageeditor",
"/docs/json": "/docs/gradio/json",
"/docs/label": "/docs/gradio/label",
"/docs/lineplot": "/docs/gradio/lineplot",
"/docs/loginbutton": "/docs/gradio/loginbutton",
"/docs/logoutbutton": "/docs/gradio/logoutbutton",
"/docs/markdown": "/docs/gradio/markdown",
"/docs/model3d": "/docs/gradio/model3d",
"/docs/multimodaltextbox": "/docs/gradio/multimodaltextbox",
"/docs/number": "/docs/gradio/number",
"/docs/paramviewer": "/docs/gradio/paramviewer",
"/docs/plot": "/docs/gradio/plot",
"/docs/radio": "/docs/gradio/radio",
"/docs/scatterplot": "/docs/gradio/scatterplot",
"/docs/simpleimage": "/docs/gradio/simpleimage",
"/docs/slider": "/docs/gradio/slider",
"/docs/state": "/docs/gradio/state",
"/docs/textbox": "/docs/gradio/textbox",
"/docs/uploadbutton": "/docs/gradio/uploadbutton",
"/docs/video": "/docs/gradio/video",
"/docs/chatinterface": "/docs/gradio/chatinterface",
"/docs/interface": "/docs/gradio/interface",
"/docs/tabbedinterface": "/docs/gradio/tabbedinterface",
"/docs/themes": "/docs/gradio/themes",
"/docs/no-reload": "/docs/gradio/no-reload",
"/docs/python-client/python-client": "/docs/python-client/intro",
"/docs/python-client/js-client": "/docs/js-client",
"/3.50.2/docs/python-client/python-client": "/docs/python-client/intro",
"/3.50.2/docs/python-client/js-client": "/docs/js-client"
};

9
js/_website/svelte.config.js
View File

@ -49,11 +49,16 @@ const config = {
`/${version}/guides`,
`/main/docs`,
`/main/guides`,
`/3.50.2/docs`,
`/3.50.2/docs/gradio/interface`,
`/3.50.2/docs/python-client/intro`,
`/docs/js`,
`/docs/js/storybook`,
`/docs/js/`,
`/main/docs/js`,
`/main/docs/js/storybook`,
`/main/docs/js/`,
`/3.50.2/docs`,
`/3.50.2/guides`,
...Object.keys(redirects)
]
},

210
pnpm-lock.yaml generated
View File

@ -276,8 +276,8 @@ importers:
js/_website:
dependencies:
'@gradio/code':
specifier: 0.5.12
version: link:../code
specifier: 0.5.11
version: 0.5.11(svelte@3.59.2)
'@sindresorhus/slugify':
specifier: ^2.2.0
version: 2.2.0
@ -289,7 +289,7 @@ importers:
version: 3.0.0
mdsvex:
specifier: ^0.11.0
version: 0.11.0(svelte@4.2.12)
version: 0.11.0(svelte@3.59.2)
postcss:
specifier: '>=8.3.3 <9.0.0'
version: 8.4.31
@ -302,7 +302,7 @@ importers:
version: 2.0.2(@sveltejs/kit@1.27.6)
'@sveltejs/kit':
specifier: ^1.27.6
version: 1.27.6(svelte@4.2.12)(vite@4.5.3)
version: 1.27.6(svelte@3.59.2)(vite@4.5.3)
'@tailwindcss/forms':
specifier: ^0.5.0
version: 0.5.0(tailwindcss@3.1.6)
@ -4683,6 +4683,125 @@ packages:
tslib: 2.6.2
dev: false
/@gradio/atoms@0.6.2(svelte@3.59.2):
resolution: {integrity: sha512-1HlNIX3XzPJEakv9RB5Cn7l/GH618qDtfb30YR7CBw8lljXvn/i1nBCG+DO1mdoNfRA3x/pc3vM7X3G6cuh4PQ==}
dependencies:
'@gradio/icons': 0.3.4
'@gradio/utils': 0.3.2(svelte@3.59.2)
transitivePeerDependencies:
- svelte
dev: false
/@gradio/atoms@0.7.0(svelte@3.59.2):
resolution: {integrity: sha512-ib4Ij/hinlVth8Co2UHFRoHcPpWCMXtUEYobIgyPmJ6b4pKglDgohl0NoFtS0iOxf+Yl1eKTXc8JWgohSwSyrw==}
dependencies:
'@gradio/icons': 0.4.0
'@gradio/utils': 0.3.2(svelte@3.59.2)
transitivePeerDependencies:
- svelte
dev: false
/@gradio/client@0.16.0:
resolution: {integrity: sha512-kjPTumW/JNnEiHnqon7QLCCajYwTVQbB95GuVY4u1P+Xq2AyASx3dqupz5OAelC8qwr0ZuQybAFUa87/vIGpxg==}
engines: {node: '>=18.0.0'}
dependencies:
bufferutil: 4.0.7
semiver: 1.1.0
ws: 8.16.0(bufferutil@4.0.7)
transitivePeerDependencies:
- utf-8-validate
dev: false
/@gradio/code@0.5.11(svelte@3.59.2):
resolution: {integrity: sha512-LJSOaXPlpgfeucfjUowW+SVSrHsR1UIsW3UpYcIyZKHjMbwCl7G82SeByfNUQXb9sEiDX8N8Du74virv3P1Edw==}
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.6.2(svelte@3.59.2)
'@gradio/icons': 0.3.4
'@gradio/statustracker': 0.4.12(svelte@3.59.2)
'@gradio/upload': 0.8.5(svelte@3.59.2)
'@gradio/utils': 0.3.2(svelte@3.59.2)
'@gradio/wasm': 0.10.0
'@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:
resolution: {integrity: sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw==}
dev: false
/@gradio/icons@0.3.4:
resolution: {integrity: sha512-rtH7u3OiYy9UuO1bnebXkTXgc+D62H6BILrMtM4EfsKGgQQICD0n7NPvbPtS0zpi/fz0ppCdlfFIKKIOeVaeFg==}
dev: false
/@gradio/icons@0.4.0:
resolution: {integrity: sha512-yQqmgNql1HzN/+NG6EfRBWTyXA7zxKwtKYfP8jiVo1LZXlfd+oUt8pSrUfLGiGgqTsoMUXsbmdQpifVVg9U6yA==}
dev: false
/@gradio/statustracker@0.4.12(svelte@3.59.2):
resolution: {integrity: sha512-wQxbJANz314H0VUGlW71KApqI/iBF4znIBbj2XFyPICB43LZXyO2X9wKSN1JcbIm3ArSQ3qC1PNkbDtSutIhFA==}
dependencies:
'@gradio/atoms': 0.7.0(svelte@3.59.2)
'@gradio/column': 0.1.0
'@gradio/icons': 0.4.0
'@gradio/utils': 0.3.2(svelte@3.59.2)
transitivePeerDependencies:
- svelte
dev: false
/@gradio/theme@0.2.2:
resolution: {integrity: sha512-aOjh7+BWK8WRpQBC2leFZBLyek6D0GO9KkWjystoZRwH1r+l6eBli2BDPPO/ljpJChO3HsOFpJsWA97JjQNe2g==}
dev: false
/@gradio/upload@0.8.5(svelte@3.59.2):
resolution: {integrity: sha512-otIXSVI04lx9zQ4J1obbajjUsCqcx8qwJcUztlE9iZ0n+XvrP9PUzyVlwx5AmUteZgIPdWBXgxLwsuNDOdlROg==}
dependencies:
'@gradio/atoms': 0.7.0(svelte@3.59.2)
'@gradio/client': 0.16.0
'@gradio/icons': 0.4.0
'@gradio/utils': 0.3.2(svelte@3.59.2)
'@gradio/wasm': 0.10.0
transitivePeerDependencies:
- svelte
- utf-8-validate
dev: false
/@gradio/utils@0.3.2(svelte@3.59.2):
resolution: {integrity: sha512-jhBOMbNprctFEo+h394cfaE5M/EuF/0puJaXuH5P8dGXSoRmxwBmhrPYwG3MoMOwCNMB52zZlWrEGZ7VfPmBLw==}
dependencies:
'@gradio/theme': 0.2.2
svelte-i18n: 3.6.0(svelte@3.59.2)
transitivePeerDependencies:
- svelte
dev: false
/@gradio/wasm@0.10.0:
resolution: {integrity: sha512-ephuiuimvMad6KzNPz/3OdnjgE5wsJdVfAAqu+J0qloetbH42LfeRLsVe5WqGo2WpjzXq5MC8I8MJ7lpQMhUpw==}
dependencies:
'@types/path-browserify': 1.0.0
path-browserify: 1.0.1
dev: false
/@humanwhocodes/config-array@0.11.13:
resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
engines: {node: '>=10.10.0'}
@ -6294,7 +6413,7 @@ packages:
util: 0.12.5
util-deprecate: 1.0.2
watchpack: 2.4.0
ws: 8.16.0
ws: 8.16.0(bufferutil@4.0.7)
transitivePeerDependencies:
- bufferutil
- encoding
@ -6587,7 +6706,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.0.0
dependencies:
'@sveltejs/kit': 1.27.6(svelte@4.2.12)(vite@4.5.3)
'@sveltejs/kit': 1.27.6(svelte@3.59.2)(vite@4.5.3)
import-meta-resolve: 2.2.2
dev: true
@ -6596,7 +6715,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.5.0
dependencies:
'@sveltejs/kit': 1.27.6(svelte@4.2.12)(vite@4.5.3)
'@sveltejs/kit': 1.27.6(svelte@3.59.2)(vite@4.5.3)
dev: true
/@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.27.6):
@ -6604,7 +6723,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.5.0
dependencies:
'@sveltejs/kit': 1.27.6(svelte@4.2.12)(vite@4.5.3)
'@sveltejs/kit': 1.27.6(svelte@3.59.2)(vite@4.5.3)
'@vercel/nft': 0.23.1
esbuild: 0.18.20
transitivePeerDependencies:
@ -6640,7 +6759,7 @@ packages:
- supports-color
dev: true
/@sveltejs/kit@1.27.6(svelte@4.2.12)(vite@4.5.3):
/@sveltejs/kit@1.27.6(svelte@3.59.2)(vite@4.5.3):
resolution: {integrity: sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==}
engines: {node: ^16.14 || >=18}
hasBin: true
@ -6649,7 +6768,7 @@ packages:
svelte: ^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0
vite: ^4.0.0
dependencies:
'@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.12)(vite@4.5.3)
'@sveltejs/vite-plugin-svelte': 2.5.2(svelte@3.59.2)(vite@4.5.3)
'@types/cookie': 0.5.4
cookie: 0.5.0
devalue: 4.3.2
@ -6660,13 +6779,28 @@ packages:
sade: 1.8.1
set-cookie-parser: 2.6.0
sirv: 2.0.3
svelte: 4.2.12
svelte: 3.59.2
tiny-glob: 0.2.9
undici: 5.26.5
vite: 4.5.3(@types/node@20.3.2)
transitivePeerDependencies:
- supports-color
/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@3.59.2)(vite@4.5.3):
resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
engines: {node: ^14.18.0 || >= 16}
peerDependencies:
'@sveltejs/vite-plugin-svelte': ^2.2.0
svelte: ^3.54.0 || ^4.0.0
vite: ^4.0.0
dependencies:
'@sveltejs/vite-plugin-svelte': 2.5.2(svelte@3.59.2)(vite@4.5.3)
debug: 4.3.4
svelte: 3.59.2
vite: 4.5.3(@types/node@20.3.2)
transitivePeerDependencies:
- supports-color
/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.12)(vite@4.5.3):
resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
engines: {node: ^14.18.0 || >= 16}
@ -6681,6 +6815,7 @@ packages:
vite: 4.5.3(@types/node@20.3.2)
transitivePeerDependencies:
- supports-color
dev: true
/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.2)(vite@4.3.9):
resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
@ -6713,6 +6848,25 @@ packages:
- supports-color
dev: false
/@sveltejs/vite-plugin-svelte@2.5.2(svelte@3.59.2)(vite@4.5.3):
resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
engines: {node: ^14.18.0 || >= 16}
peerDependencies:
svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
vite: ^4.0.0
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@3.59.2)(vite@4.5.3)
debug: 4.3.4
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.5
svelte: 3.59.2
svelte-hmr: 0.15.3(svelte@3.59.2)
vite: 4.5.3(@types/node@20.3.2)
vitefu: 0.2.5(vite@4.5.3)
transitivePeerDependencies:
- supports-color
/@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.12)(vite@4.5.3):
resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
engines: {node: ^14.18.0 || >= 16}
@ -6731,6 +6885,7 @@ packages:
vitefu: 0.2.5(vite@4.5.3)
transitivePeerDependencies:
- supports-color
dev: true
/@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.2)(vite@4.3.9):
resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
@ -8045,7 +8200,6 @@ packages:
requiresBuild: true
dependencies:
node-gyp-build: 4.6.1
dev: false
/builtin-modules@3.3.0:
resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
@ -11262,7 +11416,7 @@ packages:
whatwg-encoding: 3.1.1
whatwg-mimetype: 4.0.0
whatwg-url: 14.0.0
ws: 8.16.0
ws: 8.16.0(bufferutil@4.0.7)
xml-name-validator: 5.0.0
transitivePeerDependencies:
- bufferutil
@ -11616,7 +11770,6 @@ packages:
resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
dev: false
/magic-string@0.30.5:
resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
@ -11630,12 +11783,6 @@ packages:
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
/magic-string@0.30.8:
resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
/make-dir@2.1.0:
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
engines: {node: '>=6'}
@ -11704,7 +11851,7 @@ packages:
/mdn-data@2.0.30:
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
/mdsvex@0.11.0(svelte@4.2.12):
/mdsvex@0.11.0(svelte@3.59.2):
resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==}
peerDependencies:
svelte: '>=3 <5'
@ -11712,7 +11859,7 @@ packages:
'@types/unist': 2.0.10
prism-svelte: 0.4.7
prismjs: 1.29.0
svelte: 4.2.12
svelte: 3.59.2
vfile-message: 2.0.4
dev: false
@ -12066,7 +12213,6 @@ packages:
/node-gyp-build@4.6.1:
resolution: {integrity: sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==}
hasBin: true
dev: false
/node-html-parser@6.0.0:
resolution: {integrity: sha512-o4vS5Jm7ZdV5WN4/jHmCEVJOpm4exLCeXOcZnNzXi0BGv0AS8FsGwyQ4k0Ujmui1NMQs6qsTy+amjjpr9rmz4Q==}
@ -12959,7 +13105,7 @@ packages:
resolution: {integrity: sha512-RagtX3TfV2M0QAfThG2SMvwE31ikqAFDUXc5/4xhppEoVf4VbL7L0kbKOIdSNg7MbVsHELVxftk66WvT926GpA==}
dependencies:
base-64: 1.0.0
ws: 8.16.0
ws: 8.16.0(bufferutil@4.0.7)
transitivePeerDependencies:
- bufferutil
- utf-8-validate
@ -14007,6 +14153,14 @@ packages:
svelte: 4.2.2
dev: false
/svelte-hmr@0.15.3(svelte@3.59.2):
resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
peerDependencies:
svelte: ^3.19.0 || ^4.0.0
dependencies:
svelte: 3.59.2
/svelte-hmr@0.15.3(svelte@4.2.12):
resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
@ -14014,6 +14168,7 @@ packages:
svelte: ^3.19.0 || ^4.0.0
dependencies:
svelte: 4.2.12
dev: true
/svelte-hmr@0.15.3(svelte@4.2.2):
resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
@ -14294,7 +14449,6 @@ packages:
/svelte@3.59.2:
resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
engines: {node: '>= 8'}
dev: false
/svelte@4.2.12:
resolution: {integrity: sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==}
@ -14312,7 +14466,7 @@ packages:
estree-walker: 3.0.3
is-reference: 3.0.2
locate-character: 3.0.0
magic-string: 0.30.8
magic-string: 0.30.10
periscopic: 3.1.0
/svelte@4.2.2:
@ -15855,7 +16009,7 @@ packages:
bufferutil: 4.0.7
dev: false
/ws@8.16.0:
/ws@8.16.0(bufferutil@4.0.7):
resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
engines: {node: '>=10.0.0'}
peerDependencies:
@ -15866,6 +16020,8 @@ packages:
optional: true
utf-8-validate:
optional: true
dependencies:
bufferutil: 4.0.7
/xml-name-validator@5.0.0:
resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}