Update app.py

app.py

@@ -131,6 +131,7 @@ def generate_image(model_name: str, text: str, image: Image.Image,
                    top_k: int = 50,
                    repetition_penalty: float = 1.2):
     """Generate responses for image input using the selected model."""
+    # Model selection
     if model_name == "Nanonets-OCR-s":
         processor = processor_m
         model = model_m
@@ -151,14 +152,17 @@ def generate_image(model_name: str, text: str, image: Image.Image,
         yield "Please upload an image.", "Please upload an image."
         return
 
+    # Prepare images as a list (single image for image inference)
     images = [image]
 
+    # SmolDocling-256M specific preprocessing
     if model_name == "SmolDocling-256M-preview":
         if "OTSL" in text or "code" in text:
             images = [add_random_padding(img) for img in images]
         if "OCR at text at" in text or "Identify element" in text or "formula" in text:
             text = normalize_values(text, target_max=500)
 
+    # Unified message structure for all models
     messages = [
         {
             "role": "user",
@@ -170,6 +174,7 @@ def generate_image(model_name: str, text: str, image: Image.Image,
     prompt = processor.apply_chat_template(messages, add_generation_prompt=True)
     inputs = processor(text=prompt, images=images, return_tensors="pt").to(device)
 
+    # Generation with streaming
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
     generation_kwargs = {
         **inputs,
@@ -183,11 +188,13 @@ def generate_image(model_name: str, text: str, image: Image.Image,
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
 
+    # Stream output
     buffer = ""
     for new_text in streamer:
         buffer += new_text.replace("<|im_end|>", "")
         yield buffer, buffer
 
+    # SmolDocling-256M specific postprocessing
     if model_name == "SmolDocling-256M-preview":
         cleaned_output = buffer.replace("<end_of_utterance>", "").strip()
         if any(tag in cleaned_output for tag in ["<doctag>", "<otsl>", "<code>", "<chart>", "<formula>"]):
@@ -209,6 +216,7 @@ def generate_video(model_name: str, text: str, video_path: str,
                    top_k: int = 50,
                    repetition_penalty: float = 1.2):
     """Generate responses for video input using the selected model."""
+    # Model selection
     if model_name == "Nanonets-OCR-s":
         processor = processor_m
         model = model_m
@@ -229,15 +237,18 @@ def generate_video(model_name: str, text: str, video_path: str,
         yield "Please upload a video.", "Please upload a video."
         return
 
+    # Extract frames from video
     frames = downsample_video(video_path)
     images = [frame for frame, _ in frames]
 
+    # SmolDocling-256M specific preprocessing
     if model_name == "SmolDocling-256M-preview":
         if "OTSL" in text or "code" in text:
             images = [add_random_padding(img) for img in images]
         if "OCR at text at" in text or "Identify element" in text or "formula" in text:
             text = normalize_values(text, target_max=500)
 
+    # Unified message structure for all models
     messages = [
         {
             "role": "user",
@@ -249,6 +260,7 @@ def generate_video(model_name: str, text: str, video_path: str,
     prompt = processor.apply_chat_template(messages, add_generation_prompt=True)
     inputs = processor(text=prompt, images=images, return_tensors="pt").to(device)
 
+    # Generation with streaming
     streamer = TextIteratorStreamer(processor, skip_prompt=True, skip_special_tokens=True)
     generation_kwargs = {
         **inputs,
@@ -262,11 +274,13 @@ def generate_video(model_name: str, text: str, video_path: str,
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
 
+    # Stream output
     buffer = ""
     for new_text in streamer:
         buffer += new_text.replace("<|im_end|>", "")
         yield buffer, buffer
 
+    # SmolDocling-256M specific postprocessing
     if model_name == "SmolDocling-256M-preview":
         cleaned_output = buffer.replace("<end_of_utterance>", "").strip()
         if any(tag in cleaned_output for tag in ["<doctag>", "<otsl>", "<code>", "<chart>", "<formula>"]):
@@ -297,92 +311,63 @@ video_examples = [
     ["Explain the video in detail.", "videos/2.mp4"]
 ]
 
-# Updated CSS with the new Submit button theme
+# Updated CSS with new button theme
 css = """
-.submit-btn {
-  --stone-50: #fafaf9;
-  --stone-800: #292524;
-  --yellow-400: #facc15;
-
-  font-size: 1rem;
+.button {
   cursor: pointer;
-  position: relative;
-  font-family: "Rubik", sans-serif;
+  padding: 1em 2em;
   font-weight: bold;
-  line-height: 1;
-  padding: 0.75rem 1.25rem;
-  transform: translate(-4px, -4px);
-  outline: 2px solid transparent;
-  outline-offset: 5px;
-  border-radius: 9999px;
-  background-color: var(--yellow-400);
-  color: var(--stone-800);
-  transition:
-    transform 150ms ease,
-    box-shadow 150ms ease;
-  text-align: center;
-  box-shadow:
-    0.5px 0.5px 0 0 var(--stone-800),
-    1px 1px 0 0 var(--stone-800),
-    1.5px 1.5px 0 0 var(--stone-800),
-    2px 2px 0 0 var(--stone-800),
-    2.5px 2.5px 0 0 var(--stone-800),
-    3px 3px 0 0 var(--stone-800),
-    0 0 0 2px var(--stone-50),
-    0.5px 0.5px 0 2px var(--stone-50),
-    1px 1px 0 2px var(--stone-50),
-    1.5px 1.5px 0 2px var(--stone-50),
-    2px 2px 0 2px var(--stone-50),
-    2.5px 2.5px 0 2px var(--stone-50),
-    3px 3px 0 2px var(--stone-50),
-    3.5px 3.5px 0 2px var(--stone-50),
-    4px 4px 0 2px var(--stone-50);
-}
-
-.submit-btn:hover {
-  transform: translate(0, 0);
-  box-shadow: 0 0 0 2px var(--stone-50);
+  font-size: 20px;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+  background: rgba(60, 73, 203, 0.35);
+  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(14.5px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  -webkit-backdrop-filter: blur(14.5px);
 }
 
-.submit-btn:active {
-  transform: translate(0, 2px);
+.button:hover {
+  box-shadow: 0px 0 32px 0 rgba(31, 38, 135, 0.37),
+    0px 0 32px 0 rgba(31, 38, 135, 0.37), 0 0 42px 0px rgba(31, 38, 135, 0.37),
+    0 0 52px 0 rgba(31, 38, 135, 0.37);
+  border: 1px solid rgba(255, 255, 255, 0.58);
 }
 
-.submit-btn:focus-visible {
-  outline-color: var(--yellow-400);
-  outline-style: dashed;
+.button,
+.button::before {
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  box-shadow: 0 0px 32px 0 rgba(31, 38, 135, 0.37);
 }
 
-.submit-btn::before {
+.button::before {
   content: "";
   position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  opacity: 0.5;
-  background-image: radial-gradient(
-      rgb(255 255 255 / 80%) 20%,
-      transparent 20%
-    ),
-    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
-  background-position:
-    0 0,
-    4px 4px;
-  background-size: 8px 8px;
-  mix-blend-mode: hard-light;
-  animation: dots 0.5s infinite linear;
+  background: rgba(26, 18, 241, 0.25);
+  width: 90%;
+  height: 80%;
+  backdrop-filter: blur(18.5px);
+  -webkit-backdrop-filter: blur(18.5px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  transition: 0.4s;
+}
+
+.button:hover::before {
+  background: rgba(51, 57, 236, 0.4);
+  box-shadow: 1px 1px 2px 0 rgba(31, 38, 135, 0.37),
+    2px 2px 2px 0 rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37),
+    0 0px 32px 1px rgba(31, 38, 135, 0.37), 0 0px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(5.5px);
+  -webkit-backdrop-filter: blur(5.5px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 
-@keyframes dots {
-  0% {
-    background-position:
-      0 0,
-      4px 4px;
-  }
-  100% {
-    background-position:
-      8px 0,
-      12px 4px;
-  }
+.button:active::before {
+  transform: scale(0.67);
 }
 
 .canvas-output {
@@ -401,7 +386,7 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                 with gr.TabItem("Image Inference"):
                     image_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
                     image_upload = gr.Image(type="pil", label="Image")
-                    image_submit = gr.Button("Submit", elem_classes="submit-btn")
+                    image_submit = gr.Button("Submit", elem_classes="button")
                     gr.Examples(
                         examples=image_examples,
                         inputs=[image_query, image_upload]
@@ -409,7 +394,7 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                 with gr.TabItem("Video Inference"):
                     video_query = gr.Textbox(label="Query Input", placeholder="Enter your query here...")
                     video_upload = gr.Video(label="Video")
-                    video_submit = gr.Button("Submit", elem_classes="submit-btn")
+                    video_submit = gr.Button("Submit", elem_classes="button")
                     gr.Examples(
                         examples=video_examples,
                         inputs=[video_query, video_upload]
@@ -422,9 +407,11 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                 repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2)
                 
         with gr.Column():
+            # Result Canvas with raw and formatted outputs
             with gr.Column(elem_classes="canvas-output"):
                 gr.Markdown("## Output")
                 raw_output = gr.Textbox(label="Raw Output Stream", interactive=False, lines=2)
+                
                 with gr.Accordion("(Result.md)", open=False):
                     formatted_output = gr.Markdown(label="(Result.md)")
             
@@ -441,6 +428,7 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
             gr.Markdown("> [Typhoon-OCR-7B](https://huggingface.co/scb10x/typhoon-ocr-7b): A bilingual document parsing model built specifically for real-world documents in Thai and English inspired by models like olmOCR based on Qwen2.5-VL-Instruction. Extracts and interprets embedded text (e.g., chart labels, captions) in Thai or English.")
             gr.Markdown(">⚠️note: all the models in space are not guaranteed to perform well in video inference use cases.")  
             
+    # Connect submit buttons to generation functions with both outputs
     image_submit.click(
         fn=generate_image,
         inputs=[model_choice, image_query, image_upload, max_new_tokens, temperature, top_p, top_k, repetition_penalty],