---
tags: [gradio-custom-component, ]
title: gradio_modal_component
short_description: A gradio custom component
colorFrom: blue
colorTo: yellow
sdk: gradio
pinned: false
app_file: space.py
---
# `gradio_modal_component`
<a href="https://pypi.org/project/gradio_modal_component/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal_component"></a>
Python library for easily interacting with trained machine learning models
## Installation
```bash
pip install gradio_modal_component
```
## Usage
```python
import gradio as gr
from gradio_modal_component import modal_component
def display_image(img):
return img
def get_blur_value(selected_blur):
return selected_blur
def show_modal_with_dimensions(width, height):
# Convert inputs to integers with default values if empty or invalid
try:
width = int(width) if width else None
height = int(height) if height else None
except ValueError:
width = None
height = None
return modal_component(visible=True, width=width, height=height)
def show_modal_with_dimensions_and_percentage(
width_input8, height_input8, width_percent8, height_percent8
):
# Convert inputs to integers with default values if empty or invalid
try:
width = int(width_input8) if width_input8 else None
height = int(height_input8) if height_input8 else None
width_percent = int(width_percent8) if width_percent8 else None
height_percent = int(height_percent8) if height_percent8 else None
except ValueError:
width = None
height = None
return modal_component(
visible=True,
width=width,
height=height,
content_width_percent=width_percent,
content_height_percent=height_percent,
)
with gr.Blocks() as demo:
gr.Markdown("# Image Modal Demonstration")
with gr.Tab("Tab 1"):
# MODAL 1
gr.Markdown(
"""
- Fixed close icon (X) is overlapped by the image. or big components.
"""
)
show_btn = gr.Button("Show Modal")
# MODAL 2
gr.Markdown(
"""
- Enable the `display_close_icon` parameter to allow the user to close the modal by clicking outside, clicking the X, or pressing the escape key. In this case `display_close_icon = False` (Modal 1 is true), If not set defaults to `True`.
- Enale the `esc_close` parameter to allow the user to close the modal by pressing the escape key.
"""
)
show_btn2 = gr.Button("Show Modal 2")
# MODAL 3
gr.Markdown(
"""
- Enale the `close_outer_click` parameter to allow the user to close the modal by click on the blur. Defaults to `True`, in this case `close_outer_click = False`.
"""
)
show_btn3 = gr.Button("Show Modal 3")
# MODAL 4
gr.Markdown(
"""
- Enable the `close_message` parameter to show a message when the user tries to close the modal.
- The close message dialog can be customized using `close_message_style` to modify button text, colors, and background.
"""
)
with gr.Row():
show_btn4 = gr.Button("Show Modal 4 (Default Style)")
show_btn4_custom = gr.Button("Show Modal 4 (Custom Style)")
# MODAL 5
gr.Markdown(
"""
- Handle Z-index.
"""
)
show_btn5 = gr.Button("Show Modal 5")
# MODAL 6
gr.Markdown(
"""
- Add `bg_blur` option to dynamically change the background blur of the modal.
"""
)
with gr.Row():
# Dropdown for selecting blur level
blur_level = gr.Dropdown(
[0, 4, 8, 12, 16],
label="Blur Level",
value=4, # Default value
interactive=True,
)
opacity_level = gr.Dropdown(
[0, 0.1, 0.2, 0.3, 0.4, 0.5],
label="Opacity Level",
value=0.4, # Default value
interactive=True,
)
show_btn6 = gr.Button("Show Modal 6")
# MODAL 7
gr.Markdown(
"""
- Add `width` and `height` option to dynamically change the size of the modal (Mesure in pixels.)
"""
)
with gr.Row():
width_input = gr.Textbox(
label="Width", placeholder="Enter width", value="1000"
)
height_input = gr.Textbox(
label="Height", placeholder="Enter height", value="500"
)
show_btn7 = gr.Button("Show Modal 7")
# MODAL 8
gr.Markdown(
"""
- Add `content_width_percent` and `content_height_percent` option to dynamically change the size of the modal.
- **Please note that if the content height is higher than the modal height, the modal will scroll. That why you can see the ratio correctly.**
"""
)
with gr.Row():
width_input8 = gr.Textbox(
label="Width (px)", placeholder="Enter width", value="1000"
)
height_input8 = gr.Textbox(
label="Height (px)", placeholder="Enter height", value="500"
)
width_percent8 = gr.Textbox(
label="Width percent (%)", placeholder="Enter width", value="50"
)
height_percent8 = gr.Textbox(
label="Height percent (%)", placeholder="Enter height", value="80"
)
show_btn8 = gr.Button("Show Modal 8")
# MODAL 9
gr.Markdown(
"""
- Add `content_padding` configuration to control the spacing around modal content
- Padding can be specified using CSS-style values (e.g., "100px 50px" for vertical/horizontal padding)
- Please modify `content_padding` in the code to see the changes. current value is `100px`
"""
)
with gr.Row():
width_input9 = gr.Textbox(
label="Width", placeholder="Enter width", value="1000"
)
height_input9 = gr.Textbox(
label="Height", placeholder="Enter height", value="500"
)
show_btn9 = gr.Button("Show Modal 9")
# MODAL 10
gr.Markdown(
"""
- Add `content_padding` configuration to control the spacing around modal content
- Padding can be specified using CSS-style values (e.g., "100px 50px" for vertical/horizontal padding)
- Please modify `content_padding` in the code to see the changes. current value is `100px`
- Add `animate` default = `None`; `animate_duration` default = `0.4` option to show the modal with animation
"""
)
show_btn10 = gr.Button("Show Modal 10")
# MODAL lIST
with modal_component(visible=False, display_close_icon=True) as modal:
gr.Image(
"https://images.unsplash.com/photo-1612178537253-bccd437b730e",
label="Random Image",
)
with modal_component(
visible=False, display_close_icon=False, close_on_esc=True
) as modal2:
with gr.Column():
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
with modal_component(visible=False, close_outer_click=False) as modal3:
with gr.Column():
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
# Original Modal 4 with default styling
with modal_component(
visible=False,
close_outer_click=True,
close_message="Are you sure you want to close?",
) as modal4:
with gr.Column():
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
# New Modal 4 with custom styling
with modal_component(
visible=False,
close_outer_click=True,
close_message="Do you want to discard your changes?",
close_message_style={
"message_color": "#000000", # Black text
"confirm_text": "Discard",
"cancel_text": "Keep Editing",
"confirm_bg_color": "#DC2626", # Red color
"cancel_bg_color": "#059669", # Green color
"confirm_text_color": "#FFFFFF", # White text
"cancel_text_color": "#FFFFFF", # White text
"modal_bg_color": "#F3F4F6", # Light gray background
"confirm_border_color": None,
"cancel_border_color": None,
# "height": "100px",
# "width": "200px",
"size": "lg", # "lg | sm"
},
) as modal4_custom:
with gr.Column():
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
with modal_component(visible=False, close_outer_click=True) as modal5:
with modal_component(
visible=False,
close_outer_click=True,
close_message="Are you sure want to close ?",
) as modal51:
with gr.Column():
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
gr.Markdown(
"""
# Handling Z-index for Modal
"""
)
show_btn51 = gr.Button("Show Sub Modal 5")
with modal_component(visible=False) as modal6:
gr.Markdown(
f"""
# View Background Blur and Opacity Level
"""
)
with modal_component(visible=False) as modal7:
gr.Markdown("# Custom Sized Modal")
with gr.Column():
gr.Markdown("This modal demonstrates custom width and height settings.")
gr.Image(
"https://images.unsplash.com/photo-1612178537253-bccd437b730e",
label="Sample Image with Custom Dimensions",
)
with modal_component(
visible=False,
content_width_percent=50,
content_height_percent=10,
width=1000,
height=500,
) as modal8:
gr.Markdown("# Custom Sized Modal")
with gr.Column():
gr.Markdown("This modal demonstrates custom width and height settings.")
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
# Modal 9 with custom padding
# Padding can be specified using CSS padding format: e.g. '100px' or '100px 50px' or '100px 50px 100px 50px'
# Padding values refer to "Top Right Bottom Left"
with modal_component(
visible=False, width=1000, height=500, content_padding="100px"
) as modal9:
gr.Markdown("# Padded Modal Example")
with gr.Column():
gr.Markdown(
"""
This modal demonstrates custom padding settings.
- The content is centered with configurable padding
- Padding can be adjusted dynamically
- Supports different padding values for each side
"""
)
upload_img = gr.Image(label="Upload Image", type="pil")
display_btn = gr.Button("Display Image")
output_img = gr.Image(label="Displayed Image")
display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)
with modal_component(
visible=False, width=500, height=200, opacity_level=0, bg_blur=0,
animate="Left",
animation_duration=0.5,
) as modal10:
gr.Markdown(
"""# Opacity level Modal Example
- Modal 10 Example
- Opacity level set to 0
- Background blur set to 0
"""
)
show_btn.click(lambda: modal_component(visible=True), None, modal)
show_btn2.click(lambda: modal_component(visible=True), None, modal2)
show_btn3.click(lambda: modal_component(visible=True), None, modal3)
show_btn4.click(lambda: modal_component(visible=True), None, modal4)
show_btn4_custom.click(lambda: modal_component(visible=True), None, modal4_custom)
show_btn5.click(lambda: modal_component(visible=True), None, modal5)
show_btn51.click(lambda: modal_component(visible=True), None, modal51)
show_btn6.click(
lambda blur, opacity: modal_component(
visible=True, bg_blur=blur, opacity_level=opacity
),
inputs=[blur_level, opacity_level],
outputs=modal6,
)
show_btn7.click(
fn=show_modal_with_dimensions,
inputs=[width_input, height_input],
outputs=modal7,
)
show_btn8.click(
fn=show_modal_with_dimensions_and_percentage,
inputs=[width_input8, height_input8, width_percent8, height_percent8],
outputs=modal8,
)
show_btn9.click(lambda: modal_component(visible=True), None, modal9)
show_btn10.click(lambda: modal_component(visible=True), None, modal10)
if __name__ == "__main__":
demo.launch()
```
## `modal_component`
### Initialization
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left" style="width: 25%;">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>False</code></td>
<td align="left">If False, modal will be hidden.</td>
</tr>
<tr>
<td align="left"><code>elem_id</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>elem_classes</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>display_close_icon</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">None</td>
</tr>
<tr>
<td align="left"><code>render</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
</tr>
<tr>
<td align="left"><code>close_on_esc</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If True, allows closing the modal with the escape key. Defaults to True.</td>
</tr>
<tr>
<td align="left"><code>close_outer_click</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If True, allows closing the modal by clicking outside. Defaults to True.</td>
</tr>
<tr>
<td align="left"><code>close_message</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">The message to show when the user tries to close the modal. Defaults to None.</td>
</tr>
<tr>
<td align="left"><code>close_message_style</code></td>
<td align="left" style="width: 25%;">
```python
Dict | CloseMessageStyle | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">None</td>
</tr>
<tr>
<td align="left"><code>bg_blur</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>4</code></td>
<td align="left">The percentage of background blur. Should be a float between 0 and 1. Defaults to None.</td>
</tr>
<tr>
<td align="left"><code>width</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">str = "auto"</td>
</tr>
<tr>
<td align="left"><code>height</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">str = "auto"</td>
</tr>
<tr>
<td align="left"><code>content_width_percent</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">Modify the width of the modal content as a percentage of the screen width.</td>
</tr>
<tr>
<td align="left"><code>content_height_percent</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">Modify the height of the modal content as a percentage of the screen height.</td>
</tr>
<tr>
<td align="left"><code>content_padding</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">Modify the padding of the modal content.</td>
</tr>
<tr>
<td align="left"><code>opacity_level</code></td>
<td align="left" style="width: 25%;">
```python
float
```
</td>
<td align="left"><code>0.4</code></td>
<td align="left">The level of background blur. Should be an integer between 0 and 1. Defaults to 0.4.</td>
</tr>
<tr>
<td align="left"><code>animate</code></td>
<td align="left" style="width: 25%;">
```python
"Zoom In"
| "Top"
| "Bottom"
| "Left"
| "Right"
| "Fade In"
| None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">The animation to use when the modal open. Defaults to None.</td>
</tr>
<tr>
<td align="left"><code>animation_duration</code></td>
<td align="left" style="width: 25%;">
```python
float
```
</td>
<td align="left"><code>0.4</code></td>
<td align="left">The duration of the animation in seconds. Defaults to 0.4.</td>
</tr>
</tbody></table>
### Events
| name | description |
|:-----|:------------|
| `blur` | This listener is triggered when the modal_component is unfocused/blurred. |
## `CloseMessageStyle`
```python
@dataclass
class CloseMessageStyle:
message_color: str = "var(--neutral-700)"
confirm_text: str = "Yes"
cancel_text: str = "No"
confirm_bg_color: str = "var(--primary-500)"
cancel_bg_color: str = "var(--neutral-500)"
confirm_text_color: str = "white"
cancel_text_color: str = "white"
modal_bg_color: str = "var(--background-fill-primary)"
confirm_border_color: str | None = None
cancel_border_color: str | None = None
height: str = "auto"
width: str = "auto"
size: str = "lg"
```
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-modal-component",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "gradio-custom-component, gradio-template-Fallback",
"author": null,
"author_email": "ThenHung <hung.le@mettadepth.com>",
"download_url": "https://files.pythonhosted.org/packages/37/38/2ead0fa6ff8a9cbad60025352a81ce692b44eea994e9e1264caa5be24f95/gradio_modal_component-0.0.8.tar.gz",
"platform": null,
"description": "---\ntags: [gradio-custom-component, ]\ntitle: gradio_modal_component\nshort_description: A gradio custom component\ncolorFrom: blue\ncolorTo: yellow\nsdk: gradio\npinned: false\napp_file: space.py\n---\n\n# `gradio_modal_component`\n<a href=\"https://pypi.org/project/gradio_modal_component/\" target=\"_blank\"><img alt=\"PyPI - Version\" src=\"https://img.shields.io/pypi/v/gradio_modal_component\"></a> \n\nPython library for easily interacting with trained machine learning models\n\n## Installation\n\n```bash\npip install gradio_modal_component\n```\n\n## Usage\n\n```python\nimport gradio as gr\nfrom gradio_modal_component import modal_component\n\n\ndef display_image(img):\n return img\n\n\ndef get_blur_value(selected_blur):\n return selected_blur\n\n\ndef show_modal_with_dimensions(width, height):\n # Convert inputs to integers with default values if empty or invalid\n try:\n width = int(width) if width else None\n height = int(height) if height else None\n except ValueError:\n width = None\n height = None\n\n return modal_component(visible=True, width=width, height=height)\n\n\ndef show_modal_with_dimensions_and_percentage(\n width_input8, height_input8, width_percent8, height_percent8\n):\n # Convert inputs to integers with default values if empty or invalid\n try:\n width = int(width_input8) if width_input8 else None\n height = int(height_input8) if height_input8 else None\n width_percent = int(width_percent8) if width_percent8 else None\n height_percent = int(height_percent8) if height_percent8 else None\n except ValueError:\n width = None\n height = None\n\n return modal_component(\n visible=True,\n width=width,\n height=height,\n content_width_percent=width_percent,\n content_height_percent=height_percent,\n )\n\n\nwith gr.Blocks() as demo:\n gr.Markdown(\"# Image Modal Demonstration\")\n\n with gr.Tab(\"Tab 1\"):\n # MODAL 1\n gr.Markdown(\n \"\"\"\n - Fixed close icon (X) is overlapped by the image. or big components.\n\n \"\"\"\n )\n show_btn = gr.Button(\"Show Modal\")\n\n # MODAL 2\n gr.Markdown(\n \"\"\"\n - Enable the `display_close_icon` parameter to allow the user to close the modal by clicking outside, clicking the X, or pressing the escape key. In this case `display_close_icon = False` (Modal 1 is true), If not set defaults to `True`.\n - Enale the `esc_close` parameter to allow the user to close the modal by pressing the escape key.\n \"\"\"\n )\n show_btn2 = gr.Button(\"Show Modal 2\")\n\n # MODAL 3\n gr.Markdown(\n \"\"\"\n - Enale the `close_outer_click` parameter to allow the user to close the modal by click on the blur. Defaults to `True`, in this case `close_outer_click = False`.\n \"\"\"\n )\n show_btn3 = gr.Button(\"Show Modal 3\")\n\n # MODAL 4\n gr.Markdown(\n \"\"\"\n - Enable the `close_message` parameter to show a message when the user tries to close the modal.\n - The close message dialog can be customized using `close_message_style` to modify button text, colors, and background.\n \"\"\"\n )\n with gr.Row():\n show_btn4 = gr.Button(\"Show Modal 4 (Default Style)\")\n show_btn4_custom = gr.Button(\"Show Modal 4 (Custom Style)\")\n\n # MODAL 5\n gr.Markdown(\n \"\"\"\n - Handle Z-index.\n \"\"\"\n )\n\n show_btn5 = gr.Button(\"Show Modal 5\")\n\n # MODAL 6\n gr.Markdown(\n \"\"\"\n - Add `bg_blur` option to dynamically change the background blur of the modal.\n \"\"\"\n )\n with gr.Row():\n # Dropdown for selecting blur level\n blur_level = gr.Dropdown(\n [0, 4, 8, 12, 16],\n label=\"Blur Level\",\n value=4, # Default value\n interactive=True,\n )\n opacity_level = gr.Dropdown(\n [0, 0.1, 0.2, 0.3, 0.4, 0.5],\n label=\"Opacity Level\",\n value=0.4, # Default value\n interactive=True,\n )\n\n show_btn6 = gr.Button(\"Show Modal 6\")\n\n # MODAL 7\n gr.Markdown(\n \"\"\"\n - Add `width` and `height` option to dynamically change the size of the modal (Mesure in pixels.)\n \"\"\"\n )\n\n with gr.Row():\n width_input = gr.Textbox(\n label=\"Width\", placeholder=\"Enter width\", value=\"1000\"\n )\n height_input = gr.Textbox(\n label=\"Height\", placeholder=\"Enter height\", value=\"500\"\n )\n\n show_btn7 = gr.Button(\"Show Modal 7\")\n\n # MODAL 8\n gr.Markdown(\n \"\"\"\n - Add `content_width_percent` and `content_height_percent` option to dynamically change the size of the modal.\n - **Please note that if the content height is higher than the modal height, the modal will scroll. That why you can see the ratio correctly.**\n \"\"\"\n )\n with gr.Row():\n width_input8 = gr.Textbox(\n label=\"Width (px)\", placeholder=\"Enter width\", value=\"1000\"\n )\n height_input8 = gr.Textbox(\n label=\"Height (px)\", placeholder=\"Enter height\", value=\"500\"\n )\n width_percent8 = gr.Textbox(\n label=\"Width percent (%)\", placeholder=\"Enter width\", value=\"50\"\n )\n height_percent8 = gr.Textbox(\n label=\"Height percent (%)\", placeholder=\"Enter height\", value=\"80\"\n )\n\n show_btn8 = gr.Button(\"Show Modal 8\")\n\n # MODAL 9\n gr.Markdown(\n \"\"\"\n - Add `content_padding` configuration to control the spacing around modal content\n - Padding can be specified using CSS-style values (e.g., \"100px 50px\" for vertical/horizontal padding)\n - Please modify `content_padding` in the code to see the changes. current value is `100px`\n \"\"\"\n )\n\n with gr.Row():\n width_input9 = gr.Textbox(\n label=\"Width\", placeholder=\"Enter width\", value=\"1000\"\n )\n height_input9 = gr.Textbox(\n label=\"Height\", placeholder=\"Enter height\", value=\"500\"\n )\n\n show_btn9 = gr.Button(\"Show Modal 9\")\n\n # MODAL 10\n gr.Markdown(\n \"\"\"\n - Add `content_padding` configuration to control the spacing around modal content\n - Padding can be specified using CSS-style values (e.g., \"100px 50px\" for vertical/horizontal padding)\n - Please modify `content_padding` in the code to see the changes. current value is `100px`\n - Add `animate` default = `None`; `animate_duration` default = `0.4` option to show the modal with animation\n \"\"\"\n )\n\n show_btn10 = gr.Button(\"Show Modal 10\")\n\n # MODAL lIST\n\n with modal_component(visible=False, display_close_icon=True) as modal:\n gr.Image(\n \"https://images.unsplash.com/photo-1612178537253-bccd437b730e\",\n label=\"Random Image\",\n )\n\n with modal_component(\n visible=False, display_close_icon=False, close_on_esc=True\n ) as modal2:\n with gr.Column():\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n with modal_component(visible=False, close_outer_click=False) as modal3:\n with gr.Column():\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n # Original Modal 4 with default styling\n with modal_component(\n visible=False,\n close_outer_click=True,\n close_message=\"Are you sure you want to close?\",\n ) as modal4:\n with gr.Column():\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n # New Modal 4 with custom styling\n with modal_component(\n visible=False,\n close_outer_click=True,\n close_message=\"Do you want to discard your changes?\",\n close_message_style={\n \"message_color\": \"#000000\", # Black text\n \"confirm_text\": \"Discard\",\n \"cancel_text\": \"Keep Editing\",\n \"confirm_bg_color\": \"#DC2626\", # Red color\n \"cancel_bg_color\": \"#059669\", # Green color\n \"confirm_text_color\": \"#FFFFFF\", # White text\n \"cancel_text_color\": \"#FFFFFF\", # White text\n \"modal_bg_color\": \"#F3F4F6\", # Light gray background\n \"confirm_border_color\": None,\n \"cancel_border_color\": None,\n # \"height\": \"100px\",\n # \"width\": \"200px\",\n \"size\": \"lg\", # \"lg | sm\"\n },\n ) as modal4_custom:\n with gr.Column():\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n with modal_component(visible=False, close_outer_click=True) as modal5:\n with modal_component(\n visible=False,\n close_outer_click=True,\n close_message=\"Are you sure want to close ?\",\n ) as modal51:\n with gr.Column():\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n gr.Markdown(\n \"\"\"\n # Handling Z-index for Modal\n \"\"\"\n )\n\n show_btn51 = gr.Button(\"Show Sub Modal 5\")\n\n with modal_component(visible=False) as modal6:\n gr.Markdown(\n f\"\"\"\n # View Background Blur and Opacity Level\n \"\"\"\n )\n\n with modal_component(visible=False) as modal7:\n gr.Markdown(\"# Custom Sized Modal\")\n with gr.Column():\n gr.Markdown(\"This modal demonstrates custom width and height settings.\")\n gr.Image(\n \"https://images.unsplash.com/photo-1612178537253-bccd437b730e\",\n label=\"Sample Image with Custom Dimensions\",\n )\n\n with modal_component(\n visible=False,\n content_width_percent=50,\n content_height_percent=10,\n width=1000,\n height=500,\n ) as modal8:\n gr.Markdown(\"# Custom Sized Modal\")\n with gr.Column():\n gr.Markdown(\"This modal demonstrates custom width and height settings.\")\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n # Modal 9 with custom padding\n # Padding can be specified using CSS padding format: e.g. '100px' or '100px 50px' or '100px 50px 100px 50px'\n # Padding values refer to \"Top Right Bottom Left\"\n with modal_component(\n visible=False, width=1000, height=500, content_padding=\"100px\"\n ) as modal9:\n gr.Markdown(\"# Padded Modal Example\")\n with gr.Column():\n gr.Markdown(\n \"\"\"\n This modal demonstrates custom padding settings.\n - The content is centered with configurable padding\n - Padding can be adjusted dynamically\n - Supports different padding values for each side\n \"\"\"\n )\n upload_img = gr.Image(label=\"Upload Image\", type=\"pil\")\n display_btn = gr.Button(\"Display Image\")\n output_img = gr.Image(label=\"Displayed Image\")\n display_btn.click(fn=display_image, inputs=upload_img, outputs=output_img)\n\n with modal_component(\n visible=False, width=500, height=200, opacity_level=0, bg_blur=0,\n animate=\"Left\",\n animation_duration=0.5,\n ) as modal10:\n gr.Markdown(\n \"\"\"# Opacity level Modal Example\n\n - Modal 10 Example\n - Opacity level set to 0\n - Background blur set to 0\n \"\"\"\n )\n\n show_btn.click(lambda: modal_component(visible=True), None, modal)\n show_btn2.click(lambda: modal_component(visible=True), None, modal2)\n show_btn3.click(lambda: modal_component(visible=True), None, modal3)\n\n show_btn4.click(lambda: modal_component(visible=True), None, modal4)\n show_btn4_custom.click(lambda: modal_component(visible=True), None, modal4_custom)\n\n show_btn5.click(lambda: modal_component(visible=True), None, modal5)\n show_btn51.click(lambda: modal_component(visible=True), None, modal51)\n\n show_btn6.click(\n lambda blur, opacity: modal_component(\n visible=True, bg_blur=blur, opacity_level=opacity\n ),\n inputs=[blur_level, opacity_level],\n outputs=modal6,\n )\n\n show_btn7.click(\n fn=show_modal_with_dimensions,\n inputs=[width_input, height_input],\n outputs=modal7,\n )\n\n show_btn8.click(\n fn=show_modal_with_dimensions_and_percentage,\n inputs=[width_input8, height_input8, width_percent8, height_percent8],\n outputs=modal8,\n )\n\n show_btn9.click(lambda: modal_component(visible=True), None, modal9)\n show_btn10.click(lambda: modal_component(visible=True), None, modal10)\n\n\nif __name__ == \"__main__\":\n demo.launch()\n\n```\n\n## `modal_component`\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>False</code></td>\n<td align=\"left\">If False, modal will be hidden.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>display_close_icon</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">None</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>close_on_esc</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If True, allows closing the modal with the escape key. Defaults to True.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>close_outer_click</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If True, allows closing the modal by clicking outside. Defaults to True.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>close_message</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">The message to show when the user tries to close the modal. Defaults to None.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>close_message_style</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nDict | CloseMessageStyle | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">None</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>bg_blur</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>4</code></td>\n<td align=\"left\">The percentage of background blur. Should be a float between 0 and 1. Defaults to None.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>width</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">str = \"auto\"</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>height</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">str = \"auto\"</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>content_width_percent</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">Modify the width of the modal content as a percentage of the screen width.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>content_height_percent</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">Modify the height of the modal content as a percentage of the screen height.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>content_padding</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">Modify the padding of the modal content.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>opacity_level</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nfloat\n```\n\n</td>\n<td align=\"left\"><code>0.4</code></td>\n<td align=\"left\">The level of background blur. Should be an integer between 0 and 1. Defaults to 0.4.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>animate</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\n\"Zoom In\"\n | \"Top\"\n | \"Bottom\"\n | \"Left\"\n | \"Right\"\n | \"Fade In\"\n | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">The animation to use when the modal open. Defaults to None.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>animation_duration</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nfloat\n```\n\n</td>\n<td align=\"left\"><code>0.4</code></td>\n<td align=\"left\">The duration of the animation in seconds. Defaults to 0.4.</td>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `blur` | This listener is triggered when the modal_component is unfocused/blurred. |\n\n\n\n\n## `CloseMessageStyle`\n```python\n@dataclass\nclass CloseMessageStyle:\n message_color: str = \"var(--neutral-700)\"\n confirm_text: str = \"Yes\"\n cancel_text: str = \"No\"\n confirm_bg_color: str = \"var(--primary-500)\"\n cancel_bg_color: str = \"var(--neutral-500)\"\n confirm_text_color: str = \"white\"\n cancel_text_color: str = \"white\"\n modal_bg_color: str = \"var(--background-fill-primary)\"\n confirm_border_color: str | None = None\n cancel_border_color: str | None = None\n height: str = \"auto\"\n width: str = \"auto\"\n size: str = \"lg\"\n```\n",
"bugtrack_url": null,
"license": null,
"summary": "Python library for easily interacting with trained machine learning models",
"version": "0.0.8",
"project_urls": null,
"split_keywords": [
"gradio-custom-component",
" gradio-template-fallback"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "5964205b78750ec240118865d321aa5553d867ee1d91e0d4b6ea4ab990497b43",
"md5": "abdf5d13ca46da9ecfab8758c79b2a26",
"sha256": "58161da80cf51bc91469ca5ccfd250f158b64e6f3a60232a963291d8c53f9fb0"
},
"downloads": -1,
"filename": "gradio_modal_component-0.0.8-py3-none-any.whl",
"has_sig": false,
"md5_digest": "abdf5d13ca46da9ecfab8758c79b2a26",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 23645,
"upload_time": "2024-10-23T08:56:44",
"upload_time_iso_8601": "2024-10-23T08:56:44.652383Z",
"url": "https://files.pythonhosted.org/packages/59/64/205b78750ec240118865d321aa5553d867ee1d91e0d4b6ea4ab990497b43/gradio_modal_component-0.0.8-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "37382ead0fa6ff8a9cbad60025352a81ce692b44eea994e9e1264caa5be24f95",
"md5": "6a5c7c3a3a2fa1b7262cb78776665e5a",
"sha256": "3686df9c815f64557acaaee4562c9792b2e630e23312e89da309835d6deb53e9"
},
"downloads": -1,
"filename": "gradio_modal_component-0.0.8.tar.gz",
"has_sig": false,
"md5_digest": "6a5c7c3a3a2fa1b7262cb78776665e5a",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 75585,
"upload_time": "2024-10-23T08:56:46",
"upload_time_iso_8601": "2024-10-23T08:56:46.752023Z",
"url": "https://files.pythonhosted.org/packages/37/38/2ead0fa6ff8a9cbad60025352a81ce692b44eea994e9e1264caa5be24f95/gradio_modal_component-0.0.8.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-23 08:56:46",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "gradio-modal-component"
}
JSON