Update app.py

app.py

@@ -8,136 +8,181 @@ import os
 @st.cache_resource
 def get_help_agent():
     from transformers import pipeline
-    # Using BlenderBot 400M Distill as the public conversational model
+    # Using BlenderBot 400M Distill as the public conversational model (used elsewhere)
     return pipeline("conversational", model="facebook/blenderbot-400M-distill")
 
-# Custom CSS for enhanced professional look with UI improvements
+# Enhanced Custom CSS with modern design
 def inject_custom_css():
     st.markdown("""
     <style>
-        /* UPDATED: Importing and configuring a modern font with improved responsiveness */
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
-        
-        html, body {
-            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
-            color: #333;
-            margin: 0;
-            padding: 0;
-            height: 100%;
-        }
-        
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
+
         * {
-            font-family: 'Poppins', sans-serif;
+            font-family: 'Inter', sans-serif;
         }
-        
+
+        body {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        }
+
         .title {
-            font-size: 3rem !important;
-            font-weight: 700 !important;
-            color: #6C63FF !important;
+            font-size: 2.8rem !important;
+            font-weight: 800 !important;
+            background: linear-gradient(45deg, #6C63FF, #3B82F6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
             text-align: center;
-            margin: 2rem 0 0.5rem 0;
+            margin: 1rem 0;
+            letter-spacing: -1px;
         }
-        
+
         .subtitle {
-            font-size: 1.2rem !important;
+            font-size: 1.1rem !important;
             text-align: center;
-            color: #666 !important;
-            margin-bottom: 2rem;
+            color: #64748B !important;
+            margin-bottom: 2.5rem;
+            animation: fadeInSlide 1s ease;
         }
-        
-        /* UPDATED: Improved question box with subtle border-radius & shadow */
+
         .question-box {
-            background: #ffffff;
-            border-radius: 15px;
+            background: white;
+            border-radius: 20px;
             padding: 2rem;
-            margin: 1.5rem auto;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            max-width: 650px;
-            color: #333 !important;
+            margin: 1.5rem 0;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+            border: 1px solid #e2e8f0;
+            position: relative;
+            transition: transform 0.2s ease;
         }
-        
-        /* UPDATED: Button styling improvements */
-        .answer-btn {
-            border-radius: 12px !important;
-            padding: 0.5rem 1.5rem !important;
-            font-weight: 600 !important;
-            margin: 0.5rem !important;
-            border: none;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease;
+
+        .question-box:hover {
+            transform: translateY(-3px);
         }
-        
-        .answer-btn:hover {
-            transform: scale(1.05);
+
+        .question-box::before {
+            content: "🕹️";
+            position: absolute;
+            left: -15px;
+            top: -15px;
+            background: white;
+            border-radius: 50%;
+            padding: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            font-size: 1.2rem;
         }
-        
-        .yes-btn {
-            background: #6C63FF !important;
-            color: white !important;
+
+        .input-box {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin: 1rem 0;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+        }
+
+        .stTextInput input {
+            border: 2px solid #e2e8f0 !important;
+            border-radius: 10px !important;
+            padding: 12px 16px !important;
+            transition: all 0.3s ease !important;
+        }
+
+        .stTextInput input:focus {
+            border-color: #6C63FF !important;
+            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
         }
-        
-        .no-btn {
-            background: #FF6B6B !important;
+
+        button {
+            background: linear-gradient(45deg, #6C63FF, #3B82F6) !important;
             color: white !important;
+            border: none !important;
+            border-radius: 10px !important;
+            padding: 12px 24px !important;
+            font-weight: 600 !important;
+            transition: all 0.3s ease !important;
         }
-        
-        /* UPDATED: Enhanced final reveal with glow effect */
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3) !important;
+        }
+
         .final-reveal {
-            animation: fadeIn 2s;
-            font-size: 2.5rem;
-            color: #6C63FF;
+            animation: fadeInUp 1s ease;
+            font-size: 2.8rem;
+            background: linear-gradient(45deg, #6C63FF, #3B82F6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
             text-align: center;
             margin: 2rem 0;
-            text-shadow: 0 0 10px rgba(108, 99, 255, 0.4);
+            font-weight: 800;
+        }
+
+        .help-chat {
+            background: rgba(255,255,255,0.9);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 1rem;
+            margin: 1rem 0;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
         }
-        
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+
+        @keyframes fadeInSlide {
+            0% { opacity: 0; transform: translateY(20px); }
+            100% { opacity: 1; transform: translateY(0); }
         }
-        
-        /* UPDATED: Full screen confetti canvas styling remains the same */
-        .confetti {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 1000;
+
+        @keyframes fadeInUp {
+            0% { opacity: 0; transform: translateY(30px); }
+            100% { opacity: 1; transform: translateY(0); }
         }
-        
-        /* UPDATED: Confidence meter visual improvement */
-        .confidence-meter {
-            height: 10px;
-            background: linear-gradient(90deg, #FF6B6B 0%, #6C63FF 100%);
-            border-radius: 5px;
-            margin: 10px 0;
+
+        .progress-bar {
+            height: 6px;
+            background: #e2e8f0;
+            border-radius: 3px;
+            margin: 1.5rem 0;
+            overflow: hidden;
         }
-        
-        /* UPDATED: Styling for the forms to center them in the layout */
-        form {
-            max-width: 650px;
-            margin: 0 auto;
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #6C63FF, #3B82F6);
+            transition: width 0.5s ease;
+        }
+
+        .question-count {
+            color: #6C63FF;
+            font-weight: 600;
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
         }
-        
     </style>
     """, unsafe_allow_html=True)
 
-# Confetti animation
+# Confetti animation (enhanced)
 def show_confetti():
     html("""
     <canvas id="confetti-canvas" class="confetti"></canvas>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
     <script>
-    const canvas = document.getElementById('confetti-canvas');
-    const confetti = confetti.create(canvas, { resize: true });
-    confetti({
-        particleCount: 150,
-        spread: 70,
-        origin: { y: 0.6 }
-    });
-    setTimeout(() => { canvas.remove(); }, 5000);
+    const count = 200;
+    const defaults = {
+        origin: { y: 0.7 },
+        zIndex: 1050
+    };
+
+    function fire(particleRatio, opts) {
+        confetti(Object.assign({}, defaults, opts, {
+            particleCount: Math.floor(count * particleRatio)
+        }));
+    }
+
+    fire(0.25, { spread: 26, startVelocity: 55 });
+    fire(0.2, { spread: 60 });
+    fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+    fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+    fire(0.1, { spread: 120, startVelocity: 45 });
     </script>
     """)
 
@@ -197,6 +242,7 @@ def ask_help_agent(query):
         history = []
         if "help_conversation" in st.session_state:
             for msg in st.session_state.help_conversation:
+                # Each history entry is a tuple: (user query, assistant response)
                 history.append((msg.get("query", ""), msg.get("response", "")))
 
         messages = [{"role": "system", "content": system_message}]
@@ -222,12 +268,12 @@ def ask_help_agent(query):
     except Exception as e:
         return f"Error in help agent: {str(e)}"
 
-# Main game logic
+# Main game logic with enhanced UI
 def main():
-    inject_custom_css()  # UPDATED: Now uses enhanced CSS
+    inject_custom_css()
 
     st.markdown('<div class="title">KASOTI</div>', unsafe_allow_html=True)
-    st.markdown('<div class="subtitle">The Smart Guessing Game</div>', unsafe_allow_html=True)
+    st.markdown('<div class="subtitle">AI-Powered Guessing Game Challenge</div>', unsafe_allow_html=True)
 
     if 'game_state' not in st.session_state:
         st.session_state.game_state = "start"
@@ -239,21 +285,32 @@ def main():
         st.session_state.final_guess = None
         st.session_state.help_conversation = []  # separate history for help agent
 
-    # Start screen
+    # Start screen with enhanced layout
     if st.session_state.game_state == "start":
-        st.markdown("""
-        <div class="question-box">
-            <h3>Welcome to <span style='color:#6C63FF;'>KASOTI 🎯</span></h3>
-            <p>Think of something and I'll try to guess it in 20 questions or less!</p>
-            <p>Choose a category:</p>
-            <ul>
-                <li><strong>Person</strong> - celebrity, fictional character, historical figure</li>
-                <li><strong>Place</strong> - city, country, landmark, geographical location</li>
-                <li><strong>Object</strong> - everyday item, tool, vehicle, etc.</li>
-            </ul>
-            <p>Type your category below to begin:</p>
-        </div>
-        """, unsafe_allow_html=True)
+        with st.container():
+            st.markdown("""
+            <div class="question-box">
+                <h3 style="color: #6C63FF; margin-bottom: 1.5rem;">🎮 Welcome to KASOTI</h3>
+                <p style="line-height: 1.6; color: #64748B;">
+                    Think of something and I'll try to guess it in 20 questions or less!<br>
+                    Choose from these categories:
+                </p>
+                <div style="display: grid; gap: 1rem; margin: 2rem 0;">
+                    <div style="padding: 1.5rem; background: #f8f9fa; border-radius: 12px;">
+                        <h4 style="margin: 0; color: #6C63FF;">🧑 Person</h4>
+                        <p style="margin: 0.5rem 0 0; color: #64748B;">Celebrity, fictional character, historical figure</p>
+                    </div>
+                    <div style="padding: 1.5rem; background: #f8f9fa; border-radius: 12px;">
+                        <h4 style="margin: 0; color: #6C63FF;">🌍 Place</h4>
+                        <p style="margin: 0.5rem 0 0; color: #64748B;">City, country, landmark, geographical location</p>
+                    </div>
+                    <div style="padding: 1.5rem; background: #f8f9fa; border-radius: 12px;">
+                        <h4 style="margin: 0; color: #6C63FF;">🎯 Object</h4>
+                        <p style="margin: 0.5rem 0 0; color: #64748B;">Everyday item, tool, vehicle, or concept</p>
+                    </div>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
 
         with st.form("start_form"):
             category_input = st.text_input("Enter category (person/place/object):").strip().lower()
@@ -274,9 +331,33 @@ def main():
                     st.session_state.game_state = "gameplay"
                     st.experimental_rerun()
 
-    # Gameplay screen
+    # Gameplay screen with progress bar
     elif st.session_state.game_state == "gameplay":
-        current_question = st.session_state.questions[st.session_state.current_q]
+        with st.container():
+            # Add progress bar
+            progress = (st.session_state.current_q + 1) / 20
+            st.markdown(f"""
+            <div class="question-count">QUESTION {st.session_state.current_q + 1} OF 20</div>
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: {progress * 100}%"></div>
+            </div>
+            """, unsafe_allow_html=True)
+
+            current_question = st.session_state.questions[st.session_state.current_q]
+            
+            # Enhanced question box
+            st.markdown(f'''
+            <div class="question-box">
+                <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+                    <div style="background: #6C63FF; width: 40px; height: 40px; border-radius: 50%; 
+                            display: flex; align-items: center; justify-content: center; color: white;">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <h3 style="margin: 0; color: #1E293B;">AI Question</h3>
+                </div>
+                <p style="font-size: 1.1rem; line-height: 1.6; color: #1E293B;">{current_question}</p>
+            </div>
+            ''', unsafe_allow_html=True)
 
         # Check if AI made a guess
         if "Final Guess:" in current_question:
@@ -284,10 +365,6 @@ def main():
             st.session_state.game_state = "confirm_guess"
             st.experimental_rerun()
 
-        st.markdown(f'<div class="question-box">Question {st.session_state.current_q + 1}/20:<br><br>'
-                    f'<strong>{current_question}</strong></div>',
-                    unsafe_allow_html=True)
-
         with st.form("answer_form"):
             answer_input = st.text_input("Your answer (yes/no/both):",
                                        key=f"answer_{st.session_state.current_q}").strip().lower()
@@ -339,9 +416,20 @@ def main():
 
     # Guess confirmation screen using text input response
     elif st.session_state.game_state == "confirm_guess":
-        st.markdown(f'<div class="question-box">🤖 My Final Guess:<br><br>'
-                    f'<strong>Is it {st.session_state.final_guess}?</strong></div>',
-                    unsafe_allow_html=True)
+        st.markdown(f'''
+        <div class="question-box">
+            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+                <div style="background: #6C63FF; width: 40px; height: 40px; border-radius: 50%; 
+                        display: flex; align-items: center; justify-content: center; color: white;">
+                    <i class="fas fa-lightbulb"></i>
+                </div>
+                <h3 style="margin: 0; color: #1E293B;">AI's Final Guess</h3>
+            </div>
+            <p style="font-size: 1.2rem; line-height: 1.6; color: #1E293B;">
+                Is it <strong style="color: #6C63FF;">{st.session_state.final_guess}</strong>?
+            </p>
+        </div>
+        ''', unsafe_allow_html=True)
 
         with st.form("confirm_form"):
             confirm_input = st.text_input("Type your answer (yes/no/both):", key="confirm_input").strip().lower()
@@ -370,13 +458,15 @@ def main():
                         st.session_state.current_q += 1
                         st.experimental_rerun()
 
-    # Result screen
+    # Result screen with enhanced celebration
     elif st.session_state.game_state == "result":
         if not st.session_state.final_guess:
+            # Generate final guess if not already made
             qa_history = "\n".join(
                 [f"Q{i+1}: {q}\nA: {a}"
                  for i, (q, a) in enumerate(zip(st.session_state.questions, st.session_state.answers))]
             )
+
             final_guess = ask_llama(
                 [{"role": "user", "content": qa_history}],
                 st.session_state.category,
@@ -389,7 +479,7 @@ def main():
         time.sleep(1)
         st.markdown(f'<div class="final-reveal" style="font-size:3.5rem;color:#6C63FF;">{st.session_state.final_guess}</div>',
                     unsafe_allow_html=True)
-        st.markdown(f"<p style='text-align:center'>Guessed in {len(st.session_state.questions)} questions</p>",
+        st.markdown(f"<p style='text-align:center; color:#64748B;'>Guessed in {len(st.session_state.questions)} questions</p>",
                     unsafe_allow_html=True)
 
         if st.button("Play Again", key="play_again"):
@@ -397,4 +487,4 @@ def main():
             st.experimental_rerun()
 
 if __name__ == "__main__":
-    main()
+    main()