index.js

const { createApp, ref, onMounted, computed } = Vue;
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";

const app = createApp({
    setup() {
        const token = ref(localStorage.getItem("token") || "");
        const textToSummarize = ref("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.");
        const responseText = ref("");
        const models = ref(["facebook/bart-large-cnn"]);
        const selectedModel = ref("facebook/bart-large-cnn");
        const responseLength = ref("150");
        const temperature = ref("1.0");
        const loading = ref(false);
        const examples = ref(["simple", "wiki", "dialogue", "gov-report"]);

        const statusMessage = computed(() => {
            if (loading.value) return "Summarizing..."
            return "Ready"
        })

        const loadExampleText = async (name) => {
            const response = await fetch(`examples/${name}.txt`);
            const text = await response.text();
            textToSummarize.value = text;
        }

        const run = async () => {
            loading.value = true;
            responseText.value = "";
            localStorage.setItem("token", token.value);
            const hfInstance = new HfInference(token.value);

            try {
                const response = await hfInstance.summarization(
                    {
                        model: selectedModel.value,
                        inputs: textToSummarize.value,
                        parameters: {
                            max_length: parseInt(responseLength.value),
                            temperature: parseFloat(temperature.value),
                        },
                    },
                );
                responseText.value = response.summary_text;
            } catch (e) {
                console.log(e);
            }
            loading.value = false;
        };

        onMounted(async () => {
            const localStorageToken = localStorage.getItem("token")
            if (localStorageToken) {
                token.value = localStorageToken;
            }
        });

        return {
            token,
            textToSummarize,
            responseText,
            run,
            models,
            selectedModel,
            loading,
            responseLength,
            temperature,
            statusMessage,
            examples,
            loadExampleText
        };
    },
});

app.mount("#app");