Hugging Face's logo

Spaces:
waveshaker
/
universal-lora-studio-test
Running on Zero

App Files Community
universal-lora-studio-test / frontend_cache /index.html
waveshaker's picture
waveshaker
Update frontend_cache/index.html
9397ce4 verified
Raw History Blame Contribute Delete
9.46 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal T2I - Studio API Test</title>
<link rel="stylesheet" href="style.css">
<script>
(function() {
const mask = document.createElement('div');
mask.id = 'global-loading-mask';
// 直接锁死所有样式，确保两次刷新长得一模一样
mask.style.cssText = `
position: fixed !important;
inset: 0 !important;
background-color: #121212 !important;
z-index: 2147483647 !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
mask.innerHTML = `
<div style="width: 40px; height: 40px; border: 3px solid #333; border-top-color: #FF7F50; border-radius: 50%; animation: spin 1s linear infinite;"></div>
<div style="color: #888; margin-top: 16px; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;">Waking up Studio...</div>
<style>@keyframes spin { 100% { transform: rotate(360deg); } }</style>
`;
// 立即插入
document.documentElement.appendChild(mask);
})();
</script>
</head>
<body>
<div class="layout">
<!-- 🟢 1. 左侧：参数控制区 -->
<div class="panel left-panel">
<div class="header-row">
<h2>SSSampler</h2>
<div class="header-status-text" id="backend-status-wrapper" title="Checking backend status...">
<span>Backend:</span>
<div id="backend-status-dot" class="status-dot loading"></div>
</div>
</div>
<div class="form-group">
<label>Base Model</label>
<select id="unet-select">
<option value="">⏳ Loading models...</option>
</select>
</div>
<div class="form-group">
<label>Prompt</label>
<textarea id="prompt" rows="4">20 years old woman, 1girl, RAW photo, PORTRAIT, (photorealistic:1.37, realistic), (straight from front:1.2), looking at viewer, ((wearing a simple white t-shirt:1.4)), (casual clothing:1.2), soft lighting, high quality, film grain, Fujifilm XT3, ((dynamic pose:1.2)), ((upper body:1.6)), (professional lighting:1.6), (blurred cafe or minimalist room background:1.2), clean environment, centered composition, dead center, medium shot, ample negative space around.</textarea>
</div>
<!-- 🌟 新增：1MP 比例快捷按钮 -->
<div class="form-group">
<label>Aspect Ratio • 1MP</label>
<div class="aspect-ratio-row">
<button type="button" class="ratio-btn active" data-ratio="1:1">1:1</button>
<button type="button" class="ratio-btn" data-ratio="3:4">3:4</button>
<button type="button" class="ratio-btn" data-ratio="9:16">9:16</button>
<button type="button" class="ratio-btn" data-ratio="4:3">4:3</button>
<button type="button" class="ratio-btn" data-ratio="16:9">16:9</button>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Width</label>
<div class="slider-group">
<input type="range" id="width-slider" min="16" max="1728" step="16" value="1024">
<input type="number" id="width-input" min="16" max="1728" value="1024">
</div>
</div>
<div class="form-group">
<label>Height</label>
<div class="slider-group">
<input type="range" id="height-slider" min="16" max="1728" step="16" value="1024">
<input type="number" id="height-input" min="16" max="1728" value="1024">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Steps</label>
<div class="slider-group">
<input type="range" id="steps-slider" min="4" max="50" step="1" value="8">
<input type="number" id="steps-input" min="4" max="50" value="8">
</div>
</div>
<div class="form-group">
<label>CFG</label>
<div class="slider-group">
<input type="range" id="cfg-slider" min="1" max="10" step="0.1" value="1.0">
<input type="number" id="cfg-input" min="1" max="10" step="0.1" value="1.0">
</div>
</div>
</div>
<div class="form-row" style="grid-template-columns: 1fr 1fr 1fr;">
<div class="form-group" style="margin-bottom: 0;">
<label>Sampler</label>
<select id="sampler"></select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label>Scheduler</label>
<select id="scheduler"></select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label>Seed</label>
<div class="seed-group">
<input type="number" id="seed" value="-1">
<button type="button" id="random-seed-btn" title="Randomize Seed">🎲</button>
</div>
</div>
</div>
<div class="form-group">
<label>Base / Turbo LoRAs</label>
<div id="base-lora-container"></div>
</div>
<button id="generate-btn">Generate</button>
</div>
<!-- 🟡 2. 中间：图库 -->
<div class="panel middle-panel">
<div class="header-row">
<div class="header-title-group">
<h2>Character LoRA</h2>
<span class="divider">|</span>
<a href="https://huggingface.co/spaces/waveshaker/loras_gallery" target="_blank" class="gallery-link">🖼️ Gallery ↗</a>
</div>
<div class="header-status-text" id="lora-count">0 Models</div>
</div>
<!-- 🌟 幽灵占位大图区 -->
<div class="preview-wrapper">
<div id="preview-placeholder" class="preview-placeholder">
<span>No LoRA Selected</span>
</div>
<img id="selected-lora-big-img" class="selected-big-img" src="">
</div>
<div class="selected-hud-bar">
<div class="hud-left">
<input type="checkbox" id="char-enable" class="hud-checkbox" checked>
<span class="hud-label">Selected:</span>
<span id="selected-lora-name" class="hud-name" style="color: var(--text-muted);">None</span>
</div>
<div class="hud-strength-group">
<span class="hud-label">Strength</span>
<input type="number" id="char-strength" value="1.0" step="0.05">
</div>
</div>
<div class="gallery-scroll-container" id="gallery-container">
<div class="gallery-grid" id="gallery-grid">
<div style="color: var(--text-muted); font-size: 13px; grid-column: span 3;">⏳ Loading gallery...</div>
</div>
</div>
</div>
<!-- 🔵 3. 右侧：Output & Logs -->
<div class="panel right-panel">
<div class="header-row">
<h2>Output</h2>
</div>
<!-- 🌟 顶部：400x400 预览方框 -->
<div class="image-preview-box">
<div id="placeholder-text" class="placeholder-text">Image area</div>
<img id="result-image" src="" alt="Generated Image">
</div>
<!-- 🌟 底部：专属日志面板 -->
<div class="log-panel" id="log-panel">
<div class="log-header" style="display: flex; justify-content: space-between; align-items: center;">
<span>Status Logs</span>
<label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: normal; font-size: 12px; color: var(--text-muted); margin: 0;">
<input type="checkbox" id="auto-scroll-toggle" checked style="width: 14px !important; height: 14px !important;">
<span id="auto-scroll-text">Auto-scroll</span>
</label>
</div>
<div class="log-content" id="log-content">
<div class="log-line">Ready.</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>