Hugging Face's logo

Spaces:
Ashrafb
/
Furdockgr1
Sleeping

App Files Community
Ashrafb commited on
Commit
77ae97f
•
1 Parent(s): 97fd3ba

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +35 -42
static/index.html CHANGED
@@ -1,66 +1,59 @@
1
- <!-- index.html -->
2
-
3
  <!DOCTYPE html>
4
  <html lang="en">
5
  <head>
6
  <meta charset="UTF-8">
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
  <title>Image Enhancement</title>
9
- <style>
10
- /* Style to make the image smaller */
11
- #resultContainer img {
12
- max-width: 100%;
13
- height: auto;
14
- }
15
- </style>
16
  </head>
17
  <body>
18
  <h1>Image Enhancement</h1>
19
- <form id="uploadForm" enctype="multipart/form-data">
20
- <label for="image">Upload Image:</label>
21
- <input type="file" id="image" name="file" accept="image/*" required><br><br>
22
 
23
- <label for="version">Select Version:</label>
24
- <select id="version" name="version">
25
- <option value="v1.2">v1.2</option>
26
- <option value="v1.3">v1.3</option>
27
- <option value="v1.4">v1.4</option>
28
- <!-- Add more options as needed -->
 
 
29
  </select><br><br>
30
 
31
- <label for="scale">Select Scale:</label>
32
- <select id="scale" name="scale">
33
- <option value="2">2x</option>
34
- <option value="4">4x</option>
35
- <!-- Add more options as needed -->
36
- </select><br><br>
37
 
38
- <button type="submit">Enhance Image</button>
39
  </form>
40
-
41
- <div id="resultContainer"></div>
42
 
43
  <script>
44
-
45
- async function handleFormSubmission(event) {
46
- event.preventDefault();
47
- const formData = new FormData(this);
48
- try {
 
 
 
 
 
49
  const response = await fetch('/upload/', {
50
  method: 'POST',
51
  body: formData
52
  });
53
- const result = await response.blob();
54
- const imageURL = URL.createObjectURL(result);
55
- document.getElementById('resultContainer').innerHTML = `<img src="${imageURL}" alt="Enhanced Image">`;
56
- } catch (error) {
57
- console.error('Error:', error);
58
- }
59
- }
60
-
61
- document.getElementById('uploadForm').addEventListener('submit', handleFormSubmission);
62
-
63
 
 
 
 
 
 
 
 
 
 
64
  </script>
65
  </body>
66
  </html>
 
 
 
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>Image Enhancement</title>
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
  <h1>Image Enhancement</h1>
10
+ <form id="upload-form" enctype="multipart/form-data">
11
+ <label for="image">Select an image:</label>
12
+ <input type="file" id="image" accept="image/*" required><br><br>
13
 
14
+ <label for="version">Select a model version:</label>
15
+ <select id="version" required>
16
+ <option value="v1.2">GFPGAN v1.2</option>
17
+ <option value="v1.3">GFPGAN v1.3</option>
18
+ <option value="v1.4">GFPGAN v1.4</option>
19
+ <option value="RestoreFormer">RestoreFormer</option>
20
+ <option value="CodeFormer">CodeFormer</option>
21
+ <option value="RealESR-General-x4v3">RealESR-General-x4v3</option>
22
  </select><br><br>
23
 
24
+ <label for="scale">Select scale factor (2 or 4):</label>
25
+ <input type="number" id="scale" min="2" max="4" value="4" required><br><br>
 
 
 
 
26
 
27
+ <button type="button" onclick="uploadImage()">Enhance Image</button>
28
  </form>
29
+
30
+ <div id="result-container"></div>
31
 
32
  <script>
33
+ async function uploadImage() {
34
+ const fileInput = document.getElementById('image');
35
+ const versionInput = document.getElementById('version');
36
+ const scaleInput = document.getElementById('scale');
37
+
38
+ const formData = new FormData();
39
+ formData.append('file', fileInput.files[0]);
40
+ formData.append('version', versionInput.value);
41
+ formData.append('scale', scaleInput.value);
42
+
43
  const response = await fetch('/upload/', {
44
  method: 'POST',
45
  body: formData
46
  });
 
 
 
 
 
 
 
 
 
 
47
 
48
+ if (response.ok) {
49
+ const resultContainer = document.getElementById('result-container');
50
+ const blob = await response.blob();
51
+ const imageURL = URL.createObjectURL(blob);
52
+ resultContainer.innerHTML = `<img src="${imageURL}" alt="Enhanced Image">`;
53
+ } else {
54
+ alert('Failed to enhance the image.');
55
+ }
56
+ }
57
  </script>
58
  </body>
59
  </html>