add autodocs (#7030)

* add autodocs * remove unused code * add changeset * fix all of the things * fix all of the things * add changeset * fix things * tewak * fix dep * add ruff as dep with min version * make output pretty + fix bugs * tweaks * fixes * fix types maybe * fix arg refs * fix test * fix md * add error for version * fix test --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2025-03-31 12:20:26 +08:00 · 2024-01-18 20:47:01 +00:00 · 2024-01-18 20:47:01 +00:00 · 3a944ed9f1
commit 3a944ed9f1
parent a336508646
19 changed files with 1898 additions and 6 deletions
--- a/.changeset/eager-grapes-relate.md
+++ b/.changeset/eager-grapes-relate.md
@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/paramviewer": minor
+"gradio": minor
+---
+
+feat:add autodocs
--- a/gradio/init.py
+++ b/gradio/init.py
@ -46,6 +46,7 @@ from gradio.components import (
    Markdown,
    Model3D,
    Number,
+    ParamViewer,
    Plot,
    Radio,
    ScatterPlot,
--- a/gradio/cli/commands/components/_create_utils.py
+++ b/gradio/cli/commands/components/_create_utils.py
@ -341,7 +341,8 @@ from {package_name} import {name}

 {component.demo_code.format(name=name)}

-demo.launch()
+if __name__ == "__main__":
+    demo.launch()
 """
    )
    (demo_dir / "__init__.py").touch()
--- a/gradio/cli/commands/components/_docs_assets.py
+++ b/gradio/cli/commands/components/_docs_assets.py
@ -0,0 +1,158 @@
+css = """html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}
+"""
--- a/gradio/cli/commands/components/_docs_utils.py
+++ b/gradio/cli/commands/components/_docs_utils.py
@ -0,0 +1,938 @@
+from __future__ import annotations
+
+import inspect
+import json
+import re
+import types
+import typing
+from subprocess import PIPE, Popen
+
+
+def find_first_non_return_key(some_dict):
+    """Finds the first key in a dictionary that is not "return"."""
+    for key, value in some_dict.items():
+        if key != "return":
+            return value
+    return None
+
+
+def format(code: str, type: str):
+    """Formats code using ruff."""
+    if type == "value":
+        code = f"value = {code}"
+
+    ruff_args = ["ruff", "format", "-", "--line-length=60"]
+
+    process = Popen(
+        ruff_args,
+        stdin=PIPE,
+        stdout=PIPE,
+        stderr=PIPE,
+        universal_newlines=True,
+    )
+
+    formatted_code, err = process.communicate(input=str(code))
+
+    if type == "value":
+        formatted_code = re.sub(
+            r"^\s*value =\s*", "", formatted_code, flags=re.MULTILINE
+        )
+
+    stripped_source = re.search(r"^\s*\((.*)\)\s*$", formatted_code, re.DOTALL)
+
+    if stripped_source:
+        return stripped_source.group(1).strip()
+    elif formatted_code.strip() == "":
+        return code
+    else:
+        return formatted_code.strip()
+
+
+def get_param_name(param):
+    """Gets the name of a parameter."""
+
+    if isinstance(param, str):
+        return f'"{param}"'
+    if inspect.isclass(param) and param.__module__ == "builtins":
+        p = getattr(param, "__name__", None)
+        if p is None and inspect.isclass(param):
+            p = f"{param.__module__}.{param.__name__}"
+        return p
+
+    if inspect.isclass(param):
+        return f"{param.__module__}.{param.__name__}"
+
+    param_name = getattr(param, "__name__", None)
+
+    if param_name is None:
+        param_name = str(param)
+
+    return param_name
+
+
+def format_none(value):
+    """Formats None and NonType values."""
+    if value is None or value is type(None) or value == "None" or value == "NoneType":
+        return "None"
+    return value
+
+
+def format_value(value):
+    """Formats a value."""
+    if value is None:
+        return "None"
+    if isinstance(value, str):
+        return f'"{value}"'
+    return str(value)
+
+
+def get_parameter_docstring(docstring: str, parameter_name: str):
+    """Gets the docstring for a parameter."""
+    pattern = rf"\b{parameter_name}\b:[ \t]*(.*?)(?=\n|$)"
+
+    match = re.search(pattern, docstring, flags=re.DOTALL)
+    if match:
+        return match.group(1).strip()
+
+    return None
+
+
+def get_return_docstring(docstring: str):
+    """Gets the docstring for a return value."""
+    pattern = r"\bReturn(?:s){0,1}\b:[ \t\n]*(.*?)(?=\n|$)"
+
+    match = re.search(pattern, docstring, flags=re.DOTALL | re.IGNORECASE)
+    if match:
+        return match.group(1).strip()
+
+    return None
+
+
+def add_value(obj: dict, key: str, value: typing.Any):
+    """Adds a value to a dictionary."""
+    type = "value" if key == "default" else "type"
+
+    obj[key] = format(value, type)
+
+    return obj
+
+
+def set_deep(dictionary: dict, keys: list[str], value: typing.Any):
+    """Sets a value in a nested dictionary for a key path that may not exist"""
+    for key in keys[:-1]:
+        dictionary = dictionary.setdefault(key, {})
+    dictionary[keys[-1]] = value
+
+
+def get_deep(dictionary: dict, keys: list[str], default=None):
+    """Gets a value from a nested dictionary without erroring if the key doesn't exist."""
+    try:
+        for key in keys:
+            dictionary = dictionary[key]
+        return dictionary
+    except KeyError:
+        return default
+
+
+def get_type_arguments(type_hint) -> tuple:
+    """Gets the type arguments for a type hint."""
+    if hasattr(type_hint, "__args__"):
+        return type_hint.__args__
+    elif hasattr(type_hint, "__extra__"):
+        return type_hint.__extra__.__args__
+    else:
+        return typing.get_args(type_hint)
+
+
+def get_container_name(arg):
+    """Gets a human readable name for a type."""
+
+    # This is a bit of a hack to get the generic type for python 3.8
+    typing_genericalias = getattr(typing, "_GenericAlias", None)
+    types_genericalias = getattr(types, "GenericAlias", None)
+    types_uniontype = getattr(types, "UnionType", None)
+    if types_genericalias is None:
+        raise ValueError(
+            """Unable to find GenericAlias type. This is likely because you are using an older version of python. Please upgrade to python 3.10 or higher."""
+        )
+
+    generic_type_tuple = (
+        (types_genericalias,)
+        if typing_genericalias is None
+        else (types_genericalias, typing_genericalias)
+    )
+
+    if inspect.isclass(arg):
+        return arg.__name__
+    if isinstance(arg, (generic_type_tuple)):
+        return arg.__origin__.__name__
+    elif types_uniontype and isinstance(arg, types_uniontype):
+        return "Union"
+    elif getattr(arg, "__origin__", None) is typing.Literal:
+        return "Literal"
+
+    else:
+        return str(arg)
+
+
+def format_type(_type: list[typing.Any], current=None):
+    """Pretty formats a possibly nested type hint."""
+
+    s = []
+    _current = None
+    for t in _type:
+        if isinstance(t, str):
+            _current = format_none(t)
+            continue
+
+        elif isinstance(t, list):
+            if len(t) == 0:
+                continue
+            s.append(f"{format_type(t, _current)}")
+        else:
+            s.append(t)
+    if len(s) == 0:
+        return _current
+    elif _current == "Literal" or _current == "Union":
+        return "| ".join(s)
+    else:
+        return f"{_current}[{','.join(s)}]"
+
+
+def get_type_hints(param, module, ignore=None):
+    """Gets the type hints for a parameter."""
+
+    def extract_args(
+        arg,
+        module_name_prefix,
+        additional_interfaces,
+        user_fn_refs: list[str],
+        append=True,
+        arg_of=None,
+    ):
+        """Recursively extracts the arguments from a type hint."""
+        arg_names = []
+        args = get_type_arguments(arg)
+
+        # These are local classes that are used in types
+        if inspect.isclass(arg) and arg.__module__.startswith(module_name_prefix):
+            # get sourcecode for the class
+
+            source_code = inspect.getsource(arg)
+            source_code = format(
+                re.sub(r"(\"\"\".*?\"\"\")", "", source_code, flags=re.DOTALL), "other"
+            )
+
+            if arg_of is not None:
+                refs = get_deep(additional_interfaces, [arg_of, "refs"])
+
+                if refs is None:
+                    refs = [arg.__name__]
+                elif isinstance(refs, list) and arg.__name__ not in refs:
+                    refs.append(arg.__name__)
+
+                set_deep(additional_interfaces, [arg_of, "refs"], refs)
+
+            if get_deep(additional_interfaces, [arg.__name__, "source"]) is None:
+                set_deep(additional_interfaces, [arg.__name__, "source"], source_code)
+
+            for field_type in typing.get_type_hints(arg).values():
+                # We want to recursively extract the source code for the fields but we don't want to add them to the list of arguments
+                new_args = extract_args(
+                    field_type,
+                    module_name_prefix,
+                    additional_interfaces,
+                    user_fn_refs,
+                    False,
+                    arg.__name__,
+                )
+
+                if len(new_args) > 0:
+                    arg_names.append(new_args)
+
+            if append:
+                arg_names.append(arg.__name__)
+                if arg.__name__ not in user_fn_refs:
+                    user_fn_refs.append(arg.__name__)
+        elif len(args) > 0:
+            if append:
+                arg_names.append(get_container_name(arg))
+            for inner_arg in list(args):
+                new_args = extract_args(
+                    inner_arg,
+                    module_name_prefix,
+                    additional_interfaces,
+                    user_fn_refs,
+                    append,
+                    arg_of,
+                )
+
+                if len(new_args) > 0:
+                    arg_names.append(new_args)
+        else:
+            if append:
+                arg_names.append(get_param_name(arg))
+        return arg_names
+
+    module_name_prefix = module.__name__ + "."
+    additional_interfaces = {}
+    user_fn_refs = []
+
+    args = extract_args(
+        param,
+        module_name_prefix,
+        additional_interfaces,
+        user_fn_refs,
+        True,
+    )
+
+    formatted_type = format_type(args)
+
+    return (formatted_type, additional_interfaces, user_fn_refs)
+
+
+def extract_docstrings(module):
+    docs = {}
+    global_type_mode = "complex"
+    for name, obj in inspect.getmembers(module):
+        # filter out the builtins etc
+        if name.startswith("_"):
+            continue
+        #  this could be expanded but i think is ok for now
+        if inspect.isfunction(obj) or inspect.isclass(obj):
+            docs[name] = {}
+
+            main_docstring = inspect.getdoc(obj) or ""
+            cleaned_docstring = str.join(
+                "\n",
+                [s for s in main_docstring.split("\n") if not re.match(r"^\S+:", s)],
+            )
+
+            docs[name]["description"] = cleaned_docstring
+            docs[name]["members"] = {}
+            docs["__meta__"] = {"additional_interfaces": {}}
+            for member_name, member in inspect.getmembers(obj):
+                if inspect.ismethod(member) or inspect.isfunction(member):
+                    # we are are only interested in these methods
+                    if (
+                        member_name != "__init__"
+                        and member_name != "preprocess"
+                        and member_name != "postprocess"
+                    ):
+                        continue
+
+                    docs[name]["members"][member_name] = {}
+
+                    member_docstring = inspect.getdoc(member) or ""
+                    type_mode = "complex"
+                    try:
+                        hints = typing.get_type_hints(member)
+                    except Exception:
+                        type_mode = "simple"
+                        hints = member.__annotations__
+                        global_type_mode = "simple"
+
+                    signature = inspect.signature(member)
+
+                    #  we iterate over the parameters and get the type information
+                    for param_name, param in hints.items():
+                        if (
+                            param_name == "return" and member_name == "postprocess"
+                        ) or (param_name != "return" and member_name == "preprocess"):
+                            continue
+
+                        if type_mode == "simple":
+                            arg_names = hints.get(param_name, "")
+                            additional_interfaces = {}
+                            user_fn_refs = []
+                        else:
+                            (
+                                arg_names,
+                                additional_interfaces,
+                                user_fn_refs,
+                            ) = get_type_hints(param, module)
+
+                        #  These interfaces belong to the whole module, so we add them 'globally' for later
+                        docs["__meta__"]["additional_interfaces"].update(
+                            additional_interfaces
+                        )
+
+                        docs[name]["members"][member_name][param_name] = {}
+
+                        if param_name == "return":
+                            docstring = get_return_docstring(member_docstring)
+                        else:
+                            docstring = get_parameter_docstring(
+                                member_docstring, param_name
+                            )
+
+                        add_value(
+                            docs[name]["members"][member_name][param_name],
+                            "type",
+                            arg_names,
+                        )
+
+                        if signature.parameters.get(param_name, None) is not None:
+                            default_value = signature.parameters[param_name].default
+                            if default_value is not inspect._empty:
+                                add_value(
+                                    docs[name]["members"][member_name][param_name],
+                                    "default",
+                                    format_value(default_value),
+                                )
+
+                        docs[name]["members"][member_name][param_name][
+                            "description"
+                        ] = docstring
+
+                        # We just want to normalise the arg name to 'value' for the preprocess and postprocess methods
+                        if member_name == "postprocess" or member_name == "preprocess":
+                            docs[name]["members"][member_name][
+                                "value"
+                            ] = find_first_non_return_key(
+                                docs[name]["members"][member_name]
+                            )
+                            additional_refs = get_deep(
+                                docs, ["__meta__", "user_fn_refs", name]
+                            )
+                            if additional_refs is None:
+                                set_deep(
+                                    docs,
+                                    ["__meta__", "user_fn_refs", name],
+                                    set(user_fn_refs),
+                                )
+                            else:
+                                additional_refs = set(additional_refs)
+                                additional_refs.update(user_fn_refs)
+                                set_deep(
+                                    docs,
+                                    ["__meta__", "user_fn_refs", name],
+                                    additional_refs,
+                                )
+                if member_name == "EVENTS":
+                    docs[name]["events"] = {}
+                    if isinstance(member, list):
+                        for event in member:
+                            docs[name]["events"][str(event)] = {
+                                "type": None,
+                                "default": None,
+                                "description": event.doc.replace(
+                                    "{{ component }}", name
+                                ),
+                            }
+        final_user_fn_refs = get_deep(docs, ["__meta__", "user_fn_refs", name])
+        if final_user_fn_refs is not None:
+            set_deep(docs, ["__meta__", "user_fn_refs", name], list(final_user_fn_refs))
+
+    return (docs, global_type_mode)
+
+
+class AdditionalInterface(typing.TypedDict):
+    refs: list[str]
+    source: str
+
+
+def make_js(
+    interfaces: dict[str, AdditionalInterface] | None = None,
+    user_fn_refs: dict[str, list[str]] | None = None,
+):
+    """Makes the javascript code for the additional interfaces."""
+    js_obj_interfaces = "{"
+    if interfaces is not None:
+        for interface_name, interface in interfaces.items():
+            js_obj_interfaces += f"""
+            {interface_name}: {interface.get("refs", None) or "[]"}, """
+    js_obj_interfaces += "}"
+
+    js_obj_user_fn_refs = "{"
+    if user_fn_refs is not None:
+        for class_name, refs in user_fn_refs.items():
+            js_obj_user_fn_refs += f"""
+          {class_name}: {refs}, """
+
+    js_obj_user_fn_refs += "}"
+
+    return rf"""function() {{
+    const refs = {js_obj_interfaces};
+    const user_fn_refs = {js_obj_user_fn_refs};
+    requestAnimationFrame(() => {{
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {{
+            if (refs.length > 0) {{
+                const el = document.querySelector(`.${{key}}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {{
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${{ref.toLowerCase()}}">${{ref}}</a>`
+                    );
+                }})
+            }}
+        }})
+        
+        Object.entries(refs).forEach(([key, refs]) => {{
+            if (refs.length > 0) {{
+                const el = document.querySelector(`.${{key}}`);
+                if (!el) return;
+                refs.forEach(ref => {{
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${{ref.toLowerCase()}}">${{ref}}</a>`
+                    );
+                }})
+            }}
+        }})
+    }})
+}}
+"""
+
+
+def render_additional_interfaces(interfaces):
+    """Renders additional helper classes or types that were extracted earlier."""
+
+    source = ""
+    for interface_name, interface in interfaces.items():
+        source += f"""
+    code_{interface_name} = gr.Markdown(\"\"\"
+## `{interface_name}`
+```python
+{interface["source"]}
+```\"\"\", elem_classes=["md-custom", "{interface_name}"], header_links=True)
+"""
+    return source
+
+
+def render_additional_interfaces_markdown(interfaces):
+    """Renders additional helper classes or types that were extracted earlier."""
+
+    source = ""
+    for interface_name, interface in interfaces.items():
+        source += f"""
+## `{interface_name}`
+```python
+{interface["source"]}
+```
+"""
+    return source
+
+
+def render_version_badge(pypi_exists, local_version, name):
+    """Renders a version badge for the package. PyPi badge if it exists, otherwise a static badge."""
+    if pypi_exists:
+        return f"""<a href="https://pypi.org/project/{name}/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/{name}"></a>"""
+    else:
+        return f"""<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%20{local_version}%20-%20orange">"""
+
+
+def render_github_badge(repo):
+    """Renders a github badge for the package if a repo is specified."""
+    if repo is None:
+        return ""
+    else:
+        return f"""<a href="{repo}/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a>"""
+
+
+def render_discuss_badge(space):
+    """Renders a discuss badge for the package if a space is specified."""
+    if space is None:
+        return ""
+    else:
+        return f"""<a href="{space}/discussions" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/%F0%9F%A4%97%20Discuss-%23097EFF?style=flat&logoColor=black"></a>"""
+
+
+def render_class_events(events: dict, name):
+    """Renders the events for a class."""
+    if len(events) == 0:
+        return ""
+
+    else:
+        return f"""
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["{name}"]["events"], linkify={["Event"]})
+
+"""
+
+
+def make_user_fn(
+    class_name,
+    user_fn_input_type,
+    user_fn_input_description,
+    user_fn_output_type,
+    user_fn_output_description,
+):
+    """Makes the user function for the class."""
+    if (
+        user_fn_input_type is None
+        and user_fn_output_type is None
+        and user_fn_input_description is None
+        and user_fn_output_description is None
+    ):
+        return ""
+
+    md = """
+    gr.Markdown(\"\"\"
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function. 
+- When used as an output, the component only impacts the return signature of the user function. 
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+"""
+
+    md += (
+        f"- **As input:** Is passed, {format_description(user_fn_input_description)}\n"
+        if user_fn_input_description
+        else ""
+    )
+
+    md += (
+        f"- **As output:** Should return, {format_description(user_fn_output_description)}"
+        if user_fn_output_description
+        else ""
+    )
+
+    if user_fn_input_type is not None or user_fn_output_type is not None:
+        md += f"""
+
+ ```python
+def predict(
+    value: {user_fn_input_type or "Unknown"}
+) -> {user_fn_output_type or "Unknown"}:
+    return value
+```"""
+    return f"""{md}
+\"\"\", elem_classes=["md-custom", "{class_name}-user-fn"], header_links=True)
+"""
+
+
+def format_description(description):
+    description = description[0].lower() + description[1:]
+    description = description.rstrip(".") + "."
+    return description
+
+
+def make_user_fn_markdown(
+    user_fn_input_type,
+    user_fn_input_description,
+    user_fn_output_type,
+    user_fn_output_description,
+):
+    """Makes the user function for the class."""
+    if (
+        user_fn_input_type is None
+        and user_fn_output_type is None
+        and user_fn_input_description is None
+        and user_fn_output_description is None
+    ):
+        return ""
+
+    md = """
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function. 
+- When used as an output, the component only impacts the return signature of the user function. 
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+"""
+
+    md += (
+        f"- **As output:** Is passed, {format_description(user_fn_input_description)}\n"
+        if user_fn_input_description
+        else ""
+    )
+
+    md += (
+        f"- **As input:** Should return, {format_description(user_fn_output_description)}"
+        if user_fn_output_description
+        else ""
+    )
+
+    if user_fn_input_type is not None or user_fn_output_type is not None:
+        md += f"""
+
+ ```python
+ def predict(
+     value: {user_fn_input_type or "Unknown"}
+ ) -> {user_fn_output_type or "Unknown"}:
+     return value
+ ```
+ """
+    return md
+
+
+def render_class_events_markdown(events):
+    """Renders the events for a class."""
+    if len(events) == 0:
+        return ""
+
+    event_table = """
+### Events
+
+| name | description |
+|:-----|:------------|
+"""
+
+    for event_name, event in events.items():
+        event_table += f"| `{event_name}` | {event['description']} |\n"
+
+    return event_table
+
+
+def render_class_docs(exports, docs):
+    """Renders the class documentation for the package."""
+    docs_classes = ""
+    for class_name in exports:
+        user_fn_input_type = get_deep(
+            docs, [class_name, "members", "preprocess", "return", "type"]
+        )
+        user_fn_input_description = get_deep(
+            docs, [class_name, "members", "preprocess", "return", "description"]
+        )
+        user_fn_output_type = get_deep(
+            docs, [class_name, "members", "postprocess", "value", "type"]
+        )
+        user_fn_output_description = get_deep(
+            docs, [class_name, "members", "postprocess", "value", "description"]
+        )
+
+        linkify = get_deep(docs, ["__meta__", "additional_interfaces"], {}) or {}
+
+        docs_classes += f"""
+    gr.Markdown(\"\"\"
+## `{class_name}`
+
+### Initialization
+\"\"\", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["{class_name}"]["members"]["__init__"], linkify={list(linkify.keys())})
+
+{render_class_events(docs[class_name].get("events", None), class_name)}
+
+{make_user_fn(
+    class_name,
+    user_fn_input_type,
+    user_fn_input_description,
+    user_fn_output_type,
+    user_fn_output_description,
+)}
+"""
+    return docs_classes
+
+
+html = """
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td align="left"><code>value</code></td>
+<td align="left"><code>list[Parameter] | None</code></td>
+<td align="left"><code>None</code></td>
+<td align="left">A list of dictionaries with keys "type", "description", and "default" for each parameter.</td>
+</tr>
+</tbody></table>
+"""
+
+
+def render_param_table(params):
+    """Renders the parameter table for the package."""
+    table = """<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>"""
+
+    # for class_name in exports:
+    #     docs_classes += f"""
+    #     """
+    for param_name, param in params.items():
+        table += f"""
+<tr>
+<td align="left"><code>{param_name}</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+{param["type"]}
+```
+
+</td>
+<td align="left"><code>{param["default"]}</code></td>
+<td align="left">{param['description']}</td>
+</tr>
+"""
+    return table + "</tbody></table>"
+
+
+def render_class_docs_markdown(exports, docs):
+    """Renders the class documentation for the package."""
+    docs_classes = ""
+    for class_name in exports:
+        user_fn_input_type = get_deep(
+            docs, [class_name, "members", "preprocess", "return", "type"]
+        )
+        user_fn_input_description = get_deep(
+            docs, [class_name, "members", "preprocess", "return", "description"]
+        )
+        user_fn_output_type = get_deep(
+            docs, [class_name, "members", "postprocess", "value", "type"]
+        )
+        user_fn_output_description = get_deep(
+            docs, [class_name, "members", "postprocess", "value", "description"]
+        )
+        docs_classes += f"""
+## `{class_name}`
+
+### Initialization
+
+{render_param_table(docs[class_name]["members"]["__init__"])}
+
+{render_class_events_markdown(docs[class_name].get("events", None))}
+
+{make_user_fn_markdown(
+    user_fn_input_type,
+    user_fn_input_description,
+    user_fn_output_type,
+    user_fn_output_description,
+)}
+"""
+    return docs_classes
+
+
+def make_space(
+    docs: dict,
+    name: str,
+    description: str,
+    local_version: str | None,
+    demo: str,
+    space: str | None,
+    repo: str | None,
+    pypi_exists: bool,
+    suppress_demo_check: bool = False,
+):
+    filtered_keys = [key for key in docs if key != "__meta__"]
+
+    if not suppress_demo_check and (
+        demo.find("if __name__ == '__main__'") == -1
+        and demo.find('if __name__ == "__main__"') == -1
+    ):
+        raise ValueError(
+            """The demo must be launched using `if __name__ == '__main__'`, otherwise the docs page will not function correctly.
+
+To fix this error, launch the demo inside of an if statement like this:
+    
+if __name__ == '__main__':
+    demo.launch()
+
+To ignore this error pass `--suppress-demo-check` to the docs command."""
+        )
+
+    source = """
+import gradio as gr
+from app import demo as app
+import os
+"""
+
+    docs_classes = render_class_docs(filtered_keys, docs)
+
+    source += f"""
+_docs = {docs}
+    
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+\"\"\"
+# `{name}`
+
+<div style="display: flex; gap: 7px;">
+{render_version_badge(pypi_exists, local_version, name)} {render_github_badge(repo)} {render_discuss_badge(space)}
+</div>
+
+{description}
+\"\"\", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+\"\"\"
+## Installation
+
+```bash
+pip install {name}
+```
+
+## Usage
+
+```python
+{demo}
+```
+\"\"\", elem_classes=["md-custom"], header_links=True)
+
+{docs_classes}
+
+{render_additional_interfaces(docs["__meta__"]["additional_interfaces"])}
+    demo.load(None, js=r\"\"\"{make_js(get_deep(docs, ["__meta__", "additional_interfaces"]),get_deep( docs, ["__meta__", "user_fn_refs"]))}
+\"\"\")
+
+demo.launch()
+"""
+
+    return source
+
+
+def make_markdown(
+    docs, name, description, local_version, demo, space, repo, pypi_exists
+):
+    filtered_keys = [key for key in docs if key != "__meta__"]
+
+    source = f"""
+# `{name}`
+{render_version_badge(pypi_exists, local_version, name)} {render_github_badge(repo)} {render_discuss_badge(space)}
+
+{description}
+
+## Installation
+    
+```bash 
+pip install {name}
+```
+
+## Usage
+
+```python
+{demo}
+```
+"""
+
+    docs_classes = render_class_docs_markdown(filtered_keys, docs)
+
+    source += docs_classes
+
+    source += render_additional_interfaces_markdown(
+        docs["__meta__"]["additional_interfaces"]
+    )
+
+    return source
--- a/gradio/cli/commands/components/app.py
+++ b/gradio/cli/commands/components/app.py
@ -3,6 +3,7 @@ from typer import Typer
 from .build import _build
 from .create import _create
 from .dev import _dev
+from .docs import _docs
 from .install_component import _install
 from .publish import _publish
 from .show import _show
@ -20,3 +21,4 @@ app.command("install", help="Install the custom component in the current environ
    _install
 )
 app.command("publish", help="Publish a component to PyPI and HuggingFace Hub")(_publish)
+app.command("docs", help="Generate documentation for a custom components")(_docs)
--- a/gradio/cli/commands/components/docs.py
+++ b/gradio/cli/commands/components/docs.py
@ -0,0 +1,145 @@
+from __future__ import annotations
+
+import importlib
+from pathlib import Path
+from typing import Optional
+
+import requests
+import tomlkit as toml
+from rich import print
+from typer import Argument, Option
+from typing_extensions import Annotated
+
+from gradio.cli.commands.display import LivePanelDisplay
+
+from ._docs_assets import css
+from ._docs_utils import extract_docstrings, get_deep, make_markdown, make_space
+
+
+def _docs(
+    path: Annotated[
+        Path, Argument(help="The directory of the custom component.")
+    ] = Path("."),
+    demo_dir: Annotated[
+        Optional[Path], Option(help="Path to the demo directory.")
+    ] = None,
+    demo_name: Annotated[Optional[str], Option(help="Name of the demo file.")] = None,
+    readme_path: Annotated[
+        Optional[Path], Option(help="Path to the README.md file.")
+    ] = None,
+    space_url: Annotated[
+        Optional[str], Option(help="URL of the Space to use for the demo.")
+    ] = None,
+    generate_space: Annotated[
+        bool,
+        Option(
+            help="Create a documentation space for the custom compone.", is_flag=True
+        ),
+    ] = True,
+    generate_readme: Annotated[
+        bool,
+        Option(help="Create a README.md file for the custom component.", is_flag=True),
+    ] = True,
+    suppress_demo_check: Annotated[
+        bool,
+        Option(
+            help="Suppress demo warnings and errors.",
+            is_flag=True,
+        ),
+    ] = False,
+):
+    """Runs the documentation generator."""
+
+    _component_dir = Path(path).resolve()
+    _demo_dir = Path(demo_dir).resolve() if demo_dir else Path("demo").resolve()
+    _demo_name = demo_name if demo_name else "app.py"
+    _demo_path = _demo_dir / _demo_name
+    _readme_path = (
+        Path(readme_path).resolve() if readme_path else _component_dir / "README.md"
+    )
+
+    if not generate_space and not generate_readme:
+        raise ValueError("Must generate at least one of space or readme")
+
+    with LivePanelDisplay() as live:
+        live.update(
+            f":page_facing_up: Generating documentation for [orange3]{str(_component_dir.name)}[/]",
+            add_sleep=0.2,
+        )
+        live.update(
+            f":eyes: Reading project metadata from [orange3]{_component_dir}/pyproject.toml[/]\n"
+        )
+
+        if not (_component_dir / "pyproject.toml").exists():
+            raise ValueError(
+                f"Cannot find pyproject.toml file in [orange3]{_component_dir}[/]"
+            )
+
+        with open(_component_dir / "pyproject.toml") as f:
+            data = toml.loads(f.read())
+        with open(_demo_path) as f:
+            demo = f.read()
+
+        name = get_deep(data, ["project", "name"])
+
+        if not isinstance(name, str):
+            raise ValueError("Name not found in pyproject.toml")
+
+        pypi_exists = requests.get(f"https://pypi.org/pypi/{name}/json").status_code
+
+        pypi_exists = pypi_exists == 200 or False
+
+        local_version = get_deep(data, ["project", "version"])
+        description = str(get_deep(data, ["project", "description"]) or "")
+        repo = get_deep(data, ["project", "urls", "repository"])
+        space = space_url if space_url else get_deep(data, ["project", "urls", "space"])
+
+        if not local_version and not pypi_exists:
+            raise ValueError(
+                f"Cannot find version in pyproject.toml or on PyPI for [orange3]{name}[/].\nIf you have just published to PyPI, please wait a few minutes and try again."
+            )
+
+        module = importlib.import_module(name)
+        (docs, type_mode) = extract_docstrings(module)
+
+        if generate_space:
+            live.update(":computer: [blue]Generating space.[/]")
+
+            source = make_space(
+                docs=docs,
+                name=name,
+                description=description,
+                local_version=local_version
+                if local_version is None
+                else str(local_version),
+                demo=demo,
+                space=space if space is None else str(space),
+                repo=repo if repo is None else str(repo),
+                pypi_exists=pypi_exists,
+                suppress_demo_check=suppress_demo_check,
+            )
+
+            with open(_demo_dir / "space.py", "w") as f:
+                f.write(source)
+                live.update(
+                    f":white_check_mark: Space created in [orange3]{_demo_dir}/space.py[/]\n"
+                )
+            with open(_demo_dir / "css.css", "w") as f:
+                f.write(css)
+
+        if generate_readme:
+            live.update(":pencil: [blue]Generating README.[/]")
+            readme = make_markdown(
+                docs, name, description, local_version, demo, space, repo, pypi_exists
+            )
+
+            with open(_readme_path, "w") as f:
+                f.write(readme)
+                live.update(
+                    f":white_check_mark: README generated in [orange3]{_readme_path}[/]"
+                )
+
+    if type_mode == "simple":
+        print(
+            "\n:orange_circle: [red]The docs were generated in simple mode. Updating python to a version greater than 3.9 will result in richer documentation.[/]"
+        )
--- a/gradio/components/init.py
+++ b/gradio/components/init.py
@ -37,6 +37,7 @@ from gradio.components.logout_button import LogoutButton
 from gradio.components.markdown import Markdown
 from gradio.components.model3d import Model3D
 from gradio.components.number import Number
+from gradio.components.paramviewer import ParamViewer
 from gradio.components.plot import Plot
 from gradio.components.radio import Radio
 from gradio.components.scatter_plot import ScatterPlot
@ -110,4 +111,5 @@ __all__ = [
    "StreamingInput",
    "StreamingOutput",
    "ImageEditor",
+    "ParamViewer",
 ]
--- a/gradio/components/paramviewer.py
+++ b/gradio/components/paramviewer.py
@ -0,0 +1,73 @@
+from __future__ import annotations
+
+from typing import Literal, TypedDict
+
+from gradio.components.base import Component
+from gradio.events import Events
+
+
+class Parameter(TypedDict):
+    type: str
+    description: str
+    default: str
+
+
+class ParamViewer(Component):
+    """
+    Displays an interactive table of parameters and their descriptions and default values width syntax highlighting
+    """
+
+    EVENTS = [
+        Events.change,
+        Events.upload,
+    ]
+
+    def __init__(
+        self,
+        value: list[Parameter] | None = None,
+        language: Literal["python", "typescript"] = "python",
+        linkify: list[str] | None = None,
+        every: float | None = None,
+        render: bool = True,
+    ):
+        """
+        Parameters:
+            value: A list of dictionaries with keys "type", "description", and "default" for each parameter.
+            language: The language to display the code in. One of "python" or "typescript".
+            linkify: A list of strings to linkify. If a string is found in the description, it will be linked to the corresponding url.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            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.
+
+        """
+        self.value = value
+        self.language = language
+        self.linkify = linkify
+        super().__init__(
+            every=every,
+            value=value,
+            render=render,
+        )
+
+    def preprocess(self, payload: list[Parameter]) -> list[Parameter]:
+        """
+        Parameters:
+            payload: A list of dictionaries with keys "type", "description", and "default" for each parameter.
+        Returns:
+            A list of dictionaries with keys "type", "description", and "default" for each parameter.
+        """
+        return payload
+
+    def postprocess(self, value: list[Parameter]) -> list[Parameter]:
+        """
+        Parameters:
+            value: A list of dictionaries with keys "type", "description", and "default" for each parameter.
+        Returns:
+            A list of dictionaries with keys "type", "description", and "default" for each parameter.
+        """
+        return value
+
+    def example_inputs(self):
+        return [{"type": "numpy", "description": "any valid json", "default": "None"}]
+
+    def api_info(self):
+        return {"type": {}, "description": "any valid json"}
--- a/js/app/package.json
+++ b/js/app/package.json
@ -53,6 +53,7 @@
 		"@gradio/markdown": "workspace:^",
 		"@gradio/model3d": "workspace:^",
 		"@gradio/number": "workspace:^",
+		"@gradio/paramviewer": "workspace:^",
 		"@gradio/plot": "workspace:^",
 		"@gradio/radio": "workspace:^",
 		"@gradio/row": "workspace:^",
--- a/js/paramviewer/Example.svelte
+++ b/js/paramviewer/Example.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	<pre>{JSON.stringify(value, null, 2)}</pre>
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>
--- a/js/paramviewer/Index.svelte
+++ b/js/paramviewer/Index.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import ParamViewer from "./ParamViewer.svelte";
+
+	export let value: Record<
+		string,
+		{
+			type: string;
+			description: string;
+			default: string;
+		}
+	>;
+
+	export let linkify: string[] = [];
+</script>
+
+<ParamViewer docs={value} {linkify} />
--- a/js/paramviewer/ParamViewer.svelte
+++ b/js/paramviewer/ParamViewer.svelte
@ -0,0 +1,228 @@
+<script lang="ts">
+	import "./prism.css";
+
+	import Prism from "prismjs";
+	import "prismjs/components/prism-python";
+	import "prismjs/components/prism-typescript";
+
+	interface Param {
+		type: string | null;
+		description: string;
+		default: string | null;
+		name?: string;
+	}
+
+	export let docs: Record<string, Param>;
+
+	export let lang: "python" | "typescript" = "python";
+	export let linkify: string[] = [];
+	let _docs: Param[];
+
+	$: {
+		setTimeout(() => {
+			_docs = highlight_code(docs, lang);
+		}, 0);
+	}
+	$: show_desc = _docs && _docs.map((x) => false);
+
+	function highlight(code: string, lang: "python" | "typescript"): string {
+		let highlighted = Prism.highlight(code, Prism.languages[lang], lang);
+
+		for (const link of linkify) {
+			highlighted = highlighted.replace(
+				new RegExp(link, "g"),
+				`<a href="#h-${link.toLocaleLowerCase()}">${link}</a>`
+			);
+		}
+
+		return highlighted;
+	}
+
+	function highlight_code(
+		_docs: typeof docs,
+		lang: "python" | "typescript"
+	): Param[] {
+		return Object.entries(_docs).map(
+			([name, { type, description, default: _default }]) => {
+				let highlighted_type = type ? highlight(type, lang) : null;
+
+				return {
+					name: name,
+					type: highlighted_type,
+					description: description,
+					default: _default ? highlight(_default, lang) : null
+				};
+			}
+		);
+	}
+	let el = [];
+</script>
+
+<div class="wrap">
+	{#if _docs}
+		{#each _docs as { type, description, default: _default, name }, i (name)}
+			<div class="param md" class:open={show_desc[i]}>
+				<div class="type">
+					<pre class="language-{lang}"><code bind:this={el[i]}
+							>{name}{#if type}: {@html type}{/if}</code
+						></pre>
+					<button
+						on:click={() => (show_desc[i] = !show_desc[i])}
+						class="arrow"
+						class:hidden={!show_desc[i]}>▲</button
+					>
+				</div>
+				{#if show_desc[i]}
+					{#if _default}
+						<div class="default" class:last={!description}>
+							<span style:padding-right={"4px"}>default</span>
+							<code>= {@html _default}</code>
+						</div>
+					{/if}
+					{#if description}
+						<div class="description"><p>{description}</p></div>
+					{/if}
+				{/if}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.default :global(pre),
+	.default :global(.highlight) {
+		display: inline-block;
+	}
+
+	.wrap :global(pre),
+	.wrap :global(.highlight) {
+		margin: 0;
+		background: transparent !important;
+		font-family: var(--font-mono);
+		font-weight: 400;
+		padding: 0;
+	}
+
+	.wrap :global(pre a) {
+		color: var(--link-text-color-hover);
+		text-decoration: underline;
+	}
+
+	.wrap :global(pre a:hover) {
+		color: var(--link-text-color-hover);
+	}
+
+	.default > span {
+		text-transform: uppercase;
+		font-size: 0.7rem;
+		font-weight: 600;
+	}
+
+	.default > code {
+		border: none;
+	}
+	code {
+		background: none;
+		font-family: var(--font-mono);
+	}
+
+	.wrap {
+		padding: 0rem;
+		border-radius: 5px;
+		border: 1px solid #eee;
+		overflow: hidden;
+		position: relative;
+		margin: 0;
+		box-shadow: var(--block-shadow);
+		border-width: var(--block-border-width);
+		border-color: var(--block-border-color);
+		border-radius: var(--block-radius);
+		background: #fff;
+		width: 100%;
+		line-height: var(--line-sm);
+		color: var(--body-text-color);
+	}
+
+	.type {
+		position: relative;
+		padding: 0.7rem 1rem;
+		background: var(--neutral-900);
+		background: var(--neutral-50);
+		border-bottom: 1px solid var(--neutral-700);
+		border-bottom: 0px solid var(--neutral-200);
+	}
+
+	.arrow {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 15px;
+		transform: rotate(180deg);
+		height: 100;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.arrow.hidden {
+		transform: rotate(270deg);
+	}
+
+	.default {
+		padding: 0.2rem 1rem 0.3rem 1rem;
+		border-bottom: 1px solid var(--neutral-200);
+	}
+
+	.default.last {
+		border-bottom: none;
+	}
+
+	.description {
+		padding: 0.7rem 1rem;
+		font-size: var(--scale-00);
+		font-family: var(--font-sans);
+	}
+
+	.param {
+		border-bottom: 1px solid var(--neutral-200);
+	}
+
+	.param:last-child .description {
+		border-bottom: none;
+	}
+
+	.open .type {
+		border-bottom-width: 1px;
+	}
+
+	.param.md code {
+		background: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.wrap {
+			background: var(--neutral-800);
+		}
+
+		.default {
+			border-bottom: 1px solid var(--neutral-700);
+		}
+
+		.type {
+			background: var(--neutral-900);
+			border-bottom: 0px solid var(--neutral-700);
+		}
+
+		.arrow {
+			color: var(--neutral-200);
+		}
+
+		.param {
+			border-bottom: 1px solid var(--neutral-700);
+		}
+
+		.param:last-child {
+			border-bottom: none;
+		}
+	}
+</style>
--- a/js/paramviewer/package.json
+++ b/js/paramviewer/package.json
@ -0,0 +1,24 @@
+{
+	"name": "@gradio/paramviewer",
+	"version": "0.2.3",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"author": "",
+	"license": "ISC",
+	"private": false,
+	"main_changeset": true,
+	"exports": {
+		".": "./Index.svelte",
+		"./example": "./Example.svelte",
+		"./package.json": "./package.json"
+	},
+	"dependencies": {
+		"@gradio/atoms": "0.3.0",
+		"@gradio/statustracker": "0.4.0",
+		"@gradio/utils": "0.2.0",
+		"prismjs": "^1.29.0"
+	},
+	"devDependencies": {
+		"@types/prismjs": "^1.26.3"
+	}
+}
--- a/js/paramviewer/prism.css
+++ b/js/paramviewer/prism.css
@ -0,0 +1,211 @@
+Tables */ table,
+tr,
+td,
+th {
+	margin-top: var(--spacing-sm);
+	margin-bottom: var(--spacing-sm);
+	padding: var(--spacing-xl);
+}
+
+/* .message-wrap :global(pre[class*="language-"]),
+	.message-wrap :global(pre) {
+		border: none;
+		background: none;
+		position: relative;
+		direction: ltr;
+		white-space: no-wrap;
+		overflow-x: auto;
+	}
+	.message-wrap :global(code) {
+	} */
+
+/* .message-wrap :global(div[class*="code_wrap"]) {
+		
+	} */
+
+.md code,
+.md pre {
+	background: none;
+	font-family: var(--font-mono);
+	font-size: var(--text-md);
+
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	tab-size: 2;
+
+	hyphens: none;
+}
+
+.md pre[class*="language-"]::-moz-selection,
+.md pre[class*="language-"] ::-moz-selection,
+.md code[class*="language-"]::-moz-selection,
+.md code[class*="language-"] ::-moz-selection {
+}
+
+.md pre[class*="language-"]::selection,
+.md pre[class*="language-"] ::selection,
+.md code[class*="language-"]::selection,
+.md code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+/* Code blocks */
+.md pre {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	position: relative;
+	margin-top: var(--spacing-sm);
+	margin-bottom: var(--spacing-sm);
+	box-shadow: none;
+	border: none;
+	border-radius: var(--radius-md);
+	background: var(--code-background-fill);
+	font-family: var(--font-mono);
+	display: block;
+	white-space: pre;
+	border-radius: var(--radius-sm);
+	text-shadow: none;
+	border-radius: var(--radius-sm);
+	/* font-size: 85%; */
+	white-space: nowrap;
+	display: block;
+	white-space: pre;
+}
+
+.prose code {
+}
+.prose pre > code {
+}
+
+/* Inline code */
+.md :not(pre) > code {
+	padding: 0.1em;
+	border-radius: var(--radius-xs);
+	white-space: normal;
+	background: var(--code-background-fill);
+	border: 1px solid var(--panel-border-color);
+	padding: var(--spacing-xxs) var(--spacing-xs);
+}
+
+.md .token.comment,
+.md .token.prolog,
+.md .token.doctype,
+.md .token.cdata {
+	color: slategray;
+}
+
+.md .token.punctuation {
+	color: #999;
+}
+
+.md .token.namespace {
+	opacity: 0.7;
+}
+
+.md .token.property,
+.md .token.tag,
+.md .token.boolean,
+.md .token.number,
+.md .token.constant,
+.md .token.symbol,
+.md .token.deleted {
+	color: #905;
+}
+
+.md .token.selector,
+.md .token.attr-name,
+.md .token.string,
+.md .token.char,
+.md .token.builtin,
+.md .token.inserted {
+	color: #690;
+}
+
+.md .token.atrule,
+.md .token.attr-value,
+.md .token.keyword {
+	color: #07a;
+}
+
+.md .token.function,
+.md .token.class-name {
+	color: #dd4a68;
+}
+
+.md .token.regex,
+.md .token.important,
+.md .token.variable {
+	color: #e90;
+}
+
+.md .token.important,
+.md .token.bold {
+	font-weight: bold;
+}
+.md .token.italic {
+	font-style: italic;
+}
+
+.md .token.entity {
+	cursor: help;
+}
+
+.dark .md .token.comment,
+.dark .md .token.prolog,
+.dark .md .token.cdata {
+	color: hsl(220, 10%, 40%);
+}
+
+.dark .md .token.doctype,
+.dark .md .token.punctuation,
+.dark .md .token.entity {
+	color: hsl(220, 14%, 71%);
+}
+
+.dark .md .token.attr-name,
+.dark .md .token.class-name,
+.dark .md .token.boolean,
+.dark .md .token.constant,
+.dark .md .token.number,
+.dark .md .token.atrule {
+	color: hsl(29, 54%, 61%);
+}
+
+.dark .md .token.keyword {
+	color: hsl(286, 60%, 67%);
+}
+
+.dark .md .token.property,
+.dark .md .token.tag,
+.dark .md .token.symbol,
+.dark .md .token.deleted,
+.dark .md .token.important {
+	color: hsl(355, 65%, 65%);
+}
+
+.dark .md .token.selector,
+.dark .md .token.string,
+.dark .md .token.char,
+.dark .md .token.builtin,
+.dark .md .token.inserted,
+.dark .md .token.regex,
+.dark .md .token.attr-value,
+.dark .md .token.attr-value > .token.punctuation {
+	color: hsl(95, 38%, 62%);
+}
+
+.dark .md .token.variable,
+.dark .md .token.operator,
+.dark .md .token.function {
+	color: hsl(207, 82%, 66%);
+}
+
+.dark .md .token.url {
+	color: hsl(187, 47%, 55%);
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -459,6 +459,9 @@ importers:
      '@gradio/number':
        specifier: workspace:^
        version: link:../number
+      '@gradio/paramviewer':
+        specifier: workspace:^
+        version: link:../paramviewer
      '@gradio/plot':
        specifier: workspace:^
        version: link:../plot
@ -1183,6 +1186,25 @@ importers:
        specifier: workspace:^
        version: link:../utils

+  js/paramviewer:
+    dependencies:
+      '@gradio/atoms':
+        specifier: 0.3.0
+        version: 0.3.0(svelte@3.59.2)
+      '@gradio/statustracker':
+        specifier: 0.4.0
+        version: 0.4.0(svelte@3.59.2)
+      '@gradio/utils':
+        specifier: 0.2.0
+        version: link:../utils
+      prismjs:
+        specifier: ^1.29.0
+        version: 1.29.0
+    devDependencies:
+      '@types/prismjs':
+        specifier: ^1.26.3
+        version: 1.26.3
+
  js/plot:
    dependencies:
      '@gradio/atoms':
@ -4211,6 +4233,47 @@ packages:
      tslib: 2.6.2
    dev: false

+  /@gradio/atoms@0.3.0(svelte@3.59.2):
+    resolution: {integrity: sha512-7WQktAb+d8wEjTIYGzyQ8OdWsFSr0NA8adp8G/jAKoMZILJEoAAZSTnahCTSSQcbYIomVdfYA0ZmM342RCd8gg==}
+    dependencies:
+      '@gradio/icons': 0.3.2
+      '@gradio/utils': 0.2.0(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/column@0.1.0:
+    resolution: {integrity: sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw==}
+    dev: false
+
+  /@gradio/icons@0.3.2:
+    resolution: {integrity: sha512-l0jGfSRFiZ/doAXz6L+JEp6MN/a1BTZm88kqVoSnYrKSytP6bnBLRWeF4UvOi2T2fbVrNKenAEt/lwxJE5vK4w==}
+    dev: false
+
+  /@gradio/statustracker@0.4.0(svelte@3.59.2):
+    resolution: {integrity: sha512-Kgk4R2edFX4IK2UBit4UwmRfSrmvkYjKbiMfupj3qxHFwiDHT4YH4rAOqBlvdEWbCYMmLN6EyqqFaYb2+0GwXA==}
+    dependencies:
+      '@gradio/atoms': 0.3.0(svelte@3.59.2)
+      '@gradio/column': 0.1.0
+      '@gradio/icons': 0.3.2
+      '@gradio/utils': 0.2.0(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/theme@0.2.0:
+    resolution: {integrity: sha512-33c68Nk7oRXLn08OxPfjcPm7S4tXGOUV1I1bVgzdM2YV5o1QBOS1GEnXPZPu/CEYPePLMB6bsDwffrLEyLGWVQ==}
+    dev: false
+
+  /@gradio/utils@0.2.0(svelte@3.59.2):
+    resolution: {integrity: sha512-YkwzXufi6IxQrlMW+1sFo8Yn6F9NLL69ZoBsbo7QEhms0v5L7pmOTw+dfd7M3dwbRP2lgjrb52i1kAIN3n6aqQ==}
+    dependencies:
+      '@gradio/theme': 0.2.0
+      svelte-i18n: 3.6.0(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
  /@humanwhocodes/config-array@0.11.13:
    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
    engines: {node: '>=10.10.0'}
@ -7320,7 +7383,6 @@ packages:

  /@types/prismjs@1.26.3:
    resolution: {integrity: sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==}
-    dev: false

  /@types/prop-types@15.7.10:
    resolution: {integrity: sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==}
--- a/requirements.txt
+++ b/requirements.txt
@ -22,4 +22,5 @@ semantic_version~=2.0
 typing_extensions~=4.0
 uvicorn>=0.14.0
 typer[all]>=0.9,<1.0
-tomlkit==0.12.0
+tomlkit==0.12.0
+ruff >= 0.1.7
--- a/test/test_blocks.py
+++ b/test/test_blocks.py
@ -493,6 +493,7 @@ class TestBlocksPostprocessing:
                gr.BarPlot,
                gr.components.Fallback,
                gr.FileExplorer,
+                gr.ParamViewer,
            ]
        ]
        with gr.Blocks() as demo:
--- a/test/test_gradio_component_cli.py
+++ b/test/test_gradio_component_cli.py
@ -52,7 +52,8 @@ from gradio_mycomponent import MyComponent

 {OVERRIDES[template].demo_code.format(name="MyComponent")}

-demo.launch()
+if __name__ == "__main__":
+    demo.launch()
 """
    )
    assert app.strip() == answer.strip()
@ -184,8 +185,9 @@ with gr.Blocks() as demo:
    SimpleComponent2(value={"message": "Hello from Gradio!"}, label="Static")


-demo.launch()
-
+if __name__ == "__main__":
+    demo.launch()
+    
 """
    )
    assert app.strip() == answer.strip()