# Quick Setup Guide - AIPlot Web Interface

Get your web interface running in **5 minutes**! ⚡

---

## 🎯 Prerequisites

Before you start, make sure you have:

- ✅ n8n installed and running
- ✅ `aiplot_claude_workflow_fixed.json` imported to n8n
- ✅ Workflow activated in n8n
- ✅ Webhook URL from n8n (looks like: `http://localhost:5678/webhook/aiplot-generate`)

---

## 📋 Step-by-Step Setup

### Step 1: Get Your Webhook URL (2 minutes)

1. **Open n8n** in your browser
2. **Find the AIPlot workflow** (click on it)
3. **Click the "Webhook" node** (first node in workflow)
4. **Copy the URL** shown:
   - For testing: Use "Test URL"
   - For production: Use "Production URL"

**Example URL:**
```
http://localhost:5678/webhook/aiplot-generate
```

💡 **Tip:** Make sure the workflow is **activated** (toggle switch should be green)!

---

### Step 2: Open the Web Interface (1 minute)

**Option A: Direct File (Easiest)**

1. Navigate to the `web` folder
2. Double-click `index.html`
3. It opens in your browser!

**Option B: Local Server (Better)**

In terminal/command prompt:
```bash
cd n8nplot/web
python -m http.server 8080
```

Then open: `http://localhost:8080`

---

### Step 3: Configure Webhook URL (30 seconds)

1. Look for the **Configuration** section at the top
2. Paste your webhook URL in the input field
3. The URL is **automatically saved** for next time!

---

### Step 4: Generate Your First Scene (1 minute)

**Quick Test:**

1. Click on **"🏝️ Tropical Paradise"** example chip
2. Click **"Generate Unity Scene"** button
3. Wait 3-5 seconds ⏳
4. See your results! 🎉

**Or Write Your Own:**

Type something like:
```
Create a peaceful forest with 10 pine trees and rocks
```

Press **Ctrl+Enter** or click the generate button.

---

## ✅ Success Checklist

After generation, you should see:

- ✅ **Scene Details Card** with environment and mood
- ✅ **Statistics** showing number of objects
- ✅ **Download Button** to get XML file
- ✅ **Green success message** at top

**Example Output:**
```
✅ Scene generated successfully!

🌍 Environment: tropical
💫 Mood: peaceful
🎯 Objects: 18
📄 File Size: 2.4 KB
```

---

## 🎮 Using the Generated Scene

1. **Click "Download XML File"** button
2. **Save the `.txt` file** to your computer
3. **Open Unity 3D**
4. **Import the scene** using your Unity import tool
5. **Your scene loads** with all objects placed!

---

## 🔧 Common Issues & Fixes

### Issue 1: "Failed to generate scene: Network error"

**Problem:** Cannot connect to n8n

**Solutions:**
```bash
# Check if n8n is running
# Open: http://localhost:5678

# Make sure workflow is activated
# Toggle switch should be green

# Verify webhook URL is correct
# Copy it again from the Webhook node
```

---

### Issue 2: "CORS error" in browser console

**Problem:** Browser blocking cross-origin requests

**Quick Fix for Development:**

1. Open n8n workflow
2. Find "Respond to Webhook" node (last node)
3. Click on it
4. Add this to "Response Headers":

```json
{
  "Access-Control-Allow-Origin": "*"
}
```

5. Save and test again

**Better Fix:**

Run web interface and n8n on same domain or use a local server.

---

### Issue 3: Page loads but looks broken

**Problem:** CSS file not loading

**Fix:**
```bash
# Make sure all files are in same folder:
web/
  ├── index.html
  ├── styles.css  ← Check this exists
  └── script.js   ← And this

# Clear browser cache
# Press: Ctrl + Shift + R (Windows)
# Or: Cmd + Shift + R (Mac)
```

---

### Issue 4: Button doesn't do anything

**Problem:** JavaScript not running

**Check:**
1. Open browser console (Press F12)
2. Look for red errors
3. Most common: Webhook URL is wrong
4. Try with "Test URL" instead of "Production URL"

**Debug:**
```bash
# Test webhook directly with curl
curl -X POST http://localhost:5678/webhook/aiplot-generate \
  -H "Content-Type: application/json" \
  -d '{"prompt": "test scene"}'

# Should return JSON with XML content
```

---

## 🎨 Customization Quick Tips

### Change Default Webhook URL

Edit `index.html`, find this line (~line 43):
```html
<input 
    id="webhookUrl" 
    value="http://localhost:5678/webhook/aiplot-generate"
>
```

Change to your URL:
```html
<input 
    id="webhookUrl" 
    value="https://your-n8n.com/webhook/aiplot-generate"
>
```

### Add Your Own Examples

Edit `index.html`, find `<div class="example-chips">` (~line 71):

```html
<button class="example-chip" data-prompt="Your custom prompt here">
    🎨 Your Label
</button>
```

### Change Colors/Theme

Edit `styles.css`, change `:root` variables (~line 9):

```css
:root {
    --primary-color: #6366f1;  /* Change this color */
    --primary-hover: #4f46e5;   /* And this for hover */
}
```

Try: `#ff6b6b` (red), `#4ecdc4` (teal), `#95e1d3` (mint)

---

## 📱 Mobile Access

### Access from Phone/Tablet

**If running locally:**

1. Find your computer's IP address:
   ```bash
   # Windows
   ipconfig
   
   # Mac/Linux
   ifconfig
   ```

2. On your phone browser, visit:
   ```
   http://YOUR_IP_ADDRESS:8080
   ```

   Example: `http://192.168.1.100:8080`

3. Make sure phone and computer are on **same WiFi network**

---

## 🚀 Production Deployment

### Deploy to Netlify (Free, 5 minutes)

1. Go to [netlify.com](https://netlify.com)
2. Sign up (free)
3. Click "Add new site" → "Deploy manually"
4. Drag the `web` folder into the upload area
5. Wait 30 seconds
6. Get your live URL: `your-site.netlify.app`

**Update webhook URL:**
- Must use public n8n instance (not localhost)
- Update the default URL in `index.html`

### Deploy to GitHub Pages (Free)

1. Create GitHub repository
2. Upload contents of `web` folder
3. Go to Settings → Pages
4. Select main branch
5. Access at: `username.github.io/repo-name`

---

## 🎯 Next Steps

Once everything works:

1. ✅ **Test different prompts** to see variety
2. ✅ **Import generated scenes** into Unity
3. ✅ **Share the web interface** with your team
4. ✅ **Customize** the design to match your brand
5. ✅ **Deploy** to a public URL (optional)

---

## 📚 Additional Resources

- **Web README**: `web/README.md` - Complete documentation
- **n8n Workflow**: `IMPORT_GUIDE.md` - n8n setup details
- **XML Format**: `AI_IMPLEMENTATION_GUIDE.md` - Technical specs
- **Telegram Version**: `TELEGRAM_VERSION.md` - Alternative interface

---

## ⌨️ Pro Tips

**Keyboard Shortcuts:**
- `Ctrl + K` → Focus prompt input
- `Ctrl + Enter` → Generate scene
- `Escape` → Close results

**Browser Tips:**
- Press `F12` to open developer console for debugging
- Use "Inspect Element" to customize CSS in real-time
- Bookmark the page for quick access

**Workflow Tips:**
- Save good prompts as examples
- Test with simple prompts first
- Download multiple variations
- Compare different moods/environments

---

## ✅ Setup Complete!

You're ready to generate Unity scenes! 🎉

**Quick test checklist:**
- [ ] Web interface opens
- [ ] Webhook URL configured
- [ ] Example prompt works
- [ ] XML file downloads
- [ ] Can import to Unity

**Need help?** Check the [Troubleshooting](#common-issues--fixes) section above.

---

**Happy Scene Generating!** 🌟