Hugging Face's logo

Spaces:
oceankim
/
hfjsdemo
Running

App Files Community
boazchung commited on
Commit
788cea5
•
1 Parent(s): 7105662

Update translation.html

Browse files
Files changed (1) hide show
  1. translation.html +129 -102
translation.html CHANGED
@@ -1,114 +1,141 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
- <head>
5
- <meta charset="UTF-8">
6
- <title>Translation - huggingface.js</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="css/styles.css">
9
- </head>
 
 
 
 
10
 
11
- <body>
12
- <div class="container-main">
 
 
 
 
13
 
14
- <!-- Back to Home button -->
15
- <div class="row mt-5">
16
- <div class="col-md-12 text-center">
17
- <a href="index.html" class="btn btn-outline-secondary"
18
- style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
19
- </div>
20
- </div>
 
 
 
 
21
 
22
- <!-- Content -->
23
- <div class="container mt-5">
24
- <!-- Centered Titles -->
25
- <div class="text-center">
26
- <h2>Natural Language Processing</h2>
27
- <h4>Translation</h4>
28
- </div>
 
29
 
30
- <!-- Actual Content of this page -->
31
- <form id="hf-form">
32
- <input
33
- type="text"
34
- style="display:none"
35
- autocomplete="username"
36
- value="user"
37
- />
38
- <div>
39
- <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
40
- <input
41
- id="hf-token"
42
- placeholder="HF-TOKEN"
43
- type="password"
44
- autocomplete="new-password"
45
- />
46
- </div>
47
- <div id="translation-container" class="container mt-4">
48
- <h5>Translation w/ Xenova/t5-base:</h5>
49
- <div class="d-flex align-items-center">
50
- <label for="translationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
51
- Translate:</label>
52
- <input type="text" class="form-control flex-grow-1" id="translationText2" value="My name is Wolfgang and I live in Amsterdam"
53
- placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
54
- <button id="translateButton2" class="btn btn-primary">Translate</button>
55
- </div>
56
-
57
- <div class="mt-4">
58
- <h4>Output:</h4>
59
- <pre id="outputArea2"></pre>
60
- </div>
61
- </div>
62
-
63
- <!-- Back to Home button -->
64
- <div class="row mt-5">
65
- <div class="col-md-12 text-center">
66
- <a href="index.html" class="btn btn-outline-secondary"
67
- style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
68
- </div>
69
- </div>
70
- </div>
71
- </div>
72
- </form>
73
-
74
- <script type="module">
75
- import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4/+esm';
76
- let hf;
77
 
78
- // Initialize the sentiment analysis model
79
- async function initializeModel() {
80
- const token = document.getElementById("hf-token").value;
81
- console.log("TOKEN: ", token);
82
- hf = new HfInference();
83
- //console.log(hf);
84
- }
85
 
86
- async function translateText() {
87
- // Ensure that hf is initialized before this function is called
88
- if (!hf) {
89
- console.error("HfInference is not initialized.");
90
- return;
91
- }
92
-
93
- const textFieldValue = document.getElementById("translationText2").value.trim();
94
- console.log(textFieldValue)
95
- try {
96
- const result = await hf.translation({
97
- model: 't5-base',
98
- inputs: textFieldValue,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  });
100
- document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
101
- } catch (error) {
102
- console.error("Error during translation:", error);
103
 
 
104
  }
105
- }
106
-
107
- window.addEventListener("DOMContentLoaded", (event) => {
108
- initializeModel();
109
- document.getElementById("translateButton2").addEventListener("click", translateText);
110
- });
111
- </script>
112
- </body>
113
-
114
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ <!-- polyfill for firefox + import maps -->
8
+ <script src="https://unpkg.com/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
9
+ <script type="importmap">
10
+ {
11
+ "imports": {
12
+ "@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@1.7.1/+esm"
13
+ }
14
+ }
15
+ </script>
16
+ </head>
17
+ <body>
18
+ <form class="w-[90%] mx-auto pt-8" onsubmit="launch(); return false;">
19
+ <h1 class="text-3xl font-bold">
20
+ <span
21
+ class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
22
+ >
23
+ Translation demo with
24
+ <a href="https://github.com/huggingface/huggingface.js">
25
+ <kbd>@huggingface/inference</kbd>
26
+ </a>
27
+ </span>
28
+ </h1>
29
 
30
+ <p class="mt-8">
31
+ First, input your token if you have one! Otherwise, you may encounter
32
+ rate limiting. You can create a token for free at
33
+ <a
34
+ target="_blank"
35
+ href="https://huggingface.co/settings/tokens"
36
+ class="underline text-blue-500"
37
+ >hf.co/settings/tokens</a
38
+ >
39
+ </p>
40
 
41
+ <input
42
+ type="text"
43
+ id="token"
44
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
45
+ placeholder="token (optional)"
46
+ />
47
 
48
+ <p class="mt-8">
49
+ Pick the model you want to run. Check out over 10k models for text to
50
+ text generation
51
+ <a
52
+ href="https://huggingface.co/models?pipeline_tag=text2text-generation&sort=likes"
53
+ class="underline text-blue-500"
54
+ target="_blank"
55
+ >
56
+ here</a
57
+ >
58
+ </p>
59
 
60
+ <!-- Default model: https://huggingface.co/google/flan-t5-xxl -->
61
+ <input
62
+ type="text"
63
+ id="model"
64
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
65
+ value="t5-base"
66
+ required
67
+ />
68
 
69
+ <p class="mt-8">Finally the prompt</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
 
71
+ <textarea
72
+ class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
73
+ rows="5"
74
+ id="prompt"
75
+ >My name is Wolfgang and I live in Amsterdam
76
+ </textarea
77
+ >
78
 
79
+ <button
80
+ id="submit"
81
+ class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
82
+ >
83
+ Run
84
+ </button>
85
+
86
+ <p class="text-gray-400 text-sm">Translation</p>
87
+ <div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
88
+ Output will be here
89
+ </div>
90
+
91
+ <p>Check out the <a class="underline text-blue-500" href="https://huggingface.co/spaces/huggingfacejs/streaming-text-generation/blob/main/index.html" target="_blank">source code</a></p>
92
+ </form>
93
+
94
+ <script type="module">
95
+ import { HfInference } from "@huggingface/inference";
96
+ let running = false;
97
+ async function launch() {
98
+ if (running) {
99
+ return;
100
+ }
101
+ running = true;
102
+ try {
103
+ const hf = new HfInference(
104
+ document.getElementById("token").value.trim() || undefined
105
+ );
106
+ const model = document.getElementById("model").value.trim();
107
+ const prompt = document.getElementById("prompt").value.trim();
108
+ document.getElementById("logs").textContent = "";
109
+ for await (const result of hf.tanslation({
110
+ model,
111
+ inputs: prompt,
112
+ parameters: { max_new_tokens: 250 }
113
+ }, {
114
+ use_cache: false
115
+ })) {
116
+ //document.getElementById("logs").textContent += output.token.text;
117
+ document.getElementById("logs").innerText = JSON.stringify(result, null, 2);
118
+ }
119
+ } catch (err) {
120
+ alert("Error: " + err.message);
121
+ } finally {
122
+ running = false;
123
+ }
124
+ }
125
+ window.launch = launch;
126
+
127
+ /*
128
+ async function translateText() {
129
+ const textFieldValue = document.getElementById("translationText").value.trim();
130
+
131
+ let result = await translator(textFieldValue, {
132
+ src_lang: 'hin_Deva', // Hindi
133
+ tgt_lang: 'fra_Latn', // French
134
  });
 
 
 
135
 
136
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
137
  }
138
+ */
139
+ </script>
140
+ </body>
 
 
 
 
 
 
141
  </html>