Blame for frontend_cache/index.html

<!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">
    <style>
        html, body {
            background-color: #121212 !important;
        }
    </style>
    <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>Sampler</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">
                <div style="display: flex; align-items: baseline; gap: 8px;">
                    <h2>Output</h2>
                    <span style="font-size: calc(13px * var(--base-scale));font-weight: 600;color: var(--text-muted); display: flex;align-items: center;gap: 8px;">(webp with meta)</span>
                </div>
            </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>