docs: Update README and E2E tests for unified chatbot UI

- Rewrite README with full feature documentation
- Add tech stack table and example interactions
- Include development setup instructions
- Update E2E tests for unified chatbot interface
- Remove outdated tab-based UI tests
- Add tests for welcome message, clear chat, responsive layout

README.md

@@ -32,34 +32,100 @@ short_description: Download, transcribe, and chat with YouTube videos using AI
 
 # Video Analyzer
 
-Download, transcribe, and chat with YouTube videos using AI.
+A conversational AI assistant that analyzes YouTube videos and answers questions about their content.
 
 ## Features
 
-- **YouTube Video Download**: Supports videos, playlists, and shorts
-- **Speech-to-Text**: Automatic transcription using OpenAI Whisper
+### Core Capabilities
+- **YouTube Video Download**: Supports videos, playlists, and shorts via yt-dlp
+- **Speech-to-Text**: Automatic transcription using OpenAI Whisper (whisper-base)
 - **Visual Analysis**: Key frame extraction and captioning with BLIP
-- **Knowledge Base**: Vector storage with ChromaDB for semantic search
-- **RAG Chatbot**: Ask questions about your videos using Qwen2.5-72B
+- **Knowledge Base**: Per-session vector storage with ChromaDB for semantic search
+- **RAG Chatbot**: Ask questions about your videos using Qwen2.5-72B-Instruct
+
+### User Experience
+- **Unified Chat Interface**: Single chatbot handles both video analysis and Q&A
+- **Auto URL Detection**: Just paste a YouTube URL and the assistant analyzes it
+- **Conversational Flow**: The assistant guides you through the process
+- **Per-Session Storage**: Your analyzed videos are private to your session
+- **Persistent Sessions**: Your knowledge base persists across page reloads (tied to your HuggingFace profile)
+
+### Technical Features
+- **ZeroGPU Support**: Leverages HuggingFace ZeroGPU for faster GPU-accelerated processing
+- **Model Fallback**: Automatic fallback chain (Qwen2.5-72B → Llama-3.1-70B) for reliability
+- **HuggingFace OAuth**: Secure authentication via HuggingFace login
+- **Gradio 6**: Modern UI with the Soft theme
 
 ## How to Use
 
-1. **Sign in** with your HuggingFace account
-2. **Paste** a YouTube URL in the Analyze tab
-3. **Wait** for processing (transcription + frame analysis)
-4. **Chat** about the video content in the Chat tab
+1. **Sign in** with your HuggingFace account using the button in the top right
+2. **Paste** a YouTube URL directly in the chat (e.g., `https://youtube.com/watch?v=...`)
+3. **Wait** for processing - the assistant will transcribe audio and analyze key frames
+4. **Ask questions** about the video content in natural language
+
+### Example Interactions
+
+```
+You: https://youtube.com/watch?v=dQw4w9WgXcQ
+Bot: I'll analyze that video for you. This may take a few minutes...
+Bot: Done! I've analyzed "Never Gonna Give You Up" and added it to my knowledge base.
+
+You: What is this video about?
+Bot: Based on the transcript, this video is a music video for Rick Astley's 1987 hit song...
+
+You: What visual elements were shown?
+Bot: The video shows a man dancing in various locations...
+```
 
 ## Tech Stack
 
-- **Gradio**: Web UI framework
-- **Whisper**: Speech recognition
-- **BLIP**: Image captioning
-- **ChromaDB**: Vector database
-- **Sentence Transformers**: Text embeddings
-- **HuggingFace Inference API**: SOTA language model
+| Component | Technology |
+|-----------|------------|
+| Web Framework | Gradio 6 with OAuth |
+| Speech Recognition | OpenAI Whisper (whisper-base) |
+| Image Captioning | Salesforce BLIP |
+| Vector Database | ChromaDB (in-memory, per-session) |
+| Text Embeddings | Sentence Transformers (all-MiniLM-L6-v2) |
+| Language Model | HuggingFace Inference API (Qwen2.5-72B-Instruct) |
+| Video Download | yt-dlp |
+| GPU Acceleration | HuggingFace ZeroGPU (A10G) |
 
 ## Limitations
 
 - Works best with videos under 10 minutes
 - Requires HuggingFace login for authentication
-- Knowledge base is session-based (resets on Space restart)
+- Knowledge base is session-based (stored in memory, not persistent across Space restarts)
+- Audio extraction requires FFmpeg (pre-installed on HuggingFace Spaces)
+
+## Development
+
+### Prerequisites
+- Python 3.11+
+- uv package manager
+- FFmpeg
+
+### Setup
+```bash
+# Install dependencies
+uv sync
+
+# Install dev dependencies
+uv sync --extra dev
+
+# Run the app locally
+uv run python app.py
+```
+
+### Testing
+```bash
+# Run unit tests
+uv run --extra dev pytest tests/test_app.py -v
+
+# Run E2E tests (requires playwright browsers)
+uv run --extra dev playwright install
+uv run --extra dev pytest tests/test_e2e.py -v
+```
+
+## License
+
+MIT

tests/test_e2e.py

@@ -30,8 +30,8 @@ def app_url() -> Generator[str, None, None]:
     process.wait()
 
 
-class TestVideoAnalyzerUI:
-    """E2E tests for the Video Analyzer UI."""
+class TestUnifiedChatbotUI:
+    """E2E tests for the unified chatbot Video Analyzer UI."""
 
     def test_homepage_loads(self, page: Page, app_url: str):
         """Test that the homepage loads correctly."""
@@ -40,105 +40,147 @@ class TestVideoAnalyzerUI:
         # Check title is visible
         expect(page.locator("text=Video Analyzer")).to_be_visible()
 
-    def test_app_description_visible(self, page: Page, app_url: str):
-        """Test that the app description is visible."""
+    def test_app_subtitle_visible(self, page: Page, app_url: str):
+        """Test that the app subtitle is visible."""
         page.goto(app_url)
 
-        # Check description
-        expect(page.locator("text=Download, transcribe, analyze")).to_be_visible()
+        # Check subtitle
+        expect(page.locator("text=Analyze YouTube videos")).to_be_visible()
 
     def test_login_button_visible(self, page: Page, app_url: str):
         """Test that the login button is visible."""
         page.goto(app_url)
 
-        # Look for login button
+        # Look for login button (HuggingFace sign in)
         login_button = page.locator("button:has-text('Sign in')")
         expect(login_button).to_be_visible()
 
-    def test_analyze_tab_visible(self, page: Page, app_url: str):
-        """Test that the Analyze Videos tab is visible."""
+    def test_chatbot_visible(self, page: Page, app_url: str):
+        """Test that the chatbot component is visible."""
         page.goto(app_url)
 
-        # Check for Analyze Videos tab
-        analyze_tab = page.locator("text=Analyze Videos")
-        expect(analyze_tab).to_be_visible()
+        # Check for chatbot container
+        chatbot = page.locator("[data-testid='chatbot']")
+        expect(chatbot).to_be_visible()
 
-    def test_chat_tab_visible(self, page: Page, app_url: str):
-        """Test that the Chat with Videos tab is visible."""
+    def test_welcome_message_displayed(self, page: Page, app_url: str):
+        """Test that welcome message is shown on load."""
         page.goto(app_url)
 
-        # Check for Chat tab
-        chat_tab = page.locator("text=Chat with Videos")
-        expect(chat_tab).to_be_visible()
+        # Wait for page to load
+        page.wait_for_timeout(2000)
 
-    def test_youtube_url_input_exists(self, page: Page, app_url: str):
-        """Test that the YouTube URL input field exists."""
+        # Check for welcome message content
+        expect(page.locator("text=Welcome to Video Analyzer")).to_be_visible()
+
+    def test_message_input_exists(self, page: Page, app_url: str):
+        """Test that the message input field exists."""
+        page.goto(app_url)
+
+        # Check for text input with placeholder
+        msg_input = page.locator("textarea[placeholder*='YouTube URL']")
+        expect(msg_input).to_be_visible()
+
+    def test_send_button_exists(self, page: Page, app_url: str):
+        """Test that the Send button exists."""
         page.goto(app_url)
 
-        # Check for URL input with placeholder
-        url_input = page.locator("input[type='text'], textarea").first
-        expect(url_input).to_be_visible()
+        # Check for Send button
+        send_btn = page.locator("button:has-text('Send')")
+        expect(send_btn).to_be_visible()
 
-    def test_analyze_button_exists(self, page: Page, app_url: str):
-        """Test that the Analyze Video button exists."""
+    def test_clear_chat_button_exists(self, page: Page, app_url: str):
+        """Test that the Clear Chat button exists."""
         page.goto(app_url)
 
-        # Check for Analyze button
-        analyze_btn = page.locator("button:has-text('Analyze Video')")
-        expect(analyze_btn).to_be_visible()
+        # Check for Clear Chat button
+        clear_btn = page.locator("button:has-text('Clear Chat')")
+        expect(clear_btn).to_be_visible()
+
+    def test_knowledge_base_status_visible(self, page: Page, app_url: str):
+        """Test that knowledge base status is displayed."""
+        page.goto(app_url)
+
+        # Wait for status to load
+        page.wait_for_timeout(2000)
+
+        # Check for knowledge base empty message
+        expect(page.locator("text=Knowledge base is empty")).to_be_visible()
 
-    def test_frame_analysis_checkbox_exists(self, page: Page, app_url: str):
-        """Test that the frame analysis checkbox exists."""
+    def test_can_type_in_message_input(self, page: Page, app_url: str):
+        """Test that user can type in the message input."""
         page.goto(app_url)
 
-        # Check for checkbox label
-        checkbox = page.locator("text=Analyze video frames")
-        expect(checkbox).to_be_visible()
+        # Find and fill the message input
+        msg_input = page.locator("textarea[placeholder*='YouTube URL']")
+        msg_input.fill("https://youtube.com/watch?v=test123")
 
-    def test_frame_slider_exists(self, page: Page, app_url: str):
-        """Test that the frame count slider exists."""
+        # Verify the input has the text
+        expect(msg_input).to_have_value("https://youtube.com/watch?v=test123")
+
+    def test_send_button_is_primary(self, page: Page, app_url: str):
+        """Test that Send button has primary styling."""
         page.goto(app_url)
 
-        # Check for slider
-        slider_label = page.locator("text=Number of frames")
-        expect(slider_label).to_be_visible()
+        # Check for primary variant button
+        send_btn = page.locator("button:has-text('Send')").first
+        expect(send_btn).to_be_visible()
 
-    def test_step_instructions_visible(self, page: Page, app_url: str):
-        """Test that step instructions are visible."""
+    def test_login_prompt_for_unauthenticated_users(self, page: Page, app_url: str):
+        """Test that unauthenticated users see login prompt in welcome."""
         page.goto(app_url)
 
-        # Check for step labels
-        expect(page.locator("text=Step 1")).to_be_visible()
-        expect(page.locator("text=Step 2")).to_be_visible()
-        expect(page.locator("text=Step 3")).to_be_visible()
+        # Wait for welcome message
+        page.wait_for_timeout(2000)
+
+        # Check for sign in prompt
+        expect(page.locator("text=sign in with HuggingFace")).to_be_visible()
 
-    def test_can_switch_to_chat_tab(self, page: Page, app_url: str):
-        """Test switching to the Chat tab."""
+    def test_clear_chat_works(self, page: Page, app_url: str):
+        """Test that Clear Chat button clears the chatbot."""
         page.goto(app_url)
 
-        # Click Chat tab
-        page.click("text=Chat with Videos")
+        # Wait for welcome message to appear
+        page.wait_for_timeout(2000)
+        expect(page.locator("text=Welcome to Video Analyzer")).to_be_visible()
+
+        # Click clear chat
+        clear_btn = page.locator("button:has-text('Clear Chat')")
+        clear_btn.click()
+
+        # Wait a moment for clear to process
+        page.wait_for_timeout(500)
 
-        # Verify chat elements are visible
-        expect(page.locator("text=Ask questions about videos")).to_be_visible()
+        # Welcome message should be gone (chat cleared)
+        expect(page.locator("text=Welcome to Video Analyzer")).not_to_be_visible()
 
-    def test_ask_button_in_chat_tab(self, page: Page, app_url: str):
-        """Test that Ask button exists in Chat tab."""
+    def test_responsive_layout(self, page: Page, app_url: str):
+        """Test that the layout is responsive."""
         page.goto(app_url)
 
-        # Switch to Chat tab
-        page.click("text=Chat with Videos")
+        # Set mobile viewport
+        page.set_viewport_size({"width": 375, "height": 667})
 
-        # Check for Ask button
-        ask_btn = page.locator("button:has-text('Ask')")
-        expect(ask_btn).to_be_visible()
+        # UI elements should still be visible
+        expect(page.locator("text=Video Analyzer")).to_be_visible()
+        expect(page.locator("button:has-text('Send')")).to_be_visible()
 
-    def test_knowledge_base_status_in_chat_tab(self, page: Page, app_url: str):
-        """Test that knowledge base status is shown in Chat tab."""
+    def test_chatbot_has_height(self, page: Page, app_url: str):
+        """Test that chatbot has appropriate height."""
         page.goto(app_url)
 
-        # Switch to Chat tab
-        page.click("text=Chat with Videos")
+        # Get chatbot element
+        chatbot = page.locator("[data-testid='chatbot']")
+        box = chatbot.bounding_box()
+
+        # Should have significant height (500px configured)
+        assert box is not None
+        assert box["height"] >= 400  # Allow some flexibility
+
+    def test_theme_applied(self, page: Page, app_url: str):
+        """Test that Soft theme is applied (lighter colors)."""
+        page.goto(app_url)
 
-        # Should show empty knowledge base message
-        expect(page.locator("text=Knowledge base")).to_be_visible()
+        # The Soft theme should be applied - check body has gradio styling
+        body = page.locator("body")
+        expect(body).to_be_visible()