Implement 5-step UI flow with floating sidebar navigation

- Create clean step-based page flow (Upload → Analysis → Results → Improvements/Chatbot)
- Add floating sidebar with navigation buttons (Results, Improvements, Chatbot, Start Over)
- Remove progress bar for cleaner minimal design
- Implement Par-ity branding with logo and zigzag styling
- Add mobile-responsive design with adaptive layouts
- Enhance UX with smooth step transitions and state management

app/gradio_app.py

@@ -0,0 +1,492 @@
+"""
+Gradio web UI for Golf Swing Analysis with Step-based Flow
+"""
+
+import os
+import sys
+import tempfile
+import gradio as gr
+from dotenv import load_dotenv
+import base64
+from pathlib import Path
+import shutil
+import cv2
+from PIL import Image
+from datetime import datetime
+
+# Load environment variables
+load_dotenv()
+
+# Add the app directory to the path
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+# Import analysis modules
+from utils.video_downloader import download_youtube_video, download_pro_reference, cleanup_video_file, cleanup_downloads_directory
+from utils.video_processor import process_video
+from models.pose_estimator import analyze_pose
+from models.swing_analyzer import segment_swing, analyze_trajectory
+from models.llm_analyzer import generate_swing_analysis, create_llm_prompt, prepare_data_for_llm, check_llm_services, parse_and_format_analysis
+
+# Import RAG functionality
+try:
+    from golf_swing_rag import GolfSwingRAG
+    RAG_AVAILABLE = True
+except ImportError:
+    RAG_AVAILABLE = False
+
+def validate_youtube_url(url):
+    """Validate if the URL is a YouTube URL"""
+    return "youtube.com" in url or "youtu.be" in url
+
+def start_analysis(input_text, video_file):
+    """Start video analysis process"""
+    try:
+        video_path = None
+        
+        # Handle video input
+        if video_file is not None:
+            # Save uploaded file
+            os.makedirs("downloads", exist_ok=True)
+            video_path = os.path.join("downloads", f"uploaded_{datetime.now().strftime('%Y%m%d_%H%M%S')}.mp4")
+            shutil.copy(video_file.name, video_path)
+        elif input_text and validate_youtube_url(input_text):
+            # Download from YouTube
+            video_path = download_youtube_video(input_text)
+        else:
+                    return ("### Step 1: Upload Your Video", 
+               "Please provide either a valid YouTube URL or upload a video file.", 
+               1, None)
+        
+        if not video_path or not os.path.exists(video_path):
+            return ("### Step 1: Upload Your Video", 
+                   "Failed to process video. Please try again.", 
+                   1, None)
+        
+        # Move to analysis step
+        return ("### Step 2: Analyzing Video and Pose", 
+               "🔄 **Processing your swing video...**\n\nPlease wait while we analyze your golf swing.", 
+               2, {'video_path': video_path})
+        
+    except Exception as e:
+        error_message = f"Error starting analysis: {str(e)}"
+        return ("### Step 1: Upload Your Video", 
+               error_message, 1, None)
+
+def process_analysis(analysis_state):
+    """Process the actual video analysis"""
+    if not analysis_state or 'video_path' not in analysis_state:
+        return ("### Step 1: Upload Your Video", 
+               "No video to analyze. Please upload a video first.", 
+               1, None)
+    
+    try:
+        video_path = analysis_state['video_path']
+        
+        # Process video analysis
+        frames, detections = process_video(video_path, sample_rate=1)
+        pose_data = analyze_pose(frames)
+        swing_phases = segment_swing(pose_data, detections, sample_rate=1)
+        trajectory_data = analyze_trajectory(frames, detections, swing_phases, sample_rate=1)
+        analysis_data = prepare_data_for_llm(pose_data, swing_phases, trajectory_data)
+        
+        # Store complete results
+        results = {
+            'video_path': video_path,
+            'pose_data': pose_data,
+            'swing_phases': swing_phases,
+            'trajectory_data': trajectory_data,
+            'analysis_data': analysis_data
+        }
+        
+        # Generate results summary
+        results_content = f"""
+## 🏌️ Swing Analysis Results
+
+**Video:** {os.path.basename(video_path)}
+
+### 📊 **Analysis Summary**
+- **Swing Phases Detected:** {len(swing_phases) if swing_phases else 0}
+- **Pose Data Points:** {len(pose_data) if pose_data else 0}
+- **Trajectory Analysis:** {'✅ Complete' if trajectory_data else '❌ Failed'}
+
+### 🎯 **Key Findings**
+- Swing timing and rhythm patterns identified
+- Pose alignment and form analyzed
+- Ball trajectory and impact mechanics evaluated
+
+**Ready to dive deeper?** Choose how you'd like to explore your swing analysis:
+        """
+        
+        return ("### Step 3: See Your Results", 
+               results_content, 3, results)
+        
+    except Exception as e:
+        error_message = f"Error during analysis: {str(e)}"
+        return ("### Step 2: Analyzing Video and Pose", 
+               f"❌ **Analysis Failed**\n\n{error_message}\n\nPlease try again.", 
+               2, analysis_state)
+
+
+
+def go_to_improvements(analysis_results):
+    """Navigate to improvements step"""
+    return ("### Step 4: AI-Powered Improvements", 
+           "🎯 **Generating personalized swing improvements...**", 
+           4, analysis_results)
+
+def go_to_chatbot(analysis_results):
+    """Navigate to chatbot step"""
+    return ("### Step 5: Ask the Golf Expert", 
+           "💬 **Ready to answer your swing questions!**", 
+           5, analysis_results)
+
+def go_back_to_results(analysis_results):
+    """Go back to results step"""
+    if not analysis_results:
+        return ("### Step 1: Upload Your Video", 
+               "No analysis data available. Please start over.", 
+               1, None)
+    
+    results_content = f"""
+## 🏌️ Swing Analysis Results
+
+**Video:** {os.path.basename(analysis_results.get('video_path', 'Unknown'))}
+
+### 📊 **Analysis Summary**
+- **Swing Phases Detected:** {len(analysis_results.get('swing_phases', [])) if analysis_results.get('swing_phases') else 0}
+- **Pose Data Points:** {len(analysis_results.get('pose_data', [])) if analysis_results.get('pose_data') else 0}
+- **Trajectory Analysis:** {'✅ Complete' if analysis_results.get('trajectory_data') else '❌ Failed'}
+
+### 🎯 **Key Findings**
+- Swing timing and rhythm patterns identified
+- Pose alignment and form analyzed
+- Ball trajectory and impact mechanics evaluated
+
+**Ready to dive deeper?** Choose how you'd like to explore your swing analysis:
+    """
+    
+    return ("### Step 3: See Your Results", 
+           results_content, 3, analysis_results)
+
+def start_over():
+    """Reset to beginning"""
+    return ("### Step 1: Upload Your Video", 
+           "**Choose your input method:**", 
+           1, None)
+
+def handle_next_step(current_step, youtube_input, video_upload, analysis_results):
+    """Handle moving to next step"""
+    if current_step == 1:
+        # Start analysis
+        header, content, step, results = start_analysis(youtube_input, video_upload)
+        return (header, content, step, results,
+                gr.update(visible=False), gr.update(visible=True), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False))
+    elif current_step == 2:
+        # Process analysis
+        header, content, step, results = process_analysis(analysis_results)
+        if step == 3:  # Analysis complete
+            return (header, content, step, results,
+                    gr.update(visible=False), gr.update(visible=True), gr.update(visible=True),
+                    gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                    gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                    gr.update(visible=True), gr.update(visible=True), gr.update(visible=True))
+        else:
+            return (header, content, step, results,
+                    gr.update(visible=False), gr.update(visible=True), gr.update(visible=True),
+                    gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
+                    gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+                    gr.update(visible=False), gr.update(visible=False), gr.update(visible=False))
+    else:
+        # Should not happen with current flow
+        return (gr.update(), gr.update(), current_step, analysis_results,
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update())
+
+def handle_back_step(current_step, analysis_results):
+    """Handle going back one step"""
+    header, content, step, results = go_back_step(current_step, analysis_results)
+    
+    if step == 1:
+        return (header, content, step,
+                gr.update(value="🏌️ Start Analysis"), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False))
+    elif step == 3:
+        return (header, content, step,
+                gr.update(visible=False), gr.update(visible=True), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=True), gr.update(visible=True), gr.update(visible=True))
+    else:
+        return (header, content, step,
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update())
+
+def handle_go_to_step(target_step, analysis_results):
+    """Handle navigation to specific step"""
+    if target_step == 3:
+        header, content, step, results = go_back_to_results(analysis_results)
+        return (header, content, step,
+                gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=True), gr.update(visible=True), gr.update(visible=True))
+    elif target_step == 4:
+        header, content, step, results = go_to_improvements(analysis_results)
+        improvements_content = generate_improvements(analysis_results)
+        return (header, content, step,
+                gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+                gr.update(value=improvements_content), gr.update(visible=True), gr.update(visible=False), gr.update(visible=True))
+    elif target_step == 5:
+        header, content, step, results = go_to_chatbot(analysis_results)
+        return (header, content, step,
+                gr.update(visible=False), gr.update(visible=True),
+                gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
+                gr.update(visible=True), gr.update(visible=False), gr.update(visible=True))
+    else:
+        return (gr.update(), gr.update(), target_step,
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update())
+
+def handle_start_over():
+    """Handle starting over"""
+    header, content, step, results = start_over()
+    return (header, content, step, results,
+            gr.update(value="🏌️ Start Analysis"), gr.update(visible=False), gr.update(visible=False),
+            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+            gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
+            gr.update(visible=False), gr.update(visible=False), gr.update(visible=False))
+
+def generate_improvements(analysis_results):
+    """Generate AI-powered swing improvements"""
+    if not analysis_results:
+        return "No analysis data available. Please analyze a video first."
+    
+    try:
+        # Generate detailed analysis with recommendations
+        analysis = generate_swing_analysis(
+            analysis_results['pose_data'], 
+            analysis_results['swing_phases'],
+            analysis_results['trajectory_data']
+        )
+        
+        return f"""
+## 🎯 Personalized Swing Improvements
+
+{analysis}
+
+---
+*Analysis generated using AI-powered swing analysis technology*
+        """
+        
+    except Exception as e:
+        return f"Error generating improvements: {str(e)}"
+
+def get_chatbot_response(question, analysis_results, chat_history):
+    """Get response from golf swing chatbot"""
+    if not RAG_AVAILABLE:
+        return chat_history + [("System", "Chatbot is not available due to missing dependencies.")], ""
+    
+    try:
+        # Initialize RAG system if needed
+        if not hasattr(get_chatbot_response, 'rag_system'):
+            get_chatbot_response.rag_system = GolfSwingRAG()
+            get_chatbot_response.rag_system.load_and_process_data()
+            get_chatbot_response.rag_system.create_embeddings()
+        
+        # Search for relevant information
+        relevant_chunks = get_chatbot_response.rag_system.search_similar_chunks(question, top_k=3)
+        
+        # Generate response (simplified version)
+        if relevant_chunks:
+            best_chunk = relevant_chunks[0]
+            response = f"Based on {best_chunk['metadata']['title']}: {best_chunk['chunk'][:300]}..."
+        else:
+            response = "I couldn't find specific information about that topic. Could you try rephrasing your question?"
+        
+        # Add to chat history
+        chat_history.append((question, response))
+        
+        return chat_history, ""
+        
+    except Exception as e:
+        chat_history.append((question, f"Error: {str(e)}"))
+        return chat_history, ""
+
+def go_back_step(current_step, analysis_results):
+    """Go back one step"""
+    if current_step <= 1:
+        return start_over()
+    elif current_step == 2:
+        return start_over()
+    elif current_step >= 3:
+        return go_back_to_results(analysis_results)
+    else:
+        return start_over()
+
+# Create the Gradio interface
+def create_interface():
+    with gr.Blocks(css="styles.css", title="Par-ity Project: Golf Swing Analysis") as demo:
+        # States
+        current_step = gr.State(1)
+        analysis_results = gr.State(None)
+        
+        with gr.Row():
+            # Floating sidebar (initially hidden)
+            with gr.Column(scale=1, visible=False, elem_id="sidebar") as sidebar:
+                gr.Markdown("### Navigation", elem_classes="sidebar-header")
+                results_btn = gr.Button("📊 Results", variant="secondary", size="sm", visible=False)
+                improvements_btn = gr.Button("🎯 Improvements", variant="secondary", size="sm", visible=False) 
+                chatbot_btn = gr.Button("💬 Chatbot", variant="secondary", size="sm", visible=False)
+                start_over_btn = gr.Button("🔄 Start Over", variant="secondary", size="sm")
+            
+            # Main content area
+            with gr.Column(scale=4, elem_classes="centered"):
+                # Logo
+                logo = gr.Image("1.png", show_label=False, width=150, height=75, container=False)
+                
+                # Step header with zigzag effect
+                step_header = gr.Markdown("### Step 1: Upload Your Video", elem_id="step-header")
+                
+                # Main content area
+                content_box = gr.Markdown("**Choose your input method:**")
+                
+                # Step 1: Upload section
+                with gr.Group(visible=True) as step1_content:
+                    with gr.Tab("YouTube URL"):
+                        youtube_input = gr.Textbox(
+                            lines=2, 
+                            placeholder="Paste YouTube URL of golf swing here...",
+                            label="YouTube URL",
+                            show_label=False
+                        )
+                    
+                    with gr.Tab("Upload Video"):
+                        video_upload = gr.File(
+                            file_types=["video"],
+                            label="Upload Video File", 
+                            show_label=False
+                        )
+                
+                # Step 2: Analysis in progress (hidden initially)
+                with gr.Group(visible=False) as step2_content:
+                    gr.Markdown("### 🔄 Processing Your Video")
+                    gr.Markdown("Please wait while we analyze your golf swing...")
+                    analysis_progress = gr.HTML("⏳ Starting analysis...")
+                
+                # Step 3: Results (hidden initially)  
+                with gr.Group(visible=False) as step3_content:
+                    results_display = gr.Markdown()
+                
+                # Step 4: Improvements (hidden initially)
+                with gr.Group(visible=False) as step4_content:
+                    improvements_output = gr.Markdown()
+                
+                # Step 5: Chatbot (hidden initially)
+                with gr.Group(visible=False) as step5_content:
+                    chatbot = gr.Chatbot(height=400)
+                    chatbot_input = gr.Textbox(placeholder="Ask about golf swing technique...", show_label=False)
+                    ask_btn = gr.Button("Ask Question")
+                
+                # Navigation buttons
+                with gr.Row():
+                    back_btn = gr.Button("← Back", variant="secondary", visible=False)
+                    next_btn = gr.Button("🏌️ Start Analysis", variant="primary", size="lg")
+                    
+                # Step 3 action buttons (shown only on results step)
+                with gr.Row(visible=False) as step3_actions:
+                    step3_improvements_btn = gr.Button("🎯 Get Improvements", variant="primary", size="lg")
+                    step3_chatbot_btn = gr.Button("💬 Ask Questions", variant="secondary", size="lg")
+        
+        # Event handlers for step navigation
+        next_btn.click(
+            fn=handle_next_step,
+            inputs=[current_step, youtube_input, video_upload, analysis_results],
+            outputs=[step_header, content_box, current_step, analysis_results, 
+                    next_btn, back_btn, sidebar, step1_content, step2_content, step3_content, 
+                    step4_content, step5_content, step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        back_btn.click(
+            fn=handle_back_step,
+            inputs=[current_step, analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn, 
+                    sidebar, step1_content, step2_content, step3_content, step4_content, 
+                    step5_content, step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        # Step 3 action buttons
+        step3_improvements_btn.click(
+            fn=lambda analysis_results: handle_go_to_step(4, analysis_results),
+            inputs=[analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn,
+                    step1_content, step2_content, step3_content, step4_content, step5_content, 
+                    step3_actions, improvements_output, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        step3_chatbot_btn.click(
+            fn=lambda analysis_results: handle_go_to_step(5, analysis_results),
+            inputs=[analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn,
+                    step1_content, step2_content, step3_content, step4_content, step5_content, 
+                    step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        # Sidebar navigation
+        results_btn.click(
+            fn=lambda analysis_results: handle_go_to_step(3, analysis_results),
+            inputs=[analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn,
+                    step1_content, step2_content, step3_content, step4_content, step5_content, 
+                    step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        improvements_btn.click(
+            fn=lambda analysis_results: handle_go_to_step(4, analysis_results),
+            inputs=[analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn,
+                    step1_content, step2_content, step3_content, step4_content, step5_content, 
+                    step3_actions, improvements_output, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        chatbot_btn.click(
+            fn=lambda analysis_results: handle_go_to_step(5, analysis_results),
+            inputs=[analysis_results],
+            outputs=[step_header, content_box, current_step, next_btn, back_btn,
+                    step1_content, step2_content, step3_content, step4_content, step5_content, 
+                    step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        start_over_btn.click(
+            fn=handle_start_over,
+            outputs=[step_header, content_box, current_step, analysis_results, 
+                    next_btn, back_btn, sidebar, step1_content, step2_content, step3_content, 
+                    step4_content, step5_content, step3_actions, results_btn, improvements_btn, chatbot_btn]
+        )
+        
+        # Chatbot functionality
+        ask_btn.click(
+            fn=get_chatbot_response,
+            inputs=[chatbot_input, analysis_results, chatbot],
+            outputs=[chatbot, chatbot_input]
+        )
+        
+        chatbot_input.submit(
+            fn=get_chatbot_response,
+            inputs=[chatbot_input, analysis_results, chatbot],
+            outputs=[chatbot, chatbot_input]
+        )
+    
+    return demo
+
+# Launch the app
+if __name__ == "__main__":
+    demo = create_interface()
+    demo.launch(share=True)

app/styles.css

@@ -0,0 +1,122 @@
+body {
+  background-color: #FFFFFF;
+  font-family: 'Georgia', serif;
+  color: #0B3B0B;
+}
+
+.centered {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+button, .gr-button {
+  background-color: #0B3B0B !important;
+  color: #FFFFFF !important;
+  border-radius: 25px !important;
+  padding: 12px 28px !important;
+  font-weight: bold !important;
+  font-size: 16px !important;
+  transition: all 0.3s ease !important;
+  border: none !important;
+  box-shadow: 0 2px 8px rgba(11, 59, 11, 0.2) !important;
+}
+
+button:hover, .gr-button:hover {
+  background-color: #4CAF50 !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 12px rgba(11, 59, 11, 0.3) !important;
+}
+
+textarea, input, .gr-textbox {
+  border: 2px solid #4CAF50 !important;
+  border-radius: 10px;
+}
+
+#step-header::after {
+  content: "";
+  display: block;
+  height: 10px;
+  background-image: repeating-linear-gradient(
+    135deg,
+    #1D6F42,
+    #1D6F42 5px,
+    #A9DFBF 5px,
+    #A9DFBF 10px
+  );
+  margin-top: 8px;
+}
+
+/* Sidebar styling */
+#sidebar {
+  background-color: rgba(76, 175, 80, 0.05) !important;
+  border-right: 2px solid rgba(76, 175, 80, 0.2) !important;
+  padding: 20px !important;
+  position: sticky !important;
+  top: 20px !important;
+  height: fit-content !important;
+  border-radius: 15px !important;
+  margin-right: 20px !important;
+}
+
+.sidebar-header {
+  color: #0B3B0B !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  margin-bottom: 15px !important;
+  font-size: 16px !important;
+}
+
+#sidebar button {
+  width: 100% !important;
+  margin-bottom: 10px !important;
+  font-size: 12px !important;
+  padding: 8px 12px !important;
+  text-align: left !important;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .centered {
+    padding: 20px;
+    gap: 15px;
+  }
+  
+  button, .gr-button {
+    padding: 10px 20px !important;
+    font-size: 14px !important;
+    width: 100% !important;
+    max-width: 280px !important;
+  }
+  
+  #sidebar {
+    padding: 15px !important;
+    margin-right: 10px !important;
+    position: relative !important;
+  }
+  
+  .sidebar-header {
+    font-size: 14px !important;
+    margin-bottom: 10px !important;
+  }
+  
+  #sidebar button {
+    font-size: 11px !important;
+    padding: 6px 10px !important;
+    margin-bottom: 8px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  #sidebar {
+    display: none !important;
+  }
+  
+  .centered {
+    padding: 10px;
+    gap: 12px;
+  }
+}