Hugging Face's logo

Spaces:
imseldrith
/
Imagine
Sleeping

App Files Community
imseldrith commited on
Commit
d556b89
•
1 Parent(s): a718485

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +22 -25
templates/index.html CHANGED
@@ -82,7 +82,8 @@
82
  .social-icon:hover {
83
  color: #ff3366;
84
  }
85
- .generating-message {
 
86
  text-align: center;
87
  margin-bottom: 20px;
88
  color: #ffffff;
@@ -92,28 +93,28 @@
92
  .disabled-button {
93
  cursor: not-allowed;
94
  opacity: 0.6;
95
- }
96
- footer {
97
-
98
  padding: 20px;
99
  text-align: center;
100
- }
101
  </style>
102
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
103
- <!-- Added Font Awesome CDN -->
104
  </head>
105
  <body>
106
  <div class="container">
107
  <h1 class="mt-5">Image Generator</h1>
108
- <form action="/generate" method="POST">
109
  <div class="mb-3">
110
  <label for="prompt" class="form-label">Prompt:</label>
111
  <textarea id="prompt" name="prompt" class="form-control" rows="4" cols="50"></textarea>
112
  </div>
113
  <div class="mb-3">
114
- <label for="style" class="form-label">Choose Style(Experimental Not Working):</label>
115
  <select id="style" name="style" class="form-select">
116
- <option value="IMAGINE_V4_Beta">IMAGINE_V4_Beta</option>
117
  <option value="IMAGINE_V3">IMAGINE_V3</option>
118
  <option value="IMAGINE_V1">IMAGINE_V1</option>
119
  <option value="ANIME_V2">ANIME_V2</option>
@@ -164,29 +165,25 @@
164
  <option value="LOGO">LOGO</option>
165
  <option value="WATERBENDER">WATERBENDER</option>
166
  <option value="FIREBENDER">FIREBENDER</option>
167
- <option value="EARTHBENDER (EXPERIMENTAL)">EARTHBENDER (EXPERIMENTAL)</option>
168
- <option value="AIRBENDER (EXPERIMENTAL)">AIRBENDER (EXPERIMENTAL)</option>
169
- <option value="METALBENDER (EXPERIMENTAL)">METALBENDER (EXPERIMENTAL)</option>
170
- <option value="BLOODBENDER (EXPERIMENTAL)">BLOODBENDER (EXPERIMENTAL)</option>
171
- <option value="LIGHTNINGBENDER (EXPERIMENTAL)">LIGHTNINGBENDER (EXPERIMENTAL)</option>
172
- <option value="SPIRITBENDER (EXPERIMENTAL)">SPIRITBENDER (EXPERIMENTAL)</option>
173
- <option value="LAVABENDER (EXPERIMENTAL)">LAVABENDER (EXPERIMENTAL)</option>
174
- <option value="WATERHEALER (EXPERIMENTAL)">WATERHEALER (EXPERIMENTAL)</option>
175
  </select>
176
  </div>
177
  <div class="mb-3">
178
  <label for="ratio" class="form-label">Choose Ratio:</label>
179
  <select id="ratio" name="ratio" class="form-select">
 
180
  <option value="RATIO_1X1">1:1</option>
181
  <option value="RATIO_9X16">9:16</option>
182
  <option value="RATIO_16X9">16:9</option>
183
- <option value="RATIO_4X3">4:3</option>
184
  <option value="RATIO_3X2">3:2</option>
185
  </select>
186
  </div>
187
  <button type="submit" class="btn btn-primary" id="generate-button">Generate Image</button>
188
  </form>
189
-
 
 
 
 
190
  <div class="social-buttons">
191
  <span class="social-button">
192
  <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook-f"></i></a>
@@ -202,15 +199,15 @@
202
  </span>
203
  </div>
204
  </div>
205
- <script>
 
 
 
206
  function showGeneratingMessage() {
207
  document.getElementById('generating-message').style.display = 'block';
208
  document.getElementById('generate-button').classList.add('disabled-button');
209
  }
210
- </script>
211
- <footer>
212
- <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
213
- </footer>
214
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script>
215
  </body>
216
- </html>
 
82
  .social-icon:hover {
83
  color: #ff3366;
84
  }
85
+
86
+ .generating-message {
87
  text-align: center;
88
  margin-bottom: 20px;
89
  color: #ffffff;
 
93
  .disabled-button {
94
  cursor: not-allowed;
95
  opacity: 0.6;
96
+ }
97
+
98
+ footer {
99
  padding: 20px;
100
  text-align: center;
101
+ }
102
  </style>
103
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
104
+ <!-- Added Font Awesome CDN -->
105
  </head>
106
  <body>
107
  <div class="container">
108
  <h1 class="mt-5">Image Generator</h1>
109
+ <form action="/generate" method="POST" onsubmit="showGeneratingMessage()">
110
  <div class="mb-3">
111
  <label for="prompt" class="form-label">Prompt:</label>
112
  <textarea id="prompt" name="prompt" class="form-control" rows="4" cols="50"></textarea>
113
  </div>
114
  <div class="mb-3">
115
+ <label for="style" class="form-label">Choose Style:</label>
116
  <select id="style" name="style" class="form-select">
117
+ <option value="IMAGINE_V4_Beta">IMAGINE_V4_Beta</option>
118
  <option value="IMAGINE_V3">IMAGINE_V3</option>
119
  <option value="IMAGINE_V1">IMAGINE_V1</option>
120
  <option value="ANIME_V2">ANIME_V2</option>
 
165
  <option value="LOGO">LOGO</option>
166
  <option value="WATERBENDER">WATERBENDER</option>
167
  <option value="FIREBENDER">FIREBENDER</option>
 
 
 
 
 
 
 
 
168
  </select>
169
  </div>
170
  <div class="mb-3">
171
  <label for="ratio" class="form-label">Choose Ratio:</label>
172
  <select id="ratio" name="ratio" class="form-select">
173
+ <option value="RATIO_4X3">4:3</option>
174
  <option value="RATIO_1X1">1:1</option>
175
  <option value="RATIO_9X16">9:16</option>
176
  <option value="RATIO_16X9">16:9</option>
 
177
  <option value="RATIO_3X2">3:2</option>
178
  </select>
179
  </div>
180
  <button type="submit" class="btn btn-primary" id="generate-button">Generate Image</button>
181
  </form>
182
+
183
+ <div class="generating-message" id="generating-message">
184
+ Generating image... Please wait.
185
+ </div>
186
+
187
  <div class="social-buttons">
188
  <span class="social-button">
189
  <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook-f"></i></a>
 
199
  </span>
200
  </div>
201
  </div>
202
+ <footer>
203
+ <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
204
+ </footer>
205
+ <script>
206
  function showGeneratingMessage() {
207
  document.getElementById('generating-message').style.display = 'block';
208
  document.getElementById('generate-button').classList.add('disabled-button');
209
  }
210
+ </script>
 
 
 
211
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script>
212
  </body>
213
+ </html>