Update UI_Design

UI_Design

@@ -1,17 +1,27 @@
-with gr.Blocks(theme = gr.themes.Soft(
-    primary_hue="purple",
-    secondary_hue="fuchsia",
-    neutral_hue = "gray",
-    text_size = "lg"
-).set(
-    background_fill_primary='*neutral_200',
-    background_fill_secondary='*neutral_400',
-    background_fill_secondary_dark='*secondary_500',
-    border_color_accent='*secondary_400',
-    border_color_accent_dark='*secondary_800',
-    color_accent='*secondary_300',
-    color_accent_soft='*secondary_500',
-    color_accent_soft_dark='*secondary_400',
-    button_primary_background_fill='*secondary_500',
-    button_primary_background_fill_dark='*secondary_600'
-))
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue="purple",
+        secondary_hue="fuchsia",
+        neutral_hue="gray",
+        text_size="lg"
+    ).set(
+        background_fill_primary='*neutral_200',
+        background_fill_secondary='neutral_100',
+        background_fill_secondary_dark='secondary_500',
+        border_color_accent='*secondary_400',
+        border_color_accent_dark='*secondary_800',
+        color_accent='*secondary_600',
+        color_accent_soft='*secondary_200',
+        color_accent_soft_dark='*secondary_700',
+        button_primary_background_fill='*secondary_100',
+        button_primary_background_fill_dark='*secondary_600'
+    )
+     
+) as demo:
+
+    gr.ChatInterface(
+        fn=magic_8_ball,
+        title="Magic 8 Ball",
+        description="Let's play magic 8 ball!",
+        type="messages"
+    )