Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,106 +1,237 @@
 import streamlit as st
+import math
 
-st.set_page_config(page_title="FitPlan AI", page_icon="💪", layout="wide")
-
-# ---------- Custom Professional Colorful CSS ----------
+# Custom CSS for professional, innovative look
 st.markdown("""
 <style>
-/* App Background Gradient */
-.stApp {
-    background: linear-gradient(135deg, #1f3c88, #39a2db, #a1c4fd);
-    background-attachment: fixed;
-}
-
-/* Main Card */
-.main-card {
-    background: rgba(255, 255, 255, 0.95);
-    padding: 40px;
-    border-radius: 20px;
-    box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
-}
-
-/* Title */
-.title-text {
-    font-size: 32px;
-    font-weight: 700;
-    color: #1f3c88;
-}
-
-/* Subtitle */
-.subtitle-text {
-    color: #555;
-    margin-bottom: 20px;
-}
-
-/* Button Styling */
-.stButton>button {
-    background: linear-gradient(90deg, #1f3c88, #39a2db);
-    color: white;
-    font-size: 16px;
-    font-weight: 600;
-    border-radius: 10px;
-    padding: 10px 20px;
-    border: none;
-}
-
-.stButton>button:hover {
-    background: linear-gradient(90deg, #162a5c, #2b7fb3);
-    color: white;
-}
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+    
+    .main {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 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-bottom: 2rem;
+    }
+    
+    .fitness-card {
+        background: rgba(255, 255, 255, 0.95);
+        padding: 2rem;
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.2);
+        margin-bottom: 1.5rem;
+    }
+    
+    .stTextInput > div > div > input {
+        border-radius: 12px;
+        border: 2px solid #e1e5e9;
+        padding: 12px 16px;
+        font-size: 16px;
+        transition: all 0.3s ease;
+    }
+    
+    .stTextInput > div > div > input:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    .stSelectbox > div > div > select {
+        border-radius: 12px;
+        border: 2px solid #e1e5e9;
+        padding: 12px 16px;
+        font-size: 16px;
+        transition: all 0.3s ease;
+    }
+    
+    .stSelectbox > div > div > select:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    .stMultiSelect > div > div {
+        border-radius: 12px;
+        border: 2px solid #e1e5e9;
+    }
+    
+    .stButton > button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        padding: 14px 32px;
+        font-weight: 600;
+        font-size: 16px;
+        transition: all 0.3s ease;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+        width: 100%;
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
+    }
+    
+    .bmi-result {
+        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+        color: white;
+        padding: 1.5rem;
+        border-radius: 20px;
+        text-align: center;
+        box-shadow: 0 15px 35px rgba(17, 153, 142, 0.4);
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+    
+    .bmi-underweight { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 15px 35px rgba(240, 147, 251, 0.4); }
+    .bmi-normal { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 15px 35px rgba(79, 172, 254, 0.4); }
+    .bmi-overweight { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); box-shadow: 0 15px 35px rgba(250, 112, 154, 0.4); }
+    .bmi-obese { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4); }
+    
+    .metric-card {
+        background: rgba(255, 255, 255, 0.9);
+        padding: 1.5rem;
+        border-radius: 16px;
+        text-align: center;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        margin: 1rem 0;
+    }
+    
+    .error-message {
+        background: #fee;
+        color: #c33;
+        padding: 1rem;
+        border-radius: 12px;
+        border-left: 4px solid #c33;
+    }
 </style>
 """, unsafe_allow_html=True)
 
-# ---------- Card Container ----------
-st.markdown("<div class='main-card'>", unsafe_allow_html=True)
-
-st.markdown("<div class='title-text'>🏋️ FitPlan AI</div>", unsafe_allow_html=True)
-st.markdown("<div class='subtitle-text'>Create your personalized fitness journey.</div>", unsafe_allow_html=True)
-
-st.divider()
-
-# ---------- Layout ----------
-col1, col2 = st.columns(2)
-
+st.title("💪 Fitness Profile Builder")
+
+# Sidebar for instructions
+with st.sidebar:
+    st.markdown("## 📋 How to Use")
+    st.markdown("- Fill in your details")
+    st.markdown("- Select your fitness preferences")
+    st.markdown("- Click **Calculate BMI**")
+    st.markdown("- Get your personalized fitness profile!")
+    st.markdown("---")
+    st.markdown("*Ready to transform your fitness journey? 🚀*")
+
+# Initialize session state
+if 'show_result' not in st.session_state:
+    st.session_state.show_result = False
+
+# Personal Information
+st.markdown('<div class="fitness-card">', unsafe_allow_html=True)
+st.subheader("👤 Personal Information")
+col1, col2, col3 = st.columns(3)
 with col1:
-    goal = st.selectbox(
-        "🎯 Select Your Fitness Goal",
-        ["Build Muscle", "Lose Weight", "Improve Endurance"]
-    )
-
-    level = st.radio(
-        "📊 Fitness Level",
-        ["Beginner", "Intermediate", "Advanced"],
-        horizontal=True
-    )
-
+    name = st.text_input("Full Name", key="name", help="Enter your full name")
 with col2:
-    equipment = st.multiselect(
-        "🏋️ Available Equipment",
-        ["Dumbbells", "Resistance Bands", "Barbell", "No Equipment"]
-    )
-
-    age = st.number_input("🎂 Age", min_value=15, max_value=70)
-
-st.divider()
-
-# ---------- Button ----------
-if st.button("🚀 Generate Personalized Plan", use_container_width=True):
-
-    st.success("Your fitness plan is ready!")
-
-    st.markdown("### 📋 Profile Summary")
-    st.write(f"**Goal:** {goal}")
-    st.write(f"**Fitness Level:** {level}")
-    st.write(f"**Equipment:** {', '.join(equipment) if equipment else 'None'}")
-    st.write(f"**Age:** {age}")
-
-    st.markdown("### 🏆 Recommended Plan")
-
-    if goal == "Lose Weight":
-        st.info("• 30 min Cardio\n• 3 Days HIIT\n• Calorie Deficit Diet")
-    elif goal == "Build Muscle":
-        st.info("• 5 Day Strength Split\n• Progressive Overload\n• High Protein Diet")
+    height_cm = st.number_input("Height (cm)", min_value=0.1, value=170.0, step=0.1, key="height", help="Enter height in centimeters")
+with col3:
+    weight_kg = st.number_input("Weight (kg)", min_value=0.1, value=70.0, step=0.1, key="weight", help="Enter weight in kilograms")
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+# Fitness Details
+st.markdown('<div class="fitness-card">', unsafe_allow_html=True)
+st.subheader("🎯 Fitness Details")
+
+col4, col5, col6 = st.columns([1,1,1])
+with col4:
+    goal = st.selectbox("Fitness Goal", ["Build Muscle", "Weight Loss", "Strength Gain", "Abs Building", "Flexible"], key="goal")
+with col5:
+    fitness_level = st.selectbox("Fitness Level", ["Beginner", "Intermediate", "Advanced"], key="level")
+with col6:
+    equipment = st.multiselect("Available Equipment", 
+                              ["Dumbbells", "Resistance Band", "Yoga Mat", "No Equipment", "Barbell", "Pull-up Bar", "Treadmill"], 
+                              default=["No Equipment"], key="equip")
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+# Calculate button
+if st.button("🧮 Calculate BMI & Generate Profile", key="calc", help="Click to compute your BMI and view profile"):
+    # Validation
+    if not name.strip():
+        st.error("❌ Please enter your name.")
+        st.session_state.show_result = False
+    elif height_cm <= 0:
+        st.error("❌ Height must be greater than 0.")
+        st.session_state.show_result = False
+    elif weight_kg <= 0:
+        st.error("❌ Weight must be greater than 0.")
+        st.session_state.show_result = False
     else:
-        st.info("• Mixed Cardio + Functional Training\n• Mobility Work\n• Balanced Diet")
+        # BMI Calculation
+        height_m = height_cm / 100
+        bmi = round(weight_kg / (height_m ** 2), 2)
+        
+        # BMI Category
+        if bmi < 18.5:
+            category = "Underweight"
+            category_class = "bmi-underweight"
+        elif 18.5 <= bmi < 25:
+            category = "Normal"
+            category_class = "bmi-normal"
+        elif 25 <= bmi < 30:
+            category = "Overweight"
+            category_class = "bmi-overweight"
+        else:
+            category = "Obese"
+            category_class = "bmi-obese"
+        
+        st.session_state.bmi = bmi
+        st.session_state.category = category
+        st.session_state.category_class = category_class
+        st.session_state.show_result = True
+
+# Display Results
+if st.session_state.show_result:
+    st.markdown('<div class="fitness-card">', unsafe_allow_html=True)
+    st.subheader(f"✅ Profile for {name.title()}")
+    
+    # BMI Result Card
+    bmi_html = f'''
+    <div class="bmi-result {st.session_state.category_class}">
+        <h2 style="margin: 0;">BMI: {st.session_state.bmi}</h2>
+        <h3 style="margin: 0 0 1rem 0;">{st.session_state.category}</h3>
+        <p>Height: {height_cm} cm | Weight: {weight_kg} kg</p>
+    </div>
+    '''
+    st.markdown(bmi_html, unsafe_allow_html=True)
+    
+    # Summary Cards
+    col_a, col_b, col_c = st.columns(3)
+    with col_a:
+        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
+        st.metric("Goal", goal)
+        st.markdown('</div>', unsafe_allow_html=True)
+    with col_b:
+        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
+        st.metric("Level", fitness_level)
+        st.markdown('</div>', unsafe_allow_html=True)
+    with col_c:
+        st.markdown('<div class="metric-card">', unsafe_allow_html=True)
+        st.metric("Equipment", ", ".join(equipment))
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Footer
+st.markdown("---")
+st.markdown("<p style='text-align: center; color: rgba(255,255,255,0.8); font-size: 0.9rem;'>Deployed on Hugging Face Spaces | Built with ❤️ using Streamlit</p>", unsafe_allow_html=True)
 
-st.markdown("</div>", unsafe_allow_html=True)