Create app.py

app.py

@@ -0,0 +1,1084 @@
+import streamlit as st
+import streamlit.components.v1 as components
+import os
+from PIL import Image
+# Set the page layout
+st.set_page_config(layout="wide")
+import json
+import base64
+import time
+from dotenv import load_dotenv
+import os
+import requests
+import pickle
+import numpy as np
+import google.generativeai as genai
+
+# Load model once
+with open("best_clf.pkl", "rb") as file:
+    best_clf = pickle.load(file)
+
+
+# Try loading environment variables locally
+try:
+    from dotenv import load_dotenv
+    load_dotenv()
+except:
+    pass
+genai.configure(api_key=os.getenv("GOOGLE_API_KEY"))
+
+# Get the token from environment variables
+HF_TOKEN = os.environ.get("HF_TOKEN")
+# --- Step 1 ---
+if 'name' not in st.session_state:
+    st.session_state.name = "Ange"
+
+if 'gender' not in st.session_state:
+    st.session_state.gender = "Male"
+
+if 'age' not in st.session_state:
+    st.session_state.age = 25
+
+if 'currentSmoker' not in st.session_state:
+    st.session_state.currentSmoker = "Yes"
+
+if 'cigsPerDay' not in st.session_state:
+    st.session_state.cigsPerDay = 0
+
+if 'BPMeds' not in st.session_state:
+    st.session_state.BPMeds = False
+
+if 'diabetes' not in st.session_state:
+    st.session_state.diabetes = False
+
+# --- Step 2 ---
+if 'totChol' not in st.session_state:
+    st.session_state.totChol = 180  # mg/dL
+
+if 'sysBP' not in st.session_state:
+    st.session_state.sysBP = 120  # mmHg
+
+if 'diaBP' not in st.session_state:
+    st.session_state.diaBP = 80   # mmHg
+
+# --- Step 3 ---
+if 'BMI' not in st.session_state:
+    st.session_state.BMI = 22.0
+
+if 'heartRate' not in st.session_state:
+    st.session_state.heartRate = 70  # bpm
+
+if 'glucose' not in st.session_state:
+    st.session_state.glucose = 90  # mg/dL
+
+# Optional: prediction result
+if 'Risk' not in st.session_state:
+    st.session_state.Risk = 1
+if 'proba' not in st.session_state:
+    st.session_state.proba = 80
+
+
+
+if "framework" not in st.session_state:
+    st.session_state.framework = "gen"
+# Initialize state
+
+if "form1" not in st.session_state:
+    st.session_state.form1 = "back"
+if "form2" not in st.session_state:
+    st.session_state.form2 = "back"  
+if "form3" not in st.session_state:
+    st.session_state.form3 = "back"
+if "form4" not in st.session_state:
+    st.session_state.form4 = "back"
+if "form5" not in st.session_state:
+    st.session_state.form5 = "back"   
+if "form6" not in st.session_state:
+    st.session_state.form6 = "back"     
+    
+if  st.session_state.form1 == "next":
+    start1 = 46
+    back1 = "#6dc9e4"
+    background = "#f3f3f4"
+    fill = '#6dc9e4'
+    back2 = "#4794ff"
+    back3 = "#6dc9e4"
+    back4 = "#6dc9e4"
+elif st.session_state.form1 == "back":
+    start1 = 0
+    back1 = "#4794ff"
+    back2 = "#6dc9e4"
+    back3 = "#6dc9e4"
+    back4 = "#6dc9e4"
+
+    background =" white"
+    fill = "#f7f7f7"
+    
+##################################
+if  st.session_state.form2 == "next":
+    start2 = 46
+    background2 = "#f3f3f4"
+    fill2 = '#6dc9e4'
+    back3 = "#4794ff"
+    back2 = "#6dc9e4"
+    back1 = "#6dc9e4"
+    back4 = "#6dc9e4"
+
+
+elif st.session_state.form2 == "back":
+   
+    start2 = 0
+    background2 =" white"
+    fill2 = "#f7f7f7"
+
+####################################
+if  st.session_state.form3 == "next":
+    start3 = 46
+    background3 = "#f3f3f4"
+    back4 = "#4794ff"
+    back2 = "#6dc9e4"
+    back1 = "#6dc9e4"
+    back3 = "#6dc9e4"
+    fill3 = '#6dc9e4'
+    border = "grey"
+
+elif st.session_state.form3 == "back":
+    start3 = 0
+    background3 =" white"
+    fill3 = "#f7f7f7"
+
+####################################
+if  st.session_state.form4 == "next":
+    start4 = 46
+    background4 = "#f3f3f4"
+    fill4 = '#6dc9e4'
+    back4 =  "#6dc9e4"
+
+
+elif st.session_state.form4 == "back":
+    start4 = 0
+    background4 =" white"
+    fill4 = "#f7f7f7"
+
+
+
+if st.session_state.framework == "gen":
+    encoded_logo = "hugging.png"
+    main_bg_ext = "png"
+    main_bg = "image.gif"
+
+
+  
+    st.markdown(
+        f"""
+        <style>
+        /* Container for logo and text */
+            /* Container for logo and text */
+            .logo-text-container {{
+                position: fixed;
+                top: 20px; /* Adjust vertical position */
+                left: 30px; /* Align with sidebar */
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                width: 70%;
+                z-index:1000;
+            }}
+
+            /* Logo styling */
+            .logo-text-container img {{
+                width: 90px; /* Adjust logo size */
+                border-radius: 10px; /* Optional: round edges */
+                margin-left:-5px;
+                margin-top: -15px;
+
+            }}
+
+            /* Bold text styling */
+            .logo-text-container h1 {{
+                font-family: Nunito;
+                color: #0175C2;            
+                font-size: 20px;
+                font-weight: bold;
+                margin-left :-30px;
+                padding:0px;
+                top:0;
+                margin-top: 10px;
+            }}
+            .logo-text-container h1 span{{
+                font-family: Nunito;
+                color: green;            
+                font-size: 20px;
+                margin-right :10px;
+                font-weight: bold;
+                padding:0px;
+                margin-left:1px;
+                margin-top:2% !important;
+            }}
+
+            /* Sidebar styling */
+            section[data-testid="stSidebar"][aria-expanded="true"] {{
+                margin-top: 100px !important; /* Space for the logo */
+                border-radius: 0 60px 0px 60px !important; /* Top-left and bottom-right corners */
+                width: 300px !important; /* Sidebar width */
+                background: none; /* No background */
+                color: white !important;
+            }}
+
+            header[data-testid="stHeader"] {{
+                background: #e4f8f8 !important;
+                margin-left: -80px !important;
+                margin-top: 1px !important;
+                z-index: 1 !important;
+                color: blue; /* White text */
+                font-family:  "Times New Roman " !important; /* Font */
+                font-size: 18px !important; /* Font size */
+                font-weight: bold !important; /* Bold text */
+                padding: 10px 20px; /* Padding for buttons */
+                border-top-left-radius: 30px;
+                border-top-right-radius: 30px;
+               
+                transition: all 0.3s ease-in-out; /* Smooth transition */
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 10px 0;
+                width:100% !important;
+                left:5.5%;
+                height:420px;
+                margin-top:30px;
+                backdrop-filter: blur(10px);
+
+            }}
+
+            div[data-testid="stDecoration"] {{
+                background-image: none;
+            }}
+
+            div[data-testid="stApp"] {{
+
+                background-size: cover;  /* Ensure the image covers the full page */
+                background-position: center;
+                background-repeat:no-repeat;
+                height: 98vh;
+                width: 99.3%;
+                border-radius: 20px !important;
+                margin-left: 5px;
+                margin-right: 20px;
+                margin-top: 10px;
+                overflow: hidden;
+                backdrop-filter: blur(10px); /* Glass effect */
+                -webkit-backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
+                border-radius:25px;
+
+
+            }}
+                [class*="st-key-main"] {{
+                  position: absolute;
+                width: 85vw !important;
+                margin-left: 50px;
+                 z-index:10000000;
+                 border-radius:30px;
+                padding: 10px;
+              margin-top:-20px;
+              background:white;
+                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
+
+              
+                height: 61vh;
+                width: 95.3%;
+                }}
+             [class*="st-key-side"] {{
+                  position: absolute;
+                width: 40vw !important;
+                margin-left: 5px;
+                 z-index:10000000;
+                 border-radius:30px;
+                padding: 10px;
+                 background-image: url(data:image/png;base64,{base64.b64encode(open('back.gif', "rb").read()).decode()});
+              margin-top:10px;
+                background-size: cover;  /* Ensure the image covers the full page */
+                background-position: center;
+                background-repeat:no-repeat;
+            box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.1); /* Shadow on the left */
+
+                height: 56vh;
+                border-bottom-right-radius: 0px ;
+                border-top-right-radius: 0px ;
+                border-left:2px solid #4794ff;
+                border-right:2px solid #4794ff;
+                               width: 95.3%;
+                }}
+              .result{{
+                
+
+              }}
+              .result h3{{
+                font-family: "Times New Roman" !important; 
+                font-size:16px;
+                margin-top:-30px;
+
+              }}
+              [class*="st-key-result"]{{
+                 height: 56vh;
+                 border-radius:30px;
+              margin-top:10px;
+            position:absolute;
+            margin-left:-5px !important;
+            box-shadow: 6px 0px 10px rgba(0, 0, 0, 0.1);
+             border-right:2px solid #4794ff;
+
+              }}
+                [class*="st-key-explain"]{{
+                background-image: url(data:image/png;base64,{base64.b64encode(open("gem.jpg", "rb").read()).decode()});
+                background-size: contain; /* size of the image */
+                background-repeat: no-repeat;
+                 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+                 width:250px;
+                 margin-left:370px;
+                border-radius: 30px;
+                height:50px !important;
+                margin-top:70px;
+                 border-right:2px solid #4794ff;
+             border-left:2px solid #4794ff;
+
+                    }}
+             [class*="st-key-explain"] > div.stButton > button{{
+                width:300px;
+                background: transparent;
+                border-radius:35px;
+                height:30px;
+
+             }}
+            [class*="st-key-explain"] > div.stButton > button p{{
+                margin-left:5px;
+                color :#0175C2 !important;
+                align-item:center;
+                font-size:14px !important;
+                margin-top:5px;
+                
+                }}
+
+              [class*="st-key-explain"] > div.stButton{{
+               
+                border-radius:35px;
+                
+
+             }}
+             [class*="st-key-expert"]{{
+                 overflow-y:scroll;
+
+                 max-height:420px;
+             }}
+                [class*="st-key-step_"] {{
+                    width:100px;
+                    height:60px;
+                    border-radius:50px;
+                    margin-left:490px;
+                    margin-bottom:20px;
+                    margin-top:15px;
+                    }}
+                      [class*="st-key-step_1"] {{
+                    background:{background};
+                     border:2px solid {back1};
+                    padding-left:{start1}px;
+                    }}
+                      [class*="st-key-step_2"] {{
+                        border:2px solid {back2};
+
+                        background:{background2};                    
+                        padding-left:{start2}px;   
+                        }}
+                    [class*="st-key-step_3"] {{
+                        border:2px solid {back3};
+
+                        background:{background3};                    
+                        padding-left:{start3}px;   
+                        }}
+                     [class*="st-key-step_4"] {{
+                       border:2px solid {back4};
+
+                        background:{background4};                    
+                        padding-left:{start4}px;   
+                        }}
+                    [class*="st-key-step_1"] > div.stButton > button{{
+                        background:{fill} !important;
+                        border:2px solid #00e7df;
+                        }}
+                    [class*="st-key-step_2"] > div.stButton > button{{
+                        background:{fill2} !important;
+                        border:2px solid #00e7df;
+                        }}
+                    [class*="st-key-step_3"] > div.stButton > button{{
+                        background:{fill3} !important;
+                        border:2px solid #00e7df;
+                        }}
+                     [class*="st-key-step_4"] > div.stButton > button{{
+                        background:{fill4} !important;
+                        border:2px solid #00e7df;
+                        }}
+                    [class*="st-key-step_"] > div.stButton > button{{
+                        background:#e7e7e7;
+                        border:2px solid linear-gradient(145deg, #007BFF, #005FCC);
+                        }}
+                         [class*="st-key-step_"] > div.stButton > button:active{{
+                        border:2px solid green !important;
+                        }}
+                         [class*="st-key-step_"] > div.stButton > button:not(:active){{
+                        border:2px solid #00e7df !important;
+                        }}
+
+                 section[data-testid="stMain"] {{
+                overflow:hidden !important;
+
+            }}
+            
+            div[data-testid="stSlider"] {{
+                margin-top:45px;
+            }}
+            label[data-testid="stWidgetLabel"]{{
+                margin-left:20px !important;
+            }}
+            
+            div[data-baseweb="slider"] {{
+                border-radius: 30px;
+                padding-right:40px;
+                z-index: 1;
+            /* Glass effect background */
+                backdrop-filter: blur(2px);
+                -webkit-backdrop-filter: blur(12px);
+                /* Shiny blue borders (left & right) */
+                border-top: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
+                margin-left:13px;
+                border-bottom: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
+                
+                
+                }}
+                div[data-baseweb="slider"] > :nth-child(1)> div {{
+                margin-left:20px !important;
+                margin-top:10px;
+                }}
+                    div[data-testid="stSliderTickBarMin"]{{
+                        background:none !important;
+                        margin-left:20px !important;
+                        font-size:12px;
+                        margin-bottom:5px;
+                        font-family:  "Times New Roman " !important; /* Font */
+                    }}
+                    div[data-testid="stSliderTickBarMax"]{{
+                        background:none !important;
+                        font-size:12px;
+                        margin-bottom:5px;
+
+                        font-family:  "Times New Roman " !important; /* Font */
+                    }}
+                    div[data-testid="stSliderThumbValue"]{{
+                        font-size:12px;
+                        font-family:  "Times New Roman " !important; /* Font */
+
+                    }}
+                    div[data-testid="stProgress"]{{
+                        margin-right:25px;
+                        margin-top:-70px;
+                        height:10px !important;
+                        
+                    }}
+            [class*="st-key-content-container-3"] {{
+                margin-top: 50px;  /* Adjust top margin */
+                margin-left:500px !important;
+                color:orange;
+                font-size:2.2rem;
+
+            }}
+              div[data-testid="stForm"]{{
+                      
+                        
+                        
+                    }}
+             [class*="st-key-form-head"] {{
+                margin-top:-50px;
+                 }}
+                [class*="st-key-form-head"] img {{
+                 align-self:center;
+                 width:40%;
+                 margin-left:250px;
+                 height:120px;
+                 
+                 }}
+                 
+             [class*="st-key-form-content"] {{
+                       margin-top:-50px;
+                        height:450px;
+                        border-radius:35px;
+                 
+                 }}
+                 [class*="st-key-form-content1"] {{
+                        margin-top:25px;
+                        height:450px;
+                        border-radius:35px;
+                        margin-bottom:15px;
+                        border-top:none;
+
+                 
+                 }}
+                  [class*="st-key-currentSmoker"]>div>label>div > p {{
+                       margin-left:-20px;
+
+                 
+                 }}
+                  
+                 [class*="st-key-form-content2"] {{
+                        margin-top:25px;
+                        height:450px;
+                        border-radius:35px;
+                        margin-bottom:15px;
+                 
+                 }}
+                 
+                  [class*="st-key-form-content3"] {{
+                        margin-top:25px;
+                        height:450px;
+                        border-radius:35px;
+                        margin-bottom:15px;
+                 
+                 }}
+        
+            /* Button row styling */
+            .button-row {{
+                display: flex;
+                justify-content: flex-start;
+                gap: 20px;
+                margin-bottom: 20px;
+            }}
+
+        
+
+            .custom-button:hover {{
+                background-color: #0056b3;
+            }}
+            div.stButton > button p{{   
+            color: green !important;
+            font-weight:bold;
+            }}
+            div.stButton > button {{                
+            color: green !important; /* White text */
+            font-family:  "Times New Roman " !important; /* Font */
+            font-size: 18px !important; /* Font size */
+            font-weight: bold !important; /* Bold text */
+            padding: 10px 20px; /* Padding for buttons */
+            border: none; /* Remove border */
+            border-radius: 35px; /* Rounded corners */
+            transition: all 0.3s ease-in-out; /* Smooth transition */
+            display: flex;
+            align-items: center;
+            transform: scale(1.05); /* Slightly enlarge button */
+            transform: scale(1.1); /* Slight zoom on hover */
+            justify-content: center;
+            
+
+
+        }}
+
+        /* Hover effect */
+        div.stButton > button:hover {{
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
+            transform: scale(1.05); /* Slightly enlarge button */
+            transform: scale(1.1); /* Slight zoom on hover */
+            box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
+        }}
+        div[data-testid="stFormSubmitButton"] button{{
+             font-family:  "Times New Roman " !important; /* Font */
+            font-size: 18px !important; /* Font size */
+            font-weight: bold !important; /* Bold text */
+            padding: 10px 20px; /* Padding for buttons */
+            border: none; /* Remove border */
+            border-radius: 35px; /* Rounded corners */
+            transition: all 0.3s ease-in-out; /* Smooth transition */
+            display: flex;
+            align-items: center;
+            transform: scale(1.05); /* Slightly enlarge button */
+            transform: scale(1.1); /* Slight zoom on hover */
+            justify-content: center;
+             box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+             width:110px;
+
+        }}
+        div[data-testid="stFormSubmitButton"] button:active{{
+        background-color: #6dc9e4 !important;
+                    
+                    }}
+
+        div[data-testid="stMarkdownContainer"] p {{
+                font-family: "Times New Roman" !important; /* Elegant font for title */
+                color:black !important;
+                
+            }}
+    .titles{{
+        margin-top:-60px !important;
+        margin-left:40px;
+        margin-bottom:50px;
+        text-align:center;
+        align-items:center;
+        z-index:10000;
+        position:relative;
+        font-family: "Times New Roman" !important; 
+        
+    }}
+        .header {{
+                align-items: center;
+                gap: 20px;  /* Optional: adds space between image and text */
+            }}
+            
+        /* Title styling */
+    .header h1{{
+        font-size: 1.7rem;
+        font-weight: bold;
+        margin-left: 5px;
+    /* margin-top:-100px;*/
+        margin-bottom:10px;
+        padding: 0;
+        color: black; /* Neutral color for text */
+        }}
+       
+        
+    .titles .content{{
+    font-family: "Times New Roman" !important; /* Elegant font for title */
+        font-size: 1rem;
+        margin-bottom:1px;
+        padding: 0;
+        color:black; /* Neutral color for text */
+        }}
+   
+
+
+        </style>
+    
+        """,
+        unsafe_allow_html=True,
+    )
+    # Overlay container
+    st.markdown(
+        f"""
+        <style>
+            .logo-text-containers {{
+                position: absolute;
+                top: -60px;
+                right: 40px;
+                background-color: rgba(255, 255, 255, 0.9);
+                padding: 15px;
+                border-radius: 12px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+                z-index: 10;
+                width:80vw;
+                height:620px;
+            }}
+            .logo-text-containers img {{
+                height: 40px;
+            right:0;
+            }}
+            .logo-text-containers h1 {{
+                display: inline;
+                font-size: 20px;
+                vertical-align: middle;
+            }}
+           
+        div[class*="st-key-try"] >div>button > div >p{{
+                top: 5px;
+                font-size: 30px !important;
+                font-weight: bold !important;
+                cursor: pointer;
+                color:orange !important;
+                z-index:1000;
+            }}
+            div[class*="st-key-try"] >div>button {{
+            height:70px !important;
+            width:250px !important;
+            background: rgba(255, 255, 255, 0.2) !important;
+            backdrop-filter: blur(10px) !important;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+         margin-left:20px;
+
+
+
+            }}
+        [class*="st-key-close-btn"]:hover {{
+                color: #f00;
+            }}
+        [class*="st-key-divider-col"] {{
+                border-left: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
+                border-radius: 35px; /* Rounded corners */
+                margin-top:-15px;
+                margin-left:3px;
+
+            }}
+            [class*="st-key-col1"] {{
+                border-right: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
+                border-radius: 35px; /* Rounded corners */
+                margin-left:20px;
+                margin-top:-15px;
+
+            }}
+             [class*="st-key-form"] >div >div >div >p {{
+              font-weight:bold;
+              color :green !important;
+              font-size:20px;
+
+            }}
+        [class*="st-key-logo-text-containers"] {{
+            margin: 10px; /* Set a margin inside the container */
+            max-width: 100%;
+            overflow: hidden;
+
+                position: absolute;
+            top:-43px;
+            left:10px;
+            overflow: hidden;
+                background-color: tansparent;
+                padding: 15px;
+                border-radius: 30px;
+                padding-right:40px;
+                z-index: 1;
+                width:88vw;
+                height:660px;
+            /* Glass effect background */
+                background: rgba(255, 255, 255, 0.15);
+                backdrop-filter: blur(12px);
+                -webkit-backdrop-filter: blur(12px);
+                /* Shiny blue borders (left & right) */
+                border-left: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
+                border-right: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
+
+
+                    }}
+        
+            @media (max-width: 768px) {{
+        .logo-text-container h1 {{
+            font-size: 12px;
+            
+        }}
+    .logo-text-container i {{
+            font-size: 10px;
+            ma
+        }}
+    
+        
+        .logo-text-container img {{
+                width: 30px; /* Adjust logo size */
+                border-radius: 10px; /* Optional: round edges */
+                margin-left:15px;
+                margin-top: -35px;
+
+            }}
+            
+    }}
+        </style>
+    """,
+        unsafe_allow_html=True,
+    )
+    st.markdown("""
+    <style>
+    /* Number input */
+    input:focus {
+       /* border: 2px solid grey !important;  /* change to your desired color */
+        outline: none;
+    }
+
+    /* Radio buttons (kind of hacky since they use labels) */
+    .stRadio > div[role='radiogroup'] > label:focus-within {
+        border-radius: 4px;
+    }
+    div[data-testid="stTextInputRootElement"]{
+        border:1px solid #CCC;
+    }
+    div[data-testid="stNumberInputContainer"].focused{
+        border:1px solid #CCC !important;
+
+    }
+    
+      button[data-testid="stNumberInputStepDown"]:hover:enabled,
+      button[data-testid="stNumberInputStepDown"]:focus:enabled{
+         background-color: #6dc9e4 !important;
+    }
+      button[data-testid="stNumberInputStepUp"]:hover:enabled,
+      button[data-testid="stNumberInputStepUp"]:focus:enabled{
+         background-color: #6dc9e4 !important;
+    }
+    label[data-baseweb="radio"]> :nth-child(1){
+      background-color: #6dc9e4 !important;
+
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+    st.markdown(
+        f""" <div class="logo-text-container">
+        <img src="data:image/png;base64,{base64.b64encode(open("download.png","rb").read()).decode()}" alt="Uploaded Image">
+    <h1>HeartCheck <span> AI </span> </h1>
+    </div>
+
+    """,
+        unsafe_allow_html=True,
+    )
+
+
+
+    st.markdown(
+        f""" <div class="titles">
+                <div class = "header">
+                <h1></br><span>Predict Your Risk, Protect Your Heart
+    </h1>
+                </div> 
+                <div class="content">
+            HeartGuard uses intelligent risk analysis to predict your likelihood of <br>heart disease.
+    —empowering you with personalized insights, early warnings, and lifestyle tips to keep your heart healthy and strong.
+                    </div>
+                    </div>
+                            """,
+        unsafe_allow_html=True,
+    )
+
+
+with st.container(key = "main"):
+    col1,col2 = st.columns([3,3])
+    with col1:
+        with st.container(key= "side"):
+            if st.button("1",key="step_1"): 
+                st.session_state.form1 = "back"
+                st.session_state.form2 = "back"
+                st.session_state.form3 = "back"
+                st.session_state.form4 = "back"
+                st.session_state.form5 = "back"
+
+                st.rerun()
+            if st.button("2",key="step_2"):
+                st.session_state.form2 = "back"
+                st.session_state.form3 = "back"
+                st.session_state.form4 = "back"
+                st.session_state.form5 = "back"
+
+                st.rerun()  
+            if st.button("3",key="step_3"):
+                st.session_state.form3 = "back"
+                st.session_state.form4 = "back"
+                st.session_state.form5 = "back"
+
+                st.rerun()   
+            if st.button("4",key="step_4"):   
+                st.session_state.form4 = "back"
+                st.session_state.form5 = "back"
+
+                st.rerun()
+
+    with col2:
+        if st.session_state.form1 == "back":
+            with st.container(key="form1"):
+                st.write("🧍 Step 1: Personal Info")
+                with st.container(key="form-head"):
+                        st.image("icon.png")
+                with st.form( key="first"):
+                    with st.container(key="form-content"):
+                        # Input fields
+                        st.session_state.name = st.text_input("Name", value=st.session_state.name)
+                        st.session_state.age = st.number_input("Age", min_value=0, max_value=120, step=1, value=st.session_state.age)
+                        st.session_state.gender = st.radio("Sex:", ["Male", "Female"], horizontal=True, index=0 if st.session_state.gender == "Male" else 1)
+
+                        # Navigation buttons
+                        col1, col2 = st.columns([4, 1])
+                        next = col2.form_submit_button("Next ➡️")
+                       
+                        if next:
+                            st.session_state.form1 = "next"
+                            st.rerun()
+        elif st.session_state.form1 == "next" and st.session_state.form2 == "back":
+            with st.container(key="form2"):
+                st.write("🚬 Step 2: Clinical History")
+               
+                st.radio("Do you currently smoke?", ["Yes", "No"], horizontal=True, key="currentSmoker")
+                print(st.session_state.currentSmoker)
+                with st.form("form_step_2"):
+                    with st.container(key="form-content1"):
+                        # Show 'cigsPerDay' only if smoker
+                        if st.session_state.currentSmoker == "Yes":
+                            if  st.session_state.cigsPerDay == 0:
+                                 st.session_state.cigsPerDay = 1
+                            else:
+                                 st.session_state.cigsPerDay =  st.session_state.cigsPerDay 
+                            print(f"tessst:{st.session_state['currentSmoker']}")
+                            
+                            st.session_state.cigsPerDay = st.number_input("How many cigarettes per day?", min_value=1, max_value=60, step=1,value = st.session_state.cigsPerDay)
+                        else:
+                            st.session_state.cigsPerDay = 0  # default to 0 if non-smoker
+                        r1,r2 = st.columns([6,3])
+                        with r1:
+                            if  st.session_state.BPMeds == "Yes":
+                                bp = 0
+                            else:
+                                bp = 1
+                            st.session_state.BPMeds = st.radio("Do you take blood pressure medication?", ["Yes", "No"], horizontal=True,index = bp) 
+                        with r2:
+                            if  st.session_state.diabetes == "Yes":
+                                db = 0
+                            else:
+                                db = 1
+                            st.session_state.diabetes = st.radio("Do you have diabetes?", ["Yes", "No"], horizontal=True,index = db ) 
+
+
+                        col1, col2 = st.columns([4,1])
+                        back = col1.form_submit_button("Back")
+                        if back:
+                            st.session_state.form1 = "back"
+                            st.rerun()
+                        next = col2.form_submit_button("Next")
+                        if next:
+                            st.session_state.form2 = "next"
+                            st.rerun()
+        elif st.session_state.form2 == "next" and st.session_state.form3 == "back":
+            with st.container(key="form2"):
+                st.write("💉 Step 3: Vital Signs & Cholesterol")
+               
+                with st.form("form_step_2"):
+                    with st.container(key="form-content2"):
+                       # Step 3 inputs
+
+                        st.session_state.totChol = st.number_input("Total Cholesterol (mg/dL)", min_value=100, max_value=400, step=1,value=  st.session_state.totChol)
+                        st.session_state.sysBP = st.number_input("Systolic Blood Pressure (mmHg)", min_value=80, max_value=250, step=1,value = st.session_state.sysBP)
+                        st.session_state.diaBP = st.number_input("Diastolic Blood Pressure (mmHg)", min_value=50, max_value=150, step=1,value= st.session_state.diaBP)
+                        
+
+                        col1, col2 = st.columns([4,1])
+                        back = col1.form_submit_button("Back")
+                        if back:
+                            st.session_state.form2 = "back"
+                            
+                            st.rerun()
+                        next = col2.form_submit_button("Next")
+                        if next:
+                            st.session_state.form3 = "next"
+                            st.rerun()
+        elif st.session_state.form3 == "next" and st.session_state.form4 == "back":
+            with st.container(key="form3"):
+                st.write("🧪 Step 4: Body Metrics & Glucose")
+               
+                with st.form("form_step_3"):
+                    with st.container(key="form-content3"):
+                       # Step 3 inputs
+                       
+                        st.session_state.BMI = st.number_input("Body Mass Index (BMI)", min_value=10.0, max_value=60.0, step=0.1,value=st.session_state.BMI)
+                        st.session_state.heartRate = st.number_input("Heart Rate (bpm)", min_value=40, max_value=200, step=1,value= st.session_state.heartRate)
+                        st.session_state.glucose = st.number_input("Glucose Level (mg/dL)", min_value=50, max_value=300, step=1,value= st.session_state.glucose)
+
+
+                        col1, col2 = st.columns([4,1])
+                        back = col1.form_submit_button("Back")
+                        if back:
+                            st.session_state.form3 = "back"
+                            
+                            st.rerun()
+                        next = col2.form_submit_button("Next")
+                        if next:
+                            st.session_state.form4 = "next"
+                            st.rerun()
+        elif st.session_state.form4 == "next"  and st.session_state.form5 == "back":
+
+            # Construct input array from collected values
+            new_data = np.array([[
+                1 if st.session_state.gender == "Male" else 0,  # gender
+                st.session_state.age,
+                1 if st.session_state.currentSmoker == "Yes" else 0,
+                float(st.session_state.cigsPerDay),
+                1.0 if st.session_state.BPMeds else 0.0,
+                1 if st.session_state.diabetes else 0,
+                st.session_state.totChol,
+                st.session_state.sysBP,
+                st.session_state.diaBP,
+                st.session_state.BMI,
+                st.session_state.heartRate,
+                st.session_state.glucose
+            ]])
+            loading_placeholder = st.empty()
+
+            with loading_placeholder.container():
+            # Make prediction
+                with st.spinner("Analyzing your heart health..."):
+                    st.image('load.gif', use_container_width=True)
+                    time.sleep(3)  # Wait for 1 second
+                # Remove the loading image
+            loading_placeholder.empty()
+            prediction = best_clf.predict(new_data)
+            prediction_proba = best_clf.predict_proba(new_data)
+            st.session_state.Risk = prediction
+            risk_percent = prediction_proba[0][1]*100
+            risk_label = "At Risk of having a heart failure"
+            st.session_state.proba = risk_percent
+
+            name = st.session_state.name  # Get from session or fallback
+            with st.container(key = "result"):
+                # Display result
+                st.markdown(f"""
+                    <div class = "result" style="text-align: center; padding-top: 30px;">
+                        <h1 style="color: #444;">Hi {name} 👋, you are</h1>
+                        <h1 class = "name" style="font-size: 80px; color: #0175C2; margin-top: -5px ;">{risk_percent:.2f}%</h1>
+                        <h3 style="color: {'#d9534f' if prediction == 1 else '#28a745'}; margin-bottom: 10px;">{risk_label}</h3>
+                       </div>
+                """, unsafe_allow_html=True)
+                st.session_state.form5 = "next"
+
+                if st.button("explain the result", key = "explain"):
+                    st.session_state.form5 = "next"
+                    st.rerun()
+
+        elif st.session_state.form5 == "next" :
+            model = genai.GenerativeModel('gemini-2.0-flash')
+            with st.container(key = "expert"):
+                with st.spinner("Model is generating a response..."):
+                    response = model.generate_content(f"""
+                Hi! A person named {st.session_state.name} has just been assessed for heart disease risk.
+
+                🔍 **Prediction**: {"High Risk" if st.session_state.Risk == 1 else "Low Risk"}
+                📊 **Risk Percentage**: {st.session_state.proba:.2f}%
+
+                📌 **Input Parameters**:
+                - Sex: {st.session_state.gender}
+                - Age: {st.session_state.age}
+                - Current Smoker: {st.session_state.currentSmoker}
+                - Cigarettes per Day: {st.session_state.cigsPerDay}
+                - On Blood Pressure Meds: {"Yes" if st.session_state.BPMeds else "No"}
+                - Has Diabetes: {"Yes" if st.session_state.diabetes else "No"}
+                - Total Cholesterol: {st.session_state.totChol} mg/dL
+                - Systolic BP: {st.session_state.sysBP} mmHg
+                - Diastolic BP: {st.session_state.diaBP} mmHg
+                - BMI: {st.session_state.BMI}
+                - Heart Rate: {st.session_state.heartRate} bpm
+                - Glucose: {st.session_state.glucose} mg/dL
+
+                💬 Please give a personalized, kind, and easy-to-understand explanation of this result. Include practical lifestyle advice and possible early warning signs to watch out for. Use an encouraging, empathetic tone.
+                """)
+                st.markdown(f"""
+                <div style="
+                    font-size: 18px;
+                    font-weight: 600;
+                    color: #0175C2;
+                    margin-top: 5px;
+                    margin-bottom: 20px;
+                    padding: 10px 20px;
+                    border-radius: 10px;
+                    background: #f4faff;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-left:-20px !important;
+                    gap: 15px;
+                    font-family: 'Times New Roman', Times, serif;
+                ">
+         <img src="data:image/png;base64,{base64.b64encode(open("gem.png","rb").read()).decode()}" alt="Uploaded Image"width="40" height="40" style="margin-right: 10px;" >
+                    Personalized Heart Health Advice
+                </div>
+            """, unsafe_allow_html=True)
+
+                st.write(response.text)
+            
+
+
+