Update app.py

app.py

@@ -112,23 +112,75 @@ def predict(youtube_url_or_file_path):
     return label_to_score, gif_path
 
 
-app = gr.Interface(
-    fn=predict,
-    inputs=[
-        gr.Interface.Dropdown(
-            choices=VALID_VIDEOCLASSIFICATION_MODELS,
-            label="Model:",
-            show_label=True,
-            value=DEFAULT_MODEL,
-        ),
-        gr.Interface.Textbox(label="Youtube URL:", show_label=True),
-        gr.Interface.Video(label="Video File:", show_label=True),
-    ],
-    outputs=[
-        gr.Interface.Label(label="Predictions:", show_label=True, num_top_classes=5),
-        gr.Interface.Image(label="Input Clip", show_label=True),
-    ],
-    layout="vertical",
-)
+# Create the Gradio app
+app = gr.Blocks()
+
+with app:
+    # Title and description
+    gr.Markdown("# **<p align='center'>Video Classification with 🤗 Transformers</p>**")
+    gr.Markdown(
+        """
+        <p style='text-align: center'>
+        Perform video classification with <a href='https://huggingface.co/models?pipeline_tag=video-classification&library=transformers' target='_blank'>HuggingFace Transformers video models</a>.
+        <br> For zero-shot classification, you can use the <a href='https://huggingface.co/spaces/fcakyon/zero-shot-video-classification' target='_blank'>zero-shot classification demo</a>.
+        </p>
+        """
+    )
+
+    with gr.Row():
+        # Left Column: Model Selection and Input
+        with gr.Column():
+            model_names_dropdown = gr.Dropdown(
+                choices=VALID_VIDEOCLASSIFICATION_MODELS,
+                label="Model:",
+                show_label=True,
+                value=DEFAULT_MODEL,
+            )
+            model_names_dropdown.change(fn=select_model, inputs=model_names_dropdown)
+
+            with gr.TabGroup() as tabs:
+                # Youtube URL Tab
+                with gr.Tab(label="Youtube URL"):
+                    gr.Markdown("### **Provide a Youtube video URL**")
+                    youtube_url = gr.Textbox(label="Youtube URL:", show_label=True)
+                    youtube_url_predict_btn = gr.Button(value="Predict")
+
+                # Local File Tab
+                with gr.Tab(label="Local File"):
+                    gr.Markdown("### **Upload a video file**")
+                    video_file = gr.Video(label="Video File:", show_label=True)
+                    local_video_predict_btn = gr.Button(value="Predict")
+
+        # Middle Column: Display Input Clip
+        with gr.Column():
+            video_gif = gr.Image(
+                label="Input Clip",
+                show_label=True,
+            )
+
+        # Right Column: Display Predictions
+        with gr.Column():
+            predictions = gr.Label(
+                label="Predictions:", show_label=True, num_top_classes=5
+            )
+
+    # Examples and Prediction Buttons
+    gr.Markdown("**Examples:**")
+    gr.Examples(
+        examples,
+        youtube_url,
+        [predictions, video_gif],
+        fn=predict,
+        cache_examples=True,
+    )
+
+    # Click handlers for prediction buttons
+    youtube_url_predict_btn.click(
+        predict, inputs=youtube_url, outputs=[predictions, video_gif]
+    )
+    local_video_predict_btn.click(
+        predict, inputs=video_file, outputs=[predictions, video_gif]
+    )
 
+# Launch the Gradio app
 app.launch()