Add docs for Rust client to website (#8908)

* add third party client docs

* formatting

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/loud-needles-go.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Add docs for Rust client to website

js/_website/generate_jsons/src/docs/__init__.py

@@ -193,7 +193,7 @@ def organize_docs(d):
     
     
     def organize_pages(): 
-        pages = {"gradio": [], "python-client": []}
+        pages = {"gradio": [], "python-client": [], "third-party-clients": []}
         absolute_index = -1;
         for library in pages:
             library_templates_dir = os.path.join(TEMPLATES_DIR, library)
@@ -210,17 +210,6 @@ def organize_docs(d):
 
     pages = organize_pages()
 
-    # content_json = {}
-    # def generate_content_json(pages): 
-    #     for library in pages: 
-    #         for category in pages[library]: 
-    #             for page in category["pages"]: 
-    #                 page_path = os.path.join(TEMPLATES_DIR, page["path"] + ".svx")
-    #                 with open(page_path) as f:
-    #                     content = f.read()
-    #                 content_json["content"] = content
-
-
     organized["gradio"]["events_matrix"] = component_events
     organized["gradio"]["events"] = events
 

js/_website/src/lib/components/DocsNav.svelte

@@ -4,6 +4,7 @@
 
 	export let library_pages: any;
 	export let current_nav_link = "";
+	export let show_dropdown = true;
 
 	let show_nav = false;
 	import DropDown from "$lib/components/VersionDropdown.svelte";
@@ -54,11 +55,13 @@
 		>
 	</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"
-	>
-		<DropDown></DropDown>
-	</div>
+	{#if show_dropdown}
+		<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"
+		>
+			<DropDown></DropDown>
+		</div>
+	{/if}
 
 	{#each library_pages as category_pages}
 		<p class="font-semibold px-4 my-2 block">{category_pages.category}</p>

js/_website/src/lib/templates/third-party-clients/third-party-clients/01_introduction.svx

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import CopyButton from "$lib/components/CopyButton.svelte";
+</script>
+
+# Introduction
+
+### Gradio Clients
+## Gradio applications support programmatic requests from many environments:
+
+- The [Python Client](/docs/python-client): `gradio-client` allows you to make requests from Python environments. 
+- The [JavaScript Client](/docs/js-client): `@gradio/client` allows you to make requests in TypeScript from the browser or server-side.
+- You can also query gradio apps [directly from cURL](/guides/querying-gradio-apps-with-curl). 
+
+### Community Clients
+## We also encourage the development and use of third party clients built by the community: 
+
+- [Rust Client](/docs/third-party-clients/rust-client): `gradio-rs` built by [@JacobLinCool](https://github.com/JacobLinCool) allows you to make requests in Rust. 

js/_website/src/lib/templates/third-party-clients/third-party-clients/rust-client.svx

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import CopyButton from "$lib/components/CopyButton.svelte";
+</script>
+
+# gradio-rs
+
+### Introduction
+## `gradio-rs` is a Gradio Client in Rust built by [@JacobLinCool](https://github.com/JacobLinCool). You can find the repo [here](https://github.com/JacobLinCool/gradio-rs), and more in depth API documentation [here](https://docs.rs/gradio/latest/gradio/). 
+
+### Usage
+
+## Here is an example of using BS-RoFormer model to separate vocals and background music from an audio file.
+
+```rust
+use gradio::{PredictionInput, Client, ClientOptions};
+
+#[tokio::main]
+async fn main() {
+    if std::env::args().len() < 2 {
+        println!("Please provide an audio file path as an argument");
+        std::process::exit(1);
+    }
+    let args: Vec<String> = std::env::args().collect();
+    let file_path = &args[1];
+    println!("File: {}", file_path);
+
+    let client = Client::new("JacobLinCool/vocal-separation", ClientOptions::default())
+        .await
+        .unwrap();
+
+    let output = client
+        .predict(
+            "/separate",
+            vec![
+                PredictionInput::from_file(file_path),
+                PredictionInput::from_value("BS-RoFormer"),
+            ],
+        )
+        .await
+        .unwrap();
+    println!(
+        "Vocals: {}",
+        output[0].clone().as_file().unwrap().url.unwrap()
+    );
+    println!(
+        "Background: {}",
+        output[1].clone().as_file().unwrap().url.unwrap()
+    );
+}
+```
+
+## You can find more examples [here](https://github.com/JacobLinCool/gradio-rs/tree/main/examples). 
+
+### Command Line Interface
+
+```bash
+cargo install gradio
+gr --help
+```
+## Take [stabilityai/stable-diffusion-3-medium](https://huggingface.co/spaces/stabilityai/stable-diffusion-3-medium) HF Space as an example:
+
+```bash
+> gr list stabilityai/stable-diffusion-3-medium
+API Spec for stabilityai/stable-diffusion-3-medium:
+        /infer
+                Parameters:
+                        prompt               ( str      ) 
+                        negative_prompt      ( str      ) 
+                        seed                 ( float    ) numeric value between 0 and 2147483647
+                        randomize_seed       ( bool     ) 
+                        width                ( float    ) numeric value between 256 and 1344
+                        height               ( float    ) numeric value between 256 and 1344
+                        guidance_scale       ( float    ) numeric value between 0.0 and 10.0
+                        num_inference_steps  ( float    ) numeric value between 1 and 50
+                Returns:
+                        Result               ( filepath ) 
+                        Seed                 ( float    ) numeric value between 0 and 2147483647
+
+> gr run stabilityai/stable-diffusion-3-medium infer 'Rusty text "AI & CLI" on the snow.' '' 0 true 1024 1024 5 28
+Result: https://stabilityai-stable-diffusion-3-medium.hf.space/file=/tmp/gradio/5735ca7775e05f8d56d929d8f57b099a675c0a01/image.webp
+Seed: 486085626
+```
+
+## For file input, simply use the file path as the argument:
+
+```bash
+gr run hf-audio/whisper-large-v3 predict 'test-audio.wav' 'transcribe'
+output: " Did you know you can try the coolest model on your command line?"
+```

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

@@ -143,11 +143,29 @@
 				(TypeScript) from the browser or server-side.
 			</div>
 		</a>
+
 		<a
-			href="./docs/js"
+			href="/main/docs/third-party-clients"
 			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>Third Party Clients</span>
+			</div>
+			<div class="relative pr-4 text-lg font-light">
+				Make programmatic requests to Gradio applications using third party
+				clients built by the gradio community.
+			</div>
+		</a>
+	</div>
+
+	<div class="grid grid-cols-1 gap-5 lg:flex lg:flex-row mt-8">
+		<a
+			href="./docs/js"
+			target="_self"
+			class="w-full 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>Javascript Components</span>
@@ -157,11 +175,12 @@
 				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"
+			class="w-full 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[2]}-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>
@@ -174,8 +193,8 @@
 		<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"
+			class="w-full 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>Gradio Lite</span>

js/_website/src/routes/[[version]]/docs/third-party-clients/+layout.server.ts

@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load({ params, url }) {
+	if (params?.version != "main") {
+		throw redirect(302, `/main` + url.pathname);
+	}
+}

js/_website/src/routes/[[version]]/docs/third-party-clients/+page.server.ts

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load({ params }) {
+	if (params?.version)
+		throw redirect(302, `/main/docs/third-party-clients/introduction`);
+
+	throw redirect(302, `/main/docs/third-party-clients/introduction`);
+}

js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+	import DocsNav from "$lib/components/DocsNav.svelte";
+	import MetaTags from "$lib/components/MetaTags.svelte";
+	import { onDestroy } from "svelte";
+	import { page } from "$app/stores";
+
+	export let data: any = {};
+
+	let name: string = data.name;
+	let module = data.module.default;
+
+	let y: number;
+	let header_targets: { [key: string]: HTMLElement } = {};
+	let target_elem: HTMLElement;
+
+	onDestroy(() => {
+		header_targets = {};
+	});
+
+	let current_target: HTMLElement;
+
+	$: 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
+		) {
+			current_target = header_targets[target];
+			current_target.classList.add("current-nav-link");
+			Object.values(header_targets).forEach((target) => {
+				if (target !== current_target && target) {
+					target.classList.remove("current-nav-link");
+				}
+			});
+		}
+	}
+
+	$: name = data.name;
+	$: pages = data.pages["third-party-clients"];
+	$: page_path = data.page_path;
+	$: module = data.module.default;
+
+	$: flattened_pages = pages.map((category: any) => category.pages).flat();
+	$: prev_obj =
+		flattened_pages[
+			flattened_pages.findIndex(
+				(page: any) => page.name === $page.params?.doc
+			) - 1
+		];
+	$: next_obj =
+		flattened_pages[
+			flattened_pages.findIndex(
+				(page: any) => page.name === $page.params?.doc
+			) + 1
+		];
+
+	let component_name = $page.params?.doc;
+
+	$: component_name = $page.params?.doc;
+
+	function get_headers() {
+		let headers: any[] = [];
+		const h3_elements = document.querySelectorAll("h3");
+		h3_elements.forEach((element) => {
+			headers.push({ title: element.textContent, id: element.id });
+		});
+		const page_title_elem = document.querySelector("h1");
+		let page_title = { title: "", id: "" };
+		if (page_title_elem) {
+			page_title_elem.id =
+				page_title_elem?.textContent?.toLowerCase().replace(/ /g, "-") || "";
+			page_title = {
+				title: page_title_elem?.textContent || "",
+				id: page_title_elem.id
+			};
+		}
+		return { headers: headers, page_title: page_title };
+	}
+
+	var all_headers: {
+		headers: any[];
+		page_title: { title: string; id: string };
+	} = { headers: [], page_title: { title: "", id: "" } };
+
+	var dynamic_component: any = null;
+
+	$: if (dynamic_component) {
+		all_headers = get_headers();
+	}
+	let title: string;
+	let description: string;
+	$: title =
+		all_headers.page_title.title === "Introduction"
+			? "Third Party Client - " + all_headers.page_title.title + " Docs"
+			: "Third Python Client - " + all_headers.page_title.title + " Class Docs";
+	$: description =
+		all_headers.page_title.title === "Introduction"
+			? "Make programmatic requests to Gradio applications from third party clients."
+			: "Using " + all_headers.page_title.title;
+</script>
+
+<MetaTags
+	{title}
+	url={$page.url.pathname}
+	canonical={$page.url.pathname}
+	{description}
+/>
+
+<svelte:window bind:scrollY={y} />
+
+<main class="container mx-auto px-4 flex gap-4">
+	<div class="flex w-full">
+		<DocsNav
+			current_nav_link={name}
+			library_pages={pages}
+			show_dropdown={false}
+		/>
+
+		<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>
+
+			<div class="flex justify-between mt-4 lg:ml-10">
+				{#if prev_obj}
+					<a
+						href="./{prev_obj.name}"
+						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>
+							{prev_obj.pretty_name}
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+				{#if next_obj}
+					<a
+						href="./{next_obj.name}"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+					>
+						<div class="text-lg">
+							{next_obj.pretty_name}
+							<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">
+						<svelte:component this={module} bind:this={dynamic_component} />
+					</div>
+				</div>
+			</div>
+
+			<div class="flex justify-between mt-4 lg:ml-10">
+				{#if prev_obj}
+					<a
+						href="./{prev_obj.name}"
+						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>
+							{prev_obj.pretty_name}
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+				{#if next_obj}
+					<a
+						href="./{next_obj.name}"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+					>
+						<div class="text-lg">
+							{next_obj.pretty_name}
+							<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="#{all_headers.page_title.id}">{all_headers.page_title.title}</a
+				>
+				{#if all_headers.headers && all_headers.headers.length > 0}
+					<ul class="text-slate-700 text-lg leading-6">
+						{#each all_headers.headers as header}
+							<li>
+								<a
+									bind:this={header_targets[header.id]}
+									href="#{header.id}"
+									class="thin-link block py-2 font-light second-nav-link"
+									>{header.title}</a
+								>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		</div>
+	</div>
+</main>
+
+<style>
+	.sub-link {
+		border-color: #f3f4f6 !important;
+	}
+</style>

js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.ts

@@ -0,0 +1,47 @@
+import { error } from "@sveltejs/kit";
+
+export async function load({ params, parent }) {
+	const { on_main, wheel, pages, url_version, VERSION } = await parent();
+
+	const modules: any = import.meta.glob(
+		"/src/lib/templates*/third-party-clients/**/*.svx"
+	);
+
+	let name = params.doc;
+	let page_path: string | null = null;
+
+	for (const category of pages["third-party-clients"]) {
+		for (const page of category.pages) {
+			if (page.name === name) {
+				page_path = page.path;
+			}
+		}
+	}
+
+	if (page_path === null) {
+		throw error(404);
+	}
+
+	let version_append = on_main ? "/" : "_" + VERSION.replace(/\./g, "-") + "/";
+
+	let module;
+
+	for (const path in modules) {
+		if (
+			path.includes(page_path) &&
+			path.includes("templates" + version_append)
+		) {
+			module = await modules[path]();
+		}
+	}
+
+	return {
+		name,
+		on_main,
+		wheel,
+		url_version,
+		pages,
+		page_path,
+		module
+	};
+}

js/_website/src/routes/redirects.js

@@ -172,5 +172,7 @@ export const redirects = {
 	"/docs/no-reload": "/docs/gradio/NO_RELOAD",
 	"/docs/python-client/python-client": "/docs/python-client/introduction",
 	"/docs/python-client/js-client": "/docs/js-client",
-	"/docs/gradio/interface#interface-queue": "/docs/gradio/interface"
+	"/docs/gradio/interface#interface-queue": "/docs/gradio/interface",
+	"/docs/third-party-clients/introduction":
+		"/main/docs/third-party-clients/introduction"
 };