Update app.py

app.py

@@ -8,181 +8,123 @@ import os
 @st.cache_resource
 def get_help_agent():
     from transformers import pipeline
-    # Using BlenderBot 400M Distill as the public conversational model (used elsewhere)
+    # Using BlenderBot 400M Distill as the public conversational model
     return pipeline("conversational", model="facebook/blenderbot-400M-distill")
 
-# Enhanced Custom CSS for modern UI
+# Custom CSS for enhanced professional look with UI improvements
 def inject_custom_css():
     st.markdown("""
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        /* 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');
         
-        * {
-            font-family: 'Inter', sans-serif;
+        html, body {
+            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+            color: #333;
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
+            height: 100%;
         }
-
+        
+        * {
+            font-family: 'Poppins', sans-serif;
+        }
+        
         .title {
-            font-size: 2.8rem !important;
-            font-weight: 800 !important;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            font-size: 3rem !important;
+            font-weight: 700 !important;
+            color: #6C63FF !important;
             text-align: center;
-            margin: 1rem 0;
-            letter-spacing: -1px;
+            margin: 2rem 0 0.5rem 0;
         }
-
+        
         .subtitle {
-            font-size: 1.1rem !important;
+            font-size: 1.2rem !important;
             text-align: center;
-            color: #4a5568 !important;
-            margin-bottom: 2.5rem;
-            font-weight: 500;
+            color: #666 !important;
+            margin-bottom: 2rem;
         }
-
-        .question-container {
-            background: #f7fafc;
-            border-radius: 20px;
+        
+        /* UPDATED: Improved question box with subtle border-radius & shadow */
+        .question-box {
+            background: #ffffff;
+            border-radius: 15px;
             padding: 2rem;
-            margin: 1.5rem 0;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            position: relative;
-            border: 1px solid #e2e8f0;
-        }
-
-        .question-container::after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 40px;
-            width: 0;
-            height: 0;
-            border-left: 12px solid transparent;
-            border-right: 12px solid transparent;
-            border-top: 12px solid #f7fafc;
-        }
-
-        .question-text {
-            font-size: 1.25rem !important;
-            color: #2d3748 !important;
-            line-height: 1.6;
-            margin-bottom: 0;
+            margin: 1.5rem auto;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            max-width: 650px;
+            color: #333 !important;
         }
-
-        .input-box {
-            background: white !important;
+        
+        /* UPDATED: Button styling improvements */
+        .answer-btn {
             border-radius: 12px !important;
-            border: 2px solid #e2e8f0 !important;
-            padding: 0.75rem 1rem !important;
-            font-size: 1rem !important;
-            transition: all 0.3s ease !important;
-        }
-
-        .input-box:focus {
-            border-color: #667eea !important;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
-        }
-
-        .submit-btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-            color: white !important;
-            border: none !important;
-            padding: 0.75rem 2rem !important;
-            border-radius: 10px !important;
+            padding: 0.5rem 1.5rem !important;
             font-weight: 600 !important;
-            transition: transform 0.2s ease !important;
+            margin: 0.5rem !important;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.2s ease;
         }
-
-        .submit-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3) !important;
+        
+        .answer-btn:hover {
+            transform: scale(1.05);
         }
-
-        .progress-bar {
-            height: 8px;
-            background: #e2e8f0;
-            border-radius: 4px;
-            margin: 1.5rem 0;
-            overflow: hidden;
+        
+        .yes-btn {
+            background: #6C63FF !important;
+            color: white !important;
         }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-            transition: width 0.3s ease;
+        
+        .no-btn {
+            background: #FF6B6B !important;
+            color: white !important;
         }
-
+        
+        /* UPDATED: Enhanced final reveal with glow effect */
         .final-reveal {
-            animation: scaleUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            animation: fadeIn 2s;
             font-size: 2.5rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: #6C63FF;
             text-align: center;
             margin: 2rem 0;
-            font-weight: 800;
-        }
-
-        @keyframes scaleUp {
-            from { transform: scale(0.8); opacity: 0; }
-            to { transform: scale(1); opacity: 1; }
+            text-shadow: 0 0 10px rgba(108, 99, 255, 0.4);
         }
-
-        .help-chat {
-            background: white;
-            border-radius: 18px;
-            padding: 1.5rem;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-            border: 1px solid #e2e8f0;
-        }
-
-        .user-message {
-            background: #667eea;
-            color: white;
-            border-radius: 12px 12px 0 12px;
-            padding: 0.75rem 1rem;
-            margin: 0.5rem 0;
-            max-width: 80%;
-            margin-left: auto;
+        
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
-
-        .bot-message {
-            background: #f7fafc;
-            color: #2d3748;
-            border-radius: 12px 12px 12px 0;
-            padding: 0.75rem 1rem;
-            margin: 0.5rem 0;
-            max-width: 80%;
-            border: 1px solid #e2e8f0;
+        
+        /* 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;
         }
-
+        
+        /* UPDATED: Confidence meter visual improvement */
         .confidence-meter {
-            height: 6px;
-            background: #e2e8f0;
-            border-radius: 3px;
-            margin: 1rem 0;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .confidence-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #48bb78 0%, #38a169 100%);
-            width: 75%;
-            animation: confidenceAnim 1.5s ease-in-out;
+            height: 10px;
+            background: linear-gradient(90deg, #FF6B6B 0%, #6C63FF 100%);
+            border-radius: 5px;
+            margin: 10px 0;
         }
-
-        @keyframes confidenceAnim {
-            0% { width: 0; }
-            100% { width: 75%; }
+        
+        /* UPDATED: Styling for the forms to center them in the layout */
+        form {
+            max-width: 650px;
+            margin: 0 auto;
         }
+        
     </style>
     """, unsafe_allow_html=True)
 
-# Confetti animation (updated colors)
+# Confetti animation
 def show_confetti():
     html("""
     <canvas id="confetti-canvas" class="confetti"></canvas>
@@ -190,36 +132,102 @@ def show_confetti():
     <script>
     const canvas = document.getElementById('confetti-canvas');
     const confetti = confetti.create(canvas, { resize: true });
-    
-    function particle(x, y) {
-        confetti({
-            particleCount: 1,
-            angle: 270,
-            spread: 100,
-            startVelocity: 25,
-            origin: { x: x, y: y },
-            colors: ['#667eea', '#764ba2', '#48bb78']
-        });
-    }
-    
-    for(let i=0; i<50; i++) {
-        setTimeout(() => {
-            particle(Math.random(), Math.random());
-        }, i*50);
-    }
-    
+    confetti({
+        particleCount: 150,
+        spread: 70,
+        origin: { y: 0.6 }
+    });
     setTimeout(() => { canvas.remove(); }, 5000);
     </script>
     """)
 
-# Rest of the original functions remain unchanged (ask_llama, ask_help_agent, etc.)
+# Enhanced AI question generation for guessing game using Llama model
+def ask_llama(conversation_history, category, is_final_guess=False):
+    api_url = "https://api.groq.com/openai/v1/chat/completions"
+    headers = {
+        "Authorization": "Bearer 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",
+        "Content-Type": "application/json"
+    }
+
+    system_prompt = f"""You're playing 20 questions to guess a {category}. Follow these rules:
+1. Ask strategic, non-repeating yes/no questions that narrow down possibilities
+2. Consider all previous answers carefully before asking next question
+3. If you're very confident (80%+ sure), respond with "Final Guess: [your guess]"
+4. For places: ask about continent, climate, famous landmarks, country, city or population
+5. For people: ask about fictional or real, profession, gender, alive/dead, nationality, or fame
+6. For objects: ask about size, color, usage, material, or where it's found
+7. Never repeat questions and always make progress toward guessing"""
+
+    if is_final_guess:
+        prompt = f"""Based on these answers about a {category}, provide ONLY your final guess with no extra text:
+{conversation_history}"""
+    else:
+        prompt = "Ask your next strategic yes/no question that will best narrow down the possibilities."
+
+    messages = [
+        {"role": "system", "content": system_prompt},
+        *conversation_history,
+        {"role": "user", "content": prompt}
+    ]
+
+    data = {
+        "model": "llama-3.3-70b-versatile",
+        "messages": messages,
+        "temperature": 0.7 if is_final_guess else 0.8,
+        "max_tokens": 100
+    }
 
-# Main game logic with updated UI elements
+    try:
+        response = requests.post(api_url, headers=headers, json=data)
+        response.raise_for_status()
+        return response.json()["choices"][0]["message"]["content"]
+    except Exception as e:
+        st.error(f"Error calling Llama API: {str(e)}")
+        return "Could not generate question"
+
+# New function for the help AI assistant using the Hugging Face InferenceClient
+def ask_help_agent(query):
+    try:
+        from huggingface_hub import InferenceClient
+        # Initialize the client with the provided model
+        client = InferenceClient("HuggingFaceH4/zephyr-7b-beta", token=os.environ.get("HF_HUB_TOKEN"))
+        system_message = "You are a friendly Chatbot."
+
+        # Build history from session state (if any)
+        history = []
+        if "help_conversation" in st.session_state:
+            for msg in st.session_state.help_conversation:
+                history.append((msg.get("query", ""), msg.get("response", "")))
+
+        messages = [{"role": "system", "content": system_message}]
+        for user_msg, bot_msg in history:
+            if user_msg:
+                messages.append({"role": "user", "content": user_msg})
+            if bot_msg:
+                messages.append({"role": "assistant", "content": bot_msg})
+        messages.append({"role": "user", "content": query})
+
+        response_text = ""
+        # Using streaming to collect the entire response from the model
+        for message in client.chat_completion(
+            messages,
+            max_tokens=150,
+            stream=True,
+            temperature=0.7,
+            top_p=0.95,
+        ):
+            token = message.choices[0].delta.content
+            response_text += token
+        return response_text
+    except Exception as e:
+        return f"Error in help agent: {str(e)}"
+
+# Main game logic
 def main():
-    inject_custom_css()
+    inject_custom_css()  # UPDATED: Now uses enhanced CSS
 
     st.markdown('<div class="title">KASOTI</div>', unsafe_allow_html=True)
-    st.markdown('<div class="subtitle">AI-Powered Guessing Game Challenge</div>', unsafe_allow_html=True)
+    st.markdown('<div class="subtitle">The Smart Guessing Game</div>', unsafe_allow_html=True)
 
     if 'game_state' not in st.session_state:
         st.session_state.game_state = "start"
@@ -229,36 +237,27 @@ def main():
         st.session_state.conversation_history = []
         st.session_state.category = None
         st.session_state.final_guess = None
-        st.session_state.help_conversation = []
+        st.session_state.help_conversation = []  # separate history for help agent
 
-    # Start screen with enhanced layout
+    # Start screen
     if st.session_state.game_state == "start":
         st.markdown("""
-        <div class="question-container">
-            <h3 style="color: #2d3748; margin-bottom: 1.5rem;">Welcome to <span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">KASOTI</span> 🎯</h3>
-            <p style="color: #4a5568; line-height: 1.6;">Think of something and I'll try to guess it in 20 questions or less!<br>
-            Choose from these categories:</p>
-            <div style="margin: 1.5rem 0;">
-                <div style="background: #f0f4f8; padding: 1rem; border-radius: 12px; margin: 0.5rem 0;">
-                    <strong>👤 Person</strong><br>
-                    <span style="color: #718096;">Celebrity, fictional character, historical figure</span>
-                </div>
-                <div style="background: #f0f4f8; padding: 1rem; border-radius: 12px; margin: 0.5rem 0;">
-                    <strong>🌍 Place</strong><br>
-                    <span style="color: #718096;">City, country, landmark, geographical location</span>
-                </div>
-                <div style="background: #f0f4f8; padding: 1rem; border-radius: 12px; margin: 0.5rem 0;">
-                    <strong>📦 Object</strong><br>
-                    <span style="color: #718096;">Everyday item, tool, vehicle, etc.</span>
-                </div>
-            </div>
+        <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):", 
-                                          key="start_input").strip().lower()
-            if st.form_submit_button("Start Game", use_container_width=True):
+            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"]:
@@ -275,48 +274,24 @@ def main():
                     st.session_state.game_state = "gameplay"
                     st.experimental_rerun()
 
-    # Gameplay screen with enhanced UI
+    # Gameplay screen
     elif st.session_state.game_state == "gameplay":
-        # Add 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>
-        <div style="text-align: center; color: #4a5568; margin-bottom: 1.5rem;">
-            Question {st.session_state.current_q + 1} of 20
-        </div>
-        """, unsafe_allow_html=True)
-
         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-container">
-            <div class="question-text">{current_question}</div>
-        </div>
-        """, unsafe_allow_html=True)
-
-        # Add confidence meter animation
-        st.markdown("""
-        <div class="confidence-meter">
-            <div class="confidence-fill"></div>
-        </div>
-        <div style="text-align: right; color: #718096; font-size: 0.9rem;">
-            AI Confidence Level: 75%
-        </div>
-        """, unsafe_allow_html=True)
+        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}",
-                                       placeholder="Type your answer here...").strip().lower()
-            if st.form_submit_button("Submit Answer", use_container_width=True):
-                # Original answer handling logic remains unchanged
+            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:
@@ -331,6 +306,7 @@ def main():
                         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"
@@ -341,19 +317,16 @@ def main():
                         )
                         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()
 
-    # Rest of the original game logic remains unchanged (confirm_guess, result states)
-
-    # Updated help section UI
-    with st.expander("💬 Need Help? Ask the AI Assistant", expanded=False):
-        st.markdown('<div class="help-chat">', unsafe_allow_html=True)
-        help_query = st.text_input("Type your question:", key="help_query", 
-                                 placeholder="How should I answer this?")
-            if st.button("Send", use_container_width=True, key="send_help"):
+        # 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"):
                 if help_query:
                     help_response = ask_help_agent(help_query)
                     st.session_state.help_conversation.append({"query": help_query, "response": help_response})
@@ -361,8 +334,67 @@ def main():
                     st.error("Please enter a query!")
             if st.session_state.help_conversation:
                 for msg in st.session_state.help_conversation:
-                    st.markdown(f'<div class="user-message">{msg["query"]}</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div class="bot-message">{msg["response"]}</div>', unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
+                    st.markdown(f"**You:** {msg['query']}")
+                    st.markdown(f"**Help Assistant:** {msg['response']}")
+
+    # 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)
+
+        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()
+
+    # Result screen
+    elif st.session_state.game_state == "result":
+        if not st.session_state.final_guess:
+            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,
+                is_final_guess=True
+            )
+            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()
+
 if __name__ == "__main__":
-    main()
+    main()