-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
434 lines (430 loc) · 20.3 KB
/
index.html
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!DOCTYPE html>
<html lang="en">
<head>
<title>F.A.Q</title>
<meta property="og:title" content="F.A.Q" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Inter;
font-size: 16px;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.15;
color: var(--dl-color-gray-black);
background-color: var(--dl-color-gray-white);
}
</style>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Calligraffitti:wght@400&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<!--This is the head section-->
<!-- <style> ... </style> -->
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div>
<link href="./home.css" rel="stylesheet" />
<div class="home-container">
<header data-role="Header" class="home-header">
<div class="home-container1">
<div class="home-container2">
<div class="home-icon-group">
<div data-type="BurgerMenu" class="home-burger-menu">
<svg viewBox="0 0 1024 1024" class="home-icon">
<path
d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
></path>
</svg>
</div>
</div>
</div>
<h1 class="home-text">How to use stable diffusion</h1>
</div>
<img
src="public/playground_assets/000891-200h.png"
class="home-image"
/>
<div data-type="MobileMenu" class="home-mobile-menu">
<nav class="home-nav">
<div class="home-container3">
<img
alt="image"
src="https://presentation-website-assets.teleporthq.io/logos/logo.png"
class="home-image1"
/>
<div data-type="CloseMobileMenu" class="home-close-mobile-menu">
<svg viewBox="0 0 1024 1024" class="home-icon02">
<path
d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
></path>
</svg>
</div>
</div>
<nav
class="navigation-links-nav navigation-links-root-class-name13"
>
<span class="navigation-links-text"><span>About</span></span>
<span class="navigation-links-text1">
<span>Features</span>
</span>
<span class="navigation-links-text2"><span>Pricing</span></span>
<span class="navigation-links-text3"><span>Team</span></span>
<span class="navigation-links-text4"><span>Blog</span></span>
</nav>
</nav>
<div>
<svg viewBox="0 0 950.8571428571428 1024" class="home-icon04">
<path
d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
></path></svg
><svg viewBox="0 0 877.7142857142857 1024" class="home-icon06">
<path
d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
></path></svg
><svg viewBox="0 0 602.2582857142856 1024" class="home-icon08">
<path
d="M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"
></path>
</svg>
</div>
</div>
</header>
<span class="home-text001">
<span>
You should download and install all dependeces. All info about it
you can find
</span>
<a
href="https://rentry.org/voldy"
target="_blank"
rel="noreferrer noopener"
class="home-link"
>
here
</a>
<span>. After you</span>
<br />
<span>
done i recommend you to test your skills as it is. It's pretty fun
to input some text and see how
</span>
<br />
<span>stable diffusion respond to it.</span>
<span>
As you can see we have several options in the top of screen:
</span>
<br />
<br />
<span>
</span>
<span class="home-text012">txt2img</span>
<span>will take our text and will turn it into image.</span>
<br />
<span>
</span>
<span class="home-text016"> img2img</span>
<span>
will take image and try to remake it with our text description.
</span>
<br />
<span>
</span>
<span class="home-text020">Extras</span>
<span>
is resize option only. But works very well. I use it a lot.
</span>
<br />
<br />
<span> </span>
<span class="home-text025">1) txt2img</span>
<span>
. First of all you should clearly understand what do you want to
see.
</span>
<br />
<span>For example i imagine a</span>
<span class="home-text029">girl</span>
<span>in the</span>
<span class="home-text031">autumn</span>
<span></span>
<span>forest</span>
<span>, holding</span>
<span class="home-text035">umbrella</span>
<span>. It's</span>
<span class="home-text037">rainy</span>
<span>and chilly. </span>
<span>
So its logical to input girl, autumn forest, holding umbrella,
rainy. But if you do so, the result
</span>
<span>
will be far away from what you see on the internet today.
</span>
<span>
The reason of it - style. In fact we don't want just "girl in the
forest". We want intricate, oil painted girl, sexy, with big
breast.
</span>
<span>
You literally should describe what do you want to see to get the
result you expect. The style, clothes, lighiting.
</span>
<span>
Every aspect of picture that you imagine. Big help is to use some of
artist style by using name,
</span>
<span>
like Michelangelo, instead of detail description. Because just one
name include
</span>
<span class="home-text045">a lot</span>
<span>of aspects.</span>
<span>
You can combine names to get result that you want. In this example i
added 3 artist and
</span>
<span>some words</span>
<span>to make description more precise: </span>
<br />
<br />
<span class="home-text052">Start with:</span>
<span>
Forest, rain, autumn, girl, femmine, big breast, long legs,
umbrella, oil painting, Edmund Leighton, John William
Waterhouse, Michelangelo
</span>
<br />
<br />
<span>
Now we got pretty good description, but what about finalisation? We
need to take step back and see a bigger picture. We want to see a
girl from distance
</span>
<br />
<span>
in full growth, from behind. It's rainy so we can add dark lighting.
We want it to be detailed and sharp.
</span>
<span class="home-text059">It's important</span>
<span>that neural network focus more on words that come</span>
<span class="home-text061">at the beginning</span>
<span>. The farther the </span>
<span>
words from begining - the lighter the effect. And we can group the
words by meaning
</span>
<span class="home-text064">using dots</span>
<span>
. Sometimes it's critical, sometimes not. Mess around and see by
yourself. And finaly we can make words
</span>
<span class="home-text066">stronger</span>
<span>
by adding brackets and weaker by adding square brackets. The more
brackets - the more unfluence word gets:
</span>
<br />
<br />
<span class="home-text070">Final:</span>
<span>
european girl, femmine. ((perfect face)), ((detailed eyes)).(artist
name), (artist name), artist name, ((artist name)). oil
painting.((big breast)), (wide hips), (perfect legs). graceful pose.
stockings, (victorian clothes). umbrella. forest, atmospheric,
rainy. full growth, (detailed), sharp.
</span>
<br />
<br />
<span>
tip: i don't include artist names, but i won't leave you with empty
hands. You can try your luck
</span>
<a
href="https://www.johndalton.me/living-masters-the-top-realist-painters-working-today/"
target="_blank"
rel="noreferrer noopener"
class="home-link1"
>
here
</a>
<span>and</span>
<a
href="https://www.google.com/search?q=modern+oil+realistic+painting+portraits&biw=2048&bih=1038&sxsrf=ALiCzsYG8pkH4-E1V_q-_qv3FWTVVtDDrg%3A1665519248235&ei=kM5FY7z-DcKgjgbWjbqIDw&ved=0ahUKEwi8hqHZ_tj6AhVCkMMKHdaGDvE4FBDh1QMIDg&uact=5&oq=modern+oil+realistic+painting+portraits&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEKIEMgUIABCiBDIFCAAQogQ6CggAEEcQ1gQQsAM6CAghEMMEEKABOgoIIRDDBBAKEKABSgQIQRgASgQIRhgAUKcKWKQeYM4faAFwAXgAgAF9iAHmB5IBAzYuNJgBAKABAcgBCMABAQ&sclient=gws-wiz"
target="_blank"
rel="noreferrer noopener"
class="home-link2"
>
here
</a>
<span>.</span>
<br />
<br />
<span>
Negative field is needed to prevent neural network from failures. We
don't want to see mutants with extra legs, arms, mutated, more than
two head and etc. Input here everything that you don't want to see.
</span>
<br />
<br />
<span class="home-text082">Negative:</span>
<span> </span>
<span>
(((extra arms))), (((extra legs))), ((mutated)), ((more than two
heads)), ((ugly)),
</span>
<span>
((mutilated)), gross proportions,(((mutation))), extra
fingers, ((extra limbs)), (malformed limbs), mutated hands,
((missing arms)), ((missing legs)),((badly drawn hands)), ((poorly
drawn face)), ((mutated eyes)), ((ugly eyes)),
(((deformed))), ((bad anatomy)), (((bad proportions))), cloned face,
(((duplicate))), ((morbid)), (((disfigured))), (((more than 2
nipples))), extra limbs, (fused fingers), (bad anatomy), mutated
hands, (too many fingers), (((long neck))), ((furniture with bad
proportions)), ((wrong proportions)), out of frame,
[[[adult]]], blurry
</span>
<br />
<br />
<span class="home-text088">Settings:</span>
<span> </span>
<br />
<span class="home-text091">Sampling steps</span>
<span>- i prefer</span>
<span class="home-text093">between 30 and 50</span>
<span>. The larger the numbers - the longer the wait.</span>
<br />
<span class="home-text096">Sampling method</span>
<span>: i use</span>
<span class="home-text098">DIMM</span>
<span>, but sometimes play around with</span>
<span class="home-text100">Eulers</span>
<span>.</span>
<br />
<span class="home-text103">Witdth/height</span>
<span>- the larger the numbers - the longer the wait.</span>
<span class="home-text105">512*704</span>
<span>is pretty good for start.</span>
<br />
<span class="home-text108">Restore faces</span>
<span>- be cure</span>
<span class="home-text110">to check</span>
<span>this box.</span>
<br />
<span class="home-text113">Batch count</span>
<span>- how much batches do you want. For tests i recommend</span>
<span class="home-text115">to use 1</span>
<span>
. It let you to see results pretty fast in browser(but also you can
see it in output directory). As soon as your text do what you want
it to do you can
</span>
<span class="home-text117">go all in to value 16</span>
<span>.</span>
<br />
<span class="home-text120">Batch size</span>
<span>. If your graphic card has</span>
<span class="home-text122">less than 6GB</span>
<span>, use lower values (1 or 2).</span>
<span class="home-text124">For everyone else</span>
<span>i recommend</span>
<span class="home-text126">start with 3</span>
<span>and go higher (if there is no errors)</span>
<br />
<span class="home-text129">CFG scale</span>
<span>. As i get it's a finalization value. Sharpness and contrast together.</span>
<span class="home-text131">Between 7 and 12</span>
<span>it gets me what i want. But you</span>
<span class="home-text133">free to play around</span>
<span>to find the best for yourself.</span>
<br />
<br />
<span> </span>
<span class="home-text138">2) </span>
<span class="home-text139">img2img</span>
<span class="home-text140">-</span>
<span class="home-text141">
the same rules, as in previous. It tries to make img based on your
sourse image. Works pretty bad with faces. For now can't find a way
to save even facial features. It makes new faces every time. But it
saves part of clothes, pose. Pretty fun to mess with.
</span>
<br />
<br />
<span> </span>
<span class="home-text145">3) Extras</span>
<span>. Obviously i use it to</span>
<span class="home-text147">uspcale</span>
<span>images.</span>
<span class="home-text149">Settings:</span>
<span>4 times upscale, upsclaer</span>
<span class="home-text151">one is Lancoz</span>
<span>, upscaler</span>
<span class="home-text153">two is ESRGAN 4x</span>
<span>
. In a bunch it gives pretty detailed, sharp image. But not too
oversharp, like double ESRGAN.
</span>
<br />
<br />
<span class="home-text157">Congrats</span>
<span>
! Now you're ready to create some AI art. Do not forget to share
your work with others! It's important!
</span>
<br />
<span>Please,</span>
<span class="home-text161">mark me</span>
<span>to let me see what you came up with!</span>
<br />
<br />
<span class="home-text165">Make me proud of you, and good luck!</span>
<br />
<br />
<span>With best wishes </span>
<br class="home-text169" />
<span class="home-text170">
JustAiGuy
</span>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</span>
<h1 class="home-text181">Place to start</h1>
</div>
</div>
<script
data-section-id="header"
src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
></script>
</body>
</html>