Update app.py

app.py

@@ -8,34 +8,7 @@ from nltk.stem import WordNetLemmatizer
 from transformers import pipeline
 from PIL import Image
 
-# ✅ Set page config as the first Streamlit command (default to wide)
-st.set_page_config(page_title="News Classifier", page_icon="📰", layout="wide")
-
-# ✅ Use JavaScript to detect screen size and update session state
-device_type_script = """
-<script>
-    let screen_width = window.innerWidth;
-    let device_type = screen_width < 768 ? "Mobile" : "PC";
-    let streamlitVar = window.parent;
-    streamlitVar.postMessage({device_type: device_type}, "*");
-</script>
-"""
-st.markdown(device_type_script, unsafe_allow_html=True)
-
-# ✅ Initialize session state
-if "device_type" not in st.session_state:
-    st.session_state.device_type = "PC"  # Default to PC
-
-# ✅ Allow user to manually select device type (Optional)
-st.session_state.device_type = st.radio("Select your device type", ["Mobile", "PC"], index=0 if st.session_state.device_type == "PC" else 1)
-
-# ✅ Apply UI adjustments based on device type
-if st.session_state.device_type == "Mobile":
-    st.write("📱 Mobile Mode Activated (UI adjusted)")
-else:
-    st.write("💻 PC Mode Activated (Full-width UI)")
-
-# ✅ Continue with the rest of the app
+# Download required NLTK data
 nltk.download('stopwords')
 nltk.download('wordnet')
 nltk.download('omw-1.4')
@@ -56,13 +29,6 @@ label_mapping = {
 # Store classified article for QA
 context_storage = {"context": "", "bulk_context": "", "num_articles": 0}
 
-# Detect device type
-device_type = st.radio("Are you using a mobile device or a PC?", ["Mobile", "PC"])
-if device_type == "Mobile":
-    st.set_page_config(layout="centered")
-else:
-    st.set_page_config(layout="wide")
-
 # Text Cleaning Functions
 def clean_text(text):
     text = text.lower()
@@ -125,6 +91,35 @@ def chatbot_response(history, user_input, text_input=None, file_input=None):
     return history, answer
 
 # Streamlit App Layout
+st.set_page_config(page_title="News Classifier", page_icon="📰")
+
+# Custom CSS for responsive design (desktop/mobile optimization)
+st.markdown(
+    """
+    <style>
+        @media only screen and (max-width: 600px) {
+            .stApp {
+                padding: 10px;
+            }
+        }
+
+        @media only screen and (min-width: 601px) {
+            .stApp {
+                padding: 20px;
+            }
+        }
+
+        .stButton {
+            margin-top: 20px;
+        }
+
+        .stTextInput {
+            width: 100%;
+        }
+    </style>
+    """, unsafe_allow_html=True
+)
+
 cover_image = Image.open("cover.png")  # Ensure this image exists
 st.image(cover_image, caption="News Classifier 📢", use_container_width=True)
 
@@ -134,8 +129,8 @@ text_input = st.text_area("Enter News Text", placeholder="Type or paste news con
 if st.button("🔍 Classify"):
     if text_input:
         category, confidence = classify_text(text_input)
-        st.write(f"*Predicted Category:* {category}")
-        st.write(f"*Confidence Level:* {confidence}")
+        st.write(f"Predicted Category: {category}")
+        st.write(f"Confidence Level: {confidence}")
     else:
         st.warning("Please enter some text to classify.")
 
@@ -162,8 +157,7 @@ user_input = st.text_input("Ask about news classification or topics", placeholde
 source_toggle = st.radio("Select Context Source", ["Single Article", "Bulk Classification"])
 if st.button("✉ Send"):
     history, bot_response = chatbot_response(history, user_input, text_input=text_input if source_toggle == "Single Article" else None, file_input=file_input if source_toggle == "Bulk Classification" else None)
-    st.write("*Chatbot Response:*")
+    st.write("Chatbot Response:")
     for q, a in history:
-        st.write(f"*Q:* {q}")
-        st.write(f"*A:* {a}")
-
+        st.write(f"Q: {q}")
+        st.write(f"A: {a}")