feat: Improve UI/UX with step-by-step layout and better docs

- Add step-by-step instructions in Analyze tab
- Improve login button placement with status display
- Add placeholder text and info tooltips for inputs
- Add chatbot height and better layout in Chat tab
- Update README with features and usage instructions
- Update E2E tests for new UI structure

README.md

@@ -14,4 +14,28 @@ hf_oauth_expiration_minutes: 480
 
 # Video Analyzer
 
-A Gradio application.
+A Gradio application for downloading, transcribing, and analyzing YouTube videos using AI.
+
+## Features
+
+- **YouTube Video Download**: Download videos or entire playlists
+- **Speech-to-Text**: Transcribe audio using OpenAI Whisper
+- **Visual Analysis**: Extract and describe key frames using BLIP vision model
+- **Knowledge Base**: Store analyzed content in a vector database (ChromaDB)
+- **RAG Chatbot**: Ask questions about your analyzed videos using Qwen2.5-72B
+
+## How to Use
+
+1. **Sign in** with your HuggingFace account (required)
+2. **Analyze Videos** tab:
+   - Paste a YouTube video or playlist URL
+   - Enable/disable frame analysis
+   - Click "Analyze Video" to process
+3. **Chat with Videos** tab:
+   - Ask questions about videos you've analyzed
+   - The AI will search the knowledge base and provide answers
+
+## Requirements
+
+- HuggingFace account for OAuth authentication
+- FFmpeg (for audio extraction)

app.py

@@ -408,29 +408,36 @@ def get_knowledge_stats() -> str:
 
 def create_demo() -> gr.Blocks:
     """Create and configure the Gradio demo application."""
-    with gr.Blocks() as demo:
+    with gr.Blocks(title="Video Analyzer") as demo:
         gr.Markdown("# Video Analyzer")
         gr.Markdown("Download, transcribe, analyze, and chat with YouTube videos using AI")
 
-        gr.LoginButton()
-        m1 = gr.Markdown()
-        m2 = gr.Markdown()
+        with gr.Row():
+            with gr.Column(scale=3):
+                login_status = gr.Markdown()
+                org_status = gr.Markdown()
+            with gr.Column(scale=1):
+                gr.LoginButton()
 
         gr.Markdown("---")
 
         with gr.Tabs():
             with gr.TabItem("Analyze Videos"):
-                with gr.Row():
-                    url_input = gr.Textbox(
-                        label="YouTube URL",
-                        placeholder="Enter a YouTube video or playlist URL",
-                        scale=4,
-                    )
+                gr.Markdown("### Step 1: Enter a YouTube URL")
+                gr.Markdown("*Paste a video or playlist URL below*")
 
+                url_input = gr.Textbox(
+                    label="YouTube URL",
+                    placeholder="https://www.youtube.com/watch?v=...",
+                    lines=1,
+                )
+
+                gr.Markdown("### Step 2: Configure Analysis Options")
                 with gr.Row():
                     analyze_frames = gr.Checkbox(
                         label="Analyze video frames (visual context)",
                         value=True,
+                        info="Extract and describe key frames from the video",
                     )
                     num_frames = gr.Slider(
                         label="Number of frames to analyze",
@@ -438,10 +445,17 @@ def create_demo() -> gr.Blocks:
                         maximum=10,
                         value=5,
                         step=1,
+                        info="More frames = better context but slower",
                     )
 
-                submit_btn = gr.Button("Analyze Video", variant="primary")
-                output = gr.Markdown(label="Analysis")
+                gr.Markdown("### Step 3: Analyze")
+                submit_btn = gr.Button("Analyze Video", variant="primary", size="lg")
+
+                gr.Markdown("### Results")
+                output = gr.Markdown(
+                    value="*Results will appear here after analysis*",
+                    label="Analysis Output",
+                )
 
                 submit_btn.click(
                     fn=process_youtube,
@@ -451,12 +465,23 @@ def create_demo() -> gr.Blocks:
 
             with gr.TabItem("Chat with Videos"):
                 kb_stats = gr.Markdown()
-                chatbot = gr.Chatbot(label="Video Chat")
-                chat_input = gr.Textbox(
-                    label="Ask a question about your videos",
-                    placeholder="What did the video say about...?",
+
+                gr.Markdown("*Ask questions about videos you've analyzed*")
+
+                chatbot = gr.Chatbot(
+                    label="Video Chat",
+                    height=400,
+                    placeholder="Your conversation will appear here...",
                 )
-                chat_btn = gr.Button("Ask", variant="primary")
+
+                with gr.Row():
+                    chat_input = gr.Textbox(
+                        label="Your Question",
+                        placeholder="What topics were discussed in the videos?",
+                        scale=4,
+                        lines=1,
+                    )
+                    chat_btn = gr.Button("Ask", variant="primary", scale=1)
 
                 def respond(
                     message: str,
@@ -484,8 +509,8 @@ def create_demo() -> gr.Blocks:
                 # Update stats on tab load
                 demo.load(get_knowledge_stats, outputs=kb_stats)
 
-        demo.load(hello, inputs=None, outputs=m1)
-        demo.load(list_organizations, inputs=None, outputs=m2)
+        demo.load(hello, inputs=None, outputs=login_status)
+        demo.load(list_organizations, inputs=None, outputs=org_status)
 
     return demo
 

tests/test_e2e.py

@@ -40,6 +40,13 @@ 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."""
+        page.goto(app_url)
+
+        # Check description
+        expect(page.locator("text=Download, transcribe, analyze")).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)
@@ -68,8 +75,8 @@ class TestVideoAnalyzerUI:
         """Test that the YouTube URL input field exists."""
         page.goto(app_url)
 
-        # Check for URL input
-        url_input = page.locator("textarea[placeholder*='YouTube']")
+        # Check for URL input with placeholder
+        url_input = page.locator("input[type='text'], textarea").first
         expect(url_input).to_be_visible()
 
     def test_analyze_button_exists(self, page: Page, app_url: str):
@@ -84,7 +91,7 @@ class TestVideoAnalyzerUI:
         """Test that the frame analysis checkbox exists."""
         page.goto(app_url)
 
-        # Check for checkbox
+        # Check for checkbox label
         checkbox = page.locator("text=Analyze video frames")
         expect(checkbox).to_be_visible()
 
@@ -96,6 +103,15 @@ class TestVideoAnalyzerUI:
         slider_label = page.locator("text=Number of frames")
         expect(slider_label).to_be_visible()
 
+    def test_step_instructions_visible(self, page: Page, app_url: str):
+        """Test that step instructions are visible."""
+        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()
+
     def test_can_switch_to_chat_tab(self, page: Page, app_url: str):
         """Test switching to the Chat tab."""
         page.goto(app_url)
@@ -103,9 +119,8 @@ class TestVideoAnalyzerUI:
         # Click Chat tab
         page.click("text=Chat with Videos")
 
-        # Verify chat input is visible
-        chat_input = page.locator("textarea[placeholder*='question']")
-        expect(chat_input).to_be_visible()
+        # Verify chat elements are visible
+        expect(page.locator("text=Ask questions about videos")).to_be_visible()
 
     def test_ask_button_in_chat_tab(self, page: Page, app_url: str):
         """Test that Ask button exists in Chat tab."""
@@ -118,16 +133,12 @@ class TestVideoAnalyzerUI:
         ask_btn = page.locator("button:has-text('Ask')")
         expect(ask_btn).to_be_visible()
 
-    def test_empty_url_shows_message(self, page: Page, app_url: str):
-        """Test that submitting empty URL shows appropriate message."""
+    def test_knowledge_base_status_in_chat_tab(self, page: Page, app_url: str):
+        """Test that knowledge base status is shown in Chat tab."""
         page.goto(app_url)
 
-        # Click analyze without entering URL
-        page.click("button:has-text('Analyze Video')")
-
-        # Wait for response
-        time.sleep(2)
+        # Switch to Chat tab
+        page.click("text=Chat with Videos")
 
-        # Check for login or URL prompt message
-        response = page.locator("text=Please")
-        expect(response).to_be_visible()
+        # Should show empty knowledge base message
+        expect(page.locator("text=Knowledge base")).to_be_visible()