init: image-generator with MiniMax image-01 support
This commit is contained in:
zwbcc
13
CHANGELOG.md
Normal file
13
CHANGELOG.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# CHANGELOG
|
||||
|
||||
## 2026-03-25
|
||||
|
||||
### Added
|
||||
- **image-generator** - MiniMax image-01 文生图网页
|
||||
- 地址：`http://10.0.10.110:8195`
|
||||
- 支持选择比例（1:1 / 16:9 / 4:3 / 3:2 / 2:3 / 3:4 / 9:16 / 21:9）
|
||||
- 支持 prompt 输入（最多 1500 字符）
|
||||
- 可下载生成图片 / 复制 Base64
|
||||
- API Key 配置在 Settings 里（服务端存储，不暴露）
|
||||
- 依赖：express, node-fetch（全局 npm）
|
||||
- systemd service：`image-generator.service`
|
||||
115
app.js
Normal file
115
app.js
Normal file
@@ -0,0 +1,115 @@
|
||||
'use strict';
|
||||
|
||||
// ============================================================
|
||||
// Config
|
||||
// ============================================================
|
||||
|
||||
const express = require('express');
|
||||
const fetch = require('node-fetch');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const PORT = 8195;
|
||||
const HOST = '0.0.0.0';
|
||||
|
||||
// Config file stored alongside app.js
|
||||
const CONFIG_FILE = path.join(__dirname, 'config.json');
|
||||
|
||||
function loadConfig() {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
|
||||
} catch {
|
||||
return { apiKey: '', baseUrl: 'https://api.minimax.io' };
|
||||
}
|
||||
}
|
||||
|
||||
function saveConfig(cfg) {
|
||||
fs.writeFileSync(CONFIG_FILE, JSON.stringify(cfg, null, 2));
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// App
|
||||
// ============================================================
|
||||
|
||||
const app = express();
|
||||
app.use(express.json());
|
||||
app.use(express.static(__dirname));
|
||||
|
||||
// --- Settings ---
|
||||
|
||||
app.get('/api/config', (req, res) => {
|
||||
const cfg = loadConfig();
|
||||
res.json({
|
||||
hasApiKey: !!cfg.apiKey,
|
||||
baseUrl: cfg.baseUrl || 'https://api.minimax.io',
|
||||
});
|
||||
});
|
||||
|
||||
app.post('/api/config', (req, res) => {
|
||||
const { apiKey, baseUrl } = req.body;
|
||||
if (typeof apiKey !== 'string' || typeof baseUrl !== 'string') {
|
||||
return res.status(400).json({ error: 'Invalid fields' });
|
||||
}
|
||||
const cfg = { apiKey: apiKey.trim(), baseUrl: baseUrl.trim() || 'https://api.minimax.io' };
|
||||
saveConfig(cfg);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
|
||||
// --- Image generation ---
|
||||
|
||||
app.post('/api/generate', async (req, res) => {
|
||||
const { prompt, aspect_ratio, model } = req.body;
|
||||
|
||||
if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
|
||||
return res.status(400).json({ error: 'prompt is required' });
|
||||
}
|
||||
|
||||
const cfg = loadConfig();
|
||||
if (!cfg.apiKey) {
|
||||
return res.status(400).json({ error: 'API key not configured. Please set your MiniMax API key in settings.' });
|
||||
}
|
||||
|
||||
const baseUrl = cfg.baseUrl || 'https://api.minimax.io';
|
||||
const endpoint = `${baseUrl}/v1/image_generation`;
|
||||
|
||||
const payload = {
|
||||
model: model || 'image-01',
|
||||
prompt: prompt.trim(),
|
||||
aspect_ratio: aspect_ratio || '1:1',
|
||||
response_format: 'base64',
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${cfg.apiKey}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
const msg = data.error?.message || data.error || `HTTP ${response.status}`;
|
||||
return res.status(response.status).json({ error: msg });
|
||||
}
|
||||
|
||||
// Return base64 images
|
||||
const images = data.data?.image_base64 || [];
|
||||
res.json({ images });
|
||||
} catch (err) {
|
||||
console.error('[generate] error:', err.message);
|
||||
res.status(500).json({ error: 'Failed to reach MiniMax API: ' + err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// --- Serve index.html at root ---
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(PORT, HOST, () => {
|
||||
console.log(`Image Generator running at http://${HOST === '0.0.0.0' ? '10.0.10.110' : HOST}:${PORT}`);
|
||||
});
|
||||
370
index.html
Normal file
370
index.html
Normal file
@@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Image Generator</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21,15 16,10 5,21"/>
|
||||
</svg>
|
||||
<span>Image Generator</span>
|
||||
</div>
|
||||
<button class="icon-btn" id="openSettings" title="Settings">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- API Key Alert -->
|
||||
<div class="alert-banner" id="apiKeyAlert" style="display:none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
<span>API key not set. Please configure your MiniMax API key in <button class="link-btn" id="alertSettingsBtn">Settings</button>.</span>
|
||||
</div>
|
||||
|
||||
<!-- Main form -->
|
||||
<main>
|
||||
<form id="generateForm">
|
||||
<div class="prompt-row">
|
||||
<textarea
|
||||
id="promptInput"
|
||||
placeholder="Describe the image you want to generate..."
|
||||
rows="3"
|
||||
maxlength="1500"
|
||||
autofocus
|
||||
></textarea>
|
||||
<div class="prompt-footer">
|
||||
<span class="char-count" id="charCount">0 / 1500</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="aspectRatio">Aspect Ratio</label>
|
||||
<select id="aspectRatio">
|
||||
<option value="1:1">1:1 — Square (1024×1024)</option>
|
||||
<option value="16:9" selected>16:9 — Widescreen (1280×720)</option>
|
||||
<option value="4:3">4:3 — Standard (1152×864)</option>
|
||||
<option value="3:2">3:2 — Photo (1248×832)</option>
|
||||
<option value="2:3">2:3 — Portrait (832×1248)</option>
|
||||
<option value="3:4">3:4 — Portrait (864×1152)</option>
|
||||
<option value="9:16">9:16 — Vertical (720×1280)</option>
|
||||
<option value="21:9">21:9 — Ultrawide (1344×576)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="generate-btn" id="generateBtn">
|
||||
<svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/>
|
||||
</svg>
|
||||
<span class="btn-text">Generate</span>
|
||||
<svg class="spinner" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="20"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Error message -->
|
||||
<div class="error-msg" id="errorMsg" style="display:none"></div>
|
||||
|
||||
<!-- Generated image(s) -->
|
||||
<div class="result-area" id="resultArea" style="display:none">
|
||||
<div class="result-header">
|
||||
<span id="resultLabel">Generated</span>
|
||||
<div class="result-actions">
|
||||
<button class="action-btn" id="downloadBtn" title="Download">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7,10 12,15 17,10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Download
|
||||
</button>
|
||||
<button class="action-btn" id="copyBtn" title="Copy as Base64">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
||||
</svg>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-wrap" id="imageWrap">
|
||||
<img id="resultImg" src="" alt="Generated image" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal-overlay" id="settingsModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>Settings</h2>
|
||||
<button class="icon-btn" id="closeSettings">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="field">
|
||||
<label for="apiKeyInput">MiniMax API Key</label>
|
||||
<div class="input-row">
|
||||
<input type="password" id="apiKeyInput" placeholder="eyJhbGciOiJIUzI1NiIsInR..." />
|
||||
<button class="icon-btn" id="toggleKey" type="button" title="Show/Hide">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="field-hint">Get your API key from <a href="https://platform.minimax.io/" target="_blank" rel="noopener">platform.minimax.io</a></p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="baseUrlInput">API Base URL</label>
|
||||
<input type="text" id="baseUrlInput" placeholder="https://api.minimax.io" />
|
||||
<p class="field-hint">Only change if using an API proxy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" id="cancelSettings">Cancel</button>
|
||||
<button class="btn-primary" id="saveSettings">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// ============================================================
|
||||
// DOM refs
|
||||
// ============================================================
|
||||
|
||||
const promptInput = document.getElementById('promptInput');
|
||||
const charCount = document.getElementById('charCount');
|
||||
const aspectRatio = document.getElementById('aspectRatio');
|
||||
const generateForm = document.getElementById('generateForm');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const btnIcon = generateBtn.querySelector('.btn-icon');
|
||||
const btnText = generateBtn.querySelector('.btn-text');
|
||||
const spinner = generateBtn.querySelector('.spinner');
|
||||
const errorMsg = document.getElementById('errorMsg');
|
||||
const resultArea = document.getElementById('resultArea');
|
||||
const resultLabel = document.getElementById('resultLabel');
|
||||
const resultImg = document.getElementById('resultImg');
|
||||
const imageWrap = document.getElementById('imageWrap');
|
||||
const downloadBtn = document.getElementById('downloadBtn');
|
||||
const copyBtn = document.getElementById('copyBtn');
|
||||
|
||||
const apiKeyAlert = document.getElementById('apiKeyAlert');
|
||||
const alertSettings = document.getElementById('alertSettingsBtn');
|
||||
|
||||
const settingsModal = document.getElementById('settingsModal');
|
||||
const openSettings = document.getElementById('openSettings');
|
||||
const closeSettings = document.getElementById('closeSettings');
|
||||
const cancelSettings = document.getElementById('cancelSettings');
|
||||
const saveSettingsBtn= document.getElementById('saveSettings');
|
||||
const apiKeyInput = document.getElementById('apiKeyInput');
|
||||
const toggleKey = document.getElementById('toggleKey');
|
||||
const baseUrlInput = document.getElementById('baseUrlInput');
|
||||
|
||||
// ============================================================
|
||||
// State
|
||||
// ============================================================
|
||||
|
||||
let currentBase64 = '';
|
||||
let loading = false;
|
||||
|
||||
// ============================================================
|
||||
// Helpers
|
||||
// ============================================================
|
||||
|
||||
function setLoading(on) {
|
||||
loading = on;
|
||||
generateBtn.disabled = on;
|
||||
btnIcon.style.display = on ? 'none' : '';
|
||||
btnText.style.display = on ? 'none' : '';
|
||||
spinner.style.display = on ? 'inline' : 'none';
|
||||
generateBtn.classList.toggle('loading', on);
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
errorMsg.textContent = msg;
|
||||
errorMsg.style.display = 'flex';
|
||||
}
|
||||
|
||||
function clearError() {
|
||||
errorMsg.style.display = 'none';
|
||||
}
|
||||
|
||||
function showResult(base64Data) {
|
||||
currentBase64 = base64Data;
|
||||
resultImg.src = 'data:image/jpeg;base64,' + base64Data;
|
||||
resultArea.style.display = 'block';
|
||||
imageWrap.classList.add('pop-in');
|
||||
setTimeout(() => imageWrap.classList.remove('pop-in'), 600);
|
||||
}
|
||||
|
||||
async function api(path, opts = {}) {
|
||||
const res = await fetch(path, opts);
|
||||
const json = await res.json();
|
||||
if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`);
|
||||
return json;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Init: load config
|
||||
// ============================================================
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const cfg = await api('/api/config');
|
||||
if (!cfg.hasApiKey) {
|
||||
apiKeyAlert.style.display = 'flex';
|
||||
}
|
||||
baseUrlInput.value = cfg.baseUrl || 'https://api.minimax.io';
|
||||
} catch (e) {
|
||||
// non-fatal
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Generate
|
||||
// ============================================================
|
||||
|
||||
generateForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (loading) return;
|
||||
|
||||
const prompt = promptInput.value.trim();
|
||||
if (!prompt) {
|
||||
showError('Please enter a prompt.');
|
||||
return;
|
||||
}
|
||||
|
||||
clearError();
|
||||
resultArea.style.display = 'none';
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const data = await api('/api/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
aspect_ratio: aspectRatio.value,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!data.images || data.images.length === 0) {
|
||||
throw new Error('No images returned.');
|
||||
}
|
||||
|
||||
showResult(data.images[0]);
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Prompt char count
|
||||
// ============================================================
|
||||
|
||||
promptInput.addEventListener('input', () => {
|
||||
charCount.textContent = `${promptInput.value.length} / 1500`;
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Download
|
||||
// ============================================================
|
||||
|
||||
downloadBtn.addEventListener('click', () => {
|
||||
if (!currentBase64) return;
|
||||
const a = document.createElement('a');
|
||||
a.href = 'data:image/jpeg;base64,' + currentBase64;
|
||||
a.download = 'generated-' + Date.now() + '.jpg';
|
||||
a.click();
|
||||
});
|
||||
|
||||
copyBtn.addEventListener('click', async () => {
|
||||
if (!currentBase64) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(currentBase64);
|
||||
copyBtn.textContent = 'Copied!';
|
||||
setTimeout(() => { copyBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy`; }, 1500);
|
||||
} catch {
|
||||
showError('Clipboard copy failed.');
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Settings modal
|
||||
// ============================================================
|
||||
|
||||
function openModal() {
|
||||
settingsModal.classList.add('open');
|
||||
apiKeyInput.focus();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
settingsModal.classList.remove('open');
|
||||
clearError();
|
||||
}
|
||||
|
||||
openSettings.addEventListener('click', openModal);
|
||||
alertSettings.addEventListener('click', openModal);
|
||||
closeSettings.addEventListener('click', closeModal);
|
||||
cancelSettings.addEventListener('click', closeModal);
|
||||
|
||||
settingsModal.addEventListener('click', (e) => {
|
||||
if (e.target === settingsModal) closeModal();
|
||||
});
|
||||
|
||||
toggleKey.addEventListener('click', () => {
|
||||
const isPw = apiKeyInput.type === 'password';
|
||||
apiKeyInput.type = isPw ? 'text' : 'password';
|
||||
});
|
||||
|
||||
saveSettingsBtn.addEventListener('click', async () => {
|
||||
clearError();
|
||||
const apiKey = apiKeyInput.value.trim();
|
||||
const baseUrl = baseUrlInput.value.trim() || 'https://api.minimax.io';
|
||||
|
||||
try {
|
||||
await api('/api/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey, baseUrl }),
|
||||
});
|
||||
if (apiKey) {
|
||||
apiKeyAlert.style.display = 'none';
|
||||
}
|
||||
closeModal();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Init
|
||||
// ============================================================
|
||||
|
||||
init();
|
||||
</script>
|
||||
4
start.sh
Executable file
4
start.sh
Executable file
@@ -0,0 +1,4 @@
|
||||
#!/bin/bash
|
||||
export NODE_PATH=$(npm root -g)
|
||||
cd "$(dirname "$0")"
|
||||
exec node app.js "$@"
|
||||
518
style.css
Normal file
518
style.css
Normal file
@@ -0,0 +1,518 @@
|
||||
/* ============================================================
|
||||
Reset & Base
|
||||
============================================================ */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0f0f13;
|
||||
--surface: #18181f;
|
||||
--surface2: #1f1f28;
|
||||
--border: rgba(255,255,255,0.07);
|
||||
--accent: #7c6af5;
|
||||
--accent2: #a89bfa;
|
||||
--text: #e4e4ea;
|
||||
--text2: #8a8a9a;
|
||||
--text3: #55555f;
|
||||
--danger: #f56c6c;
|
||||
--radius: 12px;
|
||||
--radius2: 8px;
|
||||
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button { cursor: pointer; font-family: inherit; }
|
||||
a { color: var(--accent2); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ============================================================
|
||||
Layout
|
||||
============================================================ */
|
||||
|
||||
#app {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 60px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Header
|
||||
============================================================ */
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 0 28px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
color: var(--accent2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Alert banner
|
||||
============================================================ */
|
||||
|
||||
.alert-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(124, 106, 245, 0.1);
|
||||
border: 1px solid rgba(124, 106, 245, 0.25);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--text2);
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
animation: fadeSlideIn 0.4s var(--ease);
|
||||
}
|
||||
|
||||
.alert-banner svg { color: var(--accent2); flex-shrink: 0; }
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent2);
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Form
|
||||
============================================================ */
|
||||
|
||||
.prompt-row {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.prompt-row:focus-within {
|
||||
border-color: rgba(124, 106, 245, 0.4);
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
padding: 14px 16px 10px;
|
||||
resize: none;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
textarea::placeholder { color: var(--text3); }
|
||||
|
||||
.prompt-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 14px 10px;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Controls row
|
||||
============================================================ */
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 12px;
|
||||
color: var(--text2);
|
||||
font-weight: 500;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 9px 12px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a9a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
padding-right: 30px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
select:focus { border-color: rgba(124, 106, 245, 0.4); }
|
||||
|
||||
/* ============================================================
|
||||
Generate button
|
||||
============================================================ */
|
||||
|
||||
.generate-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius2);
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
height: 42px;
|
||||
transition: background 0.2s, transform 0.15s var(--ease), opacity 0.2s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.generate-btn:hover:not(:disabled) {
|
||||
background: var(--accent2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.generate-btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.generate-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.generate-btn .spinner {
|
||||
display: none;
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
.generate-btn.loading .btn-icon,
|
||||
.generate-btn.loading .btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.generate-btn.loading .spinner {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Error
|
||||
============================================================ */
|
||||
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(245, 108, 108, 0.1);
|
||||
border: 1px solid rgba(245, 108, 108, 0.2);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
animation: fadeSlideIn 0.3s var(--ease);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Result area
|
||||
============================================================ */
|
||||
|
||||
.result-area {
|
||||
margin-top: 28px;
|
||||
animation: fadeSlideIn 0.5s var(--ease);
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#resultLabel {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--text2);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
border-color: rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.image-wrap img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% { opacity: 0; transform: scale(0.96); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.pop-in {
|
||||
animation: popIn 0.4s var(--ease);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Icon button
|
||||
============================================================ */
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text2);
|
||||
border-radius: var(--radius2);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Modal
|
||||
============================================================ */
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal-overlay.open {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
transform: translateY(12px) scale(0.97);
|
||||
transition: transform 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.modal-overlay.open .modal {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 9px 12px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus { border-color: rgba(124, 106, 245, 0.4); }
|
||||
|
||||
.field-hint {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 0 20px 18px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius2);
|
||||
color: var(--text2);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 8px 18px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: var(--radius2);
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 8px 18px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: var(--accent2); }
|
||||
|
||||
/* ============================================================
|
||||
Animations
|
||||
============================================================ */
|
||||
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive
|
||||
============================================================ */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.controls { flex-direction: column; }
|
||||
.control-group { width: 100%; }
|
||||
.generate-btn { width: 100%; justify-content: center; }
|
||||
.result-actions { gap: 6px; }
|
||||
.action-btn { padding: 6px 10px; }
|
||||
}
|
||||
Reference in New Issue
Block a user