Fix gr.Group, container=False #4916

aliabid94 · 2023-07-13T20:47:21Z

The rendering for gr.Group and container=False had been wack for a while. Fixed in this PR. Only Textbox, Number, and Dropdown can set container=False.

In another PR, we can remove Forms entirely and use Groups to bind Form elements, since they render the same. Can do in 4.0 to deprecate Forms.

Example code:

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

vercel · 2023-07-13T20:47:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Jul 17, 2023 4:55pm

gradio-pr-bot · 2023-07-13T20:48:01Z

🎉 The demo notebooks match the run.py files! 🎉

gradio-pr-bot · 2023-07-13T20:50:12Z

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4916-all-demos

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/c409cd5c730ef320b00fbef249fcc168f2d3e51d/gradio-3.36.1-py3-none-any.whl

aliabid94 · 2023-07-13T22:45:31Z

js/atoms/src/Block.svelte

@@ -35,6 +35,7 @@
 	style:overflow={allow_overflow ? "visible" : "hidden"}
 	style:flex-grow={scale}
 	style:min-width={`calc(min(${min_width}px, 100%))`}
+	style:border-width="var(--block-border-width)"


no idea why I needed to do this but was not picking up the css variable otherwise

gradio/components/bar_plot.py

freddyaboulton · 2023-07-13T23:05:25Z

gradio/components/dropdown.py

@@ -101,6 +101,13 @@ def __init__(
            raise ValueError(
                "Custom values are not supported when `multiselect` is True."
            )
+        if not container:
+            if show_label:
+                warnings.warn("show_label has no effect when container is False.")


We should use utils.warn_deprecation here! And in other places were issuing deprecation warnings.

freddyaboulton · 2023-07-13T23:23:48Z

js/app/src/components/TimeSeries/TimeSeries.svelte

@@ -42,7 +42,6 @@
 	export let label: string;
 	export let show_label: boolean;
 	export let colors: Array<string>;
-	export let container: boolean = false;


In some of these files we delete the container prop (like in this one) but in others we keep the prop but don't pass it to the component (like video). I think we should remove the prop entirely from all the front-end components (except the form ones you laid out).

BTW, why only Dropdown, Number, Textbox and not all the form components? Just wondering

Restored container everywhere.
Textbox, Dropdown, and Number have slightly container behavour in that instead on the block border disappearing, the input border element disappears. Makes it easier to play with gr.Group.

gradio/components/video.py

freddyaboulton

Made some minor comments but otherwise this looks good to me! I would add the demo you made in the PR description to all_demos so we can keep track of this behavior before release (in lieu of app-level visual testing). Might be good to add some visual stories for the form components with and without containers too.

abidlabs · 2023-07-14T00:31:42Z

@aliabid94 I was testing this branch in conjunction with the gr.ChatInterface() and I noticed a small issue. If you add gr.Column() within a gr.Group(), it produces a double border. Here's an example:

with gr.Blocks() as demo:
    with gr.Group():
        gr.Chatbot()
        with gr.Row():
            with gr.Column(scale=10):
                gr.Textbox(container=False)
            with gr.Column(scale=1, min_width=0):
                gr.Button()

demo.launch()

Which produces:

Notice the double border on the bottom

This problem goes away if I remove the gr.Column():

with gr.Blocks() as demo:
    with gr.Group():
        gr.Chatbot()
        with gr.Row():
            gr.Textbox(container=False, scale=10)
            gr.Button(scale=1, min_width=0)

demo.launch()

~~but I need the gr.Column() because a user can supply their own submit button and I need to wrap it in a gr.Column() so that it scales appropriately~~

Edit: I removed gr.Column() from the gr.ChatInterface so its not necessary for that PR, but probably would be good to fix anyways

abidlabs · 2023-07-14T04:20:04Z

Also even without gr.Column(), if you look at the border on top of the Textbox, its thicker than the border on the bottom:

I think its because the bottom border of the chatbot and the top border of the textbox are overlapping. This is a nit, but I think it is noticeable in the gr.ChatInterface. Would be great to fix if possible!

pngwn

The implementation looks good to me in general but I do have a question.

What is the rationale for removing container on some of these components? I understand it for components that fill their container completely (like Image). But components like Label, Checkbox, Plot do not fill their container and users might want a simple way to remove both the container and the padding that doesn't require some pretty specific CSS.

In this PR, it seems like container=False has only been considered in so much as it serves Group but container=False has broader application than that.

The other thing is that this is a massive breaking change. We need to add the container kwarg back for everything that had them previously with similar functionality until 4.0.

abidlabs · 2023-07-14T16:04:22Z

The other thing is that this is a massive breaking change. We need to add the container kwarg back for everything that had them previously with similar functionality until 4.0.

Yes we'll need to do that, and put a deprecation warning like @freddyaboulton suggested above

gradio-pr-bot · 2023-07-16T23:42:34Z

🎉 Chromatic build completed!

There are 24 visual changes to review.
There are 0 failed tests to fix.

aliabid94 · 2023-07-17T00:48:44Z

I restored container kwarg for all components. Updated demo code at top that should showcase everything that has changed. Ready for re-review

abidlabs · 2023-07-17T01:26:40Z

Did a little bit of testing, and it looks gr.Group() seems to apply a gr.Column() automatically.

For example, if you run:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Group():
            gr.Button(scale=1)
            gr.Button(scale=1)
            gr.Button(scale=1)
        
demo.launch()

produces this:

If you reverse the order of the gr.Group() and gr.Row(), it renders properly:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Group():
        with gr.Row():
            gr.Button(scale=1)
            gr.Button(scale=1)
            gr.Button(scale=1)
        
demo.launch()

it renders properly:

aliabid94 · 2023-07-17T04:30:05Z

and it looks gr.Group() seems to apply a gr.Column() automatically

Yeah this one's quite tricky, I struggled with it for a while. Would you consider it a blocker? fwiw before this PR, Groups also imposed a Column layout, they did not inherit flex-direction.

This will have a follow up PR later where I replace Form entirely with Group in 4.0, was thinking of handling this case then too.

abidlabs · 2023-07-17T11:33:18Z

Yeah this one's quite tricky, I struggled with it for a while. Would you consider it a blocker? fwiw before this PR, Groups also imposed a Column layout, they did not inherit flex-direction.

Nope not a blocker. Just something I noticed in testing. In fact, if it was the previous behavior, we should document this and keep as is to prevent apps from breaking when they upgrade gradio

I'll do some more testing of this PR to see if I notice any breaking changes!

abidlabs · 2023-07-17T13:52:18Z

gradio/components/base.py

@@ -133,7 +133,7 @@ def __init__(
        value: Any = None,
        label: str | None = None,
        info: str | None = None,
-        show_label: bool = True,
+        show_label: bool | None = None,


Would be good to update the docstring to reflect that show_label=None falls back to the container param

abidlabs · 2023-07-17T13:56:42Z

Tested a bunch of demos, no issues from my end. gr.ChatInterface looks good with this PR as well. I went through the visual changes on Chromatic, they were all very minor so I approved them.

Would be good to get another pair of eyes on this, @pngwn @freddyaboulton

… fix_group

freddyaboulton

Thanks @aliabid94 ! Went through the demos again and did not notice any unintended regressions.

调整了padding。 gradio-app/gradio#4916

changes

8cbd7f6

aliabid94 commented Jul 13, 2023

View reviewed changes

changes

779f2ff

vercel bot deployed to Preview July 13, 2023 22:48 View deployment

aliabid94 marked this pull request as ready for review July 13, 2023 22:52

changes

f6dc2bd

vercel bot deployed to Preview July 13, 2023 22:57 View deployment

freddyaboulton reviewed Jul 13, 2023

View reviewed changes

gradio/components/bar_plot.py Show resolved Hide resolved

freddyaboulton reviewed Jul 13, 2023

View reviewed changes

gradio/components/video.py Outdated Show resolved Hide resolved

freddyaboulton reviewed Jul 13, 2023

View reviewed changes

aliabid94 requested review from abidlabs and pngwn July 14, 2023 05:30

pngwn reviewed Jul 14, 2023

View reviewed changes

changes

c024227

vercel bot deployed to Preview July 16, 2023 23:43 View deployment

changes

ac68ea7

vercel bot deployed to Preview July 17, 2023 00:49 View deployment

changes

be92952

vercel bot deployed to Preview July 17, 2023 00:49 View deployment

fix

d1146c7

vercel bot deployed to Preview July 17, 2023 00:52 View deployment

changes

8530cf8

vercel bot deployed to Preview July 17, 2023 01:02 View deployment

changes

eb38e90

vercel bot deployed to Preview July 17, 2023 01:11 View deployment

abidlabs reviewed Jul 17, 2023

View reviewed changes

Merge branch 'main' into fix_group

e698452

vercel bot deployed to Preview July 17, 2023 13:54 View deployment

abidlabs approved these changes Jul 17, 2023

View reviewed changes

Deploy group demo

06e843c

vercel bot deployed to Preview July 17, 2023 15:51 View deployment

Merge branch 'main' into fix_group

896276b

vercel bot deployed to Preview July 17, 2023 15:54 View deployment

aliabid94 added 2 commits July 17, 2023 09:13

changes

7be643c

Merge branch 'fix_group' of https://github.com/gradio-app/gradio into…

fbf73c7

… fix_group

vercel bot deployed to Preview July 17, 2023 16:14 View deployment

changes

24cbcaa

vercel bot deployed to Preview July 17, 2023 16:43 View deployment

Merge branch 'main' into fix_group

d519732

freddyaboulton approved these changes Jul 17, 2023

View reviewed changes

vercel bot deployed to Preview July 17, 2023 16:55 View deployment

aliabid94 merged commit f2fd37e into main Jul 17, 2023
15 checks passed

aliabid94 deleted the fix_group branch July 17, 2023 17:05

Keldos-Li added a commit to GaiZhenbiao/ChuanhuChatGPT that referenced this pull request Aug 16, 2023

refactor: 适配 gradio-app/gradio#4916

cfbe06d

调整了padding。 gradio-app/gradio#4916

Keldos-Li added a commit to GaiZhenbiao/ChuanhuChatGPT that referenced this pull request Aug 19, 2023

refactor: 适配 gradio-app/gradio#4916

e302910

调整了padding。 gradio-app/gradio#4916

Keldos-Li added a commit to GaiZhenbiao/ChuanhuChatGPT that referenced this pull request Aug 19, 2023

refactor: 适配 gradio-app/gradio#4916

5429d8b

调整了padding。 gradio-app/gradio#4916

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix gr.Group, container=False #4916

Fix gr.Group, container=False #4916

aliabid94 commented Jul 13, 2023 •

edited

vercel bot commented Jul 13, 2023 •

edited

gradio-pr-bot commented Jul 13, 2023 •

edited

gradio-pr-bot commented Jul 13, 2023 •

edited

aliabid94 Jul 13, 2023

freddyaboulton Jul 13, 2023 •

edited

freddyaboulton Jul 13, 2023

aliabid94 Jul 17, 2023

freddyaboulton left a comment

abidlabs commented Jul 14, 2023 •

edited

abidlabs commented Jul 14, 2023

pngwn left a comment •

edited

abidlabs commented Jul 14, 2023

gradio-pr-bot commented Jul 16, 2023 •

edited

aliabid94 commented Jul 17, 2023 •

edited

abidlabs commented Jul 17, 2023 •

edited

aliabid94 commented Jul 17, 2023

abidlabs commented Jul 17, 2023

abidlabs Jul 17, 2023

abidlabs commented Jul 17, 2023

freddyaboulton left a comment

Fix gr.Group, container=False #4916

Fix gr.Group, container=False #4916

Conversation

aliabid94 commented Jul 13, 2023 • edited

vercel bot commented Jul 13, 2023 • edited

gradio-pr-bot commented Jul 13, 2023 • edited

gradio-pr-bot commented Jul 13, 2023 • edited

aliabid94 Jul 13, 2023

Choose a reason for hiding this comment

freddyaboulton Jul 13, 2023 • edited

Choose a reason for hiding this comment

freddyaboulton Jul 13, 2023

Choose a reason for hiding this comment

aliabid94 Jul 17, 2023

Choose a reason for hiding this comment

freddyaboulton left a comment

Choose a reason for hiding this comment

abidlabs commented Jul 14, 2023 • edited

abidlabs commented Jul 14, 2023

pngwn left a comment • edited

Choose a reason for hiding this comment

abidlabs commented Jul 14, 2023

gradio-pr-bot commented Jul 16, 2023 • edited

aliabid94 commented Jul 17, 2023 • edited

abidlabs commented Jul 17, 2023 • edited

aliabid94 commented Jul 17, 2023

abidlabs commented Jul 17, 2023

abidlabs Jul 17, 2023

Choose a reason for hiding this comment

abidlabs commented Jul 17, 2023

freddyaboulton left a comment

Choose a reason for hiding this comment

aliabid94 commented Jul 13, 2023 •

edited

vercel bot commented Jul 13, 2023 •

edited

gradio-pr-bot commented Jul 13, 2023 •

edited

gradio-pr-bot commented Jul 13, 2023 •

edited

freddyaboulton Jul 13, 2023 •

edited

abidlabs commented Jul 14, 2023 •

edited

pngwn left a comment •

edited

gradio-pr-bot commented Jul 16, 2023 •

edited

aliabid94 commented Jul 17, 2023 •

edited

abidlabs commented Jul 17, 2023 •

edited