Fix gr.Group, container=False (#4916)

* changes * changes * changes * changes * changes * fix * changes * changes * Deploy group demo * changes * changes --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>
gradio-app · Jul 17, 2023 · f2fd37e · f2fd37e · vercel · Jul 17, 2023
1 parent c409cd5
commit f2fd37e
Show file tree

Hide file tree

Showing 63 changed files with 255 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ demo.launch()
 - Add missing `display: flex` property to `Row` so that flex styling is applied to children by [@hannahblair] in [PR 4896](https://github.com/gradio-app/gradio/pull/4896)
 - Fixed bug where `gr.Video` could not preprocess urls by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4904](https://github.com/gradio-app/gradio/pull/4904)
 - Fixed copy button rendering in API page on Safari by [@aliabid94](https://github.com/aliabid94) in [PR 4924](https://github.com/gradio-app/gradio/pull/4924)
+- Fixed `gr.Group` and `container=False`. `container` parameter only available for `Textbox`, `Number`, and `Dropdown`, the only elements where it makes sense. By [@aliabid94](https://github.com/aliabid94) in [PR 4916](https://github.com/gradio-app/gradio/pull/4916)
 - Fixed broken image link in auto-generated `app.py` from `ThemeClass.push_to_hub` by [@deepkyu](https://github.com/deepkyu) in [PR 4944](https://github.com/gradio-app/gradio/pull/4944)
 
 ## Other Changes:

diff --git a/demo/blocks_group/run.ipynb b/demo/blocks_group/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_group"]}, {"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", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.\")\n", "    gr.Textbox(\"A\")\n", "    gr.Number(3)\n", "    gr.Button()\n", "    gr.Image()\n", "    gr.Slider()\n", "\n", "    gr.Markdown(\"### This is the same set put in a gr.Group.\")\n", "    with gr.Group():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row, no group.\")\n", "    with gr.Row():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row in a group.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "            gr.Image()\n", "            gr.Slider()\n", "\n", "    gr.Markdown(\"### Several rows grouped together.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "        with gr.Row():\n", "            gr.Image()\n", "            gr.Audio()\n", "\n", "    gr.Markdown(\"### Several columns grouped together. If columns are uneven, there is a gray group background.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                name = gr.Textbox(label=\"Name\")\n", "                btn = gr.Button(\"Hello\")\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                gr.Number()\n", "                gr.Textbox()\n", "            with gr.Column():\n", "                gr.Image()\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                with gr.Row():\n", "                    gr.Number(scale=2)\n", "                    gr.Textbox()\n", "\n", "    gr.Markdown(\"### container=False removes label, padding, and block border, placing elements 'directly' on background.\")\n", "    gr.Radio([1,2,3], container=False)\n", "    gr.Textbox(container=False)\n", "    gr.Image(\"https://picsum.photos/id/237/200/300\", container=False, height=200)\n", "\n", "    gr.Markdown(\"### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.\")\n", "\n", "\n", "    with gr.Group():\n", "        name = gr.Textbox(label=\"Name\")\n", "        output = gr.Textbox(show_label=False, container=False)\n", "        greet_btn = gr.Button(\"Greet\")\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False)\n", "            gr.Textbox(container=False)\n", "            gr.Number(container=False)\n", "            gr.Image(height=100)\n", "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "\n", "    gr.Markdown(\"### More examples\")\n", "\n", "    with gr.Group():\n", "        gr.Chatbot()\n", "        with gr.Row():\n", "            name = gr.Textbox(label=\"Prompot\", container=False)\n", "            go = gr.Button(\"go\", scale=0)\n", "\n", "    with gr.Column():\n", "        gr.Radio([1,2,3], container=False)\n", "        gr.Slider(0, 20, container=False)\n", "\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "            gr.Number(container=False)\n", "            gr.Textbox(container=False)\n", "\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "        with gr.Column():\n", "           gr.Number(container=False)\n", "        with gr.Column():\n", "            gr.Textbox(container=False)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/blocks_group/run.py b/demo/blocks_group/run.py
@@ -0,0 +1,113 @@
+import gradio as gr
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+    gr.Textbox("A")
+    gr.Number(3)
+    gr.Button()
+    gr.Image()
+    gr.Slider()
+
+    gr.Markdown("### This is the same set put in a gr.Group.")
+    with gr.Group():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row, no group.")
+    with gr.Row():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row in a group.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+    gr.Markdown("### Several rows grouped together.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+        with gr.Row():
+            gr.Image()
+            gr.Audio()
+
+    gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+    with gr.Group():
+        with gr.Row():
+            with gr.Column():
+                name = gr.Textbox(label="Name")
+                btn = gr.Button("Hello")
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                gr.Number()
+                gr.Textbox()
+            with gr.Column():
+                gr.Image()
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                with gr.Row():
+                    gr.Number(scale=2)
+                    gr.Textbox()
+
+    gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+    gr.Radio([1,2,3], container=False)
+    gr.Textbox(container=False)
+    gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+    gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+    with gr.Group():
+        name = gr.Textbox(label="Name")
+        output = gr.Textbox(show_label=False, container=False)
+        greet_btn = gr.Button("Greet")
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+            gr.Textbox(container=False)
+            gr.Number(container=False)
+            gr.Image(height=100)
+    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+    gr.Markdown("### More examples")
+
+    with gr.Group():
+        gr.Chatbot()
+        with gr.Row():
+            name = gr.Textbox(label="Prompot", container=False)
+            go = gr.Button("go", scale=0)
+
+    with gr.Column():
+        gr.Radio([1,2,3], container=False)
+        gr.Slider(0, 20, container=False)
+
+    with gr.Group():
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            gr.Number(container=False)
+            gr.Textbox(container=False)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+        with gr.Column():
+           gr.Number(container=False)
+        with gr.Column():
+            gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()