TATOU_ModIA_Exam.py

import streamlit as st
import joblib
import numpy as np
import tensorflow as tf 
import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt

# Configuration de la page
st.set_page_config(
    page_title="Heart Disease Prediction App", 
    page_icon="💉",
    layout="wide",
)

# Barre de menu horizontal
def render_navigation():
    cols = st.columns(3)  
    with cols[0]:
        if st.button("Welcome", use_container_width=True):
            st.session_state.page = "Welcome"
    with cols[1]:
        if st.button("Statistiques", use_container_width=True):
            st.session_state.page = "Statistiques"
    with cols[2]:
        if st.button("ML Predictions", use_container_width=True):
            st.session_state.page = "ML Predictions"
   
# Initialisation de l'état de la page
if "page" not in st.session_state:
    st.session_state.page = "Welcome"

# Affichage du titre de l'application
st.title("Heart Disease Prediction App")

# Affichage du menu horizontal
render_navigation()

# Séparation visuelle
st.markdown("---")

# Gestion des pages
if st.session_state.page == "Welcome":
    st.header("Welcome")
   
    # Caroussel d'images et texte défilant
    carousel_html = """
    <style>
        .carousel {
            width: 400px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }
        .carousel-inner {
            display: flex;
            width: fit-content;
            animation: scroll 30s linear infinite;
        }
        .carousel-item {
            width: 100%;
            flex: 0 0 100%;
        }
        .carousel-item img {
            width: 400px;
            height: 220px;
            object-fit: cover;
            flex-shrink: 0;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            10%  { transform: translateX(0); }

            14%  { transform: translateX(-400px); }
            24%  { transform: translateX(-400px); }

            28%  { transform: translateX(-800px); }
            38%  { transform: translateX(-800px); }

            42%  { transform: translateX(-1200px); }
            52%  { transform: translateX(-1200px); }

            56%  { transform: translateX(-1600px); }
            66%  { transform: translateX(-1600px); }

            70%  { transform: translateX(-2000px); }
            80%  { transform: translateX(-2000px); }

            84%  { transform: translateX(-2400px); }
            94%  { transform: translateX(-2400px); }
            100% { transform: translateX(-2800px); }
        }
        
        }
        .marquee {
            margin-top: 20px;
            font-size: 1.5em;
            color: #222;
        }
    </style>

    <div class="carousel">
        <div class="carousel-inner">            
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMAkXR48DptHfFdPOxk5wbvruuhNLl47HHsQ&s" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSBxQnqOHtwIiO3zu1hzqrJfWNhDd2-rPYfw&s" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrM7AsNKFaUmwJNOC64L4qVladBRa9mBeYvHGlVW3irfOFnKaqd-q-fM3xI1LNkDX1N4c&usqp=CAU" alt="Image 3">
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnNvnKnN36xZgRVtBhsKjSxfa9oRAxVqUUJA&s" alt="Image 4">
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjg9tVTRNDxxidVkTW1D38vUEVTebxIoOi895oOgNAFlRo1OL3E-Nb9u-Cum57MGd7RdY&usqp=CAU" alt="Image 5">
            </div>   
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSik6dHOCeNHKDDizBFyY2XBxKkkw0ndF-epC35vvSF-VEYmcH7g8KQ6Fk7gHn9rZ0KHXs&usqp=CAU" alt="Image 6">
            </div>
             <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6U966dzdZYTWf23U0lj6OiiUE-zyQ7RZoOI-HmDMFT1cy_S-1vVAv9KTUmMW0Gqxld4U&usqp=CAU" alt="Image 7">
            </div>                        
        </div>
    </div>

    <marquee class="marquee">Bienvenue dans l'application de prédiction des maladies cardiaques ! 
        Explorez nos outils pour analyser et prédire les risques cardiaques avec des modèles de 
        Machine Learning et Deep Learning. Utilisez le menu ci-dessus pour naviguer.</marquee>

    <div style='text-align: center;'>TATOU TATOU Josias Nathan @Copy Rights Reserved </div>
    """
    st.markdown(carousel_html, unsafe_allow_html=True)
    

elif st.session_state.page == "Statistiques":
    st.header("Statistiques")
    
    # Sous-navigation pour Statistiques
    def stats():
        stat_cols = st.columns(2)
        with stat_cols[0]:
            if st.button("About Dataset", use_container_width=True):
                st.session_state.sub_page = "About Dataset"
        with stat_cols[1]:
            if st.button("About heart Diseases", use_container_width=True):
                st.session_state.sub_page = "About heart Diseases"
    
    # Initialisation de l'état de la sous-page
    if "sub_page" not in st.session_state:
        st.session_state.sub_page = "About heart Diseases"
    
    stats()
    st.markdown("---")
    
    # Chargement des données
    try:
        data = pd.read_csv("./heartdisease.csv")  # Remplacez par le chemin de votre fichier
    except Exception as e:
        st.error(f"Erreur lors du chargement des données : {e}")
        st.stop()
    
    # Gestion des sous-pages
    if st.session_state.sub_page == "About Dataset":
        st.header("Dataset Informations")
        
        # Description générale
        st.write("Résumé des données du dataset sur les maladies cardiaques :")
        st.write(data.describe())
        
        # Histogrammes pour les variables numériques
        st.subheader("Distribution des variables numériques")
        numeric_cols = ['age', 'resting bp s', 'cholesterol', 'max heart rate', 'oldpeak']        
        for col in numeric_cols:
            st.write(f"Distribution de {col}")
            fig, ax = plt.subplots(figsize=(4, 2.7))  
            sns.histplot(data[col], kde=True, ax=ax)
            ax.set_title(f"Distribution de {col}")
            st.pyplot(fig)
            plt.close(fig)
        
        # Matrice de corrélation
        st.subheader("Matrice de corrélation")
        fig, ax = plt.subplots(figsize=(10, 7))
        sns.heatmap(data.corr(), annot=True, cmap='coolwarm', ax=ax)
        ax.set_title("Matrice de corrélation des variables")
        st.pyplot(fig)
        plt.close(fig)
        
        # Boîtes à moustaches pour détecter les valeurs aberrantes
        st.subheader("Boîtes à moustaches pour les variables numériques")
        fig, ax = plt.subplots(figsize=(10, 8))
        sns.boxplot(data=data[numeric_cols], ax=ax)
        ax.set_title("Boîtes à moustaches des variables numériques")
        st.pyplot(fig)
        plt.close(fig)
    
    elif st.session_state.sub_page == "About heart Diseases":
        st.header("Heart Diseases Stats")
 
        # Répartition des cas (target)
        fig, ax = plt.subplots(figsize=(4, 2.7))
        sns.countplot(x='target', data=data, palette='Set2', ax=ax)
        ax.set_xticklabels(['Non-Maladie (0)', 'Maladie (1)'])
        ax.set_title("Répartition des cas de maladies cardiaques")
        st.pyplot(fig)
        plt.close(fig)
        
        # Répartition par sexe
        fig, ax = plt.subplots(figsize=(4, 2.7))
        sns.countplot(x='sex', hue='target', data=data, palette='Set1', ax=ax)
        ax.set_xticklabels(['Femme (0)', 'Homme (1)'])
        ax.set_title("Maladies cardiaques par sexe")
        ax.legend(['Non-Maladie', 'Maladie'])
        st.pyplot(fig)
        plt.close(fig)
        
        # Répartition par type de douleur thoracique
        fig, ax = plt.subplots(figsize=(10, 6))
        sns.countplot(x='chest pain type', hue='target', data=data, palette='Set3', ax=ax)
        ax.set_xticklabels(['Typique (0)', 'Atypique (1)', 'Non-angineuse (2)', 'Asymptomatique (3)'])
        ax.set_title("Maladies cardiaques par type de douleur thoracique")
        ax.legend(['Non-Maladie', 'Maladie'])
        st.pyplot(fig)
        plt.close(fig)
        
        # Pie chart for categorical variables
        fig, ax = plt.subplots(figsize=(4, 2))
        data['chest pain type'].value_counts().plot.pie(autopct='%1.1f%%', colors=sns.color_palette('Set2'))
        ax.set_title("Répartition des types de douleur thoracique")
        st.pyplot(fig)
        plt.close(fig)
    

elif st.session_state.page == "ML Predictions":
    st.header("ML Predictions")
    st.write("Section pour les prédictions avec le modèle de Machine Learning.")
    # Chargement du modèle ML
    # Chargement du modèle DL
    try:
        model = tf.keras.models.load_model("DpL_model.h5")
    except Exception as e:
        st.error(f"Erreur lors du chargement du modèle : {e}")
        st.stop()

    st.subheader("Saisir les caractéristiques du patient")
    
    # Formulaire pour les variables d'entrée
    with st.form(key="dpl_prediction_form"):
        col1, col2 = st.columns(2)  # Deux colonnes pour organiser les champs
        
        with col1:
            age = st.number_input("Âge", min_value=1, max_value=120, value=50)
            max_heart_rate = st.number_input("Max heart rate", min_value=60, max_value=220, value=150)
            resting_bp_s = st.number_input("Resting bp s (mm Hg)", min_value=50, max_value=200, value=120)
            cholesterol = st.number_input("Cholesterol (mg/dl)", min_value=100, max_value=600, value=200)
            oldpeak = st.number_input("Oldpeak", min_value=0.0, max_value=10.0, value=0.0, step=0.1)
        
        with col2:
            sex = st.selectbox("Sexe", options=[("Homme", 1), ("Femme", 0)], format_func=lambda x: x[0])
            chest_pain_type = st.selectbox("Chest pain type", 
                                          options=[("Typique", 0), ("Atypique", 1), ("Non-angineuse", 2), ("Asymptomatique", 3)],
                                          format_func=lambda x: x[0])
            resting_ecg = st.selectbox("Resting ecg",
                                      options=[("Normal", 0), ("Anomalie ST-T", 1), ("Hypertrophie", 2)],
                                      format_func=lambda x: x[0])
            
            exercise_angina = st.selectbox("Exercise angina",
                                          options=[("Non", 0), ("Oui", 1)],
                                          format_func=lambda x: x[0])            
            st_slope = st.selectbox("ST slope",
                                   options=[("Ascendante", 0), ("Plate", 1), ("Descendante", 2)],
                                   format_func=lambda x: x[0])
        
        submit_button = st.form_submit_button(label="Prédire")
    
    # Prédiction
    if submit_button:
        # Créer le vecteur d'entrée
        input_data = np.array([[age, sex[1], chest_pain_type[1], resting_bp_s, cholesterol, 
                               resting_ecg[1], max_heart_rate, exercise_angina[1], oldpeak, st_slope[1]]])
        
        # Faire la prédiction
        try:
            prediction_proba = model.predict(input_data)[0][0]
            prediction = 1 if prediction_proba > 0.5 else 0
            
            # Afficher le résultat
            st.subheader("Résultat de la prédiction")
            if prediction == 1:
                st.error("Risque de maladie cardiaque détecté.")
            else:
                st.success("Aucun risque de maladie cardiaque détecté.")
            
            st.write(f"Probabilité de risque : {prediction_proba:.2%}")
        except Exception as e:
            st.error(f"Erreur lors de la prédiction : {e}")