图片工作�?/title> <style> :root { --bg: #f4f7fb; --panel: #ffffff; --line: #d8e0ea; --text: #122033; --muted: #5f6f82; --primary: #156b5f; --primary-strong: #0f5a50; --danger: #b42318; --shadow: 0 16px 40px rgba(15, 23, 42, 0.08); } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: radial-gradient(circle at top left, rgba(21, 107, 95, 0.12), transparent 28%), linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%); color: var(--text); } .wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 60px; } .hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .hero h1 { margin: 0; font-size: 30px; line-height: 1.1; } .hero p { margin: 8px 0 0; color: var(--muted); font-size: 14px; } .panel { background: var(--panel); border: 1px solid rgba(216, 224, 234, 0.9); border-radius: 20px; box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; } .panel h2 { margin: 0 0 14px; font-size: 17px; } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #304255; } input, select, textarea, button { font: inherit; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 11px 12px; color: var(--text); } textarea { min-height: 120px; resize: vertical; } .row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn { border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-strong); } .btn-secondary { background: #ebf1f6; color: #223246; } .btn-danger { background: #fff1f1; color: var(--danger); } .stat-box { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(21, 107, 95, 0.08), rgba(21, 107, 95, 0.02)); border: 1px solid rgba(21, 107, 95, 0.12); } .stat-box .value { margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--primary-strong); } .muted { color: var(--muted); font-size: 13px; } .status { margin-top: 10px; font-size: 13px; min-height: 20px; } .status.ok { color: #067647; } .status.err { color: var(--danger); } .dropzone { border: 2px dashed #a6c8c1; border-radius: 18px; background: #f7fcfb; padding: 24px 16px; text-align: center; transition: background 0.2s ease, border-color 0.2s ease; } .dropzone.dragover { border-color: var(--primary); background: #eefaf7; } .dropzone strong { display: block; font-size: 16px; margin-bottom: 8px; } .dropzone input { display: none; } .thumb-grid, .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; } .thumb, .result-item { border: 1px solid #e0e8f0; border-radius: 14px; overflow: hidden; background: #fff; } .thumb img, .result-item img { display: block; width: 100%; height: 146px; object-fit: cover; background: #f3f5f7; } .thumb-body, .result-body { padding: 10px; } .thumb-body { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .thumb-info { min-width: 0; font-size: 12px; color: #425468; word-break: break-all; } .thumb-remove { border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 700; } .result-body a { color: var(--primary-strong); text-decoration: none; font-size: 12px; font-weight: 700; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; border-bottom: 1px solid #edf2f7; padding: 10px 8px; vertical-align: top; } th { color: #5a6b7d; font-size: 12px; } .hidden { display: none !important; } @media (max-width: 900px) { .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; } .wrap { width: min(100% - 20px, 1180px); } .hero h1 { font-size: 25px; } } </style> </head> <body> <div class="wrap"> <div class="hero"> <div> <h1>图片工作�?/h1> <p>支持文生图、图生图、多图拖拽上传，后台可配置多家供应商与全局密钥池�?/p> </div> <div class="row-actions"> <button id="logoutBtn" class="btn btn-secondary hidden" type="button">退出登�?/button> </div> </div> <div id="loginPanel" class="panel"> <h2>登录</h2> <div class="grid"> <div class="col-4"> <label for="loginUsername">用户�?/label> <input id="loginUsername" type="text" placeholder="demo"> </div> <div class="col-4"> <label for="loginPassword">密码</label> <input id="loginPassword" type="password" placeholder="demo123456"> </div> <div class="col-4" style="display:flex; align-items:flex-end;"> <button id="loginBtn" class="btn btn-primary" type="button">登录进入工作�?/button> </div> </div> <div id="loginStatus" class="status"></div> </div> <div id="appPanel" class="hidden"> <div class="panel"> <h2>生成设置</h2> <div class="grid"> <div class="col-4"> <label for="modelSelect">模型</label> <select id="modelSelect"></select> </div> <div class="col-4"> <label for="aspectRatioSelect">比例</label> <select id="aspectRatioSelect"></select> </div> <div class="col-4"> <label for="imageSizeSelect">图片尺寸</label> <select id="imageSizeSelect"></select> </div> <div class="col-3"> <label for="countInput">数量</label> <input id="countInput" type="number" min="1" max="20" value="1"> </div> <div class="col-3"> <div class="stat-box"> <div class="muted">单价</div> <div id="priceLabel" class="value">¥0.0000 / �?/div> </div> </div> <div class="col-6"> <div class="stat-box"> <div class="muted">预计费用</div> <div id="estimateLabel" class="value">¥0.0000</div> </div> </div> <div class="col-12"> <label for="promptInput">提示�?/label> <textarea id="promptInput" placeholder="请输入你要生成的内容，或者描述要如何编辑参考图�?></textarea> </div> <div class="col-12"> <div id="modelMeta" class="muted"></div> </div> </div> </div> <div class="panel"> <h2>参考图上传</h2> <div id="dropzone" class="dropzone"> <strong>拖拽图片到这�?/strong> <div class="muted">支持多张图片，单张最�?20MB，也可以点击下面按钮选择�?/div> <div class="row-actions" style="justify-content:center; margin-top:14px;"> <label class="btn btn-primary" for="fileInput">选择图片</label> <button id="clearImagesBtn" class="btn btn-danger" type="button">清空图片</button> </div> <input id="fileInput" type="file" accept="image/*" multiple> </div> <div id="uploadStatus" class="status"></div> <div id="thumbGrid" class="thumb-grid"></div> </div> <div class="panel"> <div class="row-actions"> <button id="generateBtn" class="btn btn-primary" type="button">开始生�?/button> <button id="refreshTasksBtn" class="btn btn-secondary" type="button">刷新历史</button> </div> <div id="generateStatus" class="status"></div> <div id="taskCost" class="muted"></div> <div id="resultGrid" class="result-grid"></div> </div> <div class="panel"> <h2>最近历�?/h2> <table> <thead> <tr> <th>ID</th> <th>模型</th> <th>状�?/th> <th>数量</th> <th>费用</th> <th>时间</th> </tr> </thead> <tbody id="taskTableBody"></tbody> </table> </div> </div> </div> <script> const API_BASE = '../api'; const TOKEN_KEY = 'backend_simple_studio_token'; const state = { token: localStorage.getItem(TOKEN_KEY) || '', user: null, models: [], modelMap: new Map(), images: [], }; const el = { loginPanel: document.getElementById('loginPanel'), appPanel: document.getElementById('appPanel'), loginUsername: document.getElementById('loginUsername'), loginPassword: document.getElementById('loginPassword'), loginBtn: document.getElementById('loginBtn'), logoutBtn: document.getElementById('logoutBtn'), loginStatus: document.getElementById('loginStatus'), modelSelect: document.getElementById('modelSelect'), aspectRatioSelect: document.getElementById('aspectRatioSelect'), imageSizeSelect: document.getElementById('imageSizeSelect'), countInput: document.getElementById('countInput'), promptInput: document.getElementById('promptInput'), priceLabel: document.getElementById('priceLabel'), estimateLabel: document.getElementById('estimateLabel'), modelMeta: document.getElementById('modelMeta'), dropzone: document.getElementById('dropzone'), fileInput: document.getElementById('fileInput'), clearImagesBtn: document.getElementById('clearImagesBtn'), uploadStatus: document.getElementById('uploadStatus'), thumbGrid: document.getElementById('thumbGrid'), generateBtn: document.getElementById('generateBtn'), generateStatus: document.getElementById('generateStatus'), taskCost: document.getElementById('taskCost'), resultGrid: document.getElementById('resultGrid'), refreshTasksBtn: document.getElementById('refreshTasksBtn'), taskTableBody: document.getElementById('taskTableBody'), }; function setStatus(node, text, ok = true) { node.textContent = text || ''; node.className = 'status ' + (text ? (ok ? 'ok' : 'err') : ''); } function escapeHtml(text) { return String(text) .replaceAll('&', '&') .replaceAll('<', '<') .replaceAll('>', '>') .replaceAll('"', '"') .replaceAll("'", '''); } async function apiRequest(path, method = 'GET', body = null, withAuth = true, timeoutMs = 65000) { const headers = { 'Content-Type': 'application/json' }; if (withAuth && state.token) { headers.Authorization = 'Bearer ' + state.token; } const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), Math.max(3000, Number(timeoutMs) || 65000)); let res; try { res = await fetch(`${API_BASE}/${path}`, { method, headers, body: body ? JSON.stringify(body) : null, signal: controller.signal, }); } catch (err) { if (err && err.name === 'AbortError') { throw new Error('请求超时，请稍后重试'); } throw err; } finally { clearTimeout(timeout); } const json = await res.json().catch(() => ({})); if (!res.ok || json.code !== 200) { const reqId = json && json.data && json.data.request_id ? ` (request_id: ${json.data.request_id})` : ''; throw new Error((json.message || `HTTP ${res.status}`) + reqId); } return json.data; } function togglePanels(loggedIn) { el.loginPanel.classList.toggle('hidden', loggedIn); el.appPanel.classList.toggle('hidden', !loggedIn); el.logoutBtn.classList.toggle('hidden', !loggedIn); } async function checkLogin() { if (!state.token) return false; try { const data = await apiRequest('auth.php?action=check'); state.user = data.user || null; return true; } catch (err) { state.token = ''; localStorage.removeItem(TOKEN_KEY); return false; } } async function login() { const username = el.loginUsername.value.trim(); const password = el.loginPassword.value; if (!username || !password) { setStatus(el.loginStatus, '请输入用户名和密码�?, false); return; } try { const data = await apiRequest('auth.php?action=login', 'POST', { username, password }, false); state.token = data.token || ''; state.user = data.user || null; localStorage.setItem(TOKEN_KEY, state.token); setStatus(el.loginStatus, '登录成功�?); await bootstrapApp(); } catch (err) { setStatus(el.loginStatus, err.message || '登录失败�?, false); } } function logout() { state.token = ''; state.user = null; state.models = []; state.modelMap.clear(); state.images = []; localStorage.removeItem(TOKEN_KEY); el.resultGrid.innerHTML = ''; el.taskTableBody.innerHTML = ''; renderImages(); togglePanels(false); } function selectedModel() { return state.modelMap.get(el.modelSelect.value) || null; } function modelMaxImages(model) { const maxImages = Number(model?.capabilities?.maxImages || 10); return Number.isFinite(maxImages) && maxImages > 0 ? Math.min(20, Math.floor(maxImages)) : 10; } function setSelectOptions(selectNode, options, fallbackLabel, currentValue) { selectNode.innerHTML = ''; const items = Array.isArray(options) ? options.filter(Boolean) : []; if (items.length === 0) { const opt = document.createElement('option'); opt.value = ''; opt.textContent = fallbackLabel; selectNode.appendChild(opt); return; } for (const item of items) { const opt = document.createElement('option'); opt.value = item; opt.textContent = item; if (currentValue && currentValue === item) { opt.selected = true; } selectNode.appendChild(opt); } } function renderModelOptions() { el.modelSelect.innerHTML = ''; state.modelMap.clear(); for (const model of state.models) { const opt = document.createElement('option'); opt.value = model.code; opt.textContent = `${model.display_name} (${model.provider_name})`; el.modelSelect.appendChild(opt); state.modelMap.set(model.code, model); } updateModelUI(); } function updateModelUI() { const model = selectedModel(); if (!model) return; const ratios = Array.isArray(model.capabilities?.sizes) ? model.capabilities.sizes : []; const imageSizes = Array.isArray(model.capabilities?.imageSizes) ? model.capabilities.imageSizes : []; setSelectOptions(el.aspectRatioSelect, ratios, '默认比例', el.aspectRatioSelect.value); setSelectOptions(el.imageSizeSelect, imageSizes, '默认尺寸', el.imageSizeSelect.value); const maxImages = modelMaxImages(model); const price = Number(model.price_cny_per_image || 0); const inputCount = Number(el.countInput.value) || 1; const count = Math.max(1, Math.min(20, Math.min(maxImages, inputCount))); if (inputCount !== count) { el.countInput.value = String(count); } el.countInput.min = '1'; el.countInput.max = String(maxImages); const estimated = price * count; el.priceLabel.textContent = `¥${price.toFixed(4)} / 张`; el.estimateLabel.textContent = `¥${estimated.toFixed(4)}`; el.modelMeta.textContent = `协议�?{model.protocol_key} · 最大参考图 ${maxImages} �?· 模型�?${model.model_key}`; if (state.images.length > maxImages) { state.images = state.images.slice(0, maxImages); renderImages(); } } function renderImages() { el.thumbGrid.innerHTML = ''; if (state.images.length === 0) return; state.images.forEach((item, index) => { const card = document.createElement('div'); card.className = 'thumb'; card.innerHTML = ` <img src="${item.dataUrl}" alt="${escapeHtml(item.name)}"> <div class="thumb-body"> <div class="thumb-info"> <div>${escapeHtml(item.name)}</div> <div>${(item.size / 1024 / 1024).toFixed(2)} MB</div> </div> <button class="thumb-remove" type="button" data-index="${index}">删除</button> </div> `; el.thumbGrid.appendChild(card); }); el.thumbGrid.querySelectorAll('.thumb-remove').forEach((btn) => { btn.addEventListener('click', () => { const index = Number(btn.dataset.index || '-1'); if (index >= 0) { state.images.splice(index, 1); renderImages(); setStatus(el.uploadStatus, `已选择 ${state.images.length} 张图片。`); } }); }); } function clearImages() { state.images = []; renderImages(); setStatus(el.uploadStatus, '已清空参考图�?); } async function readFiles(fileList) { const files = Array.from(fileList || []); const model = selectedModel(); const maxImages = modelMaxImages(model); const beforeCount = state.images.length; const accepted = []; for (const file of files) { if (!file.type.startsWith('image/')) continue; if (file.size > 20 * 1024 * 1024) { setStatus(el.uploadStatus, `${file.name} 超过 20MB，已跳过。`, false); continue; } const dataUrl = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); accepted.push({ name: file.name, size: file.size, dataUrl: String(dataUrl), }); } state.images = [...state.images, ...accepted].slice(0, maxImages); renderImages(); const droppedCount = Math.max(0, beforeCount + accepted.length - state.images.length); if (droppedCount > 0) { setStatus(el.uploadStatus, `已达到模型上限，仅保�?${maxImages} 张参考图。`); } else { setStatus(el.uploadStatus, `已选择 ${state.images.length} 张图片。`); } } function renderResults(images) { el.resultGrid.innerHTML = ''; const list = Array.isArray(images) ? images : []; for (const image of list) { const url = image.url || (image.b64_json ? `data:image/png;base64,${image.b64_json}` : ''); if (!url) continue; const card = document.createElement('div'); card.className = 'result-item'; card.innerHTML = ` <img src="${url}" alt="生成结果"> <div class="result-body"> <a href="${url}" target="_blank" rel="noopener">打开原图</a> </div> `; el.resultGrid.appendChild(card); } } async function pollPendingImageTask(modelCode, remoteTaskId) { if (!remoteTaskId) return; const maxRounds = 45; for (let round = 1; round <= maxRounds; round++) { await new Promise((resolve) => setTimeout(resolve, 2000)); try { const data = await apiRequest('runtime.php?action=task_status', 'POST', { model_id: modelCode, task_id: remoteTaskId, max_attempts: 1, interval_ms: 0, }); const images = Array.isArray(data.images) ? data.images : []; const status = String(data.status || '').toLowerCase(); if (images.length > 0) { renderResults(images); setStatus(el.generateStatus, `生成完成，返�?${images.length} 张图片。`); await loadTasks(); return; } if (status === 'failed') { setStatus(el.generateStatus, '任务执行失败，请查看历史记录详情�?, false); await loadTasks(); return; } setStatus(el.generateStatus, `任务处理中，正在查询结果�?{round}/${maxRounds}�?..`); } catch (err) { if (round % 3 === 0) { setStatus(el.generateStatus, `任务处理中，查询中断�?{err.message || '未知错误'}`, false); } } } setStatus(el.generateStatus, '任务仍在处理中，请稍后点“刷新历史”�?); await loadTasks(); } async function generate() { const model = selectedModel(); if (!model) { setStatus(el.generateStatus, '请先选择模型�?, false); return; } const maxImages = modelMaxImages(model); const prompt = el.promptInput.value.trim(); if (!prompt) { setStatus(el.generateStatus, '请输入提示词�?, false); return; } const requestedCount = Math.max(1, Math.min(20, Number(el.countInput.value) || 1)); if (requestedCount > maxImages) { setStatus(el.generateStatus, `当前模型最多生�?${maxImages} 张，请调整数量。`, false); return; } if (state.images.length > maxImages) { setStatus(el.generateStatus, `当前模型最多使�?${maxImages} 张参考图，请减少后再试。`, false); return; } const params = { prompt, n: requestedCount, }; if (el.aspectRatioSelect.value) { params.aspectRatio = el.aspectRatioSelect.value; } if (el.imageSizeSelect.value) { params.imageSize = el.imageSizeSelect.value; } if (state.images.length > 0) { params.imageUrls = state.images.map((item) => item.dataUrl); } try { el.generateBtn.disabled = true; setStatus(el.generateStatus, '正在生成，请稍�?..'); const data = await apiRequest('runtime.php?action=image_generate', 'POST', { model_id: model.code, params, }, true, 240000); const images = Array.isArray(data.images) ? data.images : []; renderResults(images); if (data.pending && data.remote_task_id && images.length === 0) { setStatus(el.generateStatus, '任务已提交，正在后台生成...'); pollPendingImageTask(model.code, data.remote_task_id); } else { setStatus(el.generateStatus, `生成完成，返�?${images.length} 张图片。`); } el.taskCost.textContent = `单价 ¥${Number(data.price_cny_per_image || 0).toFixed(4)} / 张，预估费用 ¥${Number(data.estimated_cost_cny || 0).toFixed(4)}`; await loadTasks(); } catch (err) { const message = String(err && err.message ? err.message : ''); if (message.includes('��ʱ')) { setStatus(el.generateStatus, '��ʱ��ύ��ˢ��ʷ��¼...', false); await loadTasks(); } else { setStatus(el.generateStatus, message || '��ʧ��', false); } } finally { el.generateBtn.disabled = false; } } async function loadTasks() { try { const data = await apiRequest('runtime.php?action=tasks', 'POST', { page: 1, per_page: 20 }); const items = Array.isArray(data.items) ? data.items : []; el.taskTableBody.innerHTML = ''; for (const item of items) { const row = document.createElement('tr'); row.innerHTML = ` <td>${item.id}</td> <td>${escapeHtml(item.model_name || item.model_code)}</td> <td>${escapeHtml(item.status)}</td> <td>${item.requested_count}/${item.actual_count}</td> <td>¥${Number(item.estimated_cost_cny || 0).toFixed(4)}</td> <td>${escapeHtml(item.created_at || '')}</td> `; el.taskTableBody.appendChild(row); } } catch (err) { console.error(err); } } async function bootstrapApp() { togglePanels(true); const data = await apiRequest('catalog.php?action=bootstrap'); state.models = (data.models || []).filter((item) => item.type === 'image'); renderModelOptions(); await loadTasks(); } function bindEvents() { el.loginBtn.addEventListener('click', login); el.logoutBtn.addEventListener('click', logout); el.modelSelect.addEventListener('change', updateModelUI); el.countInput.addEventListener('input', updateModelUI); el.fileInput.addEventListener('change', (event) => readFiles(event.target.files)); el.clearImagesBtn.addEventListener('click', clearImages); el.generateBtn.addEventListener('click', generate); el.refreshTasksBtn.addEventListener('click', loadTasks); ['dragenter', 'dragover'].forEach((eventName) => { el.dropzone.addEventListener(eventName, (event) => { event.preventDefault(); event.stopPropagation(); el.dropzone.classList.add('dragover'); }); }); ['dragleave', 'drop'].forEach((eventName) => { el.dropzone.addEventListener(eventName, (event) => { event.preventDefault(); event.stopPropagation(); el.dropzone.classList.remove('dragover'); }); }); el.dropzone.addEventListener('drop', (event) => { readFiles(event.dataTransfer.files); }); } (async function init() { bindEvents(); const loggedIn = await checkLogin(); togglePanels(loggedIn); if (loggedIn) { await bootstrapApp(); } })(); </script> </body> </html>