Update app.py

app.py

@@ -1,254 +1,239 @@
-import streamlit as st
-import pickle
-import sklearn
-from sklearn.preprocessing import RobustScaler, OneHotEncoder, LabelEncoder
-from sklearn.neighbors import KNeighborsClassifier
-import pandas as pd
-import numpy as np
-import matplotlib.pyplot as plt
-
-
-
-# st.markdown("""
-#     <style>
-#         .stApp {
-#             background-image: url('https://huggingface.co/spaces/shubham680/DiabetesPrediction/resolve/main/bg.jpg');
-#             background-size: cover;
-#             background-repeat: no-repeat;
-#             background-attachment: fixed;
-#         }
-#         .stTitle {
-#             color: #ffffff;
-#             font-size: 36px;
-#             font-weight: bold;
-#             text-align: center;
-#         }
-#     </style>
-# """, unsafe_allow_html=True)
+# import streamlit as st
+# import pickle
+# import sklearn
+# from sklearn.preprocessing import RobustScaler, OneHotEncoder, LabelEncoder
+# from sklearn.neighbors import KNeighborsClassifier
+# import pandas as pd
+# import numpy as np
+# import matplotlib.pyplot as plt
 
-st.title("Introvert/Extrovert Prediction App")
 
 
+# # st.markdown("""
+# #     <style>
+# #         .stApp {
+# #             background-image: url('https://huggingface.co/spaces/shubham680/DiabetesPrediction/resolve/main/bg.jpg');
+# #             background-size: cover;
+# #             background-repeat: no-repeat;
+# #             background-attachment: fixed;
+# #         }
+# #         .stTitle {
+# #             color: #ffffff;
+# #             font-size: 36px;
+# #             font-weight: bold;
+# #             text-align: center;
+# #         }
+# #     </style>
+# # """, unsafe_allow_html=True)
 
+# st.title("Introvert/Extrovert Prediction App")
 
 
 
 
 
 
-#with st.sidebar:
-    #st.header("Patient Information")
-time_spent = st.number_input("🕒 Time Spent Alone",min_value=0,max_value=11,step=1)
-stage_fear =  st.selectbox("🎤 Stage Fear",["Yes","No"])
-social_event =  st.number_input("🎉 Social Event Attendance",min_value=0,max_value=10,step=1)
-going_outside = st.number_input("🚶‍♂️ Going Outside Frequency",min_value=0,max_value=7,step=1)
-drained =  st.selectbox("😓 Drained After Socializing",["Yes","No"])
-friends =  st.number_input("👥 Friend Circle Size",min_value=0,max_value=15,step=1)
-post_frequency =  st.number_input("📱 Post Frequency on Social Media",min_value=0,max_value=10,step=1)
 
 
 
-# def plot_health_metrics(inputs):
-#     labels = ["Age", "BMI", "Urea", "Creatinine", "HbA1c", "Cholesterol", "Triglycerides", "HDL", "LDL", "VLDL"]
-#     standard_ranges = [
-#         (20, 80), (18.5, 24.9), (2.3, 7.0), (0.6, 1.2), (4.0, 5.6), (125, 200), (40, 150), (40, 60), (50, 100), (5, 40)
-#     ]
-#     fig, ax = plt.subplots(figsize=(10, 6))
-#     ax.barh(labels, [inputs[i] for i in range(10)], color='skyblue')
-#     for i, (low, high) in enumerate(standard_ranges):
-#         ax.plot([low, high], [i, i], color='red', linewidth=2)
-#     ax.set_xlabel("Value")
-#     ax.set_title("Health Metrics vs Standard Ranges")
-#     st.pyplot(fig)
+# #with st.sidebar:
+#     #st.header("Patient Information")
+# time_spent = st.number_input("🕒 Time Spent Alone",min_value=0,max_value=11,step=1)
+# stage_fear =  st.selectbox("🎤 Stage Fear",["Yes","No"])
+# social_event =  st.number_input("🎉 Social Event Attendance",min_value=0,max_value=10,step=1)
+# going_outside = st.number_input("🚶‍♂️ Going Outside Frequency",min_value=0,max_value=7,step=1)
+# drained =  st.selectbox("😓 Drained After Socializing",["Yes","No"])
+# friends =  st.number_input("👥 Friend Circle Size",min_value=0,max_value=15,step=1)
+# post_frequency =  st.number_input("📱 Post Frequency on Social Media",min_value=0,max_value=10,step=1)
 
-# plot_health_metrics([age, bmi, urea, cr, HbA1c, chol, tg, hdl, ldl, vldl])
 
 
-with open("rs.pkl", "rb") as f:
-    rs = pickle.load(f)
 
-with open("ohe_drain.pkl", "rb") as f:
-    ohe_drain = pickle.load(f)
+# with open("rs.pkl", "rb") as f:
+#     rs = pickle.load(f)
 
-with open("ohe_stage.pkl", "rb") as f:
-    ohe_stage = pickle.load(f)
+# with open("ohe_drain.pkl", "rb") as f:
+#     ohe_drain = pickle.load(f)
 
-with open("le.pkl", "rb") as f:
-    le = pickle.load(f)
+# with open("ohe_stage.pkl", "rb") as f:
+#     ohe_stage = pickle.load(f)
 
-with open("knn.pkl", "rb") as f:
-    knn = pickle.load(f)
+# with open("le.pkl", "rb") as f:
+#     le = pickle.load(f)
 
-stage_encoded = ohe_stage.transform([[stage_fear]])[0]  # gender encoded using one hot encoding
-drain_encoded = ohe_drain.transform([[drained]])[0]
+# with open("knn.pkl", "rb") as f:
+#     knn = pickle.load(f)
 
+# stage_encoded = ohe_stage.transform([[stage_fear]])[0]  # gender encoded using one hot encoding
+# drain_encoded = ohe_drain.transform([[drained]])[0]
 
-numeric_features = np.array([[time_spent, social_event, going_outside, friends, post_frequency]])
-scaled_features = rs.transform(numeric_features)[0]
 
-st.write("Scaled Features:", scaled_features)
+# numeric_features = np.array([[time_spent, social_event, going_outside, friends, post_frequency]])
+# scaled_features = rs.transform(numeric_features)[0]
 
+# st.write("Scaled Features:", scaled_features)
 
-final_input = np.concatenate((
-    scaled_features[:1],        
-    stage_encoded,              
-    scaled_features[1:3],       
-    drain_encoded,               
-    scaled_features[3:]          
-)).reshape(1, -1)
 
+# final_input = np.concatenate((
+#     scaled_features[:1],        
+#     stage_encoded,              
+#     scaled_features[1:3],       
+#     drain_encoded,               
+#     scaled_features[3:]          
+# )).reshape(1, -1)
 
-#input_data = np.array([[gender_encoded, age, urea, cr, HbA1c, chol, tg, hdl, ldl, vldl, bmi]])
 
 
+# prediction_labels = {
+#     0: "Extrovert",
+#     1: "Introvert"
+# }
 
 
-prediction_labels = {
-    0: "Extrovert",
-    1: "Introvert"
-}
 
+# # if st.button("Predict"):
+# #     prediction = knn.predict(final_input)[0]
+# #     result_label = prediction_labels.get(prediction, "Unknown")
+    
+# #     # Custom result display
+# #     st.markdown(
+# #         f"""
+# #         <div style='background-color: #1f77b4; padding: 15px; border-radius: 10px;'>
+# #             <h4 style='color: white;'>Predicted Result: {result_label}</h4>
+# #         </div>
+# #         """,
+# #         unsafe_allow_html=True
+# #     )
 
 
 
-# if st.button("Predict"):
+# if st.button("🔍 Predict"):
 #     prediction = knn.predict(final_input)[0]
 #     result_label = prediction_labels.get(prediction, "Unknown")
-    
-#     # Custom result display
+
+#     # Styled result box
 #     st.markdown(
-#         f"""
-#         <div style='background-color: #1f77b4; padding: 15px; border-radius: 10px;'>
-#             <h4 style='color: white;'>Predicted Result: {result_label}</h4>
-#         </div>
-#         """,
+#         f"<div class='prediction-box'><strong>Predicted Personality:</strong> {result_label}</div>",
 #         unsafe_allow_html=True
 #     )
 
 
 
-if st.button("🔍 Predict"):
-    prediction = knn.predict(final_input)[0]
-    result_label = prediction_labels.get(prediction, "Unknown")
-
-    # Styled result box
-    st.markdown(
-        f"<div class='prediction-box'><strong>Predicted Personality:</strong> {result_label}</div>",
-        unsafe_allow_html=True
-    )
-
-
-
-
-# import streamlit as st
-# import pickle
-# import numpy as np
-# import pandas as pd
-
-# # Inject custom CSS
-# st.markdown("""
-#     <style>
-#         .stApp {
-#             background-image: url('https://huggingface.co/spaces/shubham680/DiabetesPrediction/resolve/main/bg.jpg');
-#             background-size: cover;
-#             background-attachment: fixed;
-#         }
-#         .main-container {
-#             background-color: rgba(255, 255, 255, 0.9);
-#             padding: 2rem;
-#             border-radius: 15px;
-#             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-#         }
-#         .stButton>button {
-#             background-color: #4CAF50;
-#             color: white;
-#             font-weight: bold;
-#             padding: 0.5em 1em;
-#             border-radius: 10px;
-#         }
-#         .prediction-box {
-#             background-color: #1f77b4;
-#             padding: 1em;
-#             border-radius: 10px;
-#             color: white;
-#             font-size: 18px;
-#             text-align: center;
-#         }
-#     </style>
-# """, unsafe_allow_html=True)
-
-# # Title
-# st.markdown("<h1 style='text-align: center;'>Introvert vs Extrovert Predictor</h1>", unsafe_allow_html=True)
-
-# with st.container():
-#     #st.markdown("<div class='main-container'>", unsafe_allow_html=True)
-
-#     # Create input layout with columns
-#     col1, col2 = st.columns(2)
-
-#     with col1:
-#         time_spent = st.number_input("🕒 Time Spent Alone", min_value=0, max_value=11, step=1)
-#         social_event = st.number_input("🎉 Social Event Attendance", min_value=0, max_value=10, step=1)
-#         going_outside = st.number_input("🚶‍♂️ Going Outside Frequency", min_value=0, max_value=7, step=1)
-
-#     with col2:
-#         stage_fear = st.selectbox("🎤 Stage Fear", ["Yes", "No"])
-#         drained = st.selectbox("😓 Drained After Socializing", ["Yes", "No"])
-#         friends = st.number_input("👥 Friend Circle Size", min_value=0, max_value=15, step=1)
-#         post_frequency = st.number_input("📱 Post Frequency on Social Media", min_value=0, max_value=10, step=1)
-
-#     # Load models and encoders
-#     with open("rs.pkl", "rb") as f:
-#         rs = pickle.load(f)
-
-#     with open("ohe_drain.pkl", "rb") as f:
-#         ohe_drain = pickle.load(f)
-
-#     with open("ohe_stage.pkl", "rb") as f:
-#         ohe_stage = pickle.load(f)
-
-#     with open("le.pkl", "rb") as f:
-#         le = pickle.load(f)
-
-#     with open("knn.pkl", "rb") as f:
-#         knn = pickle.load(f)
-
-#     # Encode categorical values
-#     stage_encoded = ohe_stage.transform([[stage_fear]])[0]  # shape (1,)
-#     drain_encoded = ohe_drain.transform([[drained]])[0]
-
-#     # Scale numeric input
-#     numeric_features = np.array([[time_spent, social_event, going_outside, friends, post_frequency]])
-#     scaled_features = rs.transform(numeric_features)[0]
-
-  
-
-#     # Final input
-#     final_input = np.concatenate((
-#         scaled_features[:1],        # Time_spent_Alone
-#         stage_encoded,              # Stage_fear (1 col)
-#         scaled_features[1:3],       # Social_event, Going_outside
-#         drain_encoded,              # Drained_after_socializing (1 col)
-#         scaled_features[3:]         # Friends, Post_frequency
-#     )).reshape(1, -1)
-
-#     # Prediction labels
-#     prediction_labels = {
-#         0: "Extrovert",
-#         1: "Introvert"
-#     }
-
-#     # Prediction trigger
-#     if st.button("🔍 Predict"):
-#         prediction = knn.predict(final_input)[0]
-#         result_label = prediction_labels.get(prediction, "Unknown")
-
-#         # Styled result box
-#         st.markdown(
-#             f"<div class='prediction-box'><strong>Predicted Personality:</strong> {result_label}</div>",
-#             unsafe_allow_html=True
-#         )
-
-#     st.markdown("</div>", unsafe_allow_html=True)
 
+import streamlit as st
+import pickle
+import numpy as np
 
+# --------- CSS Styling ---------
+st.markdown("""
+    <style>
+        .stApp {
+            background: linear-gradient(to right, #c9d6ff, #e2e2e2);
+            font-family: 'Segoe UI', sans-serif;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.6);
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            margin-top: 2rem;
+        }
+        .title {
+            font-size: 48px;
+            font-weight: bold;
+            text-align: center;
+            background: linear-gradient(to right, #141E30, #243B55);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .predict-button button {
+            background-color: #6c63ff;
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            border-radius: 12px;
+            padding: 0.6em 1.5em;
+            margin-top: 1rem;
+        }
+        .result-box {
+            animation: fadeIn 1s ease-in-out;
+            background: #141E30;
+            color: white;
+            padding: 1.5em;
+            border-radius: 15px;
+            text-align: center;
+            margin-top: 2rem;
+            font-size: 22px;
+        }
+        @keyframes fadeIn {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+# --------- Title ---------
+st.markdown("<div class='title'>🧠 Introvert vs Extrovert Personality Predictor</div>", unsafe_allow_html=True)
+
+# --------- Input Form ---------
+with st.container():
+    st.markdown("<div class='glass-card'>", unsafe_allow_html=True)
+
+    st.markdown("#### 👤 Input Your Social Behavior Details")
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        time_spent = st.slider("🕒 Time Spent Alone", 0, 11, 5)
+        stage_fear = st.radio("🎤 Stage Fear", ["Yes", "No"])
+        going_outside = st.slider("🚶 Going Outside Frequency", 0, 7, 3)
+
+    with col2:
+        social_event = st.slider("🎉 Social Event Attendance", 0, 10, 5)
+        drained = st.radio("😓 Drained After Socializing", ["Yes", "No"])
+        friends = st.slider("👥 Friend Circle Size", 0, 15, 7)
+        post_frequency = st.slider("📱 Social Media Post Frequency", 0, 10, 3)
+
+    # --------- Load Pickles ---------
+    with open("rs.pkl", "rb") as f:
+        rs = pickle.load(f)
+    with open("ohe_drain.pkl", "rb") as f:
+        ohe_drain = pickle.load(f)
+    with open("ohe_stage.pkl", "rb") as f:
+        ohe_stage = pickle.load(f)
+    with open("le.pkl", "rb") as f:
+        le = pickle.load(f)
+    with open("knn.pkl", "rb") as f:
+        knn = pickle.load(f)
+
+    # --------- Encoding & Scaling ---------
+    stage_encoded = ohe_stage.transform([[stage_fear]])[0]
+    drain_encoded = ohe_drain.transform([[drained]])[0]
+
+    numeric_features = np.array([[time_spent, social_event, going_outside, friends, post_frequency]])
+    scaled_features = rs.transform(numeric_features)[0]
+
+    final_input = np.concatenate((
+        scaled_features[:1],
+        stage_encoded,
+        scaled_features[1:3],
+        drain_encoded,
+        scaled_features[3:]
+    )).reshape(1, -1)
+
+    prediction_labels = {0: "🌟 Extrovert", 1: "🌙 Introvert"}
+
+    st.markdown("</div>", unsafe_allow_html=True)  # Close glass card
+
+    # --------- Prediction Button ---------
+    with st.container():
+        with st.container():
+            predict_btn = st.container()
+            with predict_btn:
+                if st.button("🔍 Predict", key="predict", help="Click to see your personality"):
+                    prediction = knn.predict(final_input)[0]
+                    label = prediction_labels.get(prediction, "❓ Unknown")
+                    st.markdown(f"<div class='result-box'>🔮 Predicted Personality: <strong>{label}</strong></div>", unsafe_allow_html=True)