Update app.py

app.py

@@ -1,40 +1,21 @@
 import streamlit as st
 import numpy as np
 import plotly.graph_objects as go
+from streamlit_plotly_events import plotly_events
 
-# Function to compute dot product
-def compute_dot_product(v1, v2):
-    return np.dot(v1, v2)
-
-# Streamlit app
-st.title("Dot Product Visualization")
+st.set_page_config(page_title="Dot Product Visualization", layout="wide")
 
 # Initialize session state
 if "v1" not in st.session_state:
-    st.session_state.v1 = np.array([1, 0])
+    st.session_state.v1 = np.array([3, 2])  # Initial position of vector 1
 if "v2" not in st.session_state:
-    st.session_state.v2 = np.array([0, 1])
-
-# Sidebar controls for vectors
-st.sidebar.header("Move Vectors")
-
-st.sidebar.subheader("Vector 1")
-x1 = st.sidebar.slider("X component", -5.0, 5.0, float(st.session_state.v1[0]), step=0.1)
-y1 = st.sidebar.slider("Y component", -5.0, 5.0, float(st.session_state.v1[1]), step=0.1)
-
-st.sidebar.subheader("Vector 2")
-x2 = st.sidebar.slider("X component ", -5.0, 5.0, float(st.session_state.v2[0]), step=0.1)
-y2 = st.sidebar.slider("Y component ", -5.0, 5.0, float(st.session_state.v2[1]), step=0.1)
-
-# Update vectors
-st.session_state.v1 = np.array([x1, y1])
-st.session_state.v2 = np.array([x2, y2])
+    st.session_state.v2 = np.array([-2, 3])  # Initial position of vector 2
+if "selected_vector" not in st.session_state:
+    st.session_state.selected_vector = None  # To track which vector is being moved
 
-# Compute dot product
-dot_product = compute_dot_product(st.session_state.v1, st.session_state.v2)
-
-# Display dot product value
-st.markdown(f"### Dot Product: `{dot_product:.2f}`")
+# Function to compute dot product
+def compute_dot_product(v1, v2):
+    return np.dot(v1, v2)
 
 # Create a plot
 fig = go.Figure()
@@ -44,8 +25,8 @@ fig.add_trace(go.Scatter(
     x=[0, st.session_state.v1[0]], 
     y=[0, st.session_state.v1[1]], 
     mode="lines+markers", 
-    marker=dict(size=8),
-    line=dict(width=3),
+    marker=dict(size=12, color="blue"),
+    line=dict(width=4, color="blue"),
     name="Vector 1"
 ))
 
@@ -54,18 +35,39 @@ fig.add_trace(go.Scatter(
     x=[0, st.session_state.v2[0]], 
     y=[0, st.session_state.v2[1]], 
     mode="lines+markers", 
-    marker=dict(size=8),
-    line=dict(width=3),
+    marker=dict(size=12, color="red"),
+    line=dict(width=4, color="red"),
     name="Vector 2"
 ))
 
 # Set axis properties
 fig.update_layout(
-    xaxis=dict(range=[-6, 6], zeroline=True, title="X-axis"),
-    yaxis=dict(range=[-6, 6], zeroline=True, title="Y-axis"),
-    title="Vector Visualization",
+    xaxis=dict(range=[-5, 5], title="X-axis"),
+    yaxis=dict(range=[-5, 5], title="Y-axis"),
+    title="Interactive Dot Product Visualization",
+    dragmode="pan",
     showlegend=True
 )
 
-# Display plot
-st.plotly_chart(fig)
+# Display the interactive plot
+st.subheader(f"Dot Product: `{compute_dot_product(st.session_state.v1, st.session_state.v2):.2f}`")
+selected_points = plotly_events(fig, click_event=True)
+
+# Check if a point is clicked
+if selected_points:
+    clicked_x, clicked_y = selected_points[0]['x'], selected_points[0]['y']
+
+    # Determine which vector is clicked
+    if np.allclose([clicked_x, clicked_y], st.session_state.v1, atol=0.5):
+        st.session_state.selected_vector = "v1"
+    elif np.allclose([clicked_x, clicked_y], st.session_state.v2, atol=0.5):
+        st.session_state.selected_vector = "v2"
+
+# Move the selected vector using sliders
+if st.session_state.selected_vector:
+    st.sidebar.subheader(f"Move {st.session_state.selected_vector}")
+    new_x = st.sidebar.slider("X component", -5.0, 5.0, float(st.session_state[st.session_state.selected_vector][0]), step=0.1)
+    new_y = st.sidebar.slider("Y component", -5.0, 5.0, float(st.session_state[st.session_state.selected_vector][1]), step=0.1)
+
+    # Update vector position
+    st.session_state[st.session_state.selected_vector] = np.array([new_x, new_y])