merge: update support_docs with formatting improvements and file order fix

support_docs.py

@@ -13,7 +13,7 @@ def create_support_docs():
         gr.Markdown("# ChatUI Helper Documentation")
         gr.Markdown("Welcome to ChatUI Helper! This tool helps you create customizable AI chat interfaces for deployment on HuggingFace Spaces.")
         
-        with gr.Accordion("🚀 Quick Start Guide", open=True):
+        with gr.Accordion("📖 Quick Start Guide", open=True):
             gr.Markdown("""
             ## Quick Start Guide
 
@@ -149,7 +149,7 @@ def create_support_docs():
                 **2.1 Upload Project Files**
                 - Navigate to Files tab
                 - Click "Upload files" or drag and drop
-                - Upload: `app.py`, `config.json`, `requirements.txt`
+                - Upload: `README.md`, `app.py`, `config.json`, `requirements.txt`
                 - Commit directly to main branch
                 """)
                 
@@ -176,50 +176,20 @@ def create_support_docs():
             with gr.Accordion("Step 3: Configure API Secrets", open=False):
                 gr.Markdown("""
                 **3.1 Configure HuggingFace Spaces Secrets**
+                - Go to Settings → Variables and secrets
+                - Click "New secret"
                 
-                **Step 1: Go to Settings**
-                - Navigate to your Space's Settings tab
-                """)
-                
-                # Image for Settings navigation
-                gr.Image(
-                    value="img/img4.png",
-                    label="Go to Settings",
-                    show_label=True,
-                    interactive=False,
-                    width=600,
-                    container=True
-                )
-                
-                gr.Markdown("""
-                **Step 2: Click "New secret"**
-                - In the Variables and secrets section
-                - Click the "New secret" button
-                """)
-                
-                # Image for New secret button
-                gr.Image(
-                    value="img/img3.png",
-                    label="Click New Secret",
-                    show_label=True,
-                    interactive=False,
-                    width=600,
-                    container=True
-                )
-                
-                gr.Markdown("""
                 **Required Secret:**
-                - **API_KEY** (or your configured variable name)
-                  - Get from: https://openrouter.ai/keys
+                - `API_KEY` (or your configured variable name)
                   - Must start with: `sk-or-`
                   - Add in: Settings → Variables and secrets
                 
                 **Optional Secrets:**
-                - **HF_TOKEN**: Enables automatic configuration updates
+                - `HF_TOKEN`: Enables automatic configuration updates
                   - Get from: https://huggingface.co/settings/tokens
                   - Needs write permissions
-                
-                - **ACCESS_CODE**: Password protects your Space
+
+                - `ACCESS_CODE`: Password protects your Space
                   - Set any password value
                   - Share with authorized users only
                 
@@ -229,6 +199,38 @@ def create_support_docs():
                 - To disable access control, delete the `SPACE_ACCESS_CODE` secret entirely
                 - Do NOT set an empty value - either set a code or don't create the secret at all
                 """)
+                
+                with gr.Row():
+
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img4.png",
+                            label="Navigating to Settings",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                        
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img4.png",
+                            label="Settings Variables and Secrets",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
+                        
+                    with gr.Column(scale=1):
+                        gr.Image(
+                            value="img/img3.png",
+                            label="API Key Secret Configuration",
+                            show_label=True,
+                            interactive=False,
+                            width=400,
+                            container=False
+                        )
             
             with gr.Accordion("Step 4: Monitor Build & Verify Configuration", open=False):
                 gr.Markdown("""