Hugging Face's logo

Spaces:
suarkadipa
/
flan-t5-small
Runtime error

App Files Community
suarkadipa commited on
Commit
d77ecc0
•
1 Parent(s): 8e9854d

updated

Browse files
Files changed (3) hide show
  1. static/index.html +36 -24
  2. static/script.js +12 -8
  3. static/style.css +45 -0
static/index.html CHANGED
@@ -1,24 +1,36 @@
1
- <main>
2
- <section id="text-gen">
3
- <h2>Text generation using Flan T5</h2>
4
- <p>
5
- Model:
6
- <a
7
- href="https://huggingface.co/google/flan-t5-small"
8
- rel="noreferrer"
9
- target="_blank"
10
- >google/flan-t5-small
11
- </a>
12
- </p>
13
- <form class="text-gen-form">
14
- <label for="text-gen-input">Text prompt</label>
15
- <input
16
- id="text-gen-input"
17
- type="text"
18
- value="German: There are many ducks"
19
- />
20
- <button id="text-gen-submit">Submit</button>
21
- <p class="text-gen-output"></p>
22
- </form>
23
- </section>
24
- </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Fast API 🤗 Space served with Uvicorn</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ <script type="module" src="script.js"></script>
9
+ </head>
10
+ <body>
11
+ <main>
12
+ <section id="text-gen">
13
+ <h1>Text generation using Flan T5</h1>
14
+ <p>
15
+ Model:
16
+ <a
17
+ href="https://huggingface.co/google/flan-t5-small"
18
+ rel="noreferrer"
19
+ target="_blank"
20
+ >google/flan-t5-small</a
21
+ >
22
+ </p>
23
+ <form class="text-gen-form">
24
+ <label for="text-gen-input">Text prompt</label>
25
+ <input
26
+ id="text-gen-input"
27
+ type="text"
28
+ value="English: Translate There are many ducks. German:"
29
+ />
30
+ <button id="text-gen-submit">Submit</button>
31
+ <p class="text-gen-output"></p>
32
+ </form>
33
+ </section>
34
+ </main>
35
+ </body>
36
+ </html>
static/script.js CHANGED
@@ -1,17 +1,21 @@
1
- const textGenForm = document.querySelector(".text-gen-form");
2
 
3
  const translateText = async (text) => {
4
- const inferResponse = await fetch(`infer_t5?input=${text}`);
5
- const inferJson = await inferResponse.json();
6
 
7
- return inferJson.output;
8
  };
9
 
10
- textGenForm.addEventListener("submit", async (event) => {
11
  event.preventDefault();
12
 
13
- const textGenInput = document.getElementById("text-gen-input");
14
- const textGenParagraph = document.querySelector(".text-gen-output");
15
 
16
- textGenParagraph.textContent = await translateText(textGenInput.value);
 
 
 
 
17
  });
 
1
+ const textGenForm = document.querySelector('.text-gen-form');
2
 
3
  const translateText = async (text) => {
4
+ const inferResponse = await fetch(`infer_t5?input=${text}`);
5
+ const inferJson = await inferResponse.json();
6
 
7
+ return inferJson.output;
8
  };
9
 
10
+ textGenForm.addEventListener('submit', async (event) => {
11
  event.preventDefault();
12
 
13
+ const textGenInput = document.getElementById('text-gen-input');
14
+ const textGenParagraph = document.querySelector('.text-gen-output');
15
 
16
+ try {
17
+ textGenParagraph.textContent = await translateText(textGenInput.value);
18
+ } catch (err) {
19
+ console.error(err);
20
+ }
21
  });
static/style.css CHANGED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ --text: hsl(0 0% 15%);
3
+ padding: 2.5rem;
4
+ font-family: sans-serif;
5
+ color: var(--text);
6
+ }
7
+
8
+ body.dark-theme {
9
+ --text: hsl(0 0% 90%);
10
+ background-color: hsl(223 39% 7%);
11
+ }
12
+
13
+ main {
14
+ max-width: 80rem;
15
+ text-align: center;
16
+ }
17
+
18
+ section {
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ }
23
+
24
+ a {
25
+ color: var(--text);
26
+ }
27
+
28
+ form {
29
+ width: 30rem;
30
+ margin: 0 auto;
31
+ }
32
+
33
+ input {
34
+ width: 100%;
35
+ }
36
+
37
+ button {
38
+ cursor: pointer;
39
+ }
40
+
41
+ .text-gen-output {
42
+ min-height: 1.2rem;
43
+ margin: 1rem;
44
+ border: 0.5px solid grey;
45
+ }