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

chore: 全中文界面 + 中国区API (api.minimaxi.com)

Browse Source
This commit is contained in:
zwbcc
2026-03-25 23:53:02 +08:00
parent 2837bc1a85
commit aa48e293a3
2 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Generator</title>
<title>图片生成器</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
@@ -18,9 +18,9 @@
<circle cx="8.5" cy="8.5" r="1.5"/>
<polyline points="21,15 16,10 5,21"/>
</svg>
<span>Image Generator</span>
<span>图片生成器</span>
</div>
<button class="icon-btn" id="openSettings" title="Settings">
<button class="icon-btn" id="openSettings" title="设置">
<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"/>
@@ -31,7 +31,7 @@
<!-- 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>
<span>未配置 API Key，请先在 <button class="link-btn" id="alertSettingsBtn">设置</button> 中填写。</span>
</div>
<!-- Main form -->
@@ -40,7 +40,7 @@
<div class="prompt-row">
<textarea
id="promptInput"
placeholder="Describe the image you want to generate..."
placeholder="描述你想要生成的图片..."
rows="3"
maxlength="1500"
autofocus
@@ -54,14 +54,14 @@
<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>
<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>
</select>
</div>
@@ -69,7 +69,7 @@
<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>
<span class="btn-text">生成图片</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>
@@ -83,7 +83,7 @@
<!-- Generated image(s) -->
<div class="result-area" id="resultArea" style="display:none">
<div class="result-header">
<span id="resultLabel">Generated</span>
<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">
@@ -91,14 +91,14 @@
<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">
<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>
Copy
复制
</button>
</div>
</div>
@@ -114,7 +114,7 @@
<div class="modal-overlay" id="settingsModal">
<div class="modal">
<div class="modal-header">
<h2>Settings</h2>
<h2>设置</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"/>
@@ -126,24 +126,24 @@
<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">
<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"/>
</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>
<p class="field-hint">请从 <a href="https://platform.minimaxi.com/" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取 API Key</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>
<label for="baseUrlInput">API 地址</label>
<input type="text" id="baseUrlInput" placeholder="https://api.minimaxi.com" />
<p class="field-hint">默认使用中国区 API，仅在需要代理时修改。</p>
</div>
</div>
<div class="modal-footer">
<button class="btn-secondary" id="cancelSettings">Cancel</button>
<button class="btn-primary" id="saveSettings">Save</button>
<button class="btn-secondary" id="cancelSettings">取消</button>
<button class="btn-primary" id="saveSettings">保存</button>
</div>
</div>
</div>
@@ -237,7 +237,7 @@ async function init() {
if (!cfg.hasApiKey) {
apiKeyAlert.style.display = 'flex';
}
baseUrlInput.value = cfg.baseUrl || 'https://api.minimax.io';
baseUrlInput.value = cfg.baseUrl || 'https://api.minimaxi.com';
} catch (e) {
// non-fatal
}
@@ -253,7 +253,7 @@ generateForm.addEventListener('submit', async (e) => {
const prompt = promptInput.value.trim();
if (!prompt) {
showError('Please enter a prompt.');
showError('请输入描述内容。');
return;
}
@@ -272,7 +272,7 @@ generateForm.addEventListener('submit', async (e) => {
});
if (!data.images || data.images.length === 0) {
throw new Error('No images returned.');
throw new Error('未返回任何图片。');
}
showResult(data.images[0]);
@@ -307,10 +307,10 @@ 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);
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('Clipboard copy failed.');
showError('复制失败。');
}
});