Update app.py

app.py

@@ -2,15 +2,12 @@ import streamlit as st
 from transformers import pipeline
 import re
 
-# Set page config
 st.set_page_config(page_title="Hindi Sentiment Analysis", page_icon="😊")
 
-# Load model pipeline
 pipe = pipeline("text-classification", model="trohith89/Hindi_Sentiment_3_class")
 names = ["neutral", "positive", "negative"]
 emojis = {"positive": "🤗", "negative": "😔", "neutral": "😐"}
 
-# Language check function
 def is_mostly_hindi(text):
     if not text.strip():
         return False
@@ -23,7 +20,6 @@ def is_mostly_hindi(text):
     valid_chars = devanagari_chars + allowed_chars == total_chars
     return hindi_proportion >= 0.7 and valid_chars
 
-# Clean input function
 def clean_input(text):
     cleaned_text = re.sub(r'[^a-zA-Z0-9\u0900-\u097F\s?.!]', ' ', text)
     cleaned_text = re.sub(r'([?.!])(?![?.!]\s|$)', '', cleaned_text)
@@ -33,12 +29,13 @@ def clean_input(text):
 # Custom CSS
 st.markdown("""
 <style>
-/* Background */
-body {
-    background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/ZxT1afWwF-Ql3s__W8PaU.jpeg');
+/* 🌄 Full Background Image */
+html, body, .stApp {
+    background-image: url("https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/ohVnlFeFlCUhs1Sbj08fj.jpeg");
     background-size: cover;
-    background-attachment: fixed;
     background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 }
 
 /* Title Styling */
@@ -56,7 +53,7 @@ h1 {
     100% { opacity: 1; transform: translateY(0); }
 }
 
-/* Instruction box */
+/* Instructions */
 .instructions {
     text-align: center;
     font-size: 18px;
@@ -75,28 +72,28 @@ h1 {
     100% { opacity: 1; transform: rotateY(0); }
 }
 
-/* Text Area Fix */
-textarea {
-    border: 3px solid transparent !important;
-    border-image: linear-gradient(45deg, #004d00, #000000, #000066) 1 !important;
-    border-radius: 12px !important;
-    padding: 15px !important;
-    background: rgba(42, 42, 42, 0.8) !important;
-    color: #e6e6e6 !important;
-    font-size: 16px !important;
-    width: 100% !important;
-    max-width: 600px !important;
-    display: block !important;
-    margin: 0 auto !important;
-    box-sizing: border-box !important;
+/* ✅ Text Area Match Full Border */
+.stTextArea textarea {
+    border: 3px solid transparent;
+    border-image: linear-gradient(45deg, #004d00, #000000, #000066) 1;
+    border-radius: 12px;
+    padding: 15px;
+    background: rgba(42, 42, 42, 0.85);
+    color: #e6e6e6;
+    font-size: 16px;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    display: block;
+    box-sizing: border-box;
 }
-textarea:focus {
-    transform: scale(1.03) !important;
-    box-shadow: 0 0 15px rgba(0, 0, 102, 0.7) !important;
-    border-image: linear-gradient(45deg, #006600, #333333, #000099) 1 !important;
+.stTextArea textarea:focus {
+    transform: scale(1.03);
+    box-shadow: 0 0 15px rgba(0, 0, 102, 0.7);
+    border-image: linear-gradient(45deg, #006600, #333333, #000099) 1;
 }
 
-/* Button Styling */
+/* Button */
 div.stButton > button {
     background: linear-gradient(45deg, #004d00, #000000, #000066);
     color: #e6e6e6;
@@ -104,9 +101,9 @@ div.stButton > button {
     padding: 12px 30px;
     border: none;
     border-radius: 30px;
-    display: block;
     margin: 20px auto;
     transition: all 0.5s ease;
+    display: block;
 }
 div.stButton > button:hover {
     transform: translateY(-5px) rotate(2deg);
@@ -114,7 +111,7 @@ div.stButton > button:hover {
     background: linear-gradient(45deg, #006600, #333333, #000099);
 }
 
-/* Output Styling */
+/* Sentiment Output */
 .output-container {
     padding: 40px 20px;
     border-radius: 20px;
@@ -126,8 +123,8 @@ div.stButton > button:hover {
     min-height: 100px;
     display: block;
     box-sizing: border-box;
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 26px;
+    font-weight: 700;
 }
 @keyframes slideUpGlow {
     0% { opacity: 0; transform: translateY(30px); }
@@ -146,22 +143,13 @@ div.stButton > button:hover {
     color: #1a1a1a;
 }
 
-/* Extra Info */
+/* Text + Confidence */
 .output-info {
     color: white;
     font-size: 16px;
     text-align: center;
     margin-top: 10px;
 }
-
-/* Warnings */
-.stAlert {
-    background: rgba(255, 0, 0, 0.2);
-    color: #ffcccc;
-    border-radius: 12px;
-    padding: 15px;
-    text-align: center;
-}
 </style>
 """, unsafe_allow_html=True)
 
@@ -178,10 +166,10 @@ Click the 'Predict' button to analyze the sentiment (positive, negative, or neut
 </div>
 """, unsafe_allow_html=True)
 
-# Text Input
+# Input
 user_input = st.text_area("", placeholder="Enter your text in Hindi here...", height=150)
 
-# Prediction
+# Predict
 if st.button("Predict"):
     if not user_input.strip():
         st.warning("⚠️ Please enter text. Empty input is not allowed.")
@@ -195,7 +183,5 @@ if st.button("Predict"):
             sentiment = names[sentiment_index]
             emoji = emojis[sentiment]
             output_class = f"output-{sentiment}"
-            
-            # Output box
             st.markdown(f"<div class='output-container {output_class}'>{sentiment.capitalize()} {emoji}</div>", unsafe_allow_html=True)
-            st.markdown(f"<div class='output-info'><br><strong>Your Text:</strong> {user_input}<br><strong>Confidence Score:</strong> {result['score']:.2f}</div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='output-info'><strong>Your Text:</strong> {user_input}<br><strong>Confidence Score:</strong> {result['score']:.2f}</div>", unsafe_allow_html=True)