Create app.py

app.py

@@ -0,0 +1,155 @@
+import streamlit as st 
+import streamlit.components.v1 as components
+
+import pandas as pd
+import numpy as np
+
+import utils # personal library utils.py file
+import gmplot
+
+import os
+from dotenv import load_dotenv
+
+# Load the .env file
+load_dotenv()
+
+# Get the Hugging Face token from the environment variables
+google_map_token = os.getenv('GOOGLE_MAP_API_KEY')
+
+
+url_dict = {"Incidents": "http://datamall2.mytransport.sg/ltaodataservice/TrafficIncidents",
+            "SpeedBands": "http://datamall2.mytransport.sg/ltaodataservice/v3/TrafficSpeedBands"}
+
+
+# st.balloons()
+st.title("LTA Singapore Traffic Watch")
+
+st.write("We are so glad to see you here. ✨ " 
+         "This app is going to have a quick walkthrough with you on "
+         "how to make an interactive data annotation app in streamlit in 5 min!")
+
+st.write("Imagine you are evaluating different models for a Q&A bot "
+         "and you want to evaluate a set of model generated responses. "
+        "You have collected some user data. "
+         "Here is a sample question and response set.")
+
+
+incidents_df, speedbands_df = utils.get_lta_data(url_dict)
+
+# To distinguish accidents from roadworks
+incidents_df['Color_Type'] = incidents_df['Type'].apply(lambda x: 1 if x == "Accident" else 0)
+
+# Pack the coordinates for polygon
+speedbands_df['polygon'] = speedbands_df.apply(utils.zip_columns, axis=1)
+
+incidents_df["Issue"] = [True] * incidents_df.shape[0]
+incidents_df['Category'] = ["Accuracy"] * incidents_df.shape[0]
+
+new_df = st.data_editor(
+    incidents_df,
+    column_config = {
+        "Questions":st.column_config.TextColumn(
+            width = "medium",
+            disabled=True
+        ),
+        "Answers":st.column_config.TextColumn(
+            width = "medium",
+            disabled=True
+        ),
+        "Issue":st.column_config.CheckboxColumn(
+            "Mark as annotated?",
+            default = False
+        ),
+        "Category":st.column_config.SelectboxColumn
+        (
+        "Issue Category",
+        help = "select the category",
+        options = ['Accuracy', 'Relevance', 'Coherence', 'Bias', 'Completeness'],
+        required = False
+        )
+    }
+)
+
+# Create the map plotter:
+center_lat = incidents_df['Latitude'].iloc[incidents_df.shape[0] // 2]
+center_lng = incidents_df['Longitude'].iloc[incidents_df.shape[0] // 2]
+zoom = 5
+
+gmap = gmplot.GoogleMapPlotter(center_lat, center_lng, zoom, apikey=google_map_token, map_type='roadmap')
+
+x = incidents_df['Longitude'].to_numpy()
+y = incidents_df['Latitude'].to_numpy()
+z = incidents_df['Color_Type'].to_numpy()
+
+colors = list(map(utils.get_color_from_value, z))
+
+gmap.scatter(y, x, color=colors, size=2, marker=True)
+
+# Draw the map:
+# gmap.draw('map.html') # without speedbands
+
+polygons = speedbands_df['polygon']
+speeds = speedbands_df['SpeedBand']
+utils.plot_polygon_with_speed(polygons, speeds, gmap, 'map2.html')
+
+st.divider()
+
+st.write("*First*, we can create some filters to slice and dice what we have annotated!")
+
+col1, col2 = st.columns([1,1])
+with col1:
+    issue_filter = st.selectbox("Issues or Non-issues", options = new_df.Issue.unique())
+with col2:
+    category_filter = st.selectbox("Choose a category", options  = new_df[new_df["Issue"]==issue_filter].Category.unique())
+
+st.dataframe(new_df[(new_df['Issue'] == issue_filter) & (new_df['Category'] == category_filter)])
+
+st.markdown("")
+st.write("*Next*, we can visualize our data quickly using `st.metrics` and `st.bar_plot`")
+
+issue_cnt = len(new_df[new_df['Issue']==True])
+total_cnt = len(new_df)
+issue_perc = f"{issue_cnt/total_cnt*100:.0f}%"
+
+col1, col2 = st.columns([1,1])
+with col1:
+    st.metric("Number of responses",issue_cnt)
+with col2:
+    st.metric("Annotation Progress", issue_perc)
+
+df_plot = new_df[new_df['Category']!=''].Category.value_counts().reset_index()
+
+st.bar_chart(df_plot, x = 'Category', y = 'count')
+
+
+st.markdown("Real-Time Accident or Roadworks Monitoring using Streamlit Map")
+
+#plotting a map with the above defined points
+incidents_df = incidents_df.rename(columns={"Latitude": "latitude", "Longitude": "longitude"})
+
+st.map(incidents_df[['latitude', 'longitude']])
+
+st.divider()
+
+st.markdown("Embedded Google Maps HTML from web-hosting site")
+
+# Read the HTML file
+map_url = "https://lta-sg-archived-traffic-monitoring.tiiny.site"  # Adjust the path if necessary
+
+# HTML content with iframe to embed the Google Map
+iframe_html = f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Embedded Google Map</title>
+</head>
+<body>
+    <iframe src="{map_url}" width="100%" height="800" style="border:none;"></iframe>
+</body>
+</html>
+"""
+
+# Embed the iframe in the Streamlit app
+components.html(iframe_html, height=800)
+
+st.write("Here we are at the end of getting started with streamlit! Happy Streamlit-ing! :balloon:")