ui: Center header with description and login button

- Replace row layout with centered HTML header
- Add descriptive text explaining the app functionality
- Mention voice and text chat options
- Cleaner, more focused landing experience

app.py

@@ -832,13 +832,21 @@ def create_demo() -> gr.Blocks:
         # Per-session state for ChromaDB collection
         session_state = gr.State(value=None)
 
-        gr.Markdown("# Video Analyzer")
-
-        with gr.Row():
-            with gr.Column(scale=4):
-                gr.Markdown("*Analyze YouTube videos and chat about their content*")
-            with gr.Column(scale=1):
-                gr.LoginButton()
+        # Centered header with description
+        gr.HTML(
+            """
+            <div style="text-align: center; padding: 20px 0; max-width: 600px; margin: 0 auto;">
+                <h1 style="margin-bottom: 12px;">Video Analyzer</h1>
+                <p style="color: #666; margin-bottom: 16px; line-height: 1.5;">
+                    Paste a YouTube URL to analyze the video. I'll transcribe the audio,
+                    analyze key frames, and let you ask questions about the content.
+                    You can type or use voice to chat!
+                </p>
+            </div>
+            """
+        )
+        with gr.Row(elem_classes="center-row"):
+            gr.LoginButton()
 
         chatbot = gr.Chatbot(
             label="Video Analyzer",