-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (134 loc) · 8.66 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
<!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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>DALL·E-3 Image Generator using OpenAI API</title>
</head>
<body>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="errorToast" class="toast fade hide align-items-center border-0" role="alert" aria-live="assertive"
aria-atomic="true" data-bs-delay="10000">
<div class="toast-header text-bg-danger">
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div id="errorText" class="toast-body">An error has occurred.</div>
</div>
</div>
<div class="container mt-5" style="width: 50%;">
<div class="text-center mb-4">
<h1 class="mb-1">DALL·E-3 Image Generator</h1>
<h6 class="mb-3">By EnemyCube</h6>
<p>
This is a simple DALL·E-3 image generator utilizing the
<a href="https://openai.com/api/" class="font-weight-bold">OpenAI API.</a>
Images are generated by inputting descriptions and keywords into the prompt field below. Images are only
stored on OpenAI servers for 1 hour before expiring.
</p>
</div>
<div class="card mb-4">
<div class="card-body">
<div class="form-group">
<div class="input-group mb-3">
<span class="input-group-text">🗝️</span>
<div id="apiKeyForm" class="form-floating">
<input type="password" class="form-control" id="apiKey">
<label for="apiKey">OpenAI API Key</label>
</div>
<div class="invalid-feedback">
Please enter your OpenAI API key.
</div>
</div>
<div id="promptForm" class="form-floating mb-3">
<textarea class="form-control" placeholder="Enter a prompt" id="prompt"
style="height: 100px"></textarea>
<label for="prompt">Enter a prompt</label>
</div>
<div class="invalid-feedback">
Please enter a prompt or keyword.
</div>
<div class="d-flex gap-2 mb-3">
<div class="form-floating">
<select id="sizeSelect" class="form-select" aria-label="Image size">
<option value="1024x1024" selected>1024x1024</option>
<option value="1792x1024">1792x1024</option>
<option value="1024x1792">1024x1792</option>
</select>
<label for="sizeSelect">Size</label>
</div>
<div class="form-floating">
<select id="styleSelect" class="form-select" aria-label="Image style">
<option value="vivid" selected>Vivid</option>
<option value="natural">Natural</option>
</select>
<label for="styleSelect">Style</label>
</div>
<div class="form-floating">
<select id="qualitySelect" class="form-select" aria-label="Image quality">
<option value="standard" selected>Standard</option>
<option value="hd">HD</option>
</select>
<label for="qualitySelect">Quality</label>
</div>
<div class="form-floating">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-question-circle-fill" viewBox="0 0 16 16" data-bs-toggle="collapse"
data-bs-target="#collapseFAQ" aria-expanded="false" aria-controls="collapseFAQ">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
</svg>
</div>
</div>
<div class="collapse mt-3" id="collapseFAQ">
<div class="card card-body">
<p>
<h6>Size:</h6> DALL·E-3 accepts three different image sizes: 1024px by 1024px, 1792px by
1024px, and 1024px by 1792px. Beyond giving more flexibility in terms of aspect ratio, these
sizes can have significant effects on the style and context of your generated image. For
example, vertical images might work better when you're looking for an image that looks like
it was taken by a cellphone camera, or horizontal images may work better for landscape
paintings or digital designs.</p>
<p>
<h6>Style:</h6> DALL·E-3 introduces two new styles: natural and vivid. The natural style is
more similar to the DALL·E-2 style in its 'blander' realism, while the vivid style is a new
style that leans towards generating hyper-real and cinematic images. For reference, all
DALL·E generations in ChatGPT are generated in the 'vivid' style.</p>
<p>The natural style is specifically useful in cases where DALL·E-3 over-exaggerates or
confuses a subject
that's supposed to be more simple, subdued, or realistic. I've often used it for logo
generation, stock photos, or other cases where I'm trying to match a real-world object.
</p>
<p>
<h6>Quality:</h6> DALL·E-3 introduces a new 'quality' parameter that allows you to adjust
the level of detail and organization in all of your generations. The 'standard' quality
generations are the DALL·E-3 you're familiar with, with 'hd' generations bringing a new
level of attention to detail and adherence to your prompt. Keep in mind that setting your
generation quality to 'hd' does increase the cost per image, as well as often increasing the
time it takes to generate by ~10 seconds or so.
</p>
<p>
More information, along with examples, can be found <a
href="https://cookbook.openai.com/articles/what_is_new_with_dalle_3">here</a>.
</p>
</div>
</div>
</div>
<button id="btn" class="btn btn-success mt-3" type="button">Generate</button>
</div>
<div class="row row-cols-1 g-4">
<div id="imageList" class="col placeholder-glow">
</div>
</div>
</div>
</body>
</html>