Upload app.py

app.py

@@ -59,6 +59,29 @@ MODEL_REPO = "meettilavat/imagecaptioning"
 SUBFOLDER_PREFIX = "outputs/blip2_full_ft_stage2"
 LOCAL_DIR = Path(os.environ["HF_HOME"]) / "models" / "imagecaptioning"
 DEFAULT_PROMPT = "Describe the image in detail."
+SPINNER_CSS = """
+<style>
+#caption-spinner {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+}
+#caption-spinner .caption-spinner__loader {
+    width: 20px;
+    height: 20px;
+    border: 3px solid var(--neutral-400, rgba(0, 0, 0, 0.25));
+    border-top-color: var(--body-text-color, rgba(0, 0, 0, 0.75));
+    border-radius: 50%;
+    animation: caption-spin 0.75s linear infinite;
+}
+@keyframes caption-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
+"""
 
 
 def _allow_patterns() -> Iterable[str]:
@@ -224,11 +247,20 @@ def update_beam_visibility(choice: str):
     )
 
 
+def show_spinner():
+    return gr.HTML.update(visible=True)
+
+
+def hide_spinner():
+    return gr.HTML.update(visible=False)
+
+
 with gr.Blocks(title="BLIP-2 Image Captioning") as demo:
     gr.Markdown("# BLIP-2 Image Captioning (H200 fine-tuned)")
     gr.Markdown(
         "Upload an image, tweak decoding settings, and optionally compare beam widths side by side."
     )
+    gr.HTML(SPINNER_CSS)
 
     with gr.Row():
         with gr.Column(scale=6, min_width=320):
@@ -278,6 +310,14 @@ with gr.Blocks(title="BLIP-2 Image Captioning") as demo:
                 f"Running inference on {device.type.upper()} with dtype {dtype}. "
                 "Compare beams to balance diversity vs. precision."
             )
+            spinner_display = gr.HTML(
+                value=(
+                    '<div class="caption-spinner__loader" aria-hidden="true"></div>'
+                    "<span role=\"status\">Generating caption...</span>"
+                ),
+                visible=False,
+                elem_id="caption-spinner",
+            )
 
     beam_mode_input.change(
         fn=update_beam_visibility,
@@ -285,7 +325,12 @@ with gr.Blocks(title="BLIP-2 Image Captioning") as demo:
         outputs=[single_beam_slider, compare_beams_group],
     )
 
-    run_button.click(
+    run_event = run_button.click(
+        fn=show_spinner,
+        outputs=spinner_display,
+        show_progress=False,
+    )
+    run_event = run_event.then(
         fn=run_inference,
         inputs=[
             image_input,
@@ -298,6 +343,11 @@ with gr.Blocks(title="BLIP-2 Image Captioning") as demo:
         outputs=caption_output,
         api_name="generate",
     )
+    run_event.then(
+        fn=hide_spinner,
+        outputs=spinner_display,
+        show_progress=False,
+    )
 
 
 if __name__ == "__main__":