layout docs (#1263)

* layout docs

* formatting

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()}
 

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
     }

website/homepage/src/docs_template.html

@@ -401,17 +401,17 @@
     <p class="mb-2 w-4/5 font-semibold">Example usage:</p>
     <pre><code class='lang-python'>{{ docs.blocks["example"] }}</code></pre>
 
-    <!-- <h3 class="font-semibold">Layout Classes:</h3>
+    <h3 class="font-semibold">Layout Classes:</h3>
     <div id="layout-classes" class="func ml-20">
       <h3 id="layout-classes-header" class="text-2xl font-light my-4">Row</h3>
       <pre><code class='lang-python'>with gradio.Row():
     &#183;&#183;&#183;</code></pre>
-      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
+      <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.row["doc"] }}</p>
 
       <h3 id="column-header" class="text-2xl font-light my-4">Column</h3>
       <pre><code class='lang-python'>with gradio.Column():
     &#183;&#183;&#183;</code></pre>
-      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
+      <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.column["doc"] }}</p>
 
       <h3 id="tabs-header" class="text-2xl font-light my-4">Tabs and TabItem</h3>
       <pre><code class='lang-python'>with gradio.Tabs():
@@ -419,9 +419,20 @@
       &#183;&#183;&#183;
     with gradio.TabItem("Tab 2"):
       &#183;&#183;&#183;</code></pre>
-      <p class="mb-2 w-4/5 mt-4 text-lg"></p>
-    </div> -->
+      <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.tabs["doc"] }}</p>
 
+      <h3 id="column-header" class="text-2xl font-light my-4">Group</h3>
+      <pre><code class='lang-python'>with gradio.Group():
+    &#183;&#183;&#183;</code></pre>
+      <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.group["doc"] }}</p>
+
+
+      <h3 id="column-header" class="text-2xl font-light my-4">Box</h3>
+      <pre><code class='lang-python'>with gradio.Box():
+    &#183;&#183;&#183;</code></pre>
+      <p class="mb-2 w-4/5 mt-4 text-lg">{{ docs.box["doc"] }}</p>
+    
+    </div>
           </div>
         </section>
         <section class="flex flex-col gap-6">