Update app.py

app.py

@@ -71,354 +71,466 @@ def process_image(image, task):
     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');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
 
 :root {
-    --input-focus: #2d8cf0;
-    --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;
-    }
+    --bg-main: #ffd6e7;
+    --bg-card: #ff66a3;
+    --bg-header: #ffffff;
+    --bg-result: #ffffff;
+    --bg-dropdown-active: #ff66a3;
+    --bg-advanced: rgba(255, 255, 255, 0.3);
+    --bg-uploader: rgba(255, 255, 255, 0.4);
+    --bg-button-primary: #4ade80;
+    --bg-button-primary-hover: #1ac2ff;
+    --bg-button-secondary: #fde047;
+    --bg-button-secondary-hover: #f97316;
+    --color-border: #000000;
+    --color-text: #000000;
+    --color-text-button: #000000;
+    --color-text-muted: #444444;
 }
 
 .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;
+    --bg-main: #2c132c;
+    --bg-card: #592659;
+    --bg-header: #1a1a1a;
+    --bg-result: #2a2a2a;
+    --bg-dropdown-active: #7f397f;
+    --bg-advanced: rgba(0, 0, 0, 0.3);
+    --bg-uploader: rgba(0, 0, 0, 0.4);
+    --bg-button-primary: #22c55e;
+    --bg-button-primary-hover: #0ea5e9;
+    --bg-button-secondary: #eab308;
+    --bg-button-secondary-hover: #ea580c;
+    --color-border: #e0e0e0;
+    --color-text: #f0f0f0;
+    --color-text-button: #000000;
+    --color-text-muted: #b0b0b0;
 }
 
 * {
-    font-family: 'Outfit', Arial, sans-serif !important;
+    font-family: 'Montserrat', sans-serif !important;
 }
 
-.gradio-container {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end)) !important;
+body, .gradio-container {
+    background: var(--bg-main) !important;
     min-height: 100vh;
+    margin: 0;
+    padding: 0;
 }
 
-.main-wrapper {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 30px 20px;
+.gradio-container {
+    max-width: 100% !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;
+/* Header Styles */
+.app-header {
+    background: var(--bg-header);
+    padding: 1.5rem 2rem;
+    border-bottom: 3px solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
 }
 
 .header-title {
-    font-size: 2.5em;
+    font-size: 2.2rem;
     font-weight: 900;
-    color: var(--font-color);
+    color: var(--color-text);
     margin: 0;
     letter-spacing: -1px;
 }
 
 .header-subtitle {
-    font-size: 1.1em;
+    font-size: 0.95rem;
     font-weight: 600;
-    color: var(--font-color-sub);
-    margin-top: 8px;
+    color: var(--color-text-muted);
+    margin-top: 0.25rem;
 }
 
-.content-card {
-    background: var(--accent-bg);
-    padding: 25px;
-    border-radius: 8px;
-    border: 3px solid var(--main-color);
-    box-shadow: 6px 6px var(--main-color);
+/* Card Styles */
+.card-container {
+    translate: -6px -6px;
+    background: var(--bg-card);
+    border: 3px solid var(--color-border);
+    box-shadow: 12px 12px 0 var(--color-border);
+    transition: all 0.2s ease;
+    margin-bottom: 1rem;
 }
 
-.section-label {
-    font-weight: 700;
-    font-size: 0.95em;
-    color: var(--font-color);
-    margin-bottom: 10px;
+.card-container:hover {
+    translate: -3px -3px;
+    box-shadow: 9px 9px 0 var(--color-border);
+}
+
+.card-head {
+    font-size: 14px;
+    font-weight: 900;
+    width: 100%;
+    background: var(--bg-header);
+    padding: 10px 14px;
+    color: var(--color-text);
+    border-bottom: 3px solid var(--color-border);
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 1px;
 }
 
-.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;
+.card-content {
+    padding: 1.5rem;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
 }
 
-.input-field textarea:focus, .input-field input:focus {
-    border-color: var(--input-focus) !important;
-    outline: none !important;
+/* Section Labels */
+.section-label {
+    font-weight: 900;
+    font-size: 13px;
+    color: var(--color-text);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
+/* Upload Box */
 .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;
+    border: 3px dashed var(--color-border) !important;
+    background: var(--bg-uploader) !important;
+    min-height: 220px !important;
     transition: all 0.2s ease;
+    cursor: pointer;
 }
 
 .upload-box:hover {
-    opacity: 0.9;
+    background: rgba(255, 255, 255, 0.5) !important;
 }
 
-.upload-box span, .upload-box p, .upload-box label {
-    color: var(--font-color) !important;
+.dark .upload-box:hover {
+    background: rgba(0, 0, 0, 0.5) !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;
+.upload-box span, .upload-box p, .upload-box label, .upload-box svg {
+    color: var(--color-text) !important;
 }
 
-.task-buttons {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.task-buttons label {
-    color: var(--font-color) !important;
+/* Task Buttons */
+.task-radio {
+    background: var(--bg-uploader);
+    border: 3px solid var(--color-border);
+    padding: 0.75rem;
 }
 
-.task-buttons input[type="radio"] + label {
-    color: var(--font-color) !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;
-}
-
-.task-btn:hover {
-    opacity: 0.9;
+.task-radio label {
+    font-weight: 700 !important;
+    color: var(--color-text) !important;
 }
 
-.task-btn.selected, .task-btn:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(3px, 3px);
-    background-color: var(--button-gradient-start) !important;
+.task-radio input[type="radio"]:checked + label {
+    background: var(--bg-button-secondary) !important;
+    color: var(--color-text-button) !important;
 }
 
+/* Primary Button */
 .go-button {
     width: 100%;
     height: 55px;
-    border-radius: 8px !important;
-    border: 3px solid var(--main-color) !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: #1a1a1a !important;
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-button-primary) !important;
+    box-shadow: 6px 6px 0 var(--color-border) !important;
+    font-size: 1rem !important;
+    font-weight: 900 !important;
+    color: var(--color-text-button) !important;
     cursor: pointer;
     transition: all 0.15s ease;
-    margin-top: 15px;
+    border-radius: 0 !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
 .go-button:hover {
-    opacity: 0.9;
+    background: var(--bg-button-primary-hover) !important;
+    translate: 2px 2px;
+    box-shadow: 4px 4px 0 var(--color-border) !important;
 }
 
 .go-button:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(4px, 4px);
+    translate: 4px 4px;
+    box-shadow: 2px 2px 0 var(--color-border) !important;
 }
 
+/* Output Area */
 .output-area {
-    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;
+    background: var(--bg-result) !important;
+    border: 3px solid var(--color-border) !important;
+    box-shadow: 6px 6px 0 var(--color-border) !important;
     font-family: 'IBM Plex Mono', monospace !important;
-    min-height: 300px !important;
-    padding: 15px !important;
+    min-height: 350px !important;
+    padding: 1rem !important;
+    border-radius: 0 !important;
 }
 
 .output-area textarea {
     font-family: 'IBM Plex Mono', monospace !important;
-    background-color: transparent !important;
+    background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    color: var(--font-color) !important;
-}
-
-.example-gallery {
-    margin-top: 15px;
+    color: var(--color-text) !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    line-height: 1.6 !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;
+/* Markdown Preview */
+.md-preview {
+    background: var(--bg-result) !important;
+    border: 3px solid var(--color-border) !important;
+    box-shadow: 6px 6px 0 var(--color-border) !important;
+    padding: 1.5rem !important;
+    min-height: 350px;
+    border-radius: 0 !important;
 }
 
-.example-gallery img:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: 5px 5px var(--main-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, .md-preview td,
+.md-preview th, .md-preview table {
+    color: var(--color-text) !important;
 }
 
-.md-preview {
-    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 code {
+    background: var(--bg-advanced) !important;
+    padding: 2px 6px;
+    font-family: 'IBM Plex Mono', monospace !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 */
+.tabs-container {
+    margin-top: 0.5rem;
 }
 
 .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;
-    color: var(--font-color) !important;
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-uploader) !important;
+    font-weight: 700 !important;
+    border-radius: 0 !important;
+    margin-right: 0 !important;
+    padding: 10px 20px !important;
+    color: var(--color-text) !important;
+    box-shadow: 4px 4px 0 var(--color-border) !important;
+    transition: all 0.15s ease;
 }
 
-.tabs-container button.selected {
-    background-color: var(--button-gradient-start) !important;
-    box-shadow: none !important;
-    color: #1a1a1a !important;
+.tabs-container button:hover {
+    background: var(--bg-button-secondary) !important;
+    color: var(--color-text-button) !important;
 }
 
-.footer-note {
+.tabs-container button.selected {
+    background: var(--bg-button-secondary) !important;
+    color: var(--color-text-button) !important;
+    translate: 2px 2px;
+    box-shadow: 2px 2px 0 var(--color-border) !important;
+}
+
+/* Footer */
+.footer-card {
+    background: var(--bg-header);
+    border: 3px solid var(--color-border);
+    box-shadow: 6px 6px 0 var(--color-border);
+    padding: 1rem 1.5rem;
     text-align: center;
-    margin-top: 20px;
-    padding: 15px;
-    background: var(--card-bg);
-    border-radius: 8px;
-    border: 2px solid var(--main-color);
-    font-size: 0.9em;
-    color: var(--font-color-sub);
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    font-weight: 600;
+    margin-top: 1.5rem;
 }
 
-.footer-note strong {
-    color: var(--font-color);
+.footer-card strong {
+    color: var(--color-text);
+    font-weight: 900;
 }
 
+/* Hide default footer */
 footer {
     display: none !important;
 }
 
+/* Form elements reset */
 .gr-box, .gr-form, .gr-panel {
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
+    border-radius: 0 !important;
 }
 
 label {
-    font-weight: 700 !important;
-    font-size: 0.9em !important;
-    color: var(--font-color) !important;
+    font-weight: 900 !important;
+    font-size: 13px !important;
+    color: var(--color-text) !important;
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
 }
 
-.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;
+/* Copy button */
+button[title="Copy"] {
+    border: 2px solid var(--color-border) !important;
+    background: var(--bg-button-secondary) !important;
+    box-shadow: 3px 3px 0 var(--color-border) !important;
+    border-radius: 0 !important;
+    transition: all 0.15s ease;
+}
+
+button[title="Copy"]:hover {
+    translate: 1px 1px;
+    box-shadow: 2px 2px 0 var(--color-border) !important;
+}
+
+button[title="Copy"]:active {
+    translate: 2px 2px;
+    box-shadow: 1px 1px 0 var(--color-border) !important;
+}
+
+/* Radio buttons styling */
+.gr-radio, .gr-checkbox {
+    accent-color: var(--bg-button-primary);
+}
+
+/* Dropdown and select */
+select, .gr-dropdown {
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-result) !important;
+    color: var(--color-text) !important;
+    font-weight: 600 !important;
+    border-radius: 0 !important;
+    padding: 8px 12px !important;
+}
+
+/* Input fields */
+input[type="text"], input[type="password"], textarea {
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-result) !important;
+    color: var(--color-text) !important;
+    font-weight: 600 !important;
+    border-radius: 0 !important;
+}
+
+/* Examples section */
+.examples-section {
+    margin-top: 1rem;
+}
+
+.examples-section img {
+    border: 3px solid var(--color-border) !important;
+    box-shadow: 4px 4px 0 var(--color-border) !important;
+    transition: all 0.15s ease;
+}
+
+.examples-section img:hover {
+    translate: -2px -2px;
+    box-shadow: 6px 6px 0 var(--color-border) !important;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.card-container {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-uploader);
+    border: 2px solid var(--color-border);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bg-button-secondary);
+    border: 2px solid var(--color-border);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--bg-button-secondary-hover);
 }
 
-.copy-btn:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(2px, 2px);
+/* Loading state */
+.generating {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .header-title {
+        font-size: 1.6rem;
+    }
+    
+    .header-subtitle {
+        font-size: 0.85rem;
+    }
+    
+    .card-container {
+        translate: -4px -4px;
+        box-shadow: 8px 8px 0 var(--color-border);
+    }
+    
+    .go-button {
+        height: 50px;
+        font-size: 0.9rem !important;
+    }
 }
 
-span, p, div, input, textarea, button, a {
-    color: var(--font-color);
+/* Main content wrapper */
+.main-content {
+    padding: 0 2rem 2rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.gr-input, .gr-text-input, .gr-textarea {
-    color: var(--font-color) !important;
-    background-color: var(--bg-color) !important;
+/* Row styling */
+.main-row {
+    gap: 2rem;
 }
 
-.gr-radio label span {
-    color: var(--font-color) !important;
+/* Column styling */
+.input-column, .output-column {
+    min-width: 0;
 }
 """
 
 with gr.Blocks(title="GLM-OCR") as demo:
     
+    # Header
     gr.HTML("""
-        <div class="main-wrapper">
-            <div class="header-card">
+        <div class="app-header">
+            <div>
                 <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>')
+    # Main Content
+    with gr.Row(elem_classes=["main-content", "main-row"]):
+        
+        # Input Column
+        with gr.Column(scale=1, elem_classes=["input-column"]):
+            gr.HTML('<div class="card-container"><div class="card-head">Input</div><div class="card-content">')
             
+            gr.HTML('<div class="section-label">Upload Image</div>')
             image_input = gr.Image(
                 type="pil",
                 label="",
@@ -427,13 +539,12 @@ 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: 1.25rem;">Recognition Type</div>')
             task = gr.Radio(
                 choices=list(TASK_PROMPTS.keys()),
                 value="Text",
                 label="",
-                elem_classes=["task-buttons"]
+                elem_classes=["task-radio"]
             )
             
             btn = gr.Button(
@@ -442,8 +553,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
                 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: 1.25rem;">Examples</div>')
             examples = gr.Examples(
                 examples=[
                     "examples/1.jpg",
@@ -453,9 +563,12 @@ with gr.Blocks(title="GLM-OCR") as demo:
                 inputs=image_input,
                 label=""
             )
+            
+            gr.HTML('</div></div>')
         
-        with gr.Column(scale=1, elem_classes=["content-card"]):
-            gr.HTML('<div class="section-label">Output</div>')
+        # Output Column
+        with gr.Column(scale=1, elem_classes=["output-column"]):
+            gr.HTML('<div class="card-container"><div class="card-head">Result</div><div class="card-content">')
             
             with gr.Tabs(elem_classes=["tabs-container"]):
                 with gr.Tab("Text"):
@@ -463,7 +576,7 @@ with gr.Blocks(title="GLM-OCR") as demo:
                         label="",
                         lines=18,
                         elem_classes=["output-area"],
-                        #show_copy_button=True
+                       # show_copy_button=True
                     )
                 
                 with gr.Tab("Markdown"):
@@ -471,16 +584,19 @@ with gr.Blocks(title="GLM-OCR") as demo:
                         value="",
                         elem_classes=["md-preview"]
                     )
+            
+            gr.HTML('</div></div>')
     
+    # Footer
     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 class="main-content">
+            <div class="footer-card">
+                Powered by <strong>zai-org/GLM-OCR</strong> | Supports text, formula, and table recognition
             </div>
         </div>
     """)
     
+    # Event handlers
     def run_ocr(image, task):
         result = process_image(image, task)
         return result, result