app.py

import time
import gradio as gr
from theme_dropdown import create_theme_dropdown  # noqa: F401

dropdown, js = create_theme_dropdown()

with gr.Blocks(theme='syddharth/base-inter') as demo:
    with gr.Row():
        with gr.Column(scale=10):
            gr.Markdown(
                """
                # Theme preview: `base-inter`
                To use this theme, set `theme='syddharth/base-inter'` in `gr.Blocks()` or `gr.Interface()`.
                You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version
                of this theme.
                """
            )
        with gr.Column(scale=3):
            with gr.Column():
                dropdown.render()
                toggle_dark = gr.Button(value="Toggle Dark")

    dropdown.change(None, dropdown, None, _js=js)
    toggle_dark.click(
        None,
        _js="""
        () => {
            document.body.classList.toggle('dark');
            document.querySelector('gradio-app').style.backgroundColor = 'var(--color-background-primary)'
        }
        """,
    )

    name = gr.Textbox(
        label="Name",
        info="Full name, including middle name. No special characters.",
        placeholder="John Doe",
        value="John Doe",
        interactive=True,
    )

    with gr.Row():
        slider1 = gr.Slider(label="Slider 1")
        slider2 = gr.Slider(label="Slider 2")

    gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")

    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("## Panel 1")
            radio = gr.Radio(
                ["A", "B", "C"],
                label="Radio",
                info="Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            )
            drop = gr.Dropdown(["Option 1", "Option 2", "Option 3"], label="Dropdown")
            drop_2 = gr.Dropdown(
                ["Option A", "Option B", "Option C"],
                multiselect=True,
                value=["Option A"],
                label="Dropdown",
                interactive=True,
            )
            check = gr.Checkbox(label="Go")

        with gr.Column(scale=2):
            img = gr.Image(
                value="https://gradio.app/assets/img/header-image.jpg",
                label="Image",
            )
            with gr.Row():
                go_btn = gr.Button("Primary Button", variant="primary")
                clear_btn = gr.Button("Secondary Button", variant="secondary")

            def go(*args):
                time.sleep(3)
                return "https://gradio.app/assets/img/header-image.jpg"

            go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")

            def clear():
                time.sleep(0.2)
                return None

            clear_btn.click(clear, None, img)

            with gr.Row():
                btn1 = gr.Button("Button 1")
                btn2 = gr.UploadButton()
                stop_btn = gr.Button("Stop Button", variant="stop")

    with gr.Row():
        gr.Dataframe(value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label="Dataframe")
        gr.JSON(
            value={"a": 1, "b": 2, "c": {"test": "a", "test2": [1, 2, 3]}}, label="JSON"
        )
        gr.Label(value={"cat": 0.7, "dog": 0.2, "fish": 0.1})
        gr.File()

    with gr.Row():
        gr.ColorPicker()
        gr.Video("https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4")
        gr.Gallery(
            [
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg", "lion"),
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/logo.png", "logo"),
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg", "tower"),
            ],
            label="Gallery",
        )

    with gr.Row():
        with gr.Column(scale=2):
            chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
            chat_btn = gr.Button("Add messages")

            def chat_callback(history):
                return history + [["How are you?", "I am good."]]

            chat_btn.click(chat_callback, chatbot, chatbot)

        with gr.Column(scale=1):
            with gr.Accordion("Advanced Settings"):
                gr.Markdown("Hello")
                gr.Number(label="Chatbot control 1")
                gr.Number(label="Chatbot control 2")
                gr.Number(label="Chatbot control 3")


if __name__ == "__main__":
    demo.queue().launch()