### Initialize UI Style Selector

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Populates the style selection dropdown with available design presets and handles preview updates when a style is selected.

```javascript
const stylesData = [ { id: "business-pro", name: "商务专业", desc: "稳重深蓝色调，适中圆角，柔和阴影，适合企业级应用。使用 Lato 或 Open Sans 字体，强调专业性和可信度。" }, { id: "modern-saas", name: "现代 SaaS", desc: "通透的蓝紫渐变，大圆角设计，悬浮卡片效果。使用 Inter 字体，适合现代化 SaaS 产品，注重用户体验。" }, { id: "fintech-trust", name: "金融科技", desc: "深绿稳重配色，高端暗色背景，细节精致。使用 Montserrat 字体，传递安全感和专业性，适合金融类产品。" }, { id: "minimalist", name: "极致极简", desc: "纯粹的黑白灰，无多余装饰，极细边框。使用 Helvetica 字体，追求功能至上的设计理念。" }, { id: "cyberpunk", name: "赛博朋克", desc: "黑底霓虹光效，故障艺术风格，高对比度。使用 Orbitron 或 Rajdhani 字体，充满未来科技感。" }, { id: "neumorphism", name: "新拟态", desc: "柔和的内外阴影营造凸起质感，低对比度配色。使用 Nunito 字体，给人舒适温和的视觉体验。" }, { id: "glassmorphism", name: "玻璃拟态", desc: "背景模糊效果，半透明白色元素，磨砂玻璃质感。现代时尚，适合展示类页面。" }, { id: "playful-kids", name: "儿童趣味", desc: "糖果色系，超大圆角，粗边框设计。使用 Comic Sans 或圆体，充满童趣和活力。" }, { id: "dark-matter", name: "极客暗黑", desc: "深灰层级分明，代码编辑器风格。使用 Fira Code 或 JetBrains Mono 字体，适合开发者工具。" }, { id: "retro-80s", name: "复古80年代", desc: "像素风或合成器波风格，鲜艳的粉紫黄配色，粗黑边框。充满怀旧气息。" }, { id: "luxury-gold", name: "高端奢华", desc: "黑金配色，衬线字体，大量留白。传递高端品牌质感，适合奢侈品或高端服务。" }, { id: "industrial", name: "工业硬派", desc: "水泥灰主色，警示黄点缀，结构硬朗。适合工业、建筑类应用。" }, { id: "eco-nature", name: "生态自然", desc: "森系绿色，米色背景，圆润有机形状。传递环保、自然、健康的理念。" }, { id: "tech-blue", name: "科技蓝调", desc: "经典科技蓝，网格背景，数字化元素。适合科技公司、软件产品。" }, { id: "warm-coffee", name: "温暖咖啡", desc: "大地色系，舒适温暖，强调阅读体验。适合内容型网站、博客、电商。" }, { id: "aurora-gradient", name: "极光渐变", desc: "流动的青紫粉极光色彩,流体动画效果,半透明层叠。使用 Poppins 字体,营造梦幻科技感,适合创意类产品。" }, { id: "medical-clean", name: "医疗洁净", desc: "纯净的蓝白色系,大量留白,清晰的层级结构。使用 Roboto 字体,传递专业可靠的医疗形象。" }, { id: "neon-tokyo", name: "霓虹东京", desc: "深夜城市氛围,粉紫霓虹灯效,日式街头元素。使用 Noto Sans JP 字体,充满都市夜生活气息。" }, { id: "brutalism", name: "粗野主义", desc: "粗犷的几何形状,强烈的色块对比,原始混凝土质感。使用 Arial Black 字体,强调原始力量感。" }, { id: "pastel-dream", name: "马卡龙梦境", desc: "柔和的马卡龙配色,轻盈的阴影,圆润的气泡元素。使用 Quicksand 字体,营造甜美梦幻氛围。" }, { id: "swiss-design", name: "瑞士极简", desc: "网格系统主导,无衬线字体,黑白红经典配色。使用 Helvetica Neue 字体,追求理性与秩序。" }, { id: "vaporwave", name: "蒸汽波", desc: "粉紫青渐变,复古雕塑元素,故障艺术叠加。使用 Courier New 字体,充满网络怀旧美学。" }, { id: "organic-fluid", name: "有机流体", desc: "不规则曲线形状,流动的斑块效果,柔和的渐变。使用 Comfortaa 字体,展现自然生命力。" }, { id: "newspaper-classic", name: "报纸古典", desc: "黑白分栏布局,衬线字体为主,强调内容密度。使用 Georgia 或 Times 字体,传统媒体质感。" }, { id: "holographic", name: "全息投影", desc: "彩虹光谱渐变,镭射反光效果,未来感边框。使用 Exo 2 字体,科幻高级感,适合前沿科技产品。" }, { id: "scandinavian", name: "北欧简约", desc: "白色主导,淡蓝灰点缀,木纹质感元素。使用 Source Sans Pro 字体,宁静舒适的北欧风格。" }, { id: "graffiti-street", name: "街头涂鸦", desc: "大胆的色彩碰撞,手绘风格元素,倾斜动态排版。使用 Bangers 或手写字体,充满街头文化活力。" }, { id: "art-deco", name: "装饰艺术", desc: "几何对称图案,金色线条装饰,黑金配色。使用 Playfair Display 字体,复古奢华的20年代风格。" }, { id: "game-arcade", name: "街机游戏", desc: "像素风格图标,高饱和度配色,8-bit 音效视觉化。使用 Press Start 2P 字体,怀旧游戏厅氛围。" }, { id: "corporate-red", name: "企业正红", desc: "商务红为主色,深灰辅助色,强调权威感。使用 Roboto Condensed 字体,适合传统企业、政务系统。" }, { id: "sunset-gradient", name: "日落渐变", desc: "橙红黄紫的日落色彩,温暖的渐变过渡,柔和光晕。使用 Raleway 字体,浪漫温馨的氛围。" }, { id: "terminal-hacker", name: "终端黑客", desc: "黑底绿字,命令行风格,扫描线效果。使用 Source Code Pro 字体,极客与黑客文化风格。" }, { id: "watercolor-soft", name: "水彩柔和", desc: "水彩晕染效果,柔和的边缘,艺术感纹理。使用 Merriweather 字体,文艺清新,适合创意工作室。" }, { id: "neon-synthwave", name: "合成波浪", desc: "紫粉渐变背景,网格地平线,80年代未来主义。使用 Audiowide 字体,复古未来感,适合音乐类产品。" }, { id: "metro-modern", name: "都会现代", desc: "方块瓷砖布局,纯色色块,微软 Metro 风格。使用 Segoe UI 字体,简洁高效的现代界面。" }, { id: "cosmic-space", name: "宇宙星空", desc: "深邃星空背景,星云渐变,粒子光效。使用 Space Mono 字体,探索宇宙的神秘感。" }, { id: "paper-craft", name: "纸艺手工", desc: "分层纸张效果,柔和阴影,材质纹理。使用 Indie Flower 字体,温暖手工质感,适合教育类产品。" }, { id: "military-tactical", name: "军事战术", desc: "军绿迷彩色系,硬朗边框,功能性图标。使用 Teko 字体,强调实用性与力量感。" }, { id: "candy-pop", name: "糖果爆炸", desc: "高饱和度糖果色,波普艺术风格,圆点图案。使用 Fredoka One 字体,活力四射的年轻化设计。" }, { id: "zen-minimal", name: "禅意留白", desc: "极致留白,水墨元素,东方美学。使用宋体或明朝体,宁静致远的禅意空间。" } ]; let currentGeneratedCode = ""; let generationStartTime = 0; let generationHistory = []; let currentVersions = []; // 当前会话的版本管理 let currentVersionIndex = 0; let currentSessionId = null; let conversationMessages = []; // 会话消息历史 document.addEventListener('DOMContentLoaded', () => { loadSettings(); initStyleSelector(); loadHistory(); updateHistoryCount(); }); function initStyleSelector() { const select = document.getElementById('style-selector'); select.innerHTML = '<option value="" disabled selected>请选择 UI 风格...</option>'; stylesData.forEach(style => { const option = document.createElement('option'); option.value = style.id; option.textContent = style.name; select.appendChild(option); }); select.addEventListener('change', (e) => { const style = stylesData.find(s => s.id === e.target.value); if(style) { const box = document.getElementById('style-preview-box'); const desc = document.getElementById('style-desc'); box.classList.remove('hidden'); desc.textContent = style.desc; } }); }
```

--------------------------------

### Configure and Persist API Settings

Source: https://context7.com/metastem/aidesigner/llms.txt

Defines the structure for API connection settings and demonstrates how to save or retrieve them using localStorage.

```javascript
// API 配置对象结构
const config = {
    base: "https://api.openai.com/v1",  // API 基础 URL
    key: "sk-your-api-key",              // API 密钥
    model: "gpt-4o-mini",                // 模型名称，推荐: gpt-4o-mini, claude-3-5-sonnet
    maxTokens: 4000,                     // 最大生成长度 (500-16000)
    stream: true                         // 是否启用流式输出
};

// 保存配置到本地存储
localStorage.setItem('ui_gen_config', JSON.stringify(config));

// 读取配置
const savedConfig = JSON.parse(localStorage.getItem('ui_gen_config'));
```

--------------------------------

### Manage UI Settings and Notifications

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Functions to retrieve configuration from DOM elements, handle default values, and display styled toast notifications.

```javascript
ent.getElementById('stream-mode').checked = config.stream || false; } catch (e) { console.error('Failed to load settings:', e); } } else { document.getElementById('api-base').value = "https://api.openai.com/v1"; document.getElementById('api-model').value = "gpt-4o-mini"; document.getElementById('api-max-tokens').value = 4000; document.getElementById('stream-mode').checked = false; } } function getSettings() { return { base: document.getElementById('api-base').value.trim() || "https://api.openai.com/v1", key: document.getElementById('api-key').value.trim(), model: document.getElementById('api-model').value.trim() || "gpt-4o-mini", maxTokens: parseInt(document.getElementById('api-max-tokens').value) || 4000, stream: document.getElementById('stream-mode').checked }; } function showToast(msg, type = 'success') { const toast = document.getElementById('toast'); const txt = document.getElementById('toast-msg'); const icon = document.getElementById('toast-icon'); txt.textContent = msg; toast.classList.remove('border-emerald-500/30', 'text-emerald-400', 'border-red-500/30', 'text-red-400', 'border-yellow-500/30', 'text-yellow-400'); if(type === 'error') { toast.classList.add('text-red-400', 'border-red-500/30'); icon.className = 'ri-error-warning-fill'; } else if(type === 'warning') { toast.classList.add('text-yellow-400', 'border-yellow-500/30'); icon.className = 'ri-alert-fill'; } else { toast.classList.add('text-emerald-400', 'border-emerald-500/30'); icon.className = 'ri-checkbox-circle-fill'; } toast.classList.remove('hidden'); setTimeout(() => toast.classList.add('hidden'), 3000); }
```

--------------------------------

### Download Code as HTML File

Source: https://context7.com/metastem/aidesigner/llms.txt

Downloads the current generated code as an HTML file. Requires the `currentGeneratedCode` variable to be populated. Creates a Blob, generates a URL, and simulates a click on an anchor tag for download. Displays a success toast message.

```javascript
function downloadCode() {
    if (!currentGeneratedCode) {
        showToast('暂无代码可下载', 'error');
        return;
    }

    const blob = new Blob([currentGeneratedCode], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `ui-component-${Date.now()}.html`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    showToast('代码已下载', 'success');
}
```

--------------------------------

### Generate UI Component

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Validates user input, initializes session state, and triggers the generation process based on configuration.

```javascript
async function generateUI() { const config = getSettings(); if (!config.key) { openSettings(); showToast('请先配置 API Key', 'error'); return; } const styleId = document.getElementById('style-selector').value; const userPrompt = document.getElementById('user-prompt').value.trim(); if (!styleId) { showToast('请选择一种 UI 风格', 'error'); return; } if (!userPrompt) { showToast('请输入需求描述', 'error'); return; } const selectedStyle = stylesData.find(s => s.id === styleId); generationStartTime = Date.now(); const btn = document.getElementById('generate-btn'); const btnText = btn.querySelector('.text-btn'); const loader = btn.querySelector('.loader'); const emptyState = document.getElementById('empty-state'); btn.disabled = true; btnText.textContent = config.stream ? "AI 实时生成中..." : "AI 正在设计中..."; loader.classList.remove('hidden'); emptyState.style.display = 'none'; // 创建新会话ID（如果是首次生成） if (!currentSessionId) { currentSessionId = Date.now(); currentVersions = []; currentVersionIndex = 0; conversationMessages = []; } const systemPrompt = `你是一个专业的前端 UI 工程师。你的任务是根据用户的描述和指定的 UI 风格，编写一个可以在浏览器中直接运行的完整 HTML 页面。 【设计规范】 风格名称: ${selectedStyle.name} 风格特征: ${selectedStyle.desc} 技术栈: - HTML5 - Tailwind CSS (CDN: https://cdn.tailwindcss.com) - Remix Icon (CDN: https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css) 【核心要求】 1. 输出完整的 HTML 文档结构（包含 <!DOCTYPE html>, <html>, <head>, <body> 等标签） 2. 必须在 <head> 中引入 Tailwind CSS 和 Remix Icon 的 CDN 3. 不要使用 markdown 代码块标记（如 \`\`\`html），直接返回纯 HTML 代码 4. 确保代码可以直接在浏览器中运行，无需额外依赖 5. 严格按照指定的风格特征进行设计（配色、圆角、阴影、字体等） 6. 组件必须居中显示（使用 flexbox 或 grid 布局） 7. 确保响应式设计，在移动端表现良好 8. 添加适当的交互效果（hover、focus 等状态） 9. 如果需要 JavaScript 交互，请在 <script> 标签中添加 10. 使用语义化的 HTML 标签 【示例输出格式】 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UI Component</title> <script src="https://cdn.tailwindcss.com"><\/script> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> </head> <body class="min-h-screen flex items-center justify-center bg-gray-100"> <!-- 你的 UI 代码 --> </body> </html> 现在请根据以上要求生成代码。`; // 初始化会话消息 if (conversationMessages.length === 0) { conversationMessages.push({ role: "system", content: systemPrompt }); } // 添加用户消息 conversationMessages.push({ role: "user", content: userPrompt }); try { if (config.stream) { await generateWithStream(config, userPrompt, selectedStyle); } else { await generateWithoutStream(config, userPrompt, selectedStyle); } } catch (error) { console.error('Generation error:', error); showToast(`生成失败: ${error.message}`, 'error'); emptyState.style.display = 'flex'; } finally { btn.disabled = false; btnText.textContent = "生成 UI 代码"; loader.classList.add('hidden'); } }
```

--------------------------------

### Manage Design Versions

Source: https://context7.com/metastem/aidesigner/llms.txt

Provides functionality to save, switch between, and display different versions of generated UI code.

```javascript
let currentVersions = [];
let currentVersionIndex = 0;

// 保存新版本
function saveVersion(code, userPrompt = '') {
    const version = {
        id: Date.now(),
        versionNumber: currentVersions.length + 1,
        code: code,
        prompt: userPrompt,
        timestamp: new Date().toLocaleString('zh-CN')
    };

    currentVersions.push(version);
    currentVersionIndex = currentVersions.length - 1;
    updateVersionDisplay();
}

// 切换到指定版本
function switchVersion(index) {
    if (index >= 0 && index < currentVersions.length) {
        currentVersionIndex = index;
        currentGeneratedCode = currentVersions[index].code;
        updatePreview(currentGeneratedCode);
        showToast(`已切换到版本 v${currentVersions[index].versionNumber}`, 'success');
    }
}

// 显示版本列表
function updateVersionDisplay() {
    const versionSpan = document.getElementById('current-version');
    versionSpan.textContent = `v${currentVersions[currentVersionIndex]?.versionNumber || 1}`;
}
```

--------------------------------

### Toggle UI Preview Mode

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Switches the preview wrapper between mobile and desktop dimensions and updates button styles.

```javascript
ment.getElementById('iframe-wrapper'); const desktopBtn = document.getElementById('desktop-btn'); const mobileBtn = document.getElementById('mobile-btn'); if (mode === 'mobile') { wrapper.style.width = '375px'; wrapper.style.maxHeight = '667px'; mobileBtn.classList.add('text-indigo-400', 'bg-indigo-500/10'); mobileBtn.classList.remove('text-slate-400'); desktopBtn.classList.remove('text-indigo-400', 'bg-indigo-500/10'); desktopBtn.classList.add('text-slate-400'); } else { wrapper.style.width = '100%'; wrapper.style.maxHeight = 'none'; desktopBtn.classList.add('text-indigo-400', 'bg-indigo-500/10'); desktopBtn.classList.remove('text-slate-400'); mobileBtn.classList.remove('text-indigo-400', 'bg-indigo-500/10'); mobileBtn.classList.add('text-slate-400'); } }
```

--------------------------------

### POST /chat/completions

Source: https://context7.com/metastem/aidesigner/llms.txt

Generates UI code by sending a prompt to an OpenAI-compatible API endpoint. Supports both standard and streaming responses.

```APIDOC
## POST /chat/completions

### Description
Sends a user prompt and design style context to the AI model to generate HTML/CSS UI code.

### Method
POST

### Endpoint
{base}/chat/completions

### Request Body
- **model** (string) - Required - The model name (e.g., gpt-4o-mini)
- **messages** (array) - Required - Array of message objects with role and content
- **temperature** (number) - Optional - Controls randomness (default 0.7)
- **max_tokens** (number) - Optional - Maximum length of generated output
- **stream** (boolean) - Optional - Whether to enable streaming output

### Request Example
{
  "model": "gpt-4o-mini",
  "messages": [{"role": "user", "content": "设计一个登录卡片"}],
  "temperature": 0.7,
  "max_tokens": 4000,
  "stream": true
}

### Response
#### Success Response (200)
- **choices** (array) - List of completion choices containing the generated content
```

--------------------------------

### Initialize Design Style Selector

Source: https://context7.com/metastem/aidesigner/llms.txt

Defines a collection of UI design styles and provides a function to populate a dropdown selector in the DOM.

```javascript
const stylesData = [
    {
        id: "business-pro",
        name: "商务专业",
        desc: "稳重深蓝色调，适中圆角，柔和阴影，适合企业级应用。使用 Lato 或 Open Sans 字体。"
    },
    {
        id: "modern-saas",
        name: "现代 SaaS",
        desc: "通透的蓝紫渐变，大圆角设计，悬浮卡片效果。使用 Inter 字体。"
    },
    {
        id: "cyberpunk",
        name: "赛博朋克",
        desc: "黑底霓虹光效，故障艺术风格，高对比度。使用 Orbitron 字体。"
    },
    {
        id: "glassmorphism",
        name: "玻璃拟态",
        desc: "背景模糊效果，半透明白色元素，磨砂玻璃质感。"
    },
    {
        id: "neumorphism",
        name: "新拟态",
        desc: "柔和的内外阴影营造凸起质感，低对比度配色。"
    },
    // ... 更多风格
];

// 初始化风格选择器
function initStyleSelector() {
    const select = document.getElementById('style-selector');
    stylesData.forEach(style => {
        const option = document.createElement('option');
        option.value = style.id;
        option.textContent = style.name;
        select.appendChild(option);
    });
}
```

--------------------------------

### Update Preview and Toggle Viewport

Source: https://context7.com/metastem/aidesigner/llms.txt

Renders generated HTML into an iframe and provides functionality to switch between desktop and mobile view modes.

```javascript
function updatePreview(html) {
    const iframe = document.getElementById('preview-frame');
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

// 切换桌面/移动端视图
function toggleView(mode) {
    const wrapper = document.getElementById('iframe-wrapper');

    if (mode === 'mobile') {
        wrapper.style.width = '375px';
        wrapper.style.maxHeight = '667px';
    } else {
        wrapper.style.width = '100%';
        wrapper.style.maxHeight = 'none';
    }
}
```

--------------------------------

### Manage Version Control

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Functions to track and display code versions during the generation process.

```javascript
// 版本管理功能 function saveVersion(code, userPrompt = '') { const version = { id: Date.now(), versionNumber: currentVersions.length + 1, code: code, prompt: userPrompt, timestamp: new Date().toLocaleString('zh-CN') }; currentVersions.push(version); currentVersionIndex = currentVersions.length - 1; updateVersionDisplay(); document.getElementById('version-control').classList.remove('hidden'); } function updateVersionDisplay() { const versionSpan = document.getElementById('current-version'); versionSpan.textContent = `v${currentVersions[currentVersionIndex]?.versionNumber || 1}`; const versionsList = 
```

--------------------------------

### Stream AI Response

Source: https://github.com/metastem/aidesigner/blob/main/index.html

Fetches completion data from the API and processes the stream to update the UI preview in real-time.

```javascript
async function generateWithStream(config, userPrompt, selectedStyle) { const response = await fetch(`${config.base}/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${config.key}` }, body: JSON.stringify({ model: config.model, messages: conversationMessages, temperature: 0.7, max_tokens: config.maxTokens, stream: true }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.error?.message || `API Error: ${response.status}`); } const reader = response.body.getReader(); const decoder = new TextDecoder(); let accumulatedContent = ''; let buffer = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop() || ''; for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); if (data === '[DONE]') continue; try { const parsed = JSON.parse(data); const content = parsed.choices[0]?.delta?.content; if (content) { accumulatedContent += content; // 实时更新预览（只在累积了足够内容时） if (accumulatedContent.length > 200 && accumulatedContent.includes('</head>')) { const cleanedContent = accumulatedContent.replace(/^\`\`\`html\s*/i, '').replace(/\`\`\`\s*$/i, '').trim(); updatePreview(cleanedContent); } } } catch (e) { console.warn('Parse error:', e); } } } } // 最终清理和更新 const finalContent
```

--------------------------------

### Copy Code to Clipboard

Source: https://context7.com/metastem/aidesigner/llms.txt

Copies the current generated code to the clipboard. Requires the `currentGeneratedCode` variable to be populated. Displays toast messages for success or failure.

```javascript
function copyCode() {
    if (!currentGeneratedCode) {
        showToast('暂无代码可复制', 'error');
        return;
    }
    navigator.clipboard.writeText(currentGeneratedCode).then(() => {
        showToast('代码已复制到剪贴板', 'success');
    }).catch(() => {
        showToast('复制失败，请重试', 'error');
    });
}
```

--------------------------------

### Manage Generation History

Source: https://context7.com/metastem/aidesigner/llms.txt

Handles persistence of generation records to localStorage, including saving, loading, deleting, and clearing history.

```javascript
let generationHistory = [];

// 保存到历史记录
function saveToHistory(prompt, style, code) {
    const record = {
        id: Date.now(),
        timestamp: new Date().toLocaleString('zh-CN'),
        prompt: prompt,
        style: style,
        code: code,
        preview: code.substring(0, 200)
    };

    generationHistory.unshift(record);

    // 限制最多 50 条记录
    if (generationHistory.length > 50) {
        generationHistory = generationHistory.slice(0, 50);
    }

    localStorage.setItem('ui_gen_history', JSON.stringify(generationHistory));
}

// 加载历史记录
function loadHistoryRecord(id) {
    const record = generationHistory.find(r => r.id === id);
    if (record) {
        currentGeneratedCode = record.code;
        updatePreview(record.code);
        showToast('已加载历史记录', 'success');
    }
}

// 删除单条记录
function deleteHistoryRecord(id) {
    generationHistory = generationHistory.filter(r => r.id !== id);
    localStorage.setItem('ui_gen_history', JSON.stringify(generationHistory));
}

// 清空所有历史
function clearAllHistory() {
    generationHistory = [];
    localStorage.setItem('ui_gen_history', JSON.stringify(generationHistory));
}
```

--------------------------------

### Generate UI via API

Source: https://context7.com/metastem/aidesigner/llms.txt

Executes a non-streaming request to the AI API to generate HTML code based on user prompts and selected design styles.

```javascript
// 调用生成 UI 的完整流程
async function generateUI() {
    const config = getSettings();

    // 验证 API Key
    if (!config.key) {
        showToast('请先配置 API Key', 'error');
        return;
    }

    // 获取用户输入
    const styleId = document.getElementById('style-selector').value;  // 如: "modern-saas"
    const userPrompt = "设计一个包含用户名、密码输入框和社交登录按钮的登录卡片";

    // 构建会话消息
    const messages = [
        { role: "system", content: systemPrompt },
        { role: "user", content: userPrompt }
    ];

    // 调用 API
    const response = await fetch(`${config.base}/chat/completions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${config.key}`
        },
        body: JSON.stringify({
            model: config.model,
            messages: messages,
            temperature: 0.7,
            max_tokens: config.maxTokens,
            stream: config.stream
        })
    });

    const data = await response.json();
    const generatedCode = data.choices[0].message.content;

    // 更新预览
    updatePreview(generatedCode);
}
```

--------------------------------

### Perform Iterative UI Editing

Source: https://context7.com/metastem/aidesigner/llms.txt

Sends user prompts and conversation history to the API to generate optimized UI code, then saves the result as a new version.

```javascript
async function continueEdit() {
    const config = getSettings();
    const editPrompt = document.getElementById('user-prompt').value.trim();

    if (!currentGeneratedCode || conversationMessages.length === 0) {
        showToast('请先生成初始版本', 'error');
        return;
    }

    if (!editPrompt) {
        showToast('请输入优化需求', 'error');
        return;
    }

    // 添加用户消息到会话历史（保持上下文）
    conversationMessages.push({ role: "user", content: editPrompt });

    // 调用 API 继续对话
    const response = await fetch(`${config.base}/chat/completions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${config.key}`
        },
        body: JSON.stringify({
            model: config.model,
            messages: conversationMessages,  // 包含完整会话历史
            temperature: 0.7,
            max_tokens: config.maxTokens
        })
    });

    const data = await response.json();
    const optimizedCode = data.choices[0].message.content;

    // 保存 AI 回复并更新
    conversationMessages.push({ role: "assistant", content: optimizedCode });
    saveVersion(optimizedCode, editPrompt);
    updatePreview(optimizedCode);
}
```

--------------------------------

### Handle Streaming API Responses

Source: https://context7.com/metastem/aidesigner/llms.txt

Processes chunked data from the API to enable real-time rendering of the generated UI code.

```javascript
async function generateWithStream(config, userPrompt, selectedStyle) {
    const response = await fetch(`${config.base}/chat/completions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${config.key}`
        },
        body: JSON.stringify({
            model: config.model,
            messages: conversationMessages,
            temperature: 0.7,
            max_tokens: config.maxTokens,
            stream: true
        })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let accumulatedContent = '';
    let buffer = '';

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        for (const line of lines) {
            if (line.startsWith('data: ')) {
                const data = line.slice(6);
                if (data === '[DONE]') continue;

                const parsed = JSON.parse(data);
                const content = parsed.choices[0]?.delta?.content;
                if (content) {
                    accumulatedContent += content;

                    // 实时更新预览（HTML 头部加载后开始渲染）
                    if (accumulatedContent.length > 200 && accumulatedContent.includes('</head>')) {
                        updatePreview(accumulatedContent);
                    }
                }
            }
        }
    }

    // 清理 markdown 代码块标记
    const finalContent = accumulatedContent
        .replace(/^```html\s*/i, '')
        .replace(/```\s*$/i, '')
        .trim();

    return finalContent;
}
```

--------------------------------

### Unified Toast Message System

Source: https://context7.com/metastem/aidesigner/llms.txt

Displays user notifications (success, error, warning) using a toast component. It dynamically updates the message, styles, and icon based on the type. The toast is hidden after 3 seconds. Assumes HTML elements with IDs 'toast', 'toast-msg', and 'toast-icon' exist.

```javascript
function showToast(msg, type = 'success') {
    const toast = document.getElementById('toast');
    const txt = document.getElementById('toast-msg');
    const icon = document.getElementById('toast-icon');

    txt.textContent = msg;

    // 根据类型设置样式
    if (type === 'error') {
        toast.classList.add('text-red-400', 'border-red-500/30');
        icon.className = 'ri-error-warning-fill';
    } else if (type === 'warning') {
        toast.classList.add('text-yellow-400', 'border-yellow-500/30');
        icon.className = 'ri-alert-fill';
    } else {
        toast.classList.add('text-emerald-400', 'border-emerald-500/30');
        icon.className = 'ri-checkbox-circle-fill';
    }

    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 3000);
}
```

```javascript
// 使用示例
showToast('UI 生成成功！', 'success');
showToast('请先配置 API Key', 'error');
showToast('网络连接不稳定', 'warning');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.