Update app.py

app.py

@@ -8,71 +8,125 @@ import os
 @st.cache_resource
 def get_help_agent():
     from transformers import pipeline
-    # Using BlenderBot 400M Distill as the public conversational model (used elsewhere)
     return pipeline("conversational", model="facebook/blenderbot-400M-distill")
 
-# Custom CSS for professional look (fixed text color)
+# Enhanced Custom CSS with modern design
 def inject_custom_css():
     st.markdown("""
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
         * {
-            font-family: 'Poppins', sans-serif;
+            font-family: 'Inter', sans-serif;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
-        .title {
-            font-size: 3rem !important;
-            font-weight: 700 !important;
-            color: #6C63FF !important;
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        .gradient-header {
+            background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+            color: white;
+            padding: 4rem 1rem;
+            border-radius: 0 0 2rem 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
             text-align: center;
+        }
+
+        .title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            letter-spacing: -0.05em;
             margin-bottom: 0.5rem;
         }
 
         .subtitle {
-            font-size: 1.2rem !important;
-            text-align: center;
-            color: #666 !important;
-            margin-bottom: 2rem;
+            font-size: 1.1rem;
+            opacity: 0.9;
+            font-weight: 400;
         }
 
-        .question-box {
-            background: #F8F9FA;
-            border-radius: 15px;
+        .game-card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 1.5rem;
             padding: 2rem;
-            margin: 1.5rem 0;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            color: black !important;
+            margin: 1rem 0;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+
+        .question-number {
+            font-size: 0.9rem;
+            color: #6b7280;
+            margin-bottom: 0.5rem;
+        }
+
+        .question-text {
+            font-size: 1.2rem;
+            color: #1f2937;
+            margin: 1rem 0;
+            line-height: 1.5;
+            font-weight: 500;
+        }
+
+        .answer-buttons {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1.5rem;
+            justify-content: center;
+        }
+
+        .stButton>button {
+            transition: all 0.2s ease;
+            border-radius: 12px;
+            padding: 0.75rem 2rem;
+            font-weight: 600;
+            border: none;
         }
 
-        .answer-btn {
-            border-radius: 12px !important;
-            padding: 0.5rem 1.5rem !important;
-            font-weight: 600 !important;
-            margin: 0.5rem !important;
+        .stButton>button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
         }
 
         .yes-btn {
-            background: #6C63FF !important;
+            background: #10b981 !important;
             color: white !important;
         }
 
         .no-btn {
-            background: #FF6B6B !important;
+            background: #ef4444 !important;
             color: white !important;
         }
 
-        .final-reveal {
-            animation: fadeIn 2s;
-            font-size: 2.5rem;
-            color: #6C63FF;
+        .both-btn {
+            background: #f59e0b !important;
+            color: white !important;
+        }
+
+        .result-card {
+            background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
+            border-radius: 1.5rem;
+            padding: 3rem 2rem;
             text-align: center;
-            margin: 2rem 0;
+            animation: fadeIn 1s ease;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+        .result-text {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #1f2937;
+            margin: 1rem 0;
+            background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         .confetti {
@@ -84,12 +138,32 @@ def inject_custom_css():
             pointer-events: none;
             z-index: 1000;
         }
-        
-        .confidence-meter {
-            height: 10px;
-            background: linear-gradient(90deg, #FF6B6B 0%, #6C63FF 100%);
-            border-radius: 5px;
-            margin: 10px 0;
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .progress-bar {
+            height: 8px;
+            background: #e5e7eb;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 1.5rem 0;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
+            transition: width 0.3s ease;
+        }
+
+        .help-sidebar {
+            background: rgba(255,255,255,0.9);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem;
+            border-radius: 1rem;
+            border: 1px solid rgba(0,0,0,0.1);
         }
     </style>
     """, unsafe_allow_html=True)
@@ -100,13 +174,30 @@ def show_confetti():
     <canvas id="confetti-canvas" class="confetti"></canvas>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
     <script>
+    function randomInRange(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+    
     const canvas = document.getElementById('confetti-canvas');
     const confetti = confetti.create(canvas, { resize: true });
-    confetti({
-        particleCount: 150,
-        spread: 70,
-        origin: { y: 0.6 }
-    });
+    
+    const count = 200;
+    const defaults = {
+        origin: { y: 0.7 }
+    };
+
+    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 });
+
     setTimeout(() => { canvas.remove(); }, 5000);
     </script>
     """)
@@ -193,12 +284,45 @@ def ask_help_agent(query):
     except Exception as e:
         return f"Error in help agent: {str(e)}"
 
-# Main game logic
+def handle_answer(answer):
+    st.session_state.conversation_history.append(
+        {"role": "user", "content": answer}
+    )
+
+    # Generate next response
+    next_response = ask_llama(
+        st.session_state.conversation_history,
+        st.session_state.category
+    )
+    
+    # Check if AI made a guess
+    if "Final Guess:" in next_response:
+        st.session_state.final_guess = next_response.split("Final Guess:")[1].strip()
+        st.session_state.game_state = "confirm_guess"
+    else:
+        st.session_state.questions.append(next_response)
+        st.session_state.conversation_history.append(
+            {"role": "assistant", "content": next_response}
+        )
+        st.session_state.current_q += 1
+
+        # Stop after 20 questions max
+        if st.session_state.current_q >= 20:
+            st.session_state.game_state = "result"
+    
+    st.experimental_rerun()
+
 def main():
     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="gradient-header">
+        <div class="container">
+            <h1 class="title">KASOTI</h1>
+            <p class="subtitle">AI-Powered Guessing Game</p>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
     if 'game_state' not in st.session_state:
         st.session_state.game_state = "start"
@@ -208,138 +332,161 @@ def main():
         st.session_state.conversation_history = []
         st.session_state.category = None
         st.session_state.final_guess = None
-        st.session_state.help_conversation = []  # separate history for help agent
+        st.session_state.help_conversation = []
 
     # Start screen
     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.form("start_form"):
-            category_input = st.text_input("Enter category (person/place/object):").strip().lower()
-            if st.form_submit_button("Start Game"):
-                if not category_input:
-                    st.error("Please enter a category!")
-                elif category_input not in ["person", "place", "object"]:
-                    st.error("Please enter either 'person', 'place', or 'object'!")
-                else:
-                    st.session_state.category = category_input
-                    first_question = ask_llama([
-                        {"role": "user", "content": "Ask your first strategic yes/no question."}
-                    ], category_input)
-                    st.session_state.questions = [first_question]
-                    st.session_state.conversation_history = [
-                        {"role": "assistant", "content": first_question}
-                    ]
-                    st.session_state.game_state = "gameplay"
-                    st.experimental_rerun()
+        with st.container():
+            st.markdown("""
+            <div class="container">
+                <div class="game-card">
+                    <h3>🎮 How to Play</h3>
+                    <p style="margin: 1rem 0; color: #4b5563;">
+                        1. Choose a category<br>
+                        2. Think of a specific item<br>
+                        3. Answer AI's questions<br>
+                        4. Try to stump the AI!
+                    </p>
+                    <div style="margin: 2rem 0;">
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: 0%"></div>
+                        </div>
+                    </div>
+                    """, unsafe_allow_html=True)
+
+            with st.form("start_form"):
+                col1, col2, col3 = st.columns(3)
+                with col2:
+                    category = st.selectbox(
+                        "Choose Category",
+                        ["Person", "Place", "Object"],
+                        index=None,
+                        placeholder="Select category"
+                    )
+                    if st.form_submit_button("Start Game", use_container_width=True):
+                        if not category:
+                            st.error("Please select a category!")
+                        else:
+                            # Initialize game state
+                            st.session_state.category = category.lower()
+                            first_question = ask_llama([
+                                {"role": "user", "content": "Ask your first strategic yes/no question."}
+                            ], st.session_state.category)
+                            st.session_state.questions = [first_question]
+                            st.session_state.conversation_history = [
+                                {"role": "assistant", "content": first_question}
+                            ]
+                            st.session_state.game_state = "gameplay"
+                            st.experimental_rerun()
 
     # Gameplay screen
     elif st.session_state.game_state == "gameplay":
-        current_question = st.session_state.questions[st.session_state.current_q]
-        
-        # Check if AI made a guess
-        if "Final Guess:" in current_question:
-            st.session_state.final_guess = current_question.split("Final Guess:")[1].strip()
-            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()
-            if st.form_submit_button("Submit"):
-                if answer_input not in ["yes", "no", "both"]:
-                    st.error("Please answer with 'yes', 'no', or 'both'!")
-                else:
-                    st.session_state.answers.append(answer_input)
-                    st.session_state.conversation_history.append(
-                        {"role": "user", "content": answer_input}
-                    )
-
-                    # Generate next response
-                    next_response = ask_llama(
-                        st.session_state.conversation_history,
-                        st.session_state.category
-                    )
-                    
-                    # Check if AI made a guess
-                    if "Final Guess:" in next_response:
-                        st.session_state.final_guess = next_response.split("Final Guess:")[1].strip()
-                        st.session_state.game_state = "confirm_guess"
-                    else:
-                        st.session_state.questions.append(next_response)
-                        st.session_state.conversation_history.append(
-                            {"role": "assistant", "content": next_response}
-                        )
-                        st.session_state.current_q += 1
-
-                        # Stop after 20 questions max
-                        if st.session_state.current_q >= 20:
-                            st.session_state.game_state = "result"
-                    
-                    st.experimental_rerun()
-
-        # Side Help Option: independent chat with an AI help assistant using Hugging Face model
-        with st.expander("Need Help? Chat with AI Assistant"):
-            help_query = st.text_input("Enter your help query:", key="help_query")
-            if st.button("Send", key="send_help"):
+        with st.container():
+            st.markdown(f"""
+            <div class="game-card">
+                <div class="question-number">
+                    Question {st.session_state.current_q + 1}/20
+                </div>
+                <div class="question-text">
+                    {st.session_state.questions[st.session_state.current_q]}
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+
+            # Progress bar
+            progress = (st.session_state.current_q + 1) / 20
+            st.markdown(f"""
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: {progress * 100}%"></div>
+            </div>
+            """, unsafe_allow_html=True)
+
+            # Answer buttons
+            col1, col2, col3 = st.columns([1,1,1])
+            with col1:
+                if st.button("Yes ✅", key="yes_btn", use_container_width=True, type="primary"):
+                    st.session_state.answers.append("yes")
+                    handle_answer("yes")
+            with col2:
+                if st.button("No ❌", key="no_btn", use_container_width=True, type="primary"):
+                    st.session_state.answers.append("no")
+                    handle_answer("no")
+            with col3:
+                if st.button("Both 🤔", key="both_btn", use_container_width=True, type="primary"):
+                    st.session_state.answers.append("both")
+                    handle_answer("both")
+
+        # Help sidebar
+        with st.sidebar:
+            st.markdown("""
+            <div class="help-sidebar">
+                <h3>🤖 AI Assistant</h3>
+                <p>Need help? Chat with our AI helper:</p>
+            """, unsafe_allow_html=True)
+            
+            help_query = st.text_input("Type your question...", key="help_query")
+            if st.button("Send", use_container_width=True):
                 if help_query:
                     help_response = ask_help_agent(help_query)
                     st.session_state.help_conversation.append({"query": help_query, "response": help_response})
-                else:
-                    st.error("Please enter a query!")
+            
             if st.session_state.help_conversation:
-                for msg in st.session_state.help_conversation:
+                st.markdown("---")
+                for msg in st.session_state.help_conversation[-3:]:  # Show last 3 messages
                     st.markdown(f"**You:** {msg['query']}")
-                    st.markdown(f"**Help Assistant:** {msg['response']}")
+                    st.markdown(f"**Assistant:** {msg['response']}")
+            st.markdown("</div>", unsafe_allow_html=True)
 
-    # Guess confirmation screen using text input response
+    # Confirm guess screen
     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)
-        
-        with st.form("confirm_form"):
-            confirm_input = st.text_input("Type your answer (yes/no/both):", key="confirm_input").strip().lower()
-            if st.form_submit_button("Submit"):
-                if confirm_input not in ["yes", "no", "both"]:
-                    st.error("Please answer with 'yes', 'no', or 'both'!")
-                else:
-                    if confirm_input == "yes":
-                        st.session_state.game_state = "result"
-                        st.experimental_rerun()
-                        st.stop()  # Immediately halt further execution
-                    else:
-                        # Add negative response to history and continue gameplay
-                        st.session_state.conversation_history.append(
-                            {"role": "user", "content": "no"}
-                        )
-                        st.session_state.game_state = "gameplay"
-                        next_response = ask_llama(
-                            st.session_state.conversation_history,
-                            st.session_state.category
-                        )
-                        st.session_state.questions.append(next_response)
-                        st.session_state.conversation_history.append(
-                            {"role": "assistant", "content": next_response}
-                        )
-                        st.session_state.current_q += 1
-                        st.experimental_rerun()
+        with st.container():
+            st.markdown(f"""
+            <div class="game-card">
+                <h3>🤖 My Final Guess</h3>
+                <div class="question-text">
+                    Is it {st.session_state.final_guess}?
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+
+            # Answer buttons
+            col1, col2, col3 = st.columns([1,1,1])
+            with col1:
+                if st.button("Yes ✅", key="confirm_yes", use_container_width=True, type="primary"):
+                    st.session_state.game_state = "result"
+                    st.experimental_rerun()
+            with col2:
+                if st.button("No ❌", key="confirm_no", use_container_width=True, type="primary"):
+                    st.session_state.conversation_history.append(
+                        {"role": "user", "content": "no"}
+                    )
+                    st.session_state.game_state = "gameplay"
+                    next_response = ask_llama(
+                        st.session_state.conversation_history,
+                        st.session_state.category
+                    )
+                    st.session_state.questions.append(next_response)
+                    st.session_state.conversation_history.append(
+                        {"role": "assistant", "content": next_response}
+                    )
+                    st.session_state.current_q += 1
+                    st.experimental_rerun()
+            with col3:
+                if st.button("Both 🤔", key="confirm_both", use_container_width=True, type="primary"):
+                    st.session_state.conversation_history.append(
+                        {"role": "user", "content": "both"}
+                    )
+                    st.session_state.game_state = "gameplay"
+                    next_response = ask_llama(
+                        st.session_state.conversation_history,
+                        st.session_state.category
+                    )
+                    st.session_state.questions.append(next_response)
+                    st.session_state.conversation_history.append(
+                        {"role": "assistant", "content": next_response}
+                    )
+                    st.session_state.current_q += 1
+                    st.experimental_rerun()
 
     # Result screen
     elif st.session_state.game_state == "result":
@@ -357,17 +504,23 @@ def main():
             )
             st.session_state.final_guess = final_guess.split("Final Guess:")[-1].strip()
 
-        show_confetti()
-        st.markdown(f'<div class="final-reveal">🎉 It\'s...</div>', unsafe_allow_html=True)
-        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>", 
-                    unsafe_allow_html=True)
-        
-        if st.button("Play Again", key="play_again"):
-            st.session_state.clear()
-            st.experimental_rerun()
+        with st.container():
+            show_confetti()
+            st.markdown(f"""
+            <div class="result-card">
+                <h3>🎉 Game Over!</h3>
+                <div class="result-text">
+                    {st.session_state.final_guess}
+                </div>
+                <p style="color: #6b7280;">
+                    Guessed in {len(st.session_state.questions)} questions
+                </p>
+            </div>
+            """, unsafe_allow_html=True)
+
+            if st.button("Play Again 🔄", use_container_width=True, type="primary"):
+                st.session_state.clear()
+                st.experimental_rerun()
 
 if __name__ == "__main__":
-    main()
+    main()