Update app.py

app.py

@@ -8,6 +8,35 @@ import spaces
 import cv2
 import numpy as np
 
+# Helper function to return a progress bar HTML snippet.
+def progress_bar_html(label: str) -> str:
+    return f'''
+<div style="display: flex; align-items: center;">
+    <span style="margin-right: 10px; font-size: 14px;">{label}</span>
+    <div style="width: 110px; height: 5px; background-color: #FFB6C1; border-radius: 2px; overflow: hidden;">
+        <div style="width: 100%; height: 100%; background-color: #FF69B4; animation: loading 1.5s linear infinite;"></div>
+    </div>
+</div>
+<style>
+@keyframes loading {{
+    0% {{ transform: translateX(-100%); }}
+    100% {{ transform: translateX(100%); }}
+}}
+</style>
+    '''
+
+#adding examples
+examples=[
+        [{"text": "Explain the Image", "files": ["examples/3.jpg"]}],
+        [{"text": "Transcription of the letter", "files": ["examples/222.png"]}],
+        [{"text": "@video-infer Explain the content of the Advertisement", "files": ["examples/videoplayback.mp4"]}],
+        [{"text": "@video-infer Explain the content of the video in detail", "files": ["examples/breakfast.mp4"]}],
+        [{"text": "@video-infer Describe the video", "files": ["examples/Missing.mp4"]}],
+        [{"text": "@video-infer Explain what is happening in this video ?", "files": ["examples/oreo.mp4"]}],
+        [{"text": "@video-infer Summarize the events in this video", "files": ["examples/sky.mp4"]}],
+        [{"text": "@video-infer What is in the video ?", "files": ["examples/redlight.mp4"]}],
+]
+
 # Helper: Downsample video to extract a fixed number of frames.
 def downsample_video(video_path, num_frames=10):
     cap = cv2.VideoCapture(video_path)
@@ -88,7 +117,7 @@ def model_inference(
         buffer = ""
         thread = Thread(target=model.generate, kwargs=generation_args)
         thread.start()
-        yield "..."
+        yield progress_bar_html("Processing Video with SmolVLM")
         for new_text in streamer:
             buffer += new_text
             time.sleep(0.01)
@@ -139,7 +168,7 @@ def model_inference(
     buffer = ""
     thread = Thread(target=model.generate, kwargs=generation_args)
     thread.start()
-    yield "..."
+    yield progress_bar_html("Processing Video with SmolVLM")
     for new_text in streamer:
         buffer += new_text
         time.sleep(0.01)
@@ -148,7 +177,8 @@ def model_inference(
 # Gradio ChatInterface: Allow both image and video file types.
 demo = gr.ChatInterface(
     fn=model_inference,
-    description="# **SmolVLM Video Infer**",
+    description="# **SmolVLM Video Infer `@video-infer for video understanding`**",
+    examples=examples,
     textbox=gr.MultimodalTextbox(
         label="Query Input", 
         file_types=["image", "video"],