import streamlit code from streamlit branch

.gitattributes

@@ -1 +1,7 @@
+*.png filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
+architecture.png filter=lfs diff=lfs merge=lfs -text
+data/2024_semester2_merged_v2.parquet filter=lfs diff=lfs merge=lfs -text
+data/meteo_cleaned_pivoted.parquet filter=lfs diff=lfs merge=lfs -text
+data/pollutants_cleaned_pivoted.parquet filter=lfs diff=lfs merge=lfs -text
+data/traffic_cleaned_pivoted.parquet filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -12,7 +12,9 @@ RUN pip install --no-cache-dir --upgrade pip \
     && pip install --no-cache-dir -r requirements.txt
 
 # Make a volume mount point for the input/output CSV files
-VOLUME ["/app/input_data.csv", "/app/output_data.csv"]
+# VOLUME ["/app/input_data.csv", "/app/output_data.csv"]
+
+EXPOSE 7860
 
 # Run the application (by default, run the main ETL process)
-CMD ["python", "main.py"]
+CMD ["streamlit", "run", "streamlit/Home.py", "--server.port=7860", "--server.address=0.0.0.0"]

README.md

@@ -1,3 +1,14 @@
+---
+title: Quality Air Streamlit App
+emoji: 💨
+colorFrom: green
+colorTo: blue
+sdk: streamlit
+python_version: "3.9"
+app_file: streamlit/Home.py
+pinned: false
+---
+
 # Guide de Configuration Jenkins et Pipeline CI/CD
 
 ## 📌 Introduction
@@ -14,6 +25,9 @@ Ce projet implémente un pipeline CI/CD dans Jenkins pour exécuter un processus
 ├── jenkins/
 │   └── Jenkinsfile                 # Pipeline Jenkins pour CI/CD
 │
+├── streamlit/
+│   └── (streamlit files)           # Each file corresponds to a panel in the streamlit app
+│
 ├── tests/
 │   ├── Dockerfile                  # Dockerfile pour lancer les tests
 │   ├── requirements.txt            # Dépendances spécifiques aux tests
@@ -83,3 +97,19 @@ Ou ajoutez-les directement dans Jenkins :
 Ce pipeline CI/CD garantit l'intégration et le déploiement automatisé du processus ETL en utilisant Jenkins et Docker.
 
 🔥 N'hésitez pas à adapter les configurations en fonction de votre environnement !
+
+
+## 🏗️ A word on streamlit
+
+To get the streamlit app to function on HuggingFace, we need to add the HF repo as an remote repository:
+```
+git remote set-url --add origin https://huggingface.co/spaces/martper56/streamlit_app
+````
+
+Then we need to push the code in the development branch as the main branch on streamlit:
+
+```
+git push -f https://huggingface.co/spaces/martper56/streamlit_app development:main
+```
+
+

requirements.txt

@@ -5,4 +5,7 @@ apache-airflow-providers-postgres
 apache-airflow-providers-amazon
 scikit-learn
 psycopg[binary]
-python-dotenv
+python-dotenv
+streamlit
+matplotlib
+boto3

streamlit/Home.py

@@ -0,0 +1,51 @@
+import streamlit as st
+
+##################################################
+# Config default settings of the page.
+##################################################
+st.set_page_config(page_title="Jedha dsl-ft-32 Final Project", layout="wide", )
+
+##################################################
+# App
+##################################################
+st.title("Welcome to our final project at Jedha Bootcamp")
+st.markdown("Permettez-nous de nous presenter !")
+st.markdown("")
+st.markdown(
+    "Pooven CALINGHEE - [LinkedIn](https://www.linkedin.com/in/pooven-calinghee-87636479/) - 10+ annees dans le developpement web avec specialisation AWS et cloud")
+st.markdown(
+    " Martin PERON - [LinkedIN](https://www.linkedin.com/in/martin-péron-b3b9725b/) - 10+ annees dans la data. Data scientist puis ML engineer")
+st.markdown(
+    "Adrien LEQUILLER - [LinkedIn](https://www.linkedin.com/in/adrien-lequiller-4a9b6a81/) - 8+ annees en tant que Data analyst")
+st.markdown(
+    "Alex LASNIER - [LinkedIn](https://www.linkedin.com/in/alex-lasnier) - 10+ annees dans l'industrie dont 3 dans le domaine de la data")
+st.markdown("")
+
+st.header("Prevision de la qualite de l'air")
+st.markdown(
+    "Le but du projet final est de développer d’une application de Machine Learning embarquée permettant d’anticiper les risques de pollution sur l’ensemble du territoire français, à partir des données météorologiques et du trafic routier")
+
+st.markdown("")
+st.markdown("")
+st.markdown("")
+
+# left_co, cent_co, last_co = st.columns(3)
+# with cent_co:
+st.image("architecture.png")
+st.markdown("")
+st.markdown("")
+st.markdown("")
+
+st.markdown(
+    "Apres un premier nettoyage des donnees et le merge en un seul fichier parquet, premiers processing pour entrainer le(s) modele(s) de ML. \n\n"
+    "Selection des features pour les predictions ==> température, humidité, vent, pression cote meteo et niveau de traffic cote traffic\n\n"
+    "Les outputs seront donc la prediction des niveaux des polluants ==> NOx, O3, PM10 et PM25\n\n"
+    "Selection de l'API pour faire du temps reel ==> Rennes")
+
+st.markdown("")
+st.markdown("")
+st.markdown("")
+st.markdown("Main page = presentation equipe et projet \n\n"
+            "Ajout de la prediction sur main page ou sur une autre page??\n\n"
+            "Une page pour montrer les sources apres nettoyage ==> OK\n\n"
+            "")

streamlit/pages/Predictions.py

@@ -0,0 +1,157 @@
+import streamlit as st
+import boto3
+import pandas as pd
+import json
+import matplotlib.pyplot as plt
+
+# Titre de la page
+st.title("Predictions - ville de Rennes")
+
+# Paramètres S3 (à adapter ou utiliser variables d'environnement pour plus de sécurité)
+AWS_ACCESS_KEY_ID = "AKIAQJXL2QR4KZ2RZYW4"
+AWS_SECRET_ACCESS_KEY = "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"
+BUCKET_NAME = "jedha-quality-air"
+PREFIX = "datasets/output/"
+
+# FILE_KEY = "datasets/output/20250711-064810_prediction_data.json"
+
+
+# @st.cache_data(show_spinner=True)
+def load_data_from_s3():
+    s3 = boto3.client(
+        "s3",
+        aws_access_key_id=AWS_ACCESS_KEY_ID,
+        aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
+    )
+    response = s3.list_objects_v2(Bucket=BUCKET_NAME, Prefix=PREFIX)
+
+    # Vérifie s'il y a des objets
+    if "Contents" in response:
+        # Trie les objets par date de dernière modification (LastModified)
+        latest_file = max(response["Contents"], key=lambda x: x["LastModified"])
+        latest_key = latest_file["Key"]
+
+        # Récupère l'objet
+        latest_object = s3.get_object(Bucket=BUCKET_NAME, Key=latest_key)
+        content = latest_object["Body"].read().decode("utf-8")
+        print("Latest file key:", latest_key)
+    else:
+        print("Aucun fichier trouvé dans ce dossier.")
+    # response = s3.get_object(Bucket=BUCKET_NAME, Key=FILE_KEY)
+    # content = response["Body"].read().decode("utf-8")
+    data = json.loads(content)
+
+    # Extraction date et heure du nom fichier
+    filename = latest_key.split("/")[-1]
+    datetime_str = filename.split("_")[0]  # "20250711-064810"
+    date_str = datetime_str[:8]
+    time_str = datetime_str[9:]
+    formatted_date = pd.to_datetime(date_str, format="%Y%m%d").date()
+    formatted_time = pd.to_datetime(time_str, format="%H%M%S").time()
+
+    df = pd.DataFrame([data])
+    df["date"] = formatted_date
+    df["heure UTC"] = formatted_time
+    return df, formatted_date, formatted_time
+
+
+# Chargement des données
+df, formatted_date, formatted_time = load_data_from_s3()
+pollution_seuils = {
+    "PM25": [
+        (0, 10, "#4ee3dc", "Bon"),
+        (10, 20, "#53c8b5", "Moyen"),
+        (20, 25, "#f3dd57", "Dégradé"),
+        (25, 50, "#f47d61", "Mauvais"),
+        (50, 75, "#b22133", "Très mauvais"),
+        (75, float("inf"), "#7d2e8e", "Extrêmement mauvais"),
+    ],
+    "PM10": [
+        (0, 20, "#4ee3dc", "Bon"),
+        (20, 40, "#53c8b5", "Moyen"),
+        (40, 50, "#f3dd57", "Dégradé"),
+        (50, 100, "#f47d61", "Mauvais"),
+        (100, 150, "#b22133", "Très mauvais"),
+        (150, float("inf"), "#7d2e8e", "Extrêmement mauvais"),
+    ],
+    "NOX": [
+        (0, 40, "#4ee3dc", "Bon"),
+        (40, 90, "#53c8b5", "Moyen"),
+        (90, 120, "#f3dd57", "Dégradé"),
+        (120, 230, "#f47d61", "Mauvais"),
+        (230, 340, "#b22133", "Très mauvais"),
+        (340, float("inf"), "#7d2e8e", "Extrêmement mauvais"),
+    ],
+    "O3": [
+        (0, 50, "#4ee3dc", "Bon"),
+        (50, 100, "#53c8b5", "Moyen"),
+        (100, 130, "#f3dd57", "Dégradé"),
+        (130, 240, "#f47d61", "Mauvais"),
+        (240, 380, "#b22133", "Très mauvais"),
+        (380, float("inf"), "#7d2e8e", "Extrêmement mauvais"),
+    ],
+}
+
+# Fonction pour récupérer la couleur selon les seuils
+def get_pollution_color(polluant, valeur):
+    seuils = pollution_seuils.get(polluant)
+    for bas, haut, couleur, libelle in seuils:
+        if bas <= valeur < haut:
+            return couleur, libelle
+    return "#cccccc"  # fallback gris
+# Affichage tableau
+st.subheader("Données de prédiction")
+st.dataframe(df)
+st.markdown("")
+st.markdown("")
+st.markdown("")
+
+# Création du plot
+polluants = ["O3", "NOX", "PM10", "PM25"]
+valeurs = [df[col].iloc[0] for col in polluants]
+
+couleurs = ["#8da0cb", "#fc8d62", "#66c2a5", "#a6d854"]  # tons pastel et mats
+
+fig, ax = plt.subplots(figsize=(6, 3))  # taille plus compacte
+bars = ax.bar(polluants, valeurs, color=couleurs)
+
+# Titre avec date et heure
+titre = f"Pollution le {formatted_date} à {formatted_time.strftime('%H:%M:%S')}"
+ax.set_title(titre, fontsize=14)
+ax.set_xlabel("Polluants", fontsize=12)
+ax.set_ylabel("Valeurs", fontsize=12)
+
+# Valeurs sur barres
+max_val = max(valeurs)
+for bar, val in zip(bars, valeurs):
+    height = bar.get_height()
+    ax.text(
+        bar.get_x() + bar.get_width() / 2,
+        height + max_val * 0.02,
+        f"{val:.1f}",
+        ha="center",
+        fontsize=8,
+    )
+
+# Centrage avec colonnes Streamlit
+left_co, cent_co, right_co = st.columns([1, 2, 1])
+
+with cent_co:
+    st.pyplot(fig)
+
+st.subheader("Qualité de l’air")
+
+for i, polluant in enumerate(polluants):
+    val = valeurs[i]
+    color, libelle = get_pollution_color(polluant, val)
+
+    st.markdown(
+        f"""
+        <div style='background-color:{color};padding:10px 15px;
+                    margin:6px 0;border-radius:10px;
+                    color:black;font-weight:bold;font-size:16px;'>
+            {polluant} : {val:.1f} µg/m³ - {libelle}
+        </div>
+        """,
+        unsafe_allow_html=True
+    )

streamlit/pages/Sources.py

@@ -0,0 +1,36 @@
+import os
+import streamlit as st
+import pandas as pd
+
+# Titre de l'application
+st.title("Fichiers sources d'entrainement (apres premier nettoyage)")
+
+##################################################
+st.subheader("Pollutants")
+##################################################
+# Chemin du fichier
+file_path_pollutants = os.path.join("data", "pollutants_cleaned_pivoted.parquet")
+# lire dans un DataFrame
+data_pollutants = pd.read_parquet(file_path_pollutants)
+# Afficher le DataFrame
+st.write(data_pollutants)
+
+##################################################
+st.subheader("Meteo")
+##################################################
+# Chemin du fichier
+file_path_meteo = os.path.join("data", "meteo_cleaned_pivoted.parquet")
+# lire dans un DataFrame
+data_meteo = pd.read_parquet(file_path_meteo)
+# Afficher le DataFrame
+st.write(data_meteo)
+
+##################################################
+st.subheader("Traffic")
+##################################################
+# Chemin du fichier
+file_path_traffic = os.path.join("data", "traffic_cleaned_pivoted.parquet")
+# lire dans un DataFrame
+data_traffic = pd.read_parquet(file_path_traffic)
+# Afficher le DataFrame
+st.write(data_traffic)