Spaces:

Vehicoule
/

deepsite-ai-builder

Running

App Files Files Community

Vehicoule commited on Nov 2

Commit

83cb890

verified ·

1 Parent(s): eb53fb1

# DeepSite - Complete Project Setup

Browse files

## Full Directory Structure

```
deepsite/
├── backend/
│ ├── package.json
│ ├── .env
│ ├── index.js
│ ├── Dockerfile
│ └── .dockerignore
├── frontend/
│ ├── package.json
│ ├── .env
│ ├── public/
│ │ ├── index.html
│ │ └── favicon.ico
│ ├── src/
│ │ ├── index.js
│ │ ├── index.css
│ │ ├── App.jsx
│ │ ├── App.css
│ │ └── components/
│ │ ├── Header.jsx
│ │ ├── ChatPanel.jsx
│ │ ├── PreviewPanel.jsx
│ │ └── SettingsModal.jsx
│ └── Dockerfile
├── docker-compose.yml
├── .gitignore
└── README.md
```

---

## Backend Files

### backend/package.json

```json
{
"name": "deepsite-backend",
"version": "1.0.0",
"description": "DeepSite API Backend",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js"
},
"dependencies": {
"express": "^4.18.2",
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"node-fetch": "^2.7.0"
},
"devDependencies": {
"nodemon": "^3.0.1"
}
}
```

### backend/.env

```
PORT=5000
NODE_ENV=development
```

### backend/index.js

```javascript
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');
require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb', extended: true }));

const SYSTEM_PROMPT = `You are an expert web developer. Create a complete, production-ready HTML/CSS/JavaScript website based on the user's request.

CRITICAL REQUIREMENTS:
- Return ONLY complete HTML code, nothing else
- Include ALL CSS in <style> tags in <head>
- Include ALL JavaScript in <script> tags before </body>
- Make it fully functional and interactive
- Use modern, responsive design (Tailwind CSS or inline styles)
- Include necessary CDN libraries
- DO NOT include markdown, explanations, or code blocks
- DO NOT wrap in triple backticks
- Start directly with <!DOCTYPE html>

Create a beautiful, modern, professional website!`;

// Health check
app.get('/api/health', (req, res) => {
res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// Validate API key
app.post('/api/validate-key', async (req, res) => {
try {
const { apiKey, baseUrl, provider } = req.body;

if (provider === 'llamacpp') {
return res.json({ valid: true });
}

const response = await fetch(`${baseUrl}/models`, {
headers: { 'Authorization': `Bearer ${apiKey}` }
});

res.json({ valid: response.ok });
} catch (err) {
res.json({ valid: false, error: err.message });
}
});

// Fetch models
app.post('/api/models', async (req, res) => {
try {
const { baseUrl, apiKey, provider } = req.body;

if (!baseUrl) {
return res.status(400).json({ error: 'Base URL required' });
}

let response;

if (provider === 'llamacpp') {
response = await fetch(`${baseUrl}/models`);
} else if (provider === 'nvidia') {
response = await fetch(`${baseUrl}/models`, {
headers: { 'Authorization': `Bearer ${apiKey}` }
});
} else if (provider === 'openrouter') {
response = await fetch('https://openrouter.ai/api/v1/models', {
headers: { 'Authorization': `Bearer ${apiKey}` }
});
}

if (!response.ok) {
return res.status(response.status).json({ error: 'Failed to fetch models' });
}

const data = await response.json();
const models = data.data || data.models || [];

res.json({ models });
} catch (err) {
res.status(500).json({ error: err.message });
}
});

// Generate website
app.post('/api/generate', async (req, res) => {
try {
const { model, apiKey, prompt, provider, baseUrl } = req.body;

if (!model || !prompt) {
return res.status(400).json({ error: 'Model and prompt required' });
}

if (provider !== 'llamacpp' && !apiKey) {
return res.status(400).json({ error: 'API key required' });
}

let response;

if (provider === 'llamacpp') {
response = await fetch(`${baseUrl}/v1/chat/completions`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model,
messages: [
{ role: 'system', content: SYSTEM_PROMPT },
{ role: 'user', content: `Create a website for: ${prompt}` }
],
max_tokens: 16000,
temperature: 0.7,
stream: false
})
});
} else if (provider === 'nvidia') {
response = await fetch(`${baseUrl}/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model,
messages: [
{ role: 'system', content: SYSTEM_PROMPT },
{ role: 'user', content: `Create a website for: ${prompt}` }
],
max_tokens: 16000,
temperature: 0.7,
stream: false
})
});
} else if (provider === 'openrouter') {
response = await fetch(`${baseUrl}/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
'HTTP-Referer': 'http://localhost:3000'
},
body: JSON.stringify({
model,
messages: [
{ role: 'system', content: SYSTEM_PROMPT },
{ role: 'user', content: `Create a website for: ${prompt}` }
],
max_tokens: 16000,
temperature: 0.7,
stream: false
})
});
}

const data = await response.json();

if (!response.ok) {
return res.status(response.status).json({
error: data.error?.message || data.detail || 'Generation failed'
});
}

let code = data.choices[0].message.content;
code = code.replace(/```html\n?/gi, '').replace(/```\n?/g, '').trim();

const htmlMatch = code.match(/<!DOCTYPE html>[\s\S]*<\/html>/i);
if (htmlMatch) {
code = htmlMatch[0];
}

res.json({ code });
} catch (err) {
res.status(500).json({ error: err.message });
}
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`✓ DeepSite Backend running on port ${PORT}`);
console.log(`✓ Health check: http://localhost:${PORT}/api/health`);
});
```

### backend/Dockerfile

```dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install --production

COPY . .

EXPOSE 5000

CMD ["npm", "start"]
```

### backend/.dockerignore

```
node_modules
npm-debug.log
.env.local
```

---

## Frontend Files

### frontend/package.json

```json
{
"name": "deepsite-frontend",
"version": "1.0.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"lucide-react": "^0.263.1",
"axios": "^1.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
```

### frontend/.env

```
REACT_APP_API_URL=http://localhost:5000
```

### frontend/public/index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="DeepSite - AI Web Builder" />
<title>DeepSite - AI Web Builder</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
```

### frontend/src/index.js

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
```

### frontend/src/index.css

```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body, #root {
height: 100%;
width: 100%;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(to bottom right, #f8fafc, #ffffff, #f0f4f8);
}

button {
cursor: pointer;
border: none;
font-family: inherit;
}

input, textarea, select {
font-family: inherit;
}

/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}
```

### frontend/src/App.jsx

```jsx
import React, { useState, useEffect } from 'react';
import { Settings } from 'lucide-react';
import './App.css';
import Header from './components/Header';
import ChatPanel from './components/ChatPanel';
import PreviewPanel from './components/PreviewPanel';
import SettingsModal from './components/SettingsModal';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';

export default function App() {
const [provider, setProvider] = useState('nvidia');
const [apiKey, setApiKey] = useState('');
const [baseUrl, setBaseUrl] = useState('https://integrate.api.nvidia.com/v1');
const [model, setModel] = useState('');
const [models, setModels] = useState([]);
const [prompt, setPrompt] = useState('');

Files changed (22) hide show

README.md +8 -5
backend/.dockerignore +10 -0
backend/.env +6 -0
backend/Dockerfile +30 -0
backend/index.js +2 -0
backend/package.json +22 -0
frontend/.env +4 -0
frontend/package.json +48 -0
frontend/public/index.html +89 -0
frontend/src/App.css +317 -0
frontend/src/App.tsx +278 -0
frontend/src/components/ChatPanel.tsx +130 -0
frontend/src/components/Header.tsx +146 -0
frontend/src/index.css +198 -0
frontend/src/index.tsx +16 -0
frontend/src/services/api.ts +230 -0
frontend/src/types/index.ts +246 -0
index.html +228 -18
package.json +31 -0
script.js +835 -0
server.js +508 -0
style.css +82 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Ai Builder
-emoji: 📊
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite AI Builder 🎨
+colorFrom: blue
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

backend/.dockerignore ADDED Viewed

	@@ -0,0 +1,10 @@

+```
+node_modules
+npm-debug.log
+.env.local
+.env.production
+.DS_Store
+.git
+.gitignore
+README.md
+```

backend/.env ADDED Viewed

	@@ -0,0 +1,6 @@

+```
+PORT=5000
+NODE_ENV=development
+OPENAI_API_KEY=your_openai_key_here
+NVIDIA_API_KEY=your_nvidia_key_here
+```

backend/Dockerfile ADDED Viewed

	@@ -0,0 +1,30 @@

+```dockerfile
+FROM node:18-alpine
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install dependencies
+RUN npm install --only=production
+# Copy source code
+COPY . .
+# Create non-root user
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S deepsite -u 1001
+# Change ownership of the app directory
+RUN chown -R deepsite:nodejs /app
+USER deepsite
+EXPOSE 5000
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:5000/api/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) })"
+CMD ["npm", "start"]
+```

backend/index.js ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ \n?/gi, '')
2	+ .replace(/

backend/package.json ADDED Viewed

	@@ -0,0 +1,22 @@

+```json
+{
+  "name": "deepsite-backend",
+  "version": "1.0.0",
+  "description": "DeepSite AI Web Builder Backend API",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "node-fetch": "^2.7.0",
+    "axios": "^1.5.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}
+```

frontend/.env ADDED Viewed

	@@ -0,0 +1,4 @@

+```
+REACT_APP_API_URL=http://localhost:5000
+REACT_APP_VERSION=1.0.0
+```

frontend/package.json ADDED Viewed

	@@ -0,0 +1,48 @@

+```json
+{
+  "name": "deepsite-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "proxy": "http://localhost:5000",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "lucide-react": "^0.263.1",
+    "axios": "^1.5.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.27",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.0"
+  }
+}
+```

frontend/public/index.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="DeepSite - AI-Powered Website Builder" />
+    <meta name="keywords" content="AI, website builder, React, full-stack, code generation" />
+    <title>DeepSite - AI Website Builder</title>
+    <!-- Preload fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Favicon -->
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- Progressive Web App -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Open Graph -->
+    <meta property="og:title" content="DeepSite - AI Website Builder" />
+    <meta property="og:description" content="Create beautiful websites with AI" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="%PUBLIC_URL%/og-image.png" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!-- Loading screen -->
+    <style>
+      #initial-loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+      #initial-loader .loader-content {
+        text-align: center;
+        color: white;
+      }
+      #initial-loader .spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(255,255,255,0.3);
+        border-radius: 50%;
+        border-top-color: white;
+        animation: spin 1s ease-in-out infinite;
+        margin: 0 auto 16px;
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    </style>
+    <div id="initial-loader">
+      <div class="loader-content">
+        <div class="spinner"></div>
+        <h2>Loading DeepSite...</h2>
+        <p>Preparing your AI website builder</p>
+      </div>
+    </div>
+    <script>
+      // Remove loader when React app loads
+      window.addEventListener('load', function() {
+        setTimeout(function() {
+          const loader = document.getElementById('initial-loader');
+          if (loader) {
+            loader.style.opacity = '0';
+            setTimeout(() => loader.remove(), 300);
+          }
+        }, 1000);
+      });
+    </script>
+  </body>
+</html>

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,317 @@

+/* App Container */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+/* Status Bar */
+.status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  z-index: 100;
+}
+.status-bar.online {
+  border-left: 4px solid var(--success-500);
+}
+.status-bar.offline {
+  border-left: 4px solid var(--error-500);
+}
+.status-bar.checking {
+  border-left: 4px solid var(--warning-500);
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+.status-dot.online {
+  background-color: var(--success-500);
+}
+.status-dot.offline {
+  background-color: var(--error-500);
+}
+.status-dot.checking {
+  background-color: var(--warning-500);
+}
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+/* Main Content */
+.main-content {
+  display: flex;
+  gap: 1rem;
+  flex: 1;
+  padding: 1rem;
+  overflow: hidden;
+  min-height: 0;
+}
+@media (max-width: 768px) {
+  .main-content {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+}
+/* Settings Button */
+.settings-button {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--gray-900);
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  z-index: 40;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.settings-button:hover {
+  background: rgba(255, 255, 255, 1);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+@media (max-width: 768px) {
+  .settings-button {
+    bottom: 1rem;
+    right: 1rem;
+    padding: 0.75rem;
+    border-radius: 50%;
+  }
+  .settings-button span {
+    display: none;
+  }
+}
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 1rem;
+}
+.modal {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--gray-200);
+}
+.modal-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--gray-900);
+}
+.modal-header button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: var(--gray-500);
+  transition: all 0.2s;
+}
+.modal-header button:hover {
+  background: var(--gray-100);
+  color: var(--gray-700);
+}
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.modal-close-btn {
+  padding: 1rem 1.5rem;
+  background: var(--gray-50);
+  border: none;
+  font-weight: 500;
+  color: var(--gray-700);
+  transition: all 0.2s;
+  border-top: 1px solid var(--gray-200);
+}
+.modal-close-btn:hover {
+  background: var(--gray-100);
+}
+/* About Content */
+.about-content {
+  text-align: left;
+}
+.feature-list ul {
+  list-style: none;
+  padding: 0;
+}
+.tech-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  background: var(--gray-100);
+  color: var(--gray-700);
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border: 1px solid var(--gray-200);
+}
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .modal {
+    margin: 0.5rem;
+    max-height: calc(100vh - 1rem);
+  }
+  .modal-header {
+    padding: 1rem;
+  }
+  .modal-content {
+    padding: 1rem;
+  }
+  .modal-close-btn {
+    padding: 0.75rem 1rem;
+  }
+}
+/* Loading states */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--gray-200);
+  border-top: 3px solid var(--primary-500);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+/* Error and Success Messages */
+.message-bar {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  z-index: 60;
+  animation: slideDown 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.message-bar.error {
+  background: var(--error-500);
+  color: white;
+}
+.message-bar.success {
+  background: var(--success-500);
+  color: white;
+}
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+/* Print styles */
+@media print {
+  .settings-button,
+  .status-bar,
+  .modal-overlay {
+    display: none !important;
+  }
+}

frontend/src/App.tsx ADDED Viewed

	@@ -0,0 +1,278 @@

+```typescript
+import React, { useState, useEffect, useCallback } from 'react';
+import { Settings, Github, Heart } from 'lucide-react';
+import Header from './components/Header';
+import ChatPanel from './components/ChatPanel';
+import PreviewPanel from './components/PreviewPanel';
+import SettingsModal from './components/SettingsModal';
+import { ApiService } from './services/api';
+import { ChatMessage, ApiProvider, AppSettings } from './types';
+const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';
+const defaultSettings: AppSettings = {
+  provider: 'openai',
+  apiKey: '',
+  model: 'gpt-4',
+  theme: 'light'
+};
+function App() {
+  const [settings, setSettings] = useState<AppSettings>(defaultSettings);
+  const [prompt, setPrompt] = useState('');
+  const [generatedCode, setGeneratedCode] = useState('');
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [showSettings, setShowSettings] = useState(false);
+  const [showAbout, setShowAbout] = useState(false);
+  const [apiStatus, setApiStatus] = useState<'checking' | 'online' | 'offline'>('checking');
+  // Load settings from localStorage
+  useEffect(() => {
+    const savedSettings = localStorage.getItem('deepsite-settings');
+    if (savedSettings) {
+      try {
+        const parsed = JSON.parse(savedSettings);
+        setSettings({ ...defaultSettings, ...parsed });
+      } catch (e) {
+        console.error('Error loading settings:', e);
+      }
+    }
+    checkApiHealth();
+  }, []);
+  // Save settings to localStorage
+  useEffect(() => {
+    localStorage.setItem('deepsite-settings', JSON.stringify(settings));
+  }, [settings]);
+  // Check API health
+  const checkApiHealth = useCallback(async () => {
+    try {
+      await ApiService.healthCheck();
+      setApiStatus('online');
+    } catch (error) {
+      setApiStatus('offline');
+    }
+  }, []);
+  // Generate website
+  const generateWebsite = async () => {
+    if (!prompt.trim()) {
+      setError('Please describe what you want to build');
+      setTimeout(() => setError(''), 3000);
+      return;
+    }
+    if (settings.provider !== 'anthropic' && !settings.apiKey.trim()) {
+      setError('Please configure your API key in settings');
+      setTimeout(() => setError(''), 3000);
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess('');
+    // Add user message
+    const userMessage: ChatMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: prompt,
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, userMessage]);
+    try {
+      const response = await ApiService.generate({
+        prompt,
+        provider: settings.provider,
+        model: settings.model,
+        apiKey: settings.apiKey
+      });
+      const aiMessage: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: '✨ Your website has been generated successfully!',
+        timestamp: new Date()
+      };
+      setMessages(prev => [...prev, aiMessage]);
+      setGeneratedCode(response.code);
+      setSuccess('Website generated successfully!');
+      setPrompt('');
+      setTimeout(() => setSuccess(''), 3000);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Generation failed';
+      setError(errorMessage);
+      const errorAiMessage: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: `❌ Error: ${errorMessage}`,
+        timestamp: new Date()
+      };
+      setMessages(prev => [...prev, errorAiMessage]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (!loading && prompt.trim()) {
+          generateWebsite();
+        }
+      }
+      if (e.key === 'Escape') {
+        setShowSettings(false);
+        setShowAbout(false);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [prompt, loading, generateWebsite]);
+  return (
+    <div className="app-container">
+      {/* Status Bar */}
+      <div className={`status-bar ${apiStatus === 'online' ? 'online' : apiStatus === 'offline' ? 'offline' : 'checking'}`}>
+        <div className="flex items-center gap-2">
+          <div className={`status-dot ${apiStatus}`}></div>
+          <span className="text-sm">
+            {apiStatus === 'online' && 'API Connected'}
+            {apiStatus === 'offline' && 'API Disconnected'}
+            {apiStatus === 'checking' && 'Checking API...'}
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="text-sm text-gray-600">DeepSite v{process.env.REACT_APP_VERSION}</span>
+          <button
+            onClick={() => setShowAbout(true)}
+            className="text-sm text-gray-600 hover:text-gray-800 transition-colors"
+          >
+            About
+          </button>
+        </div>
+      </div>
+      {/* Main Header */}
+      <Header
+        prompt={prompt}
+        setPrompt={setPrompt}
+        onGenerate={generateWebsite}
+        loading={loading}
+        onSettingsClick={() => setShowSettings(true)}
+      />
+      {/* Main Content */}
+      <div className="main-content">
+        <ChatPanel messages={messages} />
+        <PreviewPanel
+          generatedCode={generatedCode}
+          error={error}
+          success={success}
+          loading={loading}
+        />
+      </div>
+      {/* Settings Button */}
+      <button
+        className="settings-button"
+        onClick={() => setShowSettings(true)}
+        title="Settings (⌘+,)"
+      >
+        <Settings size={18} />
+        <span className="mobile-hidden">Settings</span>
+      </button>
+      {/* About Modal */}
+      {showAbout && (
+        <div className="modal-overlay" onClick={() => setShowAbout(false)}>
+          <div className="modal scale-in" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h2>About DeepSite</h2>
+              <button onClick={() => setShowAbout(false)}>×</button>
+            </div>
+            <div className="modal-content">
+              <div className="about-content">
+                <div className="text-center mb-6">
+                  <h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                    DeepSite
+                  </h3>
+                  <p className="text-gray-600 mt-2">AI-Powered Website Builder</p>
+                </div>
+                <div className="space-y-4">
+                  <div className="feature-list">
+                    <h4 className="font-semibold mb-2">Features:</h4>
+                    <ul className="space-y-1 text-sm text-gray-600">
+                      <li>• Generate complete websites with AI</li>
+                      <li>• Support for multiple AI providers</li>
+                      <li>• Real-time preview and code editing</li>
+                      <li>• Responsive design generation</li>
+                      <li>• Modern React-based interface</li>
+                    </ul>
+                  </div>
+                  <div className="tech-stack">
+                    <h4 className="font-semibold mb-2">Built with:</h4>
+                    <div className="flex flex-wrap gap-2">
+                      <span className="tech-badge">React</span>
+                      <span className="tech-badge">TypeScript</span>
+                      <span className="tech-badge">Tailwind CSS</span>
+                      <span className="tech-badge">Node.js</span>
+                      <span className="tech-badge">Express</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="text-center mt-6 pt-4 border-t border-gray-200">
+                  <p className="text-sm text-gray-500 mb-3">
+                    Made with <Heart size={16} className="inline text-red-500" /> for the community
+                  </p>
+                  <div className="flex justify-center gap-4">
+                    <a
+                      href="https://github.com/deepsite/deepsite"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                    >
+                      <Github size={16} />
+                      View on GitHub
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button className="modal-close-btn" onClick={() => setShowAbout(false)}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Settings Modal */}
+      {showSettings && (
+        <SettingsModal
+          settings={settings}
+          onSettingsChange={setSettings}
+          onClose={() => setShowSettings(false)}
+          onApiStatusCheck={checkApiHealth}
+        />
+      )}
+    </div>
+  );
+}
+export default App;
+```

frontend/src/components/ChatPanel.tsx ADDED Viewed

	@@ -0,0 +1,130 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./public/index.html"
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif'],
+      },
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#faf5ff',
+          100: '#f3e8ff',
+          200: '#e9d5ff',
+          300: '#d8b4fe',
+          400: '#c084fc',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7c3aed',
+          800: '#6b21a8',
+          900: '#581c87',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+        error: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        }
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'slide-down': 'slideDown 0.3s ease-out',
+        'scale-in': 'scaleIn 0.2s ease-out',
+        'bounce-gentle': 'bounceGentle 2s infinite',
+        'pulse-slow': 'pulse 3s infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        bounceGentle: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-5px)' },
+        }
+      },
+      backdropBlur: {
+        xs: '2px',
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(59, 130, 246, 0.3)',
+        'glow-lg': '0 0 40px rgba(59, 130, 246, 0.4)',
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+      },
+      maxWidth: {
+        '8xl': '88rem',
+        '9xl': '96rem',
+      },
+      zIndex: {
+        '60': '60',
+        '70': '70',
+        '80': '80',
+        '90': '90',
+        '100': '100',
+      }
+    },
+  },
+  plugins: [],
+  darkMode: 'class',
+}

frontend/src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,146 @@

+```typescript
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Settings, Sparkles, Loader2 } from 'lucide-react';
+import { HeaderProps } from '../types';
+const Header: React.FC<HeaderProps> = ({
+  prompt,
+  setPrompt,
+  onGenerate,
+  loading,
+  onSettingsClick
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    }
+  }, [prompt]);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!loading && prompt.trim()) {
+      onGenerate();
+    }
+  };
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+  const suggestedPrompts = [
+    "Create a modern landing page with hero section and features",
+    "Build a portfolio website with dark theme",
+    "Generate a responsive e-commerce product page",
+    "Make a blog with modern typography",
+    "Create a dashboard with charts and analytics"
+  ];
+  return (
+    <header className="header">
+      <div className="header-content">
+        {/* Logo and Title */}
+        <div className="logo-section">
+          <div className="logo-icon">
+            <Sparkles className="w-8 h-8 text-white" />
+          </div>
+          <div className="logo-text">
+            <h1 className="text-2xl font-bold text-white">DeepSite</h1>
+            <p className="text-white/80 text-sm">AI-Powered Website Builder</p>
+          </div>
+        </div>
+        {/* Main Input */}
+        <form onSubmit={handleSubmit} className="input-section">
+          <div className="input-container">
+            <div className="input-wrapper">
+              <textarea
+                ref={textareaRef}
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onFocus={() => setIsExpanded(true)}
+                onBlur={() => setIsExpanded(false)}
+                placeholder="Describe the website you want to create... (e.g., 'Create a modern portfolio with dark theme and smooth animations')"
+                className="main-input"
+                rows={1}
+                disabled={loading}
+              />
+              <button
+                type="submit"
+                disabled={loading || !prompt.trim()}
+                className="submit-button"
+                title="Generate Website (⌘+Enter)"
+              >
+                {loading ? (
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                ) : (
+                  <Send className="w-5 h-5" />
+                )}
+              </button>
+            </div>
+            {/* Suggested Prompts */}
+            {isExpanded && (
+              <div className="suggestions fade-in">
+                <div className="suggestions-header">
+                  <span className="text-sm text-white/60">Try these:</span>
+                </div>
+                <div className="suggestions-grid">
+                  {suggestedPrompts.map((suggestion, index) => (
+                    <button
+                      key={index}
+                      type="button"
+                      onClick={() => setPrompt(suggestion)}
+                      className="suggestion-chip"
+                      disabled={loading}
+                    >
+                      {suggestion}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </form>
+        {/* Settings Button */}
+        <button
+          onClick={onSettingsClick}
+          className="settings-button"
+          title="Settings"
+        >
+          <Settings className="w-5 h-5" />
+        </button>
+      </div>
+      {/* Quick Stats */}
+      <div className="header-stats">
+        <div className="stat-item">
+          <span className="stat-number">∞</span>
+          <span className="stat-label">AI Models</span>
+        </div>
+        <div className="stat-item">
+          <span className="stat-number">100%</span>
+          <span className="stat-label">Free</span>
+        </div>
+        <div className="stat-item">
+          <span className="stat-number">⚡</span>
+          <span className="stat-label">Fast</span>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;
+```

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,198 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Custom CSS Variables */
+:root {
+  --primary-50: #f0f9ff;
+  --primary-100: #e0f2fe;
+  --primary-500: #0ea5e9;
+  --primary-600: #0284c7;
+  --primary-700: #0369a1;
+  --secondary-500: #8b5cf6;
+  --success-500: #10b981;
+  --warning-500: #f59e0b;
+  --error-500: #ef4444;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+}
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: var(--gray-900);
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--gray-100);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--gray-300);
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-400);
+}
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-300) var(--gray-100);
+}
+/* Focus styles */
+*:focus {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+/* Button reset */
+button {
+  cursor: pointer;
+  border: none;
+  font-family: inherit;
+  background: none;
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* Form elements */
+input, textarea, select {
+  font-family: inherit;
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--gray-400);
+}
+/* Utility classes */
+.gradient-bg {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.glass-effect {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+.shadow-glow {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+.slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+.scale-in {
+  animation: scaleIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* Loading spinner */
+.spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+/* Responsive design helpers */
+@media (max-width: 768px) {
+  .mobile-hidden {
+    display: none !important;
+  }
+}
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+}
+/* Print styles */
+@media print {
+  body {
+    background: white !important;
+  }
+}

frontend/src/index.tsx ADDED Viewed

	@@ -0,0 +1,16 @@

+```typescript
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```

frontend/src/services/api.ts ADDED Viewed

	@@ -0,0 +1,230 @@

+```typescript
+import axios, { AxiosResponse, AxiosError } from 'axios';
+import { GenerateRequest, GenerateResponse, ApiError, ApiStatus, ModelInfo, ApiProvider } from '../types';
+const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';
+const API_TIMEOUT = 30000; // 30 seconds
+class ApiServiceClass {
+  private axiosInstance = axios.create({
+    baseURL: API_BASE_URL,
+    timeout: API_TIMEOUT,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  constructor() {
+    // Request interceptor
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        console.log(`API Request: ${config.method?.toUpperCase()} ${config.url}`);
+        return config;
+      },
+      (error) => {
+        console.error('Request Error:', error);
+        return Promise.reject(error);
+      }
+    );
+    // Response interceptor
+    this.axiosInstance.interceptors.response.use(
+      (response) => {
+        console.log(`API Response: ${response.status} ${response.config.url}`);
+        return response;
+      },
+      (error: AxiosError) => {
+        console.error('Response Error:', error.response?.status, error.response?.data);
+        // Transform axios errors to our custom error type
+        const apiError = new ApiError(
+          this.getErrorMessage(error),
+          error.code,
+          error.response?.status,
+          error.response?.data
+        );
+        return Promise.reject(apiError);
+      }
+    );
+  }
+  private getErrorMessage(error: AxiosError): string {
+    if (error.response?.data) {
+      const data = error.response.data as any;
+      if (data.error) {
+        return typeof data.error === 'string' ? data.error : data.error.message;
+      }
+      if (data.message) {
+        return data.message;
+      }
+    }
+    if (error.request) {
+      return 'Network error: Unable to connect to server';
+    }
+    return error.message || 'An unknown error occurred';
+  }
+  // Health check
+  async healthCheck(): Promise<ApiStatus> {
+    try {
+      const response = await this.axiosInstance.get('/api/health');
+      const data = response.data;
+      return {
+        status: 'online',
+        version: data.version,
+        latency: response.headers['x-response-time'] ?
+          parseInt(response.headers['x-response-time'] as string) : undefined,
+        uptime: data.uptime
+      };
+    } catch (error) {
+      throw new ApiError('Health check failed', 'HEALTH_CHECK_FAILED');
+    }
+  }
+  // Generate website code
+  async generate(request: GenerateRequest): Promise<GenerateResponse> {
+    try {
+      const response = await this.axiosInstance.post<GenerateResponse>(
+        '/api/generate',
+        {
+          prompt: request.prompt,
+          provider: request.provider,
+          model: request.model,
+          temperature: request.temperature || 0.7,
+          max_tokens: request.maxTokens || 16000
+        },
+        {
+          headers: request.apiKey ? {
+            'Authorization': `Bearer ${request.apiKey}`
+          } : undefined
+        }
+      );
+      return response.data;
+    } catch (error) {
+      if (error instanceof ApiError) {
+        throw error;
+      }
+      throw new ApiError('Generation failed', 'GENERATION_FAILED');
+    }
+  }
+  // Validate API key
+  async validateKey(provider: ApiProvider, apiKey: string): Promise<{ valid: boolean; error?: string }> {
+    try {
+      const response = await this.axiosInstance.post('/api/validate-key', {
+        provider,
+        apiKey
+      });
+      return {
+        valid: response.data.valid,
+        error: response.data.error
+      };
+    } catch (error) {
+      return {
+        valid: false,
+        error: error instanceof ApiError ? error.message : 'Validation failed'
+      };
+    }
+  }
+  // Get available models for a provider
+  async getModels(provider: ApiProvider): Promise<ModelInfo[]> {
+    try {
+      const response = await this.axiosInstance.get(`/api/models/${provider}`);
+      const models = response.data.models || [];
+      return models.map((model: string | any) => {
+        if (typeof model === 'string') {
+          return {
+            id: model,
+            name: model,
+            contextLength: 4096
+          };
+        }
+        return {
+          id: model.id || model.name || model,
+          name: model.name || model.id || model,
+          description: model.description,
+          contextLength: model.context_length || model.contextLength,
+          pricing: model.pricing
+        };
+      });
+    } catch (error) {
+      console.error('Failed to fetch models:', error);
+      return [];
+    }
+  }
+  // Test API connectivity
+  async testConnection(provider: ApiProvider, config: { apiKey?: string; baseUrl?: string }): Promise<boolean> {
+    try {
+      // For now, just try to validate the key
+      if (config.apiKey) {
+        const validation = await this.validateKey(provider, config.apiKey);
+        return validation.valid;
+      }
+      return false;
+    } catch (error) {
+      console.error('Connection test failed:', error);
+      return false;
+    }
+  }
+  // Rate limiting helpers
+  private lastRequestTime = 0;
+  private readonly MIN_REQUEST_INTERVAL = 1000; // 1 second
+  private async enforceRateLimit(): Promise<void> {
+    const now = Date.now();
+    const timeSinceLastRequest = now - this.lastRequestTime;
+    if (timeSinceLastRequest < this.MIN_REQUEST_INTERVAL) {
+      const waitTime = this.MIN_REQUEST_INTERVAL - timeSinceLastRequest;
+      await new Promise(resolve => setTimeout(resolve, waitTime));
+    }
+    this.lastRequestTime = Date.now();
+  }
+  // Wrapped generation with rate limiting
+  async generateWithRateLimit(request: GenerateRequest): Promise<GenerateResponse> {
+    await this.enforceRateLimit();
+    return this.generate(request);
+  }
+  // Error recovery
+  private retryCount = new Map<string, number>();
+  private readonly MAX_RETRIES = 3;
+  async generateWithRetry(request: GenerateRequest): Promise<GenerateResponse> {
+    const requestKey = `${request.provider}-${request.model}-${Date.now()}`;
+    const retries = this.retryCount.get(requestKey) || 0;
+    try {
+      this.retryCount.set(requestKey, retries + 1);
+      return await this.generate(request);
+    } catch (error) {
+      // Retry on network errors or 5xx status codes
+      if (retries < this.MAX_RETRIES &&
+          (error instanceof ApiError &&
+           (error.status === undefined || error.status >= 500 || error.status === 0))) {
+        console.log(`Retrying request (attempt ${retries + 1}/${this.MAX_RETRIES})`);
+        await new Promise(resolve => setTimeout(resolve, Math.pow(2, retries) * 1000)); // Exponential backoff
+        return this.generateWithRetry(request);
+      }
+      throw error;
+    } finally {
+      this.retryCount.delete(requestKey);
+    }
+  }
+}
+export const ApiService = new ApiServiceClass();
+export default ApiService;
+```

frontend/src/types/index.ts ADDED Viewed

	@@ -0,0 +1,246 @@

+```typescript
+// Main types for the application
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  metadata?: {
+    model?: string;
+    provider?: string;
+    tokens?: number;
+  };
+}
+export interface AppSettings {
+  provider: ApiProvider;
+  apiKey: string;
+  model: string;
+  theme: 'light' | 'dark' | 'auto';
+  language: string;
+  autoSave: boolean;
+  showLineNumbers: boolean;
+  fontSize: number;
+}
+export type ApiProvider = 'openai' | 'anthropic' | 'nvidia' | 'openrouter';
+export interface GenerateRequest {
+  prompt: string;
+  provider: ApiProvider;
+  model: string;
+  apiKey?: string;
+  temperature?: number;
+  maxTokens?: number;
+}
+export interface GenerateResponse {
+  code: string;
+  provider: ApiProvider;
+  model: string;
+  timestamp: string;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+}
+export interface ModelInfo {
+  id: string;
+  name: string;
+  description?: string;
+  contextLength?: number;
+  pricing?: {
+    prompt: number;
+    completion: number;
+  };
+}
+export interface ApiStatus {
+  status: 'online' | 'offline' | 'checking';
+  latency?: number;
+  version?: string;
+  uptime?: number;
+}
+export interface PreviewOptions {
+  responsive: boolean;
+  viewport: 'desktop' | 'tablet' | 'mobile';
+  darkMode: boolean;
+  zoom: number;
+}
+export interface ExportOptions {
+  format: 'html' | 'zip' | 'pdf';
+  includeAssets: boolean;
+  minify: boolean;
+}
+export interface ProjectMetadata {
+  id: string;
+  name: string;
+  description?: string;
+  tags: string[];
+  createdAt: Date;
+  updatedAt: Date;
+  version: string;
+  author?: string;
+}
+export interface Template {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  preview: string;
+  code: string;
+  tags: string[];
+  difficulty: 'beginner' | 'intermediate' | 'advanced';
+}
+// Component Props Types
+export interface HeaderProps {
+  prompt: string;
+  setPrompt: (prompt: string) => void;
+  onGenerate: () => void;
+  loading: boolean;
+  onSettingsClick: () => void;
+}
+export interface ChatPanelProps {
+  messages: ChatMessage[];
+  onClear?: () => void;
+  onExport?: (format: 'json' | 'txt') => void;
+}
+export interface PreviewPanelProps {
+  generatedCode: string;
+  error: string;
+  success: string;
+  loading: boolean;
+  onExport?: (options: ExportOptions) => void;
+  onCopy?: () => void;
+  onDownload?: () => void;
+}
+export interface SettingsModalProps {
+  settings: AppSettings;
+  onSettingsChange: (settings: AppSettings) => void;
+  onClose: () => void;
+  onApiStatusCheck: () => void;
+}
+// Utility Types
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type RequiredKeys<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
+}[keyof T];
+export type OptionalKeys<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
+}[keyof T];
+// Error Types
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public code?: string,
+    public status?: number,
+    public details?: any
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+export class GenerationError extends Error {
+  constructor(
+    message: string,
+    public provider: ApiProvider,
+    public originalError?: any
+  ) {
+    super(message);
+    this.name = 'GenerationError';
+  }
+}
+// Configuration Types
+export interface AppConfig {
+  api: {
+    baseUrl: string;
+    timeout: number;
+    retries: number;
+  };
+  ui: {
+    theme: string;
+    animations: boolean;
+    compactMode: boolean;
+  };
+  features: {
+    analytics: boolean;
+    errorReporting: boolean;
+    autoSave: boolean;
+    templates: boolean;
+  };
+}
+// Local Storage Keys
+export const STORAGE_KEYS = {
+  SETTINGS: 'deepsite-settings',
+  CHAT_HISTORY: 'deepsite-chat-history',
+  PROJECTS: 'deepsite-projects',
+  TEMPLATES: 'deepsite-templates',
+  ANALYTICS: 'deepsite-analytics'
+} as const;
+// Constants
+export const API_PROVIDERS = {
+  openai: {
+    name: 'OpenAI',
+    models: ['gpt-4', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+    requiresKey: true
+  },
+  anthropic: {
+    name: 'Anthropic',
+    models: ['claude-3-opus-20240229', 'claude-3-sonnet-20240229', 'claude-3-haiku-20240307'],
+    requiresKey: true
+  },
+  nvidia: {
+    name: 'NVIDIA NIM',
+    models: ['meta/llama-2-70b', 'meta/codellama-70b', 'mistralai/mixtral-8x7b-instruct-v0.1'],
+    requiresKey: true
+  },
+  openrouter: {
+    name: 'OpenRouter',
+    models: ['openai/gpt-4', 'anthropic/claude-3-haiku', 'meta-llama/llama-2-70b-chat'],
+    requiresKey: true
+  }
+} as const;
+export const THEMES = {
+  light: 'Light',
+  dark: 'Dark',
+  auto: 'System'
+} as const;
+export const LANGUAGES = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  zh: '中文',
+  ja: '日本語',
+  ko: '한국어'
+} as const;
+```

index.html CHANGED Viewed

@@ -1,19 +1,229 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>DeepSite NIM</title>
+  <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+  <link rel="stylesheet" href="style.css" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              50: '#eef2ff',
+              100: '#e0e7ff',
+              200: '#c7d2fe',
+              300: '#a5b4fc',
+              400: '#818cf8',
+              500: '#6366f1',
+              600: '#4f46e5',
+              700: '#4338ca',
+              800: '#3730a3',
+              900: '#312e81'
+            },
+            secondary: {
+              50: '#f0f9ff',
+              100: '#e0f2fe',
+              200: '#bae6fd',
+              300: '#7dd3fc',
+              400: '#38bdf8',
+              500: '#0ea5e9',
+              600: '#0284c7',
+              700: '#0369a1',
+              800: '#075985',
+              900: '#0c4a6e'
+            },
+            neon: {
+              50: '#f0fdf4',
+              100: '#dcfce7',
+              200: '#bbf7d0',
+              300: '#86efac',
+              400: '#4ade80',
+              500: '#22c55e',
+              600: '#16a34a',
+              700: '#15803d',
+              800: '#166534',
+              900: '#14532d'
+            }
+          }
+        }
+      }
+    }
+  </script>
+<script>
+    // Keep icons available globally
+    window.feather = undefined; // Placeholder to avoid global leaks
+  </script>
+</head>
+<body class="bg-white text-gray-900">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="hidden md:flex md:flex-col w-72 border-r border-gray-200 bg-gray-50">
+      <div class="h-16 flex items-center px-4 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded bg-primary-500 text-white flex items-center justify-center font-bold">DS</div>
+          <div class="font-semibold">DeepSite NIM</div>
+        </div>
+      </div>
+      <div class="flex-1 overflow-y-auto p-3 space-y-2">
+        <button id="new-chat" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200 font-medium">
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M12 5v14M5 12h14"/></svg>
+          New Chat
+        </button>
+<div class="pt-2">
+          <div class="text-xs uppercase tracking-wider text-gray-500 px-2 mb-1">Recent</div>
+          <ul id="chat-list" class="space-y-1"></ul>
+        </div>
+      </div>
+      <div class="p-3 border-t border-gray-200">
+        <div class="space-y-2">
+          <div>
+            <label class="block text-xs font-medium text-gray-600 mb-1">Hugging Face Token (Optional)</label>
+            <input id="hf-token" type="password" placeholder="hf_..." class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200" />
+            <p class="text-[11px] text-gray-500 mt-1">For private models. Not required for public models.</p>
+          </div>
+<div>
+            <label class="block text-xs font-medium text-gray-600 mb-1">Local Model</label>
+            <div class="space-y-2">
+              <select id="model-select" class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200">
+                <option value="microsoft/DialoGPT-medium">microsoft/DialoGPT-medium (2.5GB)</option>
+                <option value="microsoft/DialoGPT-large">microsoft/DialoGPT-large (3.5GB)</option>
+                <option value="mistralai/Mistral-7B-Instruct-v0.1">mistralai/Mistral-7B-Instruct-v0.1 (7GB)</option>
+                <option value="TheBloke/CodeLlama-7B-Instruct-GGUF">TheBloke/CodeLlama-7B-Instruct-GGUF (4GB)</option>
+                <option value="local-upload">📁 Upload from Computer</option>
+              </select>
+              <div id="local-model-upload" class="hidden">
+                <input type="file" id="model-file-input" accept=".bin,.safetensors,.gguf,.ggml,.pt,.pth" class="hidden" />
+                <button id="upload-model-btn" class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl border-2 border-dashed border-gray-300 hover:border-primary-400 hover:bg-primary-50/50 transition-all duration-200 text-sm font-medium">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                    <path stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+                  </svg>
+                  Choose Model File
+                </button>
+                <p id="selected-model-name" class="text-[11px] text-gray-600 mt-1 truncate"></p>
+              </div>
+            </div>
+            <p class="text-[11px] text-gray-500 mt-1">Downloads on first use or upload your own model files.</p>
+          </div>
+          <div>
+            <label class="block text-xs font-medium text-gray-600 mb-1">Template</label>
+            <select id="template-select" class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200">
+              <option value="vibecode">🚀 VibeCode - Web Apps</option>
+              <option value="website">🌐 Clean Website</option>
+              <option value="landing">🎯 Landing Page</option>
+              <option value="portfolio">💼 Portfolio</option>
+              <option value="saas">📊 SaaS Dashboard</option>
+              <option value="ecommerce">🛒 E-commerce</option>
+              <option value="blog">📝 Blog/CMS</option>
+            </select>
+          </div>
+</div>
+      </div>
+</aside>
+    <!-- Main -->
+    <main class="flex-1 flex flex-col">
+      <!-- Top bar -->
+      <header class="h-16 border-b border-gray-200 flex items-center justify-between px-4 bg-white">
+        <div class="flex items-center gap-3">
+          <button id="mobile-menu-btn" class="md:hidden inline-flex items-center justify-center w-9 h-9 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200" title="Toggle sidebar">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M3 6h18M3 12h18M3 18h18"/></svg>
+          </button>
+          <div class="font-semibold text-lg">DeepSite NIM</div>
+        </div>
+        <div class="flex items-center gap-2">
+          <button id="export-chat" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200 text-sm font-medium">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg>
+            Export
+          </button>
+</div>
+      </header>
+      <!-- Messages -->
+      <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4">
+        <div id="welcome" class="max-w-3xl mx-auto text-center mt-10">
+          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary-50 to-secondary-50 text-primary-700 text-sm border border-primary-200/50 backdrop-blur-sm">
+            ✨ Powered by Local AI
+          </div>
+          <h1 class="text-4xl font-bold mb-3 bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">What can we build today?</h1>
+          <p class="text-gray-600 text-lg">Describe your web app, website, or idea. We'll generate code and show you a live preview.</p>
+          <div class="mt-8 grid grid-cols-2 md:grid-cols-3 gap-4">
+            <button onclick="quickTemplate('vibecode')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 to-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <div class="relative">
+                <div class="font-semibold text-sm mb-1">🚀 VibeCode App</div>
+                <div class="text-xs text-gray-500">Modern web app with vibecoding</div>
+              </div>
+            </button>
+            <button onclick="quickTemplate('website')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <div class="relative">
+                <div class="font-semibold text-sm mb-1">🌐 Clean Website</div>
+                <div class="text-xs text-gray-500">Professional business site</div>
+              </div>
+            </button>
+            <button onclick="quickTemplate('saas')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <div class="relative">
+                <div class="font-semibold text-sm mb-1">📊 SaaS Dashboard</div>
+                <div class="text-xs text-gray-500">Analytics & admin panel</div>
+              </div>
+            </button>
+          </div>
+        </div>
+</div>
+      <!-- Preview Panel (Initially Hidden) -->
+      <div id="preview-panel" class="hidden border-t border-gray-200 bg-gray-900">
+        <div class="h-80 flex flex-col">
+          <div class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700">
+            <div class="flex items-center gap-2">
+              <div class="w-3 h-3 rounded-full bg-red-500"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <div class="w-3 h-3 rounded-full bg-green-500"></div>
+              <span class="text-gray-300 text-sm ml-3">Live Preview</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <button id="refresh-preview" class="text-xs text-gray-400 hover:text-white">Refresh</button>
+              <button id="open-preview" class="text-xs text-gray-400 hover:text-white">Open</button>
+              <button id="close-preview" class="text-xs text-gray-400 hover:text-white">Close</button>
+            </div>
+          </div>
+          <iframe id="preview-frame" class="flex-1 w-full bg-white rounded-b-xl" sandbox="allow-scripts allow-same-origin"></iframe>
+        </div>
+      </div>
+<!-- Composer -->
+      <div class="border-t border-gray-200 bg-gray-50 p-4">
+        <div class="max-w-3xl mx-auto">
+          <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
+            <textarea id="prompt" rows="1" placeholder="Describe what you want to build..." class="w-full resize-none rounded-t-xl px-4 py-3 outline-none placeholder:text-gray-400"></textarea>
+            <div class="flex items-center justify-between px-3 py-2">
+              <div class="flex items-center gap-2 text-xs text-gray-500">
+                <span id="status-text">Ready</span>
+                <span id="model-status"></span>
+              </div>
+              <div class="flex items-center gap-2">
+                <button id="stop-btn" class="hidden inline-flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-200 hover:bg-gray-100 text-sm">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M6 6h12v12H6z"/></svg>
+                  Stop
+                </button>
+                <button id="send-btn" class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700 text-sm">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M22 2L11 13"/><path stroke-width="2" d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
+                  Generate
+                </button>
+              </div>
+            </div>
+          </div>
+          <p class="text-[11px] text-gray-500 mt-2">AI runs locally in your browser. No data leaves your device.</p>
+        </div>
+      </div>
+    </main>
+  </div>
+  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>

package.json ADDED Viewed

	@@ -0,0 +1,31 @@

+json
+{
+  "name": "vibecode-local",
+  "version": "2.0.0",
+  "description": "Local AI-powered code generation tool for web apps, websites, and applications with live preview",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "keywords": [
+    "ai",
+    "code-generation",
+    "local-ai",
+    "web-development",
+    "vibecode",
+    "preview",
+    "huggingface"
+  ],
+  "author": "DeepSite Community",
+  "license": "MIT",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.19.2"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,835 @@

+(() => {
+  // State
+  let chats = loadChats();
+  let currentChatId = null;
+  let abortController = null;
+  let currentModel = null;
+  let modelLoading = false;
+  let previewVisible = false;
+  let generatedHTML = '';
+  let selectedLocalModel = null;
+// Templates for different project types
+  const templates = {
+    vibecode: {
+      name: "VibeCode App",
+      description: "Modern web app with vibecoding aesthetics",
+      structure: {
+        html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VibeApp</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .glass { backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); }
+        .neon { text-shadow: 0 0 10px currentColor; }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-white mb-4 neon">VibeApp</h1>
+            <p class="text-white/80">Modern vibes, clean code, smooth UX</p>
+        </header>
+        <div class="grid md:grid-cols-3 gap-6">
+            <div class="glass rounded-lg p-6 shadow-lg">
+                <h3 class="text-lg font-semibold mb-3">Dashboard</h3>
+                <p class="text-sm opacity-80">Clean overview of your data</p>
+            </div>
+            <div class="glass rounded-lg p-6 shadow-lg">
+                <h3 class="text-lg font-semibold mb-3">Analytics</h3>
+                <p class="text-sm opacity-80">Real-time insights</p>
+            </div>
+            <div class="glass rounded-lg p-6 shadow-lg">
+                <h3 class="text-lg font-semibold mb-3">Settings</h3>
+                <p class="text-sm opacity-80">Configure your vibe</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>`,
+        js: `// VibeApp JavaScript
+console.log('VibeApp loaded!');
+document.addEventListener('DOMContentLoaded', function() {
+    // Add smooth animations
+    const cards = document.querySelectorAll('.glass');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        setTimeout(() => {
+            card.style.transition = 'all 0.5s ease';
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+});`
+      }
+    },
+    website: {
+      name: "Clean Website",
+      description: "Professional business website",
+      structure: {
+        html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Professional Website</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-white">
+    <nav class="bg-white shadow-sm border-b">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <h1 class="text-xl font-bold text-gray-900">YourBrand</h1>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900">Services</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+                <div class="text-center">
+                    <h1 class="text-5xl font-bold mb-6">Professional Solutions</h1>
+                    <p class="text-xl mb-8">We create amazing digital experiences</p>
+                    <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+</html>`,
+        js: `// Professional Website JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Website loaded successfully');
+});`
+      }
+    },
+    saas: {
+      name: "SaaS Dashboard",
+      description: "Analytics & admin panel",
+      structure: {
+        html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SaaS Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="min-h-screen flex">
+        <!-- Sidebar -->
+        <div class="w-64 bg-white shadow-sm">
+            <div class="p-6">
+                <h2 class="text-xl font-bold text-gray-800">Dashboard</h2>
+            </div>
+            <nav class="px-4 space-y-2">
+                <a href="#" class="block px-3 py-2 text-gray-600 rounded-md bg-blue-50">Overview</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Analytics</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Users</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Settings</a>
+            </nav>
+        </div>
+        <!-- Main Content -->
+        <div class="flex-1">
+            <header class="bg-white shadow-sm border-b px-6 py-4">
+                <h1 class="text-2xl font-semibold text-gray-900">Overview</h1>
+            </header>
+            <main class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                    <div class="bg-white p-6 rounded-lg shadow-sm">
+                        <h3 class="text-sm font-medium text-gray-500">Total Users</h3>
+                        <p class="text-2xl font-semibold text-gray-900">1,234</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm">
+                        <h3 class="text-sm font-medium text-gray-500">Revenue</h3>
+                        <p class="text-2xl font-semibold text-gray-900">$12,345</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm">
+                        <h3 class="text-sm font-medium text-gray-500">Growth</h3>
+                        <p class="text-2xl font-semibold text-gray-900">+23%</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm">
+                        <h3 class="text-sm font-medium text-gray-500">Churn</h3>
+                        <p class="text-2xl font-semibold text-gray-900">-2.1%</p>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-sm p-6">
+                    <h3 class="text-lg font-medium text-gray-900 mb-4">Revenue Chart</h3>
+                    <canvas id="revenueChart" width="400" height="200"></canvas>
+                </div>
+            </main>
+        </div>
+    </div>
+</body>
+</html>`,
+        js: `// SaaS Dashboard JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize chart
+    const ctx = document.getElementById('revenueChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+            datasets: [{
+                label: 'Revenue',
+                data: [12000, 19000, 15000, 25000, 22000, 30000],
+                borderColor: 'rgb(59, 130, 246)',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.4
+            }]
+        },
+        options: {
+            responsive: true,
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+});`
+      }
+    }
+  };
+  // Elements
+  const els = {
+    mobileMenuBtn: document.getElementById('mobile-menu-btn'),
+    chatList: document.getElementById('chat-list'),
+    newChatBtn: document.getElementById('new-chat'),
+    exportChatBtn: document.getElementById('export-chat'),
+    togglePreviewBtn: document.getElementById('toggle-preview'),
+    messages: document.getElementById('messages'),
+    welcome: document.getElementById('welcome'),
+    prompt: document.getElementById('prompt'),
+    sendBtn: document.getElementById('send-btn'),
+    stopBtn: document.getElementById('stop-btn'),
+    hfToken: document.getElementById('hf-token'),
+    modelSelect: document.getElementById('model-select'),
+    templateSelect: document.getElementById('template-select'),
+    statusText: document.getElementById('status-text'),
+    modelStatus: document.getElementById('model-status'),
+    previewPanel: document.getElementById('preview-panel'),
+    previewFrame: document.getElementById('preview-frame'),
+    refreshPreview: document.getElementById('refresh-preview'),
+    openPreview: document.getElementById('open-preview'),
+    closePreview: document.getElementById('close-preview'),
+  };
+  // Init
+  init();
+  function init() {
+    // Load saved settings
+    const savedToken = localStorage.getItem('hf_token') || '';
+    els.hfToken.value = savedToken;
+    // Events
+    els.newChatBtn.addEventListener('click', newChat);
+    els.exportChatBtn.addEventListener('click', exportCurrentChat);
+    els.togglePreviewBtn.addEventListener('click', togglePreview);
+    els.sendBtn.addEventListener('click', onSend);
+    els.stopBtn.addEventListener('click', stopGeneration);
+    els.prompt.addEventListener('keydown', onPromptKeyDown);
+    els.hfToken.addEventListener('change', () => {
+      localStorage.setItem('hf_token', els.hfToken.value.trim());
+      toast('Hugging Face token saved.');
+    });
+    els.modelSelect.addEventListener('change', () => {
+      localStorage.setItem('selected_model', els.modelSelect.value);
+      updateModelStatus('Model changed. Will load on first use.');
+      handleModelSelectionChange();
+    });
+    els.templateSelect.addEventListener('change', () => {
+      localStorage.setItem('selected_template', els.templateSelect.value);
+    });
+    // Local model upload events
+    els.uploadModelBtn.addEventListener('click', () => {
+      els.modelFileInput.click();
+    });
+    els.modelFileInput.addEventListener('change', handleModelFileSelect);
+    // Template selection events
+    els.templateSelect.addEventListener('change', () => {
+      localStorage.setItem('selected_template', els.templateSelect.value);
+    });
+    // Enhanced button interactions
+    addButtonInteractions();
+    // Preview events
+    els.refreshPreview.addEventListener('click', refreshPreview);
+    els.openPreview.addEventListener('click', openPreviewInWindow);
+    els.closePreview.addEventListener('click', togglePreview);
+// Restore settings
+    const savedModel = localStorage.getItem('selected_model');
+    if (savedModel) els.modelSelect.value = savedModel;
+    const savedLocalModel = localStorage.getItem('selected_local_model');
+    if (savedLocalModel) {
+      selectedLocalModel = JSON.parse(savedLocalModel);
+      updateLocalModelDisplay();
+    }
+    const savedTemplate = localStorage.getItem('selected_template');
+    if (savedTemplate) els.templateSelect.value = savedTemplate;
+// Render chat list
+    renderChatList();
+    // Auto-select last chat or create new
+    if (chats.length > 0) {
+      openChat(chats[chats.length - 1].id);
+    } else {
+      newChat();
+    }
+    // Auto-resize textarea
+    autoResize(els.prompt);
+    els.prompt.addEventListener('input', () => autoResize(els.prompt));
+  }
+  function addButtonInteractions() {
+    // Add ripple effect to all buttons
+    document.querySelectorAll('button').forEach(button => {
+      button.addEventListener('click', function(e) {
+        const ripple = document.createElement('span');
+        const rect = this.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        ripple.style.width = ripple.style.height = size + 'px';
+        ripple.style.left = x + 'px';
+        ripple.style.top = y + 'px';
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
+        setTimeout(() => {
+          ripple.remove();
+        }, 600);
+      });
+    });
+  }
+  // Add CSS for ripple effect
+  const style = document.createElement('style');
+  style.textContent = `
+    .ripple {
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      transform: scale(0);
+      animation: ripple-animation 0.6s linear;
+      pointer-events: none;
+    }
+    @keyframes ripple-animation {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+function loadChats() {
+    try {
+      return JSON.parse(localStorage.getItem('deepsite_chats') || '[]');
+    } catch {
+      return [];
+    }
+  }
+  function saveChats() {
+    localStorage.setItem('deepsite_chats', JSON.stringify(chats));
+  }
+  function renderChatList() {
+    els.chatList.innerHTML = '';
+    if (chats.length === 0) {
+      els.chatList.innerHTML = '<li class="text-sm text-gray-500 px-3 py-2">No chats yet</li>';
+      return;
+    }
+    chats.forEach(c => {
+      const li = document.createElement('li');
+      li.className = 'group';
+      li.innerHTML = `
+        <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 ${currentChatId === c.id ? 'bg-gray-100' : ''}">
+          <div class="flex items-start justify-between">
+            <div class="truncate text-sm">
+              ${escapeHTML(c.title || 'Untitled')}
+            </div>
+            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition">
+              <button data-action="rename" class="p-1 hover:bg-gray-200 rounded" title="Rename">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <path stroke-width="2" d="M4 21h4l10.5-10.5a1.5 1.5 0 000-2.12l-2.88-2.88a1.5 1.5 0 00-2.12 0L3 16v5z"/>
+                </svg>
+              </button>
+              <button data-action="delete" class="p-1 hover:bg-gray-200 rounded" title="Delete">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <path stroke-width="2" d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="text-[11px] text-gray-500">${formatDate(c.createdAt)}</div>
+        </button>
+      `;
+      li.addEventListener('click', (e) => {
+        const actBtn = e.target.closest('button[data-action]');
+        if (actBtn) {
+          e.stopPropagation();
+          const action = actBtn.getAttribute('data-action');
+          if (action === 'rename') renameChat(c.id);
+          if (action === 'delete') deleteChat(c.id);
+          return;
+        }
+        openChat(c.id);
+      });
+      els.chatList.appendChild(li);
+    });
+  }
+  function newChat() {
+    const id = uid();
+    const chat = { id, title: 'New Chat', createdAt: Date.now(), messages: [] };
+    chats.push(chat);
+    saveChats();
+    renderChatList();
+    openChat(id);
+  }
+  function openChat(id) {
+    currentChatId = id;
+    const chat = chats.find(c => c.id === id);
+    if (!chat) return;
+    renderMessages(chat);
+    renderChatList();
+    els.prompt.focus();
+  }
+  function deleteChat(id) {
+    const idx = chats.findIndex(c => c.id === id);
+    if (idx === -1) return;
+    chats.splice(idx, 1);
+    saveChats();
+    renderChatList();
+    if (currentChatId === id) {
+      if (chats.length > 0) openChat(chats[chats.length - 1].id);
+      else newChat();
+    }
+  }
+  function renameChat(id) {
+    const chat = chats.find(c => c.id === id);
+    if (!chat) return;
+    const title = prompt('Rename chat:', chat.title);
+    if (title && title.trim()) {
+      chat.title = title.trim();
+      saveChats();
+      renderChatList();
+    }
+  }
+  function renderMessages(chat) {
+    els.messages.innerHTML = '';
+    if (!chat.messages || chat.messages.length === 0) {
+      els.messages.appendChild(els.welcome);
+      els.welcome.classList.remove('hidden');
+    } else {
+      els.welcome.classList.add('hidden');
+      chat.messages.forEach(m => {
+        const el = renderMessage(m);
+        els.messages.appendChild(el);
+      });
+      scrollToBottom();
+    }
+  }
+  function renderMessage(message) {
+    const wrap = document.createElement('div');
+    wrap.className = `message ${message.role}`;
+    const avatar = document.createElement('div');
+    avatar.className = 'avatar';
+    avatar.textContent = message.role === 'user' ? 'U' : 'AI';
+    const bubble = document.createElement('div');
+    bubble.className = 'bubble';
+    bubble.innerHTML = escapeHTML(message.content || '');
+    wrap.appendChild(avatar);
+    wrap.appendChild(bubble);
+    return wrap;
+  }
+  async function onSend() {
+    const text = els.prompt.value.trim();
+    if (!text) return;
+    // Ensure chat exists
+    if (!currentChatId) newChat();
+    const chat = chats.find(c => c.id === currentChatId);
+    // Show status
+    setStatus('Thinking...');
+    // Append user message
+    const userMsg = { role: 'user', content: text };
+    chat.messages.push(userMsg);
+    const userEl = renderMessage(userMsg);
+    els.messages.appendChild(userEl);
+    els.welcome.classList.add('hidden');
+    scrollToBottom();
+    // Clear prompt
+    els.prompt.value = '';
+    autoResize(els.prompt);
+    // Prepare assistant message placeholder
+    const assistantMsg = { role: 'assistant', content: '', type: 'code' };
+    chat.messages.push(assistantMsg);
+    const assistantEl = renderMessage(assistantMsg);
+    assistantEl.querySelector('.bubble').innerHTML = '';
+    els.messages.appendChild(assistantEl);
+    // UI state
+    els.sendBtn.disabled = true;
+    els.stopBtn.classList.remove('hidden');
+    setStatus('Generating code...');
+    // Create enhanced prompt for code generation
+    const template = els.templateSelect.value;
+    const enhancedPrompt = createEnhancedPrompt(text, template);
+    try {
+      // Simulate AI response with template-based generation
+      const generatedCode = await generateCode(enhancedPrompt, template);
+      if (generatedCode) {
+        assistantMsg.content = generatedCode;
+        const bubble = assistantEl.querySelector('.bubble');
+        bubble.innerHTML = formatCodeDisplay(generatedCode);
+        // Auto-update preview if visible
+        if (previewVisible) {
+          updatePreview(generatedCode);
+        }
+        // Add "Run Preview" button
+        addPreviewButton(assistantEl, generatedCode);
+      }
+    } catch (error) {
+      console.error('Generation error:', error);
+      toast('Generation failed. Please try again.');
+      const bubble = assistantEl.querySelector('.bubble');
+      if (bubble && !bubble.textContent.trim()) {
+        bubble.textContent = 'Sorry, something went wrong while generating the code.';
+      }
+    } finally {
+      setStatus('Ready');
+      els.sendBtn.disabled = false;
+      els.stopBtn.classList.add('hidden');
+      saveChats();
+    }
+  }
+  function createEnhancedPrompt(userInput, template) {
+    const systemPrompts = {
+      vibecode: `You are an expert full-stack developer specializing in modern, trendy web applications with vibecoding aesthetics. Create clean, responsive code using:
+- Tailwind CSS for styling
+- Modern JavaScript (ES6+)
+- Gradient backgrounds and glassmorphism effects
+- Smooth animations and transitions
+- Mobile-first responsive design
+Generate complete, functional HTML code for: ${userInput}`,
+      website: `You are a professional web developer creating clean, modern websites. Focus on:
+- Semantic HTML structure
+- Tailwind CSS for professional styling
+- Responsive design principles
+- Accessibility best practices
+- Clean, maintainable code
+Generate complete HTML for: ${userInput}`,
+      saas: `You are a SaaS developer creating admin dashboards and business applications. Create:
+- Professional dashboard layouts
+- Data visualization components
+- User management interfaces
+- Analytics and reporting features
+- Modern UI/UX patterns
+Generate complete HTML for: ${userInput}`,
+      landing: `You are a landing page specialist creating conversion-optimized pages. Focus on:
+- Hero sections with compelling CTAs
+- Feature showcases
+- Social proof sections
+- Contact/lead capture forms
+- Mobile-optimized designs
+Generate complete HTML for: ${userInput}`,
+      portfolio: `You are a portfolio designer creating impressive personal websites. Create:
+- Creative layouts showcasing projects
+- About sections with personality
+- Contact forms and social links
+- Interactive elements
+- Performance-optimized code
+Generate complete HTML for: ${userInput}`,
+      ecommerce: `You are an e-commerce developer creating online store interfaces. Build:
+- Product catalog layouts
+- Shopping cart functionality
+- Checkout processes
+- Search and filtering
+- Modern e-commerce UX
+Generate complete HTML for: ${userInput}`,
+      blog: `You are a blog/CMS developer creating content-focused websites. Create:
+- Clean reading layouts
+- Article metadata
+- Comment systems
+- Author profiles
+- Content organization
+Generate complete HTML for: ${userInput}`
+    };
+    return systemPrompts[template] || systemPrompts.vibecode;
+  }
+  async function generateCode(prompt, template) {
+    // For demo purposes, return template-based generated code
+    // In a real implementation, this would call the local model
+    // Simulate processing time
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    const templateStruct = templates[template] || templates.vibecode;
+    // Enhance the template based on user input
+    let generatedHTML = templateStruct.structure.html;
+    let generatedJS = templateStruct.structure.js;
+    // Simple keyword replacement based on user input
+    const keywords = prompt.toLowerCase();
+    if (keywords.includes('dark') || keywords.includes('night')) {
+      generatedHTML = generatedHTML.replace('bg-white', 'bg-gray-900')
+                                   .replace('text-gray-900', 'text-white')
+                                   .replace('text-gray-600', 'text-gray-300');
+    }
+    if (keywords.includes('colorful') || keywords.includes('rainbow')) {
+      generatedHTML = generatedHTML.replace(
+        'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        'background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)'
+      );
+    }
+    if (keywords.includes('dashboard') || keywords.includes('analytics')) {
+      generatedHTML = generatedHTML.replace('VibeApp', 'DataViz Dashboard')
+                                   .replace('Modern vibes, clean code, smooth UX', 'Real-time insights and analytics');
+    }
+    return {
+      html: generatedHTML,
+      js: generatedJS,
+      preview: generatedHTML.replace('</body>', `<script>${generatedJS}</script></body>`)
+    };
+  }
+  function formatCodeDisplay(codeObj) {
+    return `
+      <div class="code-generation">
+        <div class="mb-4">
+          <h4 class="font-semibold text-sm mb-2 flex items-center gap-2">
+            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+            Generated HTML
+          </h4>
+          <div class="bg-gray-50 p-3 rounded border text-xs overflow-x-auto">
+            <pre><code>${escapeHTML(codeObj.html)}</code></pre>
+          </div>
+        </div>
+        <div class="mb-4">
+          <h4 class="font-semibold text-sm mb-2 flex items-center gap-2">
+            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
+            JavaScript
+          </h4>
+          <div class="bg-gray-50 p-3 rounded border text-xs overflow-x-auto">
+            <pre><code>${escapeHTML(codeObj.js)}</code></pre>
+          </div>
+        </div>
+        <button onclick="runPreview('${escapeHTML(codeObj.preview)}')" class="w-full bg-neon-600 text-white px-4 py-2 rounded hover:bg-neon-700 transition">
+          🚀 Run Live Preview
+        </button>
+      </div>
+    `;
+  }
+  function addPreviewButton(assistantEl, codeObj) {
+    // Already handled in formatCodeDisplay
+  }
+  function runPreview(previewHTML) {
+    generatedHTML = previewHTML;
+    if (!previewVisible) {
+      togglePreview();
+    }
+    updatePreview(previewHTML);
+  }
+  function togglePreview() {
+    previewVisible = !previewVisible;
+    if (previewVisible) {
+      els.previewPanel.classList.remove('hidden');
+      els.togglePreviewBtn.textContent = 'Hide Preview';
+      if (generatedHTML) {
+        updatePreview(generatedHTML);
+      }
+    } else {
+      els.previewPanel.classList.add('hidden');
+      els.togglePreviewBtn.textContent = 'Preview';
+    }
+  }
+  function updatePreview(htmlContent) {
+    // Create a complete HTML document if needed
+    if (!htmlContent.includes('<!DOCTYPE') && !htmlContent.includes('<html')) {
+      htmlContent = `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Generated Code</title></head>${htmlContent}</html>`;
+    }
+    // Update iframe
+    els.previewFrame.srcdoc = htmlContent;
+    toast('Preview updated!');
+  }
+  function refreshPreview() {
+    if (generatedHTML) {
+      updatePreview(generatedHTML);
+      toast('Preview refreshed!');
+    }
+  }
+  function openPreviewInWindow() {
+    if (generatedHTML) {
+      const newWindow = window.open('', '_blank');
+      newWindow.document.write(generatedHTML);
+      newWindow.document.close();
+    }
+  }
+  function stopGeneration() {
+    abortController = null;
+    els.stopBtn.classList.add('hidden');
+    els.sendBtn.disabled = false;
+    setStatus('Stopped');
+  }
+function onPromptKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  }
+  function exportCurrentChat() {
+    const chat = chats.find(c => c.id === currentChatId);
+    if (!chat) return;
+    const data = {
+      title: chat.title,
+      model: els.modelSelect.value,
+      createdAt: chat.createdAt,
+      messages: chat.messages
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${sanitizeFilename(chat.title || 'chat')}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+  function scrollToBottom() {
+    els.messages.scrollTo({ top: els.messages.scrollHeight, behavior: 'smooth' });
+  }
+  function autoResize(el) {
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+  }
+  function setStatus(text) {
+    els.statusText.textContent = text;
+  }
+  function toast(msg) {
+    // Simple non-blocking toast
+    const t = document.createElement('div');
+    t.textContent = msg;
+    t.className = 'fixed bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-gray-900 text-white text-sm rounded-md shadow-lg z-[60]';
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 2200);
+  }
+  function updateModelStatus(msg) {
+    els.modelStatus.textContent = msg ? `• ${msg}` : '';
+  }
+  // Quick template functions
+  window.quickTemplate = function(template) {
+    els.templateSelect.value = template;
+    const templateInfo = templates[template];
+    if (templateInfo) {
+      els.prompt.value = `Create a ${templateInfo.description}`;
+      autoResize(els.prompt);
+    }
+  };
+  window.runPreview = runPreview;
+  function uid() {
+    return Math.random().toString(36).slice(2) + Date.now().toString(36);
+  }
+function escapeHTML(str) {
+    return String(str).replace(/[&<>"']/g, s => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    }[s]));
+  }
+  function formatDate(ts) {
+    try {
+      return new Date(ts).toLocaleString();
+    } catch {
+      return '';
+    }
+  }
+  function sanitizeFilename(name) {
+    return String(name).replace(/[^\w\-]+/g, '_').slice(0, 64);
+  }
+  async
+  function safeText(res) {
+    try { return await res.text(); } catch { return ''; }
+  }
+})();

server.js ADDED Viewed

	@@ -0,0 +1,508 @@

+const express = require('express');
+const path = require('path');
+const cors = require('cors');
+const app = express();
+const PORT = process.env.PORT || 3000;
+// Simple in-memory rate limit per IP (token bucket)
+const buckets = new Map();
+function rateLimit(req, res, next) {
+  const ip = req.ip || req.connection.remoteAddress || 'unknown';
+  const now = Date.now();
+  const cap = 100; // tokens
+  const refill = 50; // tokens per minute
+  const b = buckets.get(ip) || { tokens: cap, last: now };
+  const elapsed = (now - b.last) / 1000 / 60; // minutes
+  b.tokens = Math.min(cap, b.tokens + elapsed * refill);
+  b.last = now;
+  if (b.tokens < 1) {
+    return res.status(429).json({ error: 'Too many requests. Please slow down.' });
+  }
+  b.tokens -= 1;
+  buckets.set(ip, b);
+  next();
+}
+// Middleware
+app.use(cors());
+app.use(express.json({ limit: '2mb' }));
+// Health check
+app.get('/api/health', (req, res) => {
+  res.json({
+    ok: true,
+    time: Date.now(),
+    service: 'VibeCode Local AI',
+    version: '2.0.0'
+  });
+});
+// Template generation endpoint
+app.post('/api/generate', rateLimit, async (req, res) => {
+  try {
+    const { prompt, template, style } = req.body || {};
+    if (!prompt || !template) {
+      return res.status(400).json({
+        error: 'Missing required parameters: prompt, template'
+      });
+    }
+    // Template configurations
+    const templates = {
+      vibecode: {
+        name: "VibeCode App",
+        description: "Modern web app with vibecoding aesthetics",
+        structure: {
+          html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VibeApp</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .glass {
+            backdrop-filter: blur(16px) saturate(180%);
+            background-color: rgba(255, 255, 255, 0.75);
+            border: 1px solid rgba(255, 255, 255, 0.125);
+        }
+        .neon {
+            text-shadow: 0 0 10px currentColor;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .float { animation: float 6s ease-in-out infinite; }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-white mb-4 neon float">${prompt}</h1>
+            <p class="text-white/80">Modern vibes, clean code, smooth UX</p>
+        </header>
+        <div class="grid md:grid-cols-3 gap-6">
+            <div class="glass rounded-lg p-6 shadow-lg hover:shadow-xl transition">
+                <h3 class="text-lg font-semibold mb-3">Dashboard</h3>
+                <p class="text-sm opacity-80">Clean overview of your data</p>
+            </div>
+            <div class="glass rounded-lg p-6 shadow-lg hover:shadow-xl transition">
+                <h3 class="text-lg font-semibold mb-3">Analytics</h3>
+                <p class="text-sm opacity-80">Real-time insights</p>
+            </div>
+            <div class="glass rounded-lg p-6 shadow-lg hover:shadow-xl transition">
+                <h3 class="text-lg font-semibold mb-3">Settings</h3>
+                <p class="text-sm opacity-80">Configure your vibe</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>`,
+          js: `// VibeApp JavaScript
+console.log('${prompt} loaded!');
+document.addEventListener('DOMContentLoaded', function() {
+    // Add smooth animations
+    const cards = document.querySelectorAll('.glass');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        setTimeout(() => {
+            card.style.transition = 'all 0.5s ease';
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+    // Add hover effects
+    const hero = document.querySelector('.neon');
+    if (hero) {
+        hero.addEventListener('mouseenter', function() {
+            this.style.textShadow = '0 0 20px currentColor, 0 0 30px currentColor';
+        });
+        hero.addEventListener('mouseleave', function() {
+            this.style.textShadow = '0 0 10px currentColor';
+        });
+    }
+});`
+        }
+      },
+      website: {
+        name: "Clean Website",
+        description: "Professional business website",
+        structure: {
+          html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Professional Website - ${prompt}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-white">
+    <nav class="bg-white shadow-sm border-b">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <h1 class="text-xl font-bold text-gray-900">YourBrand</h1>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-gray-600 hover:text-gray-900 transition">Home</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900 transition">About</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900 transition">Services</a>
+                    <a href="#" class="text-gray-600 hover:text-gray-900 transition">Contact</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+                <div class="text-center">
+                    <h1 class="text-5xl font-bold mb-6">${prompt}</h1>
+                    <p class="text-xl mb-8">We create amazing digital experiences</p>
+                    <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </section>
+        <section class="py-16">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-semibold mb-2">Fast & Efficient</h3>
+                        <p class="text-gray-600">Lightning-fast performance and optimized workflows</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-semibold mb-2">Quality Assured</h3>
+                        <p class="text-gray-600">Every project meets our highest standards</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 109.75 9.75A9.75 9.75 0 0012 2.25z"></path>
+                            </svg>
+                        </div>
+                        <h3 class="text-lg font-semibold mb-2">24/7 Support</h3>
+                        <p class="text-gray-600">Round-the-clock assistance when you need it</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+</html>`,
+          js: `// Professional Website JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Professional website loaded successfully');
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+    // Add intersection observer for animations
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+    // Observe elements for animation
+    document.querySelectorAll('.text-center').forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(20px)';
+        el.style.transition = 'all 0.6s ease';
+        observer.observe(el);
+    });
+});`
+        }
+      },
+      saas: {
+        name: "SaaS Dashboard",
+        description: "Analytics & admin panel",
+        structure: {
+          html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SaaS Dashboard - ${prompt}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="min-h-screen flex">
+        <!-- Sidebar -->
+        <div class="w-64 bg-white shadow-sm">
+            <div class="p-6">
+                <h2 class="text-xl font-bold text-gray-800">Dashboard</h2>
+            </div>
+            <nav class="px-4 space-y-2">
+                <a href="#" class="block px-3 py-2 text-gray-600 rounded-md bg-blue-50 border-r-2 border-blue-500">Overview</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Analytics</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Users</a>
+                <a href="#" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-md">Settings</a>
+            </nav>
+        </div>
+        <!-- Main Content -->
+        <div class="flex-1">
+            <header class="bg-white shadow-sm border-b px-6 py-4">
+                <h1 class="text-2xl font-semibold text-gray-900">${prompt}</h1>
+                <p class="text-gray-600">Welcome back! Here's what's happening with your business.</p>
+            </header>
+            <main class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Total Users</h3>
+                                <p class="text-2xl font-semibold text-gray-900">1,234</p>
+                                <span class="text-sm text-green-600">+12%</span>
+                            </div>
+                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Revenue</h3>
+                                <p class="text-2xl font-semibold text-gray-900">$12,345</p>
+                                <span class="text-sm text-green-600">+8.2%</span>
+                            </div>
+                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Growth</h3>
+                                <p class="text-2xl font-semibold text-gray-900">+23%</p>
+                                <span class="text-sm text-green-600">+4.1%</span>
+                            </div>
+                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <h3 class="text-sm font-medium text-gray-500">Active Users</h3>
+                                <p class="text-2xl font-semibold text-gray-900">856</p>
+                                <span class="text-sm text-red-600">-2.1%</span>
+                            </div>
+                            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
+                                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="bg-white rounded-lg shadow-sm p-6">
+                        <h3 class="text-lg font-medium text-gray-900 mb-4">Revenue Chart</h3>
+                        <canvas id="revenueChart" width="400" height="200"></canvas>
+                    </div>
+                    <div class="bg-white rounded-lg shadow-sm p-6">
+                        <h3 class="text-lg font-medium text-gray-900 mb-4">User Activity</h3>
+                        <canvas id="activityChart" width="400" height="200"></canvas>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+</body>
+</html>`,
+          js: `// SaaS Dashboard JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize revenue chart
+    const ctx1 = document.getElementById('revenueChart').getContext('2d');
+    new Chart(ctx1, {
+        type: 'line',
+        data: {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+            datasets: [{
+                label: 'Revenue',
+                data: [12000, 19000, 15000, 25000, 22000, 30000],
+                borderColor: 'rgb(59, 130, 246)',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return ' + value.toLocaleString();
+                        }
+                    }
+                }
+            }
+        }
+    });
+    // Initialize activity chart
+    const ctx2 = document.getElementById('activityChart').getContext('2d');
+    new Chart(ctx2, {
+        type: 'doughnut',
+        data: {
+            labels: ['Desktop', 'Mobile', 'Tablet'],
+            datasets: [{
+                data: [45, 35, 20],
+                backgroundColor: [
+                    'rgba(59, 130, 246, 0.8)',
+                    'rgba(16, 185, 129, 0.8)',
+                    'rgba(245, 158, 11, 0.8)'
+                ]
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'bottom'
+                }
+            }
+        }
+    });
+    // Add real-time updates simulation
+    function updateMetrics() {
+        const metrics = document.querySelectorAll('.bg-white.p-6');
+        metrics.forEach(metric => {
+            const value = metric.querySelector('.text-2xl');
+            if (value && Math.random() > 0.7) {
+                // Simulate small changes
+                const currentValue = parseFloat(value.textContent.replace(/[^0-9.]/g, ''));
+                const change = (Math.random() - 0.5) * 0.1;
+                const newValue = currentValue * (1 + change);
+                value.textContent = value.textContent.replace(/\d+/, Math.round(newValue));
+            }
+        });
+    }
+    // Update metrics every 5 seconds
+    setInterval(updateMetrics, 5000);
+});`
+        }
+      }
+    };
+    const selectedTemplate = templates[template] || templates.vibecode;
+    // Enhance based on style preferences
+    let generatedHTML = selectedTemplate.structure.html;
+    let generatedJS = selectedTemplate.structure.js;
+    // Apply style modifications
+    if (style) {
+      if (style.includes('dark')) {
+        generatedHTML = generatedHTML
+          .replace(/bg-white/g, 'bg-gray-900')
+          .replace(/text-gray-900/g, 'text-white')
+          .replace(/text-gray-600/g, 'text-gray-300')
+          .replace(/text-gray-500/g, 'text-gray-400')
+          .replace(/bg-gray-50/g, 'bg-gray-800')
+          .replace(/border-gray-200/g, 'border-gray-700')
+          .replace(/shadow-sm/g, 'shadow-lg');
+      }
+      if (style.includes('colorful') || style.includes('rainbow')) {
+        generatedHTML = generatedHTML.replace(
+          'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          'background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)'
+        ).replace(
+          'from-blue-600 to-purple-600',
+          'from-red-500 via-yellow-500 to-green-500'
+        );
+      }
+    }
+    const fullHTML = generatedHTML.replace('</body>', `<script>${generatedJS}</script></body>`);
+    res.json({
+      success: true,
+      template: selectedTemplate.name,
+      html: generatedHTML,
+      js: generatedJS,
+      preview: fullHTML,
+      description: selectedTemplate.description
+    });
+  } catch (err) {
+    console.error('Template generation error:', err);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+// Serve static files AFTER API routes to ensure API routes take precedence
+app.use(express.static(path.join(__dirname)));
+app.listen(PORT, () => {
+  console.log(`VibeCode Local AI server running at http://localhost:${PORT}`);
+  console.log('API routes registered:');
+  console.log('  GET  /api/health');
+  console.log('  POST /api/generate');
+});

style.css CHANGED Viewed

@@ -1,28 +1,91 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Global light-mode baseline */
+:root {
+  --radius: 0.75rem;
 }
+/* Simple scrollbar for messages area */
+#messages::-webkit-scrollbar {
+  width: 10px;
+}
+#messages::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 9999px;
+}
+#messages {
+  scrollbar-width: thin;
+  scrollbar-color: #e5e7eb transparent;
 }
+/* Message bubbles */
+.message {
+  display: flex;
+  gap: 12px;
+  max-width: 860px;
+}
+.message .avatar {
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: white;
+}
+.message.user .avatar {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+}
+.message.assistant .avatar {
+  background: linear-gradient(135deg, #22c55e, #14b8a6);
+}
+.message .bubble {
+  border: 1px solid #e5e7eb;
+  background: white;
+  padding: 12px 14px;
+  border-radius: 14px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.message.assistant .bubble {
+  background: #f8fafc;
 }
+/* Mobile sidebar overlay */
+.mobile-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  z-index: 40;
+}
+.mobile-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  width: 80%;
+  max-width: 320px;
+  background: white;
+  z-index: 50;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+}
+.mobile-sidebar.open {
+  transform: translateX(0);
+}
+@media (min-width: 768px) {
+  .mobile-overlay, .mobile-sidebar {
+    display: none !important;
+  }
 }
+/* Buttons subtle hover */
+.btn {
+  transition: background 120ms ease-in-out, border-color 120ms ease-in-out;
 }
+/* Small utilities */
+.small-muted {
+  font-size: 12px;
+  color: #6b7280;
+}