fix: reorganize step 3 images to show settings and new secret steps clearly

support_docs.py

@@ -176,9 +176,38 @@ 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
@@ -200,38 +229,6 @@ 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("""