app.py

import streamlit as st 
import pandas as pd 
import matplotlib.pyplot as plt
import time 
import numpy as np 
import seaborn as sns 
from streamlit_extras.colored_header import colored_header 
from streamlit_extras.card import card
from streamlit_extras.badges import badge 
from streamlit_extras.metric_cards import style_metric_cards 
from streamlit_extras.dataframe_explorer import dataframe_explorer ,generate_fake_dataframe
from streamlit_extras.mention import mention 
from streamlit_extras.chart_container import chart_container 
from streamlit_extras.grid import grid
from streamlit_extras.row import row
import pickle
st.set_page_config(layout="wide", initial_sidebar_state="expanded")
@st.cache_data
def LoadDAtaframe():
    return pd.read_csv("concrete.csv")

DATA = LoadDAtaframe()
def displayText1(string):
    for word in string.split(" "):
        yield word+ " "
        time.sleep(0.01)

pickled_model = pickle.load(open('modelCiment2.pkl', 'rb'))

def  SimulateStrength():
        col1,col2 = st.columns(2)
        with col1:
            ciment= st.text_input("Ciment", help="entrez la valeur de la Variable Ciment")
            slag= st.slider("Slag",0.0,300.0,step=0.5)
            ash= st.slider("Ash", 0.0, 200.0, step=0.5)
            water= st.slider("Water", 0,200,step=1)
        with col2:
            superplastic= st.slider("SuperPlastic", 1, 30)
            coarseagg= st.text_input("Coareagg")
            fineagg= st.text_input("FineAgg")
            Age= st.slider("Age", 0,100)
        final= {
            "cement":[int(ciment) if ciment else 0],
            "slag":[float(slag) if slag else 0],
            "ash":[float(ash) if ash else 0],
            "water": [int(water) if water else 0],
            "superplastic":[int(superplastic) if superplastic else 0],
            "coarseagg": [int(coarseagg) if coarseagg else 0],
            "fineagg":[int(fineagg) if fineagg else 0],
            "age":[Age if Age else 0]
        }
        return pd.DataFrame(final, index=[0])

Apptitle = "MY CIMENTO "
MenuNavigation =  ["🏠Accueil", "📈Analyse","📊Visualisation", "🤺Simulation", "📞Contact"]
APPLOGO = "cementoLogo.png"

Description= """
À chaque grand projet de construction, une base solide est essentielle. CIMENTO offre bien plus qu'un simple ciment ; c'est le pilier sur lequel repose votre vision architecturale. Notre ciment est synonyme de qualité inégalée et de fiabilité éprouvée, répondant aux normes les plus strictes de l'industrie.

Choisir CIMENTO, c'est investir dans la durabilité et la robustesse. Chaque sac de notre ciment est le résultat d'années d'expertise et d'innovation, garantissant une performance constante et une résistance à toute épreuve face aux défis du temps et des conditions environnementales.

Que vous construisiez des maisons, des ponts, des gratte-ciels ou des infrastructures essentielles, notre ciment est votre partenaire de confiance.
Il renforce les fondations, soutient les structures et assure une construction qui perdure dans le temps.

Faites le choix éclairé, optez pour CIMENTO et bâtissez un avenir solide, étape par étape."""


st.sidebar.image(APPLOGO,width=255)

myMenu= st.sidebar.selectbox("Où allons 🚔 nous Aujourd'hui? ", MenuNavigation)

if myMenu== MenuNavigation[0]:
    st.markdown("<h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'><u>CIMENTO </u></h1>",unsafe_allow_html=True)#  affiche des titres html
    st.markdown("<p style='text-align:center; color:gray;'><i>La qualité qui construit l'avenir</i></p>", unsafe_allow_html=True)
    st.markdown("<h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Construisez avec CIMENTO : La Fondation de la Solidité</h1>",unsafe_allow_html=True)#  affiche des titres html
    col1,col2= st.columns((1,2))
    with col1:
        st.image("homeCement.jpg")
    with col2: 
        st.write(displayText1(Description))
        st.markdown("<h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Les Elements Constitutifs du Ciment</h1>",unsafe_allow_html=True)#  affiche des titres html
    c1,c2= st.columns((9,9))
    with c1:
        st.markdown("<h1 style='text-align:center;color: gray; text-transform: uppercase; text-tranform:underline,'>CalCaire</h1>",unsafe_allow_html=True)#  affiche des titres html
        cc1,cc2= st.columns((1,2))
        with cc1:
            st.image("calcaire.jpeg", width=255)
        with cc2:
            st.markdown("<p style='margin-left:8%; text-transform: uppercase; text-tranform:underline,'>Le calcaire est la principale source de calcium dans le ciment. Pendant le processus de fabrication, le calcaire réagit avec d'autres composants pour former du silicate de calcium, qui est essentiel à la résistance et à la durabilité du ciment durci. Il contribue également à la réduction de la teneur en alcali du ciment, ce qui aide à prévenir les réactions potentiellement dommageables avec certains minéraux dans les agrégats.</p>",unsafe_allow_html=True)#  affiche des titres html
    with c2:
        st.markdown("<h1 style='text-align:center;color: gray; text-transform: uppercase; text-tranform:underline,'>Argile</h1>",unsafe_allow_html=True)#  affiche des titres html
        cc1,cc2= st.columns((1,2))
        with cc1:
            st.image("argile.jpeg", width=255)
        with cc2:
            st.markdown("<p style='margin-left:8%; text-transform: uppercase; text-tranform:underline,'> L'argile fournit de la silice, de l'alumine et de l'oxyde de fer au ciment. Ces composants jouent un rôle crucial dans la formation des phases de ciment clé, telles que les silicates et les aluminates, qui contribuent à la résistance et à la prise du ciment. L'argile aide également à ajuster les propriétés de durcissement et à contrôler la température de cuisson pendant la production de clinker.</p>",unsafe_allow_html=True)#  affiche des titres html

    c3,c4= st.columns((9,9))
    with c3:
        st.markdown("<h1 style='text-align:center;color: gray; text-transform: uppercase; text-tranform:underline,'>Gypse (CaSO4·2H2O)</h1>",unsafe_allow_html=True)#  affiche des titres html
        cc1,cc2= st.columns((1,2))
        with cc1:
            st.image("gypse.jpeg", width=255)
        with cc2:
            st.markdown("<p style='margin-left:8%; text-transform: uppercase; text-tranform:underline,'> Le gypse est ajouté au ciment pour réguler le processus de durcissement. Il agit comme un retardateur de prise, ralentissant la réaction chimique entre l'eau et le ciment. Cela permet de manipuler le temps de prise du ciment et d'optimiser sa résistance finale. Le gypse contribue également à améliorer la maniabilité du ciment frais lorsqu'il est mélangé avec de l'eau.</p>",unsafe_allow_html=True)#  affiche des titres html
    with c4:
        st.markdown("<h3 style='text-align:center;color: gray; text-transform: uppercase; text-tranform:underline,'>Minéraux secondaires (comme les oxydes de fer et d'aluminium)</h3>",unsafe_allow_html=True)#  affiche des titres html
        cc1,cc2= st.columns((1,2))
        with cc1:
            st.image("gypse.jpeg", width=255)
        with cc2:
            st.markdown("<p style='margin-left:8%; text-transform: uppercase; text-tranform:underline,'> L'argile fournit de la silice, de l'alumine et de l'oxyde de fer au ciment. Ces composants jouent un rôle crucial dans la formation des phases de ciment clé, telles que les silicates et les aluminates, qui contribuent à la résistance et à la prise du ciment. L'argile aide également à ajuster les propriétés de durcissement et à contrôler la température de cuisson pendant la production de clinker.</p>",unsafe_allow_html=True)#  affiche des titres html

elif myMenu==MenuNavigation[4]:
    st.markdown("<h1 style='text-align:center;color:  #005580; text-transform: uppercase; text-tranform:underline,'>Mon Profil</h1>",unsafe_allow_html=True)#  affiche des titres html
    col1, col2= st.columns((6,15))
    with col1:
        st.image("minee.jpg", width=385)
    
    with col2:
       cols1,cols2= st.columns((1,1))
       st.markdown("""
                   <div style='display:flex; flex-direction:row;'>
                   <h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Nom:</h1>
                    <h1 style='text-align:left;color: gray; text-transform: uppercase; text-tranform:underline,'>Elie Makoda Kowo</h1>
                </div>   
                """,unsafe_allow_html=True)
       st.markdown("""
                   <div style='display:flex; flex-direction:row;'>
                   <h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Email:</h1>
                    <h1 style='text-align:left;color: gray;  text-tranform:underline,'><a href='mailto:eliemakodakowo@gmail.com' style='color:gray;'> eliemakodakowo@gmail.com</a></h1>
                </div>   
                """,unsafe_allow_html=True)
       st.markdown("""
                   <div style='display:flex; flex-direction:row;'>
                   <h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Contact:</h1>
                    <h1 style='text-align:left;color: gray;  text-tranform:underline,'><a href='tel:+237 698982479' style='color:gray;'>+237 674349356 / +237 698982479</a></h1>
                </div>   
                """,unsafe_allow_html=True)
       
       st.markdown("""
                   <div style='display:flex; flex-direction:row;'>
                   <h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>Level:</h1>
                    <h1 style='text-align:left;color: gray;  text-tranform:underline,'>Bachelor 3 Artificial Intelligence & Big Data</h1>
                </div>   
                """,unsafe_allow_html=True)
    st.markdown("<h1 style='color:  #005580; text-align:center; text-transform: uppercase; text-tranform:underline,'>Competences</h1>",unsafe_allow_html=True)#  affiche des titres html
    coll1, coll2, coll3=st.columns((6,5,4))
    with coll1:
        card(
            title="Programmation Web",
            text="React , Django, Spring , Php",
            url="https://github.com/eliemakoda?tab=repositories",
            )
    with coll2:
        card(
            title="Programmation DeskTop",
            text="Java, C_Sharp",
            url="https://github.com/eliemakoda?tab=repositories",
            )
    with coll3:
         card(
            title="Programmation Mobile",
            text="React Native ",
            url="https://github.com/eliemakoda?tab=repositories",
            )
    colls1, colls2=st.columns((8,8))
    with colls1:
         card(
            title="Machine & Deep Learning",
            text="Tensorflow ,Pycaret, Sklearn, ProphetNeural... ",
            url="https://github.com/eliemakoda?tab=repositories",
            )
    with colls2:
         card(
            title="Data Analysis",
            text="Seaborn , Tableau , PowerBi , Matplotlib, Numpy Pandas... ",
            url="https://github.com/eliemakoda?tab=repositories",
            )

elif myMenu== MenuNavigation[1]:
    col1, col2, col3, col4 ,col5= st.columns(5)
    col1.metric(label="Nombre Ciment", value=DATA.shape[0], delta=1000)
    col2.metric(label="AGE MOYEN", value=int(DATA.age.sum()/DATA.shape[0]), delta=100)
    col3.metric(label="Max Ciment Strength", value=max(DATA.strength), delta=100)
    col4.metric(label="Taux d'eau MOYEN", value=int(DATA.water.sum()/DATA.shape[0]), delta=-200)
    col5.metric(label="Force Moyenne Ciment", value=int(DATA.strength.sum()/DATA.shape[0]), delta=82)

    st.title("Filtrez le Dataframe ici ")
    style_metric_cards()
    dataframe = DATA
    filtered_df = dataframe_explorer(dataframe, case=False)
    st.dataframe(filtered_df, use_container_width=True)
    mention(
        label="Vue Statistique du jeu de données",
        # icon="streamlit",  # Some icons are available... like Streamlit!
        url="#",
    )
    with chart_container(DATA):
        st.write("Here's a cool chart")
        st.area_chart(DATA)
      
elif myMenu== MenuNavigation[2]:
    st.markdown("<h1 style='text-align:center;color: gray; text-transform: uppercase; text-tranform:underline,'>Observons Nos données Avec les Graphes</h1>",unsafe_allow_html=True)#  affiche des titres html
    my_grid = grid(2, [2, 4, 1], 1, 4, vertical_align="bottom")

    # Row 1:
    # my_grid.dataframe(DATA, use_container_width=True)
    my_grid.line_chart(DATA.drop(["slag","ash", "superplastic","strength","age"], axis=1), use_container_width=True)

    my_grid.line_chart(DATA[["age", "strength"]], use_container_width=True)
    col1, col2= st.columns(2)
    with col1:
      st.write(DATA.describe())
    with col2:
        mask = np.triu(np.ones_like(DATA.corr(), dtype=bool))
        f, ax = plt.subplots(figsize=(3,4))
        cmap = sns.diverging_palette(230, 20, as_cmap=True)
        sns.heatmap(DATA.corr(), mask=mask, cmap=cmap, vmax=.2, center=0,
        square=True, linewidths=.3, cbar_kws={"shrink": .4})
        st.pyplot(f, use_container_width=False)  
elif myMenu== MenuNavigation[3]:
    st.markdown("<h1 style='text-align:center;color: #005580; text-transform: uppercase; text-tranform:underline,'>SIMULATION DE LA FORCE DE VOTRE CIMENT</h1>",unsafe_allow_html=True)#  affiche des titres html
    file=  st.sidebar.file_uploader("Importez un fichier de Prediction ")
    if file:
        dat= pd.read_csv(file)
        dat["strength"]= pickled_model.predict(dat)
        with chart_container(dat):
            st.write("Hello Un Graphe ")
            st.area_chart(dat.drop(["slag","ash", "superplastic","strength","age"],axis=1))
    elif st.sidebar.checkbox("Utiliser Notre Fichier"):
        dat= pd.read_csv("test.csv")
        dat["strength"]= pickled_model.predict(dat)
        with chart_container(dat):
            st.write("Hello Un Graphe ")
            st.area_chart(dat)
    else:
        custDat= SimulateStrength()
        col1,col2= st.columns(2)

        with col1:
            st.write(custDat)
        with col2:
            result = round(pickled_model.predict(custDat)[0],2)
            if result>=35:
                st.write(displayText1("Bravo! Votre Ciment est très Solide et de Très bonne Qualité "))
                st.success(result)
                st.image("beton.jpeg", width=400)
            else:
                st.write("Attention! Votre Ciment est faible Voire de Mauvaise qualité")
                st.error(result)
                st.image("bad.jpeg", width=400)