Hugging Face's logo

Spaces:
MisterProton
/
Playground
Running

App Files Community
MisterProton commited on
Commit
bd33d00
•
1 Parent(s): 15d1d27

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +21 -325
index.html CHANGED
@@ -1,331 +1,27 @@
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
- #vw{
165
- font-size: 22px;
166
- }
167
- </style>
168
  </head>
169
  <body>
170
- <dialog id="websiteDialog">
171
- <h3>Visit Our Website</h3>
172
- <p>You can visit website for other tools and models</p>
173
- <a href="https://xyplon.web.app" target="_blank">Visit xyplon.web.app</a>
174
- <br><br>
175
- <button id="closeDialog">Close</button>
176
- </dialog>
177
- <style>
178
- #websiteDialog {
179
- padding: 20px;
180
- border-radius: 5px;
181
- border: 1px solid #ccc;
182
- }
183
-
184
- #websiteDialog::backdrop {
185
- background-color: rgba(0, 0, 0, 0.5);
186
- }
187
-
188
- #closeDialog {
189
- margin-top: 10px;
190
- padding: 5px 10px;
191
- background-color: #f0f0f0;
192
- border: 1px solid #ccc;
193
- border-radius: 3px;
194
- cursor: pointer;
195
- }
196
-
197
- #closeDialog:hover {
198
- background-color: #e0e0e0;
199
- }
200
- </style>
201
- <script>
202
- const dialog = document.getElementById('websiteDialog');
203
- const closeButton = document.getElementById('closeDialog');
204
-
205
- setTimeout(() => {
206
- dialog.showModal();
207
- }, 40000);
208
-
209
- closeButton.addEventListener('click', () => {
210
- dialog.close();
211
- });
212
- </script>
213
-
214
- <a href="https://discord.gg/tRC7hNXfPH" target="_blank">Join Discord </a><a href="https://buymeacoffee.com/Xyplon" target="_blank"> Buy me a coffee </a>
215
- <br>
216
- <a href="https://xyplon.web.app" target="_blank" id="vw" > VISIT WEBSITE </a>
217
-
218
-
219
-
220
- <div class="container mt-4">
221
-
222
- <div class="row mt-4">
223
- <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
224
- <div class="input-group-div1">
225
- <input type="text" class="form-control" id="prompt" placeholder="Prompt" autocomplete="off">
226
- </div>
227
- </div>
228
- <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
229
- <div class="input-group-div">
230
- <input type="text" class="form-control" id="negative-prompt" placeholder="Negative Prompt" autocomplete="off" >
231
- </div>
232
- </div>
233
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
234
- <div class="input-group">
235
- <label class="input-group-text me-3" for="model" id="modelLabel" style="background-color: #1d1d1d;color: white;border: none;">Model</label>
236
- <select class="form-select" id="model" aria-label="Model Select">
237
- <option value="RealVisXL4" >real vision xl 4</option>
238
- <option value="SD3">Stable Diffusion 3</option>
239
-
240
- <option value="Kivotos" >Kivotos xl 2.0 (Anime)</option>
241
- <option value="OpenDalle" >Open Dalle</option>
242
- <option value="Mobius">Mobius</option>
243
-
244
-
245
- </select>
246
- </div>
247
- </div>
248
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
249
- <div class="input-group">
250
-
251
- <label class="input-group-text me-3" id="ratioLabel" for="ratio" style="background-color: #1d1d1d;color: white;border: none;margin: 0;">Image Ratio</label>
252
-
253
-
254
- <select class="form-select" id="ratio" aria-label="Ratio Select">
255
- <option selected value="1:1">1:1 (Square)</option>
256
- <option value="16:9">16:9 (Landscape)</option>
257
- <option value="9:16">9:16 (Portrait)</option>
258
- <option value="1:2">1:2</option>
259
- <option value="4:3">4:3</option>
260
- </select>
261
- </div>
262
- </div>
263
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
264
- <div class="input-group">
265
- <label class="input-group-text me-3" for="style" style="background-color: #1d1d1d;color: white;border: none;" id="styleLabel">Style:</label>
266
- <select class="form-select" id="style" aria-label="Style Select">
267
- <option value="Cinematic" name="style">Cinematic</option>
268
- <option value="Photography" name="style">Photography</option>
269
- <option value="Anime" name="style">Anime</option>
270
- <option value="Film" name="style">Film</option>
271
- <option value="Creative" name="style">Creative</option>
272
- <option value="Digital" name="style">Digital Art</option>
273
- <option value="3d" name="style">3D Model</option>
274
- <option value="No" name="style">No Style</option>
275
- </select>
276
- </div>
277
- </div>
278
- <div id="ranges" style="display: flex; gap: 15px; flex-wrap: wrap;">
279
- <div class="stepsRange" style="display: flex;gap: 10px;">
280
- <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>
281
- <input type="range" class="form-range" id="stepsRange" style="width: 200px;padding-top: 12px;" min="4" max="100" value="30">
282
- </div>
283
-
284
- <div class="guidenceRange" style="display: flex;gap: 10px;">
285
- <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>
286
- <input type="range" class="form-range" id="guidenceRange" style="width: 200px; padding-top: 12px; " min="2" max="20" value="3" step="0.1">
287
- </div>
288
- </div>
289
-
290
-
291
- <div class="col-12 text-center mt-4">
292
- <button type="button" class="btn btn-primary" id="btn">Generate Image ( Ctr + Enter) </button>
293
- </div>
294
- </div>
295
-
296
- <div class="container mt-4" id="cont4">
297
- <div id="imshow" >
298
-
299
-
300
- </div>
301
- </div>
302
-
303
-
304
- </div>
305
-
306
-
307
- </div>
308
-
309
-
310
- <script>
311
-
312
-
313
- document.getElementById('prompt').addEventListener('mouseover', () => {
314
- document.getElementById('prompt').placeholder = 'Enter Your Prompt';
315
- });
316
- document.getElementById('prompt').addEventListener('mouseout', () => {
317
- document.getElementById('prompt').placeholder = 'Prompt';
318
- });
319
- document.getElementById('prompt').addEventListener('input', function() {
320
- this.style.color = 'white';
321
- });
322
- document.getElementById('negative-prompt').addEventListener('input', function() {
323
- this.style.color = 'skyblue';
324
- });
325
- </script>
326
-
327
-
328
- <script src="models.js"></script>
329
- <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>
330
  </body>
331
- </html>
 
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>text to image models playground</title>
7
+ <style>
8
+ body, html {
9
+ margin: 0;
10
+ padding: 0;
11
+ height: 100%;
12
+ overflow: hidden;
13
+ }
14
+ iframe {
15
+ position: absolute;
16
+ top: 0;
17
+ left: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ border: none;
21
+ }
22
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </head>
24
  <body>
25
+ <iframe src="https://xyplon.web.app/models"></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </body>
27
+ </html>