Hugging Face's logo

Spaces:
MisterProton
/
Playground
Running

App Files Community
xyplon commited on
Commit
5f3ca6c
•
1 Parent(s): b1600bf

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +277 -0
index.html ADDED
@@ -0,0 +1,277 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Stable Diffusion Models Demo</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
8
+
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
10
+ <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet" <meta
11
+ charset="UTF-8">
12
+ <style>
13
+ body {
14
+ background-color: #030303;
15
+ color: #ffffff;
16
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
+ width: 100%;
18
+ overflow-x: hidden;
19
+ }
20
+ html,body{
21
+ overflow-x: hidden;
22
+ }
23
+ .form-control,
24
+ .form-select {
25
+ background-color: #1a1a1a;
26
+ color: #ffffff;
27
+ border: none;
28
+ border-radius: 0;
29
+ }
30
+ .form-control::placeholder {
31
+ color: #d8d8d8;
32
+ }
33
+ .form-control:focus,
34
+ .form-select:focus {
35
+ outline: none;
36
+ border-color: transparent;
37
+ }
38
+ .btn-primary {
39
+ background: linear-gradient(155deg, rgb(0, 149, 249), #9D00FF, rgb(255, 0, 43));
40
+ border: none;
41
+ }
42
+ .btn-primary:hover {
43
+ background: linear-gradient(145deg, #00ffab, rgb(255, 0, 43));
44
+ }
45
+ .btn-primary:focus {
46
+ box-shadow: none;
47
+ }
48
+ #prompt{
49
+ background-color: #030303;
50
+ outline: 4px solid #030303;
51
+ }
52
+ #negative-prompt{
53
+ background-color: #1b1b1b;
54
+ border: 1px solid #141414;
55
+ border-radius: 10px;
56
+ outline: 3px solid #141414;
57
+ }
58
+ #modelLabel{
59
+ background: linear-gradient(155deg, rgb(0, 249, 228), #d400ff, rgb(255, 0, 212));
60
+ }
61
+ #ratioLabel{
62
+ background: linear-gradient(155deg, rgb(0, 199, 249), #9D00FF, rgb(255, 0, 119));
63
+ }
64
+ #styleLabel{
65
+ background: linear-gradient(155deg, rgb(0, 249, 249), #a200ff, rgb(255, 0, 191));
66
+ }
67
+ .form-range::-webkit-slider-runnable-track {
68
+ background-color: #1d1d1d;
69
+ }
70
+ .form-range::-moz-range-track {
71
+ background-color: #1d1d1d;
72
+ }
73
+ .form-range::-ms-track {
74
+ background-color: #1d1d1d;
75
+ }
76
+ .form-range::-webkit-slider-thumb {
77
+ background: linear-gradient(155deg, rgb(0, 249, 228), #d400ff, rgb(255, 0, 34));;
78
+ }
79
+ .form-range::-moz-range-thumb {
80
+ background: gray;
81
+ }
82
+ .form-range::-ms-thumb {
83
+ background: gray;
84
+ }
85
+ .input-group-div1{
86
+ background-color: #030303;
87
+ padding: 5px;
88
+ background: linear-gradient(rgb(0, 0, 0), black) padding-box,
89
+ linear-gradient(to left, rgb(255, 1, 98), rgb(175, 2, 255)) border-box;
90
+ border: 1.5px solid transparent;
91
+ border-radius: 7px;
92
+ }
93
+ .input-group-div{
94
+ padding: 5px;
95
+ background: #131313;
96
+ border-radius: 10px;
97
+ }
98
+ .input-group-div1:hover{
99
+ background: linear-gradient(rgb(0, 0, 0), black) padding-box,
100
+ linear-gradient(to left, rgb(204, 1, 255), rgb(255, 2, 44)) border-box;
101
+
102
+
103
+ }
104
+ @keyframes colorChange {
105
+ 0% {
106
+ color: rgb(7, 205, 240) ;
107
+ }
108
+ 25% {
109
+ color: rgb(214, 12, 130);
110
+ }
111
+ 50% {
112
+ color: #09cfe9;
113
+ }
114
+ 75% {
115
+ color: #e2335f;
116
+ }
117
+ 100% {
118
+ color: rgb(240, 4, 102);
119
+ }
120
+ }
121
+ .col-12 p{
122
+ animation: colorChange 10s infinite;
123
+ font-family: 'Barlow Condensed';
124
+ font-size: 25px;
125
+ font-weight: bold;
126
+ }
127
+ #imshow {
128
+ display: flex;
129
+ flex-wrap: wrap;
130
+ gap: 10px;
131
+ justify-content: center;
132
+ align-items: center;
133
+ }
134
+ #loader{
135
+ margin: auto;
136
+ width: fit-content;
137
+ text-align: center;
138
+
139
+ }
140
+ #cont4{
141
+ max-width: 95vw;
142
+ }
143
+ #imshow img{
144
+ max-width: 280px;
145
+ margin: 0;
146
+ padding: 0;
147
+ }
148
+ #lds{
149
+ max-width: 350px;
150
+ }
151
+ @media screen and (max-width: 600px) {
152
+ #imshow{
153
+ justify-content: center;
154
+ align-items: center;
155
+ }
156
+ #imshow img{
157
+ max-width: 320px;
158
+ }
159
+ }
160
+ #stats{
161
+ color: red;
162
+
163
+ }
164
+ </style>
165
+ </head>
166
+ <body>
167
+ <div class="container mt-4">
168
+
169
+ <div class="row mt-4">
170
+ <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
171
+ <div class="input-group-div1">
172
+ <input type="text" class="form-control" id="prompt" placeholder="Prompt" autocomplete="off">
173
+ </div>
174
+ </div>
175
+ <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
176
+ <div class="input-group-div">
177
+ <input type="text" class="form-control" id="negative-prompt" placeholder="Negative Prompt" autocomplete="off" >
178
+ </div>
179
+ </div>
180
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
181
+ <div class="input-group">
182
+ <label class="input-group-text me-3" for="model" id="modelLabel" style="background-color: #1d1d1d;color: white;border: none;">Model</label>
183
+ <select class="form-select" id="model" aria-label="Model Select">
184
+ <option value="RealVisXL4" >real vision xl 4</option>
185
+ <option value="Kivotos" >Kivotos xl 2.0 (Anime)</option>
186
+ <option value="OpenDalle" >Open Dalle</option>
187
+ <option value="Mobius">Mobius</option>
188
+
189
+ <option value="SD3">Stable Diffusion 3</option>
190
+
191
+ </select>
192
+ </div>
193
+ </div>
194
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
195
+ <div class="input-group">
196
+
197
+ <label class="input-group-text me-3" id="ratioLabel" for="ratio" style="background-color: #1d1d1d;color: white;border: none;margin: 0;">Image Ratio</label>
198
+
199
+
200
+ <select class="form-select" id="ratio" aria-label="Ratio Select">
201
+ <option selected value="1:1">1:1 (Square)</option>
202
+ <option value="16:9">16:9 (Landscape)</option>
203
+ <option value="9:16">9:16 (Portrait)</option>
204
+ <option value="1:2">1:2</option>
205
+ <option value="4:3">4:3</option>
206
+ </select>
207
+ </div>
208
+ </div>
209
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
210
+ <div class="input-group">
211
+ <label class="input-group-text me-3" for="style" style="background-color: #1d1d1d;color: white;border: none;" id="styleLabel">Style:</label>
212
+ <select class="form-select" id="style" aria-label="Style Select">
213
+ <option value="Cinematic" name="style">Cinematic</option>
214
+ <option value="Photography" name="style">Photography</option>
215
+ <option value="Anime" name="style">Anime</option>
216
+ <option value="Film" name="style">Film</option>
217
+ <option value="Creative" name="style">Creative</option>
218
+ <option value="Digital" name="style">Digital Art</option>
219
+ <option value="3d" name="style">3D Model</option>
220
+ <option value="No" name="style">No Style</option>
221
+ </select>
222
+ </div>
223
+ </div>
224
+ <div id="ranges" style="display: flex; gap: 15px; flex-wrap: wrap;">
225
+ <div class="stepsRange" style="display: flex;gap: 10px;">
226
+ <label for="stepsRange" class="form-label" style="background-color: #1d1d1d;color: white;border: none; padding-left: 10px; padding-right: 10px; padding-top: 6px; padding-bottom: 6px;">Steps: <p style="display: inline;" id="stepValue">30</p></label>
227
+ <input type="range" class="form-range" id="stepsRange" style="width: 200px;padding-top: 12px;" min="4" max="100" value="30">
228
+ </div>
229
+
230
+ <div class="guidenceRange" style="display: flex;gap: 10px;">
231
+ <label for="stepsRange" class="form-label" style="background-color: #1d1d1d;color: white;border: none; padding-left: 10px; padding-right: 10px; padding-top: 6px; padding-bottom: 6px;">Guidence Scale: <p style="display: inline;" id="guidenceValue">3</p></label>
232
+ <input type="range" class="form-range" id="guidenceRange" style="width: 200px; padding-top: 12px; " min="2" max="20" value="3" step="0.1">
233
+ </div>
234
+ </div>
235
+
236
+
237
+ <div class="col-12 text-center mt-4">
238
+ <button type="button" class="btn btn-primary" id="btn">Generate Image ( Ctr + Enter) </button>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="container mt-4" id="cont4">
243
+ <div id="imshow" >
244
+
245
+
246
+ </div>
247
+ </div>
248
+
249
+
250
+ </div>
251
+
252
+
253
+ </div>
254
+
255
+
256
+ <script>
257
+
258
+
259
+ document.getElementById('prompt').addEventListener('mouseover', () => {
260
+ document.getElementById('prompt').placeholder = 'Enter Your Prompt';
261
+ });
262
+ document.getElementById('prompt').addEventListener('mouseout', () => {
263
+ document.getElementById('prompt').placeholder = 'Prompt';
264
+ });
265
+ document.getElementById('prompt').addEventListener('input', function() {
266
+ this.style.color = 'white';
267
+ });
268
+ document.getElementById('negative-prompt').addEventListener('input', function() {
269
+ this.style.color = 'skyblue';
270
+ });
271
+ </script>
272
+
273
+
274
+ <script src="models.js"></script>
275
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
276
+ </body>
277
+ </html>