Upload folder using huggingface_hub

app.py

@@ -15,189 +15,157 @@ import joblib
 model_path = hf_hub_download(repo_id="harishsohani/MLOP-Project-Tourism", filename="best_tourism_model.joblib")
 model = joblib.load(model_path)
 
-# Custom CSS
-st.markdown("""
-<style>
-/* Change size of title */
-h1 {
-    font-size: 40px !important;
-    color: #00b4d8;
-}
-
-/* Change size of header */
-h2 {
-    font-size: 28px !important;
-    color: #0077b6;
-}
-
-/* Change size of subheader */
-h3 {
-    font-size: 22px !important;
-}
-</style>
-""", unsafe_allow_html=True)
-
-# Streamlit UI for Machine Failure Prediction
-st.title("Tourism App - Input form")
-st.write("""
-This application predicts the likelihood of whether a customer would take the product based on following set of parameters.
-Please provide the following details.
-""")
-
 # ---------------------------------------------------------
-# Define Unique Values for each column
+# UI OPTIMIZATION (CSS + Layout Tweaks)
 # ---------------------------------------------------------
-
-TypeofContact_vals = ['Self Enquiry', 'Company Invited']
-
-Occupation_vals = ['Salaried', 'Free Lancer', 'Small Business', 'Large Business']
-
-Gender_vals = ['Female', 'Male']   
-
-ProductPitched_vals = ['Deluxe', 'Basic', 'Standard', 'Super Deluxe', 'King']
-
-MaritalStatus_vals = ['Single', 'Divorced', 'Married', 'Unmarried']
-
-Designation_vals = ['Manager', 'Executive', 'Senior Manager', 'AVP', 'VP']
-
-CityType = [ "Tier 1", "Tier 2", "Tier3"]
-
-CityTier_vals = [1, 2, 3]
-
-PreferredPropertyStar_vals = [3.0, 4.0, 5.0]
-
-NumberOfTrips_vals = [1, 2, 7, 5, 6, 3, 4, 19, 21, 8, 20, 22]
-
-PitchSatisfactionScore_vals = [1, 2, 3, 4, 5]
-
+st.markdown("""
+    <style>
+        /* Reduce padding at top/bottom */
+        .main {
+            padding-top: 1rem;
+        }
+
+        /* Card-style containers */
+        .card {
+            background-color: #f8f9fa;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+            margin-bottom: 20px;
+        }
+
+        /* Smaller headers */
+        h1 { font-size: 32px !important; }
+        h2 { font-size: 26px !important; }
+        h3 { font-size: 20px !important; }
+
+        /* Input element spacing */
+        .stSelectbox, .stNumberInput, .stTextInput {
+            margin-bottom: -10px;
+        }
+
+        /* Prediction box sticky to top-right */
+        .sticky {
+            position: fixed;
+            top: 80px;
+            right: 20px;
+            width: 300px;
+            z-index: 999;
+            background-color: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+        }
+    </style>
+""", unsafe_allow_html=True)
 
 # ---------------------------------------------------------
-# SECTION 1: Personal Information
+# PERSONAL INFORMATION
 # ---------------------------------------------------------
+with st.expander("👤 1. Personal Information", expanded=True):
+    st.markdown('<div class="card">', unsafe_allow_html=True)
 
-st.header("1️⃣ Personal Information")
-col1, col2 = st.columns(2)
+    col1, col2 = st.columns(2)
+    with col1:
+        Age = st.number_input("Age", 18, 90, 30)
+        Gender = st.selectbox("Gender", ["Male", "Female"])
+        CityTier_label = st.selectbox("City Tier", ["Tier 1", "Tier 2", "Tier 3"])
+        Passport = st.selectbox("Has Passport?", [0, 1])
 
-with col1:
-    Age = st.number_input("Age", min_value=1, max_value=150, value=30)
-    Gender = st.selectbox("Gender", Gender_vals)
+    with col2:
+        MaritalStatus = st.selectbox("Marital Status", ["Single", "Married", "Divorced"])
+        MonthlyIncome = st.number_input("Monthly Income (₹)", 0, 500000, 50000)
+        Occupation = st.selectbox("Occupation", ["Salaried", "Self Employed", "Entrepreneur"])
+        OwnCar = st.selectbox("Owns a Car?", [0, 1])
 
-with col2:
-    MaritalStatus = st.selectbox("Marital Status", MaritalStatus_vals)
-    MonthlyIncome = st.number_input("Monthly Income", min_value=0, value=50000)
+    st.markdown('</div>', unsafe_allow_html=True)
 
+CityTier = {"Tier 1": 1, "Tier 2": 2, "Tier 3": 3}[CityTier_label]
 
 
 # ---------------------------------------------------------
-# Section 2: Customer Profile
+# TRAVEL INFORMATION
 # ---------------------------------------------------------
-st.header("2️⃣ Customer Background & Profile")
-col3, col4 = st.columns(2)
+with st.expander("✈️ 2. Travel Information"):
+    st.markdown('<div class="card">', unsafe_allow_html=True)
 
-with col3:
-    Occupation = st.selectbox("Occupation", Occupation_vals)
-    Designation = st.selectbox("Designation", Designation_vals)
+    col1, col2 = st.columns(2)
+    with col1:
+        NumberOfTrips = st.number_input("Average Trips per Year", 0, 100, 2)
+        NumberOfChildrenVisiting = st.number_input("Children (Below 5 years)", 0, 10, 0)
 
-with col4:
-    CityTier = st.selectbox("City Tier", sorted(CityTier_vals))
-    OwnCar_display = st.radio("Own Car?", ["Yes", "No"])
-    Passport_display = st.radio("Passport?", ["Yes", "No"])
+    with col2:
+        NumberOfPersonVisiting = st.number_input("Total Persons Visiting", 1, 10, 2)
+        PreferredPropertyStar = st.selectbox("Preferred Property Star", [1, 2, 3, 4, 5])
 
-# Convert Yes/No → 1/0
-OwnCar = 1 if OwnCar_display == "Yes" else 0
-Passport = 1 if Passport_display == "Yes" else 0
-
-# ---------------------------------------------------------
-# SECTION 3: Travel & Vacation Behavior
-# ---------------------------------------------------------
-
-st.header("3️⃣ Travel & Vacation Behavior")
-col5, col6 = st.columns(2)
-
-with col5:
-    NumberOfPersonVisiting = st.number_input(
-        "Number of Persons Visiting", min_value=1, max_value=10, value=2
-    )
-    NumberOfChildrenVisiting = st.number_input(
-        "Number of Children Visiting", min_value=0, max_value=10, value=0
-    )
-
-with col6:
-    NumberOfTrips = st.number_input(
-      "Number of Trips per Year",
-      min_value=0,
-      max_value=50,
-      value=1
-    )
-    PreferredPropertyStar = st.selectbox(
-        "Preferred Property Star", PreferredPropertyStar_vals
-    )
+    st.markdown('</div>', unsafe_allow_html=True)
 
 
 # ---------------------------------------------------------
-# SECTION 4: Sales Interaction Details
+# INTERACTION INFORMATION
 # ---------------------------------------------------------
+with st.expander("🗣️ 3. Interaction Details"):
+    st.markdown('<div class="card">', unsafe_allow_html=True)
 
-st.header("4️⃣ Sales Interaction Details")
-col7, col8 = st.columns(2)
-
-with col7:
-    TypeofContact = st.selectbox("Type of Contact", TypeofContact_vals)
-    ProductPitched = st.selectbox("Product Pitched", ProductPitched_vals)
+    col1, col2 = st.columns(2)
 
-with col8:
-    DurationOfPitch = st.number_input(
-        "Duration of Pitch (minutes)", min_value=0.0, max_value=60.0, value=10.0
-    )
-    PitchSatisfactionScore = st.selectbox(
-        "Pitch Satisfaction Score", sorted(PitchSatisfactionScore_vals)
-    )
-    NumberOfFollowups = st.number_input(
-        "Number of Follow-ups", min_value=0, max_value=20, value=2
-    )
+    with col1:
+        DurationOfPitch = st.number_input("Pitch Duration (minutes)", 0, 200, 10)
+        NumberOfFollowups = st.number_input("Number of Follow-ups", 0, 20, 1)
 
+    with col2:
+        PitchSatisfactionScore = st.selectbox("Pitch Satisfaction Score", [1, 2, 3, 4, 5])
+        ProductPitched = st.selectbox("Product Pitched", 
+                                      ["Basic", "Standard", "Deluxe", "Luxury"])
 
-# ---------------------------------------------------------
-# Prepare Input for Model
-# ---------------------------------------------------------
+    TypeofContact = st.selectbox("Type of Contact", ["Company Invited", "Self Inquiry"])
 
-input_data = {
-    "Age": Age,
-    "TypeofContact": TypeofContact,
-    "CityTier": CityTier,
-    "DurationOfPitch": DurationOfPitch,
-    "Occupation": Occupation,
-    "Gender": Gender,
-    "NumberOfPersonVisiting": NumberOfPersonVisiting,
-    "NumberOfFollowups": NumberOfFollowups,
-    "ProductPitched": ProductPitched,
-    "PreferredPropertyStar": PreferredPropertyStar,
-    "MaritalStatus": MaritalStatus,
-    "NumberOfTrips": NumberOfTrips,
-    "Passport": Passport,        # now 0/1
-    "PitchSatisfactionScore": PitchSatisfactionScore,
-    "OwnCar": OwnCar,            # now 0/1
-    "NumberOfChildrenVisiting": NumberOfChildrenVisiting,
-    "Designation": Designation,
-    "MonthlyIncome": MonthlyIncome
-}
-
-import_data_df = pd.DataFrame([input_data])
-
-# The following code can be enabled to see the etails of data frame prepared from user input
-# This code was used for debugging and now disabled
-## st.subheader("📦 Input Data Summary")
-## st.json(input_data)
+    st.markdown('</div>', unsafe_allow_html=True)
 
 
 # ---------------------------------------------------------
-# Prediction Button
+# Predict Button
 # ---------------------------------------------------------
-
-if st.button("Predict"):
-    st.success("Prediction logic goes here (connect your model).")
-
-    prediction = model.predict(import_data_df)[0]
-    result = "Customer is likely to Take Product" if prediction == 1 else "Customer will not Take the Product"
-    st.subheader("Prediction Result:")
-    st.success(f"Prediction as per Model: **{result}**")
+if st.button("🔮 Predict"):
+    input_data = {
+        "Age": Age,
+        "Gender": Gender,
+        "CityTier": CityTier,
+        "MaritalStatus": MaritalStatus,
+        "MonthlyIncome": MonthlyIncome,
+        "Occupation": Occupation,
+        "NumberOfTrips": NumberOfTrips,
+        "NumberOfAdultsVisiting": NumberOfAdultsVisiting,
+        "NumberOfChildrenVisiting": NumberOfChildrenVisiting,
+        "PitchDuration": DurationOfPitch,
+        "NumberOfFollowups": NumberOfFollowups,
+        "PreferredProperty": PreferredProperty,
+        "PitchSatisfaction": PitchSatisfaction,
+        "ProductPitched": ProductPitched,
+        "TourType": TourType,
+        "Passport": Passport
+    }
+
+    input_df = pd.DataFrame([input_data])
+
+    # ---------------------------------------------------------
+    # Prediction Button
+    # ---------------------------------------------------------
+    if st.button("Predict"):
+        prediction = model.predict(input_df)[0]
+        result = (
+            "Customer is likely to purchase the product"
+            if prediction == 1 else
+            "Customer is unlikely to purchase the product"
+        )
+        
+        st.subheader("Prediction Result")
+        st.success(f"**{result}**")
+        
+            
+    '''pred = model.predict(df_input)[0]
+    st.markdown(f"""
+        <div class="sticky">
+            <h2>📈 Prediction: {pred}</h2>
+        </div>
+    """, unsafe_allow_html=True)'''