Remove style parameter (#4374)

* changes * changes * changes * changes * changes * changes * fixes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes
gradio-app · Jun 8, 2023 · ff6e676 · ff6e676
1 parent 8617291
commit ff6e676
Show file tree

Hide file tree

Showing 62 changed files with 1,317 additions and 965 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,8 @@ No changes to highlight.
 ## Other Changes:
 
 - When running on Spaces, handler functions will be transformed by the [PySpaces](https://pypi.org/project/spaces/) library in order to make them work with specific hardware. It will have no effect on standalone Gradio apps or regular Gradio Spaces and can be globally deactivated as follows : `import spaces; spaces.disable_gradio_auto_wrap()` by [@cbensimon](https://github.com/cbensimon) in [PR 4389](https://github.com/gradio-app/gradio/pull/4389).
+- Deprecated `.style` parameter and moved arguments to constructor. Added support for `.update()` to all arguments initially in style. Added `scale` and `min_width` support to every Component. By [@aliabid94](https://github.com/aliabid94) in [PR 4374](https://github.com/gradio-app/gradio/pull/4374)
+
 
 ## Breaking Changes:
 

diff --git a/demo/blocks_layout/run.ipynb b/demo/blocks_layout/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"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", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    with gr.Row():\n", "        gr.Image(interactive=True)\n", "        gr.Image()\n", "    with gr.Row():\n", "        gr.Textbox(label=\"Text\")\n", "        gr.Number(label=\"Count\")\n", "        gr.Radio(choices=[\"One\", \"Two\"])\n", "    with gr.Row():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                gr.Textbox(label=\"Text\")\n", "                gr.Number(label=\"Count\")\n", "                gr.Radio(choices=[\"One\", \"Two\"])\n", "            gr.Image()\n", "            with gr.Column():\n", "                gr.Image(interactive=True)\n", "                gr.Image()\n", "    gr.Image()\n", "    gr.Textbox(label=\"Text\")\n", "    gr.Number(label=\"Count\")\n", "    gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"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", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    with gr.Row():\n", "        gr.Image(interactive=True, scale=2)\n", "        gr.Image()\n", "    with gr.Row():\n", "        gr.Textbox(label=\"Text\")\n", "        gr.Number(label=\"Count\", scale=2)\n", "        gr.Radio(choices=[\"One\", \"Two\"])\n", "    with gr.Row():\n", "        gr.Button(\"500\", scale=0, min_width=500)\n", "        gr.Button(\"A\").style(full_width=False)\n", "        gr.Button(\"grow\")\n", "    with gr.Row():\n", "        gr.Textbox()\n", "        gr.Textbox()\n", "        gr.Button()        \n", "    with gr.Row():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                gr.Textbox(label=\"Text\")\n", "                gr.Number(label=\"Count\")\n", "                gr.Radio(choices=[\"One\", \"Two\"])\n", "            gr.Image()\n", "            with gr.Column():\n", "                gr.Image(interactive=True)\n", "                gr.Image()\n", "    gr.Image()\n", "    gr.Textbox(label=\"Text\")\n", "    gr.Number(label=\"Count\")\n", "    gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/blocks_layout/run.py b/demo/blocks_layout/run.py
@@ -5,12 +5,20 @@
 
 with demo:
     with gr.Row():
-        gr.Image(interactive=True)
+        gr.Image(interactive=True, scale=2)
         gr.Image()
     with gr.Row():
         gr.Textbox(label="Text")
-        gr.Number(label="Count")
+        gr.Number(label="Count", scale=2)
         gr.Radio(choices=["One", "Two"])
+    with gr.Row():
+        gr.Button("500", scale=0, min_width=500)
+        gr.Button("A").style(full_width=False)
+        gr.Button("grow")
+    with gr.Row():
+        gr.Textbox()
+        gr.Textbox()
+        gr.Button()        
     with gr.Row():
         with gr.Row():
             with gr.Column():

diff --git a/gradio/blocks.py b/gradio/blocks.py
@@ -97,7 +97,6 @@ def __init__(
         self.root_url = root_url
         self.share_token = secrets.token_urlsafe(32)
         self._skip_init_processing = _skip_init_processing
-        self._style = {}
         self.parent: BlockContext | None = None
 
         if render:
@@ -297,7 +296,6 @@ def get_config(self):
             "visible": self.visible,
             "elem_id": self.elem_id,
             "elem_classes": self.elem_classes,
-            "style": self._style,
             "root_url": self.root_url,
         }
 
@@ -329,6 +327,9 @@ def __init__(
         self.children: list[Block] = []
         Block.__init__(self, visible=visible, render=render, **kwargs)
 
+    def add_child(self, child: Block):
+        self.children.append(child)
+
     def __enter__(self):
         self.parent = Context.block
         Context.block = self
@@ -350,11 +351,12 @@ def fill_expected_parents(self):
                 if pseudo_parent is not None and isinstance(
                     pseudo_parent, expected_parent
                 ):
-                    pseudo_parent.children.append(child)
+                    pseudo_parent.add_child(child)
                 else:
                     pseudo_parent = expected_parent(render=False)
+                    pseudo_parent.parent = self
                     children.append(pseudo_parent)
-                    pseudo_parent.children = [child]
+                    pseudo_parent.add_child(child)
                     if Context.root_block:
                         Context.root_block.blocks[pseudo_parent._id] = pseudo_parent
                 child.parent = pseudo_parent
@@ -772,6 +774,11 @@ def from_config(
         """
         config = copy.deepcopy(config)
         components_config = config["components"]
+        for component_config in components_config:
+            # for backwards compatibility, extract style into props
+            if "style" in component_config["props"]:
+                component_config["props"].update(component_config["props"]["style"])
+                del component_config["props"]["style"]
         theme = config.get("theme", "default")
         original_mapping: dict[int, Block] = {}
         root_urls = {root_url}
@@ -785,7 +792,6 @@ def get_block_instance(id: int) -> Block:
             cls = component_or_layout_class(block_config["type"])
             block_config["props"].pop("type", None)
             block_config["props"].pop("name", None)
-            style = block_config["props"].pop("style", None)
             # If a Gradio app B is loaded into a Gradio app A, and B itself loads a
             # Gradio app C, then the root_urls of the components in A need to be the
             # URL of C, not B. The else clause below handles this case.
@@ -795,8 +801,6 @@ def get_block_instance(id: int) -> Block:
                 root_urls.add(block_config["props"]["root_url"])
             # Any component has already processed its initial value, so we skip that step here
             block = cls(**block_config["props"], _skip_init_processing=True)
-            if style and isinstance(block, components.IOComponent):
-                block.style(**style)
             return block
 
         def iterate_over_children(children_list):
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"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", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", " with gr.Row():\n", " gr.Image(interactive=True)\n", " gr.Image()\n", " with gr.Row():\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\")\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", " with gr.Row():\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\")\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", " gr.Image()\n", " with gr.Column():\n", " gr.Image(interactive=True)\n", " gr.Image()\n", " gr.Image()\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\")\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
		{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"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", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", " with gr.Row():\n", " gr.Image(interactive=True, scale=2)\n", " gr.Image()\n", " with gr.Row():\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\", scale=2)\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", " with gr.Row():\n", " gr.Button(\"500\", scale=0, min_width=500)\n", " gr.Button(\"A\").style(full_width=False)\n", " gr.Button(\"grow\")\n", " with gr.Row():\n", " gr.Textbox()\n", " gr.Textbox()\n", " gr.Button() \n", " with gr.Row():\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\")\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", " gr.Image()\n", " with gr.Column():\n", " gr.Image(interactive=True)\n", " gr.Image()\n", " gr.Image()\n", " gr.Textbox(label=\"Text\")\n", " gr.Number(label=\"Count\")\n", " gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}