Marly237/Credit_Watch
0
1import streamlit as st2import numpy as np3from streamlit_option_menu import option_menu4from PIL import Image5import pandas as pd6import joblib7from sklearn.preprocessing import OneHotEncoder8from sklearn.ensemble import GradientBoostingClassifier9 10# Charger le modèle enregistré11pipeline_loaded = joblib.load('model.pkl')12 13# Configuration de la page14st.set_page_config(page_title="Credit Watch", layout="wide")15 16# CSS personnalisé pour alignement, footer, header, et style des images17st.markdown("""18 <style>19 /* Header sticky */20 header {21 position: fixed;22 top: 0;23 left: 0;24 width: 100%;25 background-color: white;26 z-index: 1000;27 padding: 10px;28 box-shadow: 0px 4px 2px -2px gray;29 display: flex;30 align-items: center;31 justify-content: space-between;32 height: 60px; 33 }34 35 /* Alignement du titre du logo */36 .logo-title {37 font-size: 30px;38 font-family: 'Baskerville', sans-serif;39 font-weight: bold;40 margin-top : -7px;41 }42 43 .logo-title span {44 color: #00000; /* Noir */45 }46 47 .logo-title .blue {48 color: #00cc99; /* Vert */49 }50 51 52 /* Acceuil */53 img {54 border-radius: 20px;55 margin-top: 50px; 56 width: 90%;57 height: 420px;58 object-fit: cover;59 }60 61 .left-text h1 {62 margin-top: 50px; 63 font-size: 3.5rem;64 }65 /* Animation pour le texte : fade-in */66 @keyframes fadeIn {67 from { opacity: 0; }68 to { opacity: 1; }69 }70 71 .left-text {72 animation: fadeIn 2s ease-in;73 }74 75 /* Animation pour l'image : scale */76 @keyframes scaleIn {77 from { transform: scale(0.9); opacity: 0; }78 to { transform: scale(1); opacity: 1; }79 }80 81 img {82 border-radius: 20px;83 margin-top: 50px;84 width: 90%;85 height: 420px;86 object-fit: cover;87 animation: scaleIn 1.5s ease-out;88 }89 90 /* Prédiction */91 h1.predict-container {92 text-align: center;93 margin-top: 10px;94 font-size: 2.5rem;95 color: #00cc99;96 }97 98 .form-container {99 background-color: #f9f9f9;100 padding: 20px;101 border-radius: 10px;102 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);103 margin-top: 30px;104 }105 106 .stButton>button {107 background-color: #00cc99;108 color: white;109 padding: 10px 20px;110 border-radius: 10px;111 border: none;112 transition: background-color 0.3s ease;113 }114 115 .stButton>button:hover {116 background-color: #008f73;117 }118 119 .result-container {120 margin-top: 20px;121 text-align: center;122 font-size: 1.5rem;123 color: #333;124 }125 126 .result-success {127 color: #28a745;128 font-weight: bold;129 }130 131 .result-fail {132 color: #dc3545;133 font-weight: bold;134 }135 136 137 /* À Propos */138 .about-section {139 background-color: #f9f9f9; /* Légère variation de la couleur de fond */140 padding: 50px;141 border-radius: 10px;142 box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);143 margin-bottom: 40px;144 margin-top : 80px;145 }146 147 .about-section h1 {148 font-size: 3rem; 149 text-align: center;150 font-family: 'Georgia', serif;151 font-weight: bold;152 margin-bottom: 20px;153 color: #333; 154 }155 156 .about-section p {157 font-size: 1.2rem;158 line-height: 1.6;159 color: #555;160 text-align: justify;161 margin-bottom: 20px;162 }163 164 .about-section .highlight {165 color: #00cc99; 166 font-weight: bold;167 }168 169 /* Animation pour rendre l'apparition du contenu plus dynamique */170 @keyframes fadeInUp {171 0% {172 opacity: 0;173 transform: translateY(20px);174 }175 100% {176 opacity: 1;177 transform: translateY(0);178 }179 }180 181 .about-section {182 animation: fadeInUp 1s ease-out;183 }184 185 /*FAQ*/186 /* Centrer les titres principaux */187 h1.faq-container, h1.contact-container {188 text-align: center;189 margin-top: 30px;190 color:#00cc99;191 font-size: 2.5rem;192 }193 194 /*CONTACT*/195 /* Style pour les boîtes de contact */196 .contact-box {197 border: 1px solid #e0e0e0;198 border-radius: 10px;199 padding: 40px;200 text-align: center;201 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);202 font-size: 1.2rem;203 }204 205 .contact-box h3 {206 margin-bottom: 10px;207 font-size: 24px;208 color: #333;209 }210 211 /* Agrandissement des icônes */212 .contact-box .emoji {213 font-size: 50px;214 margin-bottom: 10px;215 }216 217 p.contact-subtitle {218 text-align: center;219 margin-top: 5px;220 margin-bottom: 30px;221 222 }223 /* Animation sur le survol des boîtes de contact */224 .contact-box {225 border: 1px solid #e0e0e0;226 border-radius: 10px;227 padding: 40px;228 text-align: center;229 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);230 font-size: 1.2rem;231 transition: transform 0.3s ease, box-shadow 0.3s ease;232 }233 234 .contact-box:hover {235 transform: scale(1.05); /* Légère augmentation de la taille */236 box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre plus forte */237 }238 239 /* Footer collé en bas, sans espace vide */240 footer {241 position: fixed;242 bottom: 0;243 left: 0;244 width: 100%;245 background-color: black;246 color: white;247 text-align: center;248 padding: 10px;249 box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);250 z-index: 1000; /* Pour que le footer reste au-dessus du contenu */251 height: 50px; /* Hauteur du footer */252 }253 254 /* Espace suffisant pour que le contenu ne soit pas masqué par le header */255 body {256 padding-top: 70px; 257 padding-bottom: 40px; 258 }259 260""", unsafe_allow_html=True)261 262 263# Affichage du titre du logo dans le header264with st.container():265 col1, col2 = st.columns([1, 6])266 with col1:267 st.markdown('<div class="logo-title"><span>Credit</span><span class="blue">Watch</span></div>', unsafe_allow_html=True) # Titre "Credit Watch"268 with col2:269 selected = option_menu(270 menu_title=None,271 options=["Acceuil", "Prédiction", "À Propos", "FAQ", "Contact"],272 icons=["house", "graph-up-arrow", "info-circle", "question-circle", "envelope"],273 menu_icon="cast",274 default_index=0,275 orientation="horizontal",276 styles={277 "container": {"padding": "0!important", "background-color": "white"},278 "icon": {279 "color": "black", 280 "font-size": "18px",281 },282 "nav-link": {283 "font-size": "18px",284 "text-align": "center",285 "margin": "0px",286 "color": "black",287 "--hover-color": "#00cc99", # Changement de couleur au survol288 },289 "nav-link-hover": {290 "background-color": "#00cc99", # Fond vert au survol291 "color": "white", # Texte et icônes deviennent blancs au survol292 },293 "nav-link-selected": {294 "background-color": "#00cc99", # Fond vert lors de la sélection295 "color": "white", # Texte blanc lors de la sélection296 }297 }298 )299 300 301 302# Affichage du contenu selon la sélection303if selected == "Acceuil":304 col1, col2 = st.columns(2)305 306 # Colonne 1 : Texte307 with col1:308 st.markdown(309 """310 <div class="left-text">311 <h1>Take Control of Your Credit Score with <span style='color:#00cc99;'>Credit Watch</span></h1>312 <p>Chez <span style='color:#00cc99;'>Credit Watch</span>, nous nous engageons à simplifier la gestion de votre crédit grâce à une technologie avancée. Nous utilisons des modèles prédictifs performants pour évaluer votre situation financière et déterminer si vous êtes susceptible de faire défaut sur vos obligations de crédit. Notre objectif est de vous fournir des informations claires et précises, vous permettant ainsi de prendre des décisions éclairées sur votre avenir financier.X </p>313 </div>314 """, unsafe_allow_html=True315 )316 317 # Bouton pour démarrer la prédiction318 if st.button("Start"):319 st.session_state["page"] = "Prédictions"320 321 # Colonne 2 : Image (agrandie avec des bords arrondis)322 with col2:323 st.image("img/img2.jpg", use_column_width=True)324 325#Prediction326elif selected == "Prédiction":327 st.markdown("<h1 class='predict-container'>Formulaire de Prédiction</h1>", unsafe_allow_html=True)328 # Formulaire d'entrée des données329 with st.form(key='prediction_form'):330 # Collecter les données utilisateur via le formulaire331 checking_balance = st.selectbox('Solde du compte courant', ['< 0 DM', '1 - 200 DM', '> 200 DM', 'unknown'])332 months_loan_duration = st.slider('Durée du prêt (mois)', 4, 72, 24)333 amount = st.number_input('Montant du prêt (en DM)', min_value=250, max_value=20000, value=5000)334 age = st.slider('Âge', 18, 75, 35)335 credit_history = st.selectbox('Historique de crédit', ['repaid', 'critical', 'delayed', 'other'])336 savings_balance = st.selectbox('Solde des épargnes', ['< 100 DM', '100 - 500 DM', '> 500 DM', 'unknown'])337 employment_length = st.selectbox('Durée d\'emploi', ['< 1 year', '1 - 4 years', '4 - 7 years', '> 7 years', 'unemployed'])338 installment_rate = st.slider('Taux d\'échelonnement (%)', 1, 4, 3)339 housing = st.selectbox('Type de logement', ['own', 'rent', 'for free'])340 existing_credits = st.slider('Nombre de crédits existants', 1, 4, 2)341 job = st.selectbox('Emploi', ['skilled employee', 'unskilled resident', 'high qualif/self-employed', 'unemployed'])342 telephone = st.selectbox('Téléphone', ['yes', 'none'])343 foreign_worker = st.selectbox('Travailleur étranger', ['yes', 'no'])344 345 # Soumettre le formulaire346 submit_button = st.form_submit_button(label='Prédire')347 348 st.markdown("</div>", unsafe_allow_html=True)349 350 # Logique de prédiction et affichage des résultats351 if submit_button:352 # Créer un DataFrame basé sur l'entrée utilisateur353 donnees_reelles = pd.DataFrame({354 'checking_balance': [checking_balance],355 'months_loan_duration': [months_loan_duration],356 'amount': [amount],357 'age': [age],358 'credit_history': [credit_history],359 'savings_balance': [savings_balance],360 'employment_length': [employment_length],361 'installment_rate': [installment_rate],362 'housing': [housing],363 'existing_credits': [existing_credits],364 'job': [job],365 'telephone': [telephone],366 'foreign_worker': [foreign_worker]367 })368 369 # Ajouter les colonnes manquantes avec des valeurs par défaut370 colonnes_manquantes = {371 'purpose': '', 372 'property': '', 373 'personal_status': '', 374 'installment_plan': '', 375 'dependents': 0, 376 'other_debtors': '', 377 'residence_history': 0378 }379 380 for colonne, valeur_defaut in colonnes_manquantes.items():381 donnees_reelles[colonne] = valeur_defaut382 383 # Réorganiser les colonnes pour qu'elles correspondent à celles de l'entraînement384 donnees_reelles = donnees_reelles.reindex(columns=[385 'checking_balance', 'months_loan_duration', 'amount', 'age', 386 'credit_history', 'savings_balance', 'employment_length', 387 'installment_rate', 'housing', 'existing_credits', 'job', 388 'telephone', 'foreign_worker', 'personal_status', 'installment_plan', 389 'property', 'dependents', 'other_debtors', 'residence_history', 390 'purpose'391 ])392 393 # Faire des prédictions sur ces nouvelles données394 try:395 prediction = pipeline_loaded.predict(donnees_reelles)396 397 # Affichage du résultat avec style398 st.markdown("<div class='result-container'>", unsafe_allow_html=True)399 if prediction[0] == 1:400 st.markdown("<p class='result-success'>⚠️ Risque élevé : possible défaut.</p>", unsafe_allow_html=True)401 else:402 st.markdown("<p class='result-success'>✅ Client fiable : pas de défaut.</p>", unsafe_allow_html=True)403 st.markdown("</div>", unsafe_allow_html=True)404 405 except ValueError as e:406 st.error(f"Erreur lors de la prédiction : {e}")407 408# A propos409elif selected == "À Propos":410 st.markdown("""411 <div class="about-section">412 <h1><span class="highlight">Qui Sommes-Nous? </span></h1>413 <p>414 Chez <strong>Credit Watch</strong>, notre engagement est de simplifier et d’optimiser la gestion de votre crédit. 415 Grâce à notre technologie avancée et à nos analyses approfondies, vous pouvez suivre et améliorer votre score de crédit en toute simplicité. 416 Actuellement, notre modèle de prédiction atteint une précision impressionnante de <strong>80 %</strong>, ce qui témoigne de l’efficacité de nos outils.417 </p>418 419 </div>420 """, unsafe_allow_html=True)421 422 423# FAQ424elif selected == "FAQ":425 st.markdown("<h1 class='faq-container'>Foire aux Questions</h1>", unsafe_allow_html=True)426 with st.container():427 with st.expander("Qu'est-ce que le simulateur de crédit ?"):428 st.write("Le simulateur de crédit est un outil qui vous aide à estimer votre risque de crédit en fonction de vos informations financières actuelles.")429 with st.expander("Comment fonctionne le modèle de prédiction ?"):430 st.write("Le modèle de prédiction analyse vos données financières pour déterminer le risque de crédit.")431 with st.expander("Ai-je besoin de compétences techniques pour utiliser ce simulateur ?"):432 st.write("Non, vous n'avez pas besoin de compétences techniques pour utiliser notre simulateur.")433 with st.expander("Puis-je améliorer mon score de crédit en utilisant ce simulateur ?"):434 st.write("Oui, en utilisant notre simulateur, vous pouvez comprendre les facteurs qui influencent votre score de crédit.")435 st.write("""436 Cette application utilise un modèle de machine learning pour estimer votre risque de crédit. 437 Le modèle est basé sur vos données financières pour fournir une évaluation précise de votre situation actuelle et vous aider à estimer votre crédit.438 """)439 440 441# Contact442elif selected == "Contact":443 st.markdown("<h1 class='contact-container'>Contactez-nous</h1>", unsafe_allow_html=True)444 st.markdown("<p class='contact-subtitle'>Nous sommes disponibles du lundi au samedi de 10h à 19h.</div>", unsafe_allow_html=True)445 col1, col2, col3 = st.columns(3)446 447 with col1:448 st.markdown('<div class="contact-box"><span class="emoji">📞</span><h3>Par téléphone</h3><p>Appelez-nous au :<br><strong>+237 699 999 999</strong><br></div>', unsafe_allow_html=True)449 450 with col2:451 st.markdown('<div class="contact-box"><span class="emoji">💬</span><h3>Par chat</h3><p>Posez-nous toutes vos questions en cliquant sur le chat en bas à gauche de chaque page.</p></div>', unsafe_allow_html=True)452 453 with col3:454 st.markdown('<div class="contact-box"><span class="emoji">📧</span><h3>Par mail</h3><p>Écrivez-nous sur l\'adresse mail :<br><strong>contact@creditwatch.com</strong></p></div>', unsafe_allow_html=True)455 456# Footer 457st.markdown("""458<footer>459 <p>© Copyright by Olongo Linda - 2024</p>460</footer>461""", unsafe_allow_html=True)462