Update app.py

app.py

@@ -12,27 +12,27 @@ from transformers.image_utils import load_image
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
+colors.hot_pink = colors.Color(
+    name="hot_pink",
+    c50="#FFF0F5",
+    c100="#FFE4EC",
+    c200="#FFC0D9",
+    c300="#FF99C4",
+    c400="#FF7EB8",
+    c500="#FF69B4",
+    c600="#E55AA0",
+    c700="#CC4C8C",
+    c800="#B33D78",
+    c900="#992F64",
+    c950="#802050",
 )
 
-class OrangeRedTheme(Soft):
+class HotPinkTheme(Soft):
     def __init__(
         self,
         *,
         primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
+        secondary_hue: colors.Color | str = colors.hot_pink,
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
@@ -78,7 +78,7 @@ class OrangeRedTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
-orange_red_theme = OrangeRedTheme()
+hot_pink_theme = HotPinkTheme()
 
 MODEL_PATH = "zai-org/GLM-OCR"
 
@@ -145,12 +145,12 @@ def process_image(image, task):
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
 
-/* Background grid pattern */
+/* Background grid pattern - Hot Pink theme */
 body, .gradio-container {
-    background-color: #FFF5EB !important;
+    background-color: #FFF0F5 !important;
     background-image: 
-        linear-gradient(#FFE0CC 1px, transparent 1px), 
-        linear-gradient(90deg, #FFE0CC 1px, transparent 1px) !important;
+        linear-gradient(#FFC0D9 1px, transparent 1px), 
+        linear-gradient(90deg, #FFC0D9 1px, transparent 1px) !important;
     background-size: 40px 40px !important;
     font-family: 'Outfit', sans-serif !important;
 }
@@ -159,8 +159,8 @@ body, .gradio-container {
 .dark body, .dark .gradio-container {
     background-color: #1a1a1a !important;
     background-image: 
-        linear-gradient(rgba(255, 69, 0, 0.1) 1px, transparent 1px), 
-        linear-gradient(90deg, rgba(255, 69, 0, 0.1) 1px, transparent 1px) !important;
+        linear-gradient(rgba(255, 105, 180, 0.1) 1px, transparent 1px), 
+        linear-gradient(90deg, rgba(255, 105, 180, 0.1) 1px, transparent 1px) !important;
     background-size: 40px 40px !important;
 }
 
@@ -178,7 +178,7 @@ body, .gradio-container {
 #main-title h1 {
     font-size: 2.5em !important;
     font-weight: 700 !important;
-    background: linear-gradient(135deg, #FF4500 0%, #FF8533 50%, #E63E00 100%);
+    background: linear-gradient(135deg, #FF69B4 0%, #FF99C4 50%, #E55AA0 100%);
     background-size: 200% 200%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -205,7 +205,7 @@ body, .gradio-container {
 }
 
 #subtitle a {
-    color: #FF4500 !important;
+    color: #FF69B4 !important;
     text-decoration: none;
     font-weight: 500;
 }
@@ -217,34 +217,34 @@ body, .gradio-container {
 /* Card styling */
 .gradio-group {
     background: rgba(255, 255, 255, 0.9) !important;
-    border: 2px solid #FFE0CC !important;
+    border: 2px solid #FFC0D9 !important;
     border-radius: 12px !important;
-    box-shadow: 0 4px 24px rgba(255, 69, 0, 0.08) !important;
+    box-shadow: 0 4px 24px rgba(255, 105, 180, 0.08) !important;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }
 
 .gradio-group:hover {
-    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.12) !important;
-    border-color: #FFC299 !important;
+    box-shadow: 0 8px 32px rgba(255, 105, 180, 0.12) !important;
+    border-color: #FF99C4 !important;
 }
 
 .dark .gradio-group {
     background: rgba(30, 30, 30, 0.9) !important;
-    border-color: rgba(255, 69, 0, 0.3) !important;
+    border-color: rgba(255, 105, 180, 0.3) !important;
 }
 
 /* Image upload area */
 .gradio-image {
     border-radius: 10px !important;
     overflow: hidden;
-    border: 2px dashed #FFC299 !important;
+    border: 2px dashed #FF99C4 !important;
     transition: all 0.3s ease;
 }
 
 .gradio-image:hover {
-    border-color: #FF4500 !important;
-    background: rgba(255, 69, 0, 0.02) !important;
+    border-color: #FF69B4 !important;
+    background: rgba(255, 105, 180, 0.02) !important;
 }
 
 /* Radio buttons */
@@ -259,12 +259,12 @@ body, .gradio-container {
 }
 
 .gradio-radio label:hover {
-    background: rgba(255, 69, 0, 0.05) !important;
+    background: rgba(255, 105, 180, 0.05) !important;
 }
 
 .gradio-radio label.selected {
-    background: rgba(255, 69, 0, 0.1) !important;
-    border-color: #FF4500 !important;
+    background: rgba(255, 105, 180, 0.1) !important;
+    border-color: #FF69B4 !important;
 }
 
 /* Primary button */
@@ -282,7 +282,7 @@ body, .gradio-container {
 
 /* Tabs styling */
 .tab-nav {
-    border-bottom: 2px solid #FFE0CC !important;
+    border-bottom: 2px solid #FFC0D9 !important;
 }
 
 .tab-nav button {
@@ -293,8 +293,8 @@ body, .gradio-container {
 }
 
 .tab-nav button.selected {
-    background: rgba(255, 69, 0, 0.1) !important;
-    border-bottom: 2px solid #FF4500 !important;
+    background: rgba(255, 105, 180, 0.1) !important;
+    border-bottom: 2px solid #FF69B4 !important;
 }
 
 /* Output textbox */
@@ -303,13 +303,13 @@ body, .gradio-container {
     font-size: 0.95rem !important;
     line-height: 1.7 !important;
     background: rgba(255, 255, 255, 0.95) !important;
-    border: 1px solid #FFE0CC !important;
+    border: 1px solid #FFC0D9 !important;
     border-radius: 8px !important;
 }
 
 .dark .gradio-textbox textarea {
     background: rgba(30, 30, 30, 0.95) !important;
-    border-color: rgba(255, 69, 0, 0.2) !important;
+    border-color: rgba(255, 105, 180, 0.2) !important;
 }
 
 /* Markdown output */
@@ -320,15 +320,15 @@ body, .gradio-container {
 
 .gradio-markdown code {
     font-family: 'IBM Plex Mono', monospace !important;
-    background: rgba(255, 69, 0, 0.08) !important;
+    background: rgba(255, 105, 180, 0.08) !important;
     padding: 2px 6px !important;
     border-radius: 4px !important;
-    color: #CC3700 !important;
+    color: #CC4C8C !important;
 }
 
 .gradio-markdown pre {
-    background: rgba(255, 69, 0, 0.05) !important;
-    border: 1px solid #FFE0CC !important;
+    background: rgba(255, 105, 180, 0.05) !important;
+    border: 1px solid #FFC0D9 !important;
     border-radius: 8px !important;
     padding: 1rem !important;
 }
@@ -339,15 +339,15 @@ body, .gradio-container {
 }
 
 .gradio-examples .gallery-item {
-    border: 2px solid #FFE0CC !important;
+    border: 2px solid #FFC0D9 !important;
     border-radius: 8px !important;
     transition: all 0.2s ease !important;
 }
 
 .gradio-examples .gallery-item:hover {
-    border-color: #FF4500 !important;
+    border-color: #FF69B4 !important;
     transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.15) !important;
+    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15) !important;
 }
 
 /* Scrollbar styling */
@@ -357,27 +357,27 @@ body, .gradio-container {
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(255, 69, 0, 0.05);
+    background: rgba(255, 105, 180, 0.05);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #FF4500, #FF8533);
+    background: linear-gradient(135deg, #FF69B4, #FF99C4);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #E63E00, #FF4500);
+    background: linear-gradient(135deg, #E55AA0, #FF69B4);
 }
 
 /* Accordion styling */
 .gradio-accordion {
     border-radius: 10px !important;
-    border: 1px solid #FFE0CC !important;
+    border: 1px solid #FFC0D9 !important;
 }
 
 .gradio-accordion > .label-wrap {
-    background: rgba(255, 69, 0, 0.03) !important;
+    background: rgba(255, 105, 180, 0.03) !important;
     border-radius: 10px !important;
 }
 
@@ -466,4 +466,4 @@ with gr.Blocks() as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=50).launch(css=css, theme=orange_red_theme, mcp_server=True, ssr_mode=False, show_error=True)
+    demo.queue(max_size=50).launch(css=css, theme=hot_pink_theme, mcp_server=True, ssr_mode=False, show_error=True)