Hugging Face's logo

Spaces:
soiz1
/
Image_Face_Upscale_Restoration-GFPGAN_API
Running

App Files Community
soiz1 commited on
Commit
cee4a27
·
verified ·
1 Parent(s): eab2a41

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +36 -3
app.py CHANGED
@@ -132,6 +132,28 @@ def index():
132
  #formDataPreview { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
133
  .code-block { background-color: #f8f8f8; padding: 10px; border-radius: 4px; border-left: 3px solid #4CAF50; }
134
  .comment { color: #666; font-style: italic; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </style>
136
  </head>
137
  <body>
@@ -157,8 +179,9 @@ def index():
157
  <label for="scale">Rescaling factor:</label>
158
  <input type="number" id="scale" name="scale" value="2" step="0.1" min="1" max="4" required>
159
  </div>
160
- <button type="submit">Process Image</button>
161
  </form>
 
162
  <div id="result">
163
  <h3>Result:</h3>
164
  <div id="outputContainer" style="display: none;">
@@ -246,6 +269,13 @@ fetch('${apiUrl}', {
246
  document.getElementById('uploadForm').addEventListener('submit', function(e) {
247
  e.preventDefault();
248
 
 
 
 
 
 
 
 
249
  const formData = new FormData();
250
  formData.append('file', document.getElementById('file').files[0]);
251
  formData.append('version', document.getElementById('version').value);
@@ -278,13 +308,16 @@ fetch('${apiUrl}', {
278
  })
279
  .catch(error => {
280
  alert('Error: ' + error.message);
 
 
 
 
 
281
  });
282
  });
283
  </script>
284
  </body>
285
  </html>
286
-
287
-
288
  """
289
 
290
  if __name__ == '__main__':
 
132
  #formDataPreview { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
133
  .code-block { background-color: #f8f8f8; padding: 10px; border-radius: 4px; border-left: 3px solid #4CAF50; }
134
  .comment { color: #666; font-style: italic; }
135
+
136
+ .loader {
137
+ width: 48px;
138
+ height: 48px;
139
+ border: 5px solid #4CAF50;
140
+ border-bottom-color: transparent;
141
+ border-radius: 50%;
142
+ display: inline-block;
143
+ box-sizing: border-box;
144
+ animation: rotation 1s linear infinite;
145
+ margin: 20px auto;
146
+ display: none; /* 初期状態では非表示 */
147
+ }
148
+
149
+ @keyframes rotation {
150
+ 0% {
151
+ transform: rotate(0deg);
152
+ }
153
+ 100% {
154
+ transform: rotate(360deg);
155
+ }
156
+ }
157
  </style>
158
  </head>
159
  <body>
 
179
  <label for="scale">Rescaling factor:</label>
180
  <input type="number" id="scale" name="scale" value="2" step="0.1" min="1" max="4" required>
181
  </div>
182
+ <button type="submit" id="submitButton">Process Image</button>
183
  </form>
184
+ <div id="loading" class="loader"></div>
185
  <div id="result">
186
  <h3>Result:</h3>
187
  <div id="outputContainer" style="display: none;">
 
269
  document.getElementById('uploadForm').addEventListener('submit', function(e) {
270
  e.preventDefault();
271
 
272
+ // ボタンを無効化し、ローディングを表示
273
+ const submitButton = document.getElementById('submitButton');
274
+ const loadingElement = document.getElementById('loading');
275
+
276
+ submitButton.disabled = true;
277
+ loadingElement.style.display = 'block';
278
+
279
  const formData = new FormData();
280
  formData.append('file', document.getElementById('file').files[0]);
281
  formData.append('version', document.getElementById('version').value);
 
308
  })
309
  .catch(error => {
310
  alert('Error: ' + error.message);
311
+ })
312
+ .finally(() => {
313
+ // 処理が終わったらローディングを非表示にし、ボタンを再有効化
314
+ loadingElement.style.display = 'none';
315
+ submitButton.disabled = false;
316
  });
317
  });
318
  </script>
319
  </body>
320
  </html>
 
 
321
  """
322
 
323
  if __name__ == '__main__':