Update app.py

app.py

@@ -15,7 +15,29 @@ import shutil
 
 # ----------------------------- UI SETUP --------------------------------------
 st.set_page_config(page_title="Learning with Fun", layout="wide")
-st.title("📚 Learning with Fun - Educational Q&A for Kids")
+st.markdown("""
+    <style>
+    .main {
+        background-color: #f0f8ff;
+    }
+    .block-container {
+        padding-top: 2rem;
+    }
+    .stSelectbox > label, .stTextInput > label {
+        font-size: 18px;
+        font-weight: bold;
+        color: #2e7d32;
+    }
+    .stTextInput input {
+        font-size: 16px;
+        padding: 10px;
+        border-radius: 10px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+st.title("🌈 Learning with Fun 🎓")
+st.subheader("Helping Kids Learn Through Interactive Books, Questions & Stories!")
 
 # ----------------------------- USER INPUT -----------------------------------
 grade = st.selectbox("Select your Grade", ["Grade 5", "Grade 6"])
@@ -23,7 +45,11 @@ subject = st.selectbox("Select Subject", ["Science", "Math", "English"])
 
 uploaded_files = st.file_uploader("Upload textbook files (PDF, DOCX, JPEG)", type=["pdf", "docx", "jpg", "jpeg"], accept_multiple_files=True)
 question = st.text_input("Ask your question in English or Urdu")
-groq_api_key = st.text_input("🔐 Enter your GROQ API Key", type="password")
+
+# ----------------------------- ENV VAR SETUP -----------------------------------
+groq_api_key = os.getenv("GROQ_API_KEY", "")
+if not groq_api_key:
+    st.warning("GROQ API key is not set in the environment. Please configure it as a Hugging Face Secret with the name 'GROQ_API_KEY'.")
 
 # ------------------------- SETUP TEMP FOLDER -------------------------------
 temp_dir = tempfile.mkdtemp()
@@ -105,12 +131,12 @@ def generate_audio(text, lang='ur'):
     with open(audio_path, "rb") as audio_file:
         audio_bytes = audio_file.read()
     b64 = base64.b64encode(audio_bytes).decode()
-    audio_html = f'<audio autoplay controls><source src="data:audio/mp3;base64,{b64}" type="audio/mp3"></audio>'
+    audio_html = f'<audio controls><source src="data:audio/mp3;base64,{b64}" type="audio/mp3"></audio>'
     return audio_html
 
 # ----------------------------- MAIN LOGIC ----------------------------------
 if question and uploaded_files and groq_api_key:
-    with st.spinner("Processing your documents..."):
+    with st.spinner("Processing your documents and generating answer..."):
         documents = load_documents(uploaded_files)
         chunks = split_documents(documents)
         vector_db = create_vector_store(chunks)
@@ -124,7 +150,9 @@ if question and uploaded_files and groq_api_key:
     if len(parts) == 2:
         st.markdown(f"**Explanation:**\n{parts[0]}")
         st.markdown(f"**Storytelling:**\n{parts[1]}")
-        st.markdown(generate_audio(parts[1]), unsafe_allow_html=True)
+
+        if st.button("🔊 Play Storytelling Voice"):
+            st.markdown(generate_audio(parts[1]), unsafe_allow_html=True)
     else:
         st.markdown(answer)