import streamlit as st
import pandas as pd
import numpy as np


  
st.markdown("""
    <h1 style="text-align:center; color: #FF4500;">Hotel Data Analysis & Machine Learning</h1>
""", unsafe_allow_html=True)
st.markdown(
    """
    <img src="https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/8O1ZKtL2Fy7LM4wXzjtjE.jpeg" width="100%" />
    """, 
    unsafe_allow_html=True
)
st.markdown("""
### Predicting Customer Preferences and Optimizing Pricing:
##### 📊 Data Exploration and Preprocessing:
- <span style="font-size:20px;">Cleaning and preparing data by handling missing values, encoding categorical features like *"category"* and *"location,"* and normalizing numerical data such as *"price"* and *"rating."*</span>
- <span style="font-size:20px;">Analyzing trends in **customer reviews**, **cashback offers**, **discounts**, and **free services** to identify influential factors.

##### 🤖 Predictive Modeling:
- <span style="font-size:20px;">**Target Variable**: Predicting key metrics like *price category*, *likelihood of cancellation*, or *hotel ratings.*</span>
- <span style="font-size:20px;">**Model Selection**: Building ML models such as **Decision Trees**, **Random Forests**, or **Gradient Boosting** for classification or regression tasks.</span>
- <span style="font-size:20px;">**Feature Engineering**: Extracting insights from **review text** (via text sentiment analysis) or **free services** (binary encoding).</span>

##### 📈 Model Evaluation:
- <span style="font-size:20px;">Comparing model performance using metrics like **accuracy**, **F1 score**, or **RMSE**, depending on the task.</span>
- <span style="font-size:20px;">Employing techniques like **hyperparameter tuning** and **cross-validation** for optimization.</span>

##### 💼 Insights and Deployment:
- <span style="font-size:20px;">Unveiling actionable insights from **feature importance** to guide hotel marketing and pricing strategies.</span>
- <span style="font-size:20px;">Deploying the model in a user-friendly interface to support stakeholders in making real-time decisions.</span>

##### By integrating **machine learning** with **data analysis**, this project empowers hotel businesses to enhance customer satisfaction, optimize pricing strategies, and maximize profitability.
""", unsafe_allow_html=True)

# # Display an image from a file
st.subheader("Hotel Data Analysis Model Creation Flow")
st.markdown("![Beige Neutral Flowchart Graph Template.gif](https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/owTdXfE7l7CdXQPSaAqBX.gif)")


# Define the URL of the background image (use your own image URL)
background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/vulm4WwHmmA14tsVXYaTM.jpeg"

# Apply custom CSS for the background image and overlay
st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("{background_image_url}");
            background-size: auto;  /* Ensure the image width is 100% of the screen, and the height scales proportionally */
            background-repeat: repeat;  /* Repeat only vertically */
            background-position: top center;  /* Start repeating from the top center */
            background-attachment: fixed;  /* Keeps the background fixed as you scroll */
            height: 100%;
        }}
        
        /* Semi-transparent overlay */
        .stApp::before {{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);  /* Adjust transparency here (0.4 for 40% transparency) */
            z-index: -1;
        }}
        
        /* Container to center elements and limit width */
        .content-container {{
            max-width: 70%;  /* Limit content width to 70% */
            margin: 0 auto;  /* Center the container */
            padding: 50px;  /* Add some padding for spacing */
        }}
        /* Styling the markdown content */
        .stMarkdown {{
            color: white;  /* White text to ensure visibility */
            font-size: 100px;  /* Adjust font size for readability */
        }}
    </style>
    """, 
    unsafe_allow_html=True
)