Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Standardize height across components and add max_height and min_height parameters where appropriate #9313

Merged
merged 38 commits into from
Sep 12, 2024
Merged
Show file tree
Hide file tree
Changes from 34 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
97aa0f2
height
dawoodkhan82 May 2, 2023
95bbefc
changelog
dawoodkhan82 May 2, 2023
c515e1a
Merge branch 'main' into height
abidlabs May 2, 2023
a78dd96
Merge branch 'main' into height
abidlabs May 2, 2023
bd77f10
height
abidlabs Sep 10, 2024
85af9c6
changes
abidlabs Sep 10, 2024
603d74b
add changeset
gradio-pr-bot Sep 10, 2024
df56cac
add changeset
gradio-pr-bot Sep 10, 2024
9ffcc7f
add changeset
gradio-pr-bot Sep 10, 2024
dc9717b
revert clog
abidlabs Sep 11, 2024
9e9eee7
Merge branch '5.0-dev' into height
abidlabs Sep 11, 2024
9612f89
Merge branch '5.0-dev' into height
abidlabs Sep 11, 2024
3f595e5
Merge branch '5.0-dev' into height
abidlabs Sep 11, 2024
7b5d487
more changes
abidlabs Sep 11, 2024
c66a13e
add changeset
gradio-pr-bot Sep 11, 2024
906b83e
Merge branch '5.0-dev' into height
abidlabs Sep 11, 2024
c967c1b
chatbot
abidlabs Sep 11, 2024
e29e862
restore
abidlabs Sep 11, 2024
e7122dc
filexplorer
abidlabs Sep 11, 2024
ffe31de
add changeset
gradio-pr-bot Sep 11, 2024
353c5d6
json
abidlabs Sep 11, 2024
af65627
Merge branch 'height' of github.com:gradio-app/gradio into height
abidlabs Sep 11, 2024
c288628
add changeset
gradio-pr-bot Sep 11, 2024
9e27f00
markdown
abidlabs Sep 11, 2024
6c5f822
Merge branch 'height' of github.com:gradio-app/gradio into height
abidlabs Sep 11, 2024
54cec32
add changeset
gradio-pr-bot Sep 11, 2024
5c33a21
row
abidlabs Sep 11, 2024
74a7fde
add changeset
gradio-pr-bot Sep 11, 2024
47056d7
height
abidlabs Sep 11, 2024
c1ac2e3
Merge branch 'height' of github.com:gradio-app/gradio into height
abidlabs Sep 11, 2024
5b2e30a
format frontend
abidlabs Sep 11, 2024
271e019
revert
abidlabs Sep 11, 2024
3a1de87
max height
abidlabs Sep 11, 2024
feaf733
fix
abidlabs Sep 11, 2024
595dcda
Merge branch '5.0-dev' into height
abidlabs Sep 12, 2024
4202658
fix docstrings
abidlabs Sep 12, 2024
11b70fa
fix py tests
abidlabs Sep 12, 2024
9120710
add story
abidlabs Sep 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .changeset/strong-stars-count.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"@gradio/atoms": minor
"@gradio/chatbot": minor
"@gradio/dataframe": minor
"@gradio/fileexplorer": minor
"@gradio/json": minor
"@gradio/markdown": minor
"@gradio/row": minor
"gradio": minor
---

feat:Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate
4 changes: 2 additions & 2 deletions gradio/components/annotated_image.py
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ def __init__(
value: Tuple of base image and list of (annotation, label) pairs.
format: Format used to save images before it is returned to the front end, such as 'jpeg' or 'png'. This parameter only takes effect when the base image is returned from the prediction function as a numpy array or a PIL Image. The format should be supported by the PIL library.
show_legend: If True, will show a legend of the annotations.
height: The height of the image, specified in pixels if a number is passed, or in CSS units if a string is passed.
width: The width of the image, specified in pixels if a number is passed, or in CSS units if a string is passed.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
color_map: A dictionary mapping labels to colors. The colors must be specified as hex codes.
label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
Expand Down
10 changes: 8 additions & 2 deletions gradio/components/chatbot.py
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,9 @@ def __init__(
elem_classes: list[str] | str | None = None,
render: bool = True,
key: int | str | None = None,
height: int | str | None = None,
height: int | str | None = 400,
abidlabs marked this conversation as resolved.
Show resolved Hide resolved
max_height: int | str | None = None,
min_height: int | str | None = None,
latex_delimiters: list[dict[str, str | bool]] | None = None,
rtl: bool = False,
show_share_button: bool | None = None,
Expand Down Expand Up @@ -185,7 +187,9 @@ def __init__(
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
render: 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.
key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
rtl: If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right.
show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
Expand Down Expand Up @@ -214,6 +218,8 @@ def __init__(
)
self.data_model = ChatbotDataTuples
self.height = height
self.max_height = max_height
self.min_height = min_height
self.rtl = rtl
if latex_delimiters is None:
latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
Expand Down
6 changes: 3 additions & 3 deletions gradio/components/dataframe.py
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ def __init__(
show_label: bool | None = None,
every: Timer | float | None = None,
inputs: Component | Sequence[Component] | set[Component] | None = None,
height: int = 500,
max_height: int | str = 500,
scale: int | None = None,
min_width: int = 160,
interactive: bool | None = None,
Expand All @@ -108,7 +108,7 @@ def __init__(
show_label: if True, will display label.
every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
height: The maximum height of the dataframe, specified in pixels if a number is passed, or in CSS units if a string is passed. If more rows are created than can fit in the height, a scrollbar will appear.
max_height: The maximum height of the dataframe, specified in pixels if a number is passed, or in CSS units if a string is passed. If more rows are created than can fit in the height, a scrollbar will appear.
scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
interactive: if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output.
Expand Down Expand Up @@ -166,7 +166,7 @@ def __init__(
if latex_delimiters is None:
latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
self.latex_delimiters = latex_delimiters
self.height = height
self.max_height = max_height
self.line_breaks = line_breaks
self.column_widths = [
w if isinstance(w, str) else f"{w}px" for w in (column_widths or [])
Expand Down
2 changes: 1 addition & 1 deletion gradio/components/file.py
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ def __init__(
container: If True, will place the component in a container - providing some extra padding around the border.
scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
height: The maximum height of the file component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear.
height: The default height of the file component when no files have been uploaded, or the maximum height of the file component when files are present. Specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear.
interactive: if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
visible: If False, component will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
Expand Down
6 changes: 5 additions & 1 deletion gradio/components/file_explorer.py
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ def __init__(
container: bool = True,
scale: int | None = None,
min_width: int = 160,
height: int | float | str | None = None,
height: int | str | None = None,
max_height: int | str | None = 500,
min_height: int | str | None = None,
interactive: bool | None = None,
visible: bool = True,
elem_id: str | None = None,
Expand Down Expand Up @@ -91,6 +93,8 @@ def __init__(
)
self.file_count = file_count
self.height = height
self.max_height = max_height
self.min_height = min_height

super().__init__(
label=label,
Expand Down
4 changes: 2 additions & 2 deletions gradio/components/image.py
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ def __init__(
Parameters:
value: A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
format: File format (e.g. "png" or "gif") to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.
height: The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
width: The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file.
sources: List of sources for the image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "webcam", "clipboard"] if streaming is False, otherwise defaults to ["webcam"].
type: The format the image is converted before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned. To support animated GIFs in input, the `type` should be set to "filepath" or "pil".
Expand Down
4 changes: 2 additions & 2 deletions gradio/components/image_editor.py
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@ def __init__(
"""
Parameters:
value: Optional initial image(s) to populate the image editor. Should be a dictionary with keys: `background`, `layers`, and `composite`. The values corresponding to `background` and `composite` should be images or None, while `layers` should be a list of images. Images can be of type PIL.Image, np.array, or str filepath/URL. Or, the value can be a callable, in which case the function will be called whenever the app loads to set the initial value of the component.
height: The height of the component container, specified in pixels if a number is passed, or in CSS units if a string is passed.
width: The width of the component container, specified in pixels if a number is passed, or in CSS units if a string is passed.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images.
width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images.
image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning.
sources: List of sources that can be used to set the background image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "clipboard" allows users to paste an image from the clipboard.
type: The format the images are converted to before being passed into the prediction function. "numpy" converts the images to numpy arrays with shape (height, width, 3) and values from 0 to 255, "pil" converts the images to PIL image objects, "filepath" passes images as str filepaths to temporary copies of the images.
Expand Down
4 changes: 4 additions & 0 deletions gradio/components/json_component.py
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ def __init__(
open: bool = False,
show_indices: bool = False,
height: int | str | None = None,
max_height: int | str | None = 500,
min_height: int | str | None = None,
):
"""
Parameters:
Expand Down Expand Up @@ -88,6 +90,8 @@ def __init__(
self.show_indices = show_indices
self.open = open
self.height = height
self.max_height = max_height
self.min_height = min_height

def preprocess(self, payload: dict | list | None) -> dict | list | None:
"""
Expand Down
8 changes: 7 additions & 1 deletion gradio/components/markdown.py
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ def __init__(
line_breaks: bool = False,
header_links: bool = False,
height: int | str | None = None,
max_height: int | str | None = None,
min_height: int | str | None = None,
show_copy_button: bool = False,
):
"""
Expand All @@ -65,7 +67,9 @@ def __init__(
sanitize_html: If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities.
line_breaks: If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored.
header_links: If True, will automatically create anchors for headings, displaying a link icon on hover.
height: An optional maximum height of this component, specified in pixels if a number is passed, or in CSS units (e.g., '200px') if a stirng is passed in. If context exceeds this height, a scrollbar is added.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
abidlabs marked this conversation as resolved.
Show resolved Hide resolved
max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
abidlabs marked this conversation as resolved.
Show resolved Hide resolved
show_copy_button: If True, includes a copy button to copy the text in the Markdown component. Default is False.
"""
self.rtl = rtl
Expand All @@ -76,6 +80,8 @@ def __init__(
self.line_breaks = line_breaks
self.header_links = header_links
self.height = height
self.max_height = max_height
self.min_height = min_height
self.show_copy_button = show_copy_button

super().__init__(
Expand Down
4 changes: 2 additions & 2 deletions gradio/components/video.py
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ def __init__(
value: path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.
format: the file extension with which to save video, such as 'avi' or 'mp4'. This parameter applies both when this component is used as an input to determine which file format to convert user-provided video to, and when this component is used as an output to determine the format of video returned to the user. If None, no file format conversion is done and the video is kept as is. Use 'mp4' to ensure browser playability.
sources: list of sources permitted for video. "upload" creates a box where user can drop a video file, "webcam" allows user to record a video from their webcam. If None, defaults to both ["upload, "webcam"].
height: height of the displayed video, specified in pixels if a number is passed, or in CSS units if a string is passed.
width: width of the displayed video, specified in pixels if a number is passed, or in CSS units if a string is passed.
height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video.
width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video.
label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
inputs: components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
Expand Down
Loading
Loading