Update app.py

app.py

@@ -1,68 +1,52 @@
 import streamlit as st
-import plotly.graph_objects as go
+from PIL import Image, ImageDraw, ImageColor
 import time
 
-# Function to create the traffic signal plot
-def plot_traffic_signal(signal_color):
-    # Set up the colors for the signal
-    colors = {'red': 'red', 'yellow': 'yellow', 'green': 'green'}
-    
-    # Create the figure
-    fig = go.Figure()
+# Function to generate traffic signal image based on the current color
+def generate_traffic_signal(signal_color):
+    # Create a blank image with a white background
+    img = Image.new("RGB", (200, 400), "white")
+    draw = ImageDraw.Draw(img)
 
-    # Create the signal boxes
-    fig.add_shape(
-        type="rect", 
-        x0=0, y0=3, x1=1, y1=4, 
-        line=dict(color="black", width=2),
-        fillcolor=colors['red'] if signal_color == 'red' else 'gray'
-    )
-    fig.add_shape(
-        type="rect", 
-        x0=0, y0=2, x1=1, y1=3, 
-        line=dict(color="black", width=2),
-        fillcolor=colors['yellow'] if signal_color == 'yellow' else 'gray'
-    )
-    fig.add_shape(
-        type="rect", 
-        x0=0, y0=1, x1=1, y1=2, 
-        line=dict(color="black", width=2),
-        fillcolor=colors['green'] if signal_color == 'green' else 'gray'
-    )
-    
-    # Layout setup
-    fig.update_layout(
-        title="Animated Traffic Signal",
-        xaxis=dict(showgrid=False, zeroline=False),
-        yaxis=dict(showgrid=False, zeroline=False),
-        width=200,
-        height=400,
-        showlegend=False,
-        plot_bgcolor='white',
-        margin=dict(l=0, r=0, t=50, b=50)
-    )
+    # Define the rectangle dimensions for the lights
+    light_width, light_height = 160, 80
+    margin = 20
 
-    return fig
+    # Define the positions of the lights
+    positions = [(margin, margin), (margin, margin + light_height + margin), (margin, 2 * (light_height + margin))]
+    colors = ['red', 'yellow', 'green']
+
+    # Draw the lights based on the current signal color
+    for i, color in enumerate(colors):
+        # Set the fill color to the current light color if it's the active light
+        fill_color = signal_color if signal_color == color else "gray"
+        draw.rectangle([positions[i], (positions[i][0] + light_width, positions[i][1] + light_height)], fill=fill_color)
+        
+    return img
 
 # Streamlit UI
 st.title("Animated Traffic Signal")
 
-# Information
+# Information text
 st.markdown("""
-    This Streamlit app shows an animated traffic signal that cycles through 
-    **red**, **yellow**, and **green** colors every few seconds.
+    This Streamlit app simulates an animated traffic signal.
+    The signal will cycle through **Red**, **Yellow**, and **Green** every few seconds.
 """)
 
-# Control the traffic light animation with a loop
-st.write("The traffic light will cycle every 3 seconds between red, yellow, and green.")
+# Display the animation
+signal_colors = ['red', 'yellow', 'green']
+
+# Run the animation in a loop
+st.write("The traffic light will cycle between red, yellow, and green every 3 seconds.")
 
-# Run a loop that updates the signal color
 while True:
-    for color in ['red', 'yellow', 'green']:
-        # Plot the traffic signal with the current color
-        fig = plot_traffic_signal(color)
-        st.plotly_chart(fig, use_container_width=True)
+    for color in signal_colors:
+        # Generate the traffic signal image
+        traffic_signal_img = generate_traffic_signal(color)
+
+        # Display the image using Streamlit
+        st.image(traffic_signal_img, caption=f"Traffic Signal: {color.capitalize()}", use_column_width=True)
 
-        # Wait for 3 seconds before switching to the next color
+        # Wait for 3 seconds before changing to the next signal
         time.sleep(3)