Update app.py

app.py

@@ -27,19 +27,22 @@ from transformers.image_utils import load_image
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
-colors.light_salmon = colors.Color(
-    name="light_salmon",
-    c50="#FFF9F2",
-    c100="#FFEC C6",
-    c200="#FFD9B3",
-    c300="#FFC6A0",
-    c400="#FFB38D",
-    c500="#FFA07A",
-    c600="#E6906E",
-    c700="#CC8062",
-    c800="#B37056",
-    c900="#99604A",
-    c950="#80503E",
+# --- Theme and CSS Definition ---
+
+# Define the new Red color palette
+colors.red_theme = colors.Color(
+    name="red_theme",
+    c50="#FFE5E5",
+    c100="#FFCCCC",
+    c200="#FF9999",
+    c300="#FF6666",
+    c400="#FF3333",
+    c500="#FF0000",  # Red base color
+    c600="#D90000",
+    c700="#B30000",
+    c800="#8C0000",
+    c900="#660000",
+    c950="#400000",
 )
 
 colors.red_gray = colors.Color(
@@ -49,12 +52,12 @@ colors.red_gray = colors.Color(
     c800="#732d2d", c900="#5f2626", c950="#4d2020",
 )
 
-class LightSalmonTheme(Soft):
+class RedTheme(Soft):
     def __init__(
         self,
         *,
         primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.light_salmon, # Use the new color
+        secondary_hue: colors.Color | str = colors.red_theme, # Use the new red color
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
@@ -77,27 +80,19 @@ class LightSalmonTheme(Soft):
             background_fill_primary_dark="*primary_900",
             body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
             body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
-            button_primary_text_color="black",
+            button_primary_text_color="white",
             button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_400, *secondary_400)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_600)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
+            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
+            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
+            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
             button_secondary_text_color="black",
             button_secondary_text_color_hover="white",
             button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
             button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
             button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
             button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            button_cancel_background_fill=f"linear-gradient(90deg, {colors.red_gray.c400}, {colors.red_gray.c500})",
-            button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red_gray.c700}, {colors.red_gray.c800})",
-            button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red_gray.c500}, {colors.red_gray.c600})",
-            button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red_gray.c800}, {colors.red_gray.c900})",
-            button_cancel_text_color="white",
-            button_cancel_text_color_dark="white",
-            button_cancel_text_color_hover="white",
-            button_cancel_text_color_hover_dark="white",
-            slider_color="*secondary_300",
+            slider_color="*secondary_500",
             slider_color_dark="*secondary_600",
             block_title_text_weight="600",
             block_border_width="3px",
@@ -108,7 +103,8 @@ class LightSalmonTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
-light_salmon_theme = LightSalmonTheme()
+# Instantiate the new theme
+red_theme = RedTheme()
 
 css = """
 #main-title h1 {
@@ -324,7 +320,7 @@ video_examples = [
     ["Explain the ad in detail.", "videos/1.mp4"]
 ]
 
-with gr.Blocks(theme=light_salmon_theme, css=css) as demo:
+with gr.Blocks(theme=red_theme, css=css) as demo:
     gr.Markdown("# **Multimodal VLM Thinking**", elem_id="main-title")
     with gr.Row():
         with gr.Column(scale=2):