Update support documentation with visual deployment workflow

- Restructure HuggingFace deployment section with step-by-step visual guides
- Integrate img directory screenshots for each deployment phase
- Condense redundant accordion sections into streamlined Configuration Guide
- Add README customization section with YAML frontmatter details
- Simplify troubleshooting to focus on most common issues
- Enhanced with configuration status indicators (✅❌🔄)

support_docs.py

@@ -31,221 +31,242 @@ def create_support_docs():
             - Basic AI chatbot knowledge
             """)
         
-        with gr.Accordion("⚙️ Basic Configuration", open=False):
+        with gr.Accordion("⚙️ Configuration Guide", open=False):
             gr.Markdown("""
             ### Essential Settings
             
-            **Space Title & Description** - Name and purpose
+            **Space Title & Description** - Name and purpose for your assistant
             
             **Model Selection:**
             - **Gemini 2.0 Flash** - Fast, reliable (recommended)
             - **Gemma 3 27B** - Open-source, cost-effective
             - **Claude 3.5 Haiku** - Advanced reasoning
             
-            **API Key Variable** - Default: `OPENROUTER_API_KEY`
-            
-            **Access Code** - Optional student protection
-            """)
-        
-        with gr.Accordion("🤖 Assistant Setup", open=False):
-            gr.Markdown("""
-            ### System Prompt & Templates
-            
-            **Templates (Easy Start):**
-            - **Custom** - Write your own 
+            **System Prompt & Templates:**
+            - **Custom** - Write your own specific instructions
             - **Research Template** - Academic work, citations, fact-checking
             - **Socratic Template** - Teaching through questions, critical thinking
             
-            **Tips:**
-            - Be clear about the assistant's role
-            - Mention your target audience
-            - Define specific behavior and tone
-            """)
-        
-        with gr.Accordion("💬 Example Prompts", open=False):
-            gr.Markdown("""
-            ### Quick Start Examples
-            
-            **Guidelines:** One prompt per line, under 100 characters, show capabilities
+            **URL Grounding (2-4 URLs)** - Static content for consistent context (syllabi, policies, references)
             
-            **Course Assistant:**
-            ```
-            Can you explain [topic] in simple terms?
-            Help me prepare for the midterm exam
-            What are the key concepts I should focus on?
-            ```
+            **Example Prompts Guidelines:**
+            - One prompt per line, under 100 characters
+            - Show assistant capabilities
+            - Examples: "Explain [topic] in simple terms", "Help prepare for exam", "Analyze this source: [URL]"
             
-            **Research Assistant:**
-            ```
-            Analyze this source: [URL]
-            Help me fact-check this claim
-            What citation format should I use?
-            ```
-            """)
-        
-        with gr.Accordion("🔧 Settings & Configuration", open=False):
-            gr.Markdown("""
-            ### Configuration Structure
-            
-            **Main Fields:**
-            - Space Title & Description
-            - Model Selection
-            - API Key Variable
-            - Access Code (optional)
-            
-            **Assistant Setup:**
-            - System Prompt
-            - Template Selection
-            - URL Grounding (2-4 URLs)
-            - Example Prompts
-            
-            **Advanced Settings:**
-            - Temperature (0.0-2.0)
-            - Max Tokens (50-4096)
-            
-            **URL Grounding (Static)**
-            - 2-4 URLs for consistent context
-            - Content cached during generation
-            - Great for syllabi, policies, references
-            """)
-        
-        with gr.Accordion("🎛️ Advanced Settings", open=False):
-            gr.Markdown("""
-            ### Model Parameters
-            
-            **Temperature (0.0 - 2.0)**
-            - **0.0-0.3**: Focused, deterministic
-            - **0.4-0.7**: Balanced (recommended)
-            - **0.8-1.2**: Creative, varied
-            - **1.3-2.0**: Highly creative
-            
-            **Max Response Tokens (50-4096)**
-            - **50-200**: Short answers
-            - **200-750**: Medium (recommended: 750)
-            - **750-1500**: Detailed explanations
-            - **1500+**: Extended analysis
-            
-            **Token Notes:**
-            - Includes input (prompt + context) and output
-            - URLs increase input tokens
-            - Consider costs with high limits
+            **Advanced Parameters:**
+            - **Temperature (0.0-2.0)**: 0.0-0.3 (focused), 0.4-0.7 (balanced), 0.8+ (creative)
+            - **Max Tokens (50-4096)**: 750 recommended for balanced responses
+            - **API Key Variable**: Default `OPENROUTER_API_KEY`
+            - **Access Code**: Optional student protection
             """)
 
-        with gr.Accordion("🔬 Preview Tab Usage", open=False):
+        with gr.Accordion("🔬 Preview & Testing", open=False):
             gr.Markdown("""
-            ### Testing Before Deployment
-            
-            **Preview Features:**
-            - Real API integration
-            - Configuration display
-            - URL testing (up to 4 URLs)
-            - Chat export
-            - Clear function
+            ### Pre-Deployment Testing
             
             **Preview Steps:**
             1. Complete Configuration tab setup
             2. Click "Preview Deployment Package"
-            3. Test chat interface
-            4. Test URL grounding
-            5. Export conversations for analysis
+            3. Test chat interface and URL grounding
+            4. Export conversations for documentation
             
-            **Requirements:**
-            - Set `OPENROUTER_API_KEY` environment variable
-            - Without API key: shows configuration only
+            **Requirements:** Set `OPENROUTER_API_KEY` environment variable for full testing
             
-            **Best Practices:**
-            - Test various query types
-            - Verify URL grounding works
-            - Confirm system prompt behavior
-            - Export conversations as documentation
+            **Test Checklist:**
+            - Various query types and assistant responses
+            - URL grounding functionality (if enabled)
+            - System prompt behavior matches expectations
+            - Example prompts work correctly
             """)
         
-        with gr.Accordion("🚀 Deployment Process", open=False):
+        with gr.Accordion("🚀 HuggingFace Space Deployment", open=False):
             gr.Markdown("""
-            ### Deployment Guide
+            ### Complete Deployment Workflow
             
-            **Steps:** Generate → Create Space → Add Secrets → Go Live
-            
-            **1. Generate & Upload**
-            - Click "Generate Deployment Package", download zip
-            - Create Space at huggingface.co/spaces (Gradio SDK)
-            - Upload `app.py` and `requirements.txt`
-            
-            **2. Add API Key**
-            - Settings → Variables and secrets → New secret
-            - Name: `OPENROUTER_API_KEY`
-            - Value: Your API key (starts with `sk-or-`)
+            **Overview:** Generate Package → Create Space → Upload Files → Configure Secrets → Monitor Build → Verify Configuration
+            """)
             
-            **3. Access Control (Optional)**
-            - Add secret: `SPACE_ACCESS_CODE`
-            - Students enter code to access chatbot
-            - Delete secret to disable protection
+            with gr.Accordion("Step 1: Generate & Create Space", open=False):
+                gr.Markdown("""
+                **1.1 Generate Deployment Package**
+                - Click "Generate Deployment Package" and download zip
+                - Extract files: `app.py`, `config.json`, `requirements.txt`, `README.md`
+                
+                **1.2 Create New Space**
+                - Go to [huggingface.co/spaces](https://huggingface.co/spaces)
+                - Click "New Space"
+                - Choose Gradio SDK
+                - Select hardware (CPU Basic is free)
+                """)
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-25.png",
+                            label="Space Creation Form",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-24.png",
+                            label="Hardware Selection",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+            
+            with gr.Accordion("Step 2: Upload Files", open=False):
+                gr.Markdown("""
+                **2.1 Upload Project Files**
+                - Navigate to Files tab
+                - Click "Upload files" or drag and drop
+                - Upload: `app.py`, `config.json`, `requirements.txt`
+                - Commit directly to main branch
+                """)
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-13.png",
+                            label="File Upload Interface",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-29.png",
+                            label="Files After Upload",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+            
+            with gr.Accordion("Step 3: Configure API Secrets", open=False):
+                gr.Markdown("""
+                **3.1 Add Required Secrets**
+                - Go to Settings → Variables and secrets
+                - Click "New secret"
+                - **Required:** `OPENROUTER_API_KEY` with your API key
+                - **Optional:** `SPACE_ACCESS_CODE` for access control
+                """)
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-7.png",
+                            label="API Key Secret Configuration",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-9.png",
+                            label="Settings Variables and Secrets",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+            
+            with gr.Accordion("Step 4: Monitor Build & Verify Configuration", open=False):
+                gr.Markdown("""
+                **4.1 Build Monitoring**
+                - Space will show "Building..." status
+                - Monitor build logs for errors
+                - Wait 1-3 minutes for completion
+                
+                **4.2 Configuration Verification**
+                - Check Configuration Status panel
+                - API Key should show "Configured and valid" ✅
+                - Test chat interface with example prompts
+                """)
+                
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-1.png",
+                            label="Build Process",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img 2/image-8.png",
+                            label="Successful Configuration",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                
+                gr.Markdown("""
+                **Configuration Status Indicators:**
+                - ❌ Red X: API key not configured or invalid
+                - ✅ Green check: All settings configured correctly
+                - 🔄 Building: Space is updating with new changes
+                """)
+        
+        with gr.Accordion("📝 README Customization", open=False):
+            gr.Markdown("""
+            ### Space Metadata and Configuration
+            
+            **YAML Frontmatter in README.md:**
+            - `sdk: gradio` - Specifies Gradio framework
+            - `app_file: app.py` - Main application file
+            - `license: mit` or `gpl-3.0` - License selection
+            - Space description and usage instructions
+            
+            **Customization Options:**
+            - Update Space description and title
+            - Add usage instructions for students
+            - Include course-specific information
+            - Link to additional resources
             """)
             
-            # Add the secret configuration image (flush left)
             with gr.Row():
-                with gr.Column(scale=1):
+                with gr.Column():
                     gr.Image(
-                        value="https://drive.google.com/uc?export=view&id=1z67BZrYlJkpvHJ0Dp6vvIWAkN2iwUxCv",
-                        label="HuggingFace Secret Configuration Interface",
-                        show_label=False,
+                        value="img/img 2/image-2.png",
+                        label="README.md Editing Interface",
+                        show_label=True,
                         interactive=False,
-                        width=400,
-                        height=300,
+                        width=500,
                         container=False
                     )
-                with gr.Column(scale=2):
-                    gr.Markdown("""
-                    **Secret Configuration Interface:**
-                    - **Name**: Your variable name (e.g., `OPENROUTER_API_KEY`)
-                    - **Value**: Your API key or access code
-                    - **Add** button to save the secret
-                    
-                    **Required Secrets:**
-                    - `OPENROUTER_API_KEY`: Your API key (always required)
-                    - `SPACE_ACCESS_CODE`: Access code (only if using access control)
-                    """)
-            
-            gr.Markdown("""
-            **4. Deploy & Test**
-            - Wait for build (1-2 minutes)
-            - Test with example prompts
-            - Share URL when working
-            """)
         
         with gr.Accordion("🔧 Troubleshooting", open=False):
             gr.Markdown("""
             ### Common Issues and Solutions
             
-            **"Please set your API key" message**
-            - Check that you added the API key secret in Space settings
-            - Verify the secret name matches your configuration
-            - Ensure your OpenRouter account has credits
-            
-            **Building Failed**
-            - Check `requirements.txt` formatting (no extra spaces/characters)
-            - Verify all required dependencies are listed
-            - Try reuploading files if build gets stuck
-            
-            **Error 401 (Unauthorized)**
-            - Invalid API key or incorrect secret name
-            - Check OpenRouter account status and credits
+            **Configuration Status Shows Red X:**
+            - Verify API key secret name matches configuration (usually `OPENROUTER_API_KEY`)
+            - Check OpenRouter account has credits
             - Regenerate API key if needed
             
-            **Error 429 (Too Many Requests)**
-            - Rate limit exceeded
-            - Wait a few minutes before trying again
-            - Consider upgrading OpenRouter plan for higher limits
+            **Build Failed:**
+            - Check `requirements.txt` formatting (no extra spaces)
+            - Try reuploading files if build gets stuck
+            - Monitor build logs for specific errors
             
-            **Access code not working**
-            - Verify `SPACE_ACCESS_CODE` secret is set correctly
-            - Check for typos in the access code
-            - Case-sensitive matching
+            **API Errors:**
+            - **401 Unauthorized**: Invalid API key or incorrect secret name
+            - **429 Rate Limited**: Wait a few minutes, consider upgrading OpenRouter plan
             
-            **URLs not fetching content**
-            - Check URLs are publicly accessible
-            - Some sites block automated requests
-            - Verify dynamic URL fetching is enabled if needed
+            **Access Issues:**
+            - **Access code not working**: Verify `SPACE_ACCESS_CODE` secret is set correctly (case-sensitive)
+            - **URLs not fetching**: Check URLs are publicly accessible, some sites block automated requests
             """)
         
         with gr.Accordion("📚 Additional Resources", open=False):