Update app.py

app.py

@@ -17,6 +17,7 @@ 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", 
@@ -291,45 +292,84 @@ 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()
+    # Create a list of labels and values from the predictions dictionary
+    values = [round(value, 2) for value in confidences]
+
+    # Determine the top prediction
     class_names.reverse()
+    values.reverse()
+    top_prediction = class_names[0]
+
+    # Create a horizontal bar chart
+    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=f"Prediction: {top_prediction}",
+        margin=dict(l=20, r=20, t=60, b=20),
+        xaxis=dict(
+            showgrid=False,  # No grid lines for the x-axis
+            ticks='',  # No x-axis ticks
+            showticklabels=False  # No x-axis tick labels
+        ),
+        yaxis=dict(
+            showgrid=False  # No grid lines for the y-axis
+        ),
+        plot_bgcolor='rgba(0,0,0,0)',  # No background color for the plot area
+        paper_bgcolor='rgba(0,0,0,0)',  # No background color for the paper area
+        font=dict()  # Default font color
+    )
 
-    #display as a graph
-    norm = plt.Normalize(min(confidences), max(confidences))
-    cmap = LinearSegmentedColormap.from_list("grey_orange", ["#808080", "#FFA500"]) #color map grey to orange
+    # Display the chart in Streamlit
+    st.plotly_chart(fig)
+    
+# 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')
+#     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')
     
-    #no borders
-    for spine in ax.spines.values():
-        spine.set_visible(False)
+#     #no borders
+#     for spine in ax.spines.values():
+#         spine.set_visible(False)
 
-    ax.set_title(class_names[-1], color='white', fontsize=24, fontweight='bold', ha='left', x=0.5)
+#     ax.set_title(class_names[-1], color='white', fontsize=24, fontweight='bold', ha='left', x=0.5)
     
-    st.pyplot(fig) # Display the plot
+#     st.pyplot(fig) # Display the plot
     
 # #Streamlit