Update docs.md

docs.md

@@ -17,6 +17,12 @@ Welcome to ChatUI Helper! This tool helps you create customizable AI chat interf
 - OpenRouter API key
 - Basic understanding of AI assistants
 
+<img src="img/march.png" alt="March of Intellect by Robert Seymour" width="500">
+<i>"March of the Intellect" by Robert Seymour (c.1828)</i>
+
+---
+---
+
 ## 📝 Step 1: Configure & Preview Your Space
 
 ### Configuration Tab Overview
@@ -95,7 +101,7 @@ Configure your assistant through various sections in the Configuration tab, then
 - Assistant will cite specific URLs when using grounded information
 - Use the ➕/➖ buttons to manage URLs
 
-<img src="img/grounding.png" alt="URL Grounding Configuration" width="500">
+<img src="img/grounding.png" alt="URL Grounding Configuration" width="300">
 
 </details>
 
@@ -118,7 +124,8 @@ Configure your assistant through various sections in the Configuration tab, then
   - Users will need this code to access
   - Leave unset for public access
 
-<img src="img/variables.png" alt="Variables and Secrets" width="400">
+<img src="img/settings.png" alt="Navigate to Settings" width="500">
+<img src="img/add-secret-api.png" alt="Variables and Secrets" width="500">
 
 </details>
 
@@ -151,19 +158,18 @@ Configure your assistant through various sections in the Configuration tab, then
 - Language-specific responses
 - Conversation export
 
-<img src="img/preview.png" alt="Preview Tab" width="400">
+<img src="img/preview-config.png" alt="Preview Configuration" width="500">
 
 </details>
 
+---
+---
+
 ## 🗳️ Step 2: Generate & Deploy
 
 ### Deployment Package & HuggingFace Space Setup
 
-**Package Contents:**
-- `app.py`: Complete Gradio application
-- `requirements.txt`: Python dependencies
-- `config.json`: Configuration backup
-- `README.md`: Deployment instructions
+**Package Contents:** `app.py` (application), `requirements.txt` (dependencies), `config.json` (configuration), `README.md` (overview)
 
 <details>
 <summary><b>Generate & Create Space</b></summary>
@@ -180,14 +186,14 @@ Configure your assistant through various sections in the Configuration tab, then
 
 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"
+4. Add your preferred licensing (e.g. gpl-3, mit)
+5. Select **Gradio** SDK
+6. Choose **Blank** template
+7. Select hardware (CPU Basic is free)
+8. Click "Create Space"
 
+<img src="img/create-space.png" alt="Click Create Space" width="500">
 <img src="img/space.png" alt="Deployed Space" width="500">
 
 </details>
@@ -206,9 +212,9 @@ Configure your assistant through various sections in the Configuration tab, then
    - `requirements.txt`
 5. Commit directly to main branch, and your Space will start building
 
-<img src="img/drop-files.png" alt="Drag and drop files" width="400">
+<img src="img/drop-files.png" alt="Drag and drop files" width="500">
 
-<img src="img/uploading.png" alt="Commit files to space" width="300">
+<img src="img/uploading.png" alt="Commit files to space" width="500">
 
 </details>
 
@@ -217,18 +223,16 @@ Configure your assistant through various sections in the Configuration tab, then
 
 **Navigate to Settings**
 1. Click the **Settings** tab in your Space
-2. Find **Variables and secrets** section
+<img src="img/settings.png" alt="Navigate to settings" width="500">
+2. Scroll down to **Variables and secrets** section
 3. Click **New secret**
-
-<img src="img/settings.png" alt="Navigate to settings" width="400">
+<img src="img/add-secret-api.png" alt="Adding API Key Secret" width="500">
 
 **Add Required Secret**
 - **Name**: `API_KEY` (or your configured variable name)
 - **Value**: Your OpenRouter API key
 - Must start with `sk-or-`
 
-<img src="img/add-secret-api.png" alt="Adding API Key Secret" width="400">
-
 **Add Optional Secrets (if desired)**
 - **HF_TOKEN**: Your HuggingFace token with write permissions
   - Enables the configuration editor in your Space
@@ -267,6 +271,9 @@ Configure your assistant through various sections in the Configuration tab, then
 
 </details>
 
+---
+---
+
 ## 🔧 Troubleshooting
 
 ### Common Issues and Solutions
@@ -323,14 +330,8 @@ Find solutions to common problems organized by category.
 <details>
 <summary><b>Preview Tab Not Working</b></summary>
 
-**Local Testing**
-- Set API_KEY in your local .env file
-- Format: `API_KEY=sk-or-your-key-here`
-- Restart the app after adding environment variable
-
 **Preview Issues**
 - Click "💬 Preview Configuration" first
-- Check browser console (F12) for JavaScript errors
 - Ensure all required fields are filled
 - Try refreshing the page
 
@@ -352,21 +353,8 @@ Find solutions to common problems organized by category.
 
 </details>
 
-<details>
-<summary><b>Space Not Loading</b></summary>
-
-**Infinite Loading**
-- Check Space logs for error messages
-- Common cause: Missing required secrets
-- Verify all files uploaded correctly
-
-**Gradio App Errors**
-- Component version mismatches
-- Update to latest Gradio version
-- Check for deprecated components
-- Review migration guides for Gradio 5.x
-
-</details>
+---
+---
 
 ## 📚 Additional Resources