# AIPlot Web Interface

A beautiful, modern web interface for generating Unity 3D scenes using natural language prompts. This frontend connects to your n8n workflow via webhook to create AI-powered scene configurations.

## 🌟 Features

- ✨ **Modern UI Design** - Clean, gradient-based interface with smooth animations
- 🎨 **Live Scene Generation** - Real-time AI processing with loading states
- 📦 **Quick Examples** - Pre-built prompts to get started quickly
- 💾 **Download & Copy** - Multiple export options for generated XML
- 👁️ **XML Preview** - View generated content before downloading
- 📱 **Responsive Design** - Works on desktop, tablet, and mobile
- ⚡ **Keyboard Shortcuts** - Power user features for faster workflow
- 🔄 **Auto-save Settings** - Webhook URL saved in localStorage
- 📊 **Scene Statistics** - View environment, mood, and object counts

## 📁 Files

```
web/
├── index.html      # Main HTML structure
├── styles.css      # Complete styling and animations
├── script.js       # JavaScript for API calls and interactions
└── README.md       # This file
```

## 🚀 Quick Start

### Option 1: Local File (Simplest)

1. **Open the HTML file directly**
   ```bash
   # Just double-click index.html in your file explorer
   # Or drag it into your browser
   ```

2. **Configure webhook URL**
   - Paste your n8n webhook endpoint
   - Example: `http://localhost:5678/webhook/aiplot-generate`
   - URL is saved automatically

3. **Generate a scene**
   - Enter a prompt or click an example
   - Click "Generate Unity Scene"
   - Download the XML file

### Option 2: Local Web Server (Recommended)

**Using Python:**
```bash
cd n8nplot/web
python -m http.server 8080
```

**Using Node.js:**
```bash
cd n8nplot/web
npx http-server -p 8080
```

**Using PHP:**
```bash
cd n8nplot/web
php -S localhost:8080
```

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

### Option 3: Deploy to Web Host

**Netlify (Free):**
1. Create account at netlify.com
2. Drag & drop the `web` folder
3. Get your live URL (e.g., `your-app.netlify.app`)

**Vercel (Free):**
1. Create account at vercel.com
2. Connect your GitHub repo or upload folder
3. Deploy in seconds

**GitHub Pages (Free):**
1. Create GitHub repo
2. Upload `web` folder contents
3. Enable GitHub Pages in settings
4. Access at `username.github.io/repo-name`

## ⚙️ Configuration

### Setting Up Your n8n Webhook

1. **Import n8n workflow**
   ```
   Use: aiplot_claude_workflow_fixed.json
   ```

2. **Get webhook URL**
   - Open the Webhook node in n8n
   - Copy the "Test URL" or "Production URL"
   - Example format: `https://n8n.example.com/webhook/aiplot-generate`

3. **Configure CORS (if needed)**
   
   If you get CORS errors, add this to your n8n webhook response:
   
   In the "Respond to Webhook" node, add headers:
   ```json
   {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "POST, OPTIONS",
     "Access-Control-Allow-Headers": "Content-Type"
   }
   ```

4. **Test connection**
   - Enter webhook URL in the web interface
   - Try a simple prompt: "tropical beach"
   - Should return XML within 5 seconds

### Customizing the Interface

**Change Colors:**

Edit `styles.css`:
```css
:root {
    --primary-color: #6366f1;  /* Main brand color */
    --primary-hover: #4f46e5;   /* Hover state */
    /* ... more variables ... */
}
```

**Change Examples:**

Edit `index.html`, find `.example-chips`:
```html
<button class="example-chip" data-prompt="Your custom prompt">
    🎨 Your Label
</button>
```

**Change Default Webhook URL:**

Edit `index.html`, line with `value="..."`:
```html
<input 
    id="webhookUrl" 
    value="https://your-default-url.com/webhook/aiplot-generate"
>
```

## 🎮 Usage Guide

### Basic Workflow

1. **Enter webhook URL** (only once, it's saved)
2. **Describe your scene** using natural language
3. **Click "Generate Unity Scene"** or press `Ctrl+Enter`
4. **Wait 3-5 seconds** for AI processing
5. **View scene details** and statistics
6. **Download XML file** for Unity import
7. **Import in Unity** to see your scene!

### Example Prompts

**Simple:**
```
tropical beach with palm trees
forest with pine trees
desert with rocks and cacti
```

**Detailed:**
```
Create a peaceful tropical island with 10 palm trees, 
scattered rocks, and evening lighting
```

**Advanced:**
```
Generate a mysterious ancient forest scene with tall trees, 
moss-covered rocks, fog effects, and dramatic blue lighting 
for a fantasy game environment
```

### Understanding Results

After generation, you'll see:

- **🌍 Environment**: Detected scene type (tropical, forest, desert, etc.)
- **💫 Mood**: Scene atmosphere (peaceful, energetic, mysterious)
- **🎯 Objects**: Total number of 3D models placed
- **📄 File Size**: XML file size in KB

## ⌨️ Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl/Cmd + K` | Focus prompt input |
| `Ctrl + Enter` | Generate scene |
| `Escape` | Close results or preview |

## 🔧 Troubleshooting

### Webhook Connection Failed

**Problem:** Cannot connect to n8n webhook

**Solutions:**
1. Verify n8n workflow is activated
2. Check webhook URL is correct
3. Ensure n8n is running and accessible
4. Check browser console for CORS errors
5. Try using n8n "Test URL" instead of "Production URL"

### CORS Error

**Problem:** `Access-Control-Allow-Origin` error in browser console

**Solutions:**

**Option A - Add CORS headers to n8n:**
1. Open "Respond to Webhook" node
2. Add response headers:
   ```
   Access-Control-Allow-Origin: *
   Access-Control-Allow-Methods: POST, OPTIONS
   ```

**Option B - Use browser extension:**
- Install "Allow CORS" extension (Chrome/Firefox)
- Enable for development only

**Option C - Deploy backend and frontend together:**
- Host both on same domain to avoid CORS

### No Results Showing

**Problem:** Generate button works but no results appear

**Solutions:**
1. Check browser console (F12) for errors
2. Verify n8n response format matches expected structure
3. Check if XML content exists in response
4. Try with a simple prompt first

### Page Not Loading Styles

**Problem:** HTML loads but looks unstyled

**Solutions:**
1. Ensure `styles.css` is in same folder as `index.html`
2. Clear browser cache (Ctrl+Shift+R)
3. Check browser console for 404 errors
4. Verify file paths are correct

## 🌐 Deployment Options

### Production Deployment Checklist

- [ ] Update default webhook URL to production endpoint
- [ ] Remove `localhost` references
- [ ] Test on multiple browsers (Chrome, Firefox, Safari)
- [ ] Test on mobile devices
- [ ] Enable HTTPS for webhook endpoint
- [ ] Add error tracking (e.g., Sentry)
- [ ] Add analytics (optional)
- [ ] Optimize images/assets
- [ ] Minify CSS and JavaScript (optional)
- [ ] Set up monitoring for n8n workflow

### Environment Variables

For production, consider using environment variables:

Create `config.js`:
```javascript
const CONFIG = {
    WEBHOOK_URL: process.env.N8N_WEBHOOK_URL || 'https://default.com/webhook',
    API_TIMEOUT: 30000,
    ENABLE_ANALYTICS: true
};
```

### Security Considerations

**For Public Deployment:**

1. **Rate Limiting**: Add rate limiting to n8n webhook
2. **Authentication**: Consider adding API key authentication
3. **Input Validation**: Validate prompts on backend
4. **HTTPS Only**: Use HTTPS for webhook endpoint
5. **Content Security Policy**: Add CSP headers

**Example n8n Authentication:**

Add a check in "Format Model Data" node:
```javascript
const apiKey = $('Webhook').item.json.headers['x-api-key'];
if (apiKey !== 'your-secret-key') {
    throw new Error('Unauthorized');
}
```

Then update `script.js`:
```javascript
const response = await fetch(webhookUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-API-Key': 'your-secret-key'
    },
    body: JSON.stringify({ prompt: prompt })
});
```

## 📊 Analytics (Optional)

Add Google Analytics by adding this before `</head>` in `index.html`:

```html
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
```

Track scene generations in `script.js`:
```javascript
// After successful generation
if (typeof gtag !== 'undefined') {
    gtag('event', 'scene_generated', {
        'environment': data.environment,
        'objects': data.totalObjects
    });
}
```

## 🎨 Customization Ideas

### Add More Features

**Scene History:**
```javascript
// Store in localStorage
const history = JSON.parse(localStorage.getItem('sceneHistory') || '[]');
history.push({
    prompt: prompt,
    timestamp: Date.now(),
    filename: data.filename
});
localStorage.setItem('sceneHistory', JSON.stringify(history));
```

**Favorites System:**
```javascript
// Add star button to save favorite prompts
function saveFavorite(prompt) {
    const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
    favorites.push(prompt);
    localStorage.setItem('favorites', JSON.stringify(favorites));
}
```

**Advanced Options:**
- Model density slider
- Scene size selection
- Lighting mood picker
- Object category filters

### White Label / Rebrand

1. Change logo in header
2. Update colors in `:root` CSS variables
3. Change page title and meta tags
4. Add your company footer
5. Custom domain deployment

## 🐛 Known Issues

- **Large scenes (100+ objects)**: May take 10-15 seconds to generate
- **Mobile Safari**: Clipboard copy may not work (iOS limitation)
- **Internet Explorer**: Not supported (use modern browsers)

## 📝 License

This web interface is part of the AIPlot Scene Generator project.

## 🤝 Contributing

To improve the web interface:

1. Make changes to HTML/CSS/JS files
2. Test locally
3. Check responsive design (mobile/tablet)
4. Verify browser compatibility
5. Submit pull request (if applicable)

## 📞 Support

For issues:
1. Check browser console (F12) for errors
2. Verify n8n workflow is working
3. Test webhook URL directly with curl/Postman
4. Review `AI_IMPLEMENTATION_GUIDE.md` for XML format

---

**Ready to use!** Just open `index.html` and start generating scenes! 🚀