Hugging Face's logo

Spaces:
Ashrafb
/
Angdocketr
Paused

App Files Community
Ashrafb commited on
Commit
1dfbd42
·
verified ·
1 Parent(s): 237989a

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +25 -30
static/index.html CHANGED
@@ -7,46 +7,41 @@
7
  </head>
8
  <body>
9
  <h1>AnimeGANv3 Interface</h1>
10
- <input type="file" id="fileInput">
11
- <select id="styleSelect">
12
- <option value="AnimeGANv3_Hayao">AnimeGANv3_Hayao</option>
13
- <option value="AnimeGANv3_Shinkai">AnimeGANv3_Shinkai</option>
14
- <option value="AnimeGANv3_Arcane">AnimeGANv3_Arcane</option>
15
- <option value="AnimeGANv3_USA">AnimeGANv3_USA</option>
16
- <option value="AnimeGANv3_Trump v1.0">AnimeGANv3_Trump v1.0</option>
17
- <option value="AnimeGANv3_Disney v1.0">AnimeGANv3_Disney v1.0</option>
18
- <option value="AnimeGANv3_PortraitSketch">AnimeGANv3_PortraitSketch</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
- <input type="checkbox" id="faceExtract" checked>
24
- <button onclick="uploadImage()">Upload & Convert</button>
 
 
 
 
25
  <div id="result"></div>
26
 
27
  <script>
28
  async function uploadImage() {
29
- const fileInput = document.getElementById('fileInput');
30
- const styleSelect = document.getElementById('styleSelect');
31
- const faceExtract = document.getElementById('faceExtract');
32
-
33
- const file = fileInput.files[0];
34
- const style = styleSelect.value;
35
- const extractFace = faceExtract.checked ? 'Yes' : 'No';
36
-
37
- const formData = new FormData();
38
- formData.append('img_path', file);
39
- formData.append('Style', style);
40
- formData.append('if_face', extractFace);
41
 
42
  try {
43
  const response = await fetch('/inference/', {
44
  method: 'POST',
45
  body: formData
46
  });
47
- const data = await response.json();
48
- const outputImgUrl = `/download/${data.save_path}`;
49
- document.getElementById('result').innerHTML = `<img src="${outputImgUrl}" alt="Output Image">`;
 
50
  } catch (error) {
51
  console.error('Error:', error);
52
  }
 
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
  }