Adding bar chart for predicted probabilites

app.py

@@ -1,4 +1,5 @@
 import gradio as gr
+import matplotlib.pyplot as plt
 import numpy as np
 import cv2
 import tensorflow as tf
@@ -45,14 +46,22 @@ def preprocess_frame(frame):
 
 
 def predict_asl(frame):
-    """Predict the ASL sign from the webcam frame."""
-    # Preprocess the frame
+    """Predict the ASL sign and return the label and probabilities."""
     processed_frame = preprocess_frame(frame)
-    # Make a prediction
-    predictions = model.predict(processed_frame)
-    # Get the class with the highest probability
-    predicted_label = labels[np.argmax(predictions)]
-    return predicted_label
+    predictions = model.predict(processed_frame)  # Predict probabilities
+    predicted_label = labels[np.argmax(predictions)]  # Get the class with the highest probability
+
+    # Generate a bar chart for probabilities
+    fig, ax = plt.subplots(figsize=(6, 4))
+    ax.bar(labels, predictions[0])
+    ax.set_title("Class Probabilities")
+    ax.set_ylabel("Probability")
+    ax.set_xlabel("ASL Classes")
+    ax.set_xticks(range(len(labels)))
+    ax.set_xticklabels(labels, rotation=45)
+    plt.tight_layout()
+
+    return predicted_label, fig
 
 css = """.my-group {max-width: 500px !important; max-height: 500px !important;}
             .my-column {display: flex !important; justify-content: center !important; align-items: center !important};"""
@@ -62,7 +71,8 @@ with gr.Blocks(css=css) as demo:
         with gr.Group(elem_classes=["my-group"]):
             input_img = gr.Image(sources=["webcam"], type="numpy", streaming=True, label="Webcam Input")
             output_label = gr.Label(label="Predicted ASL Sign")
+            output_plot = gr.Plot(label="Class Probabilities")
 
-    input_img.stream(predict_asl, [input_img], [output_label], time_limit=300, stream_every=0.1)
+    input_img.stream(predict_asl, [input_img], [output_label], time_limit=300, stream_every=0.5)
 
 demo.launch()