update support_docs.py: remove image refs, reorganize structure, fix outdated content

support_docs.py

@@ -32,100 +32,113 @@ def create_support_docs():
         ---
         """)
         
-        with gr.Accordion("📝 Step 1: Configure Your Space", open=False):
+        with gr.Accordion("📝 Step 1: Configure & Preview Your Space", open=False):
             gr.Markdown("""
-            ### Configuration Steps
-    
-            #### 1a. Templates & Identity
-            Included are several pre-populated templates to get you started with playful (but applied) configurations. Or start with the "None (Custom)" option for a blank slate. Personalize the chat u/i and giving it a name, header (max 60 char) and a markdown description for the `README.md` file, then select from Gradio themes like Default, Soft, Glass, Monochrome, or Base.
-            """)
+            ### Configuration Tab Overview
             
-            with gr.Row():
-                gr.Image(
-                    value="img/quick-start-template.png",
-                    label="Templates & Identity Configuration",
-                    interactive=True,
-                    width=600
-                )
-    
-            gr.Markdown("""
-            #### 1b. Model Configuration
-            Craft a system prompt that steers your model's behavior using a well-defined role, context and audience, code of conduct, and/or terms of engagement——think of guardrails as creative constraints. Afterward select a model ID from the menu of options, then experiment with sampling parameters, adjusting temperature (values from 0 to 2) to control response variability and/or setting a token response limit (between 50-4096) to cap output.
+            Configure your assistant through various sections in the Configuration tab, then test it in the Preview tab before generating your deployment package.
             """)
             
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Image(
-                        value="img/model-selection.jpg",
-                        label="System Prompt Configuration",
-                        interactive=False,
-                        width=400
-                    )
-                with gr.Column(scale=1):
-                    gr.Image(
-                        value="img/system-configuration.jpeg",
-                        label="Model Selection",
-                        interactive=False,
-                        width=400
-                    )
-    
-            gr.Markdown("""
-            #### 1c. Example Prompts
-            Add 3 to 5 starter prompts that showcase the purpose and design of your space. These examples appear as quick-start buttons for users to try and meant to help them get started.
-            """)
+            with gr.Accordion("Step 1a: Templates & Identity", open=False):
+                gr.Markdown("""
+                **Quick Start Templates**
+                - Choose from pre-configured academic templates (Socratic Research Chat, STEM Adventure Games, etc.)
+                - Or select "None (Custom)" for a blank slate
+                
+                **Space Identity**
+                - **Assistant Name**: Give your assistant a memorable name
+                - **Tagline**: Brief description (max 60 characters) for HuggingFace YAML frontmatter
+                - **Description**: Full markdown description for the README
+                - **Theme**: Select from Gradio themes (Default, Soft, Glass, Monochrome, Base)
+                """)
             
-            with gr.Row():
-                gr.Image(
-                    value="img/example-prompts.png",
-                    label="Example Prompts Configuration",
-                    interactive=True,
-                    width=600
-                )
-    
-            gr.Markdown("""
-            #### 1d. URL Grounding
-            Add up to 10 reference URLs that ground the model in the context of different webpages. The first 2 URLs function as primary sources that will always be loaded with each query, while other URLs serve as supplementary context. Note that only 4096 total characters from URLs are appended to the system prompt.
-    
-            #### 1e. API Key and HuggingFace Token
+            with gr.Accordion("Step 1b: System Configuration", open=False):
+                gr.Markdown("""
+                **System Prompt**
+                - Define your assistant's role, context, and behavior
+                - Set guardrails and creative constraints
+                - Specify audience and terms of engagement
+                
+                **Model Selection**
+                - Choose from available models (Gemini, Claude, GPT, Mistral, etc.)
+                - Or enter a custom model ID
+                
+                **Language Support**
+                - Configure language through system prompt instructions
+                - Assistant can be instructed to respond exclusively in any language
+                - See "Language Learning Partner" template for Italian example
+                
+                **Sampling Parameters**
+                - **Temperature** (0-2): Controls response variability
+                - **Max Tokens** (50-4096): Limits response length
+                """)
             
-            - **Required**: Provide the required OpenAI-standard API key (`sk-`) and name for its variable (`API_KEY`) to call the model through a provider like OpenRouter.
-            - **Recommended**: Add a HuggingFace token (`HF_TOKEN`) to make your space customizable over time through a configuration editor. 
-            - **Optional**: Set an optional password (`ACCESS_CODE`) to limit who can access your space. Any value goes.
-    
-            #### 1f. Upload `config.json`
-            Done this before? Upload your `config.json` files to redeploy your Space with new settings and recent versions.
-            """)
+            with gr.Accordion("Step 1c: Example Prompts", open=False):
+                gr.Markdown("""
+                **Example Prompts**
+                - Add 3-5 starter prompts that showcase your assistant's capabilities
+                - These appear as quick-start buttons for users
+                - Help users understand how to interact with your assistant
+                - Use the ➕/➖ buttons to add or remove examples
+                """)
             
-            with gr.Row():
-                gr.Image(
-                    value="img/upload-config.png",
-                    label="Upload Configuration",
-                    interactive=False,
-                    width=600
-                )
-
-        with gr.Accordion("💬 Step 2: Preview Your Assistant", open=False):
-            gr.Markdown("""
-            In the Preview tab test your assistant with real-time requests, try example prompts, upload files if enabled, and export your conversation history. Tinker with a variety of queries, models, and configurations to find the most appropriate fit for you and your people.
-            """)
+            with gr.Accordion("Step 1d: URL Grounding", open=False):
+                gr.Markdown("""
+                **Grounding URLs**
+                - Add up to 10 reference URLs to provide context
+                - **Primary Sources (URLs 1-2)**: Always loaded, up to 8000 characters each
+                - **Secondary Sources (URLs 3+)**: Supplementary context, up to 2500 characters each
+                - URLs are fetched and included in the system prompt
+                - Assistant will cite specific URLs when using grounded information
+                - Use the ➕/➖ buttons to manage URLs
+                """)
+            
+            with gr.Accordion("Step 1e: API Configuration", open=False):
+                gr.Markdown("""
+                **Required Secrets**
+                - **API_KEY**: Your OpenRouter API key (must start with `sk-or-`)
+                  - Get from: https://openrouter.ai/keys
+                  - Configure in HuggingFace Space settings
+                
+                **Optional Secrets**
+                - **HF_TOKEN** (Recommended): Enables configuration editor in deployed Space
+                  - Get from: https://huggingface.co/settings/tokens
+                  - Select "write" permissions when creating
+                  - Allows updating configuration without redeployment
+                
+                - **ACCESS_CODE**: Password-protect your Space
+                  - Set any password value
+                  - Users will need this code to access
+                  - Leave unset for public access
+                """)
+            
+            with gr.Accordion("Step 1f: Upload Configuration", open=False):
+                gr.Markdown("""
+                **Upload Existing Configuration**
+                - Have a previous `config.json` file?
+                - Use the "Upload Configuration" accordion
+                - Drag and drop or click to upload
+                - All settings will be restored automatically
+                """)
             
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Image(
-                        value="img/preview-config.png",
-                        label="Preview Configuration",
-                        interactive=False,
-                        width=400
-                    )
-                with gr.Column(scale=1):
-                    gr.Image(
-                        value="img/preview-config-screen.png",
-                        label="Preview Interface",
-                        interactive=False,
-                        width=400
-                    )
+            with gr.Accordion("Step 1g: Preview Your Assistant", open=False):
+                gr.Markdown("""
+                **Testing in Preview Tab**
+                - Click "💬 Preview Configuration" to prepare your assistant
+                - Switch to the Preview tab
+                - Test with real queries and example prompts
+                - Upload files if file upload is enabled
+                - Export conversation history as markdown
+                
+                **Preview Features**
+                - Real-time API responses (requires API key in environment)
+                - Grounding context from configured URLs
+                - Language-specific responses
+                - File upload handling
+                - Conversation export
+                """)
         
-        with gr.Accordion("🗳️ Step 3: Generate & Deploy", open=True):
+        with gr.Accordion("🗳️ Step 2: Generate & Deploy", open=True):
             gr.Markdown("""
             ### Deployment Package & HuggingFace Space Setup
             
@@ -134,121 +147,86 @@ def create_support_docs():
             - `requirements.txt`: Python dependencies
             - `config.json`: Configuration backup
             - `README.md`: Deployment instructions
-
-            **Deployment Overview:** Generate Package and Create Space → Upload Files and Configure Secrets → Monitor Build and Verify
+            
+            **Deployment Overview:** Generate Package → Create Space → Upload Files → Configure Secrets → Monitor Build
             """)
             
-            with gr.Accordion("Step 3a: Generate & Create Space", open=False):
+            with gr.Accordion("Step 2a: Generate & Create Space", open=False):
                 gr.Markdown("""
                 **Generate Deployment Package**
-                - Click "🗳️ Generate Deployment Package" in Configuration tab
-                - Download the generated ZIP file
-                - Extract files: `app.py`, `config.json`, `requirements.txt`, `README.md`
+                1. Click "🗳️ Generate Deployment Package" in Configuration tab
+                2. Download the generated ZIP file
+                3. Extract files: `app.py`, `config.json`, `requirements.txt`, `README.md`
                 
                 **Create New Space**
-                - Go to [huggingface.co/spaces](https://huggingface.co/spaces)
-                - Click "New Space"
-                - Choose Gradio SDK (Blank)
-                - Select hardware (CPU Basic is free)
+                1. Go to [huggingface.co/spaces](https://huggingface.co/spaces)
+                2. Click "Create new Space"
+                3. Name your Space
+                4. Select **Gradio** SDK
+                5. Choose **Blank** template
+                6. Select hardware (CPU Basic is free)
+                7. Click "Create Space"
                 """)
-                
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/new-space-gradio-blank.png",
-                            label="Space Creation Form",
-                            interactive=False,
-                            width=400
-                        )
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/space-hardware.png",
-                            label="Hardware Selection",
-                            interactive=False,
-                            width=400
-                        )
             
-            with gr.Accordion("Step 3b: Upload Files", open=False):
+            with gr.Accordion("Step 2b: Upload Files", open=False):
                 gr.Markdown("""
-                **2.1 Upload Project Files**
-                - Navigate to Files tab
-                - Click "Upload files" or drag and drop
-                - Upload: `README.md`, `app.py`, `config.json`, `requirements.txt`
-                - Commit directly to main branch
+                **Upload Project Files**
+                1. Navigate to the **Files** tab in your new Space
+                2. Click "Add file" → "Upload files"
+                3. Select all 4 files from your extracted package:
+                   - `README.md`
+                   - `app.py`
+                   - `config.json`
+                   - `requirements.txt`
+                4. Commit directly to main branch
+                5. Your Space will automatically start building
                 """)
-                
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/upload-files.png",
-                            label="File Upload",
-                            interactive=False,
-                            width=400
-                        )
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/highlight-files.png",
-                            label="Files After Upload",
-                            interactive=False,
-                            width=400
-                        )
             
-            with gr.Accordion("Step 3c: Configure API Secrets", open=False):
+            with gr.Accordion("Step 2c: Configure Secrets", open=False):
                 gr.Markdown("""
-                **Configure HuggingFace Spaces Secrets**
-                - Go to Settings → Variables and secrets
-                - Click "New secret"
+                **Navigate to Settings**
+                1. Click the **Settings** tab in your Space
+                2. Find **Variables and secrets** section
+                3. Click **New secret**
                 
-                **Required Secret:**
-                - `API_KEY` (or your configured variable name)
-                  - Must start with: `sk-or-`
-                  - Add in: *Settings* → *Variables and secrets*
+                **Add Required Secret**
+                - **Name**: `API_KEY` (or your configured variable name)
+                - **Value**: Your OpenRouter API key
+                - Must start with `sk-or-`
                 
-                **Optional Secrets:**
-                - `HF_TOKEN` (Recommended): Enables persistent updates & customization 
+                **Add Optional Secrets (if desired)**
+                - **HF_TOKEN**: Your HuggingFace token with write permissions
+                  - Enables the configuration editor in your Space
                   - Get from: https://huggingface.co/settings/tokens
-                  - Enable *write* permissions
-
-                - `ACCESS_CODE`: Password protects your Space
-                  - To enable add secret `ACCESS_CODE` with a custom value
-                  - To disable delete `ACCESS_CODE` secret entirely from *Variables and Secrets*
-                  - Share with authorized users only
                 
-                **Access Control Notes:**
-                - Do NOT set an empty value - either set a code or don't create the secret at all
+                - **ACCESS_CODE**: Any password value
+                  - Restricts access to authorized users
+                  - Do NOT set an empty value
+                  - Either set a code or don't create the secret
                 """)
-                
-                with gr.Row():
-
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/go-to-settings.png",
-                            label="Navigating to Settings",
-                            interactive=False,
-                            width=400
-                        )
-                        
-                    with gr.Column(scale=1):
-                        gr.Image(
-                            value="img/variables-and-secrets.png",
-                            label="API Key Secret Configuration",
-                            interactive=False,
-                            width=400
-                        )
             
-            with gr.Accordion("Step 3d: Verify Build & Iterate", open=False):
+            with gr.Accordion("Step 2d: Verify & Iterate", open=False):
                 gr.Markdown("""
-                **Verify Build**
-                - Space will show "Building..." status
-                - Monitor build logs for errors
-                - Wait 1-3 minutes for completion
-                - Test chat interface with example prompts
-                            
-                **Iterate Configuration**
-                - Use the configuration editor to make changes
-                - Click "Save Configuration" to update
-                - Wait for the space to rebuild
-                - Test again with new settings
+                **Monitor Build Process**
+                1. Return to the **App** tab
+                2. Watch for "Building..." status
+                3. Check build logs for any errors
+                4. Wait 1-3 minutes for completion
+                5. Space will show "Running" when ready
+                
+                **Test Your Deployment**
+                1. Try the example prompts
+                2. Test different types of queries
+                3. Verify grounding URLs are working
+                4. Check language responses (if configured)
+                
+                **Iterate Configuration (with HF_TOKEN)**
+                1. Go to ⚙️ Configuration tab in your Space
+                2. Enter your HF_TOKEN to authenticate
+                3. Modify settings as needed
+                4. Click "Save Configuration"
+                5. Space will automatically rebuild
+                6. Test new configuration
                 """)
         
         gr.Markdown("""