graph method changes

app.py

@@ -14,9 +14,7 @@ from langchain.schema.output_parser import StrOutputParser
 from langchain_core.messages import HumanMessage, SystemMessage
 from PIL import Image
 import json
-import matplotlib.pyplot as plt
-from matplotlib.colors import LinearSegmentedColormap
-import textwrap
+import plotly.graph_objects as go
 
 st.set_page_config(
     page_title="Food Chain", 
@@ -281,45 +279,27 @@ def display_dishes_in_grid(dishes, cols=3):
                 st.sidebar.write(dish.replace("_", " ").capitalize())
 
 def display_prediction_graph(class_names, confidences):
-    #reversing them so graph displays highest predictions at the top
-    confidences.reverse()
-    class_names.reverse()
-
-    #display as a graph
-    norm = plt.Normalize(min(confidences), max(confidences))
-    cmap = LinearSegmentedColormap.from_list("grey_orange", ["#808080", "#FFA500"]) #color map grey to orange
-    
-    fig, ax = plt.subplots(figsize=(12, 6))
-    bars = ax.barh(class_names, confidences, color=cmap(norm(confidences)))
-
-    fig.patch.set_alpha(0)  # Transparent background
-    ax.set_facecolor('none') 
-
-    min_width = 0.07 * ax.get_xlim()[1]  # 7% of the x-axis range
-    # Add labels inside the bars, aligned to the right
-    for bar in bars:
-        original_width = bar.get_width()
-        width = original_width
-        if width < min_width:
-            width = min_width
-        ax.text(width - 0.02, bar.get_y() + bar.get_height()/2, f'{original_width:.1f}%', 
-                va='center', ha='right', color='white', fontweight='bold', fontsize=16)
-
-    ax.set_xticklabels([]) #remove x label
-
-    # Wrapping labels
-    max_label_width = 10
-    labels = ax.get_yticklabels()
-    wrapped_labels = [textwrap.fill(label.get_text(), width=max_label_width) for label in labels] # Wrap the labels if they exceed the max width
-    ax.set_yticklabels(wrapped_labels, fontsize=16, color='white')
+    values = [round(confidence, 2) for confidence in confidences]
     
-    #no borders
-    for spine in ax.spines.values():
-        spine.set_visible(False)
+    fig = go.Figure(go.Bar(
+        x=values,
+        y=class_names,
+        orientation='h',
+        marker=dict(color='orange'),
+        text=values,  # Display values on the bars
+        textposition='outside'  # Position the text outside the bars
+    ))
+
+    # Update layout for better appearance
+    fig.update_layout(
+        title="Prediction Graph",
+        xaxis_title="Prediction Values",
+        yaxis_title="Prediction Categories",
+        yaxis=dict(autorange="reversed")  # Reverse the y-axis to display top categories at the top
+    )
 
-    ax.set_title(class_names[-1], color='white', fontsize=24, fontweight='bold', ha='left', x=0.5)
-    
-    st.pyplot(fig) # Display the plot
+    # Display the chart in Streamlit
+    st.plotly_chart(fig)
     
 # #Streamlit