zwbpc/image-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 完整重构，支持 MiniMax 全部文生图参数

Browse Source 
- 新增 image-01 / image-01-live 双模型切换
- image-01-live 支持画风类型 + 权重
- 支持生成数量 (n=1-9)、随机种子、自定义分辨率
- 支持自动优化 prompt、AI 水印开关
- 支持 URL / Base64 双输出格式
- 任务 ID + 成功/失败计数显示
- 错误码友好提示（限流/余额/敏感内容等）
- Node.js 22 内置 fetch 替代 node-fetch
This commit is contained in:
zwbcc
2026-03-25 23:58:11 +08:00
parent aa48e293a3
commit ec17835c68
3 changed files with 778 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app.js
View File

@@ -1,18 +1,12 @@
'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() {
@@ -27,22 +21,15 @@ 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 ---
// ── Config ──────────────────────────────────────────────────────
app.get('/api/config', (req, res) => {
const cfg = loadConfig();
res.json({
hasApiKey: !!cfg.apiKey,
baseUrl: cfg.baseUrl || 'https://api.minimax.io',
});
res.json({ hasApiKey: !!cfg.apiKey, baseUrl: cfg.baseUrl || 'https://api.minimaxi.com' });
});
app.post('/api/config', (req, res) => {
@@ -50,37 +37,62 @@ app.post('/api/config', (req, res) => {
if (typeof apiKey !== 'string' || typeof baseUrl !== 'string') {
return res.status(400).json({ error: '参数格式错误' });
}
const cfg = { apiKey: apiKey.trim(), baseUrl: baseUrl.trim() || 'https://api.minimax.io' };
const cfg = { apiKey: apiKey.trim(), baseUrl: baseUrl.trim() || 'https://api.minimaxi.com' };
saveConfig(cfg);
res.json({ ok: true });
});
// --- Image generation ---
// ── Image Generation ─────────────────────────────────────────────
app.post('/api/generate', async (req, res) => {
const { prompt, aspect_ratio, model } = req.body;
const {
model, prompt, style, aspect_ratio,
width, height, response_format, seed,
n, prompt_optimizer, aigc_watermark,
} = req.body;
// Validation
if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
return res.status(400).json({ error: '请输入图片描述内容' });
return res.status(400).json({ error: '请输入图片描述' });
}
if (model !== 'image-01' && model !== 'image-01-live') {
return res.status(400).json({ error: 'model 参数无效' });
}
const cfg = loadConfig();
if (!cfg.apiKey) {
return res.status(400).json({ error: '未配置 API Key，请先在设置中填写 MiniMax API Key。' });
return res.status(400).json({ error: '未配置 API Key，请先在设置中填写。' });
}
const baseUrl = cfg.baseUrl || 'https://api.minimax.io';
const endpoint = `${baseUrl}/v1/image_generation`;
// Build payload — only include optional fields that are set
const payload = {
model: model || 'image-01',
model,
prompt: prompt.trim(),
aspect_ratio: aspect_ratio || '1:1',
response_format: 'base64',
response_format: response_format || 'url',
};
if (aspect_ratio) payload.aspect_ratio = aspect_ratio;
if (width && height) { payload.width = width; payload.height = height; }
if (seed) payload.seed = seed;
if (n) payload.n = Math.min(Math.max(Number(n), 1), 9);
if (prompt_optimizer) payload.prompt_optimizer = true;
if (aigc_watermark) payload.aigc_watermark = true;
// style only for image-01-live
if (model === 'image-01-live' && style) {
const { style_type, style_weight } = style;
if (style_type) {
payload.style = { style_type };
if (style_weight != null) payload.style.style_weight = style_weight;
}
}
const baseUrl = cfg.baseUrl || 'https://api.minimaxi.com';
const endpoint = `${baseUrl}/v1/image_generation`;
let response;
try {
const response = await fetch(endpoint, {
response = await fetch(endpoint, {
method: 'POST',
headers: {
'Authorization': `Bearer ${cfg.apiKey}`,
@@ -88,28 +100,72 @@ app.post('/api/generate', async (req, res) => {
},
body: JSON.stringify(payload),
});
} catch (err) {
console.error('[generate] network error:', err.message);
return res.status(502).json({ error: '无法连接 MiniMax API：' + err.message });
}
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 });
const code = data.base_resp?.status_code;
const msg = data.base_resp?.status_msg || data.error || `HTTP ${response.status}`;
const friendly = friendlyError(code, msg);
return res.status(response.status).json({ error: friendly });
}
// Return base64 images
const images = data.data?.image_base64 || [];
res.json({ images });
// Return images + task id + metadata
res.json({
images: data.data?.image_urls || data.data?.image_base64 || [],
id: data.id,
success_count: data.metadata?.success_count ?? (Array.isArray(data.data?.image_urls || data.data?.image_base64) ? 1 : 0),
failed_count: data.metadata?.failed_count ?? 0,
});
});
// ── Task Status (future-proofing) ───────────────────────────────
app.get('/api/task/:id', async (req, res) => {
const cfg = loadConfig();
if (!cfg.apiKey) {
return res.status(400).json({ error: '未配置 API Key。' });
}
const baseUrl = cfg.baseUrl || 'https://api.minimaxi.com';
try {
const response = await fetch(`${baseUrl}/v1/image_generation/${req.params.id}`, {
headers: { 'Authorization': `Bearer ${cfg.apiKey}` },
});
const data = await response.json();
if (!response.ok) {
return res.status(response.status).json({ error: data.base_resp?.status_msg || '请求失败' });
}
res.json(data);
} catch (err) {
console.error('[generate] error:', err.message);
res.status(500).json({ error: '无法连接 MiniMax API：' + err.message });
res.status(502).json({ error: err.message });
}
});
// --- Serve index.html at root ---
// ── SPA fallback ───────────────────────────────────────────────
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}`);
console.log(`图片生成器运行于 http://${HOST === '0.0.0.0' ? '10.0.10.110' : HOST}:${PORT}`);
});
// ── Helpers ─────────────────────────────────────────────────────
function friendlyError(code, msg) {
const map = {
1002: '触发限流，请稍后再试',
1004: '账号鉴权失败，请检查 API Key 是否正确',
1008: '账号余额不足',
1026: '图片描述涉及敏感内容，请修改后重试',
2013: '参数异常，请检查输入是否合规',
2049: '无效的 API Key',
};
if (code && map[code]) return map[code];
return msg;
}

475
index.html
View File

@@ -34,14 +34,28 @@
<span>未配置 API Key，请先在 <button class="link-btn" id="alertSettingsBtn">设置</button> 中填写。</span>
</div>
<!-- Main form -->
<main>
<!-- Model selector -->
<div class="model-tabs">
<button class="model-tab active" data-model="image-01">
<span class="tab-name">image-01</span>
<span class="tab-desc">标准模型</span>
</button>
<button class="model-tab" data-model="image-01-live">
<span class="tab-name">image-01-live</span>
<span class="tab-desc">支持画风</span>
</button>
</div>
<form id="generateForm">
<!-- Prompt -->
<div class="prompt-row">
<textarea
id="promptInput"
placeholder="描述你想要生成的图片..."
rows="3"
rows="4"
maxlength="1500"
autofocus
></textarea>
@@ -50,21 +64,100 @@
</div>
</div>
<div class="controls">
<div class="control-group">
<label for="aspectRatio">Aspect Ratio</label>
<!-- Options -->
<div class="options-grid">
<!-- Left column -->
<div class="options-col">
<!-- Aspect ratio -->
<div class="opt-group">
<label class="opt-label">比例</label>
<select id="aspectRatio">
<option value="1:1">1:1 — 正方形 (1024×1024)</option>
<option value="16:9" selected>16:9 — 宽屏 (1280×720)</option>
<option value="4:3">4:3 — 标准 (1152×864)</option>
<option value="3:2">3:2 — 照片 (1248×832)</option>
<option value="2:3">2:3 — 竖图 (832×1248)</option>
<option value="3:4">3:4 — 竖图 (864×1152)</option>
<option value="9:16">9:16 — 竖屏 (720×1280)</option>
<option value="21:9">21:9 — 超宽 (1344×576)</option>
<option value="1:1">1:1 — 正方形</option>
<option value="16:9" selected>16:9 — 宽屏</option>
<option value="4:3">4:3 — 标准</option>
<option value="3:2">3:2 — 照片</option>
<option value="2:3">2:3 — 竖图</option>
<option value="3:4">3:4 — 竖图</option>
<option value="9:16">9:16 — 竖屏</option>
<option value="21:9">21:9 — 超宽（仅 image-01）</option>
</select>
</div>
<!-- Response format -->
<div class="opt-group">
<label class="opt-label">输出格式</label>
<select id="responseFormat">
<option value="url">URL（24小时有效）</option>
<option value="base64">Base64（直接保存）</option>
</select>
</div>
<!-- Count -->
<div class="opt-group">
<label class="opt-label">生成数量 <span class="opt-hint">（1-9张）</span></label>
<div class="stepper">
<button type="button" class="stepper-btn" id="nMinus">−</button>
<input type="number" id="nInput" value="1" min="1" max="9" readonly />
<button type="button" class="stepper-btn" id="nPlus">+</button>
</div>
</div>
<!-- Seed -->
<div class="opt-group">
<label class="opt-label">随机种子 <span class="opt-hint">（留空则随机）</span></label>
<input type="number" id="seedInput" placeholder="输入整数用于复现" min="0" step="1" />
</div>
</div>
<!-- Right column -->
<div class="options-col">
<!-- image-01: custom dimensions -->
<div class="opt-group dimension-group" id="dimensionGroup">
<label class="opt-label">自定义分辨率 <span class="opt-hint">（512-2048，必须是8的倍数）</span></label>
<div class="dim-row">
<input type="number" id="widthInput" placeholder="宽度" min="512" max="2048" step="8" />
<span class="dim-x">×</span>
<input type="number" id="heightInput" placeholder="高度" min="512" max="2048" step="8" />
</div>
<p class="opt-note">同时设置宽高时优先于比例</p>
</div>
<!-- image-01-live: style -->
<div class="opt-group style-group" id="styleGroup" style="display:none">
<label class="opt-label">画风类型</label>
<select id="styleType">
<option value="漫画">漫画</option>
<option value="元气">元气</option>
<option value="中世纪">中世纪</option>
<option value="水彩">水彩</option>
</select>
<label class="opt-label" style="margin-top:10px">画风权重 <span class="opt-hint" id="weightHint">0.8</span></label>
<input type="range" id="styleWeight" min="1" max="10" value="8" step="1" class="weight-slider" />
</div>
<!-- Toggles -->
<div class="toggle-group">
<label class="toggle-row">
<input type="checkbox" id="promptOptimizer" />
<span class="toggle-track"><span class="toggle-thumb"></span></span>
<span class="toggle-label">自动优化 Prompt</span>
</label>
<label class="toggle-row">
<input type="checkbox" id="watermark" />
<span class="toggle-track"><span class="toggle-thumb"></span></span>
<span class="toggle-label">添加 AI 水印</span>
</label>
</div>
</div>
</div><!-- /options-grid -->
<!-- Generate -->
<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"/>
@@ -74,40 +167,19 @@
<circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="20"/>
</svg>
</button>
</div>
</form>
<!-- Error message -->
<!-- Error -->
<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">生成结果</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>
下载
</button>
<button class="action-btn" id="copyBtn" title="复制 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>
复制
</button>
<!-- Results -->
<div id="resultArea" style="display:none">
<div class="result-meta" id="resultMeta"></div>
<div class="image-grid" id="imageGrid"></div>
</div>
</div>
<div class="image-wrap" id="imageWrap">
<img id="resultImg" src="" alt="Generated image" />
</div>
</div>
</main>
</main>
</div>
<!-- Settings Modal -->
@@ -128,12 +200,11 @@
<input type="password" id="apiKeyInput" placeholder="eyJhbGciOiJIUzI1NiIsInR..." />
<button class="icon-btn" id="toggleKey" type="button" title="显示/隐藏">
<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"/>
<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">请从 <a href="https://platform.minimaxi.com/" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取 API Key</p>
<p class="field-hint">请从 <a href="https://platform.minimaxi.com/user-center/basic-information/interface-key" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取</p>
</div>
<div class="field">
<label for="baseUrlInput">API 地址</label>
@@ -143,7 +214,7 @@
</div>
<div class="modal-footer">
<button class="btn-secondary" id="cancelSettings">取消</button>
<button class="btn-primary" id="saveSettings">保存</button>
<button class="btn-primary" id="saveSettingsBtn">保存</button>
</div>
</div>
</div>
@@ -151,48 +222,95 @@
<script>
'use strict';
// ============================================================
// DOM refs
// ============================================================
// ── State ──────────────────────────────────────────────────────
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');
let currentModel = 'image-01';
let currentImages = []; // [{url, base64}]
let loading = false;
// ── DOM refs ───────────────────────────────────────────────────
const $ = id => document.getElementById(id);
const promptInput = $('promptInput');
const charCount = $('charCount');
const generateForm = $('generateForm');
const generateBtn = $('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 errorMsg = $('errorMsg');
const resultArea = $('resultArea');
const resultMeta = $('resultMeta');
const imageGrid = $('imageGrid');
const apiKeyAlert = $('apiKeyAlert');
const alertSettings = $('alertSettingsBtn');
const aspectRatio = $('aspectRatio');
const responseFormat = $('responseFormat');
const nInput = $('nInput');
const nMinus = $('nMinus');
const nPlus = $('nPlus');
const seedInput = $('seedInput');
const widthInput = $('widthInput');
const heightInput = $('heightInput');
const styleGroup = $('styleGroup');
const styleType = $('styleType');
const styleWeight = $('styleWeight');
const weightHint = $('weightHint');
const promptOptimizer= $('promptOptimizer');
const watermark = $('watermark');
const settingsModal = $('settingsModal');
const openSettings = $('openSettings');
const closeSettings = $('closeSettings');
const cancelSettings = $('cancelSettings');
const saveSettingsBtn= $('saveSettingsBtn');
const apiKeyInput = $('apiKeyInput');
const toggleKey = $('toggleKey');
const baseUrlInput = $('baseUrlInput');
const apiKeyAlert = document.getElementById('apiKeyAlert');
const alertSettings = document.getElementById('alertSettingsBtn');
// ── Model tabs ─────────────────────────────────────────────────
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');
document.querySelectorAll('.model-tab').forEach(tab => {
tab.addEventListener('click', () => {
const model = tab.dataset.model;
setModel(model);
});
});
// ============================================================
// State
// ============================================================
function setModel(model) {
currentModel = model;
document.querySelectorAll('.model-tab').forEach(t =>
t.classList.toggle('active', t.dataset.model === model)
);
let currentBase64 = '';
let loading = false;
const isLive = model === 'image-01-live';
styleGroup.style.display = isLive ? '' : 'none';
// ============================================================
// Helpers
// ============================================================
// 21:9 only for image-01
const opt21_9 = aspectRatio.querySelector('option[value="21:9"]');
if (opt21_9) opt21_9.disabled = isLive;
if (isLive && aspectRatio.value === '21:9') aspectRatio.value = '16:9';
}
// ── Stepper (n) ────────────────────────────────────────────────
nMinus.addEventListener('click', () => {
const v = parseInt(nInput.value) - 1;
if (v >= 1) nInput.value = v;
});
nPlus.addEventListener('click', () => {
const v = parseInt(nInput.value) + 1;
if (v <= 9) nInput.value = v;
});
// ── Weight slider ──────────────────────────────────────────────
styleWeight.addEventListener('input', () => {
weightHint.textContent = (styleWeight.value / 10).toFixed(1);
});
// ── Helpers ────────────────────────────────────────────────────
function setLoading(on) {
loading = on;
@@ -206,20 +324,13 @@ function setLoading(on) {
function showError(msg) {
errorMsg.textContent = msg;
errorMsg.style.display = 'flex';
errorMsg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
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();
@@ -227,55 +338,149 @@ async function api(path, opts = {}) {
return json;
}
// ============================================================
// Init: load config
// ============================================================
function buildPayload() {
const n = parseInt(nInput.value);
const seed = seedInput.value ? parseInt(seedInput.value) : undefined;
const width = widthInput.value ? parseInt(widthInput.value) : undefined;
const height = heightInput.value ? parseInt(heightInput.value) : undefined;
const payload = {
model: currentModel,
prompt: promptInput.value.trim(),
aspect_ratio: aspectRatio.value,
response_format: responseFormat.value,
n: n,
};
if (seed) payload.seed = seed;
if (width && height) { payload.width = width; payload.height = height; }
if (promptOptimizer.checked) payload.prompt_optimizer = true;
if (watermark.checked) payload.aigc_watermark = true;
if (currentModel === 'image-01-live') {
payload.style = {
style_type: styleType.value,
style_weight: parseFloat((styleWeight.value / 10).toFixed(1)),
};
}
return payload;
}
function renderResults(images, id, successCount, failedCount) {
currentImages = images;
imageGrid.innerHTML = '';
if (id) {
resultMeta.innerHTML = `
<span>任务 ID：<code>${id}</code></span>
${successCount != null ? `<span>成功 ${successCount} 张${failedCount ? `，失败 ${failedCount} 张` : ''}</span>` : ''}
`;
resultMeta.style.display = 'flex';
} else {
resultMeta.style.display = 'none';
}
const fmt = responseFormat.value;
images.forEach((src, i) => {
const card = document.createElement('div');
card.className = 'image-card';
const img = document.createElement('img');
img.src = fmt === 'url' ? src : `data:image/jpeg;base64,${src}`;
img.alt = `生成结果 ${i + 1}`;
img.loading = 'lazy';
const actions = document.createElement('div');
actions.className = 'image-actions';
const downloadBtn = document.createElement('button');
downloadBtn.className = 'action-btn';
downloadBtn.innerHTML = `<svg width="14" height="14" 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>下载`;
downloadBtn.addEventListener('click', () => downloadImage(src, fmt, i));
const copyBtn = document.createElement('button');
copyBtn.className = 'action-btn';
copyBtn.innerHTML = `<svg width="14" height="14" 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>复制`;
copyBtn.addEventListener('click', () => copySrc(src, fmt, copyBtn));
actions.appendChild(downloadBtn);
actions.appendChild(copyBtn);
card.appendChild(img);
card.appendChild(actions);
imageGrid.appendChild(card);
});
resultArea.style.display = 'block';
resultArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function downloadImage(src, fmt, index) {
const a = document.createElement('a');
if (fmt === 'url') {
a.href = src;
} else {
a.href = `data:image/jpeg;base64,${src}`;
}
a.download = `生成-${Date.now()}-${index + 1}.jpg`;
a.target = '_blank';
a.click();
}
async function copySrc(src, fmt, btn) {
try {
if (fmt === 'url') {
await navigator.clipboard.writeText(src);
} else {
await navigator.clipboard.writeText(src);
}
const orig = btn.innerHTML;
btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"/></svg>已复制`;
setTimeout(() => { btn.innerHTML = orig; }, 1500);
} catch {
showError('复制失败');
}
}
// ── Init ────────────────────────────────────────────────────────
async function init() {
try {
const cfg = await api('/api/config');
if (!cfg.hasApiKey) {
apiKeyAlert.style.display = 'flex';
}
if (!cfg.hasApiKey) apiKeyAlert.style.display = 'flex';
baseUrlInput.value = cfg.baseUrl || 'https://api.minimaxi.com';
} catch (e) {
// non-fatal
}
} catch { /* non-fatal */ }
}
// ============================================================
// Generate
// ============================================================
// ── Generate ────────────────────────────────────────────────────
generateForm.addEventListener('submit', async (e) => {
e.preventDefault();
if (loading) return;
const prompt = promptInput.value.trim();
if (!prompt) {
showError('请输入描述内容。');
return;
}
if (!prompt) { showError('请输入图片描述'); return; }
clearError();
resultArea.style.display = 'none';
setLoading(true);
try {
const payload = buildPayload();
const data = await api('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt: prompt,
aspect_ratio: aspectRatio.value,
}),
body: JSON.stringify(payload),
});
if (!data.images || data.images.length === 0) {
throw new Error('未返回任何图片。');
const images = data.images || [];
if (images.length === 0) {
throw new Error('未返回任何图片');
}
showResult(data.images[0]);
renderResults(images, data.id, data.success_count, data.failed_count);
} catch (err) {
showError(err.message);
} finally {
@@ -283,40 +488,13 @@ generateForm.addEventListener('submit', async (e) => {
}
});
// ============================================================
// Prompt char count
// ============================================================
// ── 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 = '已复制！';
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> 复制`; }, 1500);
} catch {
showError('复制失败。');
}
});
// ============================================================
// Settings modal
// ============================================================
// ── Settings modal ──────────────────────────────────────────────
function openModal() {
settingsModal.classList.add('open');
@@ -332,39 +510,32 @@ 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();
});
settingsModal.addEventListener('click', e => { if (e.target === settingsModal) closeModal(); });
toggleKey.addEventListener('click', () => {
const isPw = apiKeyInput.type === 'password';
apiKeyInput.type = isPw ? 'text' : 'password';
apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
});
saveSettingsBtn.addEventListener('click', async () => {
clearError();
const apiKey = apiKeyInput.value.trim();
const baseUrl = baseUrlInput.value.trim() || 'https://api.minimax.io';
const baseUrl = baseUrlInput.value.trim() || 'https://api.minimaxi.com';
try {
await api('/api/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ apiKey, baseUrl }),
});
if (apiKey) {
apiKeyAlert.style.display = 'none';
}
if (apiKey) apiKeyAlert.style.display = 'none';
closeModal();
} catch (err) {
showError(err.message);
}
});
// ============================================================
// Init
// ============================================================
// ── Start ──────────────────────────────────────────────────────
init();
</script>
</body>
</html>

562
style.css
View File

@@ -1,12 +1,6 @@
/* ============================================================
Reset & Base
============================================================ */
/* ── Reset & Variables ──────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f0f13;
@@ -38,26 +32,22 @@ button { cursor: pointer; font-family: inherit; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================
Layout
============================================================ */
/* ── Layout ──────────────────────────────────────────────────── */
#app {
max-width: 640px;
max-width: 860px;
margin: 0 auto;
padding: 0 20px 60px;
padding: 0 24px 80px;
min-height: 100vh;
}
/* ============================================================
Header
============================================================ */
/* ── Header ──────────────────────────────────────────────────── */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0 28px;
padding: 22px 0 24px;
}
.logo {
@@ -69,15 +59,9 @@ header {
color: var(--text);
letter-spacing: -0.3px;
}
.logo svg { color: var(--accent2); }
.logo svg {
color: var(--accent2);
flex-shrink: 0;
}
/* ============================================================
Alert banner
============================================================ */
/* ── Alert ───────────────────────────────────────────────────── */
.alert-banner {
display: flex;
@@ -92,7 +76,6 @@ header {
margin-bottom: 20px;
animation: fadeSlideIn 0.4s var(--ease);
}
.alert-banner svg { color: var(--accent2); flex-shrink: 0; }
.link-btn {
@@ -105,9 +88,53 @@ header {
cursor: pointer;
}
/* ============================================================
Form
============================================================ */
/* ── Model Tabs ──────────────────────────────────────────────── */
.model-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.model-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius2);
padding: 10px 14px;
color: var(--text2);
transition: all 0.2s;
}
.model-tab:hover {
border-color: rgba(124,106,245,0.3);
color: var(--text);
}
.model-tab.active {
background: rgba(124,106,245,0.12);
border-color: rgba(124,106,245,0.5);
color: var(--text);
}
.tab-name {
font-size: 13px;
font-weight: 600;
font-family: 'Courier New', monospace;
}
.tab-desc {
font-size: 11px;
color: var(--text3);
}
.model-tab.active .tab-desc { color: var(--accent2); }
/* ── Prompt ──────────────────────────────────────────────────── */
.prompt-row {
position: relative;
@@ -115,11 +142,9 @@ header {
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.2s;
margin-bottom: 16px;
}
.prompt-row:focus-within {
border-color: rgba(124, 106, 245, 0.4);
}
.prompt-row:focus-within { border-color: rgba(124,106,245,0.4); }
textarea {
width: 100%;
@@ -130,11 +155,11 @@ textarea {
font-family: inherit;
font-size: 15px;
line-height: 1.6;
padding: 14px 16px 10px;
resize: none;
padding: 14px 16px 8px;
resize: vertical;
border-radius: var(--radius);
min-height: 100px;
}
textarea::placeholder { color: var(--text3); }
.prompt-footer {
@@ -142,117 +167,252 @@ textarea::placeholder { color: var(--text3); }
justify-content: flex-end;
padding: 0 14px 10px;
}
.char-count { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.char-count {
font-size: 11px;
color: var(--text3);
font-variant-numeric: tabular-nums;
/* ── Options Grid ────────────────────────────────────────────── */
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
/* ============================================================
Controls row
============================================================ */
.controls {
.options-col {
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 12px;
margin-top: 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.control-group {
.opt-group {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.control-group label {
.opt-label {
font-size: 12px;
color: var(--text2);
font-weight: 500;
padding-left: 2px;
color: var(--text2);
}
.opt-hint {
font-weight: 400;
color: var(--text3);
font-size: 11px;
}
.opt-note {
font-size: 11px;
color: var(--text3);
font-style: italic;
}
/* ── Select ─────────────────────────────────────────────────── */
select {
background: var(--surface);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius2);
color: var(--text);
font-family: inherit;
font-size: 14px;
padding: 9px 12px;
padding: 8px 30px 8px 10px;
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;
background-position: right 8px center;
transition: border-color 0.2s;
width: 100%;
}
select:focus { border-color: rgba(124,106,245,0.4); }
/* ============================================================
Generate button
============================================================ */
/* ── Number / Text inputs ────────────────────────────────────── */
input[type="number"],
input[type="text"] {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius2);
color: var(--text);
font-family: inherit;
font-size: 14px;
padding: 8px 10px;
outline: none;
width: 100%;
transition: border-color 0.2s;
}
input:focus { border-color: rgba(124,106,245,0.4); }
input::placeholder { color: var(--text3); }
/* Hide number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
/* ── Stepper ─────────────────────────────────────────────────── */
.stepper {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
.stepper-btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
width: 36px;
height: 36px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
border-radius: var(--radius2);
}
.stepper-btn:first-child { border-radius: var(--radius2) 0 0 var(--radius2); }
.stepper-btn:last-child { border-radius: 0 var(--radius2) var(--radius2) 0; }
.stepper-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.stepper input {
border-radius: 0;
border-left: none;
border-right: none;
text-align: center;
width: 52px;
flex-shrink: 0;
-moz-appearance: textfield;
}
/* ── Dimension row ───────────────────────────────────────────── */
.dim-row {
display: flex;
align-items: center;
gap: 8px;
}
.dim-row input { flex: 1; }
.dim-x { color: var(--text3); font-size: 14px; flex-shrink: 0; }
/* ── Weight slider ───────────────────────────────────────────── */
.weight-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--surface2);
border-radius: 2px;
outline: none;
border: none;
padding: 0;
cursor: pointer;
}
.weight-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
transition: transform 0.15s;
}
.weight-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
/* ── Toggle switches ─────────────────────────────────────────── */
.toggle-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.toggle-row {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.toggle-row input { display: none; }
.toggle-track {
width: 36px;
height: 20px;
background: var(--surface2);
border-radius: 10px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
border: 1px solid var(--border);
}
.toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--text3);
transition: transform 0.2s, background 0.2s;
}
.toggle-row input:checked + .toggle-track {
background: rgba(124,106,245,0.3);
border-color: rgba(124,106,245,0.5);
}
.toggle-row input:checked + .toggle-track .toggle-thumb {
transform: translateX(16px);
background: var(--accent);
}
.toggle-label { font-size: 13px; color: var(--text2); }
/* ── Generate Button ─────────────────────────────────────────── */
.generate-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius2);
padding: 10px 20px;
font-size: 14px;
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
height: 42px;
width: 100%;
height: 48px;
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;
margin-bottom: 16px;
}
.generate-btn:hover:not(:disabled) { background: var(--accent2); transform: translateY(-1px); }
.generate-btn:active:not(:disabled) { transform: translateY(0); }
.generate-btn:disabled { opacity: 0.65; 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 .btn-text { display: none; }
.generate-btn.loading .spinner { display: inline; }
.generate-btn.loading .spinner {
display: inline;
}
/* ============================================================
Error
============================================================ */
/* ── Error ────────────────────────────────────────────────────── */
.error-msg {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
margin-bottom: 16px;
padding: 10px 14px;
background: rgba(245,108,108,0.1);
border: 1px solid rgba(245,108,108,0.2);
@@ -262,79 +422,82 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
animation: fadeSlideIn 0.3s var(--ease);
}
/* ============================================================
Result area
============================================================ */
/* ── Result Meta ──────────────────────────────────────────────── */
.result-area {
margin-top: 28px;
animation: fadeSlideIn 0.5s var(--ease);
}
.result-header {
.result-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
#resultLabel {
flex-wrap: wrap;
gap: 16px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius2);
font-size: 12px;
font-weight: 600;
color: var(--text2);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 14px;
}
.result-actions {
.result-meta code {
font-family: 'Courier New', monospace;
color: var(--accent2);
font-size: 11px;
}
/* ── Image Grid ──────────────────────────────────────────────── */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.image-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
animation: fadeSlideIn 0.4s var(--ease);
}
.image-card img {
display: block;
width: 100%;
height: auto;
min-height: 180px;
object-fit: cover;
background: var(--surface2);
}
.image-actions {
display: flex;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--border);
}
.action-btn {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
background: var(--surface);
justify-content: center;
gap: 5px;
background: var(--surface2);
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;
padding: 6px 10px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
cursor: pointer;
font-family: inherit;
}
.action-btn:hover {
background: var(--surface2);
background: rgba(124,106,245,0.12);
color: var(--text);
border-color: rgba(255,255,255,0.12);
border-color: rgba(124,106,245,0.3);
}
.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 button ─────────────────────────────────────────────── */
.icon-btn {
display: flex;
@@ -349,15 +512,9 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn:hover {
background: var(--surface);
color: var(--text);
}
/* ============================================================
Modal
============================================================ */
/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
@@ -373,11 +530,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
transition: opacity 0.25s;
z-index: 100;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
background: var(--surface);
@@ -388,10 +541,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
transform: translateY(12px) scale(0.97);
transition: transform 0.3s var(--ease);
}
.modal-overlay.open .modal {
transform: translateY(0) scale(1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
display: flex;
@@ -399,12 +549,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
justify-content: space-between;
padding: 18px 20px 0;
}
.modal-header h2 {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.modal-header h2 { font-size: 16px; font-weight: 600; }
.modal-body {
padding: 18px 20px;
@@ -413,47 +558,13 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
gap: 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 7px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text2); }
.field label {
font-size: 13px;
font-weight: 500;
color: var(--text2);
}
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }
.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);
}
.field-hint { font-size: 11px; color: var(--text3); }
.modal-footer {
display: flex;
@@ -470,13 +581,10 @@ input:focus { border-color: rgba(124, 106, 245, 0.4); }
font-family: inherit;
font-size: 14px;
padding: 8px 18px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
}
.btn-secondary:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.btn-primary {
background: var(--accent);
@@ -487,32 +595,24 @@ input:focus { border-color: rgba(124, 106, 245, 0.4); }
font-size: 14px;
font-weight: 600;
padding: 8px 18px;
cursor: pointer;
transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent2); }
/* ============================================================
Animations
============================================================ */
/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(6px); }
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
Responsive
============================================================ */
/* ── 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; }
@media (max-width: 600px) {
#app { padding: 0 16px 60px; }
.options-grid { grid-template-columns: 1fr; }
.image-grid { grid-template-columns: 1fr; }
}