Update app.py

app.py

@@ -5,12 +5,9 @@ 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,
@@ -78,16 +75,12 @@ css = """
     --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-uploader: rgba(255, 255, 255, 0.5);
     --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;
 }
 
@@ -96,42 +89,50 @@ css = """
     --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: 'Montserrat', sans-serif !important;
+    box-sizing: border-box;
 }
 
 body, .gradio-container {
     background: var(--bg-main) !important;
     min-height: 100vh;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .gradio-container {
     max-width: 100% !important;
 }
 
-/* Header Styles */
-.app-header {
+/* Remove all default Gradio styling */
+.gr-group, .gr-box, .gr-form, .gr-panel, .gr-block, .contain {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    gap: 0 !important;
+}
+
+.gr-padded {
+    padding: 0 !important;
+}
+
+/* Header */
+.header-wrapper {
     background: var(--bg-header);
-    padding: 1.5rem 2rem;
     border-bottom: 3px solid var(--color-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    padding: 1.5rem 3rem;
     margin-bottom: 2rem;
 }
 
@@ -139,203 +140,297 @@ body, .gradio-container {
     font-size: 2.2rem;
     font-weight: 900;
     color: var(--color-text);
-    margin: 0;
-    letter-spacing: -1px;
+    margin: 0 0 0.25rem 0;
 }
 
 .header-subtitle {
     font-size: 0.95rem;
     font-weight: 600;
     color: var(--color-text-muted);
-    margin-top: 0.25rem;
+    margin: 0;
 }
 
-/* Card Styles */
-.card-container {
-    translate: -6px -6px;
+/* Main Layout */
+.main-wrapper {
+    padding: 0 3rem 3rem 3rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Cards */
+.card {
     background: var(--bg-card);
     border: 3px solid var(--color-border);
-    box-shadow: 12px 12px 0 var(--color-border);
+    box-shadow: 10px 10px 0 var(--color-border);
     transition: all 0.2s ease;
-    margin-bottom: 1rem;
+    overflow: hidden;
 }
 
-.card-container:hover {
-    translate: -3px -3px;
-    box-shadow: 9px 9px 0 var(--color-border);
+.card:hover {
+    transform: translate(2px, 2px);
+    box-shadow: 8px 8px 0 var(--color-border);
 }
 
 .card-head {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 900;
-    width: 100%;
     background: var(--bg-header);
-    padding: 10px 14px;
+    padding: 12px 16px;
     color: var(--color-text);
     border-bottom: 3px solid var(--color-border);
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 1.5px;
 }
 
-.card-content {
+.card-body {
     padding: 1.5rem;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text);
 }
 
 /* Section Labels */
 .section-label {
     font-weight: 900;
-    font-size: 13px;
+    font-size: 12px;
     color: var(--color-text);
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 1px;
 }
 
-/* Upload Box */
-.upload-box {
+/* Image Upload */
+.image-upload-container {
     border: 3px dashed var(--color-border) !important;
     background: var(--bg-uploader) !important;
-    min-height: 220px !important;
-    transition: all 0.2s ease;
-    cursor: pointer;
+    min-height: 200px !important;
+    border-radius: 0 !important;
+    overflow: hidden;
 }
 
-.upload-box:hover {
-    background: rgba(255, 255, 255, 0.5) !important;
+.image-upload-container:hover {
+    background: rgba(255, 255, 255, 0.6) !important;
 }
 
-.dark .upload-box:hover {
+.dark .image-upload-container:hover {
     background: rgba(0, 0, 0, 0.5) !important;
 }
 
-.upload-box span, .upload-box p, .upload-box label, .upload-box svg {
+.image-upload-container * {
     color: var(--color-text) !important;
 }
 
-/* Task Buttons */
-.task-radio {
-    background: var(--bg-uploader);
-    border: 3px solid var(--color-border);
-    padding: 0.75rem;
+.image-upload-container img {
+    border-radius: 0 !important;
 }
 
-.task-radio label {
+/* Hide image upload extras */
+.image-upload-container .upload-container,
+.image-upload-container [data-testid="image"] {
+    border: none !important;
+    background: transparent !important;
+}
+
+/* Radio Buttons */
+.radio-container {
+    display: flex;
+    gap: 0;
+}
+
+.radio-container label {
+    flex: 1;
+    padding: 12px 16px !important;
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-uploader) !important;
     font-weight: 700 !important;
+    font-size: 13px !important;
     color: var(--color-text) !important;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin: 0 !important;
+    border-radius: 0 !important;
+}
+
+.radio-container label:not(:last-child) {
+    border-right: none !important;
+}
+
+.radio-container input[type="radio"] {
+    display: none !important;
 }
 
-.task-radio input[type="radio"]:checked + label {
+.radio-container input[type="radio"]:checked + label,
+.radio-container label.selected {
     background: var(--bg-button-secondary) !important;
-    color: var(--color-text-button) !important;
+    color: #000 !important;
+}
+
+/* Hide default radio styling */
+.gr-radio {
+    border: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+}
+
+.gr-radio > div {
+    display: flex !important;
+    gap: 0 !important;
+}
+
+.gr-radio label {
+    flex: 1;
+    padding: 12px 16px !important;
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-uploader) !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+    color: var(--color-text) !important;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin: 0 !important;
+    border-radius: 0 !important;
+}
+
+.gr-radio label:not(:last-child) {
+    border-right: none !important;
+}
+
+.gr-radio label.selected {
+    background: var(--bg-button-secondary) !important;
+    color: #000 !important;
+}
+
+.gr-radio input[type="radio"] {
+    display: none !important;
+}
+
+.gr-radio span.text-lg {
+    display: none !important;
 }
 
 /* Primary Button */
-.go-button {
+.primary-btn {
     width: 100%;
-    height: 55px;
+    height: 52px;
     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-size: 14px !important;
     font-weight: 900 !important;
-    color: var(--color-text-button) !important;
+    color: #000 !important;
     cursor: pointer;
     transition: all 0.15s ease;
     border-radius: 0 !important;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 1.5px;
+    margin-top: 1.25rem;
 }
 
-.go-button:hover {
+.primary-btn:hover {
     background: var(--bg-button-primary-hover) !important;
-    translate: 2px 2px;
+    transform: translate(2px, 2px);
+    box-shadow: 4px 4px 0 var(--color-border) !important;
+}
+
+.primary-btn:active {
+    transform: translate(4px, 4px);
+    box-shadow: 2px 2px 0 var(--color-border) !important;
+}
+
+/* Tabs */
+.tabs-wrapper button {
+    border: 3px solid var(--color-border) !important;
+    background: var(--bg-uploader) !important;
+    font-weight: 700 !important;
+    font-size: 12px !important;
+    border-radius: 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;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-right: 8px !important;
 }
 
-.go-button:active {
-    translate: 4px 4px;
+.tabs-wrapper button:hover {
+    background: var(--bg-button-secondary) !important;
+    color: #000 !important;
+    transform: translate(1px, 1px);
+    box-shadow: 3px 3px 0 var(--color-border) !important;
+}
+
+.tabs-wrapper button.selected {
+    background: var(--bg-button-secondary) !important;
+    color: #000 !important;
+    transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 var(--color-border) !important;
 }
 
-/* Output Area */
-.output-area {
+/* Tab content panel */
+.tabitem {
+    border: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin-top: 1rem !important;
+}
+
+/* Output Textbox */
+.output-textbox {
     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: 350px !important;
-    padding: 1rem !important;
     border-radius: 0 !important;
+    overflow: hidden;
 }
 
-.output-area textarea {
+.output-textbox textarea {
     font-family: 'IBM Plex Mono', monospace !important;
-    background: transparent !important;
+    background: var(--bg-result) !important;
     border: none !important;
     box-shadow: none !important;
     color: var(--color-text) !important;
     font-weight: 500 !important;
     font-size: 14px !important;
-    line-height: 1.6 !important;
+    line-height: 1.7 !important;
+    padding: 1rem !important;
+    min-height: 380px !important;
 }
 
-/* Markdown Preview */
-.md-preview {
+.output-textbox .scroll-hide {
+    background: var(--bg-result) !important;
+}
+
+/* Markdown Output */
+.md-output {
     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;
+    padding: 1.25rem !important;
+    min-height: 380px;
     border-radius: 0 !important;
+    color: var(--color-text) !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 {
+.md-output * {
     color: var(--color-text) !important;
 }
 
-.md-preview code {
-    background: var(--bg-advanced) !important;
-    padding: 2px 6px;
+.md-output code {
+    background: var(--bg-uploader) !important;
+    padding: 3px 8px;
     font-family: 'IBM Plex Mono', monospace !important;
+    border: 1px solid var(--color-border);
 }
 
-/* Tabs */
-.tabs-container {
-    margin-top: 0.5rem;
-}
-
-.tabs-container button {
-    border: 3px solid var(--color-border) !important;
+.md-output pre {
     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:hover {
-    background: var(--bg-button-secondary) !important;
-    color: var(--color-text-button) !important;
-}
-
-.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;
+    padding: 1rem;
+    border: 2px solid var(--color-border);
+    overflow-x: auto;
 }
 
 /* Footer */
-.footer-card {
+.footer-wrapper {
     background: var(--bg-header);
     border: 3px solid var(--color-border);
     box-shadow: 6px 6px 0 var(--color-border);
@@ -344,108 +439,110 @@ body, .gradio-container {
     font-size: 0.9rem;
     color: var(--color-text-muted);
     font-weight: 600;
-    margin-top: 1.5rem;
+    margin-top: 2rem;
 }
 
-.footer-card strong {
+.footer-wrapper strong {
     color: var(--color-text);
     font-weight: 900;
 }
 
-/* Hide default footer */
-footer {
-    display: none !important;
+/* Examples */
+.examples-wrapper {
+    margin-top: 1.25rem;
 }
 
-/* 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: 900 !important;
-    font-size: 13px !important;
-    color: var(--color-text) !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
+.examples-wrapper .gallery {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
 }
 
-/* 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;
+.examples-wrapper img {
+    border: 3px solid var(--color-border) !important;
+    box-shadow: 4px 4px 0 var(--color-border) !important;
     border-radius: 0 !important;
     transition: all 0.15s ease;
+    width: 80px !important;
+    height: 80px !important;
+    object-fit: cover;
 }
 
-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;
+.examples-wrapper img:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 6px 6px 0 var(--color-border) !important;
 }
 
-/* Radio buttons styling */
-.gr-radio, .gr-checkbox {
-    accent-color: var(--bg-button-primary);
+/* Hide Gradio footer and extra elements */
+footer, .footer {
+    display: none !important;
 }
 
-/* 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;
+/* Hide labels */
+.gr-block.gr-box > label,
+.block > label:first-child,
+label.float {
+    display: none !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;
+/* 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;
+    padding: 6px !important;
+    transition: all 0.15s ease;
 }
 
-/* Examples section */
-.examples-section {
-    margin-top: 1rem;
+button[title="Copy"]:hover {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--color-border) !important;
 }
 
-.examples-section img {
-    border: 3px solid var(--color-border) !important;
-    box-shadow: 4px 4px 0 var(--color-border) !important;
-    transition: all 0.15s ease;
+/* Remove container padding */
+.contain > .gap {
+    gap: 0 !important;
 }
 
-.examples-section img:hover {
-    translate: -2px -2px;
-    box-shadow: 6px 6px 0 var(--color-border) !important;
+/* Row gap */
+.main-row {
+    gap: 2.5rem !important;
 }
 
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+.main-row > .gr-column {
+    min-width: 0;
 }
 
-.card-container {
-    animation: fadeIn 0.3s ease-out;
+/* Responsive */
+@media (max-width: 768px) {
+    .header-wrapper, .main-wrapper {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+    }
+    
+    .header-title {
+        font-size: 1.6rem;
+    }
+    
+    .card {
+        box-shadow: 6px 6px 0 var(--color-border);
+    }
+    
+    .main-row {
+        gap: 1.5rem !important;
+    }
+    
+    .gr-radio label {
+        padding: 10px 12px !important;
+        font-size: 12px !important;
+    }
 }
 
-/* Scrollbar styling */
+/* Scrollbar */
 ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -458,56 +555,39 @@ input[type="text"], input[type="password"], textarea {
     border: 2px solid var(--color-border);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: var(--bg-button-secondary-hover);
+/* Animation */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-/* Loading state */
-.generating {
-    animation: pulse 1.5s infinite;
+.card {
+    animation: fadeIn 0.25s ease-out;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
+/* Fix spacing issues */
+.block {
+    padding: 0 !important;
 }
 
-/* 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;
-    }
+.wrap {
+    gap: 0 !important;
 }
 
-/* Main content wrapper */
-.main-content {
-    padding: 0 2rem 2rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
+.gr-compact {
+    gap: 0 !important;
 }
 
-/* Row styling */
-.main-row {
-    gap: 2rem;
+div[data-testid="block-label"] {
+    display: none !important;
 }
 
-/* Column styling */
-.input-column, .output-column {
-    min-width: 0;
+.label-wrap {
+    display: none !important;
+}
+
+.gr-input-label {
+    display: none !important;
 }
 """
 
@@ -515,87 +595,87 @@ with gr.Blocks(title="GLM-OCR") as demo:
     
     # Header
     gr.HTML("""
-        <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 class="header-wrapper">
+            <h1 class="header-title">GLM-OCR</h1>
+            <p class="header-subtitle">Document parsing and text recognition powered by AI</p>
         </div>
     """)
     
     # Main Content
-    with gr.Row(elem_classes=["main-content", "main-row"]):
+    gr.HTML('<div class="main-wrapper">')
+    
+    with gr.Row(elem_classes=["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">')
+        with gr.Column(scale=1):
+            gr.HTML('<div class="card"><div class="card-head">Input</div><div class="card-body">')
             
             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
+                elem_classes=["image-upload-container"],
+                height=220,
+                show_label=False
             )
             
-            gr.HTML('<div class="section-label" style="margin-top: 1.25rem;">Recognition Type</div>')
+            gr.HTML('<div class="section-label" style="margin-top: 1.5rem;">Recognition Type</div>')
             task = gr.Radio(
                 choices=list(TASK_PROMPTS.keys()),
                 value="Text",
                 label="",
-                elem_classes=["task-radio"]
+                show_label=False
             )
             
             btn = gr.Button(
                 "Recognize",
                 variant="primary",
-                elem_classes=["go-button"]
+                elem_classes=["primary-btn"]
             )
             
-            gr.HTML('<div class="section-label" style="margin-top: 1.25rem;">Examples</div>')
+            gr.HTML('<div class="section-label" style="margin-top: 1.5rem;">Examples</div>')
+            gr.HTML('<div class="examples-wrapper">')
             examples = gr.Examples(
-                examples=[
-                    "examples/1.jpg",
-                    "examples/2.jpg",
-                    "examples/3.jpg"
-                ],
+                examples=["examples/1.jpg", "examples/2.jpg", "examples/3.jpg"],
                 inputs=image_input,
                 label=""
             )
+            gr.HTML('</div>')
             
             gr.HTML('</div></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.Column(scale=1):
+            gr.HTML('<div class="card"><div class="card-head">Result</div><div class="card-body">')
             
-            with gr.Tabs(elem_classes=["tabs-container"]):
+            with gr.Tabs(elem_classes=["tabs-wrapper"]):
                 with gr.Tab("Text"):
                     output_text = gr.Textbox(
                         label="",
-                        lines=18,
-                        elem_classes=["output-area"],
+                        lines=16,
+                        elem_classes=["output-textbox"],
+                        show_label=False,
                        # show_copy_button=True
                     )
                 
                 with gr.Tab("Markdown"):
                     output_md = gr.Markdown(
                         value="",
-                        elem_classes=["md-preview"]
+                        elem_classes=["md-output"]
                     )
             
             gr.HTML('</div></div>')
     
     # Footer
     gr.HTML("""
-        <div class="main-content">
-            <div class="footer-card">
-                Powered by <strong>zai-org/GLM-OCR</strong> | Supports text, formula, and table recognition
-            </div>
+        <div class="footer-wrapper">
+            Powered by <strong>zai-org/GLM-OCR</strong> | Supports text, formula, and table recognition
         </div>
     """)
     
+    gr.HTML('</div>')
+    
     # Event handlers
     def run_ocr(image, task):
         result = process_image(image, task)