Hugging Face's logo

Spaces:
soiz1
/
Image_Face_Upscale_Restoration-GFPGAN_API
Running

App Files Community
soiz1 commited on
Commit
eda5c65
·
verified ·
1 Parent(s): 0610402

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +30 -37
app.py CHANGED
@@ -129,7 +129,9 @@ def index():
129
  #preview { max-width: 100%; margin-top: 10px; }
130
  #apiUsage { background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 20px; font-family: monospace; white-space: pre-wrap; }
131
  #apiUsage h3 { margin-top: 0; }
132
- #formDataPreview { max-height: 200px; overflow-y: auto; }
 
 
133
  </style>
134
  </head>
135
  <body>
@@ -182,57 +184,48 @@ def index():
182
  const version = document.getElementById('version').value;
183
  const scale = document.getElementById('scale').value;
184
 
185
- // フォームデータのプレビューを作成
186
- const formData = {
187
  version: version,
188
- scale: scale
189
  };
190
 
191
  if (fileInput.files.length > 0) {
192
  const file = fileInput.files[0];
193
- const reader = new FileReader();
194
- reader.onload = function(e) {
195
- const dataURL = e.target.result;
196
- // データURLを短縮表示
197
- const shortenedDataURL = dataURL.substring(0, 20) + '...' + dataURL.substring(dataURL.length - 20);
198
- formData.file = shortenedDataURL;
199
- formData.fileName = file.name;
200
- formData.fileType = file.type;
201
- formData.fileSize = file.size + ' bytes';
202
-
203
- updateFormDataPreview(formData);
204
- updateFetchCode();
205
  };
206
- reader.readAsDataURL(file);
207
  } else {
208
- formData.file = 'No file selected';
209
- updateFormDataPreview(formData);
210
- updateFetchCode();
211
  }
 
 
 
212
  }
213
 
214
- function updateFormDataPreview(formData) {
215
  const previewDiv = document.getElementById('formDataPreview');
216
- previewDiv.innerHTML = '<strong>Form data to be sent:</strong><br>' +
217
- JSON.stringify(formData, null, 2);
 
218
  }
219
 
220
  function updateFetchCode() {
221
- const currentUrl = window.location.href;
222
- const baseUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
223
- const apiUrl = baseUrl + 'api/restore';
224
 
225
  const fetchCodeDiv = document.getElementById('fetchCode');
226
  fetchCodeDiv.innerHTML = `
227
- <strong>JavaScript fetch code:</strong>
228
- <pre>
229
- const formData = new FormData();
230
- formData.append('file', document.getElementById('file').files[0]);
231
- formData.append('version', '${document.getElementById('version').value}');
232
- formData.append('scale', ${document.getElementById('scale').value});
233
-
234
  fetch('${apiUrl}', {
235
  method: 'POST',
 
 
 
236
  body: formData
237
  })
238
  .then(response => {
@@ -249,7 +242,7 @@ fetch('${apiUrl}', {
249
  .catch(error => {
250
  console.error('Error:', error.message);
251
  });
252
- </pre>`;
253
  }
254
 
255
  // フォーム要素の変更を監視
@@ -268,9 +261,9 @@ fetch('${apiUrl}', {
268
  formData.append('version', document.getElementById('version').value);
269
  formData.append('scale', document.getElementById('scale').value);
270
 
271
- const currentUrl = window.location.href;
272
- const baseUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
273
- const apiUrl = baseUrl + 'api/restore';
274
 
275
  fetch(apiUrl, {
276
  method: 'POST',
 
129
  #preview { max-width: 100%; margin-top: 10px; }
130
  #apiUsage { background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 20px; font-family: monospace; white-space: pre-wrap; }
131
  #apiUsage h3 { margin-top: 0; }
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>
 
184
  const version = document.getElementById('version').value;
185
  const scale = document.getElementById('scale').value;
186
 
187
+ // フォームデータのJSONを作成
188
+ const formJson = {
189
  version: version,
190
+ scale: parseFloat(scale)
191
  };
192
 
193
  if (fileInput.files.length > 0) {
194
  const file = fileInput.files[0];
195
+ formJson.file = {
196
+ name: file.name,
197
+ type: file.type,
198
+ size: file.size + ' bytes'
 
 
 
 
 
 
 
 
199
  };
 
200
  } else {
201
+ formJson.file = 'No file selected';
 
 
202
  }
203
+
204
+ updateFormDataPreview(formJson);
205
+ updateFetchCode();
206
  }
207
 
208
+ function updateFormDataPreview(formJson) {
209
  const previewDiv = document.getElementById('formDataPreview');
210
+ previewDiv.innerHTML = '<strong>Form data (JSON):</strong><br>' +
211
+ JSON.stringify(formJson, null, 2) +
212
+ ' <span class="comment">// この値がフォーム部分です。</span>';
213
  }
214
 
215
  function updateFetchCode() {
216
+ // 現在のURLからベースURLを取得（パス、パラメータ、ハッシュを含めない）
217
+ const baseUrl = window.location.origin;
218
+ const apiUrl = baseUrl + '/api/restore';
219
 
220
  const fetchCodeDiv = document.getElementById('fetchCode');
221
  fetchCodeDiv.innerHTML = `
222
+ <div class="code-block">
223
+ // JavaScript fetch code:
 
 
 
 
 
224
  fetch('${apiUrl}', {
225
  method: 'POST',
226
+ headers: {
227
+ 'Content-Type': 'multipart/form-data'
228
+ },
229
  body: formData
230
  })
231
  .then(response => {
 
242
  .catch(error => {
243
  console.error('Error:', error.message);
244
  });
245
+ </div>`;
246
  }
247
 
248
  // フォーム要素の変更を監視
 
261
  formData.append('version', document.getElementById('version').value);
262
  formData.append('scale', document.getElementById('scale').value);
263
 
264
+ // 現在のURLからベースURLを取得（パス、パラメータ、ハッシュを含めない）
265
+ const baseUrl = window.location.origin;
266
+ const apiUrl = baseUrl + '/api/restore';
267
 
268
  fetch(apiUrl, {
269
  method: 'POST',