Hugging Face's logo

Spaces:
imseldrith
/
Imagine
Sleeping

App Files Community
imseldrith commited on
Commit
1c22ffb
•
1 Parent(s): 6ad04d4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +61 -109
templates/index.html CHANGED
@@ -15,9 +15,9 @@
15
  max-width: 600px;
16
  margin: 0 auto;
17
  padding: 40px;
18
- background-color: transparent; /* Updated */
19
  border-radius: 10px;
20
- box-shadow: none; /* Updated */
21
  }
22
 
23
  h1 {
@@ -62,7 +62,7 @@
62
  button[type="submit"]:hover {
63
  background-color: #cc0052;
64
  }
65
-
66
  .social-buttons {
67
  text-align: center;
68
  margin-top: 20px;
@@ -82,62 +82,61 @@
82
  .social-icon:hover {
83
  color: #ff3366;
84
  }
85
-
86
- .generating-message {
87
- text-align: center;
88
- margin-bottom: 20px;
89
- color: #ffffff;
90
- display: none;
91
- font-size: 24px;
92
- animation: pulse 1s ease-in-out infinite;
93
- }
94
 
95
- @keyframes pulse {
96
- 0% {
97
- transform: scale(1);
98
- opacity: 0.7;
99
- }
100
- 50% {
101
- transform: scale(1.2);
102
- opacity: 1;
103
  }
104
- 100% {
105
- transform: scale(1);
106
- opacity: 0.7;
 
 
 
 
 
 
 
 
 
 
 
107
  }
108
- }
109
 
110
  .loading-spinner {
111
- display: inline-block;
112
- width: 40px;
113
- height: 40px;
114
- border: 4px solid #ffffff;
115
- border-top-color: transparent;
116
- border-radius: 50%;
117
- animation: spin 1s linear infinite;
118
- }
119
-
120
- @keyframes spin {
121
- 0% {
122
- transform: rotate(0deg);
123
  }
124
- 100% {
125
- transform: rotate(360deg);
 
 
 
 
 
 
126
  }
127
- }
128
-
129
  .disabled-button {
130
  cursor: not-allowed;
131
  opacity: 0.6;
132
  }
133
-
134
  footer {
135
  padding: 20px;
136
  text-align: center;
137
  }
138
  </style>
139
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
140
- <!-- Added Font Awesome CDN -->
141
  </head>
142
  <body>
143
  <div class="container">
@@ -149,58 +148,12 @@
149
  </div>
150
  <div class="mb-3">
151
  <label for="style" class="form-label">Choose Style:</label>
152
- <select id="style" name="style" class="form-select">
153
  <option value="IMAGINE_V4_Beta">IMAGINE_V4_Beta</option>
154
- <option value="IMAGINE_V3">IMAGINE_V3</option>
155
- <option value="IMAGINE_V1">IMAGINE_V1</option>
156
- <option value="ANIME_V2">ANIME_V2</option>
157
- <option value="PORTRAIT">PORTRAIT</option>
158
- <option value="REALISTIC">REALISTIC</option>
159
- <option value="ANIME">ANIME</option>
160
- <option value="COSMIC">COSMIC</option>
161
- <option value="COMIC_V2">COMIC_V2</option>
162
- <option value="MARBLE">MARBLE</option>
163
- <option value="MINECRAFT">MINECRAFT</option>
164
- <option value="DISNEY">DISNEY</option>
165
- <option value="MACRO_PHOTOGRAPHY">MACRO_PHOTOGRAPHY</option>
166
- <option value="GTA">GTA</option>
167
- <option value="STUDIO_GHIBLI">STUDIO_GHIBLI</option>
168
- <option value="DYSTOPIAN">DYSTOPIAN</option>
169
- <option value="STAINED_GLASS">STAINED_GLASS</option>
170
- <option value="PRODUCT_PHOTOGRAPHY">PRODUCT_PHOTOGRAPHY</option>
171
- <option value="PSYCHEDELIC">PSYCHEDELIC</option>
172
- <option value="SURREALISM">SURREALISM</option>
173
- <option value="GRAFFITI">GRAFFITI</option>
174
- <option value="GHOTIC">GHOTIC</option>
175
- <option value="RAINBOW">RAINBOW</option>
176
- <option value="AVATAR">AVATAR</option>
177
- <option value="PALETTE_KNIFE">PALETTE_KNIFE</option>
178
- <option value="CANDYLAND">CANDYLAND</option>
179
- <option value="CLAYMATION">CLAYMATION</option>
180
- <option value="EUPHORIC">EUPHORIC</option>
181
- <option value="MEDIEVAL">MEDIEVAL</option>
182
- <option value="ORIGAMI">ORIGAMI</option>
183
- <option value="POP_ART">POP_ART</option>
184
- <option value="POP_ART_2">POP_ART_2</option>
185
- <option value="PATTERN">PATTERN</option>
186
- <option value="CHROMATIC">CHROMATIC</option>
187
- <option value="CLIP_ART">CLIP_ART</option>
188
- <option value="RENAISSANCE">RENAISSANCE</option>
189
- <option value="FANTASY">FANTASY</option>
190
- <option value="EXTRA_TERRESTRIAL">EXTRA_TERRESTRIAL</option>
191
- <option value="WOOLITIZE">WOOLITIZE</option>
192
- <option value="NEO_FAUVISM">NEO_FAUVISM</option>
193
- <option value="AMAZONIAN">AMAZONIAN</option>
194
- <option value="SHAMROCK_FANTASY">SHAMROCK_FANTASY</option>
195
- <option value="ABSTRACT_VIBRANT">ABSTRACT_VIBRANT</option>
196
- <option value="NEON">NEON</option>
197
- <option value="CUBISM">CUBISM</option>
198
- <option value="BAUHAUS">BAUHAUS</option>
199
- <option value="ROCOCCO">ROCOCCO</option>
200
- <option value="HAUNTED">HAUNTED</option>
201
- <option value="LOGO">LOGO</option>
202
- <option value="WATERBENDER">WATERBENDER</option>
203
- <option value="FIREBENDER">FIREBENDER</option>
204
  </select>
205
  </div>
206
  <div class="mb-3">
@@ -215,13 +168,12 @@
215
  </div>
216
  <button type="submit" class="btn btn-primary" id="generate-button">Generate Image</button>
217
  </form>
218
-
219
  <div class="generating-message">
220
- <span class="loading-spinner"></span>
221
- Generating image... Please wait
222
- </div>
223
 
224
-
225
  <div class="social-buttons">
226
  <span class="social-button">
227
  <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook-f"></i></a>
@@ -241,17 +193,17 @@
241
  <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
242
  </footer>
243
  <script>
244
- function showGeneratingMessage() {
245
- var generatingMessage = document.getElementById('generating-message');
246
- generatingMessage.style.display = 'block';
247
- document.getElementById('generate-button').classList.add('disabled-button');
248
 
249
- setTimeout(function() {
250
- generatingMessage.style.display = 'none';
251
- document.getElementById('generate-button').classList.remove('disabled-button');
252
- }, 5000);
253
- }
254
- </script>
255
 
256
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
257
  </body>
 
15
  max-width: 600px;
16
  margin: 0 auto;
17
  padding: 40px;
18
+ background-color: transparent;
19
  border-radius: 10px;
20
+ box-shadow: none;
21
  }
22
 
23
  h1 {
 
62
  button[type="submit"]:hover {
63
  background-color: #cc0052;
64
  }
65
+
66
  .social-buttons {
67
  text-align: center;
68
  margin-top: 20px;
 
82
  .social-icon:hover {
83
  color: #ff3366;
84
  }
 
 
 
 
 
 
 
 
 
85
 
86
+ .generating-message {
87
+ text-align: center;
88
+ margin-bottom: 20px;
89
+ color: #ffffff;
90
+ display: none;
91
+ font-size: 24px;
92
+ animation: pulse 1s ease-in-out infinite;
 
93
  }
94
+
95
+ @keyframes pulse {
96
+ 0% {
97
+ transform: scale(1);
98
+ opacity: 0.7;
99
+ }
100
+ 50% {
101
+ transform: scale(1.2);
102
+ opacity: 1;
103
+ }
104
+ 100% {
105
+ transform: scale(1);
106
+ opacity: 0.7;
107
+ }
108
  }
 
109
 
110
  .loading-spinner {
111
+ display: inline-block;
112
+ width: 40px;
113
+ height: 40px;
114
+ border: 4px solid #ffffff;
115
+ border-top-color: transparent;
116
+ border-radius: 50%;
117
+ animation: spin 1s linear infinite;
 
 
 
 
 
118
  }
119
+
120
+ @keyframes spin {
121
+ 0% {
122
+ transform: rotate(0deg);
123
+ }
124
+ 100% {
125
+ transform: rotate(360deg);
126
+ }
127
  }
128
+
 
129
  .disabled-button {
130
  cursor: not-allowed;
131
  opacity: 0.6;
132
  }
133
+
134
  footer {
135
  padding: 20px;
136
  text-align: center;
137
  }
138
  </style>
139
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
140
  </head>
141
  <body>
142
  <div class="container">
 
148
  </div>
149
  <div class="mb-3">
150
  <label for="style" class="form-label">Choose Style:</label>
151
+ <select id="style" name="style" class="form-select">
152
  <option value="IMAGINE_V4_Beta">IMAGINE_V4_Beta</option>
153
+ <option value="IMAGINE_V3">IMAGINE_V3</option>
154
+ <option value="IMAGINE_V1">IMAGINE_V1</option>
155
+ <option value="ANIME_V2">ANIME_V2</option>
156
+ <!-- Add more style options here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </select>
158
  </div>
159
  <div class="mb-3">
 
168
  </div>
169
  <button type="submit" class="btn btn-primary" id="generate-button">Generate Image</button>
170
  </form>
171
+
172
  <div class="generating-message">
173
+ <span class="loading-spinner"></span>
174
+ Generating image... Please wait
175
+ </div>
176
 
 
177
  <div class="social-buttons">
178
  <span class="social-button">
179
  <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook-f"></i></a>
 
193
  <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
194
  </footer>
195
  <script>
196
+ function showGeneratingMessage() {
197
+ var generatingMessage = document.querySelector('.generating-message');
198
+ generatingMessage.style.display = 'block';
199
+ document.getElementById('generate-button').classList.add('disabled-button');
200
 
201
+ setTimeout(function () {
202
+ generatingMessage.style.display = 'none';
203
+ document.getElementById('generate-button').classList.remove('disabled-button');
204
+ }, 5000);
205
+ }
206
+ </script>
207
 
208
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
209
  </body>