File size: 4,121 Bytes
d8d37b0
 
 
 
 
193a47d
d8d37b0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ffcd47a
05eec31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8d37b0
05eec31
d8d37b0
 
 
193a47d
d8d37b0
0281807
d8d37b0
ffcd47a
d8d37b0
 
 
 
 
ffcd47a
d8d37b0
 
 
 
 
 
 
 
 
 
193a47d
 
74e6aa1
d8d37b0
 
 
b412e31
d59a0d7
 
2216247
d8d37b0
 
 
74e6aa1
 
 
 
 
 
 
2216247
74e6aa1
4f00d6e
74e6aa1
 
 
8c5d8aa
74e6aa1
 
242a562
74e6aa1
 
0281807
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Translation - huggingface.js</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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">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/inference@2.6.4/+esm';
       let hf;

        // Initialize the sentiment analysis model
        async function initializeModel() {
            const token = document.getElementById("hf-token").value;
            console.log("TOKEN: ", token);
            hf = new HfInference();
            //console.log(hf);
        }

        async function translateText() {
        // Ensure that hf is initialized before this function is called
        if (!hf) {
            console.error("HfInference is not initialized.");
            return;
        }
        
        const textFieldValue = document.getElementById("translationText2").value.trim();
        console.log(textFieldValue)
        try {
            const result = await hf.translation({
                model: 't5-base',
                inputs: textFieldValue,          
            });
            document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
        } catch (error) {
            console.error("Error during translation:", error);

        }
    }  
       
        window.addEventListener("DOMContentLoaded", (event) => {
          initializeModel();
          document.getElementById("translateButton2").addEventListener("click", translateText);
        });
    </script>
</body>

</html>