Ashrafb commited on
Commit
4ca9235
1 Parent(s): 424fcd4

Delete static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +0 -381
static/index.html DELETED
@@ -1,381 +0,0 @@
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>FastAPI App</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
9
- <style>
10
- html, body {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- overflow-x: hidden !important;
15
- }
16
- body {
17
- background-color: #000000;
18
- margin: 0;
19
- }
20
- #cont {
21
- background-color: #030303;
22
- padding: 0px;
23
- border-radius: 12px;
24
- box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
25
- display: flex;
26
- align-items: center;
27
- border: 2px solid rgb(247, 6, 187);
28
- }
29
- #prompt {
30
- flex-grow: 1;
31
- padding: 10px;
32
- margin: 10px;
33
- background: transparent;
34
- border: none;
35
- border-radius: 8px;
36
- box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
37
- color: #fff;
38
- outline: none;
39
- }
40
- #cont button {
41
- padding: 2.5vh 4.6vh;
42
- margin: 1vh;
43
- background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
44
- border: none;
45
- border-radius: 8px;
46
- color: #fff;
47
- cursor: pointer;
48
- }
49
- #cont button:hover {
50
- background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
51
- }
52
- .container {
53
- text-align: center;
54
- }
55
-
56
- h1 {
57
- margin-bottom: 20px;
58
- font-family: 'Barlow Condensed';
59
- color: pink;
60
- }
61
- #inputs {
62
- flex-grow: 1;
63
- padding: 10px;
64
- margin: 10px;
65
- background: transparent;
66
- border: none;
67
- border-radius: 8px;
68
- box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
69
- color: #fff;
70
- outline: none;
71
- }
72
-
73
-
74
- .image-container {
75
- display: flex;
76
- justify-content: center;
77
- align-items: center;
78
- flex-wrap: wrap;
79
- gap: 10px;
80
- }
81
-
82
- .image-box {
83
- width: 200px; /* Adjust the width as needed */
84
- height: 200px; /* Adjust the height as needed */
85
- border: 2px solid #ffffff; /* Set the border color to white */
86
- border-radius: 10px;
87
- overflow: hidden; /* Ensure the image does not overflow the box */
88
- position: relative; /* Positioning context for absolute positioning of image */
89
- }
90
-
91
- .spinner {
92
- border: 3px solid rgba(255, 255, 255, 0.3);
93
- border-radius: 50%;
94
- border-top: 3px solid #ffffff;
95
- width: 20px;
96
- height: 20px;
97
- animation: spin 2s linear infinite;
98
- position: absolute;
99
- top: 50%;
100
- left: 50%;
101
- transform: translate(-50%, -50%);
102
- }
103
-
104
- @keyframes spin {
105
- 0% { transform: rotate(0deg); }
106
- 100% { transform: rotate(360deg); }
107
- }
108
-
109
- .image-box img {
110
- position: absolute;
111
- top: 0;
112
- left: 0;
113
- width: 100%;
114
- height: 100%;
115
- object-fit: cover; /* Maintain aspect ratio and cover the entire box */
116
- }
117
-
118
-
119
-
120
- #noise_level {
121
- flex-grow: 1;
122
- padding: 10px;
123
- margin: 10px;
124
- background: transparent;
125
- border: none;
126
- border-radius: 8px;
127
- box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
128
- color: #fff;
129
- outline: none;
130
- }
131
- #image-box {
132
- border: 2px solid blue;
133
- width: 330px;
134
- height: 330px;
135
- display: flex;
136
- flex-direction: column;
137
- overflow-y: scroll;
138
- margin: auto;
139
- margin-top: 30px;
140
- padding-bottom: 7px;
141
- gap: 14px;
142
- background: linear-gradient(black, black) padding-box,
143
- linear-gradient(to right, red, blue) border-box;
144
- border-radius: 20px;
145
- border: 2.5px solid transparent;
146
- }
147
-
148
- #image-box p {
149
- width: 80%;
150
- font-size: 20px;
151
- color: white;
152
- }
153
- #showadv{
154
- padding: 10px 20px;
155
- margin: 10px;
156
- background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
157
- border: none;
158
- border-radius: 8px;
159
- cursor: pointer;
160
- color: #fff;
161
-
162
- }
163
- #advanced-options {
164
- flex-grow: 1;
165
- padding: 10px;
166
- margin: 10px;
167
- background: transparent;
168
- border: none;
169
- border-radius: 8px;
170
- box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
171
- color: #fff;
172
- outline: none;
173
- background-color: #030303;
174
- padding: 0px;
175
- border-radius: 12px;
176
- box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
177
- display: none;
178
- align-items: center;
179
- border: 2px solid rgb(247, 6, 187);
180
- }
181
- #advanced-options label, #advanced-options input {
182
- margin: 10px;
183
- color: #fff;
184
- }
185
- #advanced-options input[type="number"] {
186
- width: 50px;
187
- padding: 5px;
188
-
189
- }
190
- #advanced-options button {
191
- padding: 10px 20px;
192
- margin: 10px;
193
- background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
194
- border: none;
195
- border-radius: 8px;
196
- cursor: pointer;
197
- color: #fff;
198
-
199
- }
200
- #advanced-options button:hover {
201
- background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
202
- }
203
-
204
-
205
- </style>
206
- </head>
207
- <body>
208
- <div class="container">
209
- <h1>Aiconvert.online </h1>
210
-
211
- <div id="cont">
212
- <div>
213
- <label for="prompt">Enter text:</label>
214
- <input type="text" id="prompt" name="prompt">
215
- </div>
216
- <br>
217
- <div>
218
- <button onclick="generatePrompts()">Generate Prompts</button>
219
- <div id="promptSpinner" class="spinner" style="display: none;"></div>
220
- </div>
221
- </div>
222
- <br>
223
- <div id="cont">
224
- <div>
225
- <label for="inputs">Enter prompt:</label>
226
- <input type="text" id="inputs" name="inputs">
227
- </div>
228
- <br>
229
- <div>
230
- <button onclick="sendInputs()">generate image </button>
231
- <div id="sendSpinner" class="spinner" style="display: none;"></div>
232
- </div>
233
- </div>
234
- <br>
235
- <button id="showadv" onclick="toggleAdvancedOptions()">Advanced Options</button>
236
- <div id="advanced-options">
237
- <label for="is_negative">Negative prompt :</label>
238
- <input type="text" id="is_negative" name="is_negative" value="blurry, fuzziness">
239
- <br>
240
- <label for="steps">Steps:</label>
241
- <input type="range" id="steps" name="steps" min="30" max="100" value="50">
242
- <span id="steps-value">50</span>
243
- <br>
244
- <label for="cfg_scale">Guidance Scale:</label>
245
- <input type="range" id="cfg_scale" name="cfg_scale" min="5" max="14" value="7.5" step="1">
246
- <span id="cfg-scale-value">7.5</span>
247
- <br>
248
- <label for="seed">Seed:</label>
249
- <input type="range" id="seed" name="seed" min="1" max="99999" value="0" step="1">
250
- <span id="seed-value">0</span>
251
- <br>
252
- <label for="noise_level">Noise Level:</label>
253
- <input type="range" id="noise_level" name="noise_level" min="0" max="10" step="1" value="0">
254
- <span id="noise-level-value">0</span>
255
-
256
- <br>
257
- <button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
258
- </div>
259
- <br>
260
- <div id="output-container" class="image-container">
261
- <div id="image-box" class="image-box">
262
- <p>Your Generated Arts Will Appear Here</p>
263
- </div>
264
- </div>
265
- </div>
266
-
267
- <script>
268
- function showSpinner(spinnerId) {
269
- document.getElementById(spinnerId).style.display = 'block';
270
- }
271
-
272
- function hideSpinner(spinnerId) {
273
- document.getElementById(spinnerId).style.display = 'none';
274
- }
275
-
276
-
277
- function generatePrompts() {
278
- const prompt = document.getElementById("prompt").value;
279
- const promptBox = document.getElementById("prompt-box");
280
- const promptSpinner = document.getElementById("promptSpinner");
281
- if (!prompt) {
282
- promptBox.innerHTML = "<p>Please enter text before generating prompts.</p>";
283
- return;
284
- }
285
- promptBox.innerHTML = ""; // Clear previous content
286
- promptSpinner.style.display = "block"; // Display spinner
287
- fetch(`/generate_prompts?prompt_text=${encodeURIComponent(prompt)}`)
288
- .then(response => response.text())
289
- .then(data => {
290
- document.getElementById("inputs").value = data.trim();
291
- promptSpinner.style.display = 'none'; // Hide spinner
292
- })
293
- .catch(error => {
294
- console.error('Error:', error);
295
- promptSpinner.style.display = 'none'; // Hide spinner
296
- });
297
- }
298
-
299
- function sendInputs() {
300
- const inputs = document.getElementById("inputs").value;
301
- if (!inputs) {
302
- const imageBox = document.getElementById("image-box");
303
- imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
304
- return;
305
- }
306
-
307
- showSpinner('sendSpinner');
308
- const noiseLevel = document.getElementById("noise_level").value;
309
- const isNegative = document.getElementById("is_negative").value;
310
- const steps = document.getElementById("steps").value;
311
- const cfgScale = document.getElementById("cfg_scale").value;
312
- const seed = document.getElementById("seed").value;
313
- fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
314
- .then(response => {
315
- if (!response.ok) {
316
- throw new Error('Network response was not ok');
317
- }
318
- return response.json();
319
- })
320
- .then(data => {
321
- const imageBox = document.getElementById("image-box");
322
- const img = new Image();
323
- img.src = 'data:image/jpeg;base64,' + data.image_base64;
324
- const maxWidth = 200;
325
- const maxHeight = 200;
326
- if (img.width > maxWidth || img.height > maxHeight) {
327
- const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
328
- img.width *= ratio;
329
- img.height *= ratio;
330
- }
331
- imageBox.appendChild(img);
332
- hideSpinner('sendSpinner');
333
- })
334
- .catch(error => {
335
- console.error('Error:', error);
336
- const imageBox = document.getElementById("image-box");
337
- imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
338
- hideSpinner('sendSpinner');
339
- });
340
- }
341
-
342
-
343
-
344
- function toggleAdvancedOptions() {
345
- const advancedOptions = document.getElementById("advanced-options");
346
- if (advancedOptions.style.display === "none") {
347
- advancedOptions.style.display = "block";
348
- } else {
349
- advancedOptions.style.display = "none";
350
- }
351
- }
352
-
353
- // Function to update slider value display
354
- function updateSliderValue(sliderId, spanId) {
355
- const slider = document.getElementById(sliderId);
356
- const span = document.getElementById(spanId);
357
- span.textContent = slider.value;
358
- }
359
-
360
- // Event listeners to update slider values
361
- document.getElementById("steps").addEventListener("input", () => {
362
- updateSliderValue("steps", "steps-value");
363
- });
364
-
365
- document.getElementById("cfg_scale").addEventListener("input", () => {
366
- updateSliderValue("cfg_scale", "cfg-scale-value");
367
- });
368
-
369
- document.getElementById("seed").addEventListener("input", () => {
370
- updateSliderValue("seed", "seed-value");
371
- });
372
-
373
- document.getElementById("noise_level").addEventListener("input", () => {
374
- updateSliderValue("noise_level", "noise-level-value");
375
- });
376
-
377
-
378
-
379
- </script>
380
- </body>
381
- </html>