update app

app.py

@@ -4,10 +4,82 @@ import spaces
 import os
 import tempfile
 from PIL import Image, ImageOps
+from threading import Thread
+from typing import Iterable
 from transformers import AutoProcessor, AutoModelForImageTextToText
+
+from transformers.image_utils import load_image
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
+colors.steel_blue = colors.Color(
+    name="steel_blue",
+    c50="#EBF3F8",
+    c100="#D3E5F0",
+    c200="#A8CCE1",
+    c300="#7DB3D2",
+    c400="#529AC3",
+    c500="#4682B4",
+    c600="#3E72A0",
+    c700="#36638C",
+    c800="#2E5378",
+    c900="#264364",
+    c950="#1E3450",
+)
+
+class SteelBlueTheme(Soft):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.gray,
+        secondary_hue: colors.Color | str = colors.steel_blue,
+        neutral_hue: colors.Color | str = colors.slate,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        super().set(
+            background_fill_primary="*primary_50",
+            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="white",
+            button_primary_text_color_hover="white",
+            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_800)",
+            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
+            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)",
+            slider_color="*secondary_500",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="3px",
+            block_shadow="*shadow_drop_lg",
+            button_primary_shadow="*shadow_drop_lg",
+            button_large_padding="11px",
+            color_accent_soft="*primary_100",
+            block_label_background_fill="*primary_200",
+        )
+
+steel_blue_theme = SteelBlueTheme()
+
 MODEL_PATH = "zai-org/GLM-OCR"
 
 processor = AutoProcessor.from_pretrained(MODEL_PATH, trust_remote_code=True)
@@ -69,314 +141,47 @@ def process_image(image, task):
     
     return output_text.strip()
 
-# --- Custom Theme: Tech Blue/Cyan ---
-colors.tech_blue = colors.Color(
-    name="tech_blue",
-    c50="#f3f7fb",
-    c100="#e6eef7",
-    c200="#c6d9ee",
-    c300="#9bbbe0",
-    c400="#6a96cf",
-    c500="#3f6fb8",
-    c600="#2f569d",
-    c700="#26457f",
-    c800="#213b69",
-    c900="#1d3258",
-    c950="#0f1b34",
-)
-
-colors.electric = colors.Color(
-    name="electric",
-    c50="#f6f4fb",
-    c100="#ede9f8",
-    c200="#d9d1f0",
-    c300="#bba9e3",
-    c400="#9a7ed3",
-    c500="#7a56c2",
-    c600="#6541aa",
-    c700="#52348c",
-    c800="#442c72",
-    c900="#38265d",
-    c950="#1e1436",
-)
-
-
-class TechTheme(Soft):
-    def __init__(self):
-        super().__init__(
-            primary_hue=colors.tech_blue,
-            secondary_hue=colors.electric,
-            neutral_hue=colors.slate,
-            text_size=sizes.text_md,
-            font=(fonts.GoogleFont("Inter"), "system-ui", "sans-serif"),
-            font_mono=(fonts.GoogleFont("JetBrains Mono"), "monospace"),
-        )
-        super().set(
-            # Background - clean tech gradient
-            body_background_fill="linear-gradient(135deg, #ecfeff 0%, #ffffff 35%, #eff6ff 65%, #f0f9ff 100%)",
-            body_background_fill_dark="linear-gradient(135deg, #0f172a 0%, #020617 50%, #0c1929 100%)",
-            # Buttons - cyan to blue gradient
-            button_primary_background_fill="linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)",
-            button_primary_background_fill_hover="linear-gradient(135deg, #0891b2 0%, #2563eb 100%)",
-            button_primary_text_color="white",
-            button_primary_shadow="0 4px 20px rgba(6, 182, 212, 0.35)",
-            button_primary_shadow_hover="0 6px 24px rgba(6, 182, 212, 0.45)",
-            # Blocks - glassmorphism
-            block_background_fill="rgba(255, 255, 255, 0.85)",
-            block_background_fill_dark="rgba(15, 23, 42, 0.7)",
-            block_shadow="0 4px 24px rgba(6, 182, 212, 0.1)",
-            block_border_width="1px",
-            block_border_color="rgba(6, 182, 212, 0.12)",
-            block_border_color_dark="rgba(6, 182, 212, 0.25)",
-            block_title_text_weight="600",
-            block_label_text_weight="500",
-            # Inputs
-            input_background_fill="rgba(255, 255, 255, 0.95)",
-            input_background_fill_dark="rgba(15, 23, 42, 0.8)",
-            input_border_color="rgba(6, 182, 212, 0.2)",
-            input_border_color_focus="rgba(6, 182, 212, 0.5)",
-            input_shadow="0 2px 8px rgba(6, 182, 212, 0.06)",
-            input_shadow_focus="0 0 0 3px rgba(6, 182, 212, 0.12)",
-            # Tabs
-            border_color_accent="*primary_500",
-        )
-
-
-theme = TechTheme()
-
-# --- Custom CSS ---
-css = """
-/* Main Title with tech gradient */
-.main-title {
-    text-align: center;
-    padding: 1.5rem 0 1rem;
-}
-.main-title h1 {
-    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #0ea5e9 100%);
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 2.4rem !important;
-    font-weight: 700 !important;
-    margin: 0 !important;
-    letter-spacing: -0.02em;
-    animation: gradient-shift 6s ease infinite;
-}
-@keyframes gradient-shift {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-}
-.subtitle {
-    color: #64748b;
-    font-size: 0.95rem;
-    margin-top: 0.4rem;
-    font-weight: 400;
-}
-/* Extract Button */
-#extract-btn {
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    padding: 12px 28px !important;
-    border-radius: 10px !important;
-    transition: all 0.3s ease !important;
-}
-#extract-btn:hover {
-    transform: translateY(-2px);
-}
-/* Output text styling */
-.output-text textarea {
-    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
-    font-size: 0.875rem !important;
-    line-height: 1.6 !important;
-    font-variant-ligatures: none !important;
-}
-/* Tab styling */
-.tab-nav {
-    border-bottom: 2px solid rgba(6, 182, 212, 0.1) !important;
-}
-.tab-nav button {
-    font-weight: 500 !important;
-    padding: 10px 18px !important;
-    border-radius: 8px 8px 0 0 !important;
-    transition: all 0.2s ease !important;
-}
-.tab-nav button.selected {
-    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.08)) !important;
-    border-bottom: 2px solid #06b6d4 !important;
-}
-/* Card hover effects */
-.gradio-group {
-    transition: all 0.3s ease;
-    border-radius: 14px !important;
-}
-.gradio-group:hover {
-    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.12);
-}
-/* Dropdown styling */
-.gradio-dropdown {
-    border-radius: 8px !important;
-}
-/* Image container */
-.gradio-image {
-    border-radius: 10px !important;
-    overflow: hidden;
-}
-/* Gallery styling */
-.gradio-gallery {
-    border-radius: 10px !important;
-}
-.gradio-gallery .gallery-item {
-    border-radius: 8px !important;
-    border: 1px solid rgba(6, 182, 212, 0.15) !important;
-}
-/* Accordion styling */
-.gradio-accordion {
-    border-radius: 10px !important;
-    border: 1px solid rgba(6, 182, 212, 0.12) !important;
-}
-.gradio-accordion > .label-wrap {
-    background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(59, 130, 246, 0.04)) !important;
-}
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-::-webkit-scrollbar-track {
-    background: rgba(6, 182, 212, 0.05);
-    border-radius: 3px;
-}
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #06b6d4, #3b82f6);
-    border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #0891b2, #2563eb);
-}
-/* File upload area */
-.gradio-file {
-    border: 2px dashed rgba(6, 182, 212, 0.25) !important;
-    border-radius: 10px !important;
-    transition: all 0.3s ease;
-}
-.gradio-file:hover {
-    border-color: rgba(6, 182, 212, 0.45) !important;
-    background: rgba(6, 182, 212, 0.02) !important;
-}
-/* Examples section */
-.gradio-examples {
-    border-radius: 10px !important;
-}
-/* Radio group styling */
-.gradio-radio {
-    border-radius: 10px !important;
-}
-.gradio-radio label {
-    border-radius: 8px !important;
-    transition: all 0.2s ease !important;
-}
-.gradio-radio label.selected {
-    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1)) !important;
-    border-color: rgba(6, 182, 212, 0.3) !important;
-}
-/* Markdown output */
-.markdown-output {
-    font-family: 'Inter', system-ui, sans-serif !important;
-    line-height: 1.7 !important;
-}
-.markdown-output code {
-    font-family: 'JetBrains Mono', monospace !important;
-    background: rgba(6, 182, 212, 0.08) !important;
-    padding: 2px 6px !important;
-    border-radius: 4px !important;
-}
-.markdown-output pre {
-    background: rgba(6, 182, 212, 0.05) !important;
-    border: 1px solid rgba(6, 182, 212, 0.15) !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-}
-/* Footer */
-.footer-text {
-    text-align: center;
-    padding: 1rem;
-    color: #64748b;
-    font-size: 0.85rem;
-}
-.footer-text strong {
-    background: linear-gradient(135deg, #06b6d4, #3b82f6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-"""
-
 with gr.Blocks(title="GLM-OCR") as demo:
     
-    # Header
-    gr.HTML("""
-        <div class="main-title">
-            <h1>GLM-OCR</h1>
-            <p class="subtitle">Document parsing and text recognition powered by AI</p>
-        </div>
-    """)
+    gr.Markdown("# GLM-OCR")
+    gr.Markdown("Document parsing and text recognition powered by AI")
     
     with gr.Row():
         
-        # Input Column
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.Markdown("### Upload Image")
-                image_input = gr.Image(
-                    type="pil",
-                    label="",
-                    sources=["upload", "clipboard"],
-                    height=280,
-                    show_label=False
-                )
-                
-                gr.Markdown("### Recognition Type")
-                task = gr.Radio(
-                    choices=list(TASK_PROMPTS.keys()),
-                    value="Text",
-                    label="",
-                    show_label=False
-                )
-                
-                btn = gr.Button(
-                    "Recognize",
-                    variant="primary",
-                    elem_id="extract-btn"
-                )
+            image_input = gr.Image(
+                type="pil",
+                label="Upload Image",
+                sources=["upload", "clipboard"],
+                height=300
+            )
             
-            with gr.Accordion("Examples", open=False):
-                examples = gr.Examples(
-                    examples=["examples/1.jpg", "examples/2.jpg", "examples/3.jpg"],
-                    inputs=image_input,
-                    label=""
-                )
+            task = gr.Radio(
+                choices=list(TASK_PROMPTS.keys()),
+                value="Text",
+                label="Recognition Type"
+            )
+            
+            btn = gr.Button("Recognize", variant="primary")
+            
+            gr.Examples(
+                examples=["examples/1.jpg", "examples/2.jpg", "examples/3.jpg"],
+                inputs=image_input,
+                label="Examples"
+            )
         
-        # Output Column
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.Markdown("### Result")
-                with gr.Tabs():
-                    with gr.Tab("Text"):
-                        output_text = gr.Textbox(
-                            label="",
-                            lines=16,
-                            show_label=False,
-                            #show_copy_button=True,
-                            elem_classes=["output-text"]
-                        )
-                    
-                    with gr.Tab("Markdown"):
-                        output_md = gr.Markdown(
-                            value="",
-                            elem_classes=["markdown-output"]
-                        )
-    # Event handlers
+            with gr.Tabs():
+                with gr.Tab("Text"):
+                    output_text = gr.Textbox(
+                        label="Output",
+                        lines=18,
+                        show_copy_button=True
+                    )
+                
+                with gr.Tab("Markdown"):
+                    output_md = gr.Markdown(value="")
+    
     def run_ocr(image, task):
         result = process_image(image, task)
         return result, result
@@ -394,9 +199,4 @@ with gr.Blocks(title="GLM-OCR") as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=50).launch(
-        css=css, 
-        theme=theme, 
-        show_error=True,
-        ssr_mode=False
-    )
+    demo.queue(max_size=50).launch(css=css, theme=steel_blue_theme, mcp_server=True, ssr_mode=False, show_error=True)