from pathlib import Path
import gradio as gr
from transformers import pipeline

bg_img = Path("faces.jpeg") 

model_id = 'user-anto/bert-emotion-classifier'
classifier = pipeline('text-classification', model=model_id)

label_map = {
    "label_0": "neutral", "label_1": "anger", "label_2": "love",
    "label_3": "fear", "label_4": "hate", "label_5": "happiness",
    "label_6": "sadness", "label_7": "surprise"
}
emoji_map = {
    "neutral": "😐", "anger": "😠", "love": "❤",
    "fear": "😨", "hate": "🤬", "happiness": "😊",
    "sadness": "😢", "surprise": "😲"
}

def predict_emotion(text):
    if not text:
        return ""
    pred = classifier(text)[0]
    label_raw = pred["label"].lower()
    label = label_map[label_raw]
    score = pred["score"] * 100
    emoji = emoji_map.get(label, "")
    return f"{label.capitalize()} {emoji} ({score:.1f}%)"

with gr.Blocks(
    css=f"""
    /* Ensure the body and html take full height */
    html, body {{
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden; /* Hide scrollbars if content is within view */
    }}

    /* Apply background image to the body or the main Gradio container */
    body {{
        background-image: url("file/{bg_img}"); /* Use the background image */
        background-size: cover; /* Cover the entire area */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-attachment: fixed; /* Fix the background image during scroll */
    }}

    /* Main Gradio container styling */
    .gradio-container {{ 
        padding: 20px; /* Add some padding around the content */
        color:white; /* Sets text color to white */
        text-shadow:1px 1px 2px black; /* Adds text shadow for better readability */
        display: flex; /* Use flexbox for centering */
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        min-height: 100vh; /* Ensure container takes full viewport height */
        box-sizing: border-box; /* Include padding in element's total width and height */
        background: rgba(0,0,0,0.5); /* Semi-transparent overlay to make text more readable */
    }}

    /* Target specific Gradio components to refine their appearance over the background */
    .gr-textbox, .gr-markdown {{
        background: rgba(0,0,0,0.5); /* Slightly transparent dark background for readability */
        border-radius: 8px; /* Rounded corners */
        padding: 15px; /* Add padding inside components */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow */
    }}

    input[type='text'], textarea {{ 
        background: rgba(255,255,255,0.1); /* Slightly transparent white background for input fields */
        color: white; /* White text color */
        border: 1px solid rgba(255,255,255,0.3); /* Light border */
        border-radius: 5px; /* Rounded corners for input fields */
        padding: 10px; /* Padding for input fields */
    }}

    /* Style for the button */
    .gr-button {{
        background: linear-gradient(145deg, #007bff, #0056b3); /* Blue gradient */
        color: orange;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 1.1em;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }}
    .gr-button:hover {{
        background: linear-gradient(145deg, #0056b3, #007bff);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }}

    /* Styling for the Markdown headlines */
    .gradio-container h2 {{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
        color: #FFD700; /* Gold color for headlines */
        text-align: center;
        padding: 10px 20px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.15); /* Slightly transparent background */
        backdrop-filter: blur(5px); /* Frosted glass effect */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Deeper shadow */
        margin-bottom: 20px;
        letter-spacing: 1.5px; /* Spacing between letters */
        text-transform: uppercase; /* Uppercase text */
        border: 1px solid rgba(255, 215, 0, 0.5); /* Gold border */
    }}
    .gradio-container h3 {{ /* If you use h3, it will also be styled */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #ADD8E6; /* Light blue color for sub-headlines */
        text-align: center;
        margin-bottom: 15px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }}
    """
    ,
) as demo:
    with gr.Column(
    ) as main_content_column:
        gr.Markdown("## 🧠 BERT Emotion Classifier")
        gr.Markdown("### Enter a sentence and see what BERT detects.")

        with gr.Row():
            text_input = gr.Textbox(label="Input Text", placeholder="Type your sentence here...")
        
        predict_button = gr.Button("Predict Emotion")
        output = gr.Textbox(label="Predicted Emotion")

        predict_button.click(fn=predict_emotion, inputs=text_input, outputs=output)

if __name__ == "__main__":
    demo.launch(share=True)