Update app.py

app.py

@@ -169,19 +169,25 @@ sdg_colors = {
 }
 
 # Function to plot SDG dominant bar graphs using Plotly
-def plot_sdg(df, title, pred_column):
-    """Plots a bar graph for SDG data using Plotly.
+def plot_sdg(df, title, pred_column, icons_folder='assets/icons/'):
+    """
+    Plots a horizontal bar graph of SDG predictions and superimposes the icon of the most frequent SDG.
+    
     Args:
-        df: DataFrame containing SDG predictions.
-        title: Title of the plot.
-        pred_column: Column to use for plotting.
+        df (pd.DataFrame): DataFrame containing SDG predictions.
+        title (str): Title of the plot.
+        pred_column (str): Column name to use for plotting (e.g., 'pred1').
+        icons_folder (str): Path to the folder containing SDG icons.
+    
+    Returns:
+        plotly.graph_objs._figure.Figure: The Plotly figure object.
     """
     df_filtered = df[df[pred_column].notna()]
     labels = df_filtered[pred_column].value_counts().sort_values(ascending=False)
     total = labels.sum()
     percentages = (labels / total) * 100
 
-    # Create a bar plot with Plotly
+    # Create a horizontal bar plot with Plotly
     fig = px.bar(
         percentages.rename_axis('SDG Label').reset_index(name='Percentage'),
         y='SDG Label',
@@ -212,9 +218,9 @@ def plot_sdg(df, title, pred_column):
             title=None,
             tickfont=dict(size=12)
         ),
-        margin=dict(l=20, r=5, t=30, b=20),
+        margin=dict(l=20, r=150, t=30, b=20),  # Increased right margin for icon
         height=600,
-        width=700,
+        width=800,  # Increased width to accommodate the icon
         showlegend=False,
         template="simple_white",
         xaxis=dict(
@@ -222,6 +228,37 @@ def plot_sdg(df, title, pred_column):
         ),
     )
 
+    # Identify the most frequent SDG
+    if not percentages.empty:
+        top_sdg_label = percentages.index[0]  # e.g., 'SDG1_No Poverty'
+
+        # Map SDG label to icon filename
+        # Assuming naming convention 'SDG1.png', 'SDG2.png', etc.
+        sdg_number = top_sdg_label.split('_')[0]  # Extract 'SDG1'
+        icon_filename = f"{sdg_number}.png"  # e.g., 'SDG1.png'
+        icon_path = os.path.join(icons_folder, icon_filename)
+
+        # Check if the icon file exists
+        if os.path.exists(icon_path):
+            # Read and encode the image
+            with open(icon_path, 'rb') as image_file:
+                encoded_image = base64.b64encode(image_file.read()).decode('utf-8')
+
+            # Add the icon as an image in the Plotly figure
+            fig.add_layout_image(
+                dict(
+                    source='data:image/png;base64,' + encoded_image,
+                    xref="paper", yref="paper",
+                    x=1.05, y=1,  # Positioning: slightly to the right and top
+                    sizex=0.2, sizey=0.2,  # Size of the icon
+                    xanchor="left",
+                    yanchor="top",
+                    layer="above"  # Ensure the icon is above other plot elements
+                )
+            )
+        else:
+            print(f"Icon file '{icon_path}' not found. Skipping icon overlay.")
+
     return fig
 
 def save_figure_as_jpeg(fig, filename):