This is great and plotly

Dockerfile

@@ -37,6 +37,7 @@ RUN python -m pip install git+https://github.com/PatBall1/detectree2.git
 RUN python -m pip install opencv-python
 RUN python -m pip install requests
 
+RUN python -m pip install plotly
 RUN python -m pip install gradio
 
 COPY --chown=user . $HOME/app

main.py

@@ -8,8 +8,8 @@ import gradio as gr
 import rasterio
 from rasterio.plot import show
 import geopandas as gpd
-import matplotlib.pyplot as plt
 from shapely.geometry import Point
+import plotly.grraph_objects as go
 
 
 
@@ -97,54 +97,53 @@ def greet(image_path: str):
     # Set the interactive backend to Qt5Agg
     # plt.switch_backend('Qt5Agg') # You have to install PyQt5
 
-    # Enable interactive mode
-    plt.ion()
-
     # Plotting
-    fig, ax = plt.subplots(figsize=(10, 10))
-
-    # Plot the RGB TIF image
-    show(tif_image, transform=tif_transform, ax=ax)
-
-    # Plot the GeoJSON polygons
-    geojson_data.plot(ax=ax, facecolor='none', edgecolor='red')
+    fig = go.Figure()
+    fig.add_trace(go.Image(z=tif_image.transpose((1, 2, 0))))
+    for idx, row in geojson_data.iterrows():
+        geojson_dict = json.loads(row['geometry'].to_json())
+        fig.add_trace(go.Scattergeo(
+            lon=[coord[0] for coord in geojson_dict['coordinates'][0]],
+            lat=[coord[1] for coord in geojson_dict['coordinates'][0]],
+            mode='lines',
+            line=dict(color='red'),
+            name=f'Polygon {idx}'
+        ))
 
     # Set plot title
-    ax.set_title('TIF Image with Tree Crowns Overlay')
-
-    # Create an annotation box
-    annot = ax.annotate("", xy=(0, 0), xytext=(20, 20),
-                    textcoords="offset points",
-                    bbox=dict(boxstyle="round", fc="w"),
-                    arrowprops=dict(arrowstyle="->"))
-    annot.set_visible(False)
-
-    # Create a function to handle mouse clicks
-    def on_click(event):
-        if event.inaxes is not None:
-            # Get the coordinates of the click
-            click_point = Point(event.xdata, event.ydata)
-            # Check if the click is within any of the polygons
-            for idx, row in geojson_data.iterrows():
-                if row['geometry'].contains(click_point):
-                    # Access the properties dictionarㅋ
-                    # Extract species and confidence score
-                    species_info = row['species']
-                    confidence_score = row['Confidence_score']
-                    # Display information about the clicked polygon
-                    annot.xy = (event.xdata, event.ydata)
-                    text = f"Polygon {idx}\n\nConfidence:\n{confidence_score}\n\nSpecies and their probability:\n{species_info}"
-                    annot.set_text(text)
-                    annot.set_visible(True)
-                    fig.canvas.draw()
-                    break
-    
+    fig.update_layout(
+        title='TIF Image with Tree Crowns Overlay',
+        geo=dict(
+            projection_scale=1,
+            center=dict(
+                lon=tif_transform.c + (tif_transform.a * tif_image.width / 2),
+                lat=tif_transform.f + (tif_transform.e * tif_image.height / 2)
+            )
+        )
+    )
+
+    # Function to handle click events
+    def on_click(trace, points, state):
+        if points.point_inds:
+            idx = points.point_inds[0]
+            row = geojson_data.iloc[idx]
+            species_info = row['species']
+            confidence_score = row['Confidence_score']
+            text = f"Polygon {idx}\n\nConfidence:\n{confidence_score}\n\nSpecies and their probability:\n{species_info}"
+            fig.update_layout(annotations=[dict(
+                x=points.xs[0],
+                y=points.ys[0],
+                text=text,
+                showarrow=True,
+                arrowhead=7
+            )])
+
     # Connect the click event to the handler function
-    # cid = fig.canvas.mpl_connect('button_press_event', on_click)
+    for trace in fig.data:
+        trace.on_click(on_click)
 
-    figure = plt.figure()
+    return fig
 
-    return figure
 
 #tif_file_name = "TreeCrownVectorDataset_761588_9673769_20_20_32720.tif"
 #tif_input = "/Users/jonathanseele/ETH/Hackathons/EcoHackathon/WeCanopy/test/" + tif_file_name