Dia is a dialogue generation model that can generate realistic dialogue between two speakers. Use the dialogue component to create a conversation and then hit the submit button in the bottom right corner to see it come to life .
+ """
+ )
+ with gr.Row():
+ with gr.Column():
+ dialogue = gr.Dialogue(
+ speakers=speakers, emotions=emotions, formatter=formatter
+ )
+ with gr.Column():
+ with gr.Row():
+ audio = gr.Audio(label="Audio")
+ with gr.Row():
+ gr.DeepLinkButton(value="Share Audio via Link")
+ with gr.Row():
+ gr.Examples(
+ examples=[
+ [
+ [
+ {
+ "speaker": "Speaker 1",
+ "text": "Why did the chicken cross the road?",
+ },
+ {"speaker": "Speaker 2", "text": "I don't know!"},
+ {
+ "speaker": "Speaker 1",
+ "text": "to get to the other side! (laughs)",
+ },
+ ]
+ ],
+ [
+ [
+ {
+ "speaker": "Speaker 1",
+ "text": "I am a little tired today (sighs).",
+ },
+ {"speaker": "Speaker 2", "text": "Hang in there!"},
+ ]
+ ],
+ ],
+ inputs=[dialogue],
+ cache_examples=False,
+ )
+
+ dialogue.submit(query, [dialogue], audio)
+
+if __name__ == "__main__":
+ demo.launch()
diff --git a/gradio/__init__.py b/gradio/__init__.py
index e6ab8bfbef..c5d7b1f9f1 100644
--- a/gradio/__init__.py
+++ b/gradio/__init__.py
@@ -31,6 +31,7 @@
Dataset,
DateTime,
DeepLinkButton,
+ Dialogue,
DownloadButton,
Dropdown,
DuplicateButton,
@@ -145,6 +146,7 @@
"Dataframe",
"Dataset",
"DateTime",
+ "Dialogue",
"DeletedFileData",
"DownloadButton",
"DownloadData",
diff --git a/gradio/components/__init__.py b/gradio/components/__init__.py
index 5252175f3b..2456093686 100644
--- a/gradio/components/__init__.py
+++ b/gradio/components/__init__.py
@@ -21,6 +21,7 @@
from gradio.components.dataset import Dataset
from gradio.components.datetime import DateTime
from gradio.components.deep_link_button import DeepLinkButton
+from gradio.components.dialogue import Dialogue
from gradio.components.download_button import DownloadButton
from gradio.components.dropdown import Dropdown
from gradio.components.duplicate_button import DuplicateButton
@@ -78,6 +79,7 @@
"Dataframe",
"DataFrame",
"Dataset",
+ "Dialogue",
"DownloadButton",
"DuplicateButton",
"Fallback",
diff --git a/gradio/components/dialogue.py b/gradio/components/dialogue.py
new file mode 100644
index 0000000000..65e8f17c35
--- /dev/null
+++ b/gradio/components/dialogue.py
@@ -0,0 +1,135 @@
+from collections.abc import Callable
+from typing import List
+
+from gradio.components.base import server
+from gradio.components.textbox import Textbox
+from gradio.data_classes import GradioModel, GradioRootModel
+from gradio.events import Events
+
+
+class DialogueLine(GradioModel):
+ speaker: str
+ text: str
+
+class DialogueModel(GradioRootModel):
+ root: List[DialogueLine]
+
+class Dialogue(Textbox):
+ """
+ Creates a dialogue components for users to enter dialogue between speakers.
+
+ Demos: dia_dialogue_demo
+ """
+
+ EVENTS = [
+ Events.change,
+ Events.input,
+ Events.submit,
+ ]
+
+ data_model = DialogueModel
+ def __init__(self,
+ value: list[dict[str, str]] | Callable | None = None,
+ *,
+ speakers: list[str] | None = None,
+ formatter: Callable | None = None,
+ emotions: list[str] | None = None,
+ separator: str = " ",
+ label: str | None = "Dialogue",
+ info: str | None = "Type colon (:) in the dialogue line to see the available emotion and intonation tags",
+ placeholder: str | None = "Enter dialogue here...",
+ show_label: bool | None = None,
+ container: bool = True,
+ scale: int | None = None,
+ min_width: int = 160,
+ interactive: bool | None = None,
+ visible: bool = True,
+ elem_id: str | None = None,
+ autofocus: bool = False,
+ autoscroll: bool = True,
+ elem_classes: list[str] | str | None = None,
+ render: bool = True,
+ key: int | str | None = None,
+ max_lines: int | None = None,
+ show_submit_button: bool = True,
+ show_copy_button: bool = True,
+ ):
+ """
+ Parameters:
+ value: Value of the dialogue. It is a list of dictionaries, each containing a 'speaker' key and a 'text' key. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
+ speakers: The different speakers allowed in the dialogue.
+ formatter: A function that formats the dialogue line dictionary, e.g. {"speaker": "Speaker 1", "text": "Hello, how are you?"} into a string, e.g. "Speaker 1: Hello, how are you?".
+ emotions: The different emotions and intonation allowed in the dialogue. Emotions are displayed in an autocomplete menu below the input textbox when the user starts typing `:`. Use the exact emotion name expected by the AI model or inference function.
+ separator: The separator between the different dialogue lines used to join the formatted dialogue lines into a single string. For example, a newline character or empty string.
+ max_lines: maximum number of lines allowed in the dialogue.
+ placeholder: placeholder hint to provide behind textarea.
+ label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+ show_label: if True, will display the label. If False, the copy button is hidden as well as well as the label.
+ container: if True, will place the component in a container - providing some extra padding around the border.
+ scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+ min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+ interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+ visible: If False, component will be hidden.
+ autofocus: If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+ render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+ key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+ show_copy_button: If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.
+ show_submit_button: If True, includes a submit button to submit the dialogue.
+ autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
+ """
+ super().__init__(value="",
+ label=label, info=info, placeholder=placeholder, show_label=show_label, container=container, scale=scale, min_width=min_width, interactive=interactive, visible=visible, elem_id=elem_id, autofocus=autofocus, autoscroll=autoscroll, elem_classes=elem_classes, render=render, key=key, max_lines=max_lines)
+ self.speakers = speakers
+ self.emotions = emotions or []
+ self.formatter = formatter
+ self.separator = separator
+ self.show_submit_button = show_submit_button
+ self.show_copy_button = show_copy_button
+ if isinstance(value, Callable):
+ value = value()
+ self.value = self.preprocess(DialogueModel(root=value)) if value is not None else value # type: ignore
+
+ def preprocess(self, payload: DialogueModel) -> str:
+ """
+ This docstring is used to generate the docs for this custom component.
+ Parameters:
+ payload: the data to be preprocessed, sent from the frontend
+ Returns:
+ the data after preprocessing, sent to the user's function in the backend
+ """
+ formatter = self.formatter
+ if not formatter:
+ formatter = self.default_formatter
+ return self.separator.join([formatter(line.speaker, line.text) for line in payload.root])
+
+ @staticmethod
+ def default_formatter(speaker: str, text: str) -> str:
+ return f"[{speaker}] {text}"
+
+ @server
+ async def format(self, value: list[dict]):
+ """Format the dialogue in the frontend into a string that's copied to the clipboard."""
+ data = DialogueModel(root=value) # type: ignore
+ return self.preprocess(data)
+
+ def postprocess(self, value):
+ """
+ This docstring is used to generate the docs for this custom component.
+ Parameters:
+ payload: the data to be postprocessed, sent from the user's function in the backend
+ Returns:
+ the data after postprocessing, sent to the frontend
+ """
+ return value
+
+ def as_example(self, value):
+ return self.preprocess(DialogueModel(root=value))
+
+ def example_payload(self):
+ return [{"speaker": "Speaker 1", "text": "Hello, how are you?"}, {"speaker": "Speaker 2", "text": "I'm fine, thank you!"}]
+
+ def example_value(self):
+ return [{"speaker": "Speaker 1", "text": "Hello, how are you?"}, {"speaker": "Speaker 2", "text": "I'm fine, thank you!"}]
+
diff --git a/gradio/stubs/anyio.pyi b/gradio/stubs/anyio.pyi
index 0a354c32ef..d83eb5143a 100644
--- a/gradio/stubs/anyio.pyi
+++ b/gradio/stubs/anyio.pyi
@@ -1,6 +1,6 @@
""" This module contains type hints for the anyio library. It was auto-generated so may include errors."""
-from typing import Any, Callable, Coroutine, TypeVar, overload, Optional, Union
from types import TracebackType
+from typing import Any, Callable, Coroutine, Optional, TypeVar, Union, overload
T = TypeVar('T')
T_Retval = TypeVar('T_Retval')
diff --git a/js/dialogue/Dialogue.svelte b/js/dialogue/Dialogue.svelte
new file mode 100644
index 0000000000..0b9e692dda
--- /dev/null
+++ b/js/dialogue/Dialogue.svelte
@@ -0,0 +1,499 @@
+
+
+
+
+
+
+
diff --git a/js/dialogue/DropdownOptions.svelte b/js/dialogue/DropdownOptions.svelte
new file mode 100644
index 0000000000..fb53ce203a
--- /dev/null
+++ b/js/dialogue/DropdownOptions.svelte
@@ -0,0 +1,165 @@
+
+
+
+
+
+{#if show_options && !disabled}
+
Dia is a dialogue generation model that can generate realistic dialogue between two speakers. Use the dialogue component to create a conversation and then hit the submit button in the bottom right corner to see it come to life .
\n", " \"\"\"\n", " )\n", " with gr.Row():\n", " with gr.Column():\n", " dialogue = gr.Dialogue(\n", " speakers=speakers, emotions=emotions, formatter=formatter\n", " )\n", " with gr.Column():\n", " with gr.Row():\n", " audio = gr.Audio(label=\"Audio\")\n", " with gr.Row():\n", " gr.DeepLinkButton(value=\"Share Audio via Link\")\n", " with gr.Row():\n", " gr.Examples(\n", " examples=[\n", " [\n", " [\n", " {\n", " \"speaker\": \"Speaker 1\",\n", " \"text\": \"Why did the chicken cross the road?\",\n", " },\n", " {\"speaker\": \"Speaker 2\", \"text\": \"I don't know!\"},\n", " {\n", " \"speaker\": \"Speaker 1\",\n", " \"text\": \"to get to the other side! (laughs)\",\n", " },\n", " ]\n", " ],\n", " [\n", " [\n", " {\n", " \"speaker\": \"Speaker 1\",\n", " \"text\": \"I am a little tired today (sighs).\",\n", " },\n", " {\"speaker\": \"Speaker 2\", \"text\": \"Hang in there!\"},\n", " ]\n", " ],\n", " ],\n", " inputs=[dialogue],\n", " cache_examples=False,\n", " )\n", "\n", " dialogue.submit(query, [dialogue], audio)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/dia_dialogue_demo/app.py b/demo/dia_dialogue_demo/run.py
similarity index 100%
rename from demo/dia_dialogue_demo/app.py
rename to demo/dia_dialogue_demo/run.py
From d18c6bd5daae0d15cb9f12dc5df6c3af12d6922e Mon Sep 17 00:00:00 2001
From: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
Date: Mon, 28 Apr 2025 13:24:01 -0400
Subject: [PATCH 05/70] lint
---
gradio/components/dialogue.py | 58 ++++++--
js/dialogue/Dialogue.svelte | 174 ++++++++++++----------
js/dialogue/Index.svelte | 5 +-
js/dialogue/main.ts | 2 +-
js/dialogue/package.json | 79 +++++-----
js/dialogue/utils.ts | 4 +-
js/dropdown/shared/DropdownOptions.svelte | 1 -
7 files changed, 183 insertions(+), 140 deletions(-)
diff --git a/gradio/components/dialogue.py b/gradio/components/dialogue.py
index 65e8f17c35..05c9dedce5 100644
--- a/gradio/components/dialogue.py
+++ b/gradio/components/dialogue.py
@@ -1,5 +1,6 @@
+from __future__ import annotations
+
from collections.abc import Callable
-from typing import List
from gradio.components.base import server
from gradio.components.textbox import Textbox
@@ -11,8 +12,10 @@ class DialogueLine(GradioModel):
speaker: str
text: str
+
class DialogueModel(GradioRootModel):
- root: List[DialogueLine]
+ root: list[DialogueLine]
+
class Dialogue(Textbox):
"""
@@ -28,7 +31,9 @@ class Dialogue(Textbox):
]
data_model = DialogueModel
- def __init__(self,
+
+ def __init__(
+ self,
value: list[dict[str, str]] | Callable | None = None,
*,
speakers: list[str] | None = None,
@@ -36,7 +41,8 @@ def __init__(self,
emotions: list[str] | None = None,
separator: str = " ",
label: str | None = "Dialogue",
- info: str | None = "Type colon (:) in the dialogue line to see the available emotion and intonation tags",
+ info: str
+ | None = "Type colon (:) in the dialogue line to see the available emotion and intonation tags",
placeholder: str | None = "Enter dialogue here...",
show_label: bool | None = None,
container: bool = True,
@@ -53,7 +59,7 @@ def __init__(self,
max_lines: int | None = None,
show_submit_button: bool = True,
show_copy_button: bool = True,
- ):
+ ):
"""
Parameters:
value: Value of the dialogue. It is a list of dictionaries, each containing a 'speaker' key and a 'text' key. If a function is provided, the function will be called each time the app loads to set the initial value of this component.
@@ -79,8 +85,25 @@ def __init__(self,
show_submit_button: If True, includes a submit button to submit the dialogue.
autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
"""
- super().__init__(value="",
- label=label, info=info, placeholder=placeholder, show_label=show_label, container=container, scale=scale, min_width=min_width, interactive=interactive, visible=visible, elem_id=elem_id, autofocus=autofocus, autoscroll=autoscroll, elem_classes=elem_classes, render=render, key=key, max_lines=max_lines)
+ super().__init__(
+ value="",
+ label=label,
+ info=info,
+ placeholder=placeholder,
+ show_label=show_label,
+ container=container,
+ scale=scale,
+ min_width=min_width,
+ interactive=interactive,
+ visible=visible,
+ elem_id=elem_id,
+ autofocus=autofocus,
+ autoscroll=autoscroll,
+ elem_classes=elem_classes,
+ render=render,
+ key=key,
+ max_lines=max_lines,
+ )
self.speakers = speakers
self.emotions = emotions or []
self.formatter = formatter
@@ -89,7 +112,9 @@ def __init__(self,
self.show_copy_button = show_copy_button
if isinstance(value, Callable):
value = value()
- self.value = self.preprocess(DialogueModel(root=value)) if value is not None else value # type: ignore
+ self.value = (
+ self.preprocess(DialogueModel(root=value)) if value is not None else value
+ ) # type: ignore
def preprocess(self, payload: DialogueModel) -> str:
"""
@@ -102,7 +127,9 @@ def preprocess(self, payload: DialogueModel) -> str:
formatter = self.formatter
if not formatter:
formatter = self.default_formatter
- return self.separator.join([formatter(line.speaker, line.text) for line in payload.root])
+ return self.separator.join(
+ [formatter(line.speaker, line.text) for line in payload.root]
+ )
@staticmethod
def default_formatter(speaker: str, text: str) -> str:
@@ -111,7 +138,7 @@ def default_formatter(speaker: str, text: str) -> str:
@server
async def format(self, value: list[dict]):
"""Format the dialogue in the frontend into a string that's copied to the clipboard."""
- data = DialogueModel(root=value) # type: ignore
+ data = DialogueModel(root=value) # type: ignore
return self.preprocess(data)
def postprocess(self, value):
@@ -128,8 +155,13 @@ def as_example(self, value):
return self.preprocess(DialogueModel(root=value))
def example_payload(self):
- return [{"speaker": "Speaker 1", "text": "Hello, how are you?"}, {"speaker": "Speaker 2", "text": "I'm fine, thank you!"}]
+ return [
+ {"speaker": "Speaker 1", "text": "Hello, how are you?"},
+ {"speaker": "Speaker 2", "text": "I'm fine, thank you!"},
+ ]
def example_value(self):
- return [{"speaker": "Speaker 1", "text": "Hello, how are you?"}, {"speaker": "Speaker 2", "text": "I'm fine, thank you!"}]
-
+ return [
+ {"speaker": "Speaker 1", "text": "Hello, how are you?"},
+ {"speaker": "Speaker 2", "text": "I'm fine, thank you!"},
+ ]
diff --git a/js/dialogue/Dialogue.svelte b/js/dialogue/Dialogue.svelte
index 0b9e692dda..2ceaab506a 100644
--- a/js/dialogue/Dialogue.svelte
+++ b/js/dialogue/Dialogue.svelte
@@ -1,8 +1,5 @@
-
Date: Mon, 28 Apr 2025 14:21:57 -0400
Subject: [PATCH 06/70] lint
---
gradio/components/dialogue.py | 4 ++--
js/dialogue/Dialogue.svelte | 2 +-
js/dialogue/Index.svelte | 4 ++--
3 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/gradio/components/dialogue.py b/gradio/components/dialogue.py
index 05c9dedce5..c0423edaeb 100644
--- a/gradio/components/dialogue.py
+++ b/gradio/components/dialogue.py
@@ -113,8 +113,8 @@ def __init__(
if isinstance(value, Callable):
value = value()
self.value = (
- self.preprocess(DialogueModel(root=value)) if value is not None else value
- ) # type: ignore
+ self.preprocess(DialogueModel(root=value)) if value is not None else value # type: ignore
+ )
def preprocess(self, payload: DialogueModel) -> str:
"""
diff --git a/js/dialogue/Dialogue.svelte b/js/dialogue/Dialogue.svelte
index 2ceaab506a..19f6c4c68a 100644
--- a/js/dialogue/Dialogue.svelte
+++ b/js/dialogue/Dialogue.svelte
@@ -309,7 +309,7 @@
/>
- {#if !!!max_lines || (max_lines && i < max_lines - 1)}
+ {#if max_lines == undefined || (max_lines && i < max_lines - 1)}
+ {param.description
+ ? param.description
+ : "⚠︎ No description for this parameter in function docstring"}
+
+
+ {/each}
+ {:else}
+
No parameters
+ {/if}
+
+ {/if}
+
+ {/if}
+
+ {/each}
+
+
+
+ Integration: To add this MCP to clients that
+ support SSE (e.g. Cursor, Windsurf, Cline), simply add the
+ following configuration to your MCP config:
+
+ {:else}
+ This Gradio app can also serve as an MCP server, with an MCP
+ tool corresponding to each API endpoint. To enable this, launch
+ this Gradio app with .launch(mcp_server=True) or
+ set the GRADIO_MCP_SERVER env variable to
+ "True".
+ {/if}
{:else}
1. Confirm that you have cURL installed on your system.
{/if}
-
-
-
- 2. Find the API endpoint below corresponding to your desired
- function in the app. Copy the code snippet, replacing the
- placeholder values with your own input data.
- {#if space_id}If this is a private Space, you may need to pass your
- Hugging Face token as well (read more).{/if}
-
- Or use the
-
- to automatically generate your API requests.
- {#if current_language == "bash"}
Making a
- prediction and getting a result requires
- 2 requests: a
- POST
- and a GET request. The POST request
- returns an EVENT_ID, which is used in the second
- GET request to fetch the results. In these snippets,
- we've used awk and read to parse the
- results, combining these two requests into one command for ease of
- use. {#if username !== null}
- Note: connecting to an authenticated app requires an additional
- request.{/if} See
- curl docs.
- {/if}
-
-
-
{:else}
@@ -336,7 +549,6 @@
color: var(--body-text-color);
line-height: 1;
user-select: none;
- text-transform: capitalize;
}
.current-lang {
@@ -419,4 +631,173 @@
font-family: var(--font-mono);
font-size: var(--text-md);
}
+
+ code pre {
+ overflow-x: auto;
+ color: var(--body-text-color);
+ font-family: var(--font-mono);
+ tab-size: 2;
+ }
+
+ .token.string {
+ display: contents;
+ color: var(--color-accent-base);
+ }
+
+ .copy {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-top: 5px;
+ margin-right: 5px;
+ z-index: 10;
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xxl);
+ margin-top: var(--size-3);
+ margin-bottom: var(--size-3);
+ }
+
+ .desc {
+ color: var(--body-text-color-subdued);
+ }
+
+ .api-name {
+ color: var(--color-accent);
+ }
+
+ .mcp-url {
+ padding: var(--size-2);
+ position: relative;
+ }
+
+ .mcp-url label {
+ display: block;
+ margin-bottom: var(--size-2);
+ font-weight: 600;
+ color: var(--body-text-color);
+ }
+
+ .mcp-url .textbox {
+ display: flex;
+ align-items: center;
+ gap: var(--size-2);
+ border: 1px solid var(--border-color-primary);
+ border-radius: var(--radius-sm);
+ padding: var(--size-2);
+ background: var(--background-fill-primary);
+ }
+
+ .mcp-url input {
+ flex: 1;
+ border: none;
+ background: none;
+ color: var(--body-text-color);
+ font-family: var(--font-mono);
+ font-size: var(--text-md);
+ width: 100%;
+ }
+
+ .mcp-url input:focus {
+ outline: none;
+ }
+
+ .status-indicator {
+ display: inline-block;
+ margin-right: var(--size-1-5);
+ position: relative;
+ top: -1px;
+ font-size: 0.8em;
+ }
+
+ .status-indicator.active {
+ color: #4caf50;
+ animation: pulse 1s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ .mcp-tools {
+ margin-top: var(--size-4);
+ border: 1px solid var(--border-color-primary);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ }
+
+ .tool-item {
+ border-bottom: 1px solid var(--border-color-primary);
+ }
+
+ .tool-item:last-child {
+ border-bottom: none;
+ }
+
+ .tool-header {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--size-3);
+ background: var(--background-fill-primary);
+ border: none;
+ cursor: pointer;
+ text-align: left;
+ }
+
+ .tool-header:hover {
+ background: var(--background-fill-secondary);
+ }
+
+ .tool-name {
+ font-family: var(--font-mono);
+ font-weight: 600;
+ }
+
+ .tool-arrow {
+ color: var(--body-text-color-subdued);
+ }
+
+ .tool-content {
+ padding: var(--size-3);
+ background: var(--background-fill-secondary);
+ }
+
+ .tool-description {
+ margin-bottom: var(--size-3);
+ color: var(--body-text-color);
+ }
+ .parameter {
+ margin-bottom: var(--size-2);
+ padding: var(--size-2);
+ background: var(--background-fill-primary);
+ border-radius: var(--radius-sm);
+ }
+
+ .parameter code {
+ font-weight: 600;
+ color: var(--color-accent);
+ }
+
+ .parameter-type {
+ color: var(--body-text-color-subdued);
+ margin-left: var(--size-1);
+ }
+
+ .parameter-description {
+ margin-top: var(--size-1);
+ color: var(--body-text-color);
+ }
diff --git a/js/core/src/api_docs/InstallSnippet.svelte b/js/core/src/api_docs/InstallSnippet.svelte
index 8c8f0920f9..2bd1c33650 100644
--- a/js/core/src/api_docs/InstallSnippet.svelte
+++ b/js/core/src/api_docs/InstallSnippet.svelte
@@ -2,7 +2,7 @@
import CopyButton from "./CopyButton.svelte";
import { Block } from "@gradio/atoms";
- export let current_language: "python" | "javascript" | "bash";
+ export let current_language: "python" | "javascript" | "bash" | "mcp";
let py_install = "pip install gradio_client";
let js_install = "npm i -D @gradio/client";
diff --git a/js/core/src/api_docs/RecordingSnippet.svelte b/js/core/src/api_docs/RecordingSnippet.svelte
index ad6cd0f45d..0f51e20141 100644
--- a/js/core/src/api_docs/RecordingSnippet.svelte
+++ b/js/core/src/api_docs/RecordingSnippet.svelte
@@ -9,7 +9,7 @@
export let short_root: string;
export let root: string;
export let api_prefix = "";
- export let current_language: "python" | "javascript" | "bash";
+ export let current_language: "python" | "javascript" | "bash" | "mcp";
export let username: string | null;
let python_code: HTMLElement;
diff --git a/js/core/src/api_docs/img/mcp.svg b/js/core/src/api_docs/img/mcp.svg
new file mode 100644
index 0000000000..50e023b102
--- /dev/null
+++ b/js/core/src/api_docs/img/mcp.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/test/components/test_annotated_image.py b/test/components/test_annotated_image.py
index 91fdf2f381..fabd0d6349 100644
--- a/test/components/test_annotated_image.py
+++ b/test/components/test_annotated_image.py
@@ -61,19 +61,3 @@ def test_component_functions(self):
"key": None,
"show_fullscreen_button": True,
}
-
- def test_in_interface(self):
- def mask(img):
- top_left_corner = [0, 0, 20, 20]
- random_mask = np.random.randint(0, 2, img.shape[:2])
- return (img, [(top_left_corner, "left corner"), (random_mask, "random")])
-
- iface = gr.Interface(mask, "image", gr.AnnotatedImage())
- output = iface("test/test_files/bus.png")
- output_img, (mask1, _) = output["image"], output["annotations"]
- input_img = PIL.Image.open("test/test_files/bus.png") # type: ignore
- output_img = PIL.Image.open(output_img) # type: ignore
- mask1_img = PIL.Image.open(mask1["image"]) # type: ignore
-
- assert output_img.size == input_img.size
- assert mask1_img.size == input_img.size
diff --git a/test/test_mcp.py b/test/test_mcp.py
new file mode 100644
index 0000000000..1ef0626b79
--- /dev/null
+++ b/test/test_mcp.py
@@ -0,0 +1,88 @@
+import os
+import tempfile
+
+import pytest
+from PIL import Image
+
+import gradio as gr
+from gradio.data_classes import FileData
+from gradio.mcp import GradioMCPServer
+
+with gr.Blocks() as app:
+ t1 = gr.Textbox(label="Test Textbox")
+ t2 = gr.Textbox(label="Test Textbox 2")
+ t1.submit(lambda x: x, t1, t2, api_name="test_tool")
+
+
+def test_gradio_mcp_server_initialization():
+ server = GradioMCPServer(app)
+ assert server.blocks == app
+ assert server.mcp_server is not None
+
+
+def test_get_block_fn_from_tool_name():
+ server = GradioMCPServer(app)
+ result = server.get_block_fn_from_tool_name("test_tool")
+ assert result == app.fns[0]
+ result = server.get_block_fn_from_tool_name("nonexistent_tool")
+ assert result is None
+
+
+def test_convert_strings_to_filedata():
+ server = GradioMCPServer(app)
+
+ test_data = {
+ "text": "test text",
+ "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+ }
+ filedata_positions: list[list[str | int]] = [["image"]]
+ result = server.convert_strings_to_filedata(test_data, filedata_positions)
+ assert isinstance(result["image"], FileData)
+ assert os.path.exists(result["image"].path)
+
+ test_data = {"image": "invalid_data"}
+ with pytest.raises(ValueError):
+ server.convert_strings_to_filedata(test_data, filedata_positions)
+
+
+def test_postprocess_output_data():
+ server = GradioMCPServer(app)
+
+ with tempfile.NamedTemporaryFile(suffix=".png") as temp_file:
+ img = Image.new("RGB", (10, 10), color="red")
+ img.save(temp_file.name)
+ url = f"http://localhost:7860/gradio_api/file={temp_file.name}"
+ test_data = [
+ {"path": temp_file.name, "url": url, "meta": {"_type": "gradio.FileData"}}
+ ]
+ result = server.postprocess_output_data(test_data)
+ assert len(result) == 2
+ assert result[0].type == "image"
+ assert result[0].mimeType == "image/png"
+ assert result[1].type == "text"
+ assert url in result[1].text
+
+ test_data = ["test text"]
+ result = server.postprocess_output_data(test_data)
+ assert len(result) == 1
+ assert result[0].type == "text"
+ assert result[0].text == "test text"
+
+
+def test_simplify_filedata_schema():
+ server = GradioMCPServer(app)
+
+ test_schema = {
+ "type": "object",
+ "properties": {
+ "text": {"type": "string"},
+ "image": {
+ "type": "object",
+ "properties": {"meta": {"default": {"_type": "gradio.FileData"}}},
+ },
+ },
+ }
+
+ simplified_schema, filedata_positions = server.simplify_filedata_schema(test_schema)
+ assert simplified_schema["properties"]["image"]["type"] == "string"
+ assert filedata_positions == [["image"]]
diff --git a/test/test_routes.py b/test/test_routes.py
index 249085dc82..49e3f773e1 100644
--- a/test/test_routes.py
+++ b/test/test_routes.py
@@ -1704,6 +1704,7 @@ def test_mount_gradio_app_args_match_launch_args():
"self",
"strict_cors",
"max_threads",
+ "mcp_server",
}
missing_params = []
diff --git a/test/test_utils.py b/test/test_utils.py
index f70f352e18..b0c5d912be 100644
--- a/test/test_utils.py
+++ b/test/test_utils.py
@@ -32,6 +32,7 @@
download_if_url,
error_payload,
get_extension_from_file_path_or_url,
+ get_function_description,
get_function_params,
get_icon_path,
get_type_hints,
@@ -724,3 +725,108 @@ def test_error_payload():
"visible": True,
"title": "Error",
}
+
+
+class TestGetFunctionDescription:
+ def test_basic_function_description(self):
+ def test_func():
+ """This is a test function.
+ Args:
+ param1: First parameter
+ param2: Second parameter
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function."
+ assert parameters == {"param1": "First parameter", "param2": "Second parameter"}
+
+ def test_function_with_no_docstring(self):
+ def test_func():
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == ""
+ assert parameters == {}
+
+ def test_function_with_no_parameters(self):
+ def test_func():
+ """This is a test function with no parameters."""
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function with no parameters."
+ assert parameters == {}
+
+ def test_function_with_alternate_parameter_section(self):
+ def test_func():
+ """This is a test function.
+ Parameters:
+ param1: First parameter
+ param2: Second parameter
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function."
+ assert parameters == {"param1": "First parameter", "param2": "Second parameter"}
+
+ def test_function_with_arguments_section(self):
+ def test_func():
+ """This is a test function.
+ Arguments:
+ param1: First parameter
+ param2: Second parameter
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function."
+ assert parameters == {"param1": "First parameter", "param2": "Second parameter"}
+
+ def test_function_with_multiline_description(self):
+ def test_func():
+ """This is a test function.
+ It has multiple lines of description.
+ Args:
+ param1: First parameter
+ param2: Second parameter
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert (
+ description
+ == "This is a test function. It has multiple lines of description."
+ )
+ assert parameters == {"param1": "First parameter", "param2": "Second parameter"}
+
+ def test_function_with_malformed_params(self):
+ def test_func():
+ """This is a test function.
+ Args:
+ param1: description1
+ param2
+ param3: description3
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function."
+ assert parameters == {"param1": "description1", "param3": "description3"}
+
+ def test_function_with_nested_colons(self):
+ def test_func():
+ """This is a test function.
+ Args:
+ param1: description1: with nested colon
+ param2: description2
+ """
+ pass
+
+ description, parameters = get_function_description(test_func)
+ assert description == "This is a test function."
+ assert parameters == {
+ "param1": "description1: with nested colon",
+ "param2": "description2",
+ }
From a4b6b1be88165883e5ec59afb1dbe32c0fb621fc Mon Sep 17 00:00:00 2001
From: Gradio PR Bot <121576822+gradio-pr-bot@users.noreply.github.com>
Date: Tue, 29 Apr 2025 15:31:08 -0700
Subject: [PATCH 19/70] chore: update versions (#11100)
Co-authored-by: github-actions[bot]
---
.changeset/huge-views-punch.md | 7 -------
.changeset/open-things-worry.md | 6 ------
CHANGELOG.md | 10 ++++++++++
client/python/CHANGELOG.md | 6 ++++++
client/python/gradio_client/CHANGELOG.md | 6 ++++++
client/python/gradio_client/package.json | 2 +-
gradio/CHANGELOG.md | 10 ++++++++++
gradio/package.json | 2 +-
js/app/CHANGELOG.md | 6 ++++++
js/app/package.json | 2 +-
js/chatbot/CHANGELOG.md | 6 ++++++
js/chatbot/package.json | 2 +-
js/core/CHANGELOG.md | 6 ++++++
js/core/package.json | 2 +-
js/lite/CHANGELOG.md | 6 ++++++
js/lite/package.json | 2 +-
js/spa/CHANGELOG.md | 6 ++++++
requirements.txt | 2 +-
18 files changed, 69 insertions(+), 20 deletions(-)
delete mode 100644 .changeset/huge-views-punch.md
delete mode 100644 .changeset/open-things-worry.md
diff --git a/.changeset/huge-views-punch.md b/.changeset/huge-views-punch.md
deleted file mode 100644
index f5a85c4d7e..0000000000
--- a/.changeset/huge-views-punch.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@gradio/core": minor
-"gradio": minor
-"gradio_client": minor
----
-
-feat:Let Gradio apps also be MCP Servers
diff --git a/.changeset/open-things-worry.md b/.changeset/open-things-worry.md
deleted file mode 100644
index 10868823d9..0000000000
--- a/.changeset/open-things-worry.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@gradio/chatbot": patch
-"gradio": patch
----
-
-fix:Fix #10320: Chatbot - Ensure all messages in a group are editable
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93733de513..e5da08bc8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
# gradio
+## 5.28.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers. Thanks @abidlabs!
+
+### Fixes
+
+- [#11097](https://github.com/gradio-app/gradio/pull/11097) [`bb5a3c5`](https://github.com/gradio-app/gradio/commit/bb5a3c5b6b4459fb4d491bcc5a625e7fee7e502c) - Fix #10320: Chatbot - Ensure all messages in a group are editable. Thanks @eduardopalricas33!
+
## 5.27.1
### Fixes
diff --git a/client/python/CHANGELOG.md b/client/python/CHANGELOG.md
index c8ed263c46..3a231ea2c0 100644
--- a/client/python/CHANGELOG.md
+++ b/client/python/CHANGELOG.md
@@ -1,5 +1,11 @@
# gradio_client
+## 1.10.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers. Thanks @abidlabs!
+
## 1.9.1
### Fixes
diff --git a/client/python/gradio_client/CHANGELOG.md b/client/python/gradio_client/CHANGELOG.md
index c8ed263c46..3a231ea2c0 100644
--- a/client/python/gradio_client/CHANGELOG.md
+++ b/client/python/gradio_client/CHANGELOG.md
@@ -1,5 +1,11 @@
# gradio_client
+## 1.10.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers. Thanks @abidlabs!
+
## 1.9.1
### Fixes
diff --git a/client/python/gradio_client/package.json b/client/python/gradio_client/package.json
index 0d05fda5a6..8398f0cc3b 100644
--- a/client/python/gradio_client/package.json
+++ b/client/python/gradio_client/package.json
@@ -1,6 +1,6 @@
{
"name": "gradio_client",
- "version": "1.9.1",
+ "version": "1.10.0",
"description": "",
"python": "true",
"main_changeset": true,
diff --git a/gradio/CHANGELOG.md b/gradio/CHANGELOG.md
index 93733de513..e5da08bc8a 100644
--- a/gradio/CHANGELOG.md
+++ b/gradio/CHANGELOG.md
@@ -1,5 +1,15 @@
# gradio
+## 5.28.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers. Thanks @abidlabs!
+
+### Fixes
+
+- [#11097](https://github.com/gradio-app/gradio/pull/11097) [`bb5a3c5`](https://github.com/gradio-app/gradio/commit/bb5a3c5b6b4459fb4d491bcc5a625e7fee7e502c) - Fix #10320: Chatbot - Ensure all messages in a group are editable. Thanks @eduardopalricas33!
+
## 5.27.1
### Fixes
diff --git a/gradio/package.json b/gradio/package.json
index 74da8fb3fe..29063196a5 100644
--- a/gradio/package.json
+++ b/gradio/package.json
@@ -1,6 +1,6 @@
{
"name": "gradio",
- "version": "5.27.1",
+ "version": "5.28.0",
"description": "",
"python": "true"
}
\ No newline at end of file
diff --git a/js/app/CHANGELOG.md b/js/app/CHANGELOG.md
index 4c0e982d48..fc87c02077 100644
--- a/js/app/CHANGELOG.md
+++ b/js/app/CHANGELOG.md
@@ -1,5 +1,11 @@
# @self/app
+## 1.49.6
+
+### Dependency updates
+
+- @gradio/core@0.16.0
+
## 1.49.5
### Dependency updates
diff --git a/js/app/package.json b/js/app/package.json
index 97ecf6e1bc..3fe62b90c3 100644
--- a/js/app/package.json
+++ b/js/app/package.json
@@ -1,6 +1,6 @@
{
"name": "@self/app",
- "version": "1.49.5",
+ "version": "1.49.6",
"private": true,
"scripts": {
"dev": "vite dev",
diff --git a/js/chatbot/CHANGELOG.md b/js/chatbot/CHANGELOG.md
index 930295b5f7..dc4ef8230e 100644
--- a/js/chatbot/CHANGELOG.md
+++ b/js/chatbot/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gradio/chatbot
+## 0.26.4
+
+### Fixes
+
+- [#11097](https://github.com/gradio-app/gradio/pull/11097) [`bb5a3c5`](https://github.com/gradio-app/gradio/commit/bb5a3c5b6b4459fb4d491bcc5a625e7fee7e502c) - Fix #10320: Chatbot - Ensure all messages in a group are editable. Thanks @eduardopalricas33!
+
## 0.26.3
### Dependency updates
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index 09f572898e..44027ab8de 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -1,6 +1,6 @@
{
"name": "@gradio/chatbot",
- "version": "0.26.3",
+ "version": "0.26.4",
"description": "Gradio UI packages",
"type": "module",
"author": "",
diff --git a/js/core/CHANGELOG.md b/js/core/CHANGELOG.md
index e7cbcfd8dd..37ffc859bb 100644
--- a/js/core/CHANGELOG.md
+++ b/js/core/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gradio/core
+## 0.16.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers. Thanks @abidlabs!
+
## 0.15.1
### Fixes
diff --git a/js/core/package.json b/js/core/package.json
index 5244e6bafb..1a316fa11b 100644
--- a/js/core/package.json
+++ b/js/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@gradio/core",
- "version": "0.15.1",
+ "version": "0.16.0",
"type": "module",
"devDependencies": {
"@gradio/accordion": "workspace:^",
diff --git a/js/lite/CHANGELOG.md b/js/lite/CHANGELOG.md
index e11a15ac20..b994560f69 100644
--- a/js/lite/CHANGELOG.md
+++ b/js/lite/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gradio/lite
+## 5.28.0
+
+### Dependency updates
+
+- @gradio/core@0.16.0
+
## 5.27.1
### Dependency updates
diff --git a/js/lite/package.json b/js/lite/package.json
index 3350029e08..0e4762ce4f 100644
--- a/js/lite/package.json
+++ b/js/lite/package.json
@@ -1,6 +1,6 @@
{
"name": "@gradio/lite",
- "version": "5.27.1",
+ "version": "5.28.0",
"description": "Serverless Gradio",
"type": "module",
"main": "dist/lite.js",
diff --git a/js/spa/CHANGELOG.md b/js/spa/CHANGELOG.md
index 162e1428c0..b277c1b78d 100644
--- a/js/spa/CHANGELOG.md
+++ b/js/spa/CHANGELOG.md
@@ -4,6 +4,12 @@
### Dependency updates
+- @gradio/core@0.16.0
+
+## 0.8.1
+
+### Dependency updates
+
- @gradio/core@0.15.1
## 0.8.1
diff --git a/requirements.txt b/requirements.txt
index 7bbd1a3c39..0d34a6d6e8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,7 +4,7 @@ audioop-lts<1.0; python_version >= "3.13" # this is a replacement for the built-
fastapi>=0.115.2,<1.0
ffmpy
groovy~=0.1
-gradio_client==1.9.1
+gradio_client==1.10.0
httpx>=0.24.1
huggingface_hub>=0.28.1
Jinja2<4.0
From fd6f4ebba043772f6d9019c6dda1940a778fee1c Mon Sep 17 00:00:00 2001
From: Ali Abdalla
Date: Tue, 29 Apr 2025 21:10:40 -0700
Subject: [PATCH 20/70] switch to correct link (#11104)
---
guides/10_other-tutorials/building-an-mcp-client-with-gradio.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/guides/10_other-tutorials/building-an-mcp-client-with-gradio.md b/guides/10_other-tutorials/building-an-mcp-client-with-gradio.md
index 54c588db41..d8a1339e3f 100644
--- a/guides/10_other-tutorials/building-an-mcp-client-with-gradio.md
+++ b/guides/10_other-tutorials/building-an-mcp-client-with-gradio.md
@@ -413,4 +413,4 @@ Now that you have a working MCP system, here are some ideas to extend it:
Congratulations! You've successfully built an MCP Client and Server that allows Claude to generate images based on text prompts. This is just the beginning of what you can do with Gradio and MCP. This guide enables you to build complex AI applications that can use Claude or any other powerful LLM to interact with virtually any external tool or service.
-Read our other Guide on using [Gradio apps as MCP Servers](insert-link-to-the-other-mcp-guide-here).
+Read our other Guide on using [Gradio apps as MCP Servers](./building-mcp-server-with-gradio).
From bc86fb1edf638fb71f9b7d909eb06363af95cf92 Mon Sep 17 00:00:00 2001
From: Martim-Rito <134000281+Martim-Rito@users.noreply.github.com>
Date: Wed, 30 Apr 2025 15:48:49 +0100
Subject: [PATCH 21/70] Fix #10281: Dragging image replaces existing instead of
opening new tab (#11098)
* Fix #10281: Dragging image replaces existing instead of opening new tab
I updated the drag and drop event handlers in the imageUploader
component (on_drag_over and on_drop) to clear the
existing image before processing the newly dropped file.
Additionally, I modified an end-to-end test to verify that the number
of browser tabs remains the same after dropping a new file.
* add changeset
* Apply code review suggestions: rename to snake_case and reuse is_valid_file
---------
Co-authored-by: gradio-pr-bot
Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
---
.changeset/loose-paths-burn.md | 7 +++++
js/image/shared/ImageUploader.svelte | 30 ++++++++++++++++++++++
js/spa/test/image_component_events.spec.ts | 6 ++++-
js/upload/src/Upload.svelte | 18 +++++++++++++
4 files changed, 60 insertions(+), 1 deletion(-)
create mode 100644 .changeset/loose-paths-burn.md
diff --git a/.changeset/loose-paths-burn.md b/.changeset/loose-paths-burn.md
new file mode 100644
index 0000000000..5240375464
--- /dev/null
+++ b/.changeset/loose-paths-burn.md
@@ -0,0 +1,7 @@
+---
+"@gradio/image": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Fix #10281: Dragging image replaces existing instead of opening new tab
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index ae2c5a88ff..49eed4e7f1 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -57,6 +57,8 @@
} else {
value = detail;
}
+
+ await tick();
dispatch("upload");
}
}
@@ -132,6 +134,31 @@
}
let image_container: HTMLElement;
+
+ function on_drag_over(evt: DragEvent): void {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (evt.dataTransfer) {
+ evt.dataTransfer.dropEffect = "copy";
+ }
+
+ dragging = true;
+ }
+
+ async function on_drop(evt: DragEvent): Promise {
+ evt.preventDefault();
+ evt.stopPropagation();
+ dragging = false;
+
+ if (value) {
+ handle_clear();
+ await tick();
+ }
+
+ active_source = "upload";
+ await tick();
+ upload_input.load_files_from_drop(evt);
+ }
@@ -153,10 +180,13 @@
/>
{/if}
+
1}
style:width={value ? "auto" : "100%"}
+ on:dragover={on_drag_over}
+ on:drop={on_drop}
>
{
});
test("Image drag-to-upload replaces an image successfully.", async ({
- page
+ page,
+ context
}) => {
+ const initialPages = context.pages();
await drag_and_drop_file(
page,
"input[type=file]",
@@ -79,6 +81,8 @@ test("Image drag-to-upload replaces an image successfully.", async ({
await expect(page.getByLabel("# Change Events").first()).toHaveValue("2");
await expect(page.getByLabel("# Upload Events")).toHaveValue("2");
+ const newPages = context.pages();
+ expect(newPages.length).toBe(initialPages.length);
});
test("Image copy from clipboard dispatches upload event.", async ({ page }) => {
diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
index 43e4693567..13f5e7f68f 100644
--- a/js/upload/src/Upload.svelte
+++ b/js/upload/src/Upload.svelte
@@ -240,6 +240,24 @@
dispatch("load", files_to_load);
}
}
+
+ export async function load_files_from_drop(e: DragEvent): Promise {
+ dragging = false;
+ if (!e.dataTransfer?.files) return;
+ const files_to_load = Array.from(e.dataTransfer.files).filter(
+ is_valid_file
+ );
+
+ if (format != "blob") {
+ await load_files(files_to_load);
+ } else {
+ if (file_count === "single") {
+ dispatch("load", files_to_load[0]);
+ return;
+ }
+ dispatch("load", files_to_load);
+ }
+ }
{#if filetype === "clipboard"}
From d6266b92c5f39bea6ca328c1df2b1ae41b627629 Mon Sep 17 00:00:00 2001
From: Abubakar Abid
Date: Wed, 30 Apr 2025 10:19:20 -0700
Subject: [PATCH 22/70] Update MCP docs (#11106)
* update docs
* change
* add schema url
---
demo/mcp_tools/run.ipynb | 2 +-
demo/mcp_tools/run.py | 30 +++---
.../building-mcp-server-with-gradio.md | 94 +++++++++++++++++--
3 files changed, 98 insertions(+), 28 deletions(-)
diff --git a/demo/mcp_tools/run.ipynb b/demo/mcp_tools/run.ipynb
index ba25233774..c1e816f687 100644
--- a/demo/mcp_tools/run.ipynb
+++ b/demo/mcp_tools/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: mcp_tools"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/mcp_tools/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "from pathlib import Path\n", "import os\n", "from PIL import Image\n", "\n", "def prime_factors(n):\n", " \"\"\"\n", " Compute the prime factorization of a positive integer.\n", "\n", " Args:\n", " n (int): The integer to factorize. Must be greater than 1.\n", "\n", " Returns:\n", " List[int]: A list of prime factors in ascending order.\n", "\n", " Raises:\n", " ValueError: If n is not greater than 1.\n", " \"\"\"\n", " n = int(n)\n", " if n <= 1:\n", " raise ValueError(\"Input must be an integer greater than 1.\")\n", "\n", " factors = []\n", " while n % 2 == 0:\n", " factors.append(2)\n", " n //= 2\n", "\n", " divisor = 3\n", " while divisor * divisor <= n:\n", " while n % divisor == 0:\n", " factors.append(divisor)\n", " n //= divisor\n", " divisor += 2\n", "\n", " if n > 1:\n", " factors.append(n)\n", "\n", " return factors\n", "\n", "\n", "def generate_cheetah_image():\n", " \"\"\"\n", " Generate a cheetah image.\n", "\n", " Returns:\n", " The generated cheetah image.\n", " \"\"\"\n", " return Path(os.path.abspath('')) / \"cheetah.jpg\"\n", "\n", "\n", "def image_orientation(image: Image.Image) -> str:\n", " \"\"\"\n", " Returns whether image is portrait or landscape.\n", "\n", " Args:\n", " image (Image.Image): The image to check.\n", "\n", " Returns:\n", " str: \"Portrait\" if image is portrait, \"Landscape\" if image is landscape.\n", " \"\"\"\n", " return \"Portrait\" if image.height > image.width else \"Landscape\"\n", "\n", "\n", "def sepia(input_img):\n", " \"\"\"\n", " Apply a sepia filter to the input image.\n", "\n", " Args:\n", " input_img (str): The input image to apply the sepia filter to.\n", "\n", " Returns:\n", " The sepia filtered image.\n", " \"\"\"\n", " sepia_filter = np.array([\n", " [0.393, 0.769, 0.189],\n", " [0.349, 0.686, 0.168],\n", " [0.272, 0.534, 0.131]\n", " ])\n", " sepia_img = input_img.dot(sepia_filter.T)\n", " sepia_img /= sepia_img.max()\n", " return sepia_img\n", "\n", "\n", "\n", "demo = gr.TabbedInterface(\n", " [\n", " gr.Interface(prime_factors, gr.Textbox(), gr.Textbox(), api_name=\"prime_factors\"),\n", " gr.Interface(generate_cheetah_image, None, gr.Image(), api_name=\"generate_cheetah_image\"),\n", " gr.Interface(image_orientation, gr.Image(type=\"pil\"), gr.Textbox(), api_name=\"image_orientation\"),\n", " gr.Interface(sepia, gr.Image(), gr.Image(), api_name=\"sepia\"),\n", " ],\n", " [\n", " \"Prime Factors\",\n", " \"Cheetah Image\",\n", " \"Image Orientation Checker\",\n", " \"Sepia Filter\",\n", " ]\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch(mcp_server=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: mcp_tools"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/mcp_tools/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "from pathlib import Path\n", "import os\n", "from PIL import Image\n", "\n", "def prime_factors(n: str):\n", " \"\"\"\n", " Compute the prime factorization of a positive integer.\n", "\n", " Args:\n", " n (str): The integer to factorize. Must be greater than 1.\n", " \"\"\"\n", " n_int = int(n)\n", " if n_int <= 1:\n", " raise ValueError(\"Input must be an integer greater than 1.\")\n", "\n", " factors = []\n", " while n_int % 2 == 0:\n", " factors.append(2)\n", " n_int //= 2\n", "\n", " divisor = 3\n", " while divisor * divisor <= n_int:\n", " while n_int % divisor == 0:\n", " factors.append(divisor)\n", " n_int //= divisor\n", " divisor += 2\n", "\n", " if n_int > 1:\n", " factors.append(n_int)\n", "\n", " return factors\n", "\n", "\n", "def generate_cheetah_image():\n", " \"\"\"\n", " Generate a cheetah image.\n", "\n", " Returns:\n", " The generated cheetah image.\n", " \"\"\"\n", " return Path(os.path.abspath('')) / \"cheetah.jpg\"\n", "\n", "\n", "def image_orientation(image: Image.Image) -> str:\n", " \"\"\"\n", " Returns whether image is portrait or landscape.\n", "\n", " Args:\n", " image (Image.Image): The image to check.\n", "\n", " Returns:\n", " str: \"Portrait\" if image is portrait, \"Landscape\" if image is landscape.\n", " \"\"\"\n", " return \"Portrait\" if image.height > image.width else \"Landscape\"\n", "\n", "\n", "def sepia(input_img):\n", " \"\"\"\n", " Apply a sepia filter to the input image.\n", "\n", " Args:\n", " input_img (np.array): The input image to apply the sepia filter to.\n", "\n", " Returns:\n", " The sepia filtered image.\n", " \"\"\"\n", " sepia_filter = np.array([\n", " [0.393, 0.769, 0.189],\n", " [0.349, 0.686, 0.168],\n", " [0.272, 0.534, 0.131]\n", " ])\n", " sepia_img = input_img.dot(sepia_filter.T)\n", " sepia_img /= sepia_img.max()\n", " return sepia_img\n", "\n", "\n", "\n", "demo = gr.TabbedInterface(\n", " [\n", " gr.Interface(prime_factors, gr.Textbox(), gr.Textbox(), api_name=\"prime_factors\"),\n", " gr.Interface(generate_cheetah_image, None, gr.Image(), api_name=\"generate_cheetah_image\"),\n", " gr.Interface(image_orientation, gr.Image(type=\"pil\"), gr.Textbox(), api_name=\"image_orientation\"),\n", " gr.Interface(sepia, gr.Image(), gr.Image(), api_name=\"sepia\"),\n", " ],\n", " [\n", " \"Prime Factors\",\n", " \"Cheetah Image\",\n", " \"Image Orientation Checker\",\n", " \"Sepia Filter\",\n", " ]\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch(mcp_server=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/mcp_tools/run.py b/demo/mcp_tools/run.py
index dd538a2807..459efd2a83 100644
--- a/demo/mcp_tools/run.py
+++ b/demo/mcp_tools/run.py
@@ -4,37 +4,31 @@
import os
from PIL import Image
-def prime_factors(n):
+def prime_factors(n: str):
"""
Compute the prime factorization of a positive integer.
Args:
- n (int): The integer to factorize. Must be greater than 1.
-
- Returns:
- List[int]: A list of prime factors in ascending order.
-
- Raises:
- ValueError: If n is not greater than 1.
+ n (str): The integer to factorize. Must be greater than 1.
"""
- n = int(n)
- if n <= 1:
+ n_int = int(n)
+ if n_int <= 1:
raise ValueError("Input must be an integer greater than 1.")
factors = []
- while n % 2 == 0:
+ while n_int % 2 == 0:
factors.append(2)
- n //= 2
+ n_int //= 2
divisor = 3
- while divisor * divisor <= n:
- while n % divisor == 0:
+ while divisor * divisor <= n_int:
+ while n_int % divisor == 0:
factors.append(divisor)
- n //= divisor
+ n_int //= divisor
divisor += 2
- if n > 1:
- factors.append(n)
+ if n_int > 1:
+ factors.append(n_int)
return factors
@@ -67,7 +61,7 @@ def sepia(input_img):
Apply a sepia filter to the input image.
Args:
- input_img (str): The input image to apply the sepia filter to.
+ input_img (np.array): The input image to apply the sepia filter to.
Returns:
The sepia filtered image.
diff --git a/guides/10_other-tutorials/building-mcp-server-with-gradio.md b/guides/10_other-tutorials/building-mcp-server-with-gradio.md
index 219ace7350..5b1524e8d6 100644
--- a/guides/10_other-tutorials/building-mcp-server-with-gradio.md
+++ b/guides/10_other-tutorials/building-mcp-server-with-gradio.md
@@ -11,10 +11,10 @@ Punchline: it's as simple as setting `mcp_server=True` in `.launch()`.
If not already installed, please install Gradio with the MCP extra:
```bash
-pip install gradio[mcp]
+pip install "gradio[mcp]"
```
-This will install the necessary dependencies, including the `mcp` package. Also, you will need a LLM application that supports tool calling using the MCP protocol, such as Claude Desktop, Cursor, or Cline (these are known as "MCP Clients").
+This will install the necessary dependencies, including the `mcp` package. Also, you will need an LLM application that supports tool calling using the MCP protocol, such as Claude Desktop, Cursor, or Cline (these are known as "MCP Clients").
## What is an MCP Server?
@@ -26,7 +26,7 @@ LLMs are famously not great at counting the number of letters in a word (e.g. th
$code_letter_counter
-Notice that we have set `mcp_server=True` in `.launch()`. This is all that's needed for your Gradio app to serve as an MCP server! Now, when you run this app, it will:
+Notice that we have: (1) included a detailed docstring for our function, and (2) set `mcp_server=True` in `.launch()`. This is all that's needed for your Gradio app to serve as an MCP server! Now, when you run this app, it will:
1. Start the regular Gradio web interface
2. Start the MCP server
@@ -37,7 +37,7 @@ The MCP server will be accessible at:
http://your-server:port/gradio_api/mcp/sse
```
-Gradio automatically converts the `letter_counter` function into an MCP tool that can be used by LLMs. The docstring of the function of the function will be used to generate the description of the tool and its parameters.
+Gradio automatically converts the `letter_counter` function into an MCP tool that can be used by LLMs. The docstring of the function and the type hints of arguments will be used to generate the description of the tool and its parameters.
All you need to do is add this URL endpoint to your MCP Client (e.g. Claude Desktop, Cursor, or Cline), which typically means pasting this config in the settings:
@@ -53,6 +53,8 @@ All you need to do is add this URL endpoint to your MCP Client (e.g. Claude Desk
(By the way, you can find the exact config to copy-paste by going to the "View API" link in the footer of your Gradio app, and then clicking on "MCP").
+
+
## Key features of the Gradio <> MCP Integration
1. **Tool Conversion**: Each API endpoint in your Gradio app is automatically converted into an MCP tool with a corresponding name, description, and input schema. To view the tools and schemas, visit http://your-server:port/gradio_api/mcp/schema or go to the "View API" link in the footer of your Gradio app, and then click on "MCP".
@@ -111,10 +113,8 @@ import sys
import io
import json
-# Initialize FastMCP server
mcp = FastMCP("gradio-spaces")
-# Dictionary to store Gradio clients
clients = {}
def get_client(space_id: str) -> Client:
@@ -171,14 +171,11 @@ async def run_dia_tts(prompt: str, space_id: str = "ysharma/Dia-1.6B") -> str:
if __name__ == "__main__":
- # Ensure stdout uses UTF-8 encoding
import sys
import io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
- # Initialize and run the server
mcp.run(transport='stdio')
-
```
This server exposes two tools:
@@ -209,3 +206,82 @@ To use this MCP Server with Claude Desktop (as MCP Client):
Now, when you ask Claude about generating an image or transcribing audio, it can use your Gradio-powered tools to accomplish these tasks.
+## Troubleshooting your MCP Servers
+
+The MCP protocol is still in its infancy and you might see issues connecting to an MCP Server that you've built. We generally recommend using the [MCP Inspector Tool](https://github.com/modelcontextprotocol/inspector) to try connecting and debugging your MCP Server.
+
+Here are some things that may help:
+
+**1. Ensure that you've provided type hints and valid docstrings for your functions**
+
+As mentioned earlier, Gradio reads the docstrings for your functions and the type hints of input arguments to generate the description of the tool and parameters. A valid function and docstring looks like this (note the "Args:" block with indented parameter names underneath):
+
+```py
+def image_orientation(image: Image.Image) -> str:
+ """
+ Returns whether image is portrait or landscape.
+
+ Args:
+ image (Image.Image): The image to check.
+ """
+ return "Portrait" if image.height > image.width else "Landscape"
+```
+
+Note: You can preview the schema that is created for your MCP server by visiting the `http://your-server:port/gradio_api/mcp/schema` URL.
+
+**2. Try accepting input arguments as `str`**
+
+Some MCP Clients do not recognize parameters that are numeric or other complex types, but all of the MCP Clients that we've tested accept `str` input parameters. When in doubt, change your input parameter to be a `str` and then cast to a specific type in the function, as in this example:
+
+```py
+def prime_factors(n: str):
+ """
+ Compute the prime factorization of a positive integer.
+
+ Args:
+ n (str): The integer to factorize. Must be greater than 1.
+ """
+ n_int = int(n)
+ if n_int <= 1:
+ raise ValueError("Input must be an integer greater than 1.")
+
+ factors = []
+ while n_int % 2 == 0:
+ factors.append(2)
+ n_int //= 2
+
+ divisor = 3
+ while divisor * divisor <= n_int:
+ while n_int % divisor == 0:
+ factors.append(divisor)
+ n_int //= divisor
+ divisor += 2
+
+ if n_int > 1:
+ factors.append(n_int)
+
+ return factors
+```
+
+**3. Ensure that your MCP Client Supports SSE**
+
+Some MCP Clients, notably [Claude Desktop](https://claude.ai/download), do not yet support SSE-based MCP Servers. In those cases, you can use a tool such as [mcp-remote](https://github.com/geelen/mcp-remote). First install [Node.js](https://nodejs.org/en/download/). Then, add the following to your own MCP Client config:
+
+```
+{
+ "mcpServers": {
+ "gradio": {
+ "command": "npx",
+ "args": [
+ "mcp-remote",
+ "http://your-server:port/gradio_api/mcp/sse"
+ ]
+ }
+ }
+}
+```
+
+**4. Restart your MCP Client and MCP Server**
+
+Some MCP Clients require you to restart them every time you update the MCP configuration. Other times, if the connection between the MCP Client and servers breaks, you might need to restart the MCP server. If all else fails, try restarting both your MCP Client and MCP Servers!
+
From 50c5404d527b4d82537214343f5a839fefe0c352 Mon Sep 17 00:00:00 2001
From: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
Date: Wed, 30 Apr 2025 15:23:43 -0400
Subject: [PATCH 23/70] Fix file upload progress (#11102)
* Fix
* ready
* add changeset
* Fix
* add changeset
* Update gradio/routes.py
Co-authored-by: Abubakar Abid
---------
Co-authored-by: gradio-pr-bot
Co-authored-by: Abubakar Abid
---
.changeset/dirty-buses-throw.md | 5 +++++
demo/chatbot_editable/run.ipynb | 2 +-
demo/chatbot_editable/run.py | 10 +++++-----
gradio/route_utils.py | 7 ++++++-
gradio/routes.py | 9 ++++++++-
5 files changed, 25 insertions(+), 8 deletions(-)
create mode 100644 .changeset/dirty-buses-throw.md
diff --git a/.changeset/dirty-buses-throw.md b/.changeset/dirty-buses-throw.md
new file mode 100644
index 0000000000..bca7da9f72
--- /dev/null
+++ b/.changeset/dirty-buses-throw.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix file upload progress
diff --git a/demo/chatbot_editable/run.ipynb b/demo/chatbot_editable/run.ipynb
index 13a255864a..8c541db750 100644
--- a/demo/chatbot_editable/run.ipynb
+++ b/demo/chatbot_editable/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", " chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", " add_message_btn = gr.Button(\"Add Message\")\n", " add_user_message_btn = gr.Button(\"Add User Message\")\n", "\n", " with gr.Row():\n", " concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", " concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", " edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", " def add_message(history: list, history2: list[list[str]]):\n", " usr_msg = \"I'm a user\"\n", " bot_msg = \"I'm a bot\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", " history2.append([usr_msg, bot_msg])\n", " return history, history2\n", " \n", " def add_user_message(history: list, history2: list[list[str | None]]):\n", " usr_msg = \"I'm a user\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history2.append([usr_msg, None])\n", " return history, history2\n", " \n", " add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " add_user_message_btn.click(add_user_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " chatbot.change(lambda m: \"|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", " chatbot2.change(lambda m: \"|\".join(\"|\".join(filter(None, x)) for x in m), chatbot2, concatenated_text2)\n", "\n", " def edit_message(edited_message: gr.EditData):\n", " return f\"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}\"\n", " \n", " chatbot.edit(edit_message, None, edited_messages)\n", " chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", " chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", " add_message_btn = gr.Button(\"Add Message\")\n", " add_user_message_btn = gr.Button(\"Add User Message\")\n", "\n", " with gr.Row():\n", " concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", " concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", " edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", " def add_message(history: list, history2: list[list[str]]):\n", " usr_msg = \"I'm a user\"\n", " bot_msg = \"I'm a bot\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", " history2.append([usr_msg, bot_msg])\n", " return history, history2\n", "\n", " def add_user_message(history: list, history2: list[list[str | None]]):\n", " usr_msg = \"I'm a user\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history2.append([usr_msg, None])\n", " return history, history2\n", "\n", " add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " add_user_message_btn.click(add_user_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " chatbot.change(lambda m: \"|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", " chatbot2.change(lambda m: \"|\".join(\"|\".join(filter(None, x)) for x in m), chatbot2, concatenated_text2)\n", "\n", " def edit_message(edited_message: gr.EditData): # type: ignore\n", " return f\"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}\" # type: ignore\n", "\n", " chatbot.edit(edit_message, None, edited_messages)\n", " chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_editable/run.py b/demo/chatbot_editable/run.py
index d231195d8f..9074a53954 100644
--- a/demo/chatbot_editable/run.py
+++ b/demo/chatbot_editable/run.py
@@ -19,21 +19,21 @@ def add_message(history: list, history2: list[list[str]]):
history.append({"role": "assistant", "content": bot_msg})
history2.append([usr_msg, bot_msg])
return history, history2
-
+
def add_user_message(history: list, history2: list[list[str | None]]):
usr_msg = "I'm a user"
history.append({"role": "user", "content": usr_msg})
history2.append([usr_msg, None])
return history, history2
-
+
add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])
add_user_message_btn.click(add_user_message, [chatbot, chatbot2], [chatbot, chatbot2])
chatbot.change(lambda m: "|".join(m["content"] for m in m), chatbot, concatenated_text1)
chatbot2.change(lambda m: "|".join("|".join(filter(None, x)) for x in m), chatbot2, concatenated_text2)
- def edit_message(edited_message: gr.EditData):
- return f"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}"
-
+ def edit_message(edited_message: gr.EditData): # type: ignore
+ return f"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}" # type: ignore
+
chatbot.edit(edit_message, None, edited_messages)
chatbot2.edit(edit_message, None, edited_messages)
diff --git a/gradio/route_utils.py b/gradio/route_utils.py
index f7de88fe7c..33d6639f8b 100644
--- a/gradio/route_utils.py
+++ b/gradio/route_utils.py
@@ -11,7 +11,7 @@
import shutil
import threading
import uuid
-from collections import deque
+from collections import defaultdict, deque
from collections.abc import AsyncGenerator, Callable
from contextlib import AbstractAsyncContextManager, AsyncExitStack, asynccontextmanager
from dataclasses import dataclass as python_dataclass
@@ -485,10 +485,15 @@ class FileUploadProgressNotQueuedError(Exception):
class FileUploadProgress:
def __init__(self) -> None:
self._statuses: dict[str, FileUploadProgressTracker] = {}
+ self._signals = defaultdict(asyncio.Event)
def track(self, upload_id: str):
if upload_id not in self._statuses:
self._statuses[upload_id] = FileUploadProgressTracker(deque(), False)
+ self._signals[upload_id].set()
+
+ async def is_tracked(self, upload_id: str) -> bool:
+ return await self._signals[upload_id].wait()
def append(self, upload_id: str, filename: str, message_bytes: bytes):
if upload_id not in self._statuses:
diff --git a/gradio/routes.py b/gradio/routes.py
index 613e07428e..6140adece6 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -1406,7 +1406,7 @@ async def get_queue_status():
return app.get_blocks()._queue.get_status()
@router.get("/upload_progress")
- def get_upload_progress(upload_id: str, request: fastapi.Request):
+ async def get_upload_progress(upload_id: str, request: fastapi.Request):
async def sse_stream(request: fastapi.Request):
last_heartbeat = time.perf_counter()
is_done = False
@@ -1441,6 +1441,13 @@ async def sse_stream(request: fastapi.Request):
yield f"data: {json.dumps(message)}\n\n"
last_heartbeat = time.perf_counter()
+ try:
+ await asyncio.wait_for(
+ file_upload_statuses.is_tracked(upload_id), timeout=3
+ )
+ except (asyncio.TimeoutError, TimeoutError):
+ return PlainTextResponse("Upload not found", status_code=404)
+
return StreamingResponse(
sse_stream(request),
media_type="text/event-stream",
From 8e64b7f75371ff378bdc197f941496cda3c73dcf Mon Sep 17 00:00:00 2001
From: Abubakar Abid
Date: Wed, 30 Apr 2025 19:39:31 -0700
Subject: [PATCH 24/70] Add `openapi.json` route for Gradio apps as well as
docs on the "view API" page (#11103)
* add route
* add changeset
* add changeset
* add test
* changes
* changes
* changes
* changes
* changes
* changes
* add more images/videos
* Update guides/04_additional-features/07_sharing-your-app.md
Co-authored-by: Ali Abdalla
* Update guides/04_additional-features/14_view-api-page.md
Co-authored-by: Ali Abdalla
---------
Co-authored-by: gradio-pr-bot
Co-authored-by: Ali Abdalla
---
.changeset/lazy-coins-marry.md | 5 +
gradio/routes.py | 98 +++++++++++++++++++
.../07_sharing-your-app.md | 4 +-
.../14_view-api-page.md | 59 +++++++++++
test/test_routes.py | 5 +
5 files changed, 169 insertions(+), 2 deletions(-)
create mode 100644 .changeset/lazy-coins-marry.md
create mode 100644 guides/04_additional-features/14_view-api-page.md
diff --git a/.changeset/lazy-coins-marry.md b/.changeset/lazy-coins-marry.md
new file mode 100644
index 0000000000..6dfc4ce4bd
--- /dev/null
+++ b/.changeset/lazy-coins-marry.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Add `openapi.json` route for Gradio apps as well as docs on the "view API" page
diff --git a/gradio/routes.py b/gradio/routes.py
index 6140adece6..1b35396d22 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -690,6 +690,104 @@ def api_info(request: fastapi.Request):
app.api_info = api_info
return app.api_info
+ @router.get("/openapi.json", dependencies=[Depends(login_check)])
+ def openapi_schema(request: fastapi.Request):
+ """Generate an OpenAPI schema from the Gradio app's API info."""
+ info = api_info(request)
+ schema = {
+ "openapi": "3.0.2",
+ "info": {
+ "title": getattr(app.get_blocks(), "title", "Gradio App"),
+ "description": getattr(app.get_blocks(), "description", ""),
+ "version": VERSION,
+ },
+ "paths": {},
+ "components": {"schemas": {}},
+ }
+
+ for endpoint_path, endpoint_info in info.get("named_endpoints", {}).items(): # type: ignore
+ if not endpoint_info.get("show_api", True):
+ continue
+ path_item = {
+ "post": {
+ "summary": endpoint_info.get(
+ "description", f"Endpoint {endpoint_path}"
+ ),
+ "description": endpoint_info.get("description", ""),
+ "operationId": endpoint_path.strip("/").replace("/", "_"),
+ "requestBody": {
+ "required": True,
+ "content": {
+ "application/json": {
+ "schema": {"type": "object", "properties": {}}
+ }
+ },
+ },
+ "responses": {
+ "200": {
+ "description": "Successful response",
+ "content": {
+ "application/json": {
+ "schema": {"type": "object", "properties": {}}
+ }
+ },
+ }
+ },
+ }
+ }
+
+ request_properties = path_item["post"]["requestBody"]["content"][
+ "application/json"
+ ]["schema"]["properties"]
+ for param in endpoint_info.get("parameters", []):
+ param_name = param["parameter_name"]
+ param_type = param.get("type", {})
+
+ if "additional_description" in param_type:
+ param_type = dict(param_type)
+ param_type.pop("additional_description", None)
+
+ if "properties" in param_type and "type" not in param_type:
+ param_type = dict(param_type)
+ param_type["type"] = "object"
+
+ request_properties[param_name] = param_type
+
+ if "example_input" in param:
+ if (
+ "examples"
+ not in path_item["post"]["requestBody"]["content"][
+ "application/json"
+ ]
+ ):
+ path_item["post"]["requestBody"]["content"][
+ "application/json"
+ ]["examples"] = {"example1": {"value": {}}}
+ path_item["post"]["requestBody"]["content"]["application/json"][
+ "examples"
+ ]["example1"]["value"][param_name] = param["example_input"]
+
+ response_properties = path_item["post"]["responses"]["200"]["content"][
+ "application/json"
+ ]["schema"]["properties"]
+ for i, ret in enumerate(endpoint_info.get("returns", [])):
+ ret_name = f"output_{i}" if i > 0 else "output"
+ ret_type = ret.get("type", {})
+
+ if "additional_description" in ret_type:
+ ret_type = dict(ret_type)
+ ret_type.pop("additional_description", None)
+
+ if "properties" in ret_type and "type" not in ret_type:
+ ret_type = dict(ret_type)
+ ret_type["type"] = "object"
+
+ response_properties[ret_name] = ret_type
+
+ schema["paths"][f"/run{endpoint_path}"] = path_item
+
+ return schema
+
@app.get("/config/", dependencies=[Depends(login_check)])
@app.get("/config", dependencies=[Depends(login_check)])
def get_config(request: fastapi.Request, deep_link: str = ""):
diff --git a/guides/04_additional-features/07_sharing-your-app.md b/guides/04_additional-features/07_sharing-your-app.md
index 6959159032..2d20424e61 100644
--- a/guides/04_additional-features/07_sharing-your-app.md
+++ b/guides/04_additional-features/07_sharing-your-app.md
@@ -176,13 +176,13 @@ This is a page that lists the endpoints that can be used to query the Gradio app
-The endpoints are automatically created when you launch a Gradio `Interface`. If you are using Gradio `Blocks`, you can also set up a Gradio API page, though we recommend that you explicitly name each event listener, such as
+The endpoints are automatically created when you launch a Gradio application. If you are using Gradio `Blocks`, you can also name each event listener, such as
```python
btn.click(add, [num1, num2], output, api_name="addition")
```
-This will add and document the endpoint `/api/addition/` to the automatically generated API page. Otherwise, your API endpoints will appear as "unnamed" endpoints.
+This will add and document the endpoint `/addition/` to the automatically generated API page. Read more about the [API page here](./view-api-page).
## Accessing the Network Request Directly
diff --git a/guides/04_additional-features/14_view-api-page.md b/guides/04_additional-features/14_view-api-page.md
new file mode 100644
index 0000000000..6982075255
--- /dev/null
+++ b/guides/04_additional-features/14_view-api-page.md
@@ -0,0 +1,59 @@
+# API Page
+
+You can use almost any Gradio app programmatically via the built-in API! In the footer of any Gradio app, you'll see a "Use via API" link. Clicking on the link opens up a detailed documentation page for the API that Gradio generates based on the function signatures in your Gradio app.
+
+
+
+## Configuring the API Page
+
+**API endpoint names**
+
+When you create a Gradio application, the API endpoint names are automatically generated based on the function names. You can change this by using the `api_name` parameter in `gr.Interface` or `gr.ChatInterface`. If you are using Gradio `Blocks`, you can name each event listener, like this:
+
+```python
+btn.click(add, [num1, num2], output, api_name="addition")
+```
+
+**Hiding API endpoints**
+
+When building a complex Gradio app, you might want to hide certain API endpoints from appearing on the view API page, e.g. if they correspond to functions that simply update the UI. You can set the `show_api` parameter to `False` in any `Blocks` event listener to achieve this, e.g.
+
+```python
+btn.click(add, [num1, num2], output, show_api=False)
+```
+
+**Disabling API endpoints**
+
+Hiding the API endpoint doesn't disable it. A user can still programmatically call the API endpoint if they know the name. If you want to disable an API endpoint altogether, set `api_name=False`, e.g.
+
+```python
+btn.click(add, [num1, num2], output, api_name=False)
+```
+
+Note: setting an `api_name=False` also means that downstream apps will not be able to load your Gradio app using `gr.load()` as this function uses the Gradio API under the hood.
+
+
+## The Clients
+
+This API page not only lists all of the endpoints that can be used to query the Gradio app, but also shows the usage of both [the Gradio Python client](https://gradio.app/guides/getting-started-with-the-python-client/), and [the Gradio JavaScript client](https://gradio.app/guides/getting-started-with-the-js-client/).
+
+For each endpoint, Gradio automatically generates a complete code snippet with the parameters and their types, as well as example inputs, allowing you to immediately test an endpoint. Here's an example showing an image file input and `str` output:
+
+
+
+
+## The API Recorder 🪄
+
+Instead of reading through the view API page, you can also use Gradio's built-in API recorder to generate the relevant code snippet. Simply click on the "API Recorder" button, use your Gradio app via the UI as you would normally, and then the API Recorder will generate the code using the Clients to recreate your all of your interactions programmatically.
+
+
+
+## MCP Server
+
+The API page also includes instructions on how to use the Gradio app as an Model Context Protocol (MCP) server, which is a standardized way to expose functions as tools so that they can be used by LLMs.
+
+
+
+For the MCP sever, each tool, its description, and its parameters are listed, along with instructions on how to integrate with popular MCP Clients. Read more about Gradio's [MCP integration here](https://www.gradio.app/guides/building-mcp-server-with-gradio).
+
+
diff --git a/test/test_routes.py b/test/test_routes.py
index 49e3f773e1..8abe27984f 100644
--- a/test/test_routes.py
+++ b/test/test_routes.py
@@ -75,6 +75,11 @@ def test_favicon_route(self, test_client):
response = test_client.get("/favicon.ico")
assert response.status_code == 200
+ def test_openapi_route(self, test_client):
+ response = test_client.get(f"{API_PREFIX}/openapi.json")
+ assert response.status_code == 200
+ assert response.json()["openapi"] == "3.0.2"
+
def test_upload_path(self, test_client):
with open("test/test_files/alphabet.txt", "rb") as f:
response = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
From 9cdc4ac4360bfcec799c07506f29f8bb9e537fd5 Mon Sep 17 00:00:00 2001
From: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
Date: Thu, 1 May 2025 10:32:01 -0400
Subject: [PATCH 25/70] Fix gradio cc environment (#11111)
* Add code
* add changeset
---------
Co-authored-by: gradio-pr-bot
---
.changeset/open-dragons-melt.md | 5 +++++
gradio/cli/commands/cli_env_info.py | 13 ++++---------
2 files changed, 9 insertions(+), 9 deletions(-)
create mode 100644 .changeset/open-dragons-melt.md
diff --git a/.changeset/open-dragons-melt.md b/.changeset/open-dragons-melt.md
new file mode 100644
index 0000000000..1841f6bfd9
--- /dev/null
+++ b/.changeset/open-dragons-melt.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix gradio cc environment
diff --git a/gradio/cli/commands/cli_env_info.py b/gradio/cli/commands/cli_env_info.py
index 795bd0cdd4..6259868f44 100644
--- a/gradio/cli/commands/cli_env_info.py
+++ b/gradio/cli/commands/cli_env_info.py
@@ -7,6 +7,7 @@
import platform
from importlib import metadata
+from packaging.requirements import Requirement
from rich import print
@@ -28,17 +29,11 @@ def print_environment_info():
print(f"{package_name} dependencies in your environment:\n")
if dist.requires is not None:
for req in dist.requires:
- req_base_name = (
- req.split(">")[0]
- .split("<")[0]
- .split("~")[0]
- .split("[")[0]
- .split("!")[0]
- )
+ req_obj = Requirement(req)
try:
- print(f"{req_base_name}: {metadata.version(req_base_name)}")
+ print(f"{req_obj.name}: {metadata.version(req_obj.name)}")
except metadata.PackageNotFoundError:
- print(f"{req_base_name} is not installed.")
+ print(f"{req_obj.name} is not installed.")
print("\n")
except metadata.PackageNotFoundError:
print(f"{package_name} package is not installed.")
From 3f328f9d8b3cbcbf0283f02fd07827867af8c5d8 Mon Sep 17 00:00:00 2001
From: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
Date: Thu, 1 May 2025 10:32:18 -0400
Subject: [PATCH 26/70] Fix passing datetime.datetime instance to gr.Datetime
(#11112)
* Fix datetime
* add changeset
---------
Co-authored-by: gradio-pr-bot
---
.changeset/quick-clowns-build.md | 5 +++++
gradio/components/datetime.py | 28 ++++++++++++++--------------
test/components/test_datetime.py | 8 +++++++-
3 files changed, 26 insertions(+), 15 deletions(-)
create mode 100644 .changeset/quick-clowns-build.md
diff --git a/.changeset/quick-clowns-build.md b/.changeset/quick-clowns-build.md
new file mode 100644
index 0000000000..9b965513b8
--- /dev/null
+++ b/.changeset/quick-clowns-build.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix passing datetime.datetime instance to gr.Datetime
diff --git a/gradio/components/datetime.py b/gradio/components/datetime.py
index f552b5ace2..414fe4aa03 100644
--- a/gradio/components/datetime.py
+++ b/gradio/components/datetime.py
@@ -61,20 +61,6 @@ def __init__(
render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
"""
- super().__init__(
- every=every,
- scale=scale,
- min_width=min_width,
- visible=visible,
- label=label,
- show_label=show_label,
- info=info,
- elem_id=elem_id,
- elem_classes=elem_classes,
- render=render,
- key=key,
- value=value,
- )
self.type = type
self.include_time = include_time
self.interactive = interactive
@@ -89,6 +75,20 @@ def __init__(
if include_time
else "a %Y-%m-%d formatted string"
)
+ super().__init__(
+ every=every,
+ scale=scale,
+ min_width=min_width,
+ visible=visible,
+ label=label,
+ show_label=show_label,
+ info=info,
+ elem_id=elem_id,
+ elem_classes=elem_classes,
+ render=render,
+ key=key,
+ value=value,
+ )
def preprocess(self, payload: str | None) -> str | float | datetime | None:
"""
diff --git a/test/components/test_datetime.py b/test/components/test_datetime.py
index 1078126f25..147d31101a 100644
--- a/test/components/test_datetime.py
+++ b/test/components/test_datetime.py
@@ -1,4 +1,4 @@
-from datetime import datetime
+from datetime import datetime, timezone
import gradio as gr
@@ -34,6 +34,12 @@ def within_range(time1, time2, delta=30):
assert dt.postprocess(1500000000) == "2017-07-13 19:40:00"
assert dt2.postprocess(1500000000) == "2017-07-14 04:40:00"
+ def test_can_pass_datetime_value(self):
+ gr.DateTime(
+ type="datetime",
+ value=datetime.now(tz=timezone.utc),
+ )
+
def test_in_interface(self):
"""
Interface, process
From 60e846728e26dd1c3c2e803f6c70cc2946f5a200 Mon Sep 17 00:00:00 2001
From: shaun smith <1936278+evalstate@users.noreply.github.com>
Date: Thu, 1 May 2025 18:08:59 +0100
Subject: [PATCH 27/70] update STDIO instructions to specify sse-only transport
(#11115)
* update STDIO instructions to specify sse-only transport
* formatter
* fix
* add changeset
---------
Co-authored-by: Abubakar Abid
Co-authored-by: gradio-pr-bot
Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>
---
.changeset/ninety-bears-tickle.md | 6 ++++++
js/core/src/api_docs/ApiDocs.svelte | 14 ++++++++++++--
2 files changed, 18 insertions(+), 2 deletions(-)
create mode 100644 .changeset/ninety-bears-tickle.md
diff --git a/.changeset/ninety-bears-tickle.md b/.changeset/ninety-bears-tickle.md
new file mode 100644
index 0000000000..8dc199f47a
--- /dev/null
+++ b/.changeset/ninety-bears-tickle.md
@@ -0,0 +1,6 @@
+---
+"@gradio/core": patch
+"gradio": patch
+---
+
+fix:update STDIO instructions to specify sse-only transport
diff --git a/js/core/src/api_docs/ApiDocs.svelte b/js/core/src/api_docs/ApiDocs.svelte
index 3578c04833..e7b3a046c0 100644
--- a/js/core/src/api_docs/ApiDocs.svelte
+++ b/js/core/src/api_docs/ApiDocs.svelte
@@ -343,7 +343,12 @@
mcpServers: {
gradio: {
command: "npx",
- args: ["mcp-remote", mcp_server_url]
+ args: [
+ "mcp-remote",
+ mcp_server_url,
+ "--transport",
+ "sse-only"
+ ]
}
}
},
@@ -358,7 +363,12 @@
mcpServers: {
gradio: {
command: "npx",
- arguments: ["mcp-remote", mcp_server_url]
+ args: [
+ "mcp-remote",
+ mcp_server_url,
+ "--transport",
+ "sse-only"
+ ]
}
}
},
From 73737ac369b279689b2b2b511ead24bc4a6a9de6 Mon Sep 17 00:00:00 2001
From: Ali Abdalla
Date: Thu, 1 May 2025 13:51:49 -0700
Subject: [PATCH 28/70] Docs mcp server (#11120)
* add guide
* add changeset
---------
Co-authored-by: gradio-pr-bot
---
.changeset/small-dancers-shop.md | 5 ++
... 02_building-an-mcp-client-with-gradio.md} | 0
... => 03_building-mcp-server-with-gradio.md} | 0
guides/10_other-tutorials/04_using-docs-mcp | 85 +++++++++++++++++++
js/_website/src/lib/components/DocsNav.svelte | 6 ++
5 files changed, 96 insertions(+)
create mode 100644 .changeset/small-dancers-shop.md
rename guides/10_other-tutorials/{building-an-mcp-client-with-gradio.md => 02_building-an-mcp-client-with-gradio.md} (100%)
rename guides/10_other-tutorials/{building-mcp-server-with-gradio.md => 03_building-mcp-server-with-gradio.md} (100%)
create mode 100644 guides/10_other-tutorials/04_using-docs-mcp
diff --git a/.changeset/small-dancers-shop.md b/.changeset/small-dancers-shop.md
new file mode 100644
index 0000000000..4b7f7b9b21
--- /dev/null
+++ b/.changeset/small-dancers-shop.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Docs mcp server
diff --git a/guides/10_other-tutorials/building-an-mcp-client-with-gradio.md b/guides/10_other-tutorials/02_building-an-mcp-client-with-gradio.md
similarity index 100%
rename from guides/10_other-tutorials/building-an-mcp-client-with-gradio.md
rename to guides/10_other-tutorials/02_building-an-mcp-client-with-gradio.md
diff --git a/guides/10_other-tutorials/building-mcp-server-with-gradio.md b/guides/10_other-tutorials/03_building-mcp-server-with-gradio.md
similarity index 100%
rename from guides/10_other-tutorials/building-mcp-server-with-gradio.md
rename to guides/10_other-tutorials/03_building-mcp-server-with-gradio.md
diff --git a/guides/10_other-tutorials/04_using-docs-mcp b/guides/10_other-tutorials/04_using-docs-mcp
new file mode 100644
index 0000000000..7affc35e00
--- /dev/null
+++ b/guides/10_other-tutorials/04_using-docs-mcp
@@ -0,0 +1,85 @@
+# Using the Gradio Docs MCP Server
+
+Tags: MCP, TOOL, LLM, SERVER, DOCS
+
+In this guide, we will describe how to use the official Gradio Docs MCP Server.
+
+### Prerequisites
+
+You will need an LLM application that supports tool calling using the MCP protocol, such as Claude Desktop, Cursor, or Cline (these are known as "MCP Clients").
+
+## Why an MCP Server?
+
+If you're using LLMs in your workflow, adding this server will augment them with just the right context on gradio - which makes your experience a lot faster and smoother.
+
+
+
+The server is running on Spaces and was launched entirely using Gradio, you can see all the code [here](https://huggingface.co/spaces/gradio/docs-mcp). For more on building an mcp server with gradio, see the [previous guide](./building-an-mcp-client-with-gradio).
+
+## Installing in the Clients
+
+For clients that support SSE (e.g. Cursor, Windsurf, Cline), simply add the following configuration to your MCP config:
+
+```json
+{
+ "mcpServers": {
+ "gradio": {
+ "url": "https://gradio-docs-mcp.hf.space/gradio_api/mcp/sse"
+ }
+ }
+}
+```
+
+We've included step-by-step instructions for Cursor below, but you can consult the docs for Windsurf [here](https://docs.windsurf.com/windsurf/mcp), and Cline [here](https://docs.cline.bot/mcp-servers/configuring-mcp-servers) which are similar to set up.
+
+
+
+### Cursor
+
+1. Make sure you're using the latest version of Cursor, and go to Cursor > Settings > Cursor Settings > MCP
+2. Click on '+ Add new global MCP server'
+3. Copy paste this json into the file that opens and then save it.
+```json
+{
+ "mcpServers": {
+ "gradio": {
+ "url": "https://gradio-docs-mcp.hf.space/gradio_api/mcp/sse"
+ }
+ }
+}
+```
+4. That's it! You should see the tools load and the status go green in the settings page. You may have to click the refresh icon or wait a few seconds.
+
+
+
+### Claude Desktop
+
+1. Since Claude Desktop only supports stdio, you will need to [install Node.js](https://nodejs.org/en/download/) to get this to work.
+2. Make sure you're using the latest version of Claude Desktop, and go to Claude > Settings > Developer > Edit Config
+3. Open the file with your favorite editor and copy paste this json, then save the file.
+```json
+{
+ "mcpServers": {
+ "gradio": {
+ "command": "npx",
+ "args": [
+ "mcp-remote",
+ "https://gradio-docs-mcp.hf.space/gradio_api/mcp/sse",
+ "--transport",
+ "sse-only"
+ ]
+ }
+ }
+}
+```
+4. Quit and re-open Claude Desktop, and you should be good to go. You should see it loaded in the Search and Tools icon or on the developer settings page.
+
+
+
+## Tools
+
+There are currently only two tools in the server: `gradio_docs_mcp_load_gradio_docs` and `gradio_docs_mcp_search_gradio_docs`.
+
+1. `gradio_docs_mcp_load_gradio_docs`: This tool takes no arguments and will load an /llms.txt style summary of Gradio's latest, full documentation. Very useful context the LLM can parse before answering questions or generating code.
+
+2. `gradio_docs_mcp_search_gradio_docs`: This tool takes a query as an argument and will run embedding search on Gradio's docs, guides, and demos to return the most useful context for the LLM to parse.
\ No newline at end of file
diff --git a/js/_website/src/lib/components/DocsNav.svelte b/js/_website/src/lib/components/DocsNav.svelte
index 28e07233d0..7ed02a78ca 100644
--- a/js/_website/src/lib/components/DocsNav.svelte
+++ b/js/_website/src/lib/components/DocsNav.svelte
@@ -39,6 +39,12 @@
>
+
Dia Dialogue Generation Model
+ ![\"Dancing](\"https://huggingface.co/datasets/freddyaboulton/bucket/resolve/main/dancing_huggy.gif\")
Dia Dialogue Generation Model\n", "