update app

app.py

@@ -4,7 +4,7 @@ import math
 import os
 import traceback
 from io import BytesIO
-from typing import Any, Dict, List, Optional, Tuple, Iterable
+from typing import Any, Dict, List, Optional, Tuple
 import re
 import time
 from threading import Thread
@@ -21,6 +21,7 @@ import numpy as np
 import torchvision.transforms as T
 from torchvision.transforms.functional import InterpolationMode
 
+
 from transformers import (
     Qwen2_5_VLForConditionalGeneration,
     Qwen2VLForConditionalGeneration,
@@ -42,144 +43,6 @@ from reportlab.lib.styles import getSampleStyleSheet
 from reportlab.platypus import SimpleDocTemplate, Image as RLImage, Paragraph, Spacer
 from reportlab.lib.units import inch
 
-from gradio.themes import Soft
-from gradio.themes.utils import colors, fonts, sizes
-
-
-# --- Theme and CSS Definition ---
-
-# Define the Thistle color palette
-colors.thistle = colors.Color(
-    name="thistle",
-    c50="#F9F5F9",
-    c100="#F0E8F1",
-    c200="#E7DBE8",
-    c300="#DECEE0",
-    c400="#D2BFD8",
-    c500="#D8BFD8",  # Thistle base color
-    c600="#B59CB7",
-    c700="#927996",
-    c800="#6F5675",
-    c900="#4C3454",
-    c950="#291233",
-)
-
-colors.red_gray = colors.Color(
-    name="red_gray",
-    c50="#f7eded", c100="#f5dcdc", c200="#efb4b4", c300="#e78f8f",
-    c400="#d96a6a", c500="#c65353", c600="#b24444", c700="#8f3434",
-    c800="#732d2d", c900="#5f2626", c950="#4d2020",
-)
-
-class ThistleTheme(Soft):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.thistle, # Use the new color
-        neutral_hue: colors.Color | str = colors.slate,
-        text_size: sizes.Size | str = sizes.text_lg,
-        font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
-        ),
-        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-        super().set(
-            background_fill_primary="*primary_50",
-            background_fill_primary_dark="*primary_900",
-            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
-            button_primary_text_color="black",
-            button_primary_text_color_hover="white",
-            button_primary_background_fill="linear-gradient(90deg, *secondary_400, *secondary_500)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
-            button_secondary_text_color="black",
-            button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
-            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
-            slider_color="*secondary_400",
-            slider_color_dark="*secondary_600",
-            block_title_text_weight="600",
-            block_border_width="3px",
-            block_shadow="*shadow_drop_lg",
-            button_primary_shadow="*shadow_drop_lg",
-            button_large_padding="11px",
-            color_accent_soft="*primary_100",
-            block_label_background_fill="*primary_200",
-        )
-
-# Instantiate the new theme
-thistle_theme = ThistleTheme()
-
-css = """
-#main-title h1 {
-    font-size: 2.3em !important;
-}
-#output-title h2 {
-    font-size: 2.1em !important;
-}
-:root {
-    --color-grey-50: #f9fafb;
-    --banner-background: var(--secondary-400);
-    --banner-text-color: var(--primary-100);
-    --banner-background-dark: var(--secondary-800);
-    --banner-text-color-dark: var(--primary-100);
-    --banner-chrome-height: calc(16px + 43px);
-    --chat-chrome-height-wide-no-banner: 320px;
-    --chat-chrome-height-narrow-no-banner: 450px;
-    --chat-chrome-height-wide: calc(var(--chat-chrome-height-wide-no-banner) + var(--banner-chrome-height));
-    --chat-chrome-height-narrow: calc(var(--chat-chrome-height-narrow-no-banner) + var(--banner-chrome-height));
-}
-.banner-message { background-color: var(--banner-background); padding: 5px; margin: 0; border-radius: 5px; border: none; }
-.banner-message-text { font-size: 13px; font-weight: bolder; color: var(--banner-text-color) !important; }
-body.dark .banner-message { background-color: var(--banner-background-dark) !important; }
-body.dark .gradio-container .contain .banner-message .banner-message-text { color: var(--banner-text-color-dark) !important; }
-.toast-body { background-color: var(--color-grey-50); }
-.html-container:has(.css-styles) { padding: 0; margin: 0; }
-.css-styles { height: 0; }
-.model-message { text-align: end; }
-.model-dropdown-container { display: flex; align-items: center; gap: 10px; padding: 0; }
-.user-input-container .multimodal-textbox{ border: none !important; }
-.control-button { height: 51px; }
-button.cancel { border: var(--button-border-width) solid var(--button-cancel-border-color); background: var(--button-cancel-background-fill); color: var(--button-cancel-text-color); box-shadow: var(--button-cancel-shadow); }
-button.cancel:hover, .cancel[disabled] { background: var(--button-cancel-background-fill-hover); color: var(--button-cancel-text-color-hover); }
-.opt-out-message { top: 8px; }
-.opt-out-message .html-container, .opt-out-checkbox label { font-size: 14px !important; padding: 0 !important; margin: 0 !important; color: var(--neutral-400) !important; }
-div.block.chatbot { height: calc(100svh - var(--chat-chrome-height-wide)) !important; max-height: 900px !important; }
-div.no-padding { padding: 0 !important; }
-#gallery { min-height: 400px; }
-@media (max-width: 1280px) { div.block.chatbot { height: calc(100svh - var(--chat-chrome-height-wide)) !important; } }
-@media (max-width: 1024px) {
-    .responsive-row { flex-direction: column; }
-    .model-message { text-align: start; font-size: 10px !important; }
-    .model-dropdown-container { flex-direction: column; align-items: flex-start; }
-    div.block.chatbot { height: calc(100svh - var(--chat-chrome-height-narrow)) !important; }
-}
-@media (max-width: 400px) {
-    .responsive-row { flex-direction: column; }
-    .model-message { text-align: start; font-size: 10px !important; }
-    .model-dropdown-container { flex-direction: column; align-items: flex-start; }
-    div.block.chatbot { max-height: 360px !important; }
-}
-@media (max-height: 932px) { .chatbot { max-height: 500px !important; } }
-@media (max-height: 1280px) { div.block.chatbot { max-height: 800px !important; } }
-"""
-
-
 # --- Constants and Model Setup ---
 MAX_INPUT_TOKEN_LENGTH = 4096
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
@@ -551,11 +414,16 @@ def process_document_stream(
 # --- Gradio UI Definition ---
 def create_gradio_interface():
     """Builds and returns the Gradio web interface."""
-
-    with gr.Blocks(theme=thistle_theme, css=css) as demo:
+    css = """
+    .main-container { max-width: 1400px; margin: 0 auto; }
+    .process-button { border: none !important; color: white !important; font-weight: bold !important; background-color: blue !important;}
+    .process-button:hover { background-color: darkblue !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; }
+    #gallery { min-height: 400px; }
+    """
+    with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
         gr.HTML("""
         <div class="title" style="text-align: center">
-            <h1 id="main-title">Tiny VLMs Lab🧪</h1>
+            <h1>Tiny VLMs Lab🧪</h1>
             <p style="font-size: 1.1em; color: #6b7280; margin-bottom: 0.6em;">
                 Tiny VLMs for Image Content Extraction and Understanding
             </p>
@@ -572,14 +440,14 @@ def create_gradio_interface():
                              "Qwen2.5-VL-3B-Abliterated-Caption-it(caption)", "Nanonets-OCR-s(ocr)",
                              "LMM-R1-MGT-PerceReason(reason)", "OCRFlux-3B(ocr)", "TBAC-VLR1-3B(open-r1)", 
                              "SmolVLM-500M-Instruct(smol)", "llava-onevision-qwen2-0.5b-ov-hf(mini)"],
-                    label="Select Model", value= "Megalodon-OCR-Sync-0713(ocr)"
+                    label="Select Model", value= "LFM2-VL-450M(fast)"
                 )
                 
-                prompt_input = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
-                image_input = gr.Image(label="Upload Image", type="pil", sources=['upload'], height=290)
+                prompt_input = gr.Textbox(label="Query Input", placeholder="✦︎ Enter the prompt")
+                image_input = gr.Image(label="Upload Image", type="pil", sources=['upload'])
                 
                 with gr.Accordion("Advanced Settings (PDF)", open=False):
-                    max_new_tokens = gr.Slider(minimum=512, maximum=8192, value=1024, step=256, label="Max New Tokens")
+                    max_new_tokens = gr.Slider(minimum=512, maximum=8192, value=2048, step=256, label="Max New Tokens")
                     temperature = gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6)
                     top_p = gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9)
                     top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50)
@@ -591,22 +459,22 @@ def create_gradio_interface():
                     alignment = gr.Dropdown(choices=["Left", "Center", "Right", "Justified"], value="Justified", label="Text Alignment")
                     image_size = gr.Dropdown(choices=["Small", "Medium", "Large"], value="Medium", label="Image Size in PDF")
 
-                with gr.Row():
-                    process_btn = gr.Button("Process Image", variant="primary", size="lg", scale=2)
-                    clear_btn = gr.Button("Clear All", variant="secondary", scale=1)
+                process_btn = gr.Button("🚀 Process Image", variant="primary", elem_classes=["process-button"], size="lg")
+                clear_btn = gr.Button("🗑️ Clear All", variant="secondary")
 
             # Right Column (Outputs)
             with gr.Column(scale=2):
                 with gr.Tabs() as tabs:
                     with gr.Tab("📝 Extracted Content"):
-                        raw_output_stream = gr.Textbox(label="Raw Output Stream", interactive=False, lines=15, show_copy_button=True)
+                        raw_output_stream = gr.Textbox(label="Raw Model Output Stream", interactive=False, lines=15, show_copy_button=True)
                         with gr.Row():
                             examples = gr.Examples(
                                 examples=["examples/1.png", "examples/2.png", "examples/3.png",
                                           "examples/4.png", "examples/5.png", "examples/6.png"],
                                 inputs=image_input, label="Examples"
                             )
-                            
+                        gr.Markdown("[Report-Bug💻](https://huggingface.co/spaces/prithivMLmods/Tiny-VLMs-Lab/discussions) | [prithivMLmods🤗](https://huggingface.co/prithivMLmods)")
+                    
                     with gr.Tab("📰 README.md"):
                         with gr.Accordion("(Result.md)", open=True): 
                             markdown_output = gr.Markdown()
@@ -641,4 +509,4 @@ def create_gradio_interface():
 if __name__ == "__main__":
     demo = create_gradio_interface()
 
-    demo.queue(max_size=50).launch(ssr_mode=False, mcp_server=True, show_error=True)
+    demo.queue(max_size=50).launch(mcp_server=True, ssr_mode=False, show_error=True)