Hugging Face's logo

Spaces:
Ashrafb
/
Angdocketr
Paused

App Files Community
Ashrafb commited on
Commit
0cd9183
·
verified ·
1 Parent(s): b0c0488

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +41 -25
static/index.html CHANGED
@@ -3,49 +3,65 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AnimeGANv3 Interface</title>
7
  </head>
8
  <body>
9
- <h1>AnimeGANv3 Interface</h1>
10
- <form id="uploadForm" enctype="multipart/form-data">
11
- <input type="file" id="fileInput" name="file">
12
- <select id="styleSelect" name="Style">
 
13
  <option value="AnimeGANv3_Arcane">AnimeGANv3_Arcane</option>
14
  <option value="AnimeGANv3_Trump v1.0">AnimeGANv3_Trump v1.0</option>
15
  <option value="AnimeGANv3_Shinkai">AnimeGANv3_Shinkai</option>
16
- <option value="AnimeGANv3_PortraitSketch">AnimeGANv3_PortraitSketch</option>
17
- <option value="AnimeGANv3_Hayao">AnimeGANv3_Hayao</option>
18
- <option value="AnimeGANv3_Disney v1.0">AnimeGANv3_Disney v1.0</option>
19
- <option value="AnimeGANv3_JP_face v1.0">AnimeGANv3_JP_face v1.0</option>
20
- <option value="AnimeGANv3_Kpop v2.0">AnimeGANv3_Kpop v2.0</option>
21
  </select>
22
- <label for="faceExtract">Extract face:</label>
23
- <select id="faceExtract" name="if_face">
24
- <option value="Yes">Yes</option>
25
- <option value="No">No</option>
26
- </select>
27
- <button type="button" onclick="uploadImage()">Upload & Convert</button>
28
  </form>
29
- <div id="result"></div>
 
 
 
 
30
 
31
  <script>
32
- async function uploadImage() {
33
- const form = document.getElementById('uploadForm');
34
- const formData = new FormData(form);
 
 
 
 
 
 
 
 
 
 
 
 
35
 
36
  try {
37
  const response = await fetch('/inference/', {
38
  method: 'POST',
39
  body: formData
40
  });
41
- const data = await response.blob();
42
- const imgUrl = URL.createObjectURL(data);
43
- const resultDiv = document.getElementById('result');
44
- resultDiv.innerHTML = `<img src="${imgUrl}" alt="Output Image">`;
 
 
 
 
 
 
45
  } catch (error) {
46
  console.error('Error:', error);
47
  }
48
- }
49
  </script>
50
  </body>
51
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image Style Transfer</title>
7
  </head>
8
  <body>
9
+ <h1>Image Style Transfer</h1>
10
+ <form id="uploadForm">
11
+ <input type="file" id="fileInput" accept="image/*" required>
12
+ <select id="styleSelect" required>
13
+ <option value="">Select Style</option>
14
  <option value="AnimeGANv3_Arcane">AnimeGANv3_Arcane</option>
15
  <option value="AnimeGANv3_Trump v1.0">AnimeGANv3_Trump v1.0</option>
16
  <option value="AnimeGANv3_Shinkai">AnimeGANv3_Shinkai</option>
17
+ <!-- Add more style options here -->
 
 
 
 
18
  </select>
19
+ <label for="faceCheckbox">Detect Face?</label>
20
+ <input type="checkbox" id="faceCheckbox">
21
+ <button type="submit">Upload & Style Transfer</button>
 
 
 
22
  </form>
23
+
24
+ <div id="resultContainer" style="display: none;">
25
+ <h2>Stylized Image</h2>
26
+ <img id="resultImage" src="" alt="Stylized Image">
27
+ </div>
28
 
29
  <script>
30
+ document.getElementById('uploadForm').addEventListener('submit', async function(event) {
31
+ event.preventDefault();
32
+
33
+ const fileInput = document.getElementById('fileInput');
34
+ const styleSelect = document.getElementById('styleSelect');
35
+ const faceCheckbox = document.getElementById('faceCheckbox');
36
+
37
+ const file = fileInput.files[0];
38
+ const style = styleSelect.value;
39
+ const if_face = faceCheckbox.checked ? "Yes" : "No";
40
+
41
+ const formData = new FormData();
42
+ formData.append('file', file);
43
+ formData.append('Style', style);
44
+ formData.append('if_face', if_face);
45
 
46
  try {
47
  const response = await fetch('/inference/', {
48
  method: 'POST',
49
  body: formData
50
  });
51
+
52
+ if (!response.ok) {
53
+ throw new Error('Error uploading file');
54
+ }
55
+
56
+ const blob = await response.blob();
57
+ const imageURL = URL.createObjectURL(blob);
58
+
59
+ document.getElementById('resultImage').src = imageURL;
60
+ document.getElementById('resultContainer').style.display = 'block';
61
  } catch (error) {
62
  console.error('Error:', error);
63
  }
64
+ });
65
  </script>
66
  </body>
67
  </html>