@gradio/core 1.0.0-dev.0 → 1.0.0

package/dist/src/api_docs/ApiDocs.svelte

@@ -1,230 +1,309 @@
-<script>import { onMount, createEventDispatcher } from "svelte";
-import NoApi from "./NoApi.svelte";
-import ApiBanner from "./ApiBanner.svelte";
-import { BaseButton as Button } from "@gradio/button";
-import ParametersSnippet from "./ParametersSnippet.svelte";
-import InstallSnippet from "./InstallSnippet.svelte";
-import CodeSnippet from "./CodeSnippet.svelte";
-import RecordingSnippet from "./RecordingSnippet.svelte";
-import CopyButton from "./CopyButton.svelte";
-import { Block } from "@gradio/atoms";
-import python from "./img/python.svg";
-import javascript from "./img/javascript.svg";
-import bash from "./img/bash.svg";
-import ResponseSnippet from "./ResponseSnippet.svelte";
-import mcp from "./img/mcp.svg";
-import MCPSnippet from "./MCPSnippet.svelte";
-export let dependencies;
-export let root;
-export let app;
-export let space_id;
-export let root_node;
-export let username;
-const js_docs = "https://www.gradio.app/guides/getting-started-with-the-js-client";
-const py_docs = "https://www.gradio.app/guides/getting-started-with-the-python-client";
-const bash_docs = "https://www.gradio.app/guides/querying-gradio-apps-with-curl";
-const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
-const mcp_docs = "https://www.gradio.app/guides/building-mcp-server-with-gradio";
-let api_count = dependencies.filter(
-  (dependency) => dependency.api_visibility === "public"
-).length;
-if (root === "") {
-  root = location.protocol + "//" + location.host + location.pathname;
-}
-if (!root.endsWith("/")) {
-  root += "/";
-}
-export let api_calls = [];
-let current_language = "python";
-function set_query_param(key, value) {
-  const url = new URL(window.location.href);
-  url.searchParams.set(key, value);
-  history.replaceState(null, "", url.toString());
-}
-function get_query_param(key) {
-  const url = new URL(window.location.href);
-  return url.searchParams.get(key);
-}
-function is_valid_language(lang) {
-  return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
-}
-const langs = [
-  ["python", "Python", python],
-  ["javascript", "JavaScript", javascript],
-  ["bash", "cURL", bash],
-  ["mcp", "MCP", mcp]
-];
-let is_running = false;
-let mcp_server_active = false;
-async function get_info() {
-  let response = await fetch(
-    root.replace(/\/$/, "") + app.api_prefix + "/info"
-  );
-  let data = await response.json();
-  return data;
-}
-async function get_js_info() {
-  let js_api_info = await app.view_api();
-  return js_api_info;
-}
-let info;
-let js_info;
-let analytics;
-get_info().then((data) => {
-  info = data;
-});
-get_js_info().then((js_api_info) => {
-  js_info = js_api_info;
-});
-async function get_summary() {
-  let response = await fetch(root.replace(/\/$/, "") + "/monitoring/summary");
-  let data = await response.json();
-  return data;
-}
-get_summary().then((summary) => {
-  analytics = summary.functions;
-});
-const dispatch = createEventDispatcher();
-$: selected_tools_array = Array.from(selected_tools);
-$: selected_tools_without_prefix = selected_tools_array.map(remove_tool_prefix);
-$: mcp_server_url = `${root}gradio_api/mcp/sse`;
-$: mcp_server_url_streamable = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/`;
-$: if (mcp_json_sse && selected_tools.size > 0) {
-  const baseUrl = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/sse`;
-  mcp_json_sse.mcpServers.gradio.url = baseUrl;
-  if (mcp_json_stdio) {
-    mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
-  }
-}
-let tools = [];
-let headers = [];
-let mcp_json_sse;
-let mcp_json_stdio;
-let file_data_present = false;
-let selected_tools = /* @__PURE__ */ new Set();
-let tool_prefix = space_id ? space_id.split("/").pop() + "_" : "";
-function remove_tool_prefix(toolName) {
-  if (tool_prefix && toolName.startsWith(tool_prefix)) {
-    return toolName.slice(tool_prefix.length);
-  }
-  return toolName;
-}
-const upload_file_mcp_server = {
-  command: "uvx",
-  args: [
-    "--from",
-    "gradio[mcp]",
-    "gradio",
-    "upload-mcp",
-    root,
-    "<UPLOAD_DIRECTORY>"
-  ]
-};
-async function fetch_mcp_tools() {
-  try {
-    let schema_url = `${root}gradio_api/mcp/schema`;
-    const response = await fetch(schema_url);
-    const schema = await response.json();
-    file_data_present = schema.map((tool) => tool.meta?.file_data_present).some((present) => present);
-    tools = schema.map((tool) => ({
-      name: tool.name,
-      description: tool.description || "",
-      parameters: tool.inputSchema?.properties || {},
-      meta: tool.meta,
-      expanded: false,
-      endpoint_name: tool.endpoint_name
-    }));
-    selected_tools = new Set(tools.map((tool) => tool.name));
-    headers = schema.map((tool) => tool.meta?.headers || []).flat();
-    if (headers.length > 0) {
-      mcp_json_sse = {
-        mcpServers: {
-          gradio: {
-            url: mcp_server_url,
-            headers: headers.reduce(
-              (accumulator, current_key) => {
-                accumulator[current_key] = "<YOUR_HEADER_VALUE>";
-                return accumulator;
-              },
-              {}
-            )
-          }
-        }
-      };
-      mcp_json_stdio = {
-        mcpServers: {
-          gradio: {
-            command: "npx",
-            args: [
-              "mcp-remote",
-              mcp_server_url,
-              "--transport",
-              "sse-only",
-              ...headers.map((header) => [
-                "--header",
-                `${header}: <YOUR_HEADER_VALUE>`
-              ]).flat()
-            ]
-          }
-        }
-      };
-    } else {
-      mcp_json_sse = {
-        mcpServers: {
-          gradio: {
-            url: mcp_server_url
-          }
-        }
-      };
-      mcp_json_stdio = {
-        mcpServers: {
-          gradio: {
-            command: "npx",
-            args: ["mcp-remote", mcp_server_url, "--transport", "sse-only"]
-          }
-        }
-      };
-      if (file_data_present) {
-        mcp_json_sse.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
-        mcp_json_stdio.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
-      }
-    }
-  } catch (error) {
-    console.error("Failed to fetch MCP tools:", error);
-    tools = [];
-  }
-}
-onMount(() => {
-  const controller = new AbortController();
-  const signal = controller.signal;
-  document.body.style.overflow = "hidden";
-  if ("parentIFrame" in window) {
-    window.parentIFrame?.scrollTo(0, 0);
-  }
-  const lang_param = get_query_param("lang");
-  if (is_valid_language(lang_param)) {
-    current_language = lang_param;
-  }
-  fetch(mcp_server_url, { signal }).then((response) => {
-    mcp_server_active = response.ok;
-    if (mcp_server_active) {
-      fetch_mcp_tools();
-      if (!is_valid_language(lang_param)) {
-        current_language = "mcp";
-      }
-    } else {
-      if (!is_valid_language(lang_param)) {
-        current_language = "python";
-      }
-    }
-    controller.abort();
-  }).catch(() => {
-    mcp_server_active = false;
-  });
-  return () => {
-    document.body.style.overflow = "auto";
-  };
-});
+<script lang="ts">
+	/* eslint-disable */
+	import { onMount, createEventDispatcher } from "svelte";
+	import type { ComponentMeta, Dependency } from "../types";
+	import NoApi from "./NoApi.svelte";
+	import type { Client } from "@gradio/client";
+	import type { Payload } from "../types";
+
+	import ApiBanner from "./ApiBanner.svelte";
+	import { BaseButton as Button } from "@gradio/button";
+	import ParametersSnippet from "./ParametersSnippet.svelte";
+	import InstallSnippet from "./InstallSnippet.svelte";
+	import CodeSnippet from "./CodeSnippet.svelte";
+	import RecordingSnippet from "./RecordingSnippet.svelte";
+	import CopyButton from "./CopyButton.svelte";
+	import { Block } from "@gradio/atoms";
+
+	import python from "./img/python.svg";
+	import javascript from "./img/javascript.svg";
+	import bash from "./img/bash.svg";
+	import ResponseSnippet from "./ResponseSnippet.svelte";
+	import mcp from "./img/mcp.svg";
+	import MCPSnippet from "./MCPSnippet.svelte";
+	import CopyMarkdown from "./CopyMarkdown.svelte";
+
+	export let dependencies: Dependency[];
+	export let root: string;
+	export let app: Awaited<ReturnType<typeof Client.connect>>;
+	export let space_id: string | null;
+	export let root_node: ComponentMeta;
+	export let username: string | null;
+	export let last_api_call: Payload | null = null;
+
+	const js_docs =
+		"https://www.gradio.app/guides/getting-started-with-the-js-client";
+	const py_docs =
+		"https://www.gradio.app/guides/getting-started-with-the-python-client";
+	const bash_docs =
+		"https://www.gradio.app/guides/querying-gradio-apps-with-curl";
+	const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
+	const mcp_docs =
+		"https://www.gradio.app/guides/building-mcp-server-with-gradio";
+
+	let api_count = dependencies.filter(
+		(dependency) => dependency.api_visibility === "public"
+	).length;
+
+	if (root === "") {
+		root = location.protocol + "//" + location.host + location.pathname;
+	}
+	if (!root.endsWith("/")) {
+		root += "/";
+	}
+
+	export let api_calls: Payload[] = [];
+	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
+
+	$: sorted_dependencies = (() => {
+		const valid = dependencies.filter(
+			(dep) =>
+				dep.api_visibility === "public" &&
+				info?.named_endpoints?.["/" + dep.api_name]
+		);
+		if (info && last_api_call) {
+			const mostRecent = valid.find((dep) => dep.id === last_api_call.fn_index);
+			const others = valid.filter((dep) => dep.id !== last_api_call.fn_index);
+			return mostRecent ? [mostRecent, ...others] : valid;
+		}
+		return valid;
+	})();
+
+	function set_query_param(key: string, value: string) {
+		const url = new URL(window.location.href);
+		url.searchParams.set(key, value);
+		history.replaceState(null, "", url.toString());
+	}
+
+	function get_query_param(key: string): string | null {
+		const url = new URL(window.location.href);
+		return url.searchParams.get(key);
+	}
+
+	function is_valid_language(lang: string | null): boolean {
+		return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+	}
+
+	const langs = [
+		["python", "Python", python],
+		["javascript", "JavaScript", javascript],
+		["bash", "cURL", bash],
+		["mcp", "MCP", mcp]
+	] as const;
+
+	let is_running = false;
+	let mcp_server_active = false;
+
+	async function get_info(): Promise<{
+		named_endpoints: any;
+		unnamed_endpoints: any;
+	}> {
+		let response = await fetch(
+			root.replace(/\/$/, "") + app.api_prefix + "/info"
+		);
+		let data = await response.json();
+		return data;
+	}
+	async function get_js_info(): Promise<Record<string, any>> {
+		let js_api_info = await app.view_api();
+		return js_api_info;
+	}
+
+	let info: {
+		named_endpoints: any;
+		unnamed_endpoints: any;
+	};
+
+	let js_info: Record<string, any>;
+	let analytics: Record<string, any>;
+
+	get_info().then((data) => {
+		info = data;
+	});
+
+	get_js_info().then((js_api_info) => {
+		js_info = js_api_info;
+	});
+
+	async function get_summary(): Promise<{
+		functions: any;
+	}> {
+		let response = await fetch(root.replace(/\/$/, "") + "/monitoring/summary");
+		let data = await response.json();
+		return data;
+	}
+
+	get_summary().then((summary) => {
+		analytics = summary.functions;
+	});
+
+	const dispatch = createEventDispatcher();
+
+	$: selected_tools_array = Array.from(selected_tools);
+	$: selected_tools_without_prefix =
+		selected_tools_array.map(remove_tool_prefix);
+	$: mcp_server_url_streamable =
+		selected_tools_array.length > 0 &&
+		selected_tools_array.length < tools.length
+			? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}`
+			: `${root}gradio_api/mcp/`;
+
+	interface ToolParameter {
+		title?: string;
+		type: string;
+		description: string;
+		format?: string;
+		default?: any;
+	}
+
+	interface Tool {
+		name: string;
+		description: string;
+		parameters: Record<string, ToolParameter>;
+		expanded?: boolean;
+		meta: {
+			mcp_type: "tool" | "resource" | "prompt";
+			file_data_present: boolean;
+			endpoint_name: string;
+		};
+	}
+
+	let tools: Tool[] = [];
+	let headers: string[] = [];
+	let mcp_json_stdio: any;
+	let file_data_present = false;
+	let selected_tools: Set<string> = new Set();
+	let tool_prefix = space_id ? space_id.split("/").pop() + "_" : "";
+
+	function remove_tool_prefix(toolName: string): string {
+		if (tool_prefix && toolName.startsWith(tool_prefix)) {
+			return toolName.slice(tool_prefix.length);
+		}
+		return toolName;
+	}
+
+	const upload_file_mcp_server = {
+		command: "uvx",
+		args: [
+			"--from",
+			"gradio[mcp]",
+			"gradio",
+			"upload-mcp",
+			root,
+			"<UPLOAD_DIRECTORY>"
+		]
+	};
+
+	async function fetch_mcp_tools() {
+		try {
+			let schema_url = `${root}gradio_api/mcp/schema`;
+			const response = await fetch(schema_url);
+			const schema = await response.json();
+			file_data_present = schema
+				.map((tool: any) => tool.meta?.file_data_present)
+				.some((present: boolean) => present);
+
+			tools = schema.map((tool: any) => ({
+				name: tool.name,
+				description: tool.description || "",
+				parameters: tool.inputSchema?.properties || {},
+				meta: tool.meta,
+				expanded: false,
+				endpoint_name: tool.endpoint_name
+			}));
+			selected_tools = new Set(tools.map((tool) => tool.name));
+			headers = schema.map((tool: any) => tool.meta?.headers || []).flat();
+			if (headers.length > 0) {
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: [
+								"mcp-remote",
+								mcp_server_url_streamable,
+								"--transport",
+								"streamable-http",
+								...headers
+									.map((header) => [
+										"--header",
+										`${header}: <YOUR_HEADER_VALUE>`
+									])
+									.flat()
+							]
+						}
+					}
+				};
+			} else {
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: [
+								"mcp-remote",
+								mcp_server_url_streamable,
+								"--transport",
+								"streamable-http"
+							]
+						}
+					}
+				};
+				if (file_data_present) {
+					mcp_json_stdio.mcpServers.upload_files_to_gradio =
+						upload_file_mcp_server;
+				}
+			}
+		} catch (error) {
+			console.error("Failed to fetch MCP tools:", error);
+			tools = [];
+		}
+	}
+
+	let markdown_code_snippets: Record<string, Record<string, string>> = {};
+
+	$: markdown_code_snippets;
+
+	let config_snippets: Record<string, string> = {};
+
+	$: config_snippets;
+
+	onMount(() => {
+		const controller = new AbortController();
+		const signal = controller.signal;
+
+		document.body.style.overflow = "hidden";
+		if ("parentIFrame" in window) {
+			window.parentIFrame?.scrollTo(0, 0);
+		}
+
+		const lang_param = get_query_param("lang");
+		if (is_valid_language(lang_param)) {
+			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
+		}
+
+		const mcp_schema_url = `${root}gradio_api/mcp/schema`;
+		fetch(mcp_schema_url, { signal: signal })
+			.then((response) => {
+				mcp_server_active = response.ok;
+				if (mcp_server_active) {
+					fetch_mcp_tools();
+					if (!is_valid_language(lang_param)) {
+						current_language = "mcp";
+					}
+				} else {
+					if (!is_valid_language(lang_param)) {
+						current_language = "python";
+					}
+				}
+				controller.abort();
+			})
+			.catch(() => {
+				mcp_server_active = false;
+			});
+
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
 </script>
 
 {#if info && analytics}
@@ -239,10 +318,32 @@ onMount(() => {
 		</div>
 
 		<div class="docs-wrap">
-			<div class="client-doc">
+			<div
+				class="client-doc"
+				style="display: flex; align-items: center; justify-content: space-between;"
+			>
 				<p style="font-size: var(--text-lg);">
 					Choose one of the following ways to interact with the API.
 				</p>
+				<CopyMarkdown
+					{current_language}
+					{space_id}
+					{root}
+					{api_count}
+					{tools}
+					{py_docs}
+					{js_docs}
+					{bash_docs}
+					{mcp_docs}
+					{spaces_docs_suffix}
+					{mcp_server_active}
+					{mcp_server_url_streamable}
+					{config_snippets}
+					{markdown_code_snippets}
+					{dependencies}
+					{info}
+					{js_info}
+				/>
 			</div>
 			<div class="endpoint">
 				<div class="snippets">
@@ -305,25 +406,27 @@ onMount(() => {
 								href={current_language == "python" ? py_docs : js_docs}
 								target="_blank">docs</a
 							>) if you don't already have it installed.
-						{:else if current_language == "mcp"}
-							<MCPSnippet
-								{mcp_server_active}
-								{mcp_server_url}
-								{mcp_server_url_streamable}
-								tools={tools.filter((tool) => selected_tools.has(tool.name))}
-								all_tools={tools}
-								bind:selected_tools
-								{mcp_json_sse}
-								{mcp_json_stdio}
-								{file_data_present}
-								{mcp_docs}
-								{analytics}
-							/>
-						{:else}
+						{:else if current_language == "bash"}
 							1. Confirm that you have cURL installed on your system.
 						{/if}
 					</p>
 
+					<div class:hidden={current_language !== "mcp"}>
+						<MCPSnippet
+							{mcp_server_active}
+							{mcp_server_url_streamable}
+							tools={tools.filter((tool) => selected_tools.has(tool.name))}
+							all_tools={tools}
+							bind:selected_tools
+							{mcp_json_stdio}
+							{file_data_present}
+							{mcp_docs}
+							{analytics}
+							{root}
+							bind:config_snippets
+						/>
+					</div>
+
 					{#if current_language !== "mcp"}
 						<InstallSnippet {current_language} />
 
@@ -377,9 +480,9 @@ onMount(() => {
 					{/if}
 				{/if}
 
-				{#if current_language !== "mcp"}
-					{#each dependencies as dependency}
-						{#if dependency.api_visibility === "public" && info.named_endpoints["/" + dependency.api_name]}
+				<div class:hidden={current_language === "mcp"}>
+					{#each sorted_dependencies as dependency}
+						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
 									endpoint_parameters={info.named_endpoints[
@@ -395,6 +498,8 @@ onMount(() => {
 										"/" + dependency.api_name
 									].description}
 									{analytics}
+									{last_api_call}
+									bind:markdown_code_snippets
 								/>
 
 								<ParametersSnippet
@@ -419,7 +524,7 @@ onMount(() => {
 							</div>
 						{/if}
 					{/each}
-				{/if}
+				</div>
 			</div>
 		</div>
 	{:else}
@@ -614,4 +719,8 @@ onMount(() => {
 	.api-name {
 		color: var(--color-accent);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>