deepkyu/compact-theme-purple

1import time2 3import gradio as gr4from gradio.themes.utils.theme_dropdown import create_theme_dropdown5 6from utils import get_snippet_from_file7 8dropdown, js = create_theme_dropdown()9 10theme_from_json = gr.themes.Base.load("themes/theme_schema@0.0.2.json")11 12with gr.Blocks(13    theme=theme_from_json,14    css=get_snippet_from_file("main.css")15) as demo:16    with gr.Row(equal_height=True):17        with gr.Column(scale=10):18            gr.Markdown(19                """20                # Theme preview: `compact-theme`21                To use this theme, set `theme='deepkyu/compact-theme'` in `gr.Blocks()` or `gr.Interface()`.22                You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version23                of this theme.24                """25            )26        with gr.Column(scale=3):27            with gr.Group():28                dropdown.render()29                toggle_dark = gr.Button(value="Toggle Dark")30 31    dropdown.change(None, dropdown, None, js=js)32    toggle_dark.click(33        None,34        js="""35        () => {36            document.body.classList.toggle('dark');37        }38        """,39    )40 41    name = gr.Textbox(42        label="Name",43        info="Full name, including middle name. No special characters.",44        placeholder="John Doe",45        value="John Doe",46        interactive=True,47    )48 49    with gr.Row():50        slider1 = gr.Slider(label="Slider 1")51        slider2 = gr.Slider(label="Slider 2")52    gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")53 54    with gr.Row():55        with gr.Column(variant="panel", scale=1):56            gr.Markdown("## Panel 1")57            radio = gr.Radio(58                ["A", "B", "C"],59                label="Radio",60                info="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",61            )62            drop = gr.Dropdown(["Option 1", "Option 2", "Option 3"], show_label=False)63            drop_2 = gr.Dropdown(64                ["Option A", "Option B", "Option C"],65                multiselect=True,66                value=["Option A"],67                label="Dropdown",68                interactive=True,69            )70            check = gr.Checkbox(label="Go")71        with gr.Column(variant="panel", scale=2):72            img = gr.Image(73                "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg",74                label="Image",75                height=320,76            )77            with gr.Row():78                go_btn = gr.Button("Go", variant="primary")79                clear_btn = gr.Button("Clear", variant="secondary")80 81                def go(*args):82                    time.sleep(3)83                    return "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpgjpg"84 85                go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")86 87                def clear():88                    time.sleep(0.2)89                    return None90 91                clear_btn.click(clear, None, img)92 93            with gr.Row():94                btn1 = gr.Button("Button 1", size="sm")95                btn2 = gr.UploadButton(size="sm")96                stop_btn = gr.Button("Stop", size="sm", variant="stop")97 98    with gr.Row():99        gr.Dataframe(value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label="Dataframe")100        gr.JSON(101            value={"a": 1, "b": 2, "c": {"test": "a", "test2": [1, 2, 3]}}, label="JSON"102        )103        gr.Label(value={"cat": 0.7, "dog": 0.2, "fish": 0.1})104        gr.File()105    with gr.Row():106        gr.ColorPicker()107        gr.Video("https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4")108        gr.Gallery(109            [110                (111                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg",112                    "lion",113                ),114                (115                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/logo.png",116                    "logo",117                ),118                (119                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg",120                    "tower",121                ),122            ],123            height=200,124        )125 126    with gr.Row():127        with gr.Column(scale=2):128            chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")129            chat_btn = gr.Button("Add messages")130 131            def chat(history):132                time.sleep(2)133                yield [["How are you?", "I am good."]]134 135            chat_btn.click(136                lambda history: history137                + [["How are you?", "I am good."]]138                + (time.sleep(2) or []),139                chatbot,140                chatbot,141            )142        with gr.Column(scale=1):143            with gr.Accordion("Advanced Settings"):144                gr.Markdown("Hello")145                gr.Number(label="Chatbot control 1")146                gr.Number(label="Chatbot control 2")147                gr.Number(label="Chatbot control 3")148 149 150if __name__ == "__main__":151    demo.queue().launch()152 153 154 155