Update app.py

app.py

@@ -5,732 +5,849 @@ import os
 import tempfile
 from PIL import Image, ImageOps
 from transformers import AutoProcessor, AutoModelForImageTextToText
+from io import BytesIO
+import base64
 
-# Model configuration
 MODEL_PATH = "zai-org/GLM-OCR"
 
 # Load model and processor
 processor = AutoProcessor.from_pretrained(MODEL_PATH, trust_remote_code=True)
 model = AutoModelForImageTextToText.from_pretrained(
     pretrained_model_name_or_path=MODEL_PATH,
-    torch_dtype="auto",
+    torch_dtype=torch.bfloat16,
     device_map="auto",
     trust_remote_code=True
 )
 
-# Task prompts
 TASK_PROMPTS = {
     "Text": "Text Recognition:",
     "Formula": "Formula Recognition:",
-    "Table": "Table Recognition:"
+    "Table": "Table Recognition:",
 }
 
-# Custom CSS with browser-inspired dark theme
+@spaces.GPU
+def process_image(image, task):
+    if image is None:
+        return "⚠️ Please upload an image first"
+    
+    if image.mode in ('RGBA', 'LA', 'P'):
+        image = image.convert('RGB')
+    image = ImageOps.exif_transpose(image)
+    
+    tmp = tempfile.NamedTemporaryFile(delete=False, suffix='.png')
+    image.save(tmp.name, 'PNG')
+    tmp.close()
+    
+    prompt = TASK_PROMPTS.get(task, "Text Recognition:")
+    
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {"type": "image", "url": tmp.name},
+                {"type": "text", "text": prompt}
+            ],
+        }
+    ]
+    
+    inputs = processor.apply_chat_template(
+        messages,
+        tokenize=True,
+        add_generation_prompt=True,
+        return_dict=True,
+        return_tensors="pt"
+    ).to(model.device)
+    
+    inputs.pop("token_type_ids", None)
+    
+    generated_ids = model.generate(**inputs, max_new_tokens=8192)
+    output_text = processor.decode(
+        generated_ids[0][inputs["input_ids"].shape[1]:], 
+        skip_special_tokens=True
+    )
+    
+    os.unlink(tmp.name)
+    
+    return output_text.strip()
+
 css = """
-/* Reset and base styles */
-* {
-    box-sizing: border-box;
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;900&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+:root {
+    --input-focus: #2d8cf0;
+    --font-color: #323232;
+    --font-color-sub: #666;
+    --bg-color: beige;
+    --main-color: black;
+    --accent-bg: lightblue;
 }
 
-.gradio-container {
-    max-width: 1000px !important;
-    margin: auto !important;
-    padding: 0 !important;
-    background: transparent !important;
+* {
+    font-family: 'Outfit', Arial, sans-serif !important;
 }
 
-body {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
+.gradio-container {
+    background: linear-gradient(135deg, #e8f5e9, #e3f2fd, #fce4ec) !important;
     min-height: 100vh;
 }
 
-/* Browser window container */
-.browser {
-    width: 100%;
-    background: #2d2d2d;
-    border-radius: 12px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    margin: 20px 0;
+.main-wrapper {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 30px 20px;
 }
 
-/* Tabs head */
-.tabs-head {
-    background-color: #353535;
-    height: 44px;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding-left: 20px;
-    user-select: none;
+.header-card {
+    background: var(--accent-bg);
+    padding: 25px 30px;
+    border-radius: 8px;
+    border: 3px solid var(--main-color);
+    box-shadow: 6px 6px var(--main-color);
+    margin-bottom: 25px;
+    text-align: center;
 }
 
-.tabs-head .tab-open {
-    width: 140px;
-    height: 36px;
-    border-radius: 10px 10px 0 0;
-    background-color: #515151;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: center;
-    padding: 6px 12px;
-    position: relative;
-}
-
-.tabs-head .tab-open .close-tab {
-    color: #aaa;
-    font-size: 10px;
-    padding: 2px 5px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: 0.2s;
-    position: absolute;
-    right: 8px;
+.header-title {
+    font-size: 2.5em;
+    font-weight: 900;
+    color: var(--font-color);
+    margin: 0;
+    letter-spacing: -1px;
 }
 
-.tabs-head .tab-open .close-tab:hover {
-    background-color: #666;
-    color: #fff;
+.header-subtitle {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--font-color-sub);
+    margin-top: 8px;
 }
 
-.tabs-head .tab-open .rounded-l {
-    position: absolute;
-    background-color: #515151;
-    width: 20px;
-    height: 26px;
-    top: 10px;
-    right: -20px;
-    overflow: hidden;
+.content-card {
+    background: var(--accent-bg);
+    padding: 25px;
+    border-radius: 8px;
+    border: 3px solid var(--main-color);
+    box-shadow: 6px 6px var(--main-color);
 }
 
-.tabs-head .tab-open .rounded-l .mask-round {
-    width: 100%;
-    height: 100%;
-    background-color: #353535;
-    border-radius: 0 0 0 10px;
+.section-label {
+    font-weight: 700;
+    font-size: 0.95em;
+    color: var(--font-color);
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.input-field, .input-field textarea, .input-field input {
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-size: 15px !important;
+    font-weight: 500 !important;
+    color: var(--font-color) !important;
 }
 
-.tabs-head .tab-open .rounded-r {
-    position: absolute;
-    background-color: #515151;
-    width: 20px;
-    height: 26px;
-    top: 10px;
-    left: -20px;
-    overflow: hidden;
+.input-field textarea:focus, .input-field input:focus {
+    border-color: var(--input-focus) !important;
+    outline: none !important;
 }
 
-.tabs-head .tab-open .rounded-r .mask-round {
-    width: 100%;
-    height: 100%;
-    background-color: #353535;
-    border-radius: 0 0 10px 0;
+.upload-box {
+    border: 3px dashed var(--main-color) !important;
+    border-radius: 8px !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    min-height: 200px !important;
+    transition: all 0.2s ease;
 }
 
-.tabs-head .tab-open .tab-icon {
-    font-size: 14px;
+.upload-box:hover {
+    background-color: #f5f5dc !important;
 }
 
-.tabs-head .tab-open span {
-    color: #fff;
-    font-size: 12px;
-    font-weight: 500;
+.dropdown-field {
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
 }
 
-.tabs-head .window-opt {
+.task-buttons {
     display: flex;
-    padding-right: 10px;
-    padding-bottom: 14px;
-    gap: 8px;
+    gap: 12px;
+    flex-wrap: wrap;
 }
 
-.tabs-head .window-opt .dot {
-    height: 13px;
-    width: 13px;
-    border-radius: 50%;
+.task-btn {
+    flex: 1;
+    min-width: 100px;
+    height: 45px;
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    color: var(--font-color) !important;
     cursor: pointer;
-    transition: 0.15s;
+    transition: all 0.1s ease;
 }
 
-.tabs-head .window-opt .dot:hover {
-    filter: brightness(0.8);
+.task-btn:hover {
+    background-color: #f5f5dc !important;
 }
 
-.tabs-head .window-opt .dot.red { background-color: #ff5f56; }
-.tabs-head .window-opt .dot.yellow { background-color: #ffbd2e; }
-.tabs-head .window-opt .dot.green { background-color: #27ca40; }
+.task-btn.selected, .task-btn:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(3px, 3px);
+    background-color: #ffd54f !important;
+}
 
-/* Head browser / address bar */
-.head-browser {
+.go-button {
     width: 100%;
-    height: 48px;
-    background-color: #515151;
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.head-browser .nav-btn {
-    width: 30px;
-    height: 30px;
-    border: none;
-    background-color: transparent;
-    color: #aaa;
-    border-radius: 50%;
-    transition: 0.2s;
+    height: 55px;
+    border-radius: 8px !important;
+    border: 3px solid var(--main-color) !important;
+    background: linear-gradient(135deg, #ffd54f, #ffb300) !important;
+    box-shadow: 5px 5px var(--main-color) !important;
+    font-size: 1.2em !important;
+    font-weight: 700 !important;
+    color: var(--font-color) !important;
     cursor: pointer;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    transition: all 0.15s ease;
+    margin-top: 15px;
 }
 
-.head-browser .nav-btn:hover {
-    background-color: #666;
-    color: #fff;
+.go-button:hover {
+    background: linear-gradient(135deg, #ffca28, #ffa000) !important;
 }
 
-.head-browser .nav-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+.go-button:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(4px, 4px);
 }
 
-.head-browser .nav-btn:disabled:hover {
-    background-color: transparent;
-    color: #aaa;
+.output-area {
+    background-color: var(--bg-color) !important;
+    border: 2px solid var(--main-color) !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-family: 'IBM Plex Mono', monospace !important;
+    min-height: 300px !important;
+    padding: 15px !important;
 }
 
-.head-browser .address-bar {
-    background-color: #3b3b3b;
-    border: 2px solid transparent;
-    height: 32px;
-    border-radius: 20px;
-    outline: none;
-    color: #fff;
-    padding: 0 16px;
-    flex: 1;
-    font-size: 13px;
-    transition: 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+.output-area textarea {
+    font-family: 'IBM Plex Mono', monospace !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.example-gallery {
+    margin-top: 15px;
 }
 
-.head-browser .address-bar:hover {
-    background-color: #484848;
+.example-gallery img {
+    border: 2px solid var(--main-color) !important;
+    border-radius: 6px !important;
+    box-shadow: 3px 3px var(--main-color) !important;
+    transition: all 0.15s ease;
 }
 
-.head-browser .address-bar .lock {
-    color: #27ca40;
-    font-size: 12px;
+.example-gallery img:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px var(--main-color) !important;
 }
 
-.head-browser .address-bar .url {
-    color: #ccc;
-    font-size: 13px;
+.md-preview {
+    background-color: var(--bg-color) !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;
 }
 
-.head-browser .star {
-    color: #888;
-    font-size: 18px;
+.tabs-container button {
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    font-weight: 600 !important;
+    border-radius: 6px 6px 0 0 !important;
+    margin-right: 5px;
 }
 
-/* Browser content */
-.browser-content {
-    background: linear-gradient(180deg, #1e1e1e 0%, #252525 100%);
-    padding: 30px;
-    min-height: 500px;
+.tabs-container button.selected {
+    background-color: #ffd54f !important;
+    box-shadow: none !important;
 }
 
-/* Title section */
-.title-section {
+.footer-note {
     text-align: center;
-    margin-bottom: 30px;
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(255,255,255,0.5);
+    border-radius: 8px;
+    border: 2px solid var(--main-color);
+    font-size: 0.9em;
+    color: var(--font-color-sub);
 }
 
-.title-section h1 {
-    font-size: 32px;
-    font-weight: 700;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin: 0;
-    letter-spacing: -0.5px;
+footer {
+    display: none !important;
 }
 
-.title-section .subtitle {
-    color: #888;
-    font-size: 14px;
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
+.gr-box, .gr-form, .gr-panel {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
 
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #27ca40;
-    animation: pulse 2s infinite;
+label {
+    font-weight: 700 !important;
+    font-size: 0.9em !important;
+    color: var(--font-color) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+.copy-btn {
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 2px 2px var(--main-color) !important;
+    border-radius: 4px !important;
 }
 
-/* Main content grid */
-.main-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 25px;
+.copy-btn:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(2px, 2px);
 }
+"""
 
-/* Card styling */
-.card {
-    background: #2a2a2a;
-    border-radius: 16px;
-    padding: 20px;
-    border: 1px solid #3a3a3a;
+with gr.Blocks(css=css, title="GLM-OCR", theme=gr.themes.Soft()) 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>
+            </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>')
+            
+            image_input = gr.Image(
+                type="pil",
+                label="",
+                sources=["upload", "clipboard"],
+                elem_classes=["upload-box"],
+                height=250
+            )
+            
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">🎯 Recognition Type</div>')
+            
+            task = gr.Radio(
+                choices=list(TASK_PROMPTS.keys()),
+                value="Text",
+                label="",
+                elem_classes=["task-buttons"]
+            )
+            
+            btn = gr.Button(
+                "Recognize →",
+                variant="primary",
+                elem_classes=["go-button"]
+            )
+            
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">📁 Examples</div>')
+            
+            examples = gr.Examples(
+                examples=[
+                    "examples/1.jpg",
+                    "examples/2.jpg",
+                    "examples/3.jpg"
+                ],
+                inputs=image_input,
+                label="",
+                elem_classes=["example-gallery"]
+            )
+        
+        with gr.Column(scale=1, elem_classes=["content-card"]):
+            gr.HTML('<div class="section-label">📝 Output</div>')
+            
+            with gr.Tabs(elem_classes=["tabs-container"]):
+                with gr.Tab("Text"):
+                    output_text = gr.Textbox(
+                        label="",
+                        lines=18,
+                        elem_classes=["output-area"],
+                        show_copy_button=True
+                    )
+                
+                with gr.Tab("Markdown"):
+                    output_md = gr.Markdown(
+                        value="",
+                        elem_classes=["md-preview"]
+                    )
+    
+    gr.HTML("""
+        <div class="main-wrapper">
+            <div class="footer-note">
+                🚀 Powered by <strong>zai-org/GLM-OCR</strong> • 
+                Supports text, formula, and table recognition
+            </div>
+        </div>
+    """)
+    
+    def run_ocr(image, task):
+        result = process_image(image, task)
+        return result, result
+    
+    btn.click(
+        run_ocr,
+        [image_input, task],
+        [output_text, output_md]
+    )
+    
+    image_input.change(
+        lambda: ("", ""),
+        None,
+        [output_text, output_md]
+    )
+
+if __name__ == "__main__":
+    demo.queue(max_size=50).launch(
+        show_error=True,
+        ssr_mode=False
+    )import gradio as gr
+import torch
+import spaces
+import os
+import tempfile
+from PIL import Image, ImageOps
+from transformers import AutoProcessor, AutoModelForImageTextToText
+from io import BytesIO
+import base64
+
+MODEL_PATH = "zai-org/GLM-OCR"
+
+# Load model and processor
+processor = AutoProcessor.from_pretrained(MODEL_PATH, trust_remote_code=True)
+model = AutoModelForImageTextToText.from_pretrained(
+    pretrained_model_name_or_path=MODEL_PATH,
+    torch_dtype=torch.bfloat16,
+    device_map="auto",
+    trust_remote_code=True
+)
+
+TASK_PROMPTS = {
+    "Text": "Text Recognition:",
+    "Formula": "Formula Recognition:",
+    "Table": "Table Recognition:",
 }
 
-.card-title {
-    color: #fff;
-    font-size: 14px;
-    font-weight: 600;
-    margin-bottom: 15px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+@spaces.GPU
+def process_image(image, task):
+    if image is None:
+        return "⚠️ Please upload an image first"
+    
+    if image.mode in ('RGBA', 'LA', 'P'):
+        image = image.convert('RGB')
+    image = ImageOps.exif_transpose(image)
+    
+    tmp = tempfile.NamedTemporaryFile(delete=False, suffix='.png')
+    image.save(tmp.name, 'PNG')
+    tmp.close()
+    
+    prompt = TASK_PROMPTS.get(task, "Text Recognition:")
+    
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {"type": "image", "url": tmp.name},
+                {"type": "text", "text": prompt}
+            ],
+        }
+    ]
+    
+    inputs = processor.apply_chat_template(
+        messages,
+        tokenize=True,
+        add_generation_prompt=True,
+        return_dict=True,
+        return_tensors="pt"
+    ).to(model.device)
+    
+    inputs.pop("token_type_ids", None)
+    
+    generated_ids = model.generate(**inputs, max_new_tokens=8192)
+    output_text = processor.decode(
+        generated_ids[0][inputs["input_ids"].shape[1]:], 
+        skip_special_tokens=True
+    )
+    
+    os.unlink(tmp.name)
+    
+    return output_text.strip()
+
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;900&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+:root {
+    --input-focus: #2d8cf0;
+    --font-color: #323232;
+    --font-color-sub: #666;
+    --bg-color: beige;
+    --main-color: black;
+    --accent-bg: lightblue;
 }
 
-/* Upload area */
-.upload-zone {
-    border: 2px dashed #4a4a4a !important;
-    border-radius: 12px !important;
-    background: #222 !important;
-    transition: all 0.3s !important;
-    min-height: 200px !important;
+* {
+    font-family: 'Outfit', Arial, sans-serif !important;
 }
 
-.upload-zone:hover {
-    border-color: #667eea !important;
-    background: #2a2a2a !important;
+.gradio-container {
+    background: linear-gradient(135deg, #e8f5e9, #e3f2fd, #fce4ec) !important;
+    min-height: 100vh;
 }
 
-/* Task buttons */
-.task-buttons {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 20px;
+.main-wrapper {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 30px 20px;
 }
 
-.task-btn {
-    flex: 1;
-    padding: 12px 16px !important;
-    border-radius: 10px !important;
-    border: 2px solid #3a3a3a !important;
-    background: #2a2a2a !important;
-    color: #aaa !important;
-    font-size: 13px !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.2s !important;
+.header-card {
+    background: var(--accent-bg);
+    padding: 25px 30px;
+    border-radius: 8px;
+    border: 3px solid var(--main-color);
+    box-shadow: 6px 6px var(--main-color);
+    margin-bottom: 25px;
+    text-align: center;
 }
 
-.task-btn:hover {
-    border-color: #667eea !important;
-    color: #fff !important;
+.header-title {
+    font-size: 2.5em;
+    font-weight: 900;
+    color: var(--font-color);
+    margin: 0;
+    letter-spacing: -1px;
 }
 
-.task-btn.selected {
-    border-color: #667eea !important;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)) !important;
-    color: #fff !important;
+.header-subtitle {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: var(--font-color-sub);
+    margin-top: 8px;
 }
 
-/* Primary button */
-.primary-btn {
-    width: 100%;
-    padding: 14px 24px !important;
-    border-radius: 12px !important;
-    border: none !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: #fff !important;
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-    transition: all 0.3s !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+.content-card {
+    background: var(--accent-bg);
+    padding: 25px;
+    border-radius: 8px;
+    border: 3px solid var(--main-color);
+    box-shadow: 6px 6px var(--main-color);
 }
 
-.primary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5) !important;
+.section-label {
+    font-weight: 700;
+    font-size: 0.95em;
+    color: var(--font-color);
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.input-field, .input-field textarea, .input-field input {
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-size: 15px !important;
+    font-weight: 500 !important;
+    color: var(--font-color) !important;
 }
 
-.primary-btn:active {
-    transform: translateY(0) !important;
+.input-field textarea:focus, .input-field input:focus {
+    border-color: var(--input-focus) !important;
+    outline: none !important;
 }
 
-/* Output area */
-.output-area {
-    background: #1a1a1a !important;
-    border: 1px solid #333 !important;
-    border-radius: 12px !important;
-    color: #e0e0e0 !important;
-    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
-    font-size: 13px !important;
-    line-height: 1.6 !important;
-    min-height: 300px !important;
+.upload-box {
+    border: 3px dashed var(--main-color) !important;
+    border-radius: 8px !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    min-height: 200px !important;
+    transition: all 0.2s ease;
 }
 
-.output-area textarea {
-    background: transparent !important;
-    color: #e0e0e0 !important;
+.upload-box:hover {
+    background-color: #f5f5dc !important;
 }
 
-/* Tabs */
-.output-tabs .tab-nav {
-    background: #2a2a2a !important;
-    border-radius: 10px !important;
-    padding: 4px !important;
-    margin-bottom: 15px !important;
-    border: 1px solid #3a3a3a !important;
+.dropdown-field {
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
 }
 
-.output-tabs .tab-nav button {
-    background: transparent !important;
-    border: none !important;
-    border-radius: 8px !important;
-    color: #888 !important;
-    padding: 10px 20px !important;
-    font-size: 13px !important;
-    font-weight: 500 !important;
-    transition: all 0.2s !important;
+.task-buttons {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
 }
 
-.output-tabs .tab-nav button.selected {
-    background: #515151 !important;
-    color: #fff !important;
+.task-btn {
+    flex: 1;
+    min-width: 100px;
+    height: 45px;
+    border-radius: 6px !important;
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-size: 15px !important;
+    font-weight: 600 !important;
+    color: var(--font-color) !important;
+    cursor: pointer;
+    transition: all 0.1s ease;
 }
 
-.output-tabs .tab-nav button:hover:not(.selected) {
-    background: #3a3a3a !important;
-    color: #ccc !important;
+.task-btn:hover {
+    background-color: #f5f5dc !important;
 }
 
-/* Footer */
-.footer {
-    text-align: center;
-    padding: 20px;
-    border-top: 1px solid #333;
-    margin-top: 25px;
+.task-btn.selected, .task-btn:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(3px, 3px);
+    background-color: #ffd54f !important;
 }
 
-.footer p {
-    color: #666;
-    font-size: 12px;
-    margin: 0;
+.go-button {
+    width: 100%;
+    height: 55px;
+    border-radius: 8px !important;
+    border: 3px solid var(--main-color) !important;
+    background: linear-gradient(135deg, #ffd54f, #ffb300) !important;
+    box-shadow: 5px 5px var(--main-color) !important;
+    font-size: 1.2em !important;
+    font-weight: 700 !important;
+    color: var(--font-color) !important;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin-top: 15px;
 }
 
-.footer a {
-    color: #667eea;
-    text-decoration: none;
-    transition: 0.2s;
+.go-button:hover {
+    background: linear-gradient(135deg, #ffca28, #ffa000) !important;
 }
 
-.footer a:hover {
-    color: #764ba2;
+.go-button:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(4px, 4px);
 }
 
-/* Dropdown custom style */
-.custom-dropdown {
-    background: #2a2a2a !important;
-    border: 2px solid #3a3a3a !important;
-    border-radius: 10px !important;
-    color: #fff !important;
+.output-area {
+    background-color: var(--bg-color) !important;
+    border: 2px solid var(--main-color) !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px var(--main-color) !important;
+    font-family: 'IBM Plex Mono', monospace !important;
+    min-height: 300px !important;
+    padding: 15px !important;
 }
 
-.custom-dropdown:focus {
-    border-color: #667eea !important;
+.output-area textarea {
+    font-family: 'IBM Plex Mono', monospace !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* Hide default elements */
-footer.svelte-1rjryqp { display: none !important; }
-.built-with { display: none !important; }
+.example-gallery {
+    margin-top: 15px;
+}
 
-/* Label styling */
-.label-wrap {
-    color: #aaa !important;
+.example-gallery img {
+    border: 2px solid var(--main-color) !important;
+    border-radius: 6px !important;
+    box-shadow: 3px 3px var(--main-color) !important;
+    transition: all 0.15s ease;
 }
 
-/* Image component */
-.image-container {
-    border-radius: 12px !important;
-    overflow: hidden !important;
+.example-gallery img:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px var(--main-color) !important;
 }
 
-/* Markdown output */
-.markdown-output {
-    background: #1a1a1a !important;
+.md-preview {
+    background-color: var(--bg-color) !important;
+    border: 2px solid var(--main-color) !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px var(--main-color) !important;
     padding: 20px !important;
-    border-radius: 12px !important;
-    border: 1px solid #333 !important;
-    color: #e0e0e0 !important;
-    min-height: 300px !important;
+    min-height: 300px;
 }
 
-.markdown-output code {
-    background: #2a2a2a !important;
-    padding: 2px 8px !important;
-    border-radius: 4px !important;
-    font-size: 12px !important;
+.tabs-container button {
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    font-weight: 600 !important;
+    border-radius: 6px 6px 0 0 !important;
+    margin-right: 5px;
 }
 
-.markdown-output pre {
-    background: #0d0d0d !important;
-    padding: 15px !important;
-    border-radius: 8px !important;
-    overflow-x: auto !important;
+.tabs-container button.selected {
+    background-color: #ffd54f !important;
+    box-shadow: none !important;
 }
 
-/* Examples */
-.examples-section {
+.footer-note {
+    text-align: center;
     margin-top: 20px;
+    padding: 15px;
+    background: rgba(255,255,255,0.5);
+    border-radius: 8px;
+    border: 2px solid var(--main-color);
+    font-size: 0.9em;
+    color: var(--font-color-sub);
 }
 
-.examples-section .label-wrap {
+footer {
     display: none !important;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-    .main-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .browser-content {
-        padding: 20px;
-    }
-    
-    .title-section h1 {
-        font-size: 24px;
-    }
+.gr-box, .gr-form, .gr-panel {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
-"""
 
-# Browser header HTML
-browser_header = """
-<div class="browser">
-    <div class="tabs-head">
-        <div class="tab-open">
-            <div class="rounded-r"><div class="mask-round"></div></div>
-            <span class="tab-icon">🔍</span>
-            <span>GLM-OCR</span>
-            <div class="close-tab">✕</div>
-            <div class="rounded-l"><div class="mask-round"></div></div>
-        </div>
-        <div class="window-opt">
-            <div class="dot red"></div>
-            <div class="dot yellow"></div>
-            <div class="dot green"></div>
-        </div>
-    </div>
-    <div class="head-browser">
-        <button class="nav-btn">←</button>
-        <button class="nav-btn" disabled>→</button>
-        <div class="address-bar">
-            <span class="lock">🔒</span>
-            <span class="url">huggingface.co/spaces/zai-org/GLM-OCR</span>
-        </div>
-        <button class="nav-btn">↻</button>
-        <span class="star">☆</span>
-    </div>
-</div>
-"""
+label {
+    font-weight: 700 !important;
+    font-size: 0.9em !important;
+    color: var(--font-color) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+}
 
-title_html = """
-<div class="title-section">
-    <h1>GLM-OCR</h1>
-    <p class="subtitle">
-        <span class="status-dot"></span>
-        Document & Formula Recognition
-    </p>
-</div>
-"""
+.copy-btn {
+    border: 2px solid var(--main-color) !important;
+    background-color: var(--bg-color) !important;
+    box-shadow: 2px 2px var(--main-color) !important;
+    border-radius: 4px !important;
+}
 
-footer_html = """
-<div class="footer">
-    <p>
-        Powered by <a href="https://huggingface.co/zai-org/GLM-OCR" target="_blank">zai-org/GLM-OCR</a> 
-        · Text · Formula · Table Recognition
-    </p>
-</div>
+.copy-btn:active {
+    box-shadow: 0px 0px var(--main-color) !important;
+    transform: translate(2px, 2px);
+}
 """
 
-@spaces.GPU
-def process_image(image, task):
-    """Process image with GLM-OCR model"""
-    if image is None:
-        return "⚠️ Please upload an image first.", ""
-    
-    # Convert image if needed
-    if image.mode in ('RGBA', 'LA', 'P'):
-        image = image.convert('RGB')
-    image = ImageOps.exif_transpose(image)
+with gr.Blocks(css=css, title="GLM-OCR", theme=gr.themes.Soft()) as demo:
     
-    # Save image temporarily
-    tmp = tempfile.NamedTemporaryFile(delete=False, suffix='.png')
-    image.save(tmp.name, 'PNG')
-    tmp.close()
+    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>
+            </div>
+        </div>
+    """)
     
-    try:
-        # Prepare messages
-        prompt_text = TASK_PROMPTS[task]
-        messages = [
-            {
-                "role": "user",
-                "content": [
-                    {
-                        "type": "image",
-                        "url": tmp.name
-                    },
-                    {
-                        "type": "text",
-                        "text": prompt_text
-                    }
+    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>')
+            
+            image_input = gr.Image(
+                type="pil",
+                label="",
+                sources=["upload", "clipboard"],
+                elem_classes=["upload-box"],
+                height=250
+            )
+            
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">🎯 Recognition Type</div>')
+            
+            task = gr.Radio(
+                choices=list(TASK_PROMPTS.keys()),
+                value="Text",
+                label="",
+                elem_classes=["task-buttons"]
+            )
+            
+            btn = gr.Button(
+                "Recognize →",
+                variant="primary",
+                elem_classes=["go-button"]
+            )
+            
+            gr.HTML('<div class="section-label" style="margin-top: 20px;">📁 Examples</div>')
+            
+            examples = gr.Examples(
+                examples=[
+                    "examples/1.jpg",
+                    "examples/2.jpg",
+                    "examples/3.jpg"
                 ],
-            }
-        ]
-        
-        # Process input
-        inputs = processor.apply_chat_template(
-            messages,
-            tokenize=True,
-            add_generation_prompt=True,
-            return_dict=True,
-            return_tensors="pt"
-        ).to(model.device)
-        inputs.pop("token_type_ids", None)
-        
-        # Generate output
-        generated_ids = model.generate(**inputs, max_new_tokens=8192)
-        output_text = processor.decode(
-            generated_ids[0][inputs["input_ids"].shape[1]:], 
-            skip_special_tokens=True
-        )
-        
-        # Clean up temp file
-        os.unlink(tmp.name)
-        
-        result = output_text.strip()
-        return result, result
-        
-    except Exception as e:
-        if os.path.exists(tmp.name):
-            os.unlink(tmp.name)
-        error_msg = f"❌ Error: {str(e)}"
-        return error_msg, error_msg
-
-# Build Gradio interface
-with gr.Blocks(title="GLM-OCR") as demo:
-    
-    # Browser-style header
-    gr.HTML(browser_header)
-    
-    # Main content wrapper
-    with gr.Column(elem_classes=["browser-content"]):
+                inputs=image_input,
+                label="",
+                elem_classes=["example-gallery"]
+            )
         
-        # Title
-        gr.HTML(title_html)
-        
-        # Main grid
-        with gr.Row():
-            # Left column - Input
-            with gr.Column(scale=1):
-                gr.HTML('<div class="card-title">📷 Upload Image</div>')
-                
-                image_input = gr.Image(
-                    type="pil",
-                    label="",
-                    sources=["upload", "clipboard"],
-                    elem_classes=["upload-zone"]
-                )
-                
-                gr.HTML('<div class="card-title" style="margin-top: 20px;">🎯 Recognition Task</div>')
-                
-                task = gr.Radio(
-                    choices=list(TASK_PROMPTS.keys()),
-                    value="Text",
-                    label="",
-                    elem_classes=["task-buttons"]
-                )
-                
-                btn = gr.Button(
-                    "🚀 Recognize",
-                    variant="primary",
-                    elem_classes=["primary-btn"]
-                )
-                
-                # Examples section
-                if os.path.exists("examples"):
-                    gr.HTML('<div class="card-title" style="margin-top: 20px;">📂 Examples</div>')
-                    gr.Examples(
-                        examples=[
-                            f"examples/{f}" for f in os.listdir("examples") 
-                            if f.endswith(('.jpg', '.jpeg', '.png', '.webp'))
-                        ][:3] if os.path.exists("examples") else [],
-                        inputs=image_input,
-                        label=""
-                    )
+        with gr.Column(scale=1, elem_classes=["content-card"]):
+            gr.HTML('<div class="section-label">📝 Output</div>')
             
-            # Right column - Output
-            with gr.Column(scale=1):
-                gr.HTML('<div class="card-title">📝 Recognition Result</div>')
+            with gr.Tabs(elem_classes=["tabs-container"]):
+                with gr.Tab("Text"):
+                    output_text = gr.Textbox(
+                        label="",
+                        lines=18,
+                        elem_classes=["output-area"],
+                        show_copy_button=True
+                    )
                 
-                with gr.Tabs(elem_classes=["output-tabs"]):
-                    with gr.Tab("Plain Text"):
-                        text_output = gr.Textbox(
-                            lines=15,
-                            show_label=False,
-                            elem_classes=["output-area"],
-                            placeholder="Recognition results will appear here..."
-                        )
-                    
-                    with gr.Tab("Markdown"):
-                        md_output = gr.Markdown(
-                            value="",
-                            elem_classes=["markdown-output"]
-                        )
-        
-        # Footer
-        gr.HTML(footer_html)
+                with gr.Tab("Markdown"):
+                    output_md = gr.Markdown(
+                        value="",
+                        elem_classes=["md-preview"]
+                    )
+    
+    gr.HTML("""
+        <div class="main-wrapper">
+            <div class="footer-note">
+                🚀 Powered by <strong>zai-org/GLM-OCR</strong> • 
+                Supports text, formula, and table recognition
+            </div>
+        </div>
+    """)
+    
+    def run_ocr(image, task):
+        result = process_image(image, task)
+        return result, result
     
-    # Event handlers
     btn.click(
-        process_image,
-        inputs=[image_input, task],
-        outputs=[text_output, md_output]
+        run_ocr,
+        [image_input, task],
+        [output_text, output_md]
     )
     
-    # Also trigger on image upload with enter key
     image_input.change(
-        lambda: None,
-        inputs=[],
-        outputs=[]
+        lambda: ("", ""),
+        None,
+        [output_text, output_md]
     )
 
 if __name__ == "__main__":
     demo.queue(max_size=50).launch(
-        css=css,
         show_error=True,
-        share=False
+        ssr_mode=False
     )