Update app.py

app.py

@@ -28,7 +28,7 @@ TASK_PROMPTS = {
 @spaces.GPU
 def process_image(image, task):
     if image is None:
-        return "⚠️ Please upload an image first"
+        return "Please upload an image first"
     
     if image.mode in ('RGBA', 'LA', 'P'):
         image = image.convert('RGB')
@@ -75,11 +75,50 @@ css = """
 
 :root {
     --input-focus: #2d8cf0;
-    --font-color: #323232;
-    --font-color-sub: #666;
-    --bg-color: beige;
-    --main-color: black;
-    --accent-bg: lightblue;
+    --font-color: #1a1a1a;
+    --font-color-sub: #4a4a4a;
+    --bg-color: #f5f5dc;
+    --main-color: #1a1a1a;
+    --accent-bg: #b8d4e3;
+    --card-bg: #f0f0f0;
+    --gradient-start: #e8f5e9;
+    --gradient-mid: #e3f2fd;
+    --gradient-end: #fce4ec;
+    --button-gradient-start: #ffd54f;
+    --button-gradient-end: #ffb300;
+    --output-bg: #fffef5;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --font-color: #e8e8e8;
+        --font-color-sub: #b0b0b0;
+        --bg-color: #2a2a2a;
+        --main-color: #e8e8e8;
+        --accent-bg: #3a4a5a;
+        --card-bg: #1e1e1e;
+        --gradient-start: #1a2a1a;
+        --gradient-mid: #1a2a3a;
+        --gradient-end: #2a1a2a;
+        --button-gradient-start: #cc9a00;
+        --button-gradient-end: #b38600;
+        --output-bg: #2a2a2a;
+    }
+}
+
+.dark {
+    --font-color: #e8e8e8;
+    --font-color-sub: #b0b0b0;
+    --bg-color: #2a2a2a;
+    --main-color: #e8e8e8;
+    --accent-bg: #3a4a5a;
+    --card-bg: #1e1e1e;
+    --gradient-start: #1a2a1a;
+    --gradient-mid: #1a2a3a;
+    --gradient-end: #2a1a2a;
+    --button-gradient-start: #cc9a00;
+    --button-gradient-end: #b38600;
+    --output-bg: #2a2a2a;
 }
 
 * {
@@ -87,7 +126,7 @@ css = """
 }
 
 .gradio-container {
-    background: linear-gradient(135deg, #e8f5e9, #e3f2fd, #fce4ec) !important;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end)) !important;
     min-height: 100vh;
 }
 
@@ -164,7 +203,11 @@ css = """
 }
 
 .upload-box:hover {
-    background-color: #f5f5dc !important;
+    opacity: 0.9;
+}
+
+.upload-box span, .upload-box p, .upload-box label {
+    color: var(--font-color) !important;
 }
 
 .dropdown-field {
@@ -180,6 +223,14 @@ css = """
     flex-wrap: wrap;
 }
 
+.task-buttons label {
+    color: var(--font-color) !important;
+}
+
+.task-buttons input[type="radio"] + label {
+    color: var(--font-color) !important;
+}
+
 .task-btn {
     flex: 1;
     min-width: 100px;
@@ -196,13 +247,13 @@ css = """
 }
 
 .task-btn:hover {
-    background-color: #f5f5dc !important;
+    opacity: 0.9;
 }
 
 .task-btn.selected, .task-btn:active {
     box-shadow: 0px 0px var(--main-color) !important;
     transform: translate(3px, 3px);
-    background-color: #ffd54f !important;
+    background-color: var(--button-gradient-start) !important;
 }
 
 .go-button {
@@ -210,18 +261,18 @@ css = """
     height: 55px;
     border-radius: 8px !important;
     border: 3px solid var(--main-color) !important;
-    background: linear-gradient(135deg, #ffd54f, #ffb300) !important;
+    background: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end)) !important;
     box-shadow: 5px 5px var(--main-color) !important;
     font-size: 1.2em !important;
     font-weight: 700 !important;
-    color: var(--font-color) !important;
+    color: #1a1a1a !important;
     cursor: pointer;
     transition: all 0.15s ease;
     margin-top: 15px;
 }
 
 .go-button:hover {
-    background: linear-gradient(135deg, #ffca28, #ffa000) !important;
+    opacity: 0.9;
 }
 
 .go-button:active {
@@ -230,7 +281,7 @@ css = """
 }
 
 .output-area {
-    background-color: var(--bg-color) !important;
+    background-color: var(--output-bg) !important;
     border: 2px solid var(--main-color) !important;
     border-radius: 8px !important;
     box-shadow: 4px 4px var(--main-color) !important;
@@ -244,6 +295,7 @@ css = """
     background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
+    color: var(--font-color) !important;
 }
 
 .example-gallery {
@@ -263,12 +315,19 @@ css = """
 }
 
 .md-preview {
-    background-color: var(--bg-color) !important;
+    background-color: var(--output-bg) !important;
     border: 2px solid var(--main-color) !important;
     border-radius: 8px !important;
     box-shadow: 4px 4px var(--main-color) !important;
     padding: 20px !important;
     min-height: 300px;
+    color: var(--font-color) !important;
+}
+
+.md-preview p, .md-preview h1, .md-preview h2, .md-preview h3, 
+.md-preview h4, .md-preview h5, .md-preview h6, .md-preview li,
+.md-preview span, .md-preview code, .md-preview pre {
+    color: var(--font-color) !important;
 }
 
 .tabs-container button {
@@ -277,24 +336,30 @@ css = """
     font-weight: 600 !important;
     border-radius: 6px 6px 0 0 !important;
     margin-right: 5px;
+    color: var(--font-color) !important;
 }
 
 .tabs-container button.selected {
-    background-color: #ffd54f !important;
+    background-color: var(--button-gradient-start) !important;
     box-shadow: none !important;
+    color: #1a1a1a !important;
 }
 
 .footer-note {
     text-align: center;
     margin-top: 20px;
     padding: 15px;
-    background: rgba(255,255,255,0.5);
+    background: var(--card-bg);
     border-radius: 8px;
     border: 2px solid var(--main-color);
     font-size: 0.9em;
     color: var(--font-color-sub);
 }
 
+.footer-note strong {
+    color: var(--font-color);
+}
+
 footer {
     display: none !important;
 }
@@ -324,6 +389,19 @@ label {
     box-shadow: 0px 0px var(--main-color) !important;
     transform: translate(2px, 2px);
 }
+
+span, p, div, input, textarea, button, a {
+    color: var(--font-color);
+}
+
+.gr-input, .gr-text-input, .gr-textarea {
+    color: var(--font-color) !important;
+    background-color: var(--bg-color) !important;
+}
+
+.gr-radio label span {
+    color: var(--font-color) !important;
+}
 """
 
 with gr.Blocks(title="GLM-OCR") as demo:
@@ -331,15 +409,15 @@ with gr.Blocks(title="GLM-OCR") as demo:
     gr.HTML("""
         <div class="main-wrapper">
             <div class="header-card">
-                <h1 class="header-title">✦ GLM-OCR ✦</h1>
-                <p class="header-subtitle">Document parsing & text recognition powered by AI</p>
+                <h1 class="header-title">GLM-OCR</h1>
+                <p class="header-subtitle">Document parsing and text recognition powered by AI</p>
             </div>
         </div>
     """)
     
     with gr.Row(elem_classes=["main-wrapper"]):
         with gr.Column(scale=1, elem_classes=["content-card"]):
-            gr.HTML('<div class="section-label">📷 Upload Image</div>')
+            gr.HTML('<div class="section-label">Upload Image</div>')
             
             image_input = gr.Image(
                 type="pil",
@@ -349,7 +427,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
                 height=250
             )
             
-            gr.HTML('<div class="section-label" style="margin-top: 20px;">🎯 Recognition Type</div>')
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">Recognition Type</div>')
             
             task = gr.Radio(
                 choices=list(TASK_PROMPTS.keys()),
@@ -359,12 +437,12 @@ with gr.Blocks(title="GLM-OCR") as demo:
             )
             
             btn = gr.Button(
-                "Recognize →",
+                "Recognize",
                 variant="primary",
                 elem_classes=["go-button"]
             )
             
-            gr.HTML('<div class="section-label" style="margin-top: 20px;">📁 Examples</div>')
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">Examples</div>')
             
             examples = gr.Examples(
                 examples=[
@@ -377,7 +455,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
             )
         
         with gr.Column(scale=1, elem_classes=["content-card"]):
-            gr.HTML('<div class="section-label">📝 Output</div>')
+            gr.HTML('<div class="section-label">Output</div>')
             
             with gr.Tabs(elem_classes=["tabs-container"]):
                 with gr.Tab("Text"):
@@ -397,7 +475,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
     gr.HTML("""
         <div class="main-wrapper">
             <div class="footer-note">
-                🚀 Powered by <strong>zai-org/GLM-OCR</strong> • 
+                Powered by <strong>zai-org/GLM-OCR</strong> |
                 Supports text, formula, and table recognition
             </div>
         </div>
@@ -421,7 +499,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
 
 if __name__ == "__main__":
     demo.queue(max_size=50).launch(
-        css=css,
+        css=css, 
         show_error=True,
         ssr_mode=False
     )