Hugging Face's logo

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

App Files Community
universal-lora-studio-test
File size: 9,457 Bytes
d27bf39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9397ce4
d27bf39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!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>