basic information in the app view; unlinked (both model and data)

app.py

@@ -1,69 +1,149 @@
+import time
+
+import altair as alt
+import joblib
+import numpy as np
+import pandas as pd
+import streamlit as st
+from sklearn.linear_model import LinearRegression
+import matplotlib.pyplot as plt
+import plotly.graph_objects as go
+from helper_functions import custom_metric_box, pollution_box
+import plotly.graph_objects as go
 import streamlit as st
 import pandas as pd
 import numpy as np
-from sklearn.linear_model import LinearRegression
-import joblib
 
+st.set_page_config(
+    page_title="Utrecht Pollution Dashboard",
+    page_icon="🏂��🌱",
+    layout="wide",
+    initial_sidebar_state="expanded")
+
+alt.themes.enable("dark")
 # App Title
-st.title("Utrecht Pollution Prediction")
-
-# Load the trained model
-@st.cache(allow_output_mutation=True)
-def load_model():
-    try:
-        # Try loading a pre-trained model
-        model = joblib.load("path_to_your_model/linear_regression_model.pkl")
-    except:
-        # If the model is not available, train a simple Linear Regression model as a fallback
-        st.write("No pre-trained model found. Training a new Linear Regression model...")
-        
-        # Fallback - Generate some random training data for demonstration purposes
-        # In reality, replace this with your actual data
-        np.random.seed(0)
-        X_train = np.random.rand(100, 3)  # 100 samples, 3 features
-        y_train = 3*X_train[:, 0] + 2*X_train[:, 1] + X_train[:, 2]  # Example: linear relationship
-        
-        # Train a linear regression model
-        model = LinearRegression()
-        model.fit(X_train, y_train)
-        
-        # Optionally, save the trained model to use later
-        joblib.dump(model, "linear_regression_model.pkl")
-
-    return model
-
-model = load_model()
-
-# Explain the app
-st.write("""
-### Predict Pollution Levels in Utrecht
-This app allows you to input environmental features to predict pollution levels using a simple Linear Regression model.
-""")
-
-# Input features needed for your model
-def get_user_input():
-    feature_1 = st.number_input('Temperature (°C)', min_value=-10.0, max_value=40.0, value=20.0)
-    feature_2 = st.number_input('Wind Speed (km/h)', min_value=0.0, max_value=100.0, value=10.0)
-    feature_3 = st.number_input('Humidity (%)', min_value=0.0, max_value=100.0, value=50.0)
+st.title("Utrecht Pollution Dashboard 🌱")
+
+@st.cache_resource(ttl=6*300)  # Reruns every 6 hours
+def run_model():
+    # Load or train your model (pretrained model in this case)
+    model = joblib.load("linear_regression_model.pkl")
     
-    # Create a DataFrame with user inputs
-    input_data = {'Temperature': feature_1,
-                  'Wind Speed': feature_2,
-                  'Humidity': feature_3}
+    # Static input values
+    input_data = pd.DataFrame({
+        'Temperature': [20.0],
+        'Wind Speed': [10.0],
+        'Humidity': [50.0]
+    })
     
-    features = pd.DataFrame([input_data])
-    return features
+    # Run the model with static input
+    prediction = model.predict(input_data)
+    return prediction
+col1, col2 = st.columns((1,1))
+# Create a 3-column layout
+with col1:
+    st.subheader('Current Weather')
+    col1, col2, col3 = st.columns(3)
+
+    # First column
+    with col1:
+        custom_metric_box(label="Temperature", value="2 °C", delta="-3 °C")
+        custom_metric_box(label="Humidity", value="60 %", delta="-1 %")
+
+    # Second column
+    with col2:
+        custom_metric_box(label="Pressure", value="1010 hPa", delta="+2 hPa")
+        custom_metric_box(label="Precipitation", value="5 mm", delta="-1 mm")
+
+    # Third column
+    with col3:
+        custom_metric_box(label="Solar Radiation", value="200 W/m²", delta="-20 W/m²")
+        custom_metric_box(label="Wind Speed", value="15 km/h", delta="-2 km/h")
+
+    st.subheader('Current Pollution Levels')
+    col1, col2 = st.columns((1,1))
+    # Display the prediction
+    #st.write(f'Predicted Pollution Level: {prediction[0]:.2f}')
+    with col1:
+        pollution_box(label="O<sub>3</sub>", value="37 µg/m³", delta="+2 µg/m³")
+    with col2:
+        pollution_box(label="NO<sub>2</sub>", value="28 µg/m³", delta="+3 µg/m³")
+
+
+prediction = run_model()  # Assuming you have a function run_model()
+# Sample data (replace with your actual data)
+dates_past = pd.date_range(end=pd.Timestamp.today(), periods=7).to_list()
+dates_future = pd.date_range(start=pd.Timestamp.today() + pd.Timedelta(days=1), periods=3).to_list()
+
+# O3 and NO2 values for the past 7 days
+o3_past_values = [30, 32, 34, 33, 31, 35, 36]
+no2_past_values = [20, 22, 21, 23, 22, 24, 25]
+
+# Predicted O3 and NO2 values for the next 3 days
+o3_future_values = [37, 38, 40]
+no2_future_values = [26, 27, 28]
 
-# Get user input
-input_df = get_user_input()
+# Combine dates and values
+dates = dates_past + dates_future
+o3_values = o3_past_values + o3_future_values
+no2_values = no2_past_values + no2_future_values
 
-# Display user input
-st.subheader('User Input:')
-st.write(input_df)
+# Create a DataFrame
+df = pd.DataFrame({
+    'Date': dates,
+    'O3': o3_values,
+    'NO2': no2_values
+})
 
-# Make predictions using the linear regression model
-prediction = model.predict(input_df)
+st.subheader('O3 and NO2 Prediction')
+# Create two columns for two separate graphs
+subcol1, subcol2 = st.columns(2)
+# Plot O3 in the first subcolumn
+with subcol1:
+    fig_o3 = go.Figure()
+    fig_o3.add_trace(go.Scatter(x=df['Date'], y=df['O3'],
+                                mode='lines+markers',
+                                name='O3',
+                                line=dict(color='rgb(0, 191, 255)', width=4)))  # Bright blue
+    # Add a vertical line for predictions (today's date)
+    fig_o3.add_shape(
+        dict(
+            type="line",
+            x0=pd.Timestamp.today(), x1=pd.Timestamp.today(),
+            y0=min(o3_values), y1=max(o3_values),
+            line=dict(color="White", width=3, dash="dash"),
+        )
+    )
+    fig_o3.update_layout(
+        plot_bgcolor='rgba(0, 0, 0, 0)',  # Transparent background
+        paper_bgcolor='rgba(0, 0, 0, 0)',  # Transparent paper background
+        yaxis_title="O3 Concentration (µg/m³)",
+        font=dict(size=14),
+        hovermode="x unified"
+    )
+    st.plotly_chart(fig_o3)
 
-# Display the prediction
-st.subheader('Prediction:')
-st.write(f'Predicted Pollution Level: {prediction[0]:.2f}')
+# Plot NO2 in the second subcolumn
+with subcol2:
+    fig_no2 = go.Figure()
+    fig_no2.add_trace(go.Scatter(x=df['Date'], y=df['NO2'],
+                                    mode='lines+markers',
+                                    name='NO2',
+                                    line=dict(color='rgb(255, 20, 147)', width=4)))  # Bright pink
+    # Add a vertical line for predictions (today's date)
+    fig_no2.add_shape(
+        dict(
+            type="line",
+            x0=pd.Timestamp.today(), x1=pd.Timestamp.today(),
+            y0=min(no2_values), y1=max(no2_values),
+            line=dict(color="White", width=3, dash="dash"),
+        )
+    )
+    fig_no2.update_layout(
+        plot_bgcolor='rgba(0, 0, 0, 0)',  # Transparent background
+        paper_bgcolor='rgba(0, 0, 0, 0)',  # Transparent paper background
+        yaxis_title="NO2 Concentration (µg/m³)",
+        font=dict(size=14),
+        hovermode="x unified"
+    )
+    st.plotly_chart(fig_no2)

helper_functions.py

@@ -0,0 +1,43 @@
+import streamlit as st
+
+
+# Custom function to create styled metric boxes with subscripts, smaller label, and larger metric
+def custom_metric_box(label, value, delta):
+    st.markdown(f"""
+        <div style="
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(6px);
+            -webkit-backdrop-filter: blur(6px);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            padding: 15px;
+            margin-bottom: 10px;
+            width: 200px;  /* Fixed width */
+        ">
+            <h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4>  <!-- Smaller label -->
+            <p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p>  <!-- Larger metric -->
+            <p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+# Custom function to create pollution metric boxes with side-by-side layout for label and value
+# Custom function to create pollution metric boxes with side-by-side layout and fixed width
+def pollution_box(label, value, delta):
+    st.markdown(f"""
+        <div style="
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            padding: 15px;
+            margin-bottom: 10px;
+            width: 300px;  /* Fixed width */
+        ">
+            <h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4>  <!-- Smaller label -->
+            <p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p>  <!-- Larger metric -->
+            <p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p>
+        </div>
+        """, unsafe_allow_html=True)

linear_regression_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dbe290cfbb7bbd4766aba92ca738296536a79b435b9d9d51e0541d88340261dc
+size 593

requirements.txt

@@ -2,4 +2,8 @@ streamlit
 pandas
 numpy
 joblib  # or pickle if you're using that to load the model
-scikit-learn # for mock model
+scikit-learn # for mock model
+time
+altair
+matplotlib
+plotly