File size: 4,492 Bytes
d8d37b0
 
 
 
 
193a47d
a9d79f0
d8d37b0
 
193a47d
d8d37b0
 
193a47d
d8d37b0
a9d79f0
d8d37b0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ffcd47a
05eec31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8d37b0
05eec31
d8d37b0
 
 
193a47d
d8d37b0
193a47d
d8d37b0
ffcd47a
d8d37b0
 
 
 
 
ffcd47a
d8d37b0
 
 
 
 
 
 
 
 
 
193a47d
 
d8d37b0
 
 
193a47d
 
d8d37b0
 
 
6bf8b5f
d8d37b0
193a47d
 
8c5d8aa
 
 
193a47d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8d37b0
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Translation - huggingface.js</title>
<!--
    <script type="module">
        // Import the library
        //import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

        // Make it available globally
        //window.pipeline = pipeline;
    </script>
-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container-main">

        <!-- Back to Home button -->
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <a href="index.html" class="btn btn-outline-secondary"
                    style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
            </div>
        </div>

        <!-- Content -->
        <div class="container mt-5">
            <!-- Centered Titles -->
            <div class="text-center">
                <h2>Natural Language Processing</h2>
                <h4>Translation</h4>
            </div>

            <!-- Actual Content of this page -->
          <form id="hf-form">
            <input
                type="text"
                style="display:none"  
                autocomplete="username"  
                value="user" 
            />
            <div>
                <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
                <input
                    id="hf-token"
                    placeholder="HF-TOKEN"
                    type="password"
                    autocomplete="new-password"
                />
            </div>
            <div id="translation-container" class="container mt-4">
                <h5>Translation w/ Xenova/t5-base:</h5>
                <div class="d-flex align-items-center">
                    <label for="translationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
                        Translate:</label>
                    <input type="text" class="form-control flex-grow-1" id="translationText2" value="My name is Wolfgang and I live in Amsterdam"
                        placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
                    <button id="translateButton2" class="btn btn-primary" onclick="translateText()">Translate</button>
                </div>
          
                <div class="mt-4">
                    <h4>Output:</h4>
                    <pre id="outputArea2"></pre>
                </div>
            </div>
          </form>
            <!-- Back to Home button -->
            <div class="row mt-5">
                <div class="col-md-12 text-center">
                    <a href="index.html" class="btn btn-outline-secondary"
                        style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
                </div>
            </div>
        </div>
    </div>

    <script type="module">
       import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';

        // Initialize the sentiment analysis model
        async function initializeModel() {
            const token = document.getElementById('hf-token').value;
            const hf = new HfInference(token);
        }

        async function translateText() {
            const textFieldValue = document.getElementById("translationText2").value.trim();

            let result = await hf.translation({
                  model: 't5-base',
                  inputs: textFieldValue,          
          });
            document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
        }  


/*          
          document.getElementById('hf-form').addEventListener('submit', async (event) => {
              event.preventDefault();
              

              
              // You can also omit "model" to use the recommended model for the task
              let result = await hf.translation({
                  model: 't5-base',
                  inputs: textFieldValue,
              document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);          
          });
            
          console.log(result);
          });
      
*/
        // Initialize the model after the DOM is completely loaded
        window.addEventListener("DOMContentLoaded", initializeModel);
    </script>
</body>

</html>