Updated gr.Chatbot code

app.py

@@ -1,6 +1,12 @@
 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()
@@ -10,8 +16,8 @@ with gr.Blocks() as demo:
         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()`.
+                # 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.
                 """
@@ -26,23 +32,50 @@ with gr.Blocks() as demo:
         None,
         js="""
         () => {
-            document.body.classList.toggle('dark');
+            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. No special characters.",
+        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")
-        slider2 = gr.Slider(label="Slider 2")
-    gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")
+        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):
@@ -50,15 +83,17 @@ with gr.Blocks() as demo:
             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)
+            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):
@@ -88,52 +123,144 @@ with gr.Blocks() as demo:
                 stop_btn = gr.Button("Stop", size="sm", 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"
+            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()
+        gr.File(label="Upload 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",
-                ),
-            ],
-            height=200,
+        # 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):
-            chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
+            # 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(
-                lambda history: (
-                    history + [["How are you?", "I am good."]] + (time.sleep(2) or [])
-                ),
-                chatbot,
-                chatbot,
+                add_message,
+                inputs=chatbot,
+                outputs=chatbot
             )
+
         with gr.Column(scale=1):
             with gr.Accordion("Advanced Settings"):
-                gr.Markdown("Hello")
+                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='tejasashinde/aurora')
+    demo.queue().launch(theme=aurora, css=aurora_css)