Update app.py

app.py

@@ -27,7 +27,6 @@ from docling_core.types.doc import DoclingDocument, DocTagsDocument
 import re
 import ast
 import html
-import urllib.parse
 
 # Constants for text generation
 MAX_MAX_NEW_TOKENS = 2048
@@ -226,7 +225,7 @@ def generate_video(model_name: str, text: str, video_path: str,
         yield "Invalid model selected.", "Invalid model selected."
         return
 
-    if video_path is None:
+Nm    if video_path is None:
         yield "Please upload a video.", "Please upload a video."
         return
 
@@ -298,84 +297,99 @@ video_examples = [
     ["Explain the video in detail.", "videos/2.mp4"]
 ]
 
-# SVG data URL for the button icon
-svg_code = '''
-<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
-  <polyline points="13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37"></polyline>
-</svg>
-'''
-svg_data_url = 'data:image/svg+xml,' + urllib.parse.quote(svg_code)
-
-# Updated CSS with fancy-button styles
-css = f"""
-.fancy-button {{
-  --round: 0.75rem;
+# Updated CSS with the new Submit button theme
+css = """
+.submit-btn {
+  --stone-50: #fafaf9;
+  --stone-800: #292524;
+  --yellow-400: #facc15;
+
+  font-size: 1rem;
   cursor: pointer;
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: all 0.25s ease;
-  background: radial-gradient(
-      65.28% 65.28% at 50% 100%,
-      rgba(223, 113, 255, 0.8) 0%,
-      rgba(223, 113, 255, 0) 100%
-    ),
-    linear-gradient(0deg, #7a5af8, #7a5af8);
-  border-radius: var(--round);
-  border: none;
-  outline: none;
-  padding: 12px 18px 12px 40px;
-  color: white;
-  font-size: 16px;
-  font-weight: 500;
-}}
-
-.fancy-button::before {{
-  content: '';
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 18px;
-  height: 18px;
-  background: url('{svg_data_url}') no-repeat center;
-  background-size: contain;
-}}
-
-.fancy-button::after {{
-  content: '';
+  font-family: "Rubik", sans-serif;
+  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);
+}
+
+.submit-btn:active {
+  transform: translate(0, 2px);
+}
+
+.submit-btn:focus-visible {
+  outline-color: var(--yellow-400);
+  outline-style: dashed;
+}
+
+.submit-btn::before {
+  content: "";
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 1rem;
-  height: 1rem;
-  background: radial-gradient(
-    100% 75% at 55%,
-    rgba(223, 113, 255, 0.8) 0%,
-    rgba(223, 113, 255, 0) 100%
-  );
-  box-shadow: 0 0 3px black;
-  border-bottom-left-radius: 0.5rem;
-  border-top-right-radius: var(--round);
-  transition: all 0.5s ease-in-out;
-}}
-
-.fancy-button:hover::after {{
-  margin-top: -1rem;
-  margin-right: -1rem;
-}}
-
-.fancy-button:active {{
-  transform: scale(0.95);
-}}
-
-.canvas-output {{
-  border: 2px solid #4682B4;
-  border-radius: 10px;
-  padding: 20px;
-}}
+  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;
+}
+
+@keyframes dots {
+  0% {
+    background-position:
+      0 0,
+      4px 4px;
+  }
+  100% {
+    background-position:
+      8px 0,
+      12px 4px;
+  }
+}
+
+.canvas-output {
+    border: 2px solid #4682B4;
+    border-radius: 10px;
+    padding: 20px;
+}
 """
 
 # Create the Gradio Interface
@@ -387,7 +401,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="fancy-button")
+                    image Timage_submit = gr.Button("Submit", elem_classes="submit-btn")
                     gr.Examples(
                         examples=image_examples,
                         inputs=[image_query, image_upload]
@@ -395,7 +409,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="fancy-button")
+                    video_submit = gr.Button("Submit", elem_classes="submit-btn")
                     gr.Examples(
                         examples=video_examples,
                         inputs=[video_query, video_upload]
@@ -411,7 +425,6 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
             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)")