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("

This is HTML Heading 1

") 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)