update ui: change button emojis, reorganize docs with accordions, fix broken images

app.py

@@ -252,20 +252,18 @@ class SpaceGenerator:
                         interactive=False  # Make non-editable
                     )
                 
-                # Instructions with images
+                # Instructions without broken images
                 with gr.Accordion("📖 Step-by-Step Instructions", open=False):
                     gr.Markdown(
-                        """**Step 1: Navigate to Settings**
+                        """### How to Configure Secrets in HuggingFace Spaces
                         
-                        Click on the ⚙️ Settings tab in your HuggingFace Space:
-                        
-                        ![Settings Tab](../img/huggingface-settings-tab.png)
+                        **Step 1: Navigate to Settings**
+                        - Go to your HuggingFace Space
+                        - Click on the ⚙️ **Settings** tab at the top
                         
                         **Step 2: Access Variables and Secrets**
-                        
-                        In the settings menu, you'll see a link to configure your secrets:
-                        
-                        ![Variables and Secrets](../img/huggingface-variables-secrets.png)
+                        - Scroll down to find **Variables and secrets** section
+                        - Click on **New secret** button
                         
                         **Step 3: Add Required Secrets**
                         
@@ -274,15 +272,17 @@ class SpaceGenerator:
                         1. **API_KEY** - Your OpenRouter API key (required)
                            - Get your key at: https://openrouter.ai/keys
                            - Value should start with `sk-or-`
+                           - This enables AI responses
                         
                         2. **HF_TOKEN** - Your HuggingFace token (optional)
                            - Enables automatic configuration updates
                            - Get your token at: https://huggingface.co/settings/tokens
-                           - Requires write permissions
+                           - Select "write" permission when creating token
                         
                         3. **ACCESS_CODE** - Password protection (optional)
                            - Set any password to restrict access
-                           - Share with authorized users only
+                           - Users will need this code to access your Space
+                           - Leave empty for public access
                         """
                     )
             
@@ -297,8 +297,8 @@ class SpaceGenerator:
             
             # Action Buttons
             with gr.Row():
-                preview_btn = gr.Button("👁️ Preview Configuration", variant="secondary")
-                generate_btn = gr.Button("Generate Deployment Package", variant="primary")
+                preview_btn = gr.Button("💬 Preview Configuration", variant="secondary")
+                generate_btn = gr.Button("🗳️ Generate Deployment Package", variant="primary")
             
             # Output Section
             with gr.Column(visible=False) as output_section:
@@ -802,7 +802,7 @@ class SpaceGenerator:
             'preview_ready': True
         }
         
-        gr.Info("Preview updated! Switch to the Preview tab to test your assistant.")
+        gr.Info("✅ Preview updated! ⬆️ Switch to the Preview tab to test your assistant.")
         return config
     
     def _generate_package(self, name, tagline, description, system_prompt, model,
@@ -940,48 +940,212 @@ huggingface-hub>=0.20.0"""
     
     def _get_support_docs(self):
         """Get support documentation content"""
-        return """## ChatUI Helper Workflow
-
-### Step 1: Configure Your Space
-**Configuration Tab** provides these sections:
-1. **📝 Quick Start Templates** - Choose from academic templates or start custom
-2. **🎯 Space Identity** - Set name, description, and theme
-3. **⚙️ System Configuration** - Define system prompt, model, and parameters
-4. **💡 Example Prompts** - Add sample interactions for users
-5. **🔗 URL Grounding** - Add context URLs (up to 10, first 2 are primary)
-6. **🔑 API Configuration** - Set required environment variables
-7. **📤 Upload Configuration** - Import existing config.json files
-
-### Step 2: Preview Your Assistant
-**Preview Tab** allows you to:
-- Test your configuration in real-time
+        return """# ChatUI Helper Documentation
+
+Welcome to ChatUI Helper! This tool helps you create customizable AI chat interfaces for deployment on HuggingFace Spaces.
+
+<details open>
+<summary><h2>🚀 Quick Start Guide</h2></summary>
+
+1. **Configure** your assistant using templates or custom settings
+2. **Preview** your configuration to test it works
+3. **Generate** your deployment package
+4. **Deploy** to HuggingFace Spaces
+
+</details>
+
+<details>
+<summary><h2>📝 Step 1: Configure Your Space</h2></summary>
+
+The **Configuration Tab** provides these sections:
+
+### 1. Quick Start Templates
+- Choose from pre-configured academic templates
+- Or start with "None (Custom)" for full control
+- Your custom values are preserved when switching templates
+
+### 2. Space Identity
+- **Assistant Name**: Your AI assistant's display name
+- **Theme**: Choose from Default, Soft, Glass, Monochrome, or Base
+- **Tagline**: Brief description (60 chars max) for the Space header
+- **Description**: Full markdown description for the README
+
+### 3. System Configuration
+- **System Prompt**: Define your assistant's behavior and knowledge
+- **Model**: Select from available OpenRouter models
+- **Temperature**: Control response creativity (0-2)
+- **Max Tokens**: Set response length limit (50-4096)
+
+### 4. Example Prompts
+- Add 3-5 sample prompts that showcase capabilities
+- These appear as quick-start buttons for users
+- Use the ➕/➖ buttons to add/remove examples
+
+### 5. URL Grounding
+- Add reference URLs for context (up to 10)
+- First 2 URLs are primary sources (always loaded)
+- Additional URLs are secondary references
+- Content is fetched and provided as context
+
+### 6. API Configuration
+- **API_KEY**: Required OpenRouter API key variable
+- **HF_TOKEN**: Optional for auto-configuration updates
+- **ACCESS_CODE**: Optional password protection
+
+### 7. Upload Configuration
+- Import existing config.json files
+- Quickly restore previous configurations
+
+</details>
+
+<details>
+<summary><h2>💬 Step 2: Preview Your Assistant</h2></summary>
+
+The **Preview Tab** allows you to:
+
+### Test Configuration
+- Sends real API requests using your local API key
+- Uses the exact configuration from Step 1
+- Displays responses in the chat interface
+
+### Features Available
 - Try example prompts
+- Upload files (if enabled)
 - Export conversation history
-- Validate API connections
+- View active configuration
+
+### API Key Setup
+- Set your OpenRouter API key as environment variable
+- Default variable name: `API_KEY`
+- Get your key at: https://openrouter.ai/keys
+
+</details>
+
+<details>
+<summary><h2>🗳️ Step 3: Generate Deployment Package</h2></summary>
 
-### Step 3: Generate Deployment Package
 Click **Generate Deployment Package** to create:
-- `app.py` - Complete Gradio application
-- `requirements.txt` - Dependencies
-- `config.json` - Configuration backup
-- `README.md` - Setup instructions
-
-### Required Secrets Setup
-In your HuggingFace Space settings:
-1. **API_KEY** (Required) - Your OpenRouter API key from https://openrouter.ai/keys
-2. **HF_TOKEN** (Optional) - Enables auto-configuration updates
-3. **ACCESS_CODE** (Optional) - Password protection
-
-### Template System
-- Switch between **None (Custom)** and academic templates
-- Custom values are preserved when switching templates
-- Templates include STEM, Business, Creative Writing, etc.
-
-### Troubleshooting
-- **Build errors**: Check requirements.txt compatibility
-- **API errors**: Verify API_KEY is set correctly  
-- **Access issues**: Ensure ACCESS_CODE matches configuration
-- **Template issues**: Custom values are cached when switching"""
+
+### Package Contents
+- **app.py**: Complete Gradio application
+- **requirements.txt**: Python dependencies
+- **config.json**: Configuration backup
+- **README.md**: Deployment instructions
+
+### Deployment Steps
+1. Download the generated ZIP file
+2. Create a new HuggingFace Space
+3. Upload all files from the package
+4. Configure secrets in Space settings
+
+</details>
+
+<details>
+<summary><h2>🔑 HuggingFace Secrets Setup</h2></summary>
+
+### Required Secret
+**API_KEY** (or your configured variable name)
+- Get from: https://openrouter.ai/keys
+- Must start with: `sk-or-`
+- Add in: Settings → Variables and secrets
+
+### Optional Secrets
+**HF_TOKEN**
+- Enables automatic configuration updates
+- Get from: https://huggingface.co/settings/tokens
+- Needs write permissions
+
+**ACCESS_CODE**
+- Password protects your Space
+- Set any password value
+- Share with authorized users only
+
+### How to Add Secrets
+1. Go to your Space Settings (⚙️ icon)
+2. Find "Variables and secrets" section
+3. Click "New secret"
+4. Enter the variable name and value
+5. Save your changes
+
+</details>
+
+<details>
+<summary><h2>🎨 Template System</h2></summary>
+
+### Available Templates
+- **STEM Adventure Games**: Interactive STEM learning
+- **Socratic Dialogue Partner**: Philosophical discussions
+- **Business Strategy Advisor**: Strategic planning assistant
+- **Creative Writing Coach**: Writing improvement helper
+- **Research Assistant**: Academic research support
+
+### Template Features
+- Pre-configured prompts and examples
+- Optimized model settings
+- Relevant grounding URLs
+- Domain-specific system prompts
+
+### Custom Values
+- Your custom settings are preserved
+- Switch templates without losing work
+- Return to "None (Custom)" to restore
+
+</details>
+
+<details>
+<summary><h2>🔧 Troubleshooting</h2></summary>
+
+### Common Issues
+
+**Build Errors**
+- Check requirements.txt compatibility
+- Ensure Gradio version ≥ 5.39.0
+- Verify all dependencies are available
+
+**API Errors**
+- Verify API_KEY is set correctly
+- Check API key starts with 'sk-or-'
+- Ensure you have API credits
+
+**Access Issues**
+- ACCESS_CODE must match exactly
+- Check for extra spaces in password
+- Verify secret is properly saved
+
+**Preview Not Working**
+- Set API_KEY in local environment
+- Check browser console for errors
+- Ensure configuration is saved
+
+</details>
+
+<details>
+<summary><h2>💡 Tips & Best Practices</h2></summary>
+
+### System Prompts
+- Be specific about capabilities
+- Include examples of desired behavior
+- Set clear boundaries and limitations
+
+### Model Selection
+- Gemini Flash: Fast, cost-effective
+- Claude Sonnet: High quality reasoning
+- GPT-4: Broad knowledge base
+- Llama: Open source alternative
+
+### URL Grounding
+- Use authoritative sources
+- Keep URLs up to date
+- Primary URLs load on every request
+- Secondary URLs provide additional context
+
+### Security
+- Never commit API keys to code
+- Use environment variables only
+- Enable ACCESS_CODE for sensitive Spaces
+- Regularly rotate API keys
+
+</details>"""
     
     def _create_readme(self, title, tagline, description, model, api_key_var, access_code):
         """Create README.md content"""