130 lines
8.2 KiB
HTML
130 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible"
|
|
content="IE=edge">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0">
|
|
<title>Stable Diffusion * Lightning Talk</title>
|
|
<link rel="stylesheet"
|
|
href="/public/main.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<article style="z-index: 10">
|
|
<h1 class="headline"
|
|
style="margin-bottom: 0;">Stable Diffusion</h1>
|
|
<h2 class="subhead">The next generation of Image Generation</h2>
|
|
<div class="article-meta">
|
|
<img src="/public/img/Daniel.png"
|
|
width="80"
|
|
height="80"
|
|
style="border: 3px outset gray; background-color: #c0c0c0; padding: 2px;">
|
|
<div>
|
|
<p class="byline"
|
|
style="padding-bottom: 0; margin-bottom: 0;">by Daniel Dumitrascu</p>
|
|
<p class="dateline"
|
|
style="padding-top: 0; margin-top: 0;">May 4th, 2023</p>
|
|
<p class="article-tags">
|
|
</div>
|
|
<div>
|
|
<span class="tag">AI</span>
|
|
<span class="tag">image generation</span>
|
|
<span class="tag">tech</span>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
<p>
|
|
Hey there! Thanks for hoppin' on the website, you're probably in my presentation over on zoom as well right now,
|
|
down below you will find a button to <b>generate images which you can then send over straight into the presentation live!</b>
|
|
</p>
|
|
|
|
<aside style="position: relative;">
|
|
|
|
<h3 style="margin: 0 auto;">Image Generator</h3>
|
|
<p>Describe the image you would like to create in the text area and hit "Generate" 😊</p>
|
|
<form id="image-generator"
|
|
style="display: flex; flex-flow: column;">
|
|
<div class="form-loader"></div>
|
|
<div style="display: flex; flex-flow: column; padding: 0; margin: 0; justify-content: center; align-items: center;">
|
|
<div id="image-generation-result">
|
|
<div id="tmp-img-placeholder"
|
|
style="display: flex; flex-flow: column; justify-content: center; align-items: center;">
|
|
<img src="/public/img/icons/broken.svg"
|
|
width="40"
|
|
alt=""
|
|
class="broken-image">
|
|
<span>no image found</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-flow: column; padding: 0; margin: 0; margin-top: .5rem">
|
|
<textarea name="image_description"
|
|
id="image_description"
|
|
rows="10"
|
|
class="t95"></textarea>
|
|
<div style="display: flex; flex-flow: row; align-items: center; justify-content: center; margin: .5rem 0">
|
|
<button class="btn-95"
|
|
style="width: calc(50% - .5rem); margin-right: .5rem"
|
|
id="random-prompt-button">Random Prompt</button>
|
|
<button class="btn-95"
|
|
style="width: calc(50% - .5rem); margin-left: .5rem">Generate Image</button>
|
|
</div>
|
|
<button class="btn-95"
|
|
id="submit-image-button"
|
|
disabled>Submit Image</button>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<figure>
|
|
<img src="/public/img/posters/1.jpeg"
|
|
alt="a smiling person in a pink hoodie, standing in front of a bright pink lighted arcade basketball game. " />
|
|
<figcaption>Samurai Ramen</figcaption>
|
|
</figure>
|
|
<p>First and foremost, what sets Stable Diffusion apart is its open-source nature. This means that anyone can access and modify the code to suit their specific needs. This makes it a great option for those who are interested in tinkering with code or developing their own algorithms.</p>
|
|
|
|
<h2>How it works</h2>
|
|
<p>Now, let's talk about how most image generation algorithms work. Essentially, these algorithms use deep neural networks to generate new images based on existing ones. These networks are trained on a large dataset of images and are able to learn the patterns and features that make up a specific type of image. Once trained, the network can generate new images by altering certain parameters or inputs.</p>
|
|
<p>In the case of Stable Diffusion, the software uses a type of algorithm called a diffusion model. This model works by iteratively adding noise to an initial image, gradually making it more and more "diffused" or blurry. This process is repeated multiple times, and the resulting images are then used to generate a new image.</p>
|
|
<p>But what really sets Stable Diffusion apart is its sampler. This feature allows users to "explore" the space of possible images by generating multiple images with slightly different parameters. This means that users can easily create a wide variety of images without having to manually adjust the parameters each time.</p>
|
|
|
|
<figure><img src="/public/img/posters/3.png" />
|
|
<figcaption>Superimposed woman on cat</figcaption>
|
|
</figure>
|
|
|
|
<h2>Prompts</h2>
|
|
<p>Finally, let's talk about prompts. In Stable Diffusion, prompts are used to provide the algorithm with specific guidance on what type of image to generate. These prompts can be anything from a written description of the desired image to a specific set of parameters. This means that users can easily generate images that match their specific needs or interests.</p>
|
|
<p>In conclusion, Stable Diffusion is a powerful image generation software that offers a wide range of features and capabilities. Its open-source nature makes it a great option for those who are interested in developing their own algorithms, and its diffusion model and sampler make it easy to generate a wide variety of images. So if you're looking for a versatile and customizable image generation software, be sure to check out Stable Diffusion!</p>
|
|
|
|
</article>
|
|
|
|
<!-- <div class="sun"></div> -->
|
|
<div class="overlay"></div>
|
|
<div class="overlay glitch"></div>
|
|
|
|
<img src="/public/img/vaporwave/1.png" class="vaporwave-image" style="left: calc(calc(50% - 240px) - 35rem); top: 240px;">
|
|
<img src="/public/img/vaporwave/2.png" class="vaporwave-image" style="right: calc(calc(50% - 240px) - 30rem); top: 1rem;">
|
|
<img src="/public/img/vaporwave/3.png" class="vaporwave-image" style="right: calc(calc(50% - 240px) - 25rem); top: 680px;">
|
|
<img src="/public/img/vaporwave/4.png" class="vaporwave-image" style="left: calc(calc(50% - 240px) - 35rem); top: calc(480px * 2);">
|
|
<img src="/public/img/vaporwave/5.png" class="vaporwave-image" style="right: calc(calc(50% - 240px) - 35rem); top: calc(480px * 3);">
|
|
<img src="/public/img/vaporwave/6.png" class="vaporwave-image" style="left: calc(calc(50% - 240px) - 45rem); top: calc(480px * 3.5);">
|
|
|
|
<img src="/public/img/vaporwave/7.png" class="vaporwave-image" style="right: calc(calc(50% - 240px) - 45rem); top: calc(480px * 4.25);">
|
|
<img src="/public/img/vaporwave/8.png" class="vaporwave-image" style="left: calc(calc(50% - 240px) - 45rem); top: calc(480px * 5.5);">
|
|
<img src="/public/img/vaporwave/9.png" class="vaporwave-image" style="right: calc(calc(50% - 240px) - 45rem); top: calc(480px * 5.4);">
|
|
|
|
<script src="/public/js/main.js"></script>
|
|
<script src="/public/js/vaporwave.js"></script>
|
|
</body>
|
|
|
|
|
|
</html> |