app.py

import gradio as gr
import joblib
import numpy as np
from sklearn.preprocessing import LabelEncoder
import warnings

css = """
body {
    background-image: url('https://i.postimg.cc/MH29Xk3Z/mema.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Make input containers and recommendation boxes transparent */
.gradio-container {
    background-color: transparent !important;
}
.gradio-interface {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 10px !important;
    padding: 20px !important;
}
.gradio-box {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}
.title-box {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}
.canton-try-btn {
    background: linear-gradient(135deg, #FF8C00, #FFA500) !important;
    border: none !important;
    color: white !important;
    margin-top: 15px !important;
    font-weight: bold !important;
    border-radius: 25px !important;
    padding: 10px 25px !important;
    font-size: 16px !important;
    box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}
.canton-try-btn:hover {
    background: linear-gradient(135deg, #FFA500, #FF8C00) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(255, 140, 0, 0.4) !important;
}
.canton-try-btn:active {
    transform: translateY(0) !important;
}
"""

# Suppress warnings
warnings.filterwarnings("ignore")

# Custom options with emojis (frontend display)
mood_options = ["🔥 g na g", "😴 tinatamad", "😌 busog pa", "🍃 chill lang"]
weather_options = ["🌧️ bed weather", "🔥 impyerno", "💨 mahangin", "☁️ makulimlim"]
craving_options = ["😐 low", "😋 medium", "🤤 high", "👹 oa"]
last_meal_options = ["🚫 no meal", "🍛 light", "🍗 heavy"]
budget_options = ["💰 kakadating lang ng allowance", "💸 saks lang", "😭 gipit"]

# Raw values (what the model expects)
mood_values = ["g na g", "tinatamad", "busog pa", "chill lang"]
weather_values = ["bed weather", "impyerno", "mahangin", "makulimlim"] 
craving_values = ["low", "medium", "high", "oa"]
last_meal_values = ["no meal", "light", "heavy"]
budget_values = ["kakadating lang ng allowance", "saks lang", "gipit"]

# Create mapping from display text to model values
option_map = {
    "mood": dict(zip(mood_options, mood_values)),
    "weather": dict(zip(weather_options, weather_values)),
    "craving": dict(zip(craving_options, craving_values)),
    "last_meal": dict(zip(last_meal_options, last_meal_values)),
    "budget": dict(zip(budget_options, budget_values))
}

# Load models and encoders
model_flavor = joblib.load("random_forest_model_flavor.pkl")
model_topping = joblib.load("random_forest_model_topping.pkl")
model_drink = joblib.load("random_forest_model_drink.pkl")
encoder_flavor = joblib.load("encoder_flavor.pkl")
encoder_topping = joblib.load("encoder_topping.pkl")
encoder_drink = joblib.load("encoder_drink.pkl")
input_encoders = joblib.load("input_encoders.pkl")

def predict_merienda(mood, weather, craving, last_meal, budget):
    # Map selected options to model values
    inputs = {
        "mood": option_map["mood"][mood],
        "weather": option_map["weather"][weather],
        "craving_level": option_map["craving"][craving],
        "last_meal": option_map["last_meal"][last_meal],
        "budget": option_map["budget"][budget]
    }
    
    features = [
        inputs["mood"],
        inputs["weather"],
        inputs["craving_level"],
        inputs["last_meal"],
        inputs["budget"]
    ]
    
    encoded = [input_encoders[col].transform([val])[0] 
               for col, val in zip(input_encoders.keys(), features)]
    encoded_np = np.array(encoded).reshape(1, -1)
    
    pred_flavor = encoder_flavor.inverse_transform(model_flavor.predict(encoded_np))[0]
    pred_topping = encoder_topping.inverse_transform(model_topping.predict(encoded_np))[0]
    pred_drink = encoder_drink.inverse_transform(model_drink.predict(encoded_np))[0]
    
    # Format the output with the new styling
    output_html = f"""
    <div style='background-color: rgba(255, 255, 255, 0.7); padding: 20px; border-radius: 10px;'>
        <h2 style='text-align: center;'>✨ Your Merienda Destiny Revealed! ✨</h2>
        <p style='text-align: center;'>The merienda stars have aligned to bring you:</p>
        
        <div style='margin-top: 20px;'>
            <h3>Recommended Flavor</h3>
            <ul>
            🍜 Pancit Canton Flavor: {pred_flavor}</li>
            </ul>
            
            <h3>Recommended Topping</h3>
            <ul>
            🍡 Topping: {pred_topping}</li>
            </ul>
            
            <h3>Recommended Drink</h3>
            <ul>
            🥤 Drink: {pred_drink}</li>
            </ul>
        </div>
    </div>
    """
    
    return output_html, gr.update(visible=True)

def clear_form():
    # Return empty string for output_html, None for all inputs, and hide clear button
    return "", None, None, None, None, None, gr.update(visible=False)

# Create Gradio interface with emoji options
with gr.Blocks(title="✨Canton-ality Test: Alamin ang Totoong Flavor Mo🧐 ", theme=gr.themes.Soft(), css=css) as app:
    with gr.Column(elem_classes="title-box"):
        gr.Markdown("""
        <div style="text-align: center;">
            <h1>✨ Canton-ality Test: Alamin ang Totoong Flavor Mo 🧐</h1>
            <p>Kwek-kwek or Fishballs? Let's see what the merienda gods say...</p>
        </div>
        """)
    
    with gr.Row():
        with gr.Column():
            mood = gr.Radio(
                choices=mood_options,
                label="How are you feeling today?",
                interactive=True
            )
            weather = gr.Radio(
                choices=weather_options,
                label="What's the weather like?",
                interactive=True
            )
            
        with gr.Column():
            craving = gr.Radio(
                choices=craving_options,
                label="How strong is your craving?",
                interactive=True
            )
            last_meal = gr.Radio(
                choices=last_meal_options,
                label="How heavy was your last meal?",
                interactive=True
            )
            budget = gr.Radio(
                choices=budget_options,
                label="What's your budget situation?",
                interactive=True
            )
    
    submit_btn = gr.Button("Get My Merienda Recommendation 🍽️")
    
    output_html = gr.HTML()
    
    # Initially hidden clear button
    clear_btn = gr.Button("Canton-try Again! 😋", 
                     elem_classes="canton-try-btn", 
                     visible=False)
    
    submit_btn.click(
        fn=predict_merienda,
        inputs=[mood, weather, craving, last_meal, budget],
        outputs=[output_html, clear_btn]
    )
    
    clear_btn.click(
        fn=clear_form,
        inputs=None,
        outputs=[output_html, mood, weather, craving, last_meal, budget, clear_btn]
    )

app.launch()