Fixing outputs overlapping each other

app.py

@@ -67,12 +67,19 @@ css = """.my-group {max-width: 500px !important; max-height: 500px !important;}
             .my-column {display: flex !important; justify-content: center !important; align-items: center !important};"""
 
 with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_classes=["my-column"]):
-        with gr.Group(elem_classes=["my-group"]):
+    with gr.Row():
+        gr.Markdown("# ASL Recognition App")
+    with gr.Row():
+        with gr.Column(scale=1):
             input_img = gr.Image(sources=["webcam"], type="numpy", streaming=True, label="Webcam Input")
+        with gr.Column(scale=1):
             output_label = gr.Label(label="Predicted ASL Sign")
             output_plot = gr.Plot(label="Class Probabilities")
 
-    input_img.stream(predict_asl, [input_img], [output_label, output_plot], time_limit=300, stream_every=0.5)
+    def gradio_pipeline(frame):
+        predicted_label, fig = predict_asl(frame)
+        return predicted_label, fig
+
+    input_img.stream(gradio_pipeline, [input_img], [output_label, output_plot], time_limit=30, stream_every=0.1)
 
 demo.launch()