Update app.py

app.py

@@ -131,7 +131,6 @@ 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
@@ -152,17 +151,14 @@ 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",
@@ -174,7 +170,6 @@ 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,
@@ -188,13 +183,11 @@ 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>"]):
@@ -216,7 +209,6 @@ 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
@@ -237,18 +229,15 @@ 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",
@@ -260,7 +249,6 @@ 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,
@@ -274,13 +262,11 @@ 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>"]):
@@ -311,63 +297,53 @@ video_examples = [
     ["Explain the video in detail.", "videos/2.mp4"]
 ]
 
-# Updated CSS with new button theme
+# Updated CSS with the new submit button theme
 css = """
-.button {
+.submit-btn {
+  --clr-font-main: hsla(0 0% 20% / 100);
+  --btn-bg-1: hsla(194 100% 69% / 1);
+  --btn-bg-2: hsla(217 100% 56% / 1);
+  --btn-bg-color: hsla(360 100% 100% / 1);
+  --radii: 0.5em;
   cursor: pointer;
-  padding: 1em 2em;
-  font-weight: bold;
-  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);
+  padding: 0.9em 1.4em;
+  min-width: 120px;
+  min-height: 44px;
+  font-size: var(--size, 1rem);
+  font-weight: 500;
+  transition: 0.8s;
+  background-size: 280% auto;
+  background-image: linear-gradient(
+    325deg,
+    var(--btn-bg-2) 0%,
+    var(--btn-bg-1) 55%,
+    var(--btn-bg-2) 90%
+  );
+  border: none;
+  border-radius: var(--radii);
+  color: var(--btn-bg-color);
+  box-shadow:
+    0px 0px 20px rgba(71, 184, 255, 0.5),
+    0px 5px 5px -1px rgba(58, 125, 233, 0.25),
+    inset 4px 4px 8px rgba(175, 230, 255, 0.5),
+    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
 }
 
-.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:hover {
+  background-position: right top;
 }
 
-.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:is(:focus, :focus-visible, :active) {
+  outline: none;
+  box-shadow:
+    0 0 0 3px var(--btn-bg-color),
+    0 0 0 6px var(--btn-bg-2);
 }
 
-.button::before {
-  content: "";
-  position: absolute;
-  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);
-}
-
-.button:active::before {
-  transform: scale(0.67);
+@media (prefers-reduced-motion: reduce) {
+  .submit-btn {
+    transition: linear;
+  }
 }
 
 .canvas-output {
@@ -386,7 +362,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="button")
+                    image_submit = gr.Button("Submit", elem_classes="submit-btn")
                     gr.Examples(
                         examples=image_examples,
                         inputs=[image_query, image_upload]
@@ -394,7 +370,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="button")
+                    video_submit = gr.Button("Submit", elem_classes="submit-btn")
                     gr.Examples(
                         examples=video_examples,
                         inputs=[video_query, video_upload]
@@ -407,7 +383,6 @@ 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)
@@ -428,7 +403,6 @@ 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],