UI update: API documentation page

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Upcoming Release
 
 ## New Features:
-No changes to highlight.
+* Revamped API documentation page, with in-browser playground and updated aesthetics. [@gary149](https://github.com/gary149) in [PR 2652](https://github.com/gradio-app/gradio/pull/2652)
 
 ## Bug Fixes:
 No changes to highlight.

gradio/blocks.py

@@ -41,11 +41,7 @@
 )
 from gradio.context import Context
 from gradio.deprecation import check_deprecated_parameters
-from gradio.documentation import (
-    document,
-    document_component_api,
-    set_documentation_group,
-)
+from gradio.documentation import document, set_documentation_group
 from gradio.exceptions import DuplicateBlockError, InvalidApiName
 from gradio.utils import (
     TupleNoPrint,
@@ -238,17 +234,6 @@ def set_event_trigger(
             "max_batch_size": max_batch_size,
             "cancels": cancels or [],
         }
-        if api_name is not None:
-            dependency["documentation"] = [
-                [
-                    document_component_api(component.__class__, "input")
-                    for component in inputs
-                ],
-                [
-                    document_component_api(component.__class__, "output")
-                    for component in outputs
-                ],
-            ]
         Context.root_block.dependencies.append(dependency)
         return dependency
 

gradio/components.py

@@ -361,7 +361,7 @@ def preprocess(self, x: str | None) -> str | None:
         """
         Preprocesses input (converts it to a string) before passing it to the function.
         Parameters:
-            x: sample input to preprocess.
+            x: text
         Returns:
             text
         """

gradio/documentation.py

@@ -187,25 +187,3 @@ def generate_documentation():
                 )
             documentation[mode].append(cls_documentation)
     return documentation
-
-
-def document_component_api(component_cls, target):
-    """
-    Used for the view API page in the app itself. Generates documentation based on the pre/postprocess methods of the Component.
-    Parameters:
-        component_cls: The IOComponent in the app to document
-        target: Either "input" or "output", which sets whether to return input or output Component documentation
-    Returns:
-        doc: Description of value expected / returned by Component
-        annotation: Type expected / returned by Component
-    """
-    if target == "input":
-        _, parameter_docs, _, _ = document_fn(component_cls.preprocess)
-        if len(parameter_docs) > 1:
-            return parameter_docs[1]["doc"], str(parameter_docs[1]["annotation"])
-        return None, None
-    elif target == "output":
-        _, _, return_docs, _ = document_fn(component_cls.postprocess)
-        return return_docs.get("doc"), str(return_docs.get("annotation"))
-    else:
-        raise ValueError("Invalid doumentation target.")

test/test_documentation.py

@@ -16,8 +16,3 @@ class TestDocumentation:
     def test_website_documentation(self):
         documentation = gr.documentation.generate_documentation()
         assert len(documentation) > 0
-
-    def test_component_api_documentation(self):
-        for cls in gr.components.IOComponent.__subclasses__():
-            gr.documentation.document_component_api(cls, "input")
-            gr.documentation.document_component_api(cls, "output")

ui/packages/app/index.html

@@ -44,7 +44,7 @@
 			crossorigin="anonymous"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css?family=Source Sans Pro"
+			href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
 			rel="stylesheet"
 		/>
 		<link