Spaces:
Running
Running
| import gradio as gr | |
| import time | |
| import json | |
| # Mock OCR Function to simulate the backend logic | |
| def process_document(file): | |
| if file is None: | |
| return None, None | |
| # Simulate processing time (Scanner effect) | |
| time.sleep(2.5) | |
| # Mock extracted data | |
| mock_data = { | |
| "document_type": "Invoice", | |
| "invoice_number": "INV-2023-0045", | |
| "date": "2023-10-15", | |
| "client": "Acme Corp", | |
| "total_amount": "$1,250.00", | |
| "tax": "$125.00", | |
| "status": "Paid", | |
| "confidence_score": 0.98 | |
| } | |
| return file, mock_data | |
| # Custom CSS to match the "VisionExtract" dark/glass theme from the request | |
| custom_css = """ | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #a855f7; | |
| --accent: #ec4899; | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --success: #10b981; | |
| --border: #334155; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: 'Inter', sans-serif; | |
| background-image: radial-gradient(circle at 10% 20%, rgba(63, 66, 241, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 20%); | |
| } | |
| .gradio-container { | |
| background: transparent !important; | |
| } | |
| /* Sidebar Styling */ | |
| .sidebar-container { | |
| background: var(--bg-card); | |
| border-right: 1px solid var(--border); | |
| color: var(--text-main); | |
| } | |
| .nav-item { | |
| padding: 12px 15px; | |
| border-radius: 8px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 5px; | |
| font-weight: 500; | |
| } | |
| .nav-item:hover { | |
| background: rgba(63, 66, 241, 0.1); | |
| color: var(--text-main); | |
| } | |
| /* Card Styling */ | |
| .gr-box { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Header Badge */ | |
| .anycoder-badge { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: white; | |
| text-decoration: none; | |
| box-shadow: 0 4px 15px rgba(63, 66, 241, 0.3); | |
| transition: transform 0.2s; | |
| display: inline-block; | |
| margin-bottom: 10px; | |
| } | |
| .anycoder-badge:hover { | |
| transform: translateY(-2px); | |
| text-decoration: none; | |
| color: white; | |
| } | |
| /* Results Panel */ | |
| .data-field { | |
| background: rgba(15, 23, 42, 0.5); | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| border: 1px solid var(--border); | |
| transition: border-color 0.3s; | |
| } | |
| .data-field:hover { | |
| border-color: var(--secondary); | |
| } | |
| .field-label { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .field-value { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| .confidence-badge { | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| background: var(--success); | |
| color: #fff; | |
| border-radius: 4px; | |
| } | |
| /* Scanner Animation Overlay (Simulated via HTML component) */ | |
| .scanner-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, rgba(0, 255, 157, 0.2), transparent); | |
| animation: scan 3s linear infinite; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| @keyframes scan { | |
| 0% { top: -100%; } | |
| 100% { top: 100%; } | |
| } | |
| """ | |
| def create_app(): | |
| with gr.Blocks() as demo: | |
| # --- Sidebar --- | |
| with gr.Sidebar(position="left", open=True): | |
| gr.Markdown("<div style='color: #6366f1; font-weight: 700; font-size: 1.2rem; margin-bottom: 20px;'>👁️ VisionExtract</div>") | |
| gr.Markdown("<div class='nav-item'>📁 New Extraction</div>") | |
| gr.Markdown("<div class='nav-item'>⚡ Batch Process</div>") | |
| gr.Markdown("<div class='nav-item'>⚙️ Settings</div>") | |
| gr.Markdown("<div style='font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; margin-top: 40px; margin-bottom: 15px;'>Recent Scans</div>") | |
| gr.Markdown("<div style='padding: 10px; border-bottom: 1px solid #334155; font-size: 0.9rem; color: #94a3b8;'>Invoice_001.png</div>") | |
| gr.Markdown("<div style='padding: 10px; border-bottom: 1px solid #334155; font-size: 0.9rem; color: #94a3b8;'>Form_Submit_22.jpg</div>") | |
| gr.Markdown("<div style='padding: 10px; border-bottom: 1px solid #334155; font-size: 0.9rem; color: #94a3b8;'>Receipt_Starbucks.png</div>") | |
| gr.Markdown("<div style='margin-top: 20px; font-size: 0.7rem; color: #94a3b8;'>v2.4.0 Stable</div>") | |
| # --- Main Content --- | |
| with gr.Column(): | |
| # Header | |
| with gr.Row(): | |
| gr.Markdown("<h1 style='font-size: 1.8rem; margin-bottom: 5px;'>OCR Data Extraction</h1><p style='color: #94a3b8; font-size: 0.9rem;'>Upload a document to automatically extract structured fields.</p>") | |
| gr.HTML("<a href='https://huggingface.co/spaces/akhaliq/anycoder' class='anycoder-badge'>Built with anycoder</a>") | |
| # Workspace Grid | |
| with gr.Row(): | |
| # Left Column: Upload/Preview | |
| with gr.Column(scale=1): | |
| with gr.Group(): | |
| gr.Markdown("<div style='font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px;'>🖼️ Source Document</div>") | |
| # File Input | |
| file_input = gr.File(label="Upload Document", file_types=["image"], height=150) | |
| # Image Preview (Hidden initially, shown after upload) | |
| image_preview = gr.Image(label="Preview", interactive=False, height=400, visible=False) | |
| # Scanner Effect Overlay (HTML Component) | |
| scanner_html = gr.HTML( | |
| value="<div class='scanner-overlay'></div>", | |
| visible=False, | |
| label="Processing" | |
| ) | |
| clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="sm") | |
| # Right Column: Results | |
| with gr.Column(scale=1): | |
| with gr.Group(): | |
| gr.Markdown("<div style='font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px;'>📊 Extracted Data</div>") | |
| # Results Display | |
| results_json = gr.JSON(label="Raw JSON", visible=False) | |
| results_markdown = gr.Markdown(value="<div style='text-align: center; color: #94a3b8; padding: 40px;'>🤖 Waiting for input...</div>", label="Structured Fields") | |
| copy_btn = gr.Button("📋 Copy JSON", variant="secondary", size="sm", visible=False) | |
| # --- Logic --- | |
| def clear_all(): | |
| return None, None, None, False, False, False, "<div style='text-align: center; color: #94a3b8; padding: 40px;'>🤖 Waiting for input...</div>", False, False | |
| def process_logic(file): | |
| if file is None: | |
| return None, None, False, False, None, False, "<div style='text-align: center; color: #94a3b8; padding: 40px;'>🤖 Waiting for input...</div>", False, False | |
| # Run OCR simulation | |
| img, data = process_document(file) | |
| # Format Markdown Results | |
| html_fields = "" | |
| for key, value in data.items(): | |
| if key != "confidence_score": | |
| html_fields += f""" | |
| <div class="data-field"> | |
| <div class="field-label"> | |
| {key.replace('_', ' ').upper()} | |
| <span class="confidence-badge">98% Conf</span> | |
| </div> | |
| <div class="field-value">{value}</div> | |
| </div> | |
| """ | |
| html_fields += f""" | |
| <div class="data-field" style="background: #0f172a; border: 1px solid #334155;"> | |
| <div class="field-label">RAW JSON OUTPUT</div> | |
| <pre style="color: #a855f7; font-size: 0.8rem; overflow-x: auto;"> | |
| {json.dumps(data, indent=2)} | |
| </pre> | |
| </div> | |
| """ | |
| return img, img, True, True, data, True, html_fields, True, True | |
| # Event Listeners | |
| file_input.upload( | |
| fn=process_logic, | |
| inputs=[file_input], | |
| outputs=[image_preview, image_preview, scanner_html, scanner_html, results_json, copy_btn, results_markdown, copy_btn, copy_btn] | |
| ) | |
| clear_btn.click( | |
| fn=clear_all, | |
| inputs=[], | |
| outputs=[file_input, image_preview, scanner_html, scanner_html, results_json, copy_btn, results_markdown, copy_btn, copy_btn] | |
| ) | |
| return demo | |
| if __name__ == "__main__": | |
| demo = create_app() | |
| demo.launch( | |
| theme=gr.themes.Base(), | |
| css=custom_css, | |
| footer_links=[{"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}] | |
| ) |