tessl/pypi-gradio

Python library for easily interacting with trained machine learning models

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Layout System

Name: tessl/pypi-gradio
Author: tessl

Container components for organizing UI elements into structured layouts with responsive design support, enabling flexible arrangement of components in rows, columns, tabs, and other organizational patterns.

Capabilities

Basic Layout Containers

Fundamental layout containers for organizing components in horizontal and vertical arrangements with responsive design support.

class Row:
    def __init__(
        self,
        variant="default",
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        equal_height=True,
        **kwargs
    ):
        """
        Horizontal layout container for component arrangement.

        Parameters:
        - variant: Layout variant ("default", "panel", "compact")  
        - equal_height: Whether components should have equal height
        """

    def __enter__(self):
        """Enter context manager for component definition."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

class Column:
    def __init__(
        self,
        scale=None,
        min_width=320,
        variant="default",
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Vertical layout container for component stacking.

        Parameters:
        - scale: Relative size compared to other columns
        - min_width: Minimum column width in pixels
        - variant: Layout variant ("default", "panel", "compact")
        """

    def __enter__(self):
        """Enter context manager for component definition."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

class Group:
    def __init__(
        self,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Logical component grouping without visual changes.
        Used for organizing components logically without affecting layout.
        """

    def __enter__(self):
        """Enter context manager for component definition."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

Usage examples:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        # Components arranged horizontally
        input1 = gr.Textbox(label="Input 1")
        input2 = gr.Textbox(label="Input 2")
    
    with gr.Column():
        # Components arranged vertically
        output1 = gr.Textbox(label="Output 1")
        output2 = gr.Textbox(label="Output 2")
    
    # Nested layouts
    with gr.Row():
        with gr.Column(scale=2):
            main_input = gr.Textbox(label="Main Input")
        with gr.Column(scale=1):
            submit_btn = gr.Button("Submit")

Tabbed Organization

Components for organizing content into tabbed interfaces with navigation and dynamic content loading.

class Tabs:
    def __init__(
        self,
        selected=None,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Tabbed content container for organizing sections.

        Parameters:
        - selected: Initially selected tab (index or label)
        """

    def __enter__(self):
        """Enter context manager for tab definition."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""
        
    def change(self, fn, inputs=None, outputs=None, **kwargs):
        """Event handler for tab changes."""

class Tab:
    def __init__(
        self,
        label,
        id=None,
        elem_id=None,
        elem_classes=None,
        render=True,
        interactive=True,
        visible=True,
        **kwargs
    ):
        """
        Individual tab item within Tabs container.

        Parameters:
        - label: Tab display name
        - id: Unique identifier for the tab
        - interactive: Whether tab can be selected
        """

    def __enter__(self):
        """Enter context manager for tab content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""
        
    def select(self, fn, inputs=None, outputs=None, **kwargs):
        """Event handler for tab selection."""

# Alias for Tab
TabItem = Tab

Usage example:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("Text Processing"):
            text_input = gr.Textbox(label="Input Text")
            text_output = gr.Textbox(label="Processed Text")
            text_btn = gr.Button("Process")
        
        with gr.Tab("Image Processing"):
            image_input = gr.Image(label="Input Image")
            image_output = gr.Image(label="Processed Image")
            image_btn = gr.Button("Process")
        
        with gr.Tab("Settings"):
            settings = gr.Slider(label="Processing Strength")

Advanced Layout Components

Specialized layout components for specific organizational patterns including collapsible sections, sidebars, draggable elements, and accordion-style layouts.

class Accordion:
    def __init__(
        self,
        label,
        open=True,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Collapsible content sections.

        Parameters:
        - label: Accordion section title
        - open: Whether section starts expanded
        """

    def __enter__(self):
        """Enter context manager for accordion content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

class Sidebar:
    def __init__(
        self,
        position="left",
        open=True,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Sidebar layout container for navigation.

        Parameters:
        - position: Sidebar position ("left" or "right")
        - open: Whether sidebar starts open
        """

    def __enter__(self):
        """Enter context manager for sidebar content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

class Draggable:
    def __init__(
        self,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Draggable container for rearrangeable UIs.
        Allows users to drag and reorder contained components.
        """

    def __enter__(self):
        """Enter context manager for draggable content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

Usage examples:

import gradio as gr

with gr.Blocks() as demo:
    # Accordion for collapsible sections
    with gr.Accordion("Advanced Settings", open=False):
        advanced_option1 = gr.Slider(label="Option 1")
        advanced_option2 = gr.Checkbox(label="Enable feature")
    
    # Sidebar for navigation
    with gr.Sidebar():
        gr.Markdown("## Navigation")
        nav_btn1 = gr.Button("Page 1")
        nav_btn2 = gr.Button("Page 2")
    
    # Main content area
    main_content = gr.Textbox(label="Main Content")

Layout Patterns and Best Practices

Responsive Design

Gradio layouts automatically adapt to different screen sizes, but you can control responsiveness:

with gr.Row(equal_height=True):
    # Equal height columns
    with gr.Column(scale=2, min_width=400):
        # Takes 2/3 of available width, minimum 400px
        main_content = gr.Textbox()
    
    with gr.Column(scale=1, min_width=200):
        # Takes 1/3 of available width, minimum 200px
        sidebar_content = gr.Button()

Nested Layouts

Complex layouts can be created by nesting containers:

with gr.Row():
    with gr.Column():
        # Left column with tabs
        with gr.Tabs():
            with gr.Tab("Input"):
                input_components = gr.Textbox()
            with gr.Tab("Settings"):
                settings = gr.Slider()
    
    with gr.Column():
        # Right column with accordion
        with gr.Accordion("Results"):
            output_components = gr.Textbox()

Dynamic Layout Updates

Layouts can be modified dynamically through event handlers:

def toggle_visibility(visible):
    return gr.update(visible=not visible)

toggle_btn = gr.Button("Toggle Section")
hidden_section = gr.Column(visible=False)

toggle_btn.click(
    toggle_visibility,
    inputs=hidden_section,
    outputs=hidden_section
)

Layout Component Properties

Common Properties

All layout components support these common properties:

# Visibility and rendering
visible: bool = True          # Whether component is visible
render: bool = True          # Whether to render component

# Styling and identification  
elem_id: str = None          # HTML element ID
elem_classes: list = None    # CSS classes for styling

# Layout-specific properties vary by component type

Scale and Sizing

Control relative sizing in Row/Column layouts:

with gr.Row():
    gr.Column(scale=1)    # Takes 1 unit of space
    gr.Column(scale=2)    # Takes 2 units of space (twice as wide)
    gr.Column(scale=1)    # Takes 1 unit of space

Collapsible Content

Components for creating collapsible and expandable content sections.

class Accordion:
    def __init__(
        self,
        label=None,
        open=True,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Collapsible content container with toggle functionality.

        Parameters:
        - label: Accordion header text
        - open: Whether accordion is initially open
        """

    def __enter__(self):
        """Enter context manager for content definition."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""
        
    def change(self, fn, inputs=None, outputs=None, **kwargs):
        """Event handler for open/close changes."""

class Sidebar:
    def __init__(
        self,
        position="left",
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Sidebar layout container for navigation or secondary content.

        Parameters:
        - position: Sidebar position ("left" or "right")
        """

    def __enter__(self):
        """Enter context manager for sidebar content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

Tab Organization

Extended tab system with individual tab items and enhanced functionality.

class TabItem:
    def __init__(
        self,
        label,
        id=None,
        elem_id=None,
        elem_classes=None,
        render=True,
        interactive=True,
        visible=True,
        **kwargs
    ):
        """
        Individual tab item for use within Tabs container.

        Parameters:
        - label: Tab display label
        - id: Unique identifier for tab
        - interactive: Whether tab can be selected
        """

    def __enter__(self):
        """Enter context manager for tab content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

class Draggable:
    def __init__(
        self,
        visible=True,
        elem_id=None,
        elem_classes=None,
        render=True,
        **kwargs
    ):
        """
        Draggable container for moveable UI elements.

        Allows components to be repositioned via drag and drop.
        """

    def __enter__(self):
        """Enter context manager for draggable content."""
        
    def __exit__(self, exc_type, exc_val, exc_tb):
        """Exit context manager."""

Variant Styles

Some layouts support visual variants:

gr.Row(variant="default")  # Standard appearance
gr.Row(variant="panel")    # Panel-style background
gr.Row(variant="compact")  # Reduced spacing

Integration with Components

Component Sizing in Layouts

Components automatically adapt to their layout containers:

with gr.Row():
    # Components in rows share horizontal space
    gr.Textbox(scale=2)     # Takes more space
    gr.Button(scale=1)      # Takes less space

with gr.Column():
    # Components in columns stack vertically
    gr.Textbox()           # Full width
    gr.Button()            # Full width

Event Handling Across Layouts

Events can target components across different layout containers:

with gr.Row():
    input_text = gr.Textbox()

with gr.Column():
    output_text = gr.Textbox()
    process_btn = gr.Button()

# Event crosses layout boundaries
process_btn.click(
    fn=process_function,
    inputs=input_text,      # From Row
    outputs=output_text     # From Column
)

Install with Tessl CLI