feat: add in-app project info modal with animated button

README.md

@@ -145,7 +145,7 @@ uv run python app.py
 
 ## Acknowledgments
 
-Built for the HuggingFace MCP Hackathon (November 2024)
+Built for the MCP's 1st Birthday Hackathon by Hugging Face (November 2025)
 
 Powered by:
 - [Anthropic Claude](https://anthropic.com) - AI reasoning and question generation
@@ -154,6 +154,33 @@ Powered by:
 - [Gradio](https://gradio.app) - UI framework
 - [HuggingFace](https://huggingface.co) - Hosting
 
+## Challenges
+
+### Audio Transcription Timing Issues
+
+The current implementation uses short audio chunk intervals for streaming transcription. However, this creates a significant problem:
+
+- **Issue**: The transcription API cannot process chunks fast enough before the next chunk arrives
+- **Result**: Only fragments of audio are being transcribed, causing substantial information loss
+- **Impact**: The accumulated context is incomplete, leading to lower quality question generation
+
+## To-Do
+
+### High Priority
+
+- [ ] **Experiment with audio buffering** - Implement a buffer that accumulates audio before sending to transcription API
+- [ ] **Increase audio chunk interval** - Test longer intervals (e.g., 5-10 seconds instead of 1-2 seconds) to allow complete transcription
+- [ ] **Add overlap between chunks** - Implement overlapping audio segments to prevent word cutoffs at boundaries
+
+### Future Improvements
+
+- [ ] **Add useful MCPs** - Integrate additional MCP servers for enhanced capabilities:
+  - Academic paper search (for research talks)
+  - Company/organization lookup (for business presentations)
+  - Technical documentation search (for developer conferences)
+- [ ] **Implement voice activity detection (VAD)** - Only transcribe when speech is detected
+- [ ] **Add local transcription fallback** - Use local Whisper model when API latency is too high
+
 ## License
 
 MIT

app.py

@@ -285,8 +285,70 @@ custom_css = """
     border-radius: 10px;
     margin-bottom: 15px;
 }
+.header { position: relative; }
 .header h1 { margin: 0; font-size: 24px; }
 .header p { margin: 5px 0 0 0; opacity: 0.9; font-size: 14px; }
+.header .info-btn {
+    display: inline-block;
+    margin-top: 12px;
+    background: rgba(255,255,255,0.2);
+    border: 1px solid rgba(255,255,255,0.4);
+    color: white;
+    padding: 6px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    animation: pulse 2s ease-in-out infinite;
+    box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
+    transition: background 0.2s;
+}
+.header .info-btn:hover {
+    background: rgba(255,255,255,0.3);
+    animation: none;
+}
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
+    50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
+    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
+}
+.info-modal {
+    display: none;
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+.info-modal.show { display: flex; }
+.info-modal-content {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+    margin: 20px;
+    line-height: 1.6;
+}
+.info-modal-content h2 { margin-top: 0; color: #667eea; }
+.info-modal-content h3 { color: #764ba2; margin-top: 20px; }
+.info-modal-content table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 14px; }
+.info-modal-content th, .info-modal-content td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; }
+.info-modal-content th { background: #f8f9fa; font-weight: 600; }
+.info-modal .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+}
+.info-modal .close-btn:hover { color: #333; }
 .status-bar {
     background: #f0f9ff;
     padding: 8px 12px;
@@ -301,11 +363,45 @@ with gr.Blocks(css=custom_css, title="Ask The Right Question") as demo:
     # Session state
     state = gr.State(get_initial_state())
 
-    # Header
+    # Header with info button
     gr.HTML("""
     <div class="header">
         <h1>Ask The Right Question</h1>
         <p>Start listening and questions will generate automatically as the talk progresses</p>
+        <br>
+        <button class="info-btn" onclick="document.getElementById('infoModal').classList.add('show')">The problem we solve</button>
+    </div>
+
+    <!-- Info Modal -->
+    <div id="infoModal" class="info-modal" onclick="if(event.target===this) this.classList.remove('show')">
+        <div class="info-modal-content">
+            <button class="close-btn" onclick="document.getElementById('infoModal').classList.remove('show')">&times;</button>
+            <h2>Ask The Right Question</h2>
+            <p><strong>AI-powered assistant that helps you ask insightful questions during Q&A sessions at conferences, classes, and talks.</strong></p>
+
+            <h3>The Problem</h3>
+            <p>You're at a conference or talk. The speaker opens the floor for questions. Your mind goes blank. You want to ask something meaningful but coming up with good questions on the spot is hard.</p>
+
+            <h3>How It Works</h3>
+            <ol>
+                <li><strong>Listen</strong> - Record audio or paste text from the talk</li>
+                <li><strong>Research</strong> - AI researches speaker background and fact-checks claims</li>
+                <li><strong>Generate</strong> - Get thoughtful questions with explanations of why they're valuable</li>
+            </ol>
+
+            <h3>Question Types</h3>
+            <table>
+                <tr><th>Type</th><th>Purpose</th></tr>
+                <tr><td>CLARIFICATION</td><td>Seeks to understand better</td></tr>
+                <tr><td>DEPTH</td><td>Explores a topic more deeply</td></tr>
+                <tr><td>CONNECTION</td><td>Links to other fields or ideas</td></tr>
+                <tr><td>CHALLENGE</td><td>Probes assumptions respectfully</td></tr>
+                <tr><td>PRACTICAL</td><td>Asks about real-world application</td></tr>
+                <tr><td>FORWARD</td><td>Explores future implications</td></tr>
+            </table>
+
+            <p style="margin-top:20px; font-size:13px; color:#666;">Built for HuggingFace MCP Hackathon | Claude + Whisper + Tavily</p>
+        </div>
     </div>
     """)