ux_components.py

import gradio as gr
from config import DEMO_LIST

def create_top_demo_cards(input_textbox):
    """Creates a Gradio Column with buttons for the top 3 demo examples."""
    with gr.Column(visible=True) as quick_examples_col:
        for i, demo_item in enumerate(DEMO_LIST[:3]):
            demo_card = gr.Button(
                value=demo_item['title'],
                variant="secondary",
                size="sm",
                elem_id=f"demo_card_{i}"  # Add an ID for potential styling
            )
            demo_card.click(
                fn=lambda idx=i: gr.update(value=DEMO_LIST[idx]['description']),
                outputs=input_textbox,
            )
    return quick_examples_col

if __name__ == "__main__":
    with gr.Blocks() as demo:
        input_textbox = gr.Textbox(label="Input")
        create_top_demo_cards(input_textbox)
    demo.launch()