bad

.gitignore

@@ -0,0 +1 @@
+**.pyc

app.py

@@ -0,0 +1,17 @@
+import gradio as gr
+from grid_search_tab import create_grid_search_tab
+from theme_config import DashboardTheme
+
+def create_dashboard():
+    DashboardTheme.setup_matplotlib_style()
+    with gr.Blocks(title="Performance Dashboard", theme=DashboardTheme.get_gradio_theme()) as demo:
+        with gr.Tabs():
+
+            with gr.TabItem("Grid search benchmark"):
+                create_grid_search_tab()
+
+    return demo
+
+if __name__ == "__main__":
+    app = create_dashboard()
+    app.launch(server_name="0.0.0.0", server_port=7860)

grid_search_tab.py

@@ -0,0 +1,117 @@
+import gradio as gr
+import matplotlib.pyplot as plt
+import numpy as np
+from datetime import datetime, timedelta
+from theme_config import DashboardTheme
+
+def generate_sales_chart(chart_type, time_period, product_filter, primary_color, secondary_color):
+    colors = DashboardTheme.get_chart_colors()
+    fig, ax = plt.subplots(figsize=(10, 6))
+
+    # Generate dummy data based on time period
+    if time_period == "Last 7 days":
+        days = 7
+    elif time_period == "Last 30 days":
+        days = 30
+    else:  # Last 90 days
+        days = 90
+
+    dates = [(datetime.now() - timedelta(days=i)) for i in range(days, 0, -1)]
+
+    if chart_type == "Revenue":
+        # Generate dummy revenue data
+        revenue = np.random.randint(1000, 5000, days) + np.sin(np.arange(days)) * 500
+        ax.plot(dates, revenue, marker='o', linewidth=2.5, markersize=5, color=primary_color)
+        ax.set_ylabel('Revenue ($)')
+        ax.set_title(f'Sales Revenue - {product_filter} ({time_period})')
+
+    elif chart_type == "Units Sold":
+        # Generate dummy units data
+        units = np.random.randint(50, 200, days) + np.cos(np.arange(days)) * 20
+        ax.bar(dates, units, alpha=0.8, color=primary_color, edgecolor=secondary_color, linewidth=0.5)
+        ax.set_ylabel('Units Sold')
+        ax.set_title(f'Units Sold - {product_filter} ({time_period})')
+
+    else:  # Conversion Rate
+        # Generate dummy conversion rate data
+        conversion = np.random.uniform(2, 8, days) + np.sin(np.arange(days) * 0.3) * 1
+        ax.plot(dates, conversion, marker='s', linewidth=2.5, markersize=5, color=primary_color)
+        ax.set_ylabel('Conversion Rate (%)')
+        ax.set_title(f'Conversion Rate - {product_filter} ({time_period})')
+
+    ax.set_xlabel('Date')
+    ax.grid(True, alpha=0.3)
+    plt.xticks(rotation=45)
+    plt.tight_layout()
+
+    # Apply consistent styling
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.tick_params(colors=DashboardTheme.LIGHT_GREY)
+    ax.set_facecolor(DashboardTheme.WHITE)
+
+    return fig
+
+def create_grid_search_tab():
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### Sales Dashboard Options")
+
+            chart_type = gr.Radio(
+                choices=["Revenue", "Units Sold", "Conversion Rate"],
+                value="Revenue",
+                label="Chart Type"
+            )
+
+            time_period = gr.Dropdown(
+                choices=["Last 7 days", "Last 30 days", "Last 90 days"],
+                value="Last 30 days",
+                label="Time Period"
+            )
+
+            product_filter = gr.Dropdown(
+                choices=["All Products", "Electronics", "Clothing", "Books", "Home & Garden"],
+                value="All Products",
+                label="Product Category"
+            )
+
+            region_filter = gr.CheckboxGroup(
+                choices=["North America", "Europe", "Asia", "South America"],
+                value=["North America", "Europe"],
+                label="Regions"
+            )
+
+            gr.Markdown("#### Color Options")
+            primary_color = gr.ColorPicker(
+                value="#2C3E50",
+                label="Primary Color"
+            )
+            secondary_color = gr.ColorPicker(
+                value="#7F8C8D",
+                label="Secondary Color"
+            )
+
+            update_btn = gr.Button("Update Chart", variant="primary")
+
+        with gr.Column(scale=3):
+            plot = gr.Plot(label="Sales Analytics")
+
+    # Update plot when inputs change
+    inputs = [chart_type, time_period, product_filter, primary_color, secondary_color]
+
+    update_btn.click(
+        fn=generate_sales_chart,
+        inputs=inputs,
+        outputs=plot
+    )
+
+    # Initialize with default plot
+    chart_type.change(
+        fn=generate_sales_chart,
+        inputs=inputs,
+        outputs=plot
+    )
+
+    # Set initial plot
+    demo_plot = generate_sales_chart("Revenue", "Last 30 days", "All Products", "#2C3E50", "#7F8C8D")
+    plot.value = demo_plot

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=4.0.0
+matplotlib>=3.5.0
+numpy>=1.21.0

theme_config.py

@@ -0,0 +1,167 @@
+import gradio as gr
+import matplotlib.pyplot as plt
+import matplotlib as mpl
+
+class DashboardTheme:
+    # Color palette - Grey, minimalistic, sleek
+    PRIMARY_GREY = "#2C3E50"      # Dark slate grey
+    SECONDARY_GREY = "#34495E"    # Medium slate grey
+    LIGHT_GREY = "#7F8C8D"       # Light grey
+    BACKGROUND_GREY = "#ECF0F1"   # Very light grey background
+    WHITE = "#FFFFFF"
+    ACCENT_BLUE = "#3498DB"       # Clean blue accent
+    SUCCESS_GREEN = "#27AE60"     # Clean green
+    WARNING_ORANGE = "#F39C12"    # Clean orange
+    ERROR_RED = "#E74C3C"         # Clean red
+
+    # Chart colors - Professional grey scale with subtle accents
+    CHART_COLORS = [
+        "#34495E",  # Dark grey
+        "#5D6D7E",  # Medium grey
+        "#85929E",  # Light grey
+        "#3498DB",  # Accent blue
+        "#27AE60",  # Accent green
+        "#F39C12",  # Accent orange
+        "#9B59B6",  # Accent purple
+        "#E74C3C"   # Accent red
+    ]
+
+    # Typography
+    FONT_FAMILY = "'Inter', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif"
+
+    @staticmethod
+    def get_gradio_theme():
+        """Create a custom Gradio theme with grey minimalistic design"""
+        theme = gr.themes.Soft(
+            primary_hue=gr.themes.colors.slate,
+            secondary_hue=gr.themes.colors.gray,
+            neutral_hue=gr.themes.colors.slate,
+            font=gr.themes.GoogleFont("Inter")
+        ).set(
+            # Overall styling
+            body_background_fill=DashboardTheme.BACKGROUND_GREY,
+            background_fill_primary=DashboardTheme.WHITE,
+            background_fill_secondary=DashboardTheme.BACKGROUND_GREY,
+
+            # Border colors
+            border_color_primary=DashboardTheme.LIGHT_GREY,
+            border_color_accent=DashboardTheme.ACCENT_BLUE,
+
+            # Button styling
+            button_primary_background_fill=DashboardTheme.PRIMARY_GREY,
+            button_primary_background_fill_hover=DashboardTheme.SECONDARY_GREY,
+            button_primary_text_color=DashboardTheme.WHITE,
+            button_secondary_background_fill=DashboardTheme.WHITE,
+            button_secondary_border_color=DashboardTheme.LIGHT_GREY,
+            button_secondary_text_color=DashboardTheme.PRIMARY_GREY,
+
+            # Input styling
+            input_background_fill=DashboardTheme.WHITE,
+            input_border_color=DashboardTheme.LIGHT_GREY,
+
+            # Text colors
+            body_text_color=DashboardTheme.PRIMARY_GREY,
+            body_text_color_subdued=DashboardTheme.LIGHT_GREY,
+
+            # Panel styling
+            panel_background_fill=DashboardTheme.WHITE,
+            panel_border_color=DashboardTheme.LIGHT_GREY,
+
+            # Checkbox/Radio styling
+            checkbox_background_color=DashboardTheme.WHITE,
+            checkbox_background_color_selected=DashboardTheme.ACCENT_BLUE,
+            checkbox_border_color=DashboardTheme.LIGHT_GREY,
+
+            # Tab styling
+            block_title_text_color=DashboardTheme.PRIMARY_GREY,
+            block_label_text_color=DashboardTheme.SECONDARY_GREY,
+        )
+
+        return theme
+
+    @staticmethod
+    def setup_matplotlib_style():
+        """Configure matplotlib with the dashboard theme"""
+        # Set the style parameters
+        plt.style.use('default')  # Reset to default first
+
+        # Configure matplotlib parameters
+        mpl.rcParams.update({
+            'figure.facecolor': DashboardTheme.WHITE,
+            'axes.facecolor': DashboardTheme.WHITE,
+            'axes.edgecolor': DashboardTheme.LIGHT_GREY,
+            'axes.labelcolor': DashboardTheme.PRIMARY_GREY,
+            'axes.axisbelow': True,
+            'axes.grid': True,
+            'axes.spines.left': True,
+            'axes.spines.bottom': True,
+            'axes.spines.top': False,
+            'axes.spines.right': False,
+            'axes.linewidth': 1.0,
+
+            # Grid styling
+            'grid.color': DashboardTheme.LIGHT_GREY,
+            'grid.linestyle': '-',
+            'grid.linewidth': 0.5,
+            'grid.alpha': 0.3,
+
+            # Text styling
+            'text.color': DashboardTheme.PRIMARY_GREY,
+            'font.family': 'sans-serif',
+            'font.size': 10,
+            'axes.titlesize': 12,
+            'axes.labelsize': 10,
+            'xtick.labelsize': 9,
+            'ytick.labelsize': 9,
+            'legend.fontsize': 9,
+            'axes.titleweight': 'bold',
+
+            # Tick styling
+            'xtick.color': DashboardTheme.LIGHT_GREY,
+            'ytick.color': DashboardTheme.LIGHT_GREY,
+            'xtick.direction': 'out',
+            'ytick.direction': 'out',
+
+            # Legend styling
+            'legend.frameon': True,
+            'legend.facecolor': DashboardTheme.WHITE,
+            'legend.edgecolor': DashboardTheme.LIGHT_GREY,
+            'legend.shadow': False,
+            'legend.framealpha': 0.9,
+        })
+
+    @staticmethod
+    def get_chart_colors():
+        """Get the standardized chart color palette"""
+        return DashboardTheme.CHART_COLORS.copy()
+
+    @staticmethod
+    def get_status_colors():
+        """Get colors for different status indicators"""
+        return {
+            'success': DashboardTheme.SUCCESS_GREEN,
+            'warning': DashboardTheme.WARNING_ORANGE,
+            'error': DashboardTheme.ERROR_RED,
+            'info': DashboardTheme.ACCENT_BLUE,
+            'neutral': DashboardTheme.LIGHT_GREY
+        }
+
+# Common styling utilities
+def get_section_title_style():
+    """Get consistent styling for section titles"""
+    return {
+        'color': DashboardTheme.PRIMARY_GREY,
+        'font-weight': 'bold',
+        'font-size': '1.1em',
+        'margin-bottom': '0.5em'
+    }
+
+def get_metric_card_style():
+    """Get consistent styling for metric cards"""
+    return {
+        'background': DashboardTheme.WHITE,
+        'border': f'1px solid {DashboardTheme.LIGHT_GREY}',
+        'border-radius': '8px',
+        'padding': '1em',
+        'box-shadow': '0 2px 4px rgba(0,0,0,0.05)'
+    }