diff --git a/gradio/layouts.py b/gradio/layouts.py index 695235ac67..4dafa39e3d 100644 --- a/gradio/layouts.py +++ b/gradio/layouts.py @@ -9,6 +9,10 @@ if TYPE_CHECKING: # Only import for type checking (is False at runtime). class Row(BlockContext): + """ + Row is a layout element within Blocks that renders all children horizontally. + """ + def get_config(self): return {"type": "row", **super().get_config()} @@ -35,6 +39,10 @@ class Row(BlockContext): class Column(BlockContext): + """ + Column is a layout element within Blocks that renders all children vertically. + """ + def __init__( self, visible: bool = True, @@ -66,6 +74,12 @@ class Column(BlockContext): class Tabs(BlockContext): + """ + Tabs is a layout element within Blocks that can contain multiple TabItem's. Each + TabItem gets rendered as a individual tab. The TabItem's must be nested within the + Tabs context. + """ + def change(self, fn: Callable, inputs: List[Component], outputs: List[Component]): """ Parameters: @@ -78,6 +92,11 @@ class Tabs(BlockContext): class TabItem(BlockContext): + """ + TabItem is a layout element that must be defined within a Tabs context. The + components defined within the TabItem will be rendered within a tab. + """ + def __init__(self, label, **kwargs): super().__init__(**kwargs) self.label = label @@ -97,6 +116,11 @@ class TabItem(BlockContext): class Group(BlockContext): + """ + Group is a layout element within Blocks which groups together children so that + they do not have any padding or margin between them. + """ + def get_config(self): return {"type": "group", **super().get_config()} @@ -111,6 +135,11 @@ class Group(BlockContext): class Box(BlockContext): + """ + Box is a a layout element which places children in a box with rounded corners and + some padding around them. + """ + def get_config(self): return {"type": "box", **super().get_config()} diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py index 8e4e03a599..558e7d4f26 100644 --- a/website/homepage/render_html.py +++ b/website/homepage/render_html.py @@ -28,7 +28,6 @@ from gradio.components import ( JSON, HTML, Gallery, - Carousel, Chatbot, Model3D, Plot, @@ -41,7 +40,7 @@ from gradio.components import ( from gradio.interface import Interface, TabbedInterface from gradio.mix import Series, Parallel from gradio.blocks import Blocks -from gradio.layouts import Row, Column, Tabs, TabItem +from gradio.layouts import Row, Column, Tabs, TabItem, Group, Box from gradio.events import Changeable, Clearable, Submittable, Editable, Playable, Clickable GRADIO_DIR = "../../" @@ -388,7 +387,6 @@ def render_docs(): JSON, HTML, Gallery, - Carousel, Chatbot, Model3D, Plot, @@ -502,29 +500,42 @@ demo.launch()""" "params_doc": parallel_params[2], } - # row = { - # "doc": get_class_documentation(Row, lines=None)["doc"], - # "params": get_function_documentation(Row.__init__)[1], - # "params_doc": get_function_documentation(Row.__init__)[2], - # } + row = { + "doc": get_class_documentation(Row, lines=None)["doc"], + "params": get_function_documentation(Row.__init__)[1], + "params_doc": get_function_documentation(Row.__init__)[2], + } - # column = { - # "doc": get_class_documentation(Column, lines=None)["doc"], - # "params": get_function_documentation(Column.__init__)[1], - # "params_doc": get_function_documentation(Column.__init__)[2], - # } + column = { + "doc": get_class_documentation(Column, lines=None)["doc"], + "params": get_function_documentation(Column.__init__)[1], + "params_doc": get_function_documentation(Column.__init__)[2], + } - # tabs = { - # "doc": get_class_documentation(Tabs, lines=None)["doc"], - # "params": get_function_documentation(Tabs.__init__)[1], - # "params_doc": get_function_documentation(Tabs.__init__)[2], - # } + tabs = { + "doc": get_class_documentation(Tabs, lines=None)["doc"], + "params": get_function_documentation(Tabs.__init__)[1], + "params_doc": get_function_documentation(Tabs.__init__)[2], + } + + tabitem = { + "doc": get_class_documentation(TabItem, lines=None)["doc"], + "params": get_function_documentation(TabItem.__init__)[1], + "params_doc": get_function_documentation(TabItem.__init__)[2], + } + + group = { + "doc": get_class_documentation(Group, lines=None)["doc"], + "params": get_function_documentation(Group.__init__)[1], + "params_doc": get_function_documentation(Group.__init__)[2], + } + + box = { + "doc": get_class_documentation(Box, lines=None)["doc"], + "params": get_function_documentation(Box.__init__)[1], + "params_doc": get_function_documentation(Box.__init__)[2], + } - # tabitem = { - # "doc": get_class_documentation(TabItem, lines=None)["doc"], - # "params": get_function_documentation(TabItem.__init__)[1], - # "params_doc": get_function_documentation(TabItem.__init__)[2], - # } SCREENSHOT_FOLDER = "dist/assets/demo_screenshots" @@ -559,10 +570,12 @@ demo.launch()""" "tabbed_interface": tabbed_interface, "parallel": parallel, "series": series, - # "row": row, - # "column": column, - # "tabs": tabs, - # "tabitem": tabitem, + "row": row, + "column": column, + "tabs": tabs, + "tabitem": tabitem, + "group": group, + "box": box, "demo_code": demo_code, "embedding_configs": embedding_configs } diff --git a/website/homepage/src/docs_template.html b/website/homepage/src/docs_template.html index 381ffc0a86..98304e0af3 100644 --- a/website/homepage/src/docs_template.html +++ b/website/homepage/src/docs_template.html @@ -401,17 +401,17 @@
Example usage:
{{ docs.blocks["example"] }}
-
+ {{ docs.tabs["doc"] }}
+with gradio.Group():
+ ···
+ {{ docs.group["doc"] }}
+ + +with gradio.Box():
+ ···
+ {{ docs.box["doc"] }}
+ +