Hugging Face's logo

Spaces:
oceankim
/
hfjsdemo
Running

App Files Community
hfjsdemo
File size: 5,166 Bytes 
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
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Summarization - Hugging Face Transformers.js</title>

    <script type="module">
        // Import the library
        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';

        // Make it available globally
        window.pipeline = pipeline;
    </script>

    <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">
        <!-- Page Header -->
        <div class="header">
            <div class="header-logo">
                <img src="images/logo.png" alt="logo">
            </div>
            <div class="header-main-text">
                <h1>Hugging Face Transformers.js</h1>
            </div>
            <div class="header-sub-text">
                <h3>Free AI Models for JavaScript Web Development</h3>
            </div>
        </div>
        <hr> <!-- Separator -->

        <!-- 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>Summarization</h4>
            </div>

            <!-- Actual Content of this page -->
            <div id="summarization-container" class="container mt-4">
                <h5>Summarization with a Specific Model:</h5>
                <div class="d-flex flex-column align-items-start">
                    <label for="summarizationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
                        Summarize:</label>
                    <textarea class="form-control flex-grow-1 mb-2" id="summarizationText" rows="6"
                        style="margin-right: 15px; margin-left: 15px;">The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct.</textarea>

                    <button id="summarizeButton" class="btn btn-primary" onclick="summarizeText()">Summarize</button>
                </div>
                <div class="mt-4">
                    <h4>Output:</h4>
                    <pre id="summarizationOutputArea"></pre>
                </div>
            </div>

            <!-- 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>

        let generator;

        // Initialize the sentiment analysis model
        async function initializeModel() {
            generator = await pipeline('summarization', 'Xenova/distilbart-cnn-6-6');
        }

        async function summarizeText() {

            // Reference to the textarea and the button
            const textArea = document.getElementById("summarizationText");
            const summarizeButton = document.getElementById("summarizeButton");

            const textAreaValue = textArea.value.trim();

            document.getElementById("summarizationOutputArea").innerText = ""

            // Disable textarea and button, and set cursor to hourglass
            textArea.disabled = true;
            summarizeButton.disabled = true;
            document.body.style.cursor = "wait";

            // Ensure the DOM updates before making the API call
            setTimeout(async () => {
                let summary = await generator(textAreaValue, { max_new_tokens: 100 });

                document.getElementById("summarizationOutputArea").innerText = JSON.stringify(summary, null, 2);

                // Re-enable textarea and button, and reset cursor
                textArea.disabled = false;
                summarizeButton.disabled = false;
                document.body.style.cursor = "default";
            }, 10);
        }

        // Initialize the model after the DOM is completely loaded
        window.addEventListener("DOMContentLoaded", initializeModel);
    </script>
</body>

</html>