remove plotly

app.py

@@ -1,15 +1,16 @@
-import networkx as nx
-import plotly.graph_objs as go
-from plotly.subplots import make_subplots
-from typing import Dict, Tuple, List, Any
 import gradio as gr
-import plotly.io as pio
+import networkx as nx
+import matplotlib.pyplot as plt
+from io import BytesIO
+from PIL import Image
+import matplotlib.patches as mpatches
+import mplcursors
 
 # Initialize the lesson plan graph as a directed graph
-lesson_graph: nx.DiGraph = nx.DiGraph()
+lesson_graph = nx.DiGraph()
 
 # Define color map for node types
-color_map: Dict[str, str] = {
+color_map = {
     "User": "#FF9999",  # Light Red
     "Subject": "#66B2FF",  # Light Blue
     "Grade Level": "#99FF99",  # Light Green
@@ -20,16 +21,7 @@ color_map: Dict[str, str] = {
     "School Board": "#CCCCCC"  # Light Gray
 }
 
-def add_to_graph(
-    teacher_name: str,
-    subject: str,
-    grade_level: str,
-    learning_objective: str,
-    activity: str,
-    assessment: str,
-    resource: str,
-    school_board: str
-) -> Tuple[str, go.Figure]:
+def add_to_graph(teacher_name, subject, grade_level, learning_objective, activity, assessment, resource, school_board):
     global lesson_graph
     
     # Clear previous graph
@@ -56,102 +48,53 @@ def add_to_graph(
     lesson_graph.add_edge(learning_objective, school_board, relationship="ALIGNS_WITH")
     
     # Generate search string
-    search_string: str = f"{subject} {grade_level} {learning_objective} {activity} {resource}".strip()
+    search_string = f"{subject} {grade_level} {learning_objective} {activity} {resource}".strip()
     
-    # Create Plotly graph
-    fig: go.Figure = create_plotly_graph(lesson_graph)
+    # Visualize the graph using Matplotlib
+    fig, ax = plt.subplots(figsize=(14, 10))
+    pos = nx.spring_layout(lesson_graph, k=0.9, iterations=50)
     
-    return search_string, fig
-
-def create_plotly_graph(graph: nx.DiGraph) -> go.Figure:
-    pos: Dict[Any, Tuple[float, float]] = nx.spring_layout(graph, seed=42)  # Adding seed for consistent layout
+    # Draw nodes with color coding
+    node_colors = [color_map[lesson_graph.nodes[node]['type']] for node in lesson_graph.nodes()]
+    nx.draw_networkx_nodes(lesson_graph, pos, node_color=node_colors, node_size=3000, alpha=0.8, ax=ax)
     
-    # Edge trace initialization with descriptive labels
-    edge_x, edge_y = [], []
-    edge_text = []
-
-    for edge in graph.edges(data=True):
-        x0, y0 = pos[edge[0]]
-        x1, y1 = pos[edge[1]]
-        edge_x.extend([x0, x1, None])
-        edge_y.extend([y0, y1, None])
-        edge_text.append(f"{edge[0]} -> {edge[1]}: {edge[2]['relationship']}")  # Adding edge relationship label
-
-    # Create edge trace with hover text for relationship descriptions
-    edge_trace = go.Scatter(
-        x=edge_x,
-        y=edge_y,
-        line=dict(width=1.0, color='#888'),
-        hoverinfo='text',
-        text=edge_text,
-        mode='lines',
-        name="Edges"
-    )
-
-    # Node trace initialization with improved style
-    node_x, node_y, node_text, node_color = [], [], [], []
-
-    for node in graph.nodes():
-        x, y = pos[node]
-        node_x.append(x)
-        node_y.append(y)
-        node_text.append(
-            f"Node: {node}<br>Type: {graph.nodes[node]['type']}<br>{graph.nodes[node].get('description', '')}"
-        )
-        node_color.append(color_map[graph.nodes[node]['type']])
-
-    # Create node trace with enhanced marker styles and hover info
-    node_trace = go.Scatter(
-        x=node_x,
-        y=node_y,
-        text=node_text,
-        mode='markers',
-        hoverinfo='text',
-        marker=dict(
-            showscale=True,
-            colorscale='Viridis',
-            reversescale=True,
-            color=node_color,
-            size=20,  # Increased size for better visibility
-            line=dict(width=3, color='DarkSlateGrey')  # Added border for better contrast
-        ),
-        name="Nodes"
-    )
-
-    # Create the figure and add traces with enhanced layout and better spacing
-    fig = go.Figure()
-    fig.add_trace(edge_trace)
-    fig.add_trace(node_trace)
-    fig.update_layout(
-        title='Your Educational Landscape',
-        titlefont_size=20,
-        showlegend=True,
-        hovermode='closest',
-        margin=dict(b=20, l=5, r=5, t=40),
-        annotations=[dict(
-            text="",
-            showarrow=False,
-            xref="paper", yref="paper",
-            x=0.005, y=-0.002
-        )],
-        xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-        yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-        plot_bgcolor='rgba(240, 240, 240, 0.95)'
-    )
-
-    # Add legend groups
-    for node_type, color in color_map.items():
-        fig.add_trace(go.Scatter(
-            x=[],
-            y=[],
-            mode='markers',
-            marker=dict(size=10, color=color),
-            name=node_type
-        ))
-
-    return fig
+    # Draw edges with arrows to show direction
+    nx.draw_networkx_edges(lesson_graph, pos, edge_color='gray', arrows=True, arrowsize=20, ax=ax)
+    nx.draw_networkx_labels(lesson_graph, pos, font_size=10, font_weight="bold", ax=ax)
+    
+    # Add edge labels
+    edge_labels = nx.get_edge_attributes(lesson_graph, 'relationship')
+    nx.draw_networkx_edge_labels(lesson_graph, pos, edge_labels=edge_labels, font_size=8, ax=ax)
+    
+    # Create a legend that categorizes node types
+    legend_elements = [mpatches.Patch(color=color, label=node_type) for node_type, color in color_map.items()]
+    plt.legend(handles=legend_elements, loc='upper left', bbox_to_anchor=(1, 1), title="Node Types")
+    
+    plt.title("Your Educational Landscape", fontsize=16)
+    plt.axis('off')
+    plt.tight_layout()
+    
+    # Add hover functionality
+    cursor = mplcursors.cursor(hover=True)
+    
+    @cursor.connect("add")
+    def on_add(sel):
+        node = list(lesson_graph.nodes())[sel.target.index]
+        node_data = lesson_graph.nodes[node]
+        sel.annotation.set_text(f"Node: {node}\nType: {node_data['type']}\n{node_data.get('description', '')}")
+    
+    # Save the plot to a bytes object
+    buf = BytesIO()
+    plt.savefig(buf, format="png", dpi=300, bbox_inches="tight")
+    buf.seek(0)
+    plt.close(fig)
+    
+    # Convert BytesIO to PIL Image
+    image = Image.open(buf)
+    
+    return search_string, image
 
-def clear_graph() -> str:
+def clear_graph():
     global lesson_graph
     lesson_graph.clear()
     return "Landscape cleared. You can start a new lesson plan."
@@ -184,7 +127,7 @@ with demo:
         clear_btn = gr.Button("Clear Landscape")
     
     search_output = gr.Textbox(label="Content Discovery Search String")
-    graph_output = gr.Plot(label="Your Educational Landscape")
+    graph_output = gr.Image(label="Your Educational Landscape")
     message_output = gr.Textbox(label="Landscape Status")
     
     generate_btn.click(
@@ -196,5 +139,4 @@ with demo:
     clear_btn.click(clear_graph, outputs=message_output)
 
 # Launch the EduScape app
-if __name__ == "__main__":
-    demo.launch()
+demo.launch()