Added application file

app.py

@@ -0,0 +1,137 @@
+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)