Update app.py

app.py

@@ -123,6 +123,61 @@ def inject_custom_css():
                          transition: width 0.5s ease; }
         .question-count { color: #6C63FF; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
 
+
+        /* Add these new styles for the info modal */
+        .info-modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            z-index: 1000;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+        .info-modal-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+        }
+        .tech-item {
+            margin-bottom: 1.5rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        .tech-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        .tech-title {
+            color: #6C63FF;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .close-modal-btn {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #64748B;
+        }
+        
     </style>
     """, unsafe_allow_html=True)
 
@@ -219,6 +274,46 @@ def ask_help_agent(query):
     except Exception as e:
         return f"Error in help agent: {str(e)}"
 
+
+def show_techniques_modal():
+    st.markdown("""
+    <div class="info-modal-backdrop" id="infoBackdrop">
+        <div class="info-modal">
+            <button class="close-modal-btn" onclick="document.getElementById('infoBackdrop').style.display='none'">×</button>
+            <h3 style="color: #6C63FF; margin-bottom: 1.5rem; text-align: center;">Project Techniques & Limitations</h3>
+            
+            <div class="tech-item">
+                <div class="tech-title"><i class="fas fa-brain"></i> AI Models Used</div>
+                <ul style="color: #64748B; padding-left: 1.2rem;">
+                    <li><strong>Groq Llama 3.3-70B</strong> - For generating strategic questions and final guesses</li>
+                    <li><strong>Mistral Tiny</strong> - Powers the help chat assistant</li>
+                    <li><strong>OpenAI Whisper</strong> - Converts speech to text in real-time</li>
+                    <li><strong>Hard Prompt Tuning</strong> - Carefully engineered prompts to optimize model performance for the guessing game</li>
+                </ul>
+            </div>
+            
+            <div class="tech-item">
+                <div class="tech-title"><i class="fas fa-exclamation-triangle"></i> Known Limitations</div>
+                <ul style="color: #64748B; padding-left: 1.2rem;">
+                    <li>Voice input may take 5-10 seconds to process a sentence (like single-word categories)</li>
+                    <li>But voice processing for single words (like "yes", "no", "place") may take 10-20 seconds </li>
+                    <li><strong>Language Support</strong> - While Whisper understands and write Urdu, the game currently only supports English responses</li>
+                </ul>
+            </div>
+            
+            <div style="text-align: center; margin-top: 1.5rem;">
+                <button onclick="document.getElementById('infoBackdrop').style.display='none'" 
+                        style="background: #6C63FF; color: white; border: none; padding: 0.5rem 1.5rem; border-radius: 8px; cursor: pointer;">
+                    Got It!
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Hide modal by default
+        document.getElementById('infoBackdrop').style.display = 'none';
+    </script>
+    """, unsafe_allow_html=True)
 ######################################
 # Main Game Logic with Voice Integration
 ######################################
@@ -227,6 +322,12 @@ def main():
     inject_custom_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)
+
+    if st.button("ℹ️ Project Techniques & Limitations", key="info_btn"):
+        show_techniques_modal()
+        st.experimental_rerun()
+    
+        
     if 'game_state' not in st.session_state:
         st.session_state.game_state = "start"
         st.session_state.questions = []
@@ -258,7 +359,7 @@ def main():
                     </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>
+                        <p style="margin: 0.5rem 0 0; color: #64748B;">Everyday item, tool, vehicle</p>
                     </div>
                 </div>
             </div>
@@ -430,4 +531,4 @@ def main():
             st.experimental_rerun()
 
 if __name__ == "__main__":
-    main()
+    main()