Update app.py

app.py

@@ -6,17 +6,56 @@ from bs4 import BeautifulSoup
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.metrics.pairwise import cosine_similarity
 
+# --- Set Page Config ---
+st.set_page_config(
+    page_title="Education with Fun",
+    layout="centered",
+    page_icon="📘",
+)
+
+# --- Background Image ---
+def set_bg():
+    st.markdown(
+        f"""
+        <style>
+        .stApp {{
+            background-image: url("https://cdn.pixabay.com/photo/2017/06/29/02/05/classroom-2454153_1280.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+set_bg()
+
+# --- Header Banner ---
+st.markdown(
+    """
+    <div style='text-align: center; padding: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px;'>
+        <h1 style='color: green;'>📘 Education with Fun</h1>
+        <h4>Learn Science with Stories and Audio (Grade 5 & 6)</h4>
+    </div>
+    """, unsafe_allow_html=True
+)
+
+# --- Grade & Subject Selection ---
+grade = st.selectbox("🎓 Select Grade:", ["Grade 5", "Grade 6"])
+subject = st.selectbox("📚 Select Subject:", ["Science"])
+
 # --- Search online content ---
 def search_online_syllabus(grade, subject):
     urls = {
-        "5": {
+        "Grade 5": {
             "Science": [
-                "https://www.pctb.punjab.gov.pk/books",  # Punjab Board
+                "https://www.pctb.punjab.gov.pk/books",
                 "https://www.cambridgeinternational.org/programmes-and-qualifications/cambridge-primary/curriculum/science/",
                 "https://global.oup.com/education/content/primary/series/oxford-international-primary-science/"
             ]
         },
-        "6": {
+        "Grade 6": {
             "Science": [
                 "https://www.pctb.punjab.gov.pk/books",
                 "https://www.cambridgeinternational.org/programmes-and-qualifications/cambridge-primary/curriculum/science/",
@@ -36,15 +75,15 @@ def search_online_syllabus(grade, subject):
             combined_text += f"[Error fetching {url}]: {str(e)}\n"
     return combined_text
 
-# --- Answer generation ---
+# --- Answer Generation ---
 def get_answer(user_question, syllabus_text):
     chunks = syllabus_text.split('\n\n')
     vectorizer = TfidfVectorizer().fit_transform([user_question] + chunks)
     cosine_similarities = cosine_similarity(vectorizer[0:1], vectorizer[1:]).flatten()
     best_chunk = chunks[cosine_similarities.argmax()]
     
-    beginner = f"سیدھا سا جواب: {best_chunk.strip()}"
-    story = f"ایک کہانی کی صورت میں جواب: فرض کریں آپ ایک چھوٹے سائنسدان ہیں... {best_chunk.strip()}"
+    beginner = f"📗 سیدھا سا جواب: {best_chunk.strip()}"
+    story = f"📙 کہانی کی صورت میں: فرض کریں آپ ایک چھوٹے سائنسدان ہیں... {best_chunk.strip()}"
     return beginner, story
 
 # --- Urdu Text-to-Speech ---
@@ -54,26 +93,23 @@ def text_to_speech_urdu(text):
     tts.save(tmp_file.name)
     return tmp_file.name
 
-# --- Streamlit UI ---
-st.set_page_config(page_title="Education with Fun", layout="centered")
-st.markdown("<h1 style='text-align: center; color: green;'>📘 Education with Fun</h1>", unsafe_allow_html=True)
-st.markdown("<p style='text-align: center;'>Grade 5 & 6 Kids | Learn Science with Stories</p>", unsafe_allow_html=True)
-
-grade = st.selectbox("🎓 Select Grade:", ["5", "6"])
-subject = st.selectbox("📚 Select Subject:", ["Science"])
-question = st.text_area("❓ Ask your question (Urdu/English):")
+# --- Question Input ---
+st.markdown("### ❓ Ask your question (Urdu or English):")
+question = st.text_area("", placeholder="e.g., What is evaporation? / بخارات کیا ہوتے ہیں؟")
 
+# --- Submit Button ---
 if st.button("🔍 Get Answer"):
-    with st.spinner("📡 Searching online for syllabus..."):
+    with st.spinner("📡 Searching online syllabus..."):
         syllabus_text = search_online_syllabus(grade, subject)
+
     beginner, story = get_answer(question, syllabus_text)
 
     st.subheader("💡 Beginner-Friendly Answer:")
-    st.write(beginner)
+    st.success(beginner)
 
-    st.subheader("📖 Storytelling Style:")
-    st.write(story)
+    st.subheader("📖 Storytelling Style Answer:")
+    st.info(story)
 
-    if st.button("🔈 Hear the Answer"):
+    if st.button("🔈 Hear Urdu Audio"):
         audio_path = text_to_speech_urdu(beginner + "۔ " + story)
         st.audio(audio_path, format='audio/mp3')