app.py

import time
import gradio as gr
from aurora import Aurora
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import random
from aurora_css import aurora_css

from gradio.themes.utils.theme_dropdown import create_theme_dropdown

dropdown, js = create_theme_dropdown()

with gr.Blocks() as demo:
    with gr.Row(equal_height=True):
        with gr.Column(scale=10):
            gr.Markdown(
                """
                # Theme preview: `Aurora`
                To use this theme, set `theme='tejasashinde/Aurora'` in the `launch()` method of `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.Group():
                dropdown.render()
                toggle_dark = gr.Button(value="Toggle Dark")

    dropdown.change(None, dropdown, None, js=js)
    toggle_dark.click(
        None,
        js="""
        () => {
            const app = document.querySelector(".gradio-app");
            if (app.dataset.theme === "dark") {
                app.dataset.theme = "light";
            } else {
                app.dataset.theme = "dark";
            }
        }
        """,
    )

    name = gr.Textbox(
        label="Name",
        info="Full name, including middle name.",
        placeholder="John Doe",
        value="John Doe",
        interactive=True,
        elem_classes="aurora-hover-gradient"
    )
    # JavaScript to toggle dark mode on button click
    toggle_dark.click(
        None,
        js="""
        () => {
            // Toggle the dark class on the body element
            document.body.classList.toggle('dark');
            
            // Dynamically check if dark mode is active and update the theme accordingly
            const isDark = document.body.classList.contains('dark');
            if (isDark) {
                // Apply dark theme styles
                gradio.theme = 'dark';
            } else {
                // Apply light theme styles
                gradio.theme = 'light';
            }
        }
        """
    )

    with gr.Row():
        slider1 = gr.Slider(label="Slider 1", elem_classes="aurora-hover-gradient")
        gr.ColorPicker(elem_classes="aurora-hover-gradient")
        gr.DateTime(elem_classes="aurora-hover-gradient")
        gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group", elem_classes="aurora-hover-gradient")

    with gr.Row():
        with gr.Column(variant="panel", scale=1):
            gr.Markdown("## Panel 1")
            radio = gr.Radio(
                ["A", "B", "C"],
                label="Radio",
                elem_classes="aurora-hover-gradient",
                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.",
            )
            drop = gr.Dropdown(["Option 1", "Option 2", "Option 3"], show_label=False, elem_classes="aurora-hover-gradient")
            drop_2 = gr.Dropdown(
                ["Option A", "Option B", "Option C"],
                multiselect=True,
                value=["Option A"],
                label="Dropdown",
                interactive=True,
                elem_classes="aurora-hover-gradient"
            )
            check = gr.Checkbox(label="Go")
        with gr.Column(variant="panel", scale=2):
            img = gr.Image(
                "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg",
                label="Image",
                height=320,
            )
            with gr.Row():
                go_btn = gr.Button("Go", variant="primary")
                clear_btn = gr.Button("Clear", variant="secondary")

                def go(*_args):
                    time.sleep(3)
                    return "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"

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

                def clear():
                    time.sleep(0.2)

                clear_btn.click(clear, None, img)

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

    with gr.Row():
        gr.JSON(
            value={"a": 1, "b": 2, "c": {"test": "a", "test2": [1, 2]}}, label="JSON"
        )
        gr.Label(value={"cat": 0.7, "dog": 0.2, "fish": 0.1})
        gr.File(label="Upload File")

    with gr.Row():
        # Initial data for the DataFrame
        initial_data = [
            ["Alice", 25, "F", "python"],
            ["Bob", 30, "M", "cpp"],
            ["Charlie", 22, "O", "cpp"],
            ["Diana", 28, "F", "python"],
            ["Evan", 35, "M", "python"],
            ["Frank", 40, "M", "java"],
            ["Grace", 27, "F", "python"],
            ["Hank", 32, "O", "cpp"],
            ["Ivy", 24, "F", "java"],
            ["Jack", 29, "M", "python"]
        ]
        # DataFrame input
        df_input = gr.Dataframe(
            value=initial_data,
            headers=["name", "age", "gender", "language"],
            datatype=["str", "number", "str", "str"],
            row_count=10,
            column_count=4,
            label="Dataframe"
        )

        with gr.Tab("Video"):
            gr.Video("https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4")
        with gr.Tab("Gallery"):
            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",
                    ),
                ]
            )
        with gr.Tab("Image Slider"):
            gr.ImageSlider(
            (
                "https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg",
                "https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg"
            ),
            label="Image Slider"
        )

    with gr.Row():
        with gr.Column(scale=2):
            # Initialize Chatbot with conversation history as dictionaries
            chatbot = gr.Chatbot(
                value=[
                    {"role": "user", "content": "Hello!"},
                    {"role": "assistant", "content": "Hi there! How can I help?"}
                ],
                label="Chatbot"
            )
            chat_btn = gr.Button("Add messages")

            # Function to add messages to chat history
            def add_message(history):
                time.sleep(1)
                # Append new messages
                history = history + [
                    {"role": "user", "content": "How are you?"},
                    {"role": "assistant", "content": "I am good."}
                ]
                return history

            # Connect button to update chatbot
            chat_btn.click(
                add_message,
                inputs=chatbot,
                outputs=chatbot
            )

        with gr.Column(scale=1):
            with gr.Accordion("Advanced Settings"):
                gr.Markdown("Hello Accordian!")
                gr.Number(label="Chatbot control 1")
                gr.Number(label="Chatbot control 2")
                gr.Number(label="Chatbot control 3")
    
    with gr.Row():
        gr.FileExplorer()
        gr.HTML("<h1>This is HTML Heading 1</h1>")
        gr.Code(
            value="""# hello.py\n\n# Prints a message\n\n print('Gradio is awesome!')""",
            language="python",
            label="Code"
        )
    
    
    with gr.Row():
        with gr.Column(scale=1):
            # Plot
            def make_plot(frequency=5, sample_rate=8000, sample_count=8000):
                x = np.arange(sample_count)
                y = np.sin(2 * np.pi * frequency * x / sample_rate)
                plt.figure(figsize=(6, 3))
                plt.plot(x, y)
                plt.title(f"Sine wave: {frequency} Hz")
                plt.xlabel("Sample index")
                plt.ylabel("Amplitude")
                return plt  # returning a matplotlib plot
                
            freq = gr.Slider(1, 20, value=5, label="Sine frequency (Hz)")
            plot = gr.Plot(label="SW Plot")
            freq.change(fn=make_plot, inputs=freq, outputs=plot)

        with gr.Column(scale=2):
            # Plot DataFrame
            df = pd.DataFrame({
                'height': np.random.randint(50, 70, 25),
                'weight': np.random.randint(120, 320, 25),
                'age': np.random.randint(18, 65, 25),
                'ethnicity': [random.choice(["white", "black", "asian"]) for _ in range(25)]
            })
            
            with gr.Row():
                ethnicity = gr.Dropdown(["all", "white", "black", "asian"], value="all", label="Ethnicity")
                max_age = gr.Slider(18, 65, value=50, label="Max Age")

            with gr.Row():
                def filtered_df(ethnic, age):
                    _df = df if ethnic == "all" else df[df["ethnicity"] == ethnic]
                    _df = _df[_df["age"] < age]
                    return _df

                gr.ScatterPlot(filtered_df, inputs=[ethnicity, max_age], x="weight", y="height", title="Weight x Height", label="Scatter Plot")
                gr.LinePlot(filtered_df, inputs=[ethnicity, max_age], x="age", y="height", title="Age x Height", label="Line Plot")

if __name__ == "__main__":
    demo.queue().launch(theme=Aurora(), css=aurora_css)