Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,284 +1,117 @@
 import streamlit as st
-import math
 
-# Enhanced Custom CSS - Reduced spacing, professional profile layout
+# --- Page Configuration ---
+st.set_page_config(
+    page_title="FitPulse Profile Builder",
+    page_icon="💪",
+    layout="centered"
+)
+
+# --- Custom CSS for "App-like" Feel ---
 st.markdown("""
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-    
+    <style>
     .main {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 1rem 2rem 2rem;
-        font-family: 'Poppins', sans-serif;
-    }
-    
-    .stApp {
-        background-color: transparent;
-    }
-    
-    h1 {
-        color: white !important;
-        font-weight: 700;
-        text-align: center;
-        text-shadow: 0 4px 8px rgba(0,0,0,0.3);
-        margin: 1rem 0 1rem 0 !important;
-        font-size: 2.5rem;
-    }
-    
-    .profile-section {
-        background: rgba(255, 255, 255, 0.95);
-        padding: 2rem;
-        border-radius: 24px;
-        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
-        backdrop-filter: blur(15px);
-        border: 1px solid rgba(255,255,255,0.3);
-        margin-bottom: 1rem;
-    }
-    
-    .section-header {
-        color: #333;
-        font-weight: 600;
-        font-size: 1.4rem;
-        margin-bottom: 1.5rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .stTextInput > div > div > input, 
-    .stNumberInput > div > div > input {
-        border-radius: 12px !important;
-        border: 2px solid #e1e5e9 !important;
-        padding: 14px 16px !important;
-        font-size: 16px !important;
-        transition: all 0.3s ease !important;
-        height: 50px !important;
-    }
-    
-    .stTextInput > div > div > input:focus,
-    .stNumberInput > div > div > input:focus {
-        border-color: #667eea !important;
-        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
-    }
-    
-    .stSelectbox > div > div > select,
-    .stMultiSelect > div > div > select {
-        border-radius: 12px !important;
-        border: 2px solid #e1e5e9 !important;
-        padding: 14px 16px !important;
-        font-size: 16px !important;
+        background-color: #f8f9fa;
     }
-    
-    .stButton > button {
-        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-        color: white !important;
-        border: none !important;
-        border-radius: 16px !important;
-        padding: 16px 40px !important;
-        font-weight: 600 !important;
-        font-size: 17px !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 12px 35px rgba(17, 153, 142, 0.4) !important;
-        width: 100% !important;
-        height: 56px !important;
-    }
-    
-    .stButton > button:hover {
-        transform: translateY(-3px) !important;
-        box-shadow: 0 18px 45px rgba(17, 153, 142, 0.6) !important;
-    }
-    
-    .bmi-result {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 2.5rem;
-        border-radius: 24px;
-        text-align: center;
-        box-shadow: 0 25px 60px rgba(102, 126, 234, 0.4);
-        font-size: 1.4rem;
-        font-weight: 700;
-        margin: 2rem 0;
-    }
-    
-    .bmi-category {
-        font-size: 2.2rem;
-        margin: 1rem 0;
-        text-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    }
-    
-    .bmi-underweight { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
-    .bmi-normal { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
-    .bmi-overweight { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
-    .bmi-obese { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
-    
-    .metric-card {
-        background: linear-gradient(135deg, #f8f9ff 0%, #e8f4ff 100%);
-        padding: 1.8rem;
-        border-radius: 20px;
-        text-align: center;
-        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
-        border: 1px solid rgba(102, 126, 234, 0.1);
-        transition: transform 0.3s ease;
-    }
-    
-    .metric-card:hover {
-        transform: translateY(-5px);
-    }
-    
-    .progress-bar {
-        background: #e1e5e9;
-        height: 10px;
+    .stButton>button {
+        width: 100%;
         border-radius: 10px;
-        overflow: hidden;
-        margin: 1rem 0;
-    }
-    
-    .progress-fill {
-        height: 100%;
-        border-radius: 10px;
-        transition: width 1s ease;
-    }
-    
-    .error-message {
-        background: linear-gradient(90deg, #fee 0%, #fcc 100%);
-        color: #c33;
-        padding: 1.2rem;
-        border-radius: 16px;
-        border-left: 5px solid #c33;
-        margin: 1rem 0;
+        height: 3em;
+        background-color: #FF4B4B;
+        color: white;
+        font-weight: bold;
     }
-    
-    /* Remove default margins */
-    section[data-testid="stHorizontalBlock"] {
-        margin-bottom: 0.5rem !important;
+    .css-1544g2n { 
+        padding: 2rem 1rem;
+        border-radius: 15px;
+        background-color: white;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     }
-    
-    .stMarkdown {
-        margin-bottom: 1rem !important;
-    }
-</style>
-""", unsafe_allow_html=True)
-
-# Reduced title spacing
-st.title("💪 Smart Fitness Profile")
-
-# Single unified profile section
-st.markdown('<div class="profile-section">', unsafe_allow_html=True)
-
-# Multi-column layout for better space usage
-col1, col2 = st.columns(2)
+    </style>
+    """, unsafe_allow_html=True)
 
-with col1:
-    st.markdown('<div class="section-header">👤 Personal Details</div>', unsafe_allow_html=True)
-    name = st.text_input("👤 Full Name *", key="name")
-    height_cm = st.number_input("📏 Height (cm) *", min_value=0.1, value=170.0, step=1.0, key="height")
-    weight_kg = st.number_input("⚖️ Weight (kg) *", min_value=0.1, value=70.0, step=0.1, key="weight")
-    age = st.number_input("🎂 Age", min_value=12, max_value=100, value=30, key="age")
+def calculate_bmi(weight, height_cm):
+    height_m = height_cm / 100
+    bmi = weight / (height_m ** 2)
+    return round(bmi, 2)
 
-with col2:
-    st.markdown('<div class="section-header">🎯 Fitness Goals</div>', unsafe_allow_html=True)
-    goal = st.selectbox("🏆 Primary Goal", 
-                       ["Build Muscle", "Weight Loss", "Strength Gain", "Abs Building", "Flexible", "Endurance"], 
-                       key="goal")
-    fitness_level = st.selectbox("📊 Experience Level", 
-                                ["Beginner", "Intermediate", "Advanced", "Elite"], 
-                                key="level")
-    equipment = st.multiselect("🛠️ Available Equipment", 
-                              ["Dumbbells", "Resistance Band", "Yoga Mat", "No Equipment", 
-                               "Barbell", "Pull-up Bar", "Treadmill", "Kettlebells"], 
-                              default=["No Equipment"], key="equip")
-    weekly_hours = st.slider("⏰ Weekly Training Hours", 0, 20, 5, key="hours")
-
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Calculate Button
-if st.button("🚀 Generate Fitness Profile", key="calc"):
-    if not name.strip() or height_cm <= 0 or weight_kg <= 0:
-        st.error("❌ Please fill all required fields with valid values (name, height, weight).")
+def get_bmi_category(bmi):
+    if bmi < 18.5:
+        return "Underweight", "blue"
+    elif 18.5 <= bmi < 24.9:
+        return "Normal", "green"
+    elif 25 <= bmi < 29.9:
+        return "Overweight", "orange"
     else:
-        height_m = height_cm / 100
-        bmi = round(weight_kg / (height_m ** 2), 2)
-        
-        if bmi < 18.5:
-            category = "Underweight"
-            cat_class = "bmi-underweight"
-        elif 18.5 <= bmi < 25:
-            category = "Normal"
-            cat_class = "bmi-normal"
-        elif 25 <= bmi < 30:
-            category = "Overweight"
-            cat_class = "bmi-overweight"
-        else:
-            category = "Obese"
-            cat_class = "bmi-obese"
-        
-        st.session_state.profile = {
-            'name': name, 'bmi': bmi, 'category': category, 'cat_class': cat_class,
-            'height': height_cm, 'weight': weight_kg, 'age': age, 'goal': goal,
-            'level': fitness_level, 'equipment': equipment, 'hours': weekly_hours
-        }
+        return "Obese", "red"
 
-# Results Section - Innovative modules
-if 'profile' in st.session_state:
-    profile = st.session_state.profile
-    
-    # Main BMI Result
-    bmi_html = f'''
-    <div class="bmi-result {profile['cat_class']}">
-        <div style="font-size: 3rem; margin-bottom: 0.5rem;">{profile['bmi']}</div>
-        <div class="bmi-category">{profile['category']}</div>
-        <div style="font-size: 1.1rem; opacity: 0.9;">
-            {profile['height']}cm | {profile['weight']}kg | {profile['age']}yrs
-        </div>
-    </div>
-    '''
-    st.markdown(bmi_html, unsafe_allow_html=True)
+# --- Header ---
+st.title("💪 FitPulse")
+st.subheader("Create Your Fitness Profile")
+st.write("Complete the details below to unlock your personalized health metrics.")
+
+# --- Form Section ---
+with st.form("fitness_form"):
+    st.markdown("### 👤 Personal Information")
+    name = st.text_input("Full Name", placeholder="e.g. John Doe")
     
-    # Progress Metrics Row 1
-    col1, col2, col3 = st.columns(3)
+    col1, col2 = st.columns(2)
     with col1:
-        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
-        st.metric("🥗 BMI Goal", "22.0", profile['bmi'])
-        st.markdown('<div class="progress-bar"><div class="progress-fill" style="width: 60%; background: linear-gradient(90deg, #4facfe, #00f2fe);"></div></div>', unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
-    
+        height = st.number_input("Height (cm)", min_value=0.0, step=0.1, help="Enter your height in centimeters")
     with col2:
-        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
-        st.metric("💪 Training Intensity", profile['hours'], "10h")
-        st.markdown('</div>', unsafe_allow_html=True)
+        weight = st.number_input("Weight (kg)", min_value=0.0, step=0.1, help="Enter your weight in kilograms")
+
+    st.markdown("---")
+    st.markdown("### 🎯 Fitness Details")
     
-    with col3:
-        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
-        st.metric("🎯 Experience", profile['level'])
-        st.markdown('</div>', unsafe_allow_html=True)
+    goal = st.selectbox("Fitness Goal", 
+                        ["Build Muscle", "Weight Loss", "Strength Gain", "Abs Building", "Flexible"])
     
-    # Profile Summary Row 2
-    col4, col5 = st.columns(2)
-    with col4:
-        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
-        st.markdown(f"**👤 {profile['name'].title()}**")
-        st.markdown(f"**🏆 Goal:** {profile['goal']}")
-        st.markdown(f"**🛠️ Equipment:** {', '.join(profile['equipment'])}")
-        st.markdown('</div>', unsafe_allow_html=True)
+    level = st.select_slider("Fitness Level", 
+                             options=["Beginner", "Intermediate", "Advanced"])
     
-    with col5:
-        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
-        st.markdown("### 💡 Quick Recommendations")
-        recs = {
-            'Underweight': "Increase calories, strength training",
-            'Normal': "Maintain balance, progressive overload", 
-            'Overweight': "Cardio + strength, calorie deficit",
-            'Obese': "Consult doctor, sustainable changes"
-        }
-        st.markdown(f"**{recs[profile['category']]}**")
-        st.markdown('</div>', unsafe_allow_html=True)
+    equipment = st.multiselect("Available Equipment", 
+                                ["Dumbbells", "Resistance Band", "Yoga Mat", "Barbell", "Kettlebell", "No Equipment"],
+                                default=["No Equipment"])
 
-# Footer
-st.markdown("---")
-st.markdown("""
-<div style='text-align: center; color: rgba(255,255,255,0.9); font-size: 0.95rem; padding: 1rem;'>
-    🚀 Smart Fitness Profile | Powered by Streamlit | Deployed on Hugging Face Spaces
-</div>
-""", unsafe_allow_html=True)
+    submitted = st.form_submit_button("Generate My Profile")
 
+# --- Logic & Output ---
+if submitted:
+    # Validation
+    if not name:
+        st.error("Please enter your name.")
+    elif height <= 0 or weight <= 0:
+        st.error("Height and Weight must be greater than zero.")
+    else:
+        # Calculations
+        bmi_val = calculate_bmi(weight, height)
+        category, color = get_bmi_category(bmi_val)
+        
+        # Results Display
+        st.success(f"Profile Created Successfully for **{name}**!")
+        
+        res_col1, res_col2 = st.columns(2)
+        
+        with res_col1:
+            st.metric(label="Calculated BMI", value=f"{bmi_val}")
+        
+        with res_col2:
+            st.markdown(f"**Category:**")
+            if category == "Normal":
+                st.info(f"✨ {category}")
+            elif category == "Underweight":
+                st.warning(f"⚠️ {category}")
+            else:
+                st.error(f"🚨 {category}")
+
+        # Summary Table
+        st.markdown("### 📋 Profile Summary")
+        data = {
+            "Detail": ["Goal", "Level", "Equipment"],
+            "Value": [goal, level, ", ".join(equipment)]
+        }
+        st.table(data)
 
+# --- Footer ---
+st.caption("Data is processed locally and not stored. Stay healthy!")