Update app.py

app.py

@@ -326,432 +326,6 @@ label {
 }
 """
 
-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:",
-}
-
-@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;
-}
-
-* {
-    font-family: 'Outfit', Arial, sans-serif !important;
-}
-
-.gradio-container {
-    background: linear-gradient(135deg, #e8f5e9, #e3f2fd, #fce4ec) !important;
-    min-height: 100vh;
-}
-
-.main-wrapper {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 30px 20px;
-}
-
-.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-title {
-    font-size: 2.5em;
-    font-weight: 900;
-    color: var(--font-color);
-    margin: 0;
-    letter-spacing: -1px;
-}
-
-.header-subtitle {
-    font-size: 1.1em;
-    font-weight: 600;
-    color: var(--font-color-sub);
-    margin-top: 8px;
-}
-
-.content-card {
-    background: var(--accent-bg);
-    padding: 25px;
-    border-radius: 8px;
-    border: 3px solid var(--main-color);
-    box-shadow: 6px 6px var(--main-color);
-}
-
-.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;
-}
-
-.input-field textarea:focus, .input-field input:focus {
-    border-color: var(--input-focus) !important;
-    outline: none !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;
-}
-
-.upload-box:hover {
-    background-color: #f5f5dc !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;
-}
-
-.task-buttons {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.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 {
-    background-color: #f5f5dc !important;
-}
-
-.task-btn.selected, .task-btn:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(3px, 3px);
-    background-color: #ffd54f !important;
-}
-
-.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;
-}
-
-.go-button:hover {
-    background: linear-gradient(135deg, #ffca28, #ffa000) !important;
-}
-
-.go-button:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(4px, 4px);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.example-gallery img:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: 5px 5px var(--main-color) !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;
-    min-height: 300px;
-}
-
-.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;
-}
-
-.tabs-container button.selected {
-    background-color: #ffd54f !important;
-    box-shadow: none !important;
-}
-
-.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);
-}
-
-footer {
-    display: none !important;
-}
-
-.gr-box, .gr-form, .gr-panel {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-}
-
-label {
-    font-weight: 700 !important;
-    font-size: 0.9em !important;
-    color: var(--font-color) !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-btn:active {
-    box-shadow: 0px 0px var(--main-color) !important;
-    transform: translate(2px, 2px);
-}
-"""
-
 with gr.Blocks(title="GLM-OCR", theme=gr.themes.Soft()) as demo:
     
     gr.HTML("""