Hugging Face's logo

Spaces:
Empereur-Pirate
/
Empereur
Sleeping

App Files Community
Empereur-Pirate commited on
Commit
77a970b
·
verified ·
1 Parent(s): 6c8de03

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +62 -7
static/index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <body>
2
  <!-- Add the Loader -->
3
  <div id="loader">
@@ -18,17 +19,71 @@
18
  </p>
19
  <form class="text-gen-form">
20
  <label for="text-gen-input">Text prompt</label>
21
- <input
22
- id="text-gen-input"
23
- type="text"
24
- value="German: There are many ducks"
25
- />
26
  <button id="text-gen-submit">Submit</button>
27
  <p class="text-gen-output"></p>
28
  </form>
29
  </section></main>
30
 
31
  <!-- Other resources -->
32
- <link href="/static/style.css" rel="stylesheet">
33
- <script src="/static/script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </body>
 
1
+ <!-- Original Content -->
2
  <body>
3
  <!-- Add the Loader -->
4
  <div id="loader">
 
19
  </p>
20
  <form class="text-gen-form">
21
  <label for="text-gen-input">Text prompt</label>
22
+ <input id="text-gen-input" type="text" value="German: There are many ducks"/>
 
 
 
 
23
  <button id="text-gen-submit">Submit</button>
24
  <p class="text-gen-output"></p>
25
  </form>
26
  </section></main>
27
 
28
  <!-- Other resources -->
29
+ <link href="/static/style.css" rel="stylesheet">
30
+ <script>
31
+ document.addEventListener('DOMContentLoaded', () => {
32
+ const loader = document.getElementById('loader');
33
+ const textGenInput = document.getElementById('text-gen-input');
34
+ const textGenOutput = document.querySelector('.text-gen-output');
35
+
36
+ /* Function to hide the loader */
37
+ const hideLoader = () => {
38
+ loader.classList.add('hidden');
39
+ };
40
+
41
+ /* Function to show the loader */
42
+ const showLoader = () => {
43
+ loader.classList.remove('hidden');
44
+ };
45
+
46
+ /* Submit Button Event Listener */
47
+ const textGenForm = document.querySelector('.text-gen-form');
48
+ textGenForm.addEventListener('submit', async (event) => {
49
+ event.preventDefault();
50
+
51
+ /* Hide the loader initially */
52
+ hideLoader();
53
+
54
+ /* Get the input value */
55
+ const inputValue = textGenInput.value;
56
+
57
+ /* Show the loader before making the request */
58
+ showLoader();
59
+
60
+ try {
61
+ /* Send a POST request to the /infer_t5 endpoint with the input value as JSON data */
62
+ const response = await fetch('/infer_t5', {
63
+ method: 'POST',
64
+ headers: {
65
+ 'Content-Type': 'application/json'
66
+ },
67
+ body: JSON.stringify({ input: inputValue })
68
+ });
69
+
70
+ /* Parse the response as JSON */
71
+ const data = await response.json();
72
+
73
+ /* Clear the output paragraph */
74
+ textGenOutput.innerHTML = '';
75
+
76
+ /* Display the generated text in the output paragraph */
77
+ textGenOutput.insertAdjacentHTML('beforeend', `<span>${data.output}</span>`);
78
+
79
+ /* Hide the loader finally */
80
+ hideLoader();
81
+ } catch (err) {
82
+ console.error(err);
83
+ textGenOutput.innerText = 'Something went wrong.';
84
+ hideLoader();
85
+ }
86
+ });
87
+ });
88
+ </script>
89
  </body>