| import gradio as gr | |
| with gr.Blocks(css=".column-form .wrap {flex-direction: column;}") as demo: | |
| with gr.Row(): | |
| with gr.Column(visible=True, min_width=200, scale=0) as sidebar: | |
| options = gr.Radio(["Llama", "Mistral", "Gemma"], label="Model", elem_classes="column-form") | |
| options2 = gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"], label="Option Set 1", elem_classes="column-form") | |
| with gr.Column() as main: | |
| open_sidebar_btn = gr.Button("Open Sidebar", scale=0) | |
| close_sidebar_btn = gr.Button("Close Sidebar", visible=False, scale=0) | |
| open_sidebar_btn.click(lambda: { | |
| open_sidebar_btn: gr.Button(visible=False), | |
| close_sidebar_btn: gr.Button(visible=True), | |
| sidebar: gr.Column(visible=True) | |
| }, outputs={open_sidebar_btn, close_sidebar_btn, sidebar}) | |
| close_sidebar_btn.click(lambda: { | |
| open_sidebar_btn: gr.Button(visible=True), | |
| close_sidebar_btn: gr.Button(visible=False), | |
| sidebar: gr.Column(visible=False) | |
| }, outputs={open_sidebar_btn, close_sidebar_btn, sidebar}) | |
| gr.Markdown("# Hello Blocks") | |
| gr.Markdown("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nulla nec nulla fermentum fermentum. Nullam nec nulla nec nulla fermentum fermentum.") | |
| if __name__ == "__main__": | |
| demo.launch() |