Add gr.Modal component to core Gradio

[dwipper]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Except for the gr.Info, gr.Error, gr.Warning components, there is no native ability to pop open a modal window to gather user input, i.e. "Continue Yes/No", "Submit - Are you sure?", "Delete record - Are you sure?"

Describe the solution you'd like
While a simple solution would be to have a "gr.Confirm" component that would have hardwired Yes/No buttons, a cooler solution would be to have a gr.Modal component that could display one or more components, i.e. gr.Dropdown, gr.Textbox, gr.Radio, etc. Being able pass the gr.Model a full gr.Blocks layout would be really great.

Additional context
Add any other context or screenshots about the feature request here.

[abidlabs]

Hi @dwipper there is a Gradio custom component gradio_modal that is quite popular and does exactly this:

a gr.Modal component that could display one or more components, i.e. gr.Dropdown, gr.Textbox, gr.Radio, etc. Being able pass the gr.Model a full gr.Blocks layout would be really great.

See here on how to use in your gradio app: https://huggingface.co/spaces/aliabid94/gradio_modal

I do think its a good idea to bring this into core though, so tagging @aliabid94

[dwipper]

@abidlabs @aliabid94 Thanks! That works great! I played around with it a bit. Since it appears to close on mouse-click outside the modal and escape in addition to the "X", it would be helpful to have a param that optionally pops up a "Are you sure you want to close" type message. While the standard modal uses the full viewport, I tried a bunch of CSS mods to come up with more of a confirmation style modal. Without specifying specific pixels sizes (which can be problematic) the modals looked pretty wonky. Wondering if there could be a param that either goes 100% or shrinks to fit the layout/components?

[dwipper]

Here's is a modal over modal. Doesn't work so great:

[dwipper]

BTW, a developer came up with an approach using gr.Row and gr.Column and CSS: https://www.gradio.app/playground?demo=Hello_World&code=aW1wb3J0IGdyYWRpbyBhcyBncgppbXBvcnQgcmFuZG9tCgojIENoYXRib3QgZGVtbyB3aXRoIG11bHRpbW9kYWwgaW5wdXQgKHRleHQsIG1hcmtkb3duLCBMYVRlWCwgY29kZSBibG9ja3MsIGltYWdlLCBhdWRpbywgJiB2aWRlbykuIFBsdXMgc2hvd3Mgc3VwcG9ydCBmb3Igc3RyZWFtaW5nIHRleHQuCmNzcyA9ICIiIgoubW9kYWwgewogICAgcG9zaXRpb246IGFic29sdXRlICFpbXBvcnRhbnQ7CiAgICB6LWluZGV4OiAxOwogICAgbGVmdDogMDsKICAgIHRvcDogMDsKICAgIHdpZHRoOiBmaXQtY29udGVudCAhaW1wb3J0YW50OwogICAgaGVpZ2h0OiBmaXQtY29udGVudCAhaW1wb3J0YW50OwogICAgdG9wOiA1MCU7CiAgICBsZWZ0OiA1MCU7CiAgICBtYXJnaW46IGF1dG87CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMCwgMCwgMCk7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNCk7CiAgICBtYXJnaW4tbGVmdDogYXV0bzsKICAgIHRvcDogNTAlOwogICAgbGVmdDogNTAlOwogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7Cn0KCi5tb2RhbC1jb250ZW50IHsKICAgIG1hcmdpbjogYXV0bzsKICAgIHBhZGRpbmc6IDIwcHg7CiAgICBib3JkZXI6IDFweCBzb2xpZCAjODg4Owp9CiIiIgpjb2xvcl9tYXAgPSB7CiAgICAiaGFybWZ1bCI6ICJjcmltc29uIiwKICAgICJuZXV0cmFsIjogImdyYXkiLAogICAgImJlbmVmaWNpYWwiOiAiZ3JlZW4iLAp9CgpkZWYgaHRtbF9zcmMoaGFybV9sZXZlbCk6CiAgICByZXR1cm4gZiIiIgo8ZGl2IHN0eWxlPSJkaXNwbGF5OiBmbGV4OyBnYXA6IDVweDsiPgogIDxkaXYgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IHtjb2xvcl9tYXBbaGFybV9sZXZlbF19OyBwYWRkaW5nOiAycHg7IGJvcmRlci1yYWRpdXM6IDVweDsiPgogIHtoYXJtX2xldmVsfQogIDwvZGl2Pgo8L2Rpdj4KIiIiCgpkZWYgcHJpbnRfbGlrZV9kaXNsaWtlKHg6IGdyLkxpa2VEYXRhKToKICAgIHByaW50KHguaW5kZXgsIHgudmFsdWUsIHgubGlrZWQpCiAgICBtc2cgPSAiV2hhdCB3YXMgc2F0aXNmeWluZyBhYm91dCB0aGlzIHJlc3BvbnNlPyIgaWYgeC5saWtlZCBlbHNlICJXaGF0IHdhcyB1bnNhdGlzZnlpbmcgYWJvdXQgdGhpcyByZXNwb25zZT8iCiAgICByZXR1cm4gZ3IuUm93KHZpc2libGU9VHJ1ZSksIGdyLlRleHRib3gobGFiZWw9bXNnKQoKZGVmIGFkZF9tZXNzYWdlKGhpc3RvcnksIG1lc3NhZ2UpOgogICAgZm9yIHggaW4gbWVzc2FnZVsiZmlsZXMiXToKICAgICAgICBoaXN0b3J5LmFwcGVuZCgoKHgsKSwgTm9uZSkpCiAgICBpZiBtZXNzYWdlWyJ0ZXh0Il0gaXMgbm90IE5vbmU6CiAgICAgICAgaGlzdG9yeS5hcHBlbmQoKG1lc3NhZ2VbInRleHQiXSwgTm9uZSkpCiAgICByZXR1cm4gaGlzdG9yeSwgZ3IuTXVsdGltb2RhbFRleHRib3godmFsdWU9Tm9uZSwgaW50ZXJhY3RpdmU9RmFsc2UpCgpkZWYgYm90KGhpc3RvcnksIHJlc3BvbnNlX3R5cGUpOgogICAgaWYgcmVzcG9uc2VfdHlwZSA9PSAiZ2FsbGVyeSI6CiAgICAgICAgaGlzdG9yeVstMV1bMV0gPSBnci5HYWxsZXJ5KAogICAgICAgICAgICBbCiAgICAgICAgICAgICAgICAiaHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL2dyYWRpby1hcHAvZ3JhZGlvL21haW4vdGVzdC90ZXN0X2ZpbGVzL2J1cy5wbmciLAogICAgICAgICAgICAgICAgImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9ncmFkaW8tYXBwL2dyYWRpby9tYWluL3Rlc3QvdGVzdF9maWxlcy9idXMucG5nIiwKICAgICAgICAgICAgXQogICAgICAgICkKICAgIGVsaWYgcmVzcG9uc2VfdHlwZSA9PSAiaW1hZ2UiOgogICAgICAgIGhpc3RvcnlbLTFdWzFdID0gZ3IuSW1hZ2UoCiAgICAgICAgICAgICJodHRwczovL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vZ3JhZGlvLWFwcC9ncmFkaW8vbWFpbi90ZXN0L3Rlc3RfZmlsZXMvYnVzLnBuZyIKICAgICAgICApCiAgICBlbGlmIHJlc3BvbnNlX3R5cGUgPT0gInZpZGVvIjoKICAgICAgICBoaXN0b3J5Wy0xXVsxXSA9IGdyLlZpZGVvKAogICAgICAgICAgICAiaHR0cHM6Ly9naXRodWIuY29tL2dyYWRpby1hcHAvZ3JhZGlvL3Jhdy9tYWluL2RlbW8vdmlkZW9fY29tcG9uZW50L2ZpbGVzL3dvcmxkLm1wNCIKICAgICAgICApCiAgICBlbGlmIHJlc3BvbnNlX3R5cGUgPT0gImF1ZGlvIjoKICAgICAgICBoaXN0b3J5Wy0xXVsxXSA9IGdyLkF1ZGlvKAogICAgICAgICAgICAiaHR0cHM6Ly9naXRodWIuY29tL2dyYWRpby1hcHAvZ3JhZGlvL3Jhdy9tYWluL3Rlc3QvdGVzdF9maWxlcy9hdWRpb19zYW1wbGUud2F2IgogICAgICAgICkKICAgIGVsaWYgcmVzcG9uc2VfdHlwZSA9PSAiaHRtbCI6CiAgICAgICAgaGlzdG9yeVstMV1bMV0gPSBnci5IVE1MKAogICAgICAgICAgICBodG1sX3NyYyhyYW5kb20uY2hvaWNlKFsiaGFybWZ1bCIsICJuZXV0cmFsIiwgImJlbmVmaWNpYWwiXSkpCiAgICAgICAgKQogICAgZWxzZToKICAgICAgICBoaXN0b3J5Wy0xXVsxXSA9ICJDb29sISIKICAgIHJldHVybiBoaXN0b3J5Cgp3aXRoIGdyLkJsb2NrcyhmaWxsX2hlaWdodD1UcnVlLCBjc3M9Y3NzKSBhcyBkZW1vOgogICAgY2hhdGJvdCA9IGdyLkNoYXRib3QoCiAgICAgICAgZWxlbV9pZD0iY2hhdGJvdCIsCiAgICAgICAgYnViYmxlX2Z1bGxfd2lkdGg9RmFsc2UsCiAgICAgICAgc2NhbGU9MSwKICAgICkKICAgIHJlc3BvbnNlX3R5cGUgPSBnci5SYWRpbygKICAgICAgICBbCiAgICAgICAgICAgICJpbWFnZSIsCiAgICAgICAgICAgICJ0ZXh0IiwKICAgICAgICAgICAgImdhbGxlcnkiLAogICAgICAgICAgICAidmlkZW8iLAogICAgICAgICAgICAiYXVkaW8iLAogICAgICAgICAgICAiaHRtbCIsCiAgICAgICAgXSwKICAgICAgICB2YWx1ZT0idGV4dCIsCiAgICAgICAgbGFiZWw9IlJlc3BvbnNlIFR5cGUiLAogICAgKQoKICAgIGNoYXRfaW5wdXQgPSBnci5NdWx0aW1vZGFsVGV4dGJveCgKICAgICAgICBpbnRlcmFjdGl2ZT1UcnVlLAogICAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciBtZXNzYWdlIG9yIHVwbG9hZCBmaWxlLi4uIiwKICAgICAgICBzaG93X2xhYmVsPUZhbHNlLAogICAgKQoKICAgIGNoYXRfbXNnID0gY2hhdF9pbnB1dC5zdWJtaXQoCiAgICAgICAgYWRkX21lc3NhZ2UsIFtjaGF0Ym90LCBjaGF0X2lucHV0XSwgW2NoYXRib3QsIGNoYXRfaW5wdXRdCiAgICApCiAgICBib3RfbXNnID0gY2hhdF9tc2cudGhlbigKICAgICAgICBib3QsIFtjaGF0Ym90LCByZXNwb25zZV90eXBlXSwgY2hhdGJvdCwgYXBpX25hbWU9ImJvdF9yZXNwb25zZSIKICAgICkKICAgIGJvdF9tc2cudGhlbihsYW1iZGE6IGdyLk11bHRpbW9kYWxUZXh0Ym94KGludGVyYWN0aXZlPVRydWUpLCBOb25lLCBbY2hhdF9pbnB1dF0pCgogICAgc2lkZWJhcl9yb3cgPSBnci5Sb3codmlzaWJsZT1GYWxzZSwgZWxlbV9jbGFzc2VzPSJtb2RhbCIpCiAgICB3aXRoIHNpZGViYXJfcm93OgogICAgICAgIHdpdGggZ3IuQ29sdW1uKGVsZW1fY2xhc3Nlcz0ibW9kYWwtY29udGVudCIpOgogICAgICAgICAgICBnci5NYXJrZG93bigiUGxlYXNlIHByb3ZpZGUgZGV0YWlsczogKG9wdGlvbmFsKSEiKQogICAgICAgICAgICB0eHQgPSBnci5UZXh0Ym94KGludGVyYWN0aXZlPVRydWUpCiAgICAgICAgICAgIG1vZGFsQnV0dG9uID0gZ3IuQnV0dG9uKCJTdWJtaXQiKQogICAgICAgICAgICBtb2RhbEJ1dHRvbi5jbGljayhsYW1iZGE6IGdyLlJvdyh2aXNpYmxlPUZhbHNlKSwgTm9uZSwgW3NpZGViYXJfcm93XSkKCiAgICBjaGF0Ym90Lmxpa2UocHJpbnRfbGlrZV9kaXNsaWtlLCBOb25lLCBvdXRwdXRzPVtzaWRlYmFyX3JvdywgdHh0XSkKCmlmIF9fbmFtZV9fID09ICJfX21haW5fXyI6CiAgICBkZW1vLmxhdW5jaCgpCg==

[abidlabs]

Closing as we decided against adding gr.Modal to core Gradio. Instead, any issues should be opened up in the Discussions here: https://huggingface.co/spaces/aliabid94/gradio_modal

[cims-ai]

@abidlabs Totally understand. I've had a developer upgrade the component to handle a variety of use cases: https://pypi.org/project/gradio-modal-component . It features various controls, including controlling when the modal closes, a close message, and close styling, control over blur, background transparency, height, and width.

[ROBERT-MCDOWELL]

@cims-ai link broken

[dwipper]

@ROBERT-MCDOWELL Sorry, we had some bugs with the component, and it's not compatible with Gradio 5.0, so we pulled it....

[ROBERT-MCDOWELL]

ah ok.

[abidlabs]

Hi @dwipper please see #9463 for instructions to upgrade the custom component to 5.0